js基礎 day01

一.js歷史

1.什么是JavaScript

• 1995年在網(wǎng)景公司缚忧，發(fā)明的JavaScript。一開始JavaScript叫做LiveScript，但是由于當時Java這個語言特別火择镇，就改名為JavaScript,同時期還有其他的網(wǎng)頁語言压恒，比如VBScript影暴、JScript等等，但是后來都被JavaScript打敗探赫，所以現(xiàn)在的瀏覽器中型宙，只運行一種腳本語言就是JavaScript,簡稱:JS。

a.Nombas公司 開發(fā)了 C 減減的嵌入式腳本語言 伦吠， 運行在 CEnvi 的共享軟件
b.網(wǎng)景公司 妆兑，開發(fā)了 LiveScript ->JavaScript(蹭熱度) ， 運行在 Netscape Navigator 瀏覽器
c.微軟   毛仪， 發(fā)布 IE 3.0 時搭載了一個 JavaScript 的克隆版搁嗓， 叫JScript   ， 運行在IE 3.0

2.JavaScript與ECMAScript的關系

• ECMAScript是由ECMA（歐洲計算機制造商協(xié)會）制定的javaScript標準 潭千，ECMA英文名稱是European Computer Manufacturers Association谱姓。
• JavaScript是由公司開發(fā)而成的，公司開發(fā)而成的一定是有一些問題刨晴，不便于其他的公司拓展和使用屉来。所以歐洲的這個ECMA的組織，牽頭制定JavaScript的標準狈癞，取名為ECMAScript茄靠。
• 簡單來說ECMAScript不是一門語言，而是一個標準蝶桶。符合這個標準的比較常見的有：JavaScript慨绳、Action Script（Flash中用的語言）

3.javaScript組成

esdombom.gif

• JavaScript 的核心 ECMAScript 描述了該語言的語法和基本對象；
• DOM 描述了處理網(wǎng)頁內(nèi)容的方法和接口真竖；
• BOM 描述了與瀏覽器進行交互的方法和接口脐雪。

4.JavaScript作用

• 在HTML網(wǎng)頁中，主要分為三大塊:HTML恢共、CSS战秋、JavaScript

  • HTML 從語義上構造網(wǎng)頁
  • CSS 從審美上美化界面
  • JavaScript 從交互上提升用戶的用戶體驗

• js被稱為對初學者友好的語言

二.第一個JavaScript程序

1.Script標簽的說明

• 要想寫js代碼, 必須先有<script></script>標簽,在script開始標簽和結束標簽之間寫代碼

• 和style標簽一樣type可以省略不寫

<style type="text/css">

</style>

<script type="text/javascript">

</script>

2.Script 標簽位置

• 可以放在任何位置，但是推薦放在兩個地方
  • a.放在head開始標簽和結束標簽之間
  • b.放在body結束標簽之上(推薦使用)

3.helloWorld

括號里面只能放字符串/數(shù)值/元素/對象
alert('hello world');

4.JavaScript中的注釋

• 單行注釋: 以 // 開頭,后面的內(nèi)容就是注釋
• 快捷鍵 ctr(cmd) + /
• 多行注釋: /**/ 多行注釋可以換行,但是不能嵌套
• 快捷鍵 ctr(cmd) + shift + /
• 注釋作用:用于提高代碼的可讀性
• 注釋是給人看的,方便程序員之間交流,注釋不參與程序的編譯和運行
• 注意：多行注釋不能嵌套使用

    錯誤用法：
    /*
      alert(123);
      /*
      alert(123);
      alert(123);
      */
      alert(123);
    */

三.變量

3.1 概念

• 變量是用來存儲信息的容器

3.2 使用變量

a.聲明變量 用var來定義一個變量例如 var a;
b.賦值 賦值采用 = 來賦值 a=10;
c.使用 聲明的一個變量的時候可以直接賦值 例如 var b = 20;

3.3 變量的命名規(guī)范

• 變量名只能以字母 a-z 讨韭，A-Z 脂信，數(shù)字0-9癣蟋， 字符 _ $ 組成
• 變量的命名采用駝峰命名法(小駝峰命名法) 首個單詞字母小寫,后面的單詞首字母大寫 例如 lastName

3.4 變命名注意點：

a.變量名不允許用空格 如： sun ke 錯誤用法
b.變量不能以數(shù)字開頭, 如: 9sunke 錯誤用法
c.不能使用關鍵字或者保留字命名, 如： var new 錯誤用法
d.變量是區(qū)分大小寫，
e.同一個作用域下狰闪，變量名不能重復
f.不能使用除了 _ $ 以外的其他字符命名變量 疯搅， 如： var #name; 錯誤用法

3.5 常用關鍵字和保留字

js_word.png

js_word1.png

3.6 其他命名法(了解)

• 駱駝式命名法(camel)/小駝峰命名法

第一個單詞以小寫字母開始，以后的單詞首字母都是大寫, 如: var userName = 'sunke' 

• 帕斯卡命名法(Pascal)/大駝峰命名法

第一個單詞以大寫字母開始埋泵，以后的單詞首字母也都是大寫,如: var UserName = 'sunke'

• 匈牙利命名法(Hungarian)

在Pascal標記法命名的變量前附加一個小寫字母（或小寫字母序列）幔欧，說明該變量的類型。例如秋泄，i 表示整數(shù)琐馆，s 表示字符串。如 :  var sName="小明"

3.7.控制臺輸出

   console.log(1); // 輸出普通日志
   console.warn('1'); // 輸出警告日志
   console.error('1'); // 輸出錯誤日志

輸出日志的快捷鍵
a.log + enter/ tab

3.8.變量類型

• 變量類型為5種

  • 字符串(string)
  • 數(shù)字(number) 0-9 科學計數(shù)法
  • 布爾(boolean) true/false
  • 空類型（Null）
  • 未定義(undefined)
  • 對象(object)
  • 數(shù)組（array）

  用 console.log(typeof a);來查看輸出的類型

  typeof 關鍵字用來輸出變量的類型

3.9 字符串注意點

• 字符串拼接, 使用 + 可以將兩個字符串拼接到一起

 var str = '李四' + '是個好人';
 console.log(str, typeof str);

• 字符串引號嵌套使用

//注意:字符串中不能單引號嵌套單引號
var str2 = '張三'是個好人'';
//注意:字符串中不能雙引號嵌套雙引號
var str3 = "王五"是個好人"";

//字符串單引號可以嵌套雙引號
var str22 = '張三是個"好人"';

//字符串雙引號可以嵌套單引號
var str33 = "王五是個'好人'";

• 使用轉義字符 \

    //在引號前使用轉義字符 , 告訴系統(tǒng)轉義字符后面是個單純的字符
    var str22 = '張三\'是個好人\'';
    console.log(str22);
    var str33 = "王五\"是個好人\"";
    console.log(str33);

四.運算符

4.1 算數(shù)運算符

+   -   *   /   %(取余/取模)     ++    --

    var a = 5;
    var b = 10;
    var c = a + b;
    var d = a - b;
    var e = a * b;
    var f = a / b;
    var g = a % b;
    a++;
    a--;

4.2 運算符的優(yōu)先級

• 表達式: 是由變量, 數(shù)值, 運算符組成, 進行求值的式子
• 優(yōu)先級: 優(yōu)先級會決定當前運算符的執(zhí)行順序, 優(yōu)先級高的先執(zhí)行
• 結合性: 運算符同級別情況下, 結合性決定運算的順序, 是從左往右, 還是從右往左
• 左結合: 從左往右運算
• 右結合: 從右往左運算

//數(shù)學運算規(guī)則: 先乘除后加減
var a = 2 + 3 * 4; 結果是 14

//如果想提升優(yōu)先級的話用 ()來提升
var a = (2 + 3) * 4; 輸出 20

運算符優(yōu)先級.jpeg

4.3 自增和自減

4.3.1.自加(累加 ) 單獨使用

• 結論: 自加單獨使用, ++在變量前, 變量的值 都是對變量進行加1操作后的結果

var a = 3;
++a;
 console.log(a); //4

• 結論:自加單獨使用, ++在變量后, 變量的值 都是對變量進行加1操作后的結果

var a = 3;
a++;
console.log(a); //4 

4.3.2.自減 單獨使用

• 結論:自減單獨使用, --在變量前, 變量的值 都是對變量進行減1操作后的結果

var a = 3;
--a;
console.log(a);  //2

• 結論:自減單獨使用, --在變量后, 變量的值 都是對變量進行減1操作后的結果

var a = 3;
a--;
console.log(a); //2

4.3.3.自加在表達式中的使用

• 結論: ++在變量后 ,a++ 在表達式中運算, a++會先從變量里面取值作為a++表達式的值, 之后再對變量a加1
• 口訣: ++在后, 先取值, 再加1

var a = 3;
var b = 5;
var c = a++ + b++; // 3 + 5
console.log(a); //4
console.log(b); //6
console.log(c); // 3 + 5 = 8

• 結論: ++在變量前 , ++a 在表達式中運算, ++a會先對變量a加1操作, ++a再從變量里取值作為++a表達式的值進行運算
• 口訣: ++在前, 先加1, 再取值

var a = 3; // 4
var b = 5; // 6
var c = ++a + ++b; // 4 + 6
console.log(a); // 4
console.log(b); // 6
console.log(c); // c = 4 + 6

4.4.4.自減在表達式中的使用

• 結論: --在變量后 ,a-- 在表達式中運算, a--會先從變量里面取值作為a--表達式的值, 之后再對變量a減1
• 口訣: --在后, 先取值, 再減1

var a = 3;
var b = 5;
var c = a-- + b--;
console.log(a); //2
console.log(b); //4
console.log(c); //3 + 5 = 8

• 結論: --在變量前 , --a 在表達式中運算, --a會先對變量a減1操作, --a再從變量里取值作為--a表達式的值進行運算
• 口訣: --在前, 先減1, 再取值

var a = 3;
var b = 5;
var c = --a + --b;
console.log(a); //2
console.log(b); //4
console.log(c); // 2 + 4 = 6

4.4 賦值運算符

• 用于給變量賦值

  +=-= *= /= %=

 var a = 2;
a += 2; // 展開 a = a + 2;
console.log(a);

• 賦值運算符注意點
  • 注意: 復合賦值運算符, 不能同時進行聲明變量 賦值和運算操作

var b += 2;
console.log(b);  //報錯

• 注意: 復合賦值運算符使用前, 變量要先有值

    var c; // undefined
    c += 2; // c = undefined + 2
    console.log(c); //NaN 非數(shù)字類型 not a number

4.5 關系運算符

• 關系運算符 恒序，也叫比較運算符瘦麸。比較運算符在邏輯語句中使用，以測定變量或值是否相等歧胁。

>  <   !=   >=   <=   ==   ===

• 關系運算符的結果為布爾值
• 關系運算符不能連用,如果想連用用邏輯運算符

4.5.1. 大于 >

• 只比較值, 不比較類型

var a = '5';
var b = 3;
console.log(a > b); // 3 > 5 -> false

4.5.2. 小于 <

• 只比較值, 不比較類型

var a = '3';
var b = 5;
console.log(a < b); //true

4.5.3. 不等于 !=

• 只比較值, 不比較類型

var a = '5';
    var b = 5;
    console.log(a != b); //false

4.5.4.等于 ==

• 等于 == 只比較值, 不比較類型

var a = '5';
var b = 5;
console.log(a == b); 

4.5.5.全等于 ===

• 全等于 即比較值, 也比較類型, 并且這兩個條件 有一個不滿足就為假false

var a = 5;
var b = 5;
console.log(a === b);

4.5.6.大于等于 >=

• 展開為 > == , 這兩個條件有一個滿足結果就是true
• 大于等于 >= 只比較值, 不比較類型

var a = '5';
var b = 3;
console.log(a >= b);

4.5.7.小于等于 <=

• 注意: 展開 < == , 這兩個條件有一個滿足結果就是true
• 只比較值, 不比較類型

var a = '3';
var b = 5;
console.log(a <= b); 

4.6 邏輯運算符

• 邏輯運算符 有3個滋饲，&&（邏輯與） ， || （邏輯或） 喊巍， !（邏輯非）
• 邏輯運算符用于測定變量或值之間的邏輯
• 參與邏輯運算符 運算的兩邊 一定是布爾值, 結果一般是布爾值

4.6.1.與運算 &&

• 結論: 有假則為假

console.log(true && true); // 真 && 真 結果為 真
console.log(false && true); // 假 && 真 結果為 假
console.log(true && false); // 真 && 假 結果為 假
console.log(false && false); // 假 && 假 結果為 假

4.6.2. 或運算 ||

• 結論: 有真則為真

console.log(true || true); // 真 || 真 結果為真
console.log(false || true); // 假 || 真 結果為真
console.log(true   || false); // 真 || 假 結果為真
console.log(false || false); // 假 || 假 結果為假

4.6.3.非運算 ! (也叫取反)

• 結論: 真 取反結果為假, 假 取反結果為真

var b = true;
console.log(!b);

var c = false;
console.log(!c);

4.7 邏輯運算符特殊性

• 邏輯運算符特殊性：如果邏輯運算符兩邊有一邊不是布爾, 會先將非布爾值轉換為布爾值, 然后再進行運算
• 轉化原則為： 非0即真屠缭。

4.7.1.與運算符特殊性

• && 兩邊有一邊不是布爾, 會先將非布爾值轉換為布爾值, 先判斷 左邊值是否為真, 如果為真就返回&&右邊的值
• 左邊為假, 就返回左邊的值, 右邊不再進行運算

var a = 'sk666'; // true
var b = 'abc';
console.log(a && b); //結果 abc

var c = 0;
console.log(c && alert(111));  //0

4.7.2.或運算特殊性

• || 兩邊有一邊不是布爾, 先判斷 左邊值是否為真, 先將左邊非布爾值轉換為布爾值, 如果為真就返回左邊的值
• 左邊為假, 就返回右邊的值

var a = 'sk666';
var b = 'abc';
console.log(a || b); // 結果為 sk666

var c = 0;
var d = 'abc';
console.log(c || d);  // 結果為 abc

4.7.3.非的特殊性

• 結論: 會先將非布爾值轉換為布爾值, 再取反

var c = 'abc';
console.log(!c); //false

4.8 隱式轉換

4.8.1. + 隱式轉換

• 結論: + 兩邊一邊是字符串, 一邊是數(shù)字字符, 編譯器會將數(shù)字轉換為字符串, 然后在和另一個字符串進行拼接
• 這個過程就是隱式轉換過程 (偷偷的幫你轉換類型)

var str = 'sk666';
var str2 = 'v587';
console.log(str + str2);

var aa = '3';
var bb = 4;
var cc = aa + bb;
console.log(cc, typeof cc); // 34

4.8.2. - 隱式轉換

• 結論: - 兩邊一邊是數(shù)字, 一邊是數(shù)字字符, 編譯器會將數(shù)字字符轉換為數(shù)字, 然后在和另一個數(shù)字進行 - 運算

var aa = '8'; //'aa'
var bb = 4;
var cc = aa - bb; // 8 - 4
console.log(cc, typeof cc); // 4 

• 乘的隱式轉換，和減的隱式轉換一樣
• 除的隱式轉換崭参，和減的隱式轉換一樣
• 取模的隱式轉換呵曹，和減的隱式轉換一樣

五.條件語句

• 語句：由字符和語法組成計算機各種指令，這些指令叫語句何暮。

• 每條可執(zhí)行語句用分號隔開奄喂。

• 常用語句有條件語句和循環(huán)語句。

• 條件語句也叫判斷語句海洼，用于基于不同的條件來執(zhí)行不同的代碼跨新。

• if語句中小括號最終結果為布爾值

• 小括號中條件可以是一個有值的表達式, 一個有值的變量, 或者一個具體的值

1.if語句

if語句語法結構：

if(判斷條件){
   當條件為真的時候執(zhí)行代碼
}

• 執(zhí)行過程:

  如果if小括號條件為真, 就執(zhí)行大括號中代碼
  如果if小括號條件為假, 就不執(zhí)行大括號中代碼

var a = 1;
if (a > 3){
    alert('if條件為真');
}

2.if else

if else 語法結構
if(判斷條件){
    當條件為真的時候執(zhí)行代碼塊
}else{
    當條件為假的時候執(zhí)行代碼塊
}

• 執(zhí)行過程：

  如果if小括號條件為真, 就執(zhí)行if后面大括號中代碼1
  如果if小括號條件為假, 就執(zhí)行else后面大括號中代碼2

var age = 11;
if(age > 18){
        alert('成年人 , 去網(wǎng)吧上網(wǎng)');
}else{
        alert('未成年, 回家趕緊學習吧');
}

3.if else語句 特點: 只能執(zhí)行一個代碼塊

• 注意:else if語句不能單獨使用 ,else if語句 一定要結合if語句使用

if(判斷條件1){
    當為真的時候執(zhí)行代碼塊 1
}else if(判斷條件2){
    當為真的時候執(zhí)行代碼塊 2
}else if(判斷條件3){
    當為真的時候執(zhí)行代碼塊3
}else if(判斷條件4){
    當為真的時候執(zhí)行代碼塊 4
}else if(判斷條件5){
    當為真的時候執(zhí)行代碼塊 5
} 

else{
    當以上所有的條件都不為真的時候執(zhí)行代碼塊
}

執(zhí)行過程:
    1.先判斷if語句中條件1是否為真, 如果為真, 就執(zhí)行代碼1
    2.如果if語句中條件1是為假, 就往下執(zhí)行else if語句, 判斷else if中條件2是否為真
    3.else if中條件2是為真, 就執(zhí)行代碼2
    4.else if中條件2是為假, 就繼續(xù)往下執(zhí)行其他的else if語句, 判斷條件是否為真,如果為真就執(zhí)行對應else if語句中的代碼
    5.如果所有條件都不滿足, 就執(zhí)行else語句中的代碼n

    注意: 只有一個語句執(zhí)行, 只要有條件滿足, 就不再往下執(zhí)行了

/*
   1.優(yōu)秀  90分以上
   2.良好  80到90
   3.及格  60到 80
   4.不及格 小于60
 */
var score = 55;
    if(score >= 90){ //優(yōu)秀  90分以上
        alert('優(yōu)秀');
    }else if(score >=80){//良好  80到90
        alert('良好');
    }else if(score >=60){ //及格  60到 80
        alert('及格')
    }else {//不及格 小于60
        alert('不及格');
    }

4.switch語句

    switch (變量){
        case 值1:
            語句1;
            break;
        case 值2:
            語句2;
            break;
        ...
        default:
            語句n;
    }
執(zhí)行過程:
    1.switch語句根據(jù)表達式值進行比較, 看表達式的值和哪個case中的值一樣,如果一樣就執(zhí)行該case中的代碼
    2.如果表達式的值和所有case值都不匹配, 就執(zhí)行default中的代碼
    break : 中止語句, 執(zhí)行到break就結束語句switch語句

    注意:不能去掉break, 會有貫穿問題, 會一直往下執(zhí)行直到遇到break為止
    注意:switch 后小括號變量可以是一個具體值, 一個有值的變量, 一個有值的表達式,
    case語句中的值必須是一個具體的值

案例星期一到星期日

5.三目運算符（條件運算符）: 判斷條件 ? 語句1 : 語句2

• 當判斷條件為真執(zhí)行語句1, 為假 執(zhí)行語句2

var num = 2;
if(num > 10){
        alert('num大于10');
    }else{
        alert('num小于10');
    }

使用三目運算符

num>10 ? alert('num大于10') : alert('num小于10');

• 通過三目運算符可以代替if...else語句
• 注意: 如果邏輯簡單可以使用三目運算符代替if...else語句, 如果邏輯邏輯復雜不建議你使用,可讀性會變差

codeStraight原創(chuàng)文章,如有錯誤,歡迎指正!