JavaScript 系列博客(一)

JavaScript 系列博客(一)

前言

本系列博客爲記錄學習 JavaScript 的學習筆記,會從基礎開始慢慢探索 js。今天的學習筆記主要爲 js 引入、定義變量以及 JavaScript 中數據類型和數據類型之間的轉換。javascript

引入 JavaScript

什麼是JavaScript 語言?

JavaScript 是一種輕量級的腳本語言。所謂的‘’腳本語言‘’,指的是它不具有開發操做系統的能力,而是隻用來編寫相關應用程序的‘’腳本‘’,使用場景最多的是瀏覽器中。css

JavaScript 也是一種嵌入式語言。自己的核心語法不算不少,只能用來作一些數學和邏輯運算。JavaScript 自己不提供任何與 I/O相關的接口,都要靠宿主環境提供,因此 JavaScript 只適合嵌入更大型的應用程序環境,去調用宿主環境提供的接口。好比和瀏覽器的交互。html

從語法角度看,JavaScript 語言是一種‘’對象模型‘’語言(Object Models)。各類宿主環境經過這個模型,描述本身的功能和操做接口,還支持其餘編程範式(好比函數式編程)。java

JavaScript 的核心語法很是精簡,只包括兩個部分:基本的語法構造(好比操做符、控制結構、語句)和標準庫(一系列的具體對象類型,好比 Array、Date 等)。除此以外,各類宿主環境提供額外的接口(即只能在該環境使用的接口),以便 JavaScript 調用。以瀏覽器爲例,他提供個額外接口分爲三大類。編程

  1. 瀏覽器控制類:操做瀏覽器
  2. DOM 類:操做網頁的各類元素
  3. Web 類:實現互聯網的各類功能

若是宿主環境是服務器,則會提供各類操做系統的接口,好比文件操做接口,網絡通訊接口等。瀏覽器

JavaScript 與 Java的關係

其實我很早就知道 JavaScript 和 Java 了,開始也很納悶它們之間的關係,這裏詳細介紹一下。服務器

JavaScript 的基本語法和對象體系,是模仿 Java 設計的。可是JavaScript 沒有采用 Java 的靜態 類型。正是由於 JavaScript與 Java 有很大的類似性,因此這門語言從一開始的 LiveScript 更名爲 JavaScript。基本上,JavaScript 這個名字的原意是‘’很像 Java的腳本語言‘’。網絡

JavaScript 語言的函數是一種獨立的數據類型,以及採用基於原型對象的繼承鏈。這是它與 Java 語法最大的兩點區別。JavaScript 語法比 Java 要自由的多。(約束少了,問題也會多起來)。ecmascript

除此以外,Java 語言須要編譯,而 JavaScript 語言則是運行時由解釋器直接執行。ide

JavaScript 與 ECMAScript 的關係

1996年8月,微軟模仿 JavaScript 開發了一種相近的語言,取名爲JScript(JavaScript 是 Netscape 的註冊商標,微軟不能用),首先內置於IE 3.0。Netscape 公司面臨喪失瀏覽器腳本語言的主導權的局面。

1996年11月,Netscape 公司決定將 JavaScript 提交給國際標準化組織 ECMA(European Computer Manufacturers Association),但願 JavaScript 可以成爲國際標準,以此抵抗微軟。ECMA 的39號技術委員會(Technical Committee 39)負責制定和審覈這個標準,成員由業內的大公司派出的工程師組成,目前共25我的。該委員會按期開會,全部的郵件討論和會議記錄,都是公開的。

1997年7月,ECMA 組織發佈262號標準文件(ECMA-262)的初版,規定了瀏覽器腳本語言的標準,並將這種語言稱爲 ECMAScript。這個版本就是 ECMAScript 1.0 版。之因此不叫 JavaScript,一方面是因爲商標的關係,Java 是 Sun 公司的商標,根據一份受權協議,只有 Netscape 公司能夠合法地使用 JavaScript 這個名字,且 JavaScript 已經被 Netscape 公司註冊爲商標,另外一方面也是想體現這門語言的制定者是 ECMA,不是 Netscape,這樣有利於保證這門語言的開放性和中立性。所以,ECMAScript 和 JavaScript 的關係是,前者是後者的規格,後者是前者的一種實現。在平常場合,這兩個詞是能夠互換的。

ECMAScript 只用來標準化 JavaScript 這種語言的基本語法結構,與部署環境相關的標準都由其餘標準規定,好比 DOM 的標準就是由 W3C組織(World Wide Web Consortium)制定的。

ECMA-262 標準後來也被另外一個國際標準化組織 ISO(International Organization for Standardization)批准,標準號是 ISO-16262。

在 HTML 中引入 js

在以前學習 css 中有三種引入 css 的方式,那麼也有三種引入 js 的方式。

  • 行間式
<div id="ddd" onmouseover="this.style.color ='red'" onmouseleave="this.style.color = 'blue'">這是行間式 js 的 div</div>

特色:

  1. 行間式代碼塊書寫在一個個全局事件名屬性中,沒有 script 這樣的一個全局屬性;
  2. 在某一個標籤的某一個事件屬性值中,出現的 this 表明該標籤;
  3. 該標籤對象 this 能夠訪問該標籤的任意全局屬性。
  • 內聯式
<script>
    ddd.style.backgroundColor = 'pink'
</script>

特色:

  1. 能夠經過標籤的 id(惟一標識),在 js 代碼塊中訪問到該標籤(js 選擇器);
  2. js 代碼塊中語法採用的是小駝峯命名法,屬性的值都是用字符串形式進行復制;
  3. js 屬於解釋型語言,加載順序會影響執行結構。
  • 外聯式
<script src="js/01.js">
    // 被屏蔽掉的代碼塊
    ddd.style.fontSize = '100px';
</script>

特色:

  1. 經過 script 標籤的 src 數據鏈接外部 js 文件;
  2. 使用外聯的 script(擁有 src 屬性)標籤,會屏蔽掉標籤內部的 js 代碼塊;
  3. 在 js 的任意地方,均有 this對象,this 對象不指向任何標籤時,指向的是 window 對象。

在 js 中定義變量

四種定義變量的方式

語法: 關鍵詞 變量名 = 變量值

num = 10; // 省略關鍵詞, 定義的爲全局變量, 在任何位置定義, 在任何位置均可以訪問, 但不建議使用
var num = 10; // var關鍵詞, 無塊級做用域, 定義在塊級做用域中的變量, 外界也能夠訪問
let num = 20; // let關鍵詞, 有塊級做用域, 定義在塊級做用域中的變量, 外界沒法訪問
const NUM = 30; // const關鍵詞,有塊級做用域, 定義在塊級做用域中的變量, 外界沒法訪問, 且變量的值不能再被二次修改, 因此爲常量

/* 產生塊級做用域的方式
{
    直接書寫
}
if語句能夠產生
while語句能夠產生
for語句也能夠產生
*/

// 函數能夠產生局部做用域, 除了定義在局部做用域中的全局變量(沒有關鍵字的變量聲明), 外界能夠訪問, 其餘定義方式, 外界都不能夠訪問
// ES5 | ES6
// 是ECMAScript兩個語法版本, ES6是ES5以後的一個版本, 可是對ES5向下兼容, ES6中支持ES5語法

命名規範

// 命名規範
// 變量命名規範
// 能夠由哪些組成: 字母, 數字, _, $, 中文(通常不考慮)
// 能夠以什麼開頭: 字母, _, $, 中文
// 不能出現什麼: 關鍵字, 保留字
// 提倡什麼書寫規範: 小駝峯, 支持_鏈接語法
好的 = "真好";
console.log(好的);

數據類型

值類型

  • number 類型
var num = 10;
    // 類型, 值
    console.log(typeof(num), num)
    // 判斷方式
    console.log(typeof num == 'number');

    num = 3.14;
    console.log(typeof(num), num);
  • string類型
var str = '單引號字符串';
    console.log(typeof(str), str);
    str = "雙引號字符串";
    console.log(typeof(str), str);
  • boolean 類型
var res = true;
    console.log(typeof(res), res);
    res = false;
    console.log(typeof(res), res);
  • undefined 類型
console.log(typeof(abc), abc);
    var abc = undefined;
    console.log(typeof(abc), abc);

引用類型

  • function 類型
var fn = function (a, b) { return a + b; };
    console.log(typeof(fn), fn);
  • object 類型(類字典方式來使用)
var obj = {
        name: 'egon',
        age: 78
    };
    console.log(typeof(obj), obj);
    console.log(obj instanceof Object);

其餘形式對象

  • null 類型
var xyz = null;
    console.log(typeof(xyz), xyz);  // object null
    console.log(xyz instanceof Object);  // false => Null類型

具體的對象類型

  • Array 類型
var a = new Array(1, 2, 3, 4, 5);
    console.log(a, typeof a);
    // 判斷方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof Array);
  • Date 類型
var a = new Date();
    console.log(a, typeof a);
    // 判斷方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof Date);
  • RegExp 類型
var a = new RegExp('a');
    a = /[abc]/;
    console.log(a, typeof a);
    // 判斷方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof RegExp)

    // 使用正則
    console.log('abc'.match(a))

數據類型之間的轉換

  • number 與 boolean 類型
// boolean類型的true就是數字1, false就是數字0
    console.log((true + true) * 10 * false)
    // number 中 0, NaN 能夠直接當false來使用, 其餘的均可以當true來使用
  • string,boolean 轉換爲 number
var a = '10'; // => 10
    a = '3.14';  // => 3.14
    a = '3.14.15';  // => NaN
    var b = true;

    var n1 = Number(a);
    console.log(n1)
    var n2 = Number(b);
    console.log(n2)

    a = '3.14.15';  // 3.14
    a = 'a3.14';  // NaN
    console.log(parseFloat(a));

    a = '3.94.15';  // 3
    console.log(parseInt(a));

    // 體現弱語言類型
    a = '10';
    var res = +a; // number 10
    console.log(typeof(res), res)
  • number,string 轉換爲 boolean
// 在分支或循環判斷中, 系統會將數字與字符串類型自動轉換爲布爾類型
    // 不在判斷中, 如何轉換
    console.log(Boolean(""));
    console.log(Boolean(0));
    console.log(Boolean(NaN));
    console.log(Boolean(null));

    console.log(Boolean("1"));
    console.log(Boolean(-100));
  • number,boolean 轉換爲 string
console.log(String(true));
    console.log(String(1));

    var a = 123;
    console.log(a.toString());
    console.log(123..toString());
    console.log(3.14.toString());

    var c = 123 + "";
    console.log(typeof c, c);

    // 用例
    var z1 = 2 + +"5";  // 7
    z1 = 2 + "5"; // "25"
    // z1 = 2 ++"5";  // 語法錯誤 ++連在一塊兒是 ++語法(瞭解)
    var z2 = "5" - 2;  // 3
    console.log(z1, z2);

    // 補充
    // NaN與NaN不相等

總結

一.JS三個組成部分

  • ES: ECMAScript語法
  • DOM: document對象模型 => 經過js代碼與頁面文檔(出如今body中的全部可視化標籤)進行交互
  • BOM: borwser對象模型 => 經過js代碼與瀏覽器自帶功能進行交互

二.引入方式

  • 行間式
出如今標籤中的全局事件屬性中
this表明該標籤, 能夠訪問全局屬性, 再訪問具體操做對象(eg: this.style.color = "red")
  • 內聯式
出如今script腳本標籤中
能夠經過標籤的id惟一標識,在js代碼塊中操做頁面標籤
js採用的是小駝峯命名規範, 屬於解釋性語言(由上至下依次解釋執行)
  • 外聯式
經過script標籤的src屬性連接外部js文件, 連接後, script標籤自己內部的js代碼塊將會被屏蔽
在任何位置均可以使用this對象,當this對象不指向任意一個標籤時,表明的是window對象
  • js具體出現的位置
head標籤的底部: 依賴性js庫
body標籤的底部(body與html結束標籤的之間): 功能性js腳本

三.變量的定義

四種定義變量的方式
語法: 關鍵詞 變量名 = 變量值

num = 10; // 省略關鍵詞, 定義的爲全局變量, 在任何位置定義, 在任何位置均可以訪問, 但不建議使用
var num = 10; // var關鍵詞, 無塊級做用域, 定義在塊級做用域中的變量, 外界也能夠訪問
let num = 20; // let關鍵詞, 有塊級做用域, 定義在塊級做用域中的變量, 外界沒法訪問
const NUM = 30; // const關鍵詞,有塊級做用域, 定義在塊級做用域中的變量, 外界沒法訪問, 且變量的值不能再被二次修改, 因此爲常量

/* 產生塊級做用域的方式
{
    直接書寫
}
if語句能夠產生
while語句能夠產生
for語句也能夠產生
*/

// 函數能夠產生局部做用域, 除了定義在局部做用域中的全局變量(沒有關鍵字的變量聲明), 外界能夠訪問, 其餘定義方式, 外界都不能夠訪問
// ES5 | ES6
// 是ECMAScript兩個語法版本, ES6是ES5以後的一個版本, 可是對ES5向下兼容, ES6中支持ES5語法
// 命名規範
// 變量命名規範
// 能夠由哪些組成: 字母, 數字, _, $, 中文(通常不考慮)
// 能夠以什麼開頭: 字母, _, $, 中文
// 不能出現什麼: 關鍵字, 保留字
// 提倡什麼書寫規範: 小駝峯, 支持_鏈接語法
好的 = "真好";
console.log(好的);

四.三種彈出框

// 普通彈出框
// alert("你丫真帥!!!");

// 輸入框: 以字符串形式接收用戶輸入內容
// var info = prompt("請輸入內容:");
// console.log(info)

// 確認框: 根據用戶選擇確認或取消, 獲得 true | false 兩個布爾結果
// var res = confirm("你是豬嗎?");
// console.log(res)

五.數據類型

// 值類型
var a = 10;  // Number 10
var a = 'abc';  // String abc
var a = true;  // Boolean true
var a = undefined  // undefined undefined
// 引用類型
var a = function(){}  // function f(){}
var a = {}  // Object {}
var a = null  // Null null

// 其餘Object具體體現
Array | Date | RegExp

六.值類型的類型轉換

// 1.經過類型聲明轉換
Number() | String() | Boolean()

// 2.方法(函數)
parseInt('10') | parseFloat('3.14')
123..toString()

// 3.隱式轉換
+'10' => 10
'' + 10 => '10'
相關文章
相關標籤/搜索