2016年4月6日-案例笔记课堂

1、JavaScript 基础入门第 1 天课堂笔记（本课程共 10 天）班级：前端1 期讲师：日期：2016 年 4 月 5 日老师：: sh爱前端官网 ：目录JavaScript 基础入门1目录2一、试卷讲解31.1 选择题31.2 简答题8二、JavaScript 作业讲解112.1 复习112.2 作业14三、运算符163.1 数算符163.2 关系运算符173.3 逻辑运算符193.4 赋值运算符21四、条件分支语句244.1 if 语句24一、试卷讲解1.1 选择题第 1 题，标准CHTTP - Hypertext Transfrotocal 超文本传输协议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 区分大小写的，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定位了的元素，可能脱标也可能不脱标，因为绝对定位、固定定位脱标，而相对定位不脱标。所以，相对定位的元素，还是区分行内元素和块级元素的。所以 C 选项这么说是对的：“脱标了的元素，将不再区分行内元素和块级元素，具有行块二象性”。标准文档流中，块级元素能够自动撑满父亲。无论元素用何种方式脱标，都不具备这个性质了。所以就必须写 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 出发找到，html 文件在 2016 文件里面，2016 文件夹在 p 文件夹中。所以./一次，将从 2016 文件夹退回到 p 文件夹。然后进入 q 文件夹，就能看见 logo.jpg 了。标准：1ht/p/q/logo.jpg从 html 出发找到在根目录。，html 文件在 2016 文件夹中，2016 文件夹在 q 文件夹里面，q 文件夹在 p 文件夹里面，p././两次， 会从 2016

11、退回 q，然后退回到 p。然后进入 x，找到 logo.jpg 了1ht/p/x/logo.jpg第 9 题，从样式表出发找到，先看样式表的URL：ht/s/css/style.css的 URL，：1ht/s/images/logo.png从样式表触发找到，样式表的 URL：ht/r/s/css/style.css的 URL，：ht/r/s/images/logo.png1二、JavaScript 作业讲解2.1 复习昨天讲解的 JS 是编程最最简单的一些基础知识，复下：JavaScript 书写环境，12alert()函数，至于函数，先别管。alert 弹出警告框1alert(你好);控制台

12、 F12，console 就是用来检测程序有没有错误的1console.log(你好);已经知道了两种常见错误，SyntaxError 语法错误：比如符号是中文的ReferenceError错误： 比如变量没有数字的直接量：数字、NaN、Infinity数字这个东西，有很多进制。下面的值都是 15：115017230o1740O170 xf560Xf下面的值都是 0.0410.0424e-20.4e-134.4e-16/0 结果是 Infinity , 0/0 结果是 NaN字符串的直接量：双引号、单引号字符串12454543变量： 变量名开头必须是字母、符号、下划线，后续的可以有字母、符号、

13、下划线、数字；换句话说，不能以数字开头。不能有怪异符号，不能是保留字和关键字。变量的定义，或者叫做变量的，用 var1var a = 100;var 一次之后，就可以不用 var 了。用逗号隔开多个：1var a = 100 , b = 200;JS 中变量可以，也就是说，可以先使用变量，然后再a = 100;12var a;一个变量如果仅仅 var 了，但是没有赋值，默认的值是1undefiend变量的类型，实际上就是所有值的类型基本的类型 5 种：number 类型：数字、NaN、Infinitystring 类型：字符串undefined 类型只有一个值，就是 undefined:nul

14、l 类型：只有一个值，就是 null类型：只有两个值 true 和 false类型：日后再说用 typeof 能够检测值的类型。parse、parseFloatparse是无条件的截断小数点后面的任何东西，不四舍五入。parse(3.9888);/ 31(3 年 3 月); /3parse2(哈哈 3 年 3 月); /NaN3parseparse可以将任何一个进制的数字转为 10 进制，要记住数字不能直接用字面量，要加字符串1parse(0 xf,16); /152parse(0 xf,16);/21parseFloat 就是获取小数点的，将 string 变为浮点数1parseFloat(

15、3.14.123)/3.14parseFloat 没有进制，就不能写逗号。数算符+ -* / % 叫做求余，也有的书上求模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 作业1）计算下列算式，并将结果输出：5） 如果今天是二，那么 1000 天后是几？用户输入一个天数，计算这个天数后是几。如果今天是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如果用户输入天数，那么就是1(2 + a % 7) % 76） 用户输入一个三位数，弹出各个数位的和。比如：用户输入 155，就弹出 11用户输入 316，就弹出 10用户输入 989，就弹出 26用户输入 678，就弹出 21这里就有一个“算法”的概念，“算法”就是人想

17、出来的让机器解决事情的方法。前有一个机器 alphaGo 能打败乭，实际上就是算法为王，算法非常好。机器能干的事情就是计算、流程控制。用户输入数字简单，但是拆分数字需要的智慧了。比如用户输入 316，如何单独得到各个数位？个位简单， 就是 316 % 10 得到 6百位也简单，就是 parse(316 / 100) 得到 3十位比较复杂， parse(316 / 10) % 10 得到 1三、运算符运算符（Operators，也翻译为操作符），是发起运算的最简单形式。运算符的分类见仁见智，的课程对运算符进行如下分类：数算符(Arithmetic operators)比较运算符(Comparis

18、on operators)逻辑运算符(Logical operators)赋值运算符(Assignment operators)按位运算符(Bitwise operators)条件 (三元) 运算符(Conditional operator)3.1 数+ - * / % ()算符这里面要知道%的意思，昨天已经算过很多了，不赘述。要知道计算顺序，先乘除求余，然后加减，昨天已经算过很多了，不赘述。隐式转换，所有带有字符串的运算都会尽可能的转为数字进行计算，加号比较特殊。算符的正统，是 number 和 number 的数算：算，结果是 number。出于面试的考虑，有一些数怪怪的数数算中，只有纯字

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 数算中，不纯的字符串没法隐式转换1console.log(3 * undefined); /NaN 数算中，undefined 不能进行隐式转换2加法比较特殊，因为+同时是加法和连字符的符号，所以加法在面对字符串的时候没有隐式转换/加法没有隐式转换12console.log(3+8);/383console.log(3+undefined);/NaNconsole.log(3+null);/34console.log(3+false);/356console.log(3+true);/

21、4特殊数值的计算，就是 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=叫做“全等判断”，不仅仅比较数值是否相等，还比较类型是否相等!=不等于= 全等于!= 不全等!= 是=的，如果=运算是 true，那么!=就是 false!=是=的，如果=运算是 true，那么!=就是 false/false ， 脑子要反着想一下，5=5结果是 t，所以就是 f/true ， 脑子要反着想一下，5=5结果是 f，所以就是 t1console.log(5 != 5);console.log(5 != 5)

23、;2正统的运算讲完了，number 和 number 进行关系运算，结果是。现在讲一丢丢不正统的关系运算，为了面试，划一下重点，的自己通过高三P50、P51、P52： string 和 string 也能够进行关系运算，比较的就是字符编码顺序。字符编码顺序，就是数字、大写字母、小写字母ab/true12AB/true/ true ，大写字母在字符集里面是在小写字母前面/true ，数字在字母前端blue /true因为一位一位比，直到比出大小3Aa41A5bl /true 因为是 string 和 string 比，比的是字符编码顺序625678 3与数字进行关系运算时，纯数字字符串被转为数字

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 进行比较)也就是说，不能连续使用关系运算符！因为一旦连续使用了，实际上还是从左至右计算，所以就有上一步的参与了下一步的运算。剧透一下，如果想要使用连续关系运算，12 & 233.3 逻辑运算符逻辑运算符就三个：正统来说，参与逻辑运算的是和，得到的结果也是值按照真值表来定“都真”，“有假就假”。命题 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逻辑运算符最最有意思的事情，就是所谓的“短路语法”。就是你发现没有，如果计算一个且运算的时候，比如 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 因为计算机发现，且运算a 已经是 false 了，直接输出 falsenull & 8/null 因为计算机发现，

29、且运算 a 已经是 false 性的了，直接扔出来 nulltrue & 13/13因为计算机发现，且运算 a 是 true，所以总结果就是看 b，直接扔出 b12 & 13/13因为计算机发现，12 当做 true，所以总结果看 b，直接扔出 b13 & 12/12因为计算机发现，13 当做 true，所以总结果看 b，直接扔出 bundefined & 哈哈 /undefined 不报错，因为a 已经是负性的了，所以直接扔出 a，哈哈不管哈哈 & undefined /报错true & NaN/NaN 扔后面 短路语法。 要么 a 被短路，要么 b 被短路。计算机发现 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， 计算机要么执行 a 要么执行 b。a 真执行 b，a 假执行 a； a|b， 计算机要么执行 a 要么执行 b。a 真执行 a，a 假执行 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运算符的计算顺序：+ - !贴身的 数学 比较 逻辑 赋值四、条件分支语句4.1 if 语句如果否则，让程序出现分支语法：if 英语里面的如果的意思，else 就是否则的意思。e