2016年4月6日-案例筆記課堂

1、JavaScript 基礎入門第 1 天課堂筆記（本課程共 10 天）班級：前端1 期講師：日期：2016 年 4 月 5 日老師：: sh愛前端官網(wǎng) ：目錄JavaScript 基礎入門1目錄2一、試卷講解31.1 選擇題31.2 簡答題8二、JavaScript 作業(yè)講解112.1 復習112.2 作業(yè)14三、運算符163.1 數(shù)算符163.2 關系運算符173.3 邏輯運算符193.4 賦值運算符21四、條件分支語句244.1 if 語句24一、試卷講解1.1 選擇題第 1 題，標準CHTTP - Hypertext Transfrotocal 超文本傳輸協(xié)議HTML- Hypertex

2、tMarkup language 超文本標記語言第 2 題，標準CDTD 整體 XHTML1.0 嚴格 與 HTML4.01，要用小寫，引號都要，但封閉結尾反斜杠不能少。transitional可以使用font、b、u、istrict不能用 font、b、u、iframeset 框架做經常使用 XHTML1.0 transitional 版本，因為要用 bui 當做css 鉤子第 3 題，標準Bul - unordered listol - ordered list第 4 題，標準C復選框1單選按鈕1第 5 題，標準Ca 的屬性，新窗口中打開連接” title=”懸停文本”文字1a href=

3、”1.html”=”_bl第 6 題，標準A標準B第 7 題：B標準id 是什么都不能相同的。id 區(qū)分大小寫的，box 和 Box 是不同的盒子。第 8 題，標準B1#box p選擇的是#box 這個盒子后代的所有的 p第 9 題，標準B能繼承的：text- 、line- 、font- 、color 、cursor不能的：盒模型的、浮動的、定位的、background-color第 10 題，標準D由于 border 是一個綜合屬性，寫在下面了，所以 border-left-width 就相當于沒寫，直接掉了。所以總寬度 = 內容寬度 + 左邊邊框 + 右邊邊框+ 左邊 padding +右

4、邊 padding =200 + 20 + 20 + 40 + 40= 320px;第 11 題，標準D行內元素不能設置寬度、高度，但是能設置 padding。行內元素能設置 border定位了的元素，可能脫標也可能不脫標，因為絕對定位、固定定位脫標，而相對定位不脫標。所以，相對定位的元素，還是區(qū)分行內元素和塊級元素的。所以 C 選項這么說是對的：“脫標了的元素，將不再區(qū)分行內元素和塊級元素，具有行塊二象性”。標準文檔流中，塊級元素能夠自動撐滿父親。無論元素用何種方式脫標，都不具備這個性質了。所以就必須寫 width:100%;來撐滿父親。另一方面，比如 span，無論用何種方式脫標，都直接能

5、夠設置 width、height 了。一句話，標準流中才分行、塊；脫標了，就沒有行、塊之分了，都有行塊二象性了。第 12 題，標準D父親不認識自己浮動的兒子，不能被浮動的兒子撐高。但是浮動的元素，能夠被自己文字撐高。第 13 題，標準A愛恨準則，love hate ,link 、visited 、hover、active第 14 題，標準B在草稿紙上畫圖：所以等價于1background-ition:300px300px;如果用百分比1background-ition:50% 50%;詳細講解一下：所以能夠得出結論，就是 1%是多少？ 就是(盒子的寬度 -的寬度) / 100。backgrou

6、nd-ition:0% 50%;background-ition:100% 50%;解：先來看一個 percent 是多少？(400 - 80) / 100 = 3.2px所以 25 個 percent 就是 25*3.2 = 80px;1background-ition:80px 80px;第 15 題，標準B絕對定位的盒子，會一層一層找上去，不是只找父親。B 是對的，相對定位不脫標，就是相對自己的原來標準流的位置定位，老家留坑，形影分離。1top:10px;left:-10px;等價于1bottom:-10px;right:10px;但是絕對定位不能換算。默認壓蓋順序： 定位的能壓住沒有定

7、位的，后寫的定位的，壓蓋住先寫的定位的。絕對和相對定位，一視同仁。只有定位的元素能夠設置 z-index 值，而不是脫標的元素。第 16 題，自己出一道新的題目，一個盒子寬度是 400px，高度是 400px。背景的尺寸是 80px*80px;那么 background-ition:25% 25%; 等價的像素寫法是多少？標準Apng 可以有圖層，jpeg、gif、bmp 都沒有圖層；gif 也可以有透明，gif 有動畫，jpeg 能設置質量。標準D第 17 題，標準Anobreaking space 無換行空格 &;1.2 簡答題第 1 題，標準:font-weight:bold; /*加粗

8、*/1text-decoration:underline; /*下劃線*/ font-style:italic; /*傾斜*/line-height:40px; /*行高*/text-decoration:none; /*去掉下劃線*/ list-style:none; /*去掉小圓點*/border-collapse:collapse; /*邊框折疊*/234567第 2 題，IE6、7、8 都不兼容 opacity，都要用filter 寫opacity:0.6;12filter:alpha(opacity=60);filter 是 IE 特有的屬性，高級瀏覽器沒有 filter 屬性的，所

9、以不用加 hack 符。第 3 題，lte 就是 lessn or equal 小于等于123第 4 題，標準文檔流中，豎直方向的 margin 不疊加，以大者為準。第 5 題，1background-color:red;2background-image:url(1.jpg);3background-repeat:no-repeat;4background-ition:10px 10px;5background-attaent:fixed;第 6 題，文字最內層在 li 里，所以兩個選擇器都沒有選擇中，都是繼承影響的，權重是 0，看誰近。ul 更近，并且!important 不能影響就近原則

10、。所以就是 green。第 7 題，文字在 p 里，所以#father 繼承的權重是 0，失去資格了。比權重 div p 是(0,0,2)p.c2 是(0,1,1)。藍色。第 8 題，從 html 出發(fā)找到，html 文件在 2016 文件里面，2016 文件夾在 p 文件夾中。所以./一次，將從 2016 文件夾退回到 p 文件夾。然后進入 q 文件夾，就能看見 logo.jpg 了。標準：1ht/p/q/logo.jpg從 html 出發(fā)找到在根目錄。，html 文件在 2016 文件夾中，2016 文件夾在 q 文件夾里面，q 文件夾在 p 文件夾里面，p././兩次， 會從 2016

11、退回 q，然后退回到 p。然后進入 x，找到 logo.jpg 了1ht/p/x/logo.jpg第 9 題，從樣式表出發(fā)找到，先看樣式表的URL：ht/s/css/style.css的 URL，：1ht/s/images/logo.png從樣式表觸發(fā)找到，樣式表的 URL：ht/r/s/css/style.css的 URL，：ht/r/s/images/logo.png1二、JavaScript 作業(yè)講解2.1 復習昨天講解的 JS 是編程最最簡單的一些基礎知識，復下：JavaScript 書寫環(huán)境，12alert()函數(shù)，至于函數(shù)，先別管。alert 彈出警告框1alert(你好);控制臺

12、 F12，console 就是用來檢測程序有沒有錯誤的1console.log(你好);已經知道了兩種常見錯誤，SyntaxError 語法錯誤：比如符號是中文的ReferenceError錯誤： 比如變量沒有數(shù)字的直接量：數(shù)字、NaN、Infinity數(shù)字這個東西，有很多進制。下面的值都是 15：115017230o1740O170 xf560Xf下面的值都是 0.0410.0424e-20.4e-134.4e-16/0 結果是 Infinity , 0/0 結果是 NaN字符串的直接量：雙引號、單引號字符串12454543變量： 變量名開頭必須是字母、符號、下劃線，后續(xù)的可以有字母、符號、

13、下劃線、數(shù)字；換句話說，不能以數(shù)字開頭。不能有怪異符號，不能是保留字和關鍵字。變量的定義，或者叫做變量的，用 var1var a = 100;var 一次之后，就可以不用 var 了。用逗號隔開多個：1var a = 100 , b = 200;JS 中變量可以，也就是說，可以先使用變量，然后再a = 100;12var a;一個變量如果僅僅 var 了，但是沒有賦值，默認的值是1undefiend變量的類型，實際上就是所有值的類型基本的類型 5 種：number 類型：數(shù)字、NaN、Infinitystring 類型：字符串undefined 類型只有一個值，就是 undefined:nul

14、l 類型：只有一個值，就是 null類型：只有兩個值 true 和 false類型：日后再說用 typeof 能夠檢測值的類型。parse、parseFloatparse是無條件的截斷小數(shù)點后面的任何東西，不四舍五入。parse(3.9888);/ 31(3 年 3 月); /3parse2(哈哈 3 年 3 月); /NaN3parseparse可以將任何一個進制的數(shù)字轉為 10 進制，要記住數(shù)字不能直接用字面量，要加字符串1parse(0 xf,16); /152parse(0 xf,16);/21parseFloat 就是獲取小數(shù)點的，將 string 變?yōu)楦↑c數(shù)1parseFloat(

15、3.14.123)/3.14parseFloat 沒有進制，就不能寫逗號。數(shù)算符+ -* / % 叫做求余，也有的書上求模100 % 10/01215 % 5/0% 3的計算結果只能是 0、1、2。 不能是 3、4、5、6運算順序是先選乘性(*/%)的，然后是加性(+-)的。12 + 5634 * 5 % 5 / 2解：原式 =2 + 28170 % 5 / 2=2 + 0 / 2=22.2 作業(yè)1）計算下列算式，并將結果輸出：5） 如果今天是二，那么 1000 天后是幾？用戶輸入一個天數(shù)，計算這個天數(shù)后是幾。如果今天是2，那么 7 天后是也是2，14 天后也是2。今天 1 天后是3，那么 8

16、 天后也是3,15 天后也是3。所以 49 天后，是2。因為 49 % 7結果是 0所以 79 天后，是4。 因為 79 % 7 結果是 2，相當于 2 天后所以，1000 天后的就要看簡化為相當于幾天后？1000 % 7 結果是 6，所以就相當于 6 天后的。6 天后就是1。綜合算式就是： (2 +1000 % 7) % 7如果用戶輸入天數(shù)，那么就是1(2 + a % 7) % 76） 用戶輸入一個三位數(shù)，彈出各個數(shù)位的和。比如：用戶輸入 155，就彈出 11用戶輸入 316，就彈出 10用戶輸入 989，就彈出 26用戶輸入 678，就彈出 21這里就有一個“算法”的概念，“算法”就是人想

17、出來的讓機器解決事情的方法。前有一個機器 alphaGo 能打敗乭，實際上就是算法為王，算法非常好。機器能干的事情就是計算、流程控制。用戶輸入數(shù)字簡單，但是拆分數(shù)字需要的智慧了。比如用戶輸入 316，如何單獨得到各個數(shù)位？個位簡單， 就是 316 % 10 得到 6百位也簡單，就是 parse(316 / 100) 得到 3十位比較復雜， parse(316 / 10) % 10 得到 1三、運算符運算符（Operators，也翻譯為操作符），是發(fā)起運算的最簡單形式。運算符的分類見仁見智，的課程對運算符進行如下分類：數(shù)算符(Arithmetic operators)比較運算符(Comparis

18、on operators)邏輯運算符(Logical operators)賦值運算符(Assignment operators)按位運算符(Bitwise operators)條件 (三元) 運算符(Conditional operator)3.1 數(shù)+ - * / % ()算符這里面要知道%的意思，昨天已經算過很多了，不贅述。要知道計算順序，先乘除求余，然后加減，昨天已經算過很多了，不贅述。隱式轉換，所有帶有字符串的運算都會盡可能的轉為數(shù)字進行計算，加號比較特殊。算符的正統(tǒng)，是 number 和 number 的數(shù)算：算，結果是 number。出于面試的考慮，有一些數(shù)怪怪的數(shù)數(shù)算中，只有純字

19、符串、值、null 能夠幫你進行隱式轉換：/隱式轉換：就是沒有寫 parse()、parseFloat()自己幫你轉格式12console.log(3 * 8); /2434console.log(3 * 8);/245console.log(48 / 2);/24console.log(24 % 55);/246null); /0隱式轉換的時候 null 將被轉為 0console.log(3*1false); /0 隱式轉換的時候 false 將被轉為 02console.log(3*/3 隱式轉換的時候 true 將被轉為 1console.log(3*true);3不純的字符串和 un

20、defined 是不能幫你進行隱式轉換的，結果都是 NaNconsole.log(3 * 8 天);/NaN 數(shù)算中，不純的字符串沒法隱式轉換1console.log(3 * undefined); /NaN 數(shù)算中，undefined 不能進行隱式轉換2加法比較特殊，因為+同時是加法和連字符的符號，所以加法在面對字符串的時候沒有隱式轉換/加法沒有隱式轉換12console.log(3+8);/383console.log(3+undefined);/NaNconsole.log(3+null);/34console.log(3+false);/356console.log(3+true);/

21、4特殊數(shù)值的計算，就是 NaN、Infinity 參與的運算，看高 3來學習。就舉幾個例子：1Infinity+1000/Infinity2Infinity-1000/Infinity3Infinity/1000/InfinityInfinity-Infinity /NaN45Infinity/Infinity /NaN6Infinity* Infinity /Infinity0 /0/NaN786 /0/Infinity9NaN/8 /NaN3.2 關系運算符大于= 大于等于 5);2console.log(7 4);關系運算的結果，是類型的。true 和false 叫做值。類型，類型只有兩

22、個值，就是 true 和false。表示真、假。=叫做“相等判斷”，它會幫你進行一個隱式轉換，盡可能的得到 true 的：1console.log(5 = 5); /true=叫做“全等判斷”，不僅僅比較數(shù)值是否相等，還比較類型是否相等!=不等于= 全等于!= 不全等!= 是=的，如果=運算是 true，那么!=就是 false!=是=的，如果=運算是 true，那么!=就是 false/false ， 腦子要反著想一下，5=5結果是 t，所以就是 f/true ， 腦子要反著想一下，5=5結果是 f，所以就是 t1console.log(5 != 5);console.log(5 != 5)

23、;2正統(tǒng)的運算講完了，number 和 number 進行關系運算，結果是?，F(xiàn)在講一丟丟不正統(tǒng)的關系運算，為了面試，劃一下重點，的自己通過高三P50、P51、P52： string 和 string 也能夠進行關系運算，比較的就是字符編碼順序。字符編碼順序，就是數(shù)字、大寫字母、小寫字母ab/true12AB/true/ true ，大寫字母在字符集里面是在小寫字母前面/true ，數(shù)字在字母前端blue /true因為一位一位比，直到比出大小3Aa41A5bl /true 因為是 string 和 string 比，比的是字符編碼順序625678 3與數(shù)字進行關系運算時，純數(shù)字字符串被轉為數(shù)字

24、，null 轉換為 0，true 轉換轉為 1，false 轉換為 0null 不能進行和 0 的相等判定1null -0.0001 /true= 0 /false 具體原因，2后面講解 Object 的時候介紹null34false = 0 /true5true = 1 /trueNaN 不等于自己，不全等于自己1NaN= NaN /false2NaN= NaN /falseNaN!= NaN /true34NaN!= NaN /truestring 和 number 比，string 會被隱式轉換為 number125 2 1的值是多少？解：原式=(32) 1 = true 1 = fal

25、se(因為 true 會被當做 1 來與 1 進行比較)也就是說，不能連續(xù)使用關系運算符！因為一旦連續(xù)使用了，實際上還是從左至右計算，所以就有上一步的參與了下一步的運算。劇透一下，如果想要使用連續(xù)關系運算，12 & 233.3 邏輯運算符邏輯運算符就三個：正統(tǒng)來說，參與邏輯運算的是和，得到的結果也是值按照真值表來定“都真”，“有假就假”。命題 1：“地球是圓的”真的命題 2：“很帥”真的命題 1 且 命題 2 真的/邏輯運算符console.log(true1& true);/t23console.log(true& false);/f4console.log(false & true);/f

26、命題 1：“1+1=3”命題 2：“地球是方的”命題 1 且 命題 2a & bab結果真真真真假假假真假假假假& 邏輯與，“且”& 邏輯與運算| 邏輯或運算!邏輯非運算5console.log(false & false);/f| 邏輯或，“或者”的意思“有真就真”，“都假才假”a | bab結果真真真真假真假真真假假假1console.log(true | true);/t2console.log(true | false);/tconsole.log(false |true);/t34console.log(false |false);/f!就是“邏輯非”，相反的console.log(

27、!true);/f12console.log(!false);/t3console.log(!false); /t運算順序是非、與、或1true | false & !true | false;解：原式 =true|false & false | false=true|false | false=true|false=true邏輯運算符最最有意思的事情，就是所謂的“短路語法”。就是你發(fā)現(xiàn)沒有，如果計算一個且運算的時候，比如 a & b，a 如果就是一個 false，那么就不會管 b 是什么，直接輸出 false就行了，等于說直接輸出 a。如果計算一個且運算的時候，比如 a & b ，a 如果就

28、是一個 true，那么也不用管 b 是什么，直接把 b 當做結果輸出就行了。也就是說，本質上計算機進行 a&b 運算的時候，不是在進行邏輯分析，這小子就想著要么扔 a，要么扔 b。如果 a 是負性的，那么直接扔出 a；如果 a 是正性的，直接扔出 b。命題 1： 1 + 1 = 2命題 2：“邵老師很帥”命題 1 或者 命題 2 總結果是真負性的：false，null， 0， NaN， 空字符串()，undefined正性的：除了上面的，全是正性的。false & 8/false 因為計算機發(fā)現(xiàn)，且運算a 已經是 false 了，直接輸出 falsenull & 8/null 因為計算機發(fā)現(xiàn)，

29、且運算 a 已經是 false 性的了，直接扔出來 nulltrue & 13/13因為計算機發(fā)現(xiàn)，且運算 a 是 true，所以總結果就是看 b，直接扔出 b12 & 13/13因為計算機發(fā)現(xiàn)，12 當做 true，所以總結果看 b，直接扔出 b13 & 12/12因為計算機發(fā)現(xiàn)，13 當做 true，所以總結果看 b，直接扔出 bundefined & 哈哈 /undefined 不報錯，因為a 已經是負性的了，所以直接扔出 a，哈哈不管哈哈 & undefined /報錯true & NaN/NaN 扔后面 短路語法。 要么 a 被短路，要么 b 被短路。計算機發(fā)現(xiàn) a 是真，那么扔 a

30、；如果 a 是假，那么扔b/18 前面假，扔后面/18 前面真，扔前面10 | 18218 | 0/NaN 前面假，扔后面undefined | NaN3/undefined 前面假，扔后面4NaN | undefined188 | 99 & 66 |55解：原式 =88 | 66|55=88 | 55=881undefined & (3!=3) | NaN & null解： 原式 =undefined&false | NaN & null=undefined|NaN & null=undefined|NaN=NaN千萬不要背，從真值表中自己推倒。3.4 賦值運算符=賦值+= 簡便寫法-=簡便

31、寫法*= 簡便寫法總結一下短路語法：a&b， 計算機要么執(zhí)行 a 要么執(zhí)行 b。a 真執(zhí)行 b，a 假執(zhí)行 a； a|b， 計算機要么執(zhí)行 a 要么執(zhí)行 b。a 真執(zhí)行 a，a 假執(zhí)行 b。| 邏輯或的短路也是類似的，a|b賦值運算的參與者，一定是變量。1var a = 1;/這行語句等價于 a2a += 2;=a+2;3console.log(a);/31var b = 6;b /= 3;/等價于 b2= b / 33console.log(b);/21var c = 100;/等價于 c =c %= 10;c%10;23console.log(c);/0var a = 我;a += 愛;a

32、 += 你;1234console.log(a);+運算符：1var e = 10;/等價于 e=e+12e+;3console.log(e);/11+可以與輸出語句寫在一起，+寫在變量前和寫在變量后不是一個意思a+ : 先用 a 的原值，然后 a 加 1；/=簡便寫法%= 簡便寫法+-1var f = 10;console.log(f+); /10 ，先原值，然后加 12等價于：/等價于var f= 10;12console.log(f);/先輸出 f3/然后 f 加 14f+;1var g = 10;/11 ， 這次是先加 1，然后輸出2console.log(+g);+有花式玩兒法，僅面

33、試有用：var a = 8;1a+);/12 ， 先使用原來的 a 的值，就是 4+8，輸出 12.然后 a 加 12console.log(4 +3console.log(a);/9var i = 9;1/0 , 先把 i 加 1，然后使用 i，10%5=0console.log(+i% 5);23console.log(i);/10+a ：先給 a 加 1，然后用 a 的新值1var a = 3 6 & 7 14; /true原式 = true & true= true1var a = 1 + 2 3 + 3 & 3 +4 2*7;原式 = 3 6 & 7 8 & 13| 61原式 =false + 15 + true 8 & 13 | 6=16 8 & 13 | 6=true & 13 | 6=13 | 6=13運算符的計算順序：+ - !貼身的 數(shù)學 比較 邏輯 賦值四、條件分支語句4.1 if 語句如果否則，讓程序出現(xiàn)分支語法：if 英語里面的如果的意思，else 就是否則的意思。e