一、JavaScript 概述
javaScript 語言主要是完成頁面的數據驗證，因此它運行在客戶端， 需要運行瀏覽器來解析執行 JavaScript 代碼。js 是網景公司 （Netscape）的產品，最早取名為 LiveScript 最后借 java 的熱度 改為 javaScript。
JS 是弱類型（類型可變）JAVA 是強類型（確定好的變量類型，類型不可變）
編寫第一個 JavaScript
二、JavaScript 特點
-
js 是腳本語言，采用小程序端的方式實現編程
-
js 是解釋性語言，根據代碼順序逐一解釋，其中某一行有錯，js 就會卡在此處無法進入下一步。
-
Js 是一種基于對象的語言
-
js 是一種安全性語言，具有 web 安全特性不允許訪問本地 硬盤，也不允許對網絡文件進行修改，只能通過瀏覽器進行瀏覽或者動態交互。
-
js 跨平臺性
JS 注釋
1.單行注釋以 // 開頭。
2.多行注釋以 /* 開始，以 */ 結尾
三、js 基本語法
1、區分大小寫
2、分號為每一行的結束符
3、注釋，單行注釋以//開頭，/*多行注釋*/
4、命名規范
命名規范指的就是標識符，就是變量，函數的名字或者函數的 參數名，變量名命名方法常見的有匈牙利命名法、駝峰命名法 和 帕斯卡命名法。
駝峰法命名規范(包括函數名，變量等):
-
名字中可以有字母、下劃線或者美元符號、數字
-
必須以字母、下劃線或者美元符號開始，不能數字開頭，也不能使用特殊符號。
-
命名不能是系統的關鍵字：比如 new ,if,class...... 區分大小寫
-
命名最好用有意義的名稱。比如說 name,people......
四、輸出輸入工具
4.1.輸出彈窗
彈出帶有一條指定消息和一個確定按鈕的警告框
語法: alert(對話框中顯示的純文本)
4.2.輸出到頁面，會以HTML的語法解析里面的內容
語法: document.write(參數 1,參數 2,參數 3,...) ；
使用 document.write() 方法將內容寫到 HTML 文檔中。此功能可用于寫入文本和 HTML。
請使用 document.write() 僅僅向文檔輸出寫內容。
如果在文檔已完成加載后執行 document.write()，整個 HTML 頁面將被覆蓋。
4.3.輸入彈窗
顯示可提示用戶進行輸入的對話框
語法: prompt( 對話框中顯示的純文本,默認的輸入文本 );
兩個參數均為可選。
4.4.控制臺輸出
console.log("我是日志信息")；
在控制臺上輸出的信息,瀏覽器按下 F12 打開控制臺,Console即控制臺 可以接受任何字符串、數字和 js 對象，可以看到清 楚的對象屬性結構,不會阻塞程序的執行.
五、DOM的堵塞
js 對 DOM 樹的阻塞
-
DOM: js 操作網頁的接口，全稱為“文檔對象模型”(Document Object Model)。可以簡單理解成頁面中的元素
-
DOM 樹:元素和元素之間的關系,可以簡單理解成頁面中的元素
-
js 的執行會阻塞頁面結構的加載,此時 DOM 樹是不完整的，這
樣在調用一些 js 代碼時就可能報錯
-
防止阻塞的兩種方法:
（1）把所有 js 代碼放在 body 區域的最后
（2）添加 window.onload 事件,表示網頁加載完畢后(包括圖片、css 文件等等)執行的操作
六、JS的阻塞
js 代碼有錯誤時，從此處代碼開始以后的代碼都不會被執行
檢查錯誤代碼方法：
-
看控制臺信息
-
使用 alert()語句確定錯誤范圍，再逐一查錯。
七、嵌入JavaScript代碼的三種方式
-
內部引入 寫在<script>標簽中
<script type=”text/javascript”>...........</script>-
以外部文檔形式連接到 HTML 文檔中
<script type="text/javascript" src="one.js"></script>-
直接在 HTML 標簽中的 js 代碼
<a href="javascript:alert('我是在 html 標簽里的 js 代碼 ')">提示框</a> ? 引入區域
-
js 可以引入文檔中的任何區域，js 都可以正確執行
-
js 通常寫在 head 區域或者 body 區域
? 執行順序
-
代碼在執行過程中，另一段代碼想要執行就必須等當前代碼執行完成后才可以進行
-
JS 是按照語句出現的先后順序執行,和引入方式無關
八、常量
常量是從始至終不能被改變的數據，常量通常用來表示固定不變的量，比如圓周率，萬有引力常量。
準確的來說，在JavaScript中，確實沒有定義常量的具體語法，我們可以使用標識符大寫的方式來當作定義了常量
var PAI = 3.14; var UPPER_BOUND = 100;
九、變量
變量：從字面上看，變量是可變的的量，從編程角度講，變量是用于存儲數據的容器
實例
var x; var x = 5; var x = "John";
注：變量不僅可存放具體值，還可以存放運算結果
實例
var x; // x 為 undefined
var x = 5; // 現在 x 為數字
var x = "John" // 現在 x 為字符串注：JavaScript 擁有動態類型。這意味著相同的變量可用作不同 的類型，同一個變量可以多次賦值，后賦的值會覆蓋前面的值
練習 1
使用 js 提供的輸入款，獲取用戶輸入的信息，名字，年齡，地址，電話號碼，
使用 js 語法輸出在頁面的 div 中。
練習 2
交換兩個變量的值,a=22,b=33,使用控制臺輸出 a=33,b=22
十、數據類型
字符串（String）、
數字(Number)、
布爾(Boolean)、
數組(Array)、
對象(Object)、
空（Null）、
未定義（Undefined）。
10.1.Number:數值類型
整數和小數（js 的浮點數的運算能力很差，所以不建議使用 js 做浮點數的運算）
JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：
實例
var x1 = 34.00; // 使用小數點來寫
var x2 = 34; // 不使用小數點來寫-
Js 中整數和小數統稱為 number 類型
var a = 120;
var b = 0.120;-
js 中的數值最大值和最小值
Console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 Console.log(Number.MIN_VALUE); ? // 5e-324-
數字型三個特殊值
-
Infinity 代表無窮大，大于任何數值
-
-Infinity 代表無窮小，小于任何數值
-
NaN Not a Number 代表一個非數值
-
isNaN()
用來判斷一個變量是否為非數值類型，返回 true/false
10.2.String:字符串類型
只要是引號括起來的都是字符串類型
可以在字符串中使用引號，只要不匹配包圍字符串的引號即可
實例
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';-
字符串引號嵌套
Js 使用引號規則：外雙內單，外單內雙
var strMsg='我是"IT老王"我在欣知大數據'
-
字符串轉義字符
| 轉義符 | 解釋說明 |
|---|---|
| \n | 換行符，n 是 newline 的意思 |
| \\ | 斜杠 \ |
| \' | ' 單引號 |
| \" | " 雙引號 |
| \t | tab 縮進 |
| \b | 空格，b 是 blank 的意思 |
-
字符串長度
字符串是由若干個字符組成的，這些字符數量就是字符串的長度。
通過字符串的 length 屬性可以獲取字符串長度
var strMsg = "我是帥氣多金的程序猿！！！" alert(strMsg.length); // 13
-
字符串拼接
多個字符串之間可以使用+進行拼接，拼接方式為 字符串+任意類型=新的字符串
拼接前會把字符串相加的任何類型轉為字符串，在拼接起來
//1.字符串相加
Console.log(“hello”+” ”+”world”); //hello world
//2.數值字符串相加
Console.log(“12”+” ”+”12”); //1212
//3.數值字符串+數值
Console.log(“12”+” ”+12); //121210.3.Boolean:布爾類型
只有兩個值 false/true（常用在條件測試中，運算中 flase=0/true=1）
10.4.Undefined:空變量
表示變量沒有值
10.5.null:空對象指針
是一個只有一個值的數據類型（可以將變量設置為 null 來清空變量）
Undefined 這個值表示變量不含有值。
可以通過將變量的值設置為 null 來清空變量。
實例
cars = null; person = null;
10.6.Object:對象
由花括號分割，對象的屬性以名稱和值對的形式定義（name:value）來定義
JavaScript 數組屬于對象
實例
var cars = ["Saab","Volvo","BMW"];JavaScrip 對象
實例
var person={ firstname : "John", lastname : "Doe", id : 5566 };對象屬性有兩種尋址方式：
實例
name = person.lastname;
name = person["lastname"];10.7.獲取變量數據類型
typeof: 可以使用 typeof(變量名)查詢數據類型
10.8.數據類型的相互轉化
-
轉換為字符串類型
| 方式 | 說明 | 案例 |
|---|---|---|
| toString() | 轉成字符串 | var num = 1; alert(num.toString()); |
| String()強制轉換 | 轉成字符串 | var num = 1; alert(String(num)); |
| 加號拼接字符串 | 和字符串拼接的結果都是字符串 | var num = 1; alert(num + "我是字符串"); |
-
toString() 和 String() 使用方式不一樣。
-
三種轉換方式，我們更喜歡用第三種加號拼接字符串轉換方式，這一種方式也稱之為隱式轉換。
-
轉換為數值型（重點）
| 方式 | 說明 | 案例 |
|---|---|---|
| parseInt(String) 函數 | 將String類型轉成整數數值型 | parseInt('78') |
| parseFloat(String) 函數 | 將String類型轉成浮點數數值型 | parseFloat('78.21') |
| Number() 強制轉換函數 | 將String類型轉換為數值型 | Number('12') |
| js 隱式轉換(- * /) | 利用算術運算隱式轉換為數值型 | '12' - 0 |
-
注意 parseInt 和 parseFloat 單詞的大小寫，這2個是重點
-
轉化為布爾值
| 方式 | 說明 | 案例 |
|---|---|---|
| Boolean()函數 | 其他類型轉成布爾值 | Boolean('true'); |
-
代表空、否定的值會被轉換成false，如''、0、NaN、null、underfined
-
其余值都會被轉換為true
Undefine 和 null 是不能轉化成 String 類型的
Undefine（NaN）和 null（0）、true（1）、false（0）可轉化成 number 類型
練習 3
-
彈出一個輸入框（prompt），讓用戶輸入出生年月（用戶輸入）
-
把用戶輸入的值用變量保存起來，然后用今年的年份減去變量值，結果就是現在的年齡（程序內部處理）
-
彈出警示框（alert），把計算的結果輸出（輸出結果）
十一、運算符
11.1.算術運算符
?
| 運算符 | 描述 | 例子 | x 運算結果 | y 運算結果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 減法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余數） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| x=y++ | 5 | 6 | ||
| -- | 自減 | x=--y | 4 | 4 |
| x=y-- | 5 | 4 |
?
用于字符串的 +
-
運算符用于把文本值或字符串變量加起來（連接起來）。
-
要想在兩個字符串之間增加空格，需要把空格插入一個字符串之中：
-
如果把數字與字符串相加，結果將成為字符串
-
除了加法字符串和數值相減，相除，求余...
-
當字符串是純數字，計算機會將字符串轉為數值型進行減法計算
-
當字符串不是純數字或者無數值，則返回的值是 NAN
11.2.賦值運算符
| 運算符 | 例子 | 等同于 | 運算結果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
11.3.比較運算符
-
相等運算符 == ：判斷兩個操作數是否相等。不同的數據類型會自動轉換為相等的數據類型再做比較。
-
等同運算符=== ：全等（值和類型），嚴格意義的相等，兩個操作數的值和他們的類型必須完全一致。
-
不等于：!=
-
不等同運算符： !==
-
大于：>
-
小于：<
-
大于或等于：>=
-
小于或等于：<=
11.4.邏輯運算符
邏輯運算符用于測定變量或值之間的邏輯。
-
&& and(與)
-
|| or(或)
-
! not(非)
11.5.三元運算/三目運算/三元表達式/條件運算符
根據條件在兩個語句中執行其中的一個，使用符號 ？：
語法如下：條件表達式？語句 1：語句 2
練習 4
輸入框中輸入一個數，與 18 比較，大于 18 則在頁面顯示成年小于則顯示未成年
十二、運算符的優先級
| 優先級 | 運算符 | 說明 | 結合性 |
|---|---|---|---|
| 1 | []、.、() | 字段訪問、數組索引、函數調用和表達式分組 | 從左向右 |
| 2 | ++ -- -~!delete new typeof void | 一元運算符、返回數據類型、對象創建、未定義的值 | 從右向左 |
| 3 | *、/、% | 相乘、相除、求余數 | 從左向右 |
| 4 | +、- | 相加、相減、字符串串聯 | 從左向右 |
| 5 | <<、>>、>>> | 左位移、右位移、無符號右移 | 從左向右 |
| 6 | <、<=、>、>=、instanceof | 小于、小于或等于、大于、大于或等于、是否為特定類的實例 | 從左向右 |
| 7 | ==、!=、===、!== | 相等、不相等、全等、不全等 | 從左向右 |
| 8 | & | 按位”與“ | 從左向右 |
| 9 | ^ | 按位”異或“ | 從左向右 |
| 10 | | | 按位”或“ | 從左向右 |
| 11 | && | 短路與（邏輯”與“） | 從左向右 |
| 12 | || | 短路或（邏輯”或“） | 從左向右 |
| 13 | ?: | 條件運算符 | 從右向左 |
| 14 | =、+=、-=、*=、/=、%=、&=、|=、^=、<、<=、>、>=、>>= | 混合賦值運算符 | 從右向左 |
| 15 | , | 多個計算 | 按優先級算，然后從右向左 |
)
