一骂倘、JavaScript起源

JavaScript誕生于1995年睡陪，它當(dāng)時的目的是為了表單輸入的驗證。因為在JavaScript問世之前庭敦，表單的驗證都是通過服務(wù)器端驗證疼进。而當(dāng)時都是電話撥號上網(wǎng)年代，服務(wù)器驗證數(shù)據(jù)是一件非常痛苦的事情秧廉。

二伞广、什么是JavaScript

JavaScript是一種具有面向?qū)ο竽芰Α⒔忉屝偷某绦蛟O(shè)計語言疼电。更具體一點嚼锄，它是基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。因為它不需要在語言環(huán)境下運行蔽豺，而只需要支持它的瀏覽器即可区丑。主要目的是，驗證發(fā)往服務(wù)器端的數(shù)據(jù)修陡、增加web互動沧侥、加強用戶體驗度等。

JavaScript與Java濒析，就像是雷鋒塔與雷鋒正什，兩者之間并沒有任何關(guān)系啥纸。

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

三号杏、特點

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

四、JavaScript核心

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

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

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

• 瀏覽器對象模型(BOM)
  訪問和操作瀏覽器窗口的瀏覽器對象模型(BOM护赊，Browser Object Model)惠遏。開發(fā)人員使用BOM可以控制瀏覽器顯示頁面以外的部分。

五骏啰、JavaScript的引入

• JS代碼节吮，可以放在script標簽內(nèi)，script標簽可以放置在HTML文檔任何位置判耕；

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

• JS代碼透绩，可以放置在外部的js文件中，通過script標簽的src屬性鏈接到頁面中壁熄；

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

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

注意

六、輸出方式

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

document.write()
document.writeln()

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

• 向web控制臺輸出

console.log()

向web控制臺輸出

• 警告框

alert()

七草丧、變量

JavaScript是弱類型腳本語言狸臣，使用變量之前可以無需定義；所以JavaScript支持兩種方式引入變量昌执。(其他語言例如C語言中固棚，在定義時都會有類型的區(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ù)組, 對象Object

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

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

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

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

• 一次性定義多個變量

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

• 命名規(guī)則

  a委粉、變量名必須以字母或下劃線“_”或者“$”開頭呜师；
  b、變量名長度不能超過255字符贾节；
  c汁汗、變量名中不允許使用空格，首字符不能為數(shù)字栗涂；
  d知牌、變量名區(qū)分大小寫(備注: JavaScript是區(qū)分大小寫的語言)；

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

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

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

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

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

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

九沮峡、運算符

• 算術(shù)運算符：

++ :自增運算符
--：自減運算符

• 邏輯運算符

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

• 關(guān)系運算符

  和Python中一樣

• 賦值運算符

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

• 三目運算符：

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

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

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

十、字符串拼接

加號有兩種含義望薄，如果都是為number類型時疟游，即是加法操作；如果有一個是為字符串類型痕支，即是字符串拼接乡摹；

  var str1 = '中國';
  var str2 = '臺灣';
  // 將字符串str1和str2拼接起來
  var str3 = str1 + str2;

十一、JS中的語句

• 順序語句采转、分支語句聪廉、循環(huán)語句

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

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

• if語句

- 單分支:
  if(條件){

  }

- 雙分支
  if(條件){

  } else {

  }

- 多分支
  if (條件1){

  } else if(條件2){

  } else if(條件3){

  }
  ...
  else {

  }

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

    }
  }

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

switch:選擇
case：對應(yīng)的分支
break:結(jié)束
default闸度；默認

switch(表達式或者變量){
 ?  case 常量值1：{
 ?      語句1竭贩；
 ?      break;
 ?  }
 ?  case 常量值2：{
 ?      語句2；
 ?      break;
 ?  }
 ?  case 常量值3：{
 ?      語句3莺禁；
 ?      break;
 ?  }
 ?  ...
 ?  default:{
 ?      語句
 ?  }
}

• for循環(huán)語句

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

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

for-in遍歷數(shù)組留量，即獲取數(shù)組下標；for-in遍歷對象哟冬，即獲取對應(yīng)的key楼熄；

• while循環(huán)語句

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

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

• do-while語句

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

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

• break和continue

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

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

• 函數(shù)

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

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

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

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

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

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

十二峰锁、數(shù)組

• 數(shù)組的定義

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

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

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

arr[0]: 表示數(shù)組的第一個元素双戳，0是下標，也叫索引
arr[1]: 表示數(shù)組的第二個元素糜芳，1是下標 

• 數(shù)組的遍歷

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

length數(shù)組長度屬性

• 數(shù)組常用方法

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

十三、字符串

• 字符串的定義

  var str = 'hello world!'扛吞；

• 下標

 console.log( str[0] );

• 字符串的方法

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

十四、日期

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

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

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

// 創(chuàng)建日期對象并指定時間
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對象中返回一個月中的某一天(1~31)
getDay();   從Date對象返回一周中的某一天(0~6)
set / getMonth();  從Date對象中返回月份(0~11)
set / getFullYear();   從Date對象以四位數(shù)返回年份
set / getHours();     返回Date對象的小時(0~23)
set / getMinutes();   返回Date對象的分鐘(0~59)
set / getSeconds();   返回Date對象的秒數(shù)(0~59)
set / getMilliseconds();   返回Date對象的毫秒
set / getTime();   返回1970年1月1日至今的毫秒數(shù)

十五濒持、對象Object

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

• 創(chuàng)建對象

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

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

• 兩種屬性輸出方式

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

• 使用 delete 刪除對象屬性 或 方法

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

十六村视、定時器

• 定時器setInterval

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

• 延時器setTimeout

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

十七由境、HTML屬性操作

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

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

• 屬性名、屬性值

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

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

  元素.屬性名

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

  元素.屬性名 = 新值

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

  元素.innerHTML

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

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

• 隨機數(shù)

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

• 條件判斷

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