倒计时 妙味课堂_妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完，并且认真完成了课后练习。感觉在JS方面的技能算是入了个门了。课后练习的作业完成的代码我都汇总在了这里。至于视频课的学习笔记，则记录如下。

第01课JS入门基础_热身课程

写JS的步骤

先实现布局

想出实现原理

了解JS语法

希望把某个元素移除的实现

display: none; 显示为无

visibility: hidden; 隐藏

width \ height

透明度

left \ top

拿与背景色相同的div盖住该元素

利用margin值

……

获取元素

getElementById() ——静态方法，前面只能跟document

document.body、document.title 页面中只有一个的元素

getElementsByTagName() ——动态方法，前面可以跟document也可以跟其他元素，返回的是一个类似数组的元素的集合

有类似数组的length

有类似数组的应用方式，比如ali[0]

在用TagName的时候，必须要加上中括号[]

所谓的动态方法，是指通过js动态添加的元素，getElementsByTagName()也可以找到，但是document.getElementById是找不到的

事件

事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件

onclick

onmouseover

onmousedown

onmouseout

onmouseup

onmousemove

……

如何添加事件

元素.onmouseover

函数

函数可以理解为命令，做一些事情，如:

function abc() { //肯定不会主动执行！ … }

直接调用：abc();

事件调用：元素.事件 = 函数名 (oDiv.onclick = abc;)

……

function(){} 匿名函数

元素.事件 = function(){}

测试

alert(1); 带确定按钮的警告框；alert(‘ok’); ‘ok’ 字符串

初学者：最好保持随时写，随时测试的习惯

变量

var li = document.getElementById(‘lis’);

var num = 123;

var name = ‘leo’;

第02课HTML属性操作

属性名

属性值

属性的读操作：获取、找到

元素.属性名

属性的写操作：替换、修改

元素.属性名 ＝ 新的值

添加的话，需要用 +=

innerHTML 读取元素内的所有HTML代码

字符串连接：加号

属性读写操作的注意事项

JS属性中不允许出现“-”，例如font-size改为fontSize

class在js里面是保留字，在js作用class要用className

所有的相对路径都别拿来做判断(如img的src、还有href)

颜色值不要拿来做判断(因为有red、#f00、rgb(250, 0, 0)等写法

相对路径也不要拿来做判断

innerHTML的值别拿来做判断

IE6、IE7、IE8中表单元素的type更改不了，不支持，会报错；其他的都可以。

在有些浏览器中，直接更改float值可能不支持。在js中，可以用IE(styleFloat)和非IE(cssFloat)来区别对待。

不能用来做判断的东西，可以创造一个开关，利用布尔值来实现

关于兼容：

技术上：必须能做到掌握兼容性(兼容性问题的解决方案)

需求上：商量着来(提供最准确的呈现方案)

[]中括号的使用

点“.”后面的值无法修改

中括号[]里面的值可以修改；JS中允许把”.”替换成“[]”

条件判断

if(条件){……};

if(条件){……} else {……};

if(条件1){……} else if(条件2) {……} else if(条件3) {……} else {……};

数组

“放数据的仓库”

中括号[]，半角都好分隔，最后一个数据后面不要加逗号

数组的length属性

为数组最后塞东西用push();

for应用

for循环的使用场景：

如果想要重复执行某些代码

每次执行的时候，有个数字在变化

for循环的执行顺序：1→234→234……

var i = 0;

i < 3; 关键步骤

括号里面的所有代码

i++

注意下面这样一个循环

for (var i=0; i

aLi[i].onclick = function(){

alert(i);

}

}

cssText文本格式化与属性操作

oDiv.style.cssText = ‘width: 200px; height: 200px;’;

cssText不会动head的style中的设置；但是会改变行间样式(注意，是替换行间样式，而非新增行间样式)

按钮点击之后，不再重复功能的思路

找按钮的麻烦，比如点击一次之后，设置oBtn.disabled = true;

继续找按钮的麻烦，比如点击一次后，将按钮隐藏oBtn.style.display = ‘none’;

将按钮添加的东西清空，然后再添加一次，先清空再生成

用判断

this指向及this应用

window是js中的”老大“

function fn1(){

alert(this);

}

fn1();

上述代码中执行函数fn1()相当于window.fn1();因此，在函数体内弹出这个this仍然是window。

function fn1(){

alert(this);

}

oBtn.onclick = fn1;

上述用按钮的点击事件调用的fn1函数，最终弹出来的是这个按钮，而不是window。

function fn1(){

alert(this);

}

oBtn.onclick = function(){

alert(this)

}

上述代码，点击按钮弹出的this仍然是oBtn这个按钮。

function fn1(){

alert(this);

}

oBtn.onclick = function(){

fn1();

}

上述代码，点击oBtn按钮，弹出的就不再是oBtn这个对象，而是window。

述代码中，弹出的this就是window。

this: 调用当前方法(函数)的那个对象

function fn1(){

this

}

fn1(); this ＝> window

oDiv.onclick = fn1; this => oDiv

oDiv.onclick = function(){

this => oDiv

};

oDiv.onclick = function(){

fn1(); fn1()里面的this => window

}

fn1(this);

function fn1(obj){

obj => window

}

oDiv.onclick = function(){

this

fn1(this);

};

function fn1(obj){ obj => oDiv }

window.onload = function(){

var aBtn = document.getElementsByTagName('input');

for(var i=0; i

aBtn[i].onclick = function(){

this.style.background = 'yellow';

}

}

}

上述代码还等价于下面这段代码：

window.onload = function(){

var aBtn = document.getElementsByTagName('input');

for(var i=0; i

aBtn[i].onclick = fn1; //注意不要在fn1后面加括号

}

function fn1(){

this.style.background = 'yellow';

}

}

第03课：自定义属性、索引值

自定义属性的读写操作

winddow.onload = function(){

var aBtn = document.getElementsByTagName('input');

aBtn[0].abc = 123; //自定义属性

// alert(aBtn[0].abc); 自定义属性的读

// aBtn[0].abc = 456; 自定义属性的写

}

JS可以为任何HTML元素添加任意个自定义属性

自定义属性应用

用自定义属性可以元素添加开关属性，作为控制开关。如下面这个例子：

window.onload = function(){

var aLi = document.getElementsByTagName('li');

// var onOff = true; 一个onOff只能控制一个开关。要为多个元素设置各自的开关，就要给每个元素加个onOff开关。

for(var i=0; i

aLi[i].onOff = true;

aLi[i].onclick = function(){

if (this.onOff){

this.style.background = 'url(img/active.png)';

this.onOff = false;

} else {

this.style.background = 'url(img/normal.png)';

this.onOff = true;

}

}

}

获取自身递增数字及匹配数组内容

在网页上设置三个按钮，默认值为0，每点击一次按钮，字母依次ABCD轮换。

var aBtn = document.getElementsByTagName('input');

var arr = ['A', 'B', 'C', 'D'];

for(var i=0; i

aBtn[i].num = 0;

aBtn[i].onclick = function(){

this.value = arr[this.num]

this.num++;

if(this.num === arr.length){

this.num = 0;

};

};

};

添加索引值、匹配数组、HTML元素

把三个按钮的value与数组里面的值依次进行匹配。

window.onload = function(){

var aBtn = document.getElementsByTagName('input');

var arr = ['莫涛','张森','杜鹏'];

for(var i=0; i

aBtn[i].index = i; //自定义属性index，添加索引值

aBtn[i].onclick = function(){

//alert(i); //不会弹出1、2，直接弹出3，也就是aBtn的长度。也就是说，在基础阶段，在for循环所包的函数里面再用i是不靠谱的。

this.value = arr[this.index];

};

};

上面是通过索引值匹配数组值，匹配HTML中的元素也是同理。

想建立”匹配“、”对应“关系，就用索引值。

第04课：JS数据类型、类型转换

数据类型

HTML标签类型：

block

inline

inline-block

table

……

JS中的数据类型：

数字(NaN属于数字类型)

字符串

布尔值

函数类型

对象

obj

[]

{}

null (空是不能添加自定义属性的)

未定义 undefined

typeof用来判断数据类型。

字符串方法charAt()：通过字符串的下标获取子字符串。

对象可以添加自定义属性。如果把函数扔给了对象，就给该对象添加了一个方法。

JS数据类型转换

把字符串转成数字的方法：

JS方法：Number();

var a = '100';

alert(a + 100); //'100100'

var b = '00100';

alert(Number(b)); //

var c = '+100';

alert(Number(c)); //

var d = '';

alert(Number(d)); //

var e = ' ';

alert(Number(e)); //

var f = true;

alert(Number(f)); //

var g = false;

alert(Number(g)); //

var i = [];

alert(Number(i)); //0 空数组用Number转出来是0

var j = [''];

alert(Number(j)); //

var k = [123];

alert(Number(k)); //

var l = ['123'];

alert(Number(l)); //

var o = null;

alert(Number(o)); //

----------------------------

var m = [1,2,3];

alert(Number(m)); //NaN

var json = {abc:123};

alert(Number(json)); //NaN

var json2 = {};

alert(Number(json2)); //NaN 即使是空json，Number方法也转不了

var h = function(){};

alert(Number(h)); //NaN

var p;

alert(Number(p)); //undefined

var q = '100px';

alert(Number(q)); // NaN

parseInt与parseFloat

var a = '100px';

alert(parseInt(a)); //

var b = '100px123456789';

alert(parseInt(b)); //

var d = '-100px';

alert(parseInt(d)); //-100 parseInt还是认加减号的

var e = ' 100px';

alert(parseInt(e)); //100 parseInt也是认空格的

var f = '000000100px';

alert(parseInt(f)); //

var g = '12.34元';

alert(parseInt(g)); //12 parseInt只能转出整数

------------------------------

var c = true;

alert(parseInt(c)); //NaN

//parseInt也不能用于转函数等

parseInt()方法还有一个参数，就是按照几进制来转，比如parseInt(a, 10);表示按照十进制来转；parseInt(b, 2);表示按照二进制来转。

var a = '12.34元';

alert(parseFloat(a)); //12.34

var b = '12.3.4元';

alert(parseFloat(b)); //12.3 parseFloat只认第一个小数点

parseInt和parseFloat的配合使用，可以来判断某个值是整数还是小数，如下：

var num = '200.345';

if(parseInt(num) == parseFloat(num)) {

alert(num + '是整数');

} else {

alert(num + '是小数');

}

JS中稀奇古怪的隐式类型转换

显式类型转换(强制类型转换)：

Number();

parseInt();

parseFloat();

隐式类型转换：

- * \/ \% 减、乘、除、取模可以将字符串转成数字

+ 加号可以将数字转成字符串

++ -- 加加、减减运算符可以把字符串转成数字

< > 大于号、小于号可以把字符串转成数字，一定要注意是进行数字的比较还是字符串的比较

! 取反 把右边的数据类型转成布尔值

==

alert('200' - 3); //

alert(200 + '3'); //

var a = '10';

a++;

alert(a); //

alert('10'>9); //true

alert('1000000'>'9'); //false

//注意：数字的比较和字符串的比较不同；字符串的比较是一位一位的比较。

alert(!'ok'); //false

alert(!100); //false

alert('2' == 2); //true

alert('2' === 2); //false 三个等号不仅判断值，还会先判断两者的类型

隐式类型转换转不出来，也会返回一个NaN，例如：alert(‘……’ - 9);就会弹出NaN。

isNaN应用实例

NaN: (not a number)。Nan是个不是数字的数字类型。所有的数字都是数字类型，但不是所有的数字类型都是数字。

NaN是个数字类型，但它不是个数字。

一旦写程序中出现了NaN，肯定说明进行了非法的运算操作。

NaN是个false。

NaN与自己都不相等。

var a = Number('abc');

//alert(a); //NaN

//alert(typeof(a)); //number

if(a) { //会弹出‘假’，说明NaN是false

alert('真');

} else {

alert('假');

}

//alert(a === a); //false NaN比较，比出false

isNaN：is not a Number 是不是不是个数字(不是数字)。

isNaN();是个方法，用来干活的。

帮助判断某些值是不是数字。

不喜欢数字、讨厌数字(不是讨厌数字类型，isNaN遇到NaN就很喜欢，会返回true，但是NaN就是个数字类型) 用来判断数字。如alert(isNaN(2)); 返回false。alert(isNaN(‘我爱你’)); 返回true。alert(isNaN(function(){})); 返回true。

isNaN的判断过程，将括号里面的东西扔给Number，Number转出来数字，就返回false；转不出来就返回true。

alert(isNaN('250'));

//Number() '250' => 250 => false

alert(isNaN(true));

//Number() true => 1 => false

alert(isNaN([]));

//Number() [] => 0 => false

下面是一个isNaN的小应用：

window.onload = function(){

var aInp = document.getElementsByTagName('input');

var str = '';

aInp[1].onclick = function(){

str = aInp[0].value

//alert(type of str); //总是返回string 从HTML中拿到的内容，类型都是字符串

if(isNaN(str)){

alert(str + '不是数字');

} else {

alert(str + '是数字');

}

}

}

第05课：函数传参、重用、价格计算

参数 ＝ JS的数据类型：

数字

字符串

布尔值

函数

对象

未定义

参数类型判断

fn1(100);

fn1('miaov');

fn1(function(){alert(1);});

function fn1(a){

if(typeof a === 'number' && a === a) {

alert(a+20);

} else if (typeof a === 'string'){

alert(a.charAt(2));

} else if (typeof a === 'function'){

a();

}

}

重用代码步骤

尽量保证HTML代码结构一致，可以通过父级选取子元素

把核心的主程序实现，用函数包起来

把每组里不同的值找出来，通过传参实现

第06课：作用域、JS预解析机制

什么是作用域

域：空间、范围、区域

作用：读、写

浏览器的“JS解析器”

“JS解析器”：浏览器中专门用来读JS的程序。它至少做下面两件事(当然还有其他事情)：

准备工作(“找一些东西”)：根据var、function、参数找东西 —— JS的预解析

a = 未定义 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义 fn1 = function fn1(){alert(2);} 所有的函数，在正式运行代码之前，都是整个函数块

遇到重名的，只留一个

逐行解读代码 每读一行，就会回到预解析的库里面去看一眼。 碰上表达式(带有 = + - * / % ++ – ! 参数……都是表达式)能够改变值的是表达式。碰上表达式，就到库里面去修改值。

alert(a); //未定义

var a=1; //在库里面a的值由未定义换成1

function fn1(){alert(2);}

alert(a); //弹出：function a(){alert(4);}

var a=1; //预解析中的a改为了1

alert(a); //弹出1

function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。

alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。

var a=3; //预处理中a的值变为3

alert(a); //弹出3

function a(){alert(4);} //函数声明，什么也没有发生

alert(a); //继续弹出3

a(); //报错 a is not a function

以上代码在预解析中的过程如下：

1)预解析： var function 参数 …… 读到 var a = 1 => a 未定义 读到 function a(){alert(2);} => a = functiona(){alert(2);} 变量与函数重名了，就只留下函数： a = function(){alert(2);} 读到 var a = 3 => a 未定义，这里与上面名为a的函数重名了，所以还是保留a = function(){alert(2);} 读到function a(){alert(4);} => a = function a(){alert(4);} 与前面的 a = function(){alert(2);}重名，根据上下文，后面的函数覆盖了前面的函数，所以预解析就只留下了 a = function(){alert(4);} 2)逐行解读代码 读到表达式，表达式可以修改预解析的值。参数也可以改变预解析的值。 遇到函数调用，又要做两件事：预解析、逐行解析代码 函数声明，不是表达式，不改变预解析里面的值。

作用域

在

函数：函数也是个域，也是先找后执行。由里到外

对象 {}

作用域链：从子级作用域跳到父级作用域的过程

第07课：运算符、流程控制

算术

+ 加

- 减

* 乘

/ 除

% 取模(求余数)

赋值

=

+=

-=

*=

/=

%=

关系

<

>

<=

>=

==

!=

===

!===

逻辑

&& 与

|| 或

! 否

运算优先级

括号

程序流程控制

判断

if

switch (case break default)

?:

循环

while

for

跳出、跳过

break

continue

什么是真，什么是假

真：非零的数字、字符串、true、函数、object：[] {} 能找到的元素

假：零、NaN、空字符串、false、null、未定义、不能找到的元素

第08课：return、定时器基础

return 返回值：函数名+括号(例如fn1())就相当于得到了该函数里面return后面的值

所有函数默认返回值是：undefined

可返回：数字、字符串、布尔、函数、对象(元素、[]、{}、null)、未定义

return后面的任何代码都不执行了

alert fn1();

function fn1(){

return function(){

alert(1);

}

}

此时弹出的是：function(){alert(1);}

alert fn1()();

function fn1(){

return function(){

alert(1);

}

}

此时弹出的是1，也就是return的匿名函数执行的结果。

alert fn1()(10);

function fn1(){

return function(a){

alert(a);

}

}

此时弹出的是10。

alert fn1(20)(10);

function fn1(a){

return function(b){

alert(a + b);

}

}

此时弹出的是30。

arguments

fn1(1, 2, 3); //实参——实际传递的参数

function fn1(a, b, c) //形参——形式上，a、b、c这些名代表1、2、3

如果不写形参，1、2、3也能够传进来，都存在arguments的肚子里。

function fn1(){ //arguments => [1, 2, 3] —— 实参的集合(不是数组，但是类似数组，有length，也可以用下标找到其中的数据) }

当函数参数个数无法确定的时候，用arguments：

alert(sum(1,2,3));

function sum(){

var n=0;

for(var i=0; i

n += arguments[i];

}

return n;

}

var a=1;

function fn2(a){ //arguments的某个数值就相当于某个形参

arguments[0]=3;

alert(a); //弹出3

var a=2;

alert(arguments[0]); //弹出2

}

fn2(a);

alert(a); //弹出1

currentStyle与getComputedStyle应用

getComputedStyle获取的是计算机(浏览器)计算后的样式，但是不兼容IE6、7、8

currentStyle方法兼容IE6、7、8，但是不兼容标准浏览器

属性判断法、版本检测法来解决浏览器间的兼容性问题 ~~~ js function getStyle( obj, attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr]; } ~~~

注意事项：

如果用以上的方法获取某个元素的复合样式，例如background，那么就不要用上面那种方式获取，在不同浏览器间有兼容性问题。用上面的方法获得单一样式，而不要用来获取复合样式。

使用以上方法，注意不要多按空格

使用以上方法，不要获取未设置后的样式，因为浏览器间不兼容

在火狐4.0之前，有个bug，如果getComputedStyle后面不跟参数，会出现问题，所以有些人写成getComputedStyle(obj, false)，那个false就是为了解决这个bug。这里的bug也可以写成0，或者其他任何参数都可以。不过目前火狐的浏览器都比较高，因此这个问题已经不是很常见了。

第09课：定时器管理、函数封装

setInterval

setInterval(函数, 毫秒); 重复执行(发动机)

var i=0;

function fn1(){

document.title = i;

i++;

}

setInterval(fn1, 1000);

事件调用的方法

fn1(); 直接调用

document.onclick = fn1; 事件调用

setInterval(fn1, 1000); 函数调用

clearInterval

var timer = setInterval(函数, 毫秒); //重复执行

clearInterval(timer); //清除定时器

var i=0,

timer = null;

function fn1(){

i++;

document.title = i;

if(i===10){

clearInterval(timer);

}

}

timer = setInterval(fn1, 1000);

注意

定时器如果是由事件控制的，比如按钮的onclick控制的，那么一定要遵循一个原则，先关后开。这样可以避免连续点击多次按钮，重复设置定时器。另外，clearInterval()不论里面填的是一个timer，还是null还是未定义，都可以顺利运行。

setTimeout

var timer = setTimeout(函数, 毫秒); 执行一次(炸弹)

clearTimeout(timer);

定时器的小应用(函数封装和回调函数)

doMove的函数封装

无标题文档

#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }

var oBtn1 = document.getElementById('btn1');

var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {

// doMove ( oDiv, 'width', 34, 600 );

doMove ( oDiv, 'left', 12, 900, function () {

doMove ( oDiv, 'top', 34, 500 );

});

};

function doMove ( obj, attr, dir, target, endFn ) {

dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;

clearInterval( obj.timer );

obj.timer = setInterval(function () {

var speed = parseInt(getStyle( obj, attr )) + dir; // 步长

if ( speed > target && dir > 0 || speed < target && dir < 0 ) {

speed = target;

}

obj.style[attr] = speed + 'px';

if ( speed == target ) {

clearInterval( obj.timer );

/*

if ( endFn ) {

endFn();

}

*/

endFn && endFn();

}

}, 30);

}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }