一、JavaScript起源

JavaScript誕生于1995年，它當(dāng)時(shí)的目的是為了表單輸入的驗(yàn)證。因?yàn)樵贘avaScript問(wèn)世之前，表單的驗(yàn)證都是通過(guò)服務(wù)器端驗(yàn)證。而當(dāng)時(shí)都是電話撥號(hào)上網(wǎng)年代，服務(wù)器驗(yàn)證數(shù)據(jù)是一件非常痛苦的事情。

二、什么是JavaScript

JavaScript是一種具有面向?qū)ο竽芰?、解釋型的程序設(shè)計(jì)語(yǔ)言。更具體一點(diǎn)，它是基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。因?yàn)樗恍枰谡Z(yǔ)言環(huán)境下運(yùn)行，而只需要支持它的瀏覽器即可。主要目的是，驗(yàn)證發(fā)往服務(wù)器端的數(shù)據(jù)、增加web互動(dòng)、加強(qiáng)用戶體驗(yàn)度等。

JavaScript與Java，就像是雷鋒塔與雷鋒，兩者之間并沒(méi)有任何關(guān)系。

• 開(kāi)發(fā)公司
  java: Sun
  js: 網(wǎng)景公司
• 對(duì)象
  java: 面向?qū)ο?br> js: 基于對(duì)象
• 數(shù)據(jù)類型
  java: 強(qiáng)類型的語(yǔ)言【每個(gè)變量必須指定具體的數(shù)據(jù)類型】 int i = 10
  js: 弱類型語(yǔ)言【變量的數(shù)據(jù)類型由值決定】var i = 10; Python中是i = 10

三、特點(diǎn)

• 交互性：實(shí)現(xiàn)信息的動(dòng)態(tài)交互
• 安全性：不可以直接訪問(wèn)磁盤上的文件
• 跨平臺(tái)性：只要是可以解析js的瀏覽器都可以使用，和平臺(tái)無(wú)關(guān)

四、JavaScript核心

JavaScript應(yīng)該由三個(gè)不同的部分組成: 核心(ECMAScript)、文檔對(duì)象模型(DOM)、瀏覽器對(duì)象模型(BOM)。

• ECMAScript
  ECMA:歐洲計(jì)算機(jī)協(xié)會(huì)
  由ECMA組織指定js的一系列的語(yǔ)法

• 文檔對(duì)象模型(DOM)
  文檔對(duì)象模型(DOM，Document Object Model)是針對(duì)XML但經(jīng)過(guò)擴(kuò)展用于HTML的應(yīng)用程序編程接口(API，Application Programming Interface)。

• 瀏覽器對(duì)象模型(BOM)
  訪問(wèn)和操作瀏覽器窗口的瀏覽器對(duì)象模型(BOM，Browser Object Model)。開(kāi)發(fā)人員使用BOM可以控制瀏覽器顯示頁(yè)面以外的部分。

五、JavaScript的引入

• JS代碼，可以放在script標(biāo)簽內(nèi)，script標(biāo)簽可以放置在HTML文檔任何位置；

  <script>
    // JS代碼
  </script>

• JS代碼，可以放置在外部的js文件中，通過(guò)script標(biāo)簽的src屬性鏈接到頁(yè)面中；

<script type="text/javascript" src="test.js" ></script>

注意: 導(dǎo)入外部JS文件的script不要添加JS代碼；

注意

六、輸出方式

• 向網(wǎng)頁(yè)文檔中輸出

document.write()
document.writeln()

向網(wǎng)頁(yè)文檔中輸出

• 向web控制臺(tái)輸出

console.log()

向web控制臺(tái)輸出

• 警告框

alert()

七、變量

JavaScript是弱類型腳本語(yǔ)言，使用變量之前可以無(wú)需定義；所以JavaScript支持兩種方式引入變量。(其他語(yǔ)言例如C語(yǔ)言中，在定義時(shí)都會(huì)有類型的區(qū)分int a; float b;)

• 變量

python數(shù)據(jù)類型: Number,Boolean, String, None, List, tuple, Dict, Set
JavaScript數(shù)據(jù)類型: Number, Boolean, String, Null,undefined, Array數(shù)組, 對(duì)象Object

• 隱式定義: 直接給變量賦值

    // 定義一個(gè)變量a，其值為'hello world'
    a = "hello world";
    b = 10;

• 顯式定義: 使用var關(guān)鍵字定義變量(使用該方式聲明變量時(shí)可以沒(méi)有初始值，聲明的變量類型是不確定的)

  // 聲明變量a，數(shù)據(jù)類型是不確定的
  var a;  
  // 定義一個(gè)變量b，其值為'hello world'
  var b = "hello world";
  var c = 3;

• 一次性定義多個(gè)變量

  var a,b,c;
  var i=0, j=0, k=0;

• 命名規(guī)則

  a、變量名必須以字母或下劃線“_”或者“$”開(kāi)頭；
  b、變量名長(zhǎng)度不能超過(guò)255字符；
  c、變量名中不允許使用空格，首字符不能為數(shù)字；
  d、變量名區(qū)分大小寫(備注: JavaScript是區(qū)分大小寫的語(yǔ)言)；

八、數(shù)據(jù)類型

• 一般的數(shù)據(jù)類型

- Boolean:布爾類型
- Number：數(shù)字類型
- String：字符串
- Object：對(duì)象
- Array：數(shù)組【類似于Python中列表】
- Funtion：函數(shù)類型

typeof 判斷數(shù)據(jù)類型

• 特殊的數(shù)據(jù)類型

- Null:當(dāng)定義了一個(gè)變量之后，但是這個(gè)變量沒(méi)有任何的指向，則它的類型就是Null，使用typeof操作符判斷獲取的結(jié)果為object
- Undefined:定義一個(gè)變量，但是沒(méi)有賦初始值
- NaN: Not a Number,不是一個(gè)數(shù)字

九、運(yùn)算符

• 算術(shù)運(yùn)算符：

++ :自增運(yùn)算符
--：自減運(yùn)算符

• 邏輯運(yùn)算符

Python：and   or not
js：&&     ||    !

• 關(guān)系運(yùn)算符

  和Python中一樣

• 賦值運(yùn)算符

  =  +=  -=【和Python中一樣】

• 三目運(yùn)算符：

語(yǔ)法：
  關(guān)系表達(dá)式？表達(dá)式1【變量1或者常量1】：表達(dá)式2【變量1或者常量1】;
原理：
  如果關(guān)系運(yùn)算符成立，則返回表達(dá)式1的值，否則返回表達(dá)式2的值

• ==和===之間的區(qū)別

== 值相等
=== 值相等且類型相同

十、字符串拼接

加號(hào)有兩種含義，如果都是為number類型時(shí)，即是加法操作；如果有一個(gè)是為字符串類型，即是字符串拼接；

  var str1 = '中國(guó)';
  var str2 = '臺(tái)灣';
  // 將字符串str1和str2拼接起來(lái)
  var str3 = str1 + str2;

十一、JS中的語(yǔ)句

• 順序語(yǔ)句、分支語(yǔ)句、循環(huán)語(yǔ)句

Python中：
    分支語(yǔ)句：if，if-else   ,if-elif-else  
    循環(huán)語(yǔ)句：while，for-in

JS中：
    分支語(yǔ)句：if ,if-else, if-else if-else,  swicth-case
    循環(huán)語(yǔ)句：while,do-while,for

• if語(yǔ)句

- 單分支:
  if(條件){

  }

- 雙分支
  if(條件){

  } else {

  }

- 多分支
  if (條件1){

  } else if(條件2){

  } else if(條件3){

  }
  ...
  else {

  }

- 嵌套
  if(條件1){
    if(條件2){

    }
  }

• switch語(yǔ)句
  可以實(shí)現(xiàn)多選一的操作，效果類似于if語(yǔ)句中的多分支。
  根據(jù)表達(dá)式或者變量的值進(jìn)行匹配，如果和case分支后面的常量值匹配上了，則執(zhí)行對(duì)應(yīng)的case分支，從上往下依次進(jìn)行匹配，當(dāng)所有的case分支都沒(méi)有匹配上的時(shí)候，則執(zhí)行default分支。

switch:選擇
case：對(duì)應(yīng)的分支
break:結(jié)束
default；默認(rèn)

switch(表達(dá)式或者變量){
 ?  case 常量值1：{
 ?      語(yǔ)句1；
 ?      break;
 ?  }
 ?  case 常量值2：{
 ?      語(yǔ)句2；
 ?      break;
 ?  }
 ?  case 常量值3：{
 ?      語(yǔ)句3；
 ?      break;
 ?  }
 ?  ...
 ?  default:{
 ?      語(yǔ)句
 ?  }
}

• for循環(huán)語(yǔ)句

for(表達(dá)式1; 表達(dá)式2; 表達(dá)式3){
  循環(huán)體
}

備注
  表達(dá)式1: 初始化表達(dá)式【表達(dá)式1只會(huì)被執(zhí)行一次】
  表達(dá)式2: 條件表達(dá)式
  表達(dá)式3: 循環(huán)結(jié)束之后的操作

for-in遍歷數(shù)組，即獲取數(shù)組下標(biāo)；for-in遍歷對(duì)象，即獲取對(duì)應(yīng)的key；

• while循環(huán)語(yǔ)句

while(條件){
  循環(huán)體
}

備注
  符合條件即執(zhí)行循環(huán)體；不符合條件即結(jié)束循環(huán);

• do-while語(yǔ)句

do{
  循環(huán)體
} while(條件);

備注
  先執(zhí)行，后判斷；符合條件即執(zhí)行循環(huán)體；不符合條件即結(jié)束循環(huán)；

• break和continue

- break:表示跳出整個(gè)循環(huán)或者switch語(yǔ)句
  a.可以使用在分支語(yǔ)句switch中
  b.使用在循環(huán)中

- continue:結(jié)束當(dāng)前循環(huán)，繼續(xù)下一次循環(huán)
  a.只能用在循環(huán)語(yǔ)句中

• 函數(shù)

- python中的函數(shù)
  def 函數(shù)名(參數(shù)列表):
    函數(shù)體

- JS中的函數(shù)
  方式一: 使用function關(guān)鍵字
  function 函數(shù)名(參數(shù)列表){
    函數(shù)體
    返回值(可有可無(wú))
  }

  方式二: 匿名函數(shù)
  var 變量名 = function(參數(shù)列表){
    函數(shù)體
    返回值
  }

• 練習(xí)案例
  案例1: 一個(gè)新入職，月工資為2000元的員工，每年漲工資2%，到退休時(shí)工作50年的月工資是多少;
  案例2: 輸出100以內(nèi)所有7的倍數(shù)
  案例3: 打印100–200之間所有能被3或者7整除的數(shù);
  案例4: 計(jì)算10的階乘;
  案例5: 計(jì)算1+3+5+...+99的和; (多種方法實(shí)現(xiàn))
  案例6: 對(duì)應(yīng)打印出下列圖案1

  *                     
  * *　      
  * * *     
  * * * *       
  * * * * *
  
  

  案例7: 打印99乘法表;
  案例8: 輸入行和列生成對(duì)應(yīng)表格;

十二、數(shù)組

• 數(shù)組的定義

方式一:
    new Array(參數(shù),參數(shù),...) // 只有一個(gè)數(shù)字參數(shù)時(shí)是數(shù)組的長(zhǎng)度(new可以省略,但一般盡量寫上)
例如:
    var arr = new Array();   // 定義一個(gè)空數(shù)組 
    var arr = new Array(10);  // 創(chuàng)建一個(gè)包含 10 個(gè)元素的數(shù)組，沒(méi)有賦值
    var arr = new Array(“芙蓉姐姐”,30);  // 創(chuàng)建一個(gè)數(shù)組有兩個(gè)元素

方式二:
    var arr = [1,2,3,4,5];  // 字面量定義方式

• 數(shù)組元素的訪問(wèn)

arr[0]: 表示數(shù)組的第一個(gè)元素，0是下標(biāo)，也叫索引
arr[1]: 表示數(shù)組的第二個(gè)元素，1是下標(biāo) 

• 數(shù)組的遍歷

var arr = [1,2,3,4,5];
for(var j=0; j<arr.length; j++){
  console.log(arr[j])
}

length數(shù)組長(zhǎng)度屬性

• 數(shù)組常用方法

push(): 接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組的末尾，并返回修改后數(shù)組的長(zhǎng)度;
pop(): 從數(shù)組末尾移除最后一個(gè)元素，減少數(shù)組的 length 值，然后返回移除的元素;
sort() : 從小到大排序 ,  原數(shù)組也被升序排序了(默認(rèn)按照字符串的排序規(guī)則，ASCII碼) 
  排序處理: arr.sort(function(a, b){return a>b})
reverse() : 逆向排序, 原數(shù)組也被逆向排序了
slice() :  不修改原數(shù)組, 將原數(shù)組中的指定區(qū)域數(shù)據(jù)提取出來(lái)并返回一個(gè)新數(shù)組
splice() : 截取原數(shù)組中指定的數(shù)據(jù), 會(huì)改變?cè)瓟?shù)組
  arr.splice(2, 3) // 刪除元素  
  arr.splice(2, 0, 9,"hello")  // 添加元素
  arr.splice(2, 1, 9,"hello")  // 替換元素
indexOf() : 獲取數(shù)組中第一個(gè)出現(xiàn)指定元素的下標(biāo)， 如果不存在則返回-1
join() : 將數(shù)組中的元素用指定字符連接，連接成為一個(gè)字符串
  var str = arr.join() // 默認(rèn)使用逗號(hào)","連接
  var str = arr.join('') // 使用''連接
  var str = arr.join('-')  // 使用'-'連接 

十三、字符串

• 字符串的定義

  var str = 'hello world!'；

• 下標(biāo)

 console.log( str[0] );

• 字符串的方法

String.fromCharCode(97);  將ASCII碼轉(zhuǎn)換成字符
str.indexOf('abc');  查找字符串第一次出現(xiàn)的位置, 如果沒(méi)找到則返回-1
str.replace(); 替換字符串
str.substring(start,end); 截取字符串 范圍是[start, end)
str.split(separator, howmany); 根據(jù)分隔符、拆分成數(shù)組
str.toLowerCase(); 把字符串轉(zhuǎn)換成小寫
str.toUpperCase(); 把字符串轉(zhuǎn)換成大寫

十四、日期

• Date對(duì)象
  Date類型使用自UTC(Coordinated Universal Time,國(guó)際協(xié)調(diào)時(shí)間) 1970年1月1日午夜(零時(shí))開(kāi)始經(jīng)過(guò)的毫秒數(shù)來(lái)保存日期。Date類型保存的日期能夠精確到1970年1月1日之前或之后的 285616年
  時(shí)間戳： 從1970年到指定時(shí)間的毫秒數(shù)

• Date對(duì)象的創(chuàng)建

// 在調(diào)用Date構(gòu)造方法而不傳遞參數(shù)的情況下，新建的對(duì)象自動(dòng)獲取當(dāng)前的時(shí)間和日期
var d = new Date();  

// 創(chuàng)建日期對(duì)象并指定時(shí)間
var d = new Date("2019/08/22");
var d = new Date(2019, 04, 13, 14, 34);
注: 日期的格式可以是“2019/08/22”，“2019-08-22”，或1970年當(dāng)前日期的毫秒數(shù)1443453475234

• 日期Date的常用方法

setDate() / getDate();   從Date對(duì)象中返回一個(gè)月中的某一天(1~31)
getDay();   從Date對(duì)象返回一周中的某一天(0~6)
set / getMonth();  從Date對(duì)象中返回月份(0~11)
set / getFullYear();   從Date對(duì)象以四位數(shù)返回年份
set / getHours();     返回Date對(duì)象的小時(shí)(0~23)
set / getMinutes();   返回Date對(duì)象的分鐘(0~59)
set / getSeconds();   返回Date對(duì)象的秒數(shù)(0~59)
set / getMilliseconds();   返回Date對(duì)象的毫秒
set / getTime();   返回1970年1月1日至今的毫秒數(shù)

十五、對(duì)象Object

• 對(duì)象的概念
  對(duì)象Object 是一種引用數(shù)據(jù)類型。
  在 ECMAScript 中對(duì)象可以存儲(chǔ)變量和函數(shù)(數(shù)據(jù)和功能)。

• 創(chuàng)建對(duì)象

方式一:  使用new
  var obj = new Object();        // new方式  
  obj.name = '張三';      // 創(chuàng)建屬性字段    
  obj.age = 18;     // 創(chuàng)建屬性字段

方式二: 字面量方式 
  var obj = {               
    name :'張三',    // 創(chuàng)建屬性字段,最后加逗號(hào) 
    age : 18，
    run : function() {   // 對(duì)象中添加方法(函數(shù))run
      retrun “正在跑步..”; 
    }
  };

• 兩種屬性輸出方式

      alert(obj.age);       // 點(diǎn)表示法輸出 
      alert(obj['age']);        // 中括號(hào)表示法輸出，注意引號(hào)

• 使用 delete 刪除對(duì)象屬性 或 方法

     delete obj.name;     // 刪除屬性
     delete obj.run;     // 刪除方法

十六、定時(shí)器

• 定時(shí)器setInterval

// 開(kāi)啟定時(shí)器
var timer = setInterval( function(){},1000);
// 關(guān)閉后定時(shí)器
clearInterval(timer); 

• 延時(shí)器setTimeout

// 開(kāi)啟延時(shí)器
var timer = setTimeout( function(){},1000);
// 關(guān)閉延時(shí)器
clearTimeout(timer); 

十七、HTML屬性操作

• 通過(guò)id獲取頁(yè)面對(duì)應(yīng)元素(document.getElementById)

  var num1 = document.getElementById('num1');

• 屬性名、屬性值

  <input id=“bt1” type=“button” value=“按鈕”/>
    屬性名: id
    屬性值: bt1
    (注: 屬性名="屬性值")

• 屬性讀操作: 獲取、找到

  元素.屬性名

• 屬性寫操作: 添加、替換

  元素.屬性名 = 新值

• 元素內(nèi)的HTML內(nèi)容

  元素.innerHTML

注意事項(xiàng):
a、JS中不允許出現(xiàn)‘-’，即將‘-’去除掉，之后將后面小寫字母改為大寫字母即可；
例如:
font-size —> fontSize
padding-top —> paddingTop
p1.style.fontSize = '10px';
b、JS中class屬性要改為className(class是保留字)
例如: 想要改變某個(gè)元素的class名，即是p1.className = 'purpleStyle';

十八、案例 — 猜數(shù)字游戲

• 隨機(jī)數(shù)

  Math.random(): 得到0~1但不等于1的隨機(jī)數(shù)；
  parseInt(): 取整;
  parseInt( Math.random() );

• 條件判斷

  if( 條件1 == 條件2 ){     // 符合條件即執(zhí)行下面代碼區(qū)域
    // 代碼區(qū)域
  } else if(條件1 == 條件2){   // 符合條件即執(zhí)行下面代碼區(qū)域
    // 代碼區(qū)域
  } else {  // 都不符合上述要求，即執(zhí)行下面代碼區(qū)域
    // 代碼區(qū)域
  }