weixin_30737433

《零基础学JavaScript(全彩版)》学习笔记

二〇一九年二月九日星期六0时9分

前期：

刚刚学完《零基础学HTML5+CSS3(全彩版)》，准备开始学习JavaScript。对Web前端好做一个全面深入的了解，为Python编程的提高打下一个坚实的基础。

本书除了项目实战，共计17章390页，不光本身的视频，光腾讯课堂的JS视频就有35课时以上。计划用时4天到7天的时间学完。

还是先把书过一遍吧，看书比较好掌握进度，然后再看书补补漏。

第1篇基础知识

第1章 JavaScript简介

1、JavaScript的起源、特点、应用

2、WebStorm的下载与安装

3、JavaScript在HTML中的使用：页面直接嵌入JS代码；链接外部JS文件；作为标记的属性值使用。

4、JS的基本语法：执行顺序；大小写敏感；JS会忽略空格、换行和制表符，但换行有断句的作用；每行结尾的分号可有可无；//单行注释，/*……*/多行注释

5、document.write():JavaScript语句，表示可以直接在页面中输出括号中的内容。

6、alert():JS语句，弹出一个对话框，显示括号内的内容。

7、alert(new Date().toLocaleString());显示当前的日期和时间

第2章 JavaScript语言基础

数据类型：数值型：（十进制,十六进制,八进制,浮点型数据,特殊值Infinity,特殊值NaN）；

字符串型；布尔型；特殊数据类型（未定义值，空值(null)）

常量和变量：常量；变量（命名、声明、赋值、类型）

运算符：算术运算符、字符串运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符、其他运算符、运算符优先级。

表达式：

数据类型的转换规则：

1、特殊值：Infinity正无穷大；-Infinity负无穷大。

2、特殊值NaN：非数字。比如0/0.

3、逗号运算符用于将多个表达式排在一起，而整个表达式的值为最后一个表达式的值。

4、 typeof运算符：返回操作数的数据类型。

5、 new运算符：创建一个新的内置对象实例。

6、变量声明：var

第3章 JavaScript基本语句

条件判断语句：if语句；switch语句

循环语句：while语句；do…while语句；for语句

跳转语句：continue语句；break语句

异常处理语句：try…catch…finall语句；Error对象；throw语句抛出异常

第4章函数

函数的定义和调用：函数的定义；函数的调用(简单调用、事件响应调用、链接调用)

函数的参数：

函数的返回值：

嵌套函数：嵌套定义；嵌套调用

递归函数：

变量的作用域：全局变量和局部变量；变量的优先级

内置函数：数值处理函数；字符串处理函数

定义匿名函数：在表达式中定义函数；使用Function()构造函数

1、定义函数： function 函数名（[参数列表]）{语句 [return 返回值]}

2、函数的调用：通过链接调用单击链接

3、形参、实参

4、函数的返回值：return 表达式;

5、嵌套函数；递归函数：自己调用自己。递归两步：找规律，找出口！

6、内置函数：数值处理处理函数：parseInt(string,n)字符串转整数；parseFloat()字符串转浮点数；

isNaN(num)判断值是否为NaN;isFinite(num)检验参数是否有限；

7、字符串处理函数：eval(string)计算字符串表达式的值：eval("x=5;y=6;document.write(x*y)");

8、定义匿名函数：在表达式中定义函数和使用Function()构造函数定义函数。

var 变量名 = function(参数1，参数2，…){函数体}；不需要指定函数名，直接赋给变量即可。

构造函数可动态地创建函数：

var 变量名 = new Function("参数1"，“参数2”……"函数体")；参数和函数体都必须是字符串。

例如：var sum = new Function("x","y","alert(x+y);"); sum(10,20);

二〇一九年二月九日星期六2时14分40秒

渡一教育视频补遗：

JavaScript运行三部曲：（js特点：单线程+解释性语言）

第一步：语法分析：先扫描一遍

第二步：预编译：函数声明整体提升；变量的声明提升（变量赋值没提升）

第三步：解释执行

预编译前奏：

1、 imply global:暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有。

2、一切声明的全局变量全是window的属性。

2/9/2019 12:42:41 PM

预编译四部曲：

1、创建AO对象 --Activation Object 活跃对象-作用域-执行期上下文

全局的为GO对象—Global O bject window对象

2、找形参和变量声明，将变量和形参名作为AO属性名。值为undefined

3、将实参值和形参统一

4、在函数体里面找函数声明，值赋予函数体

预编译发生在函数执行的前一刻。

！！双非

敲代码的指法：……

[[scope]]作用域链

立即执行函数：此类函数没有声明，在一次执行过后即释放。适合做初始化工作。

只有表达式才能被执行符号执行，()是执行符，先执行外面的()。表达式里面的函数在外面就失去了意义，于是：

(function test(){console.log('a');}())就变成了立即执行函数：(function(){console.log('a');}())

闭包：当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。

闭包的作用：实现公有变量，函数累加器；可以做缓存（存储结构）eater；可以实现封装，属性私有化，Person()；模块化开发，防止污染全局变量。

闭包的防范：闭包会导致多个执行函数共用一个公有变量，如果不是特殊需要，应尽量防止这种情况发生。

函数只有在执行的时候才会关注函数体内的变量，当形成闭包的时候，在外部执行函数时访问的永远是内部函数最后形成的变量值！！！函数在定义的时候不用看函数体内是什么东西！！！除非函数立即执行！！！

二〇一九年二月九日星期六20时2分

第5章对象

对象简介：什么是对象；对象的属性和方法；JS对象的种类

自定义对象创建：直接创建自定义对象；通过自定义构造函数创建对象；通过Object对象创建自定义对象。

对象访问语句：for…in 语句;with语句

常用内部对象：Math对象；Date对象

1、对象的属性：包含在对象内部的变量。用来描述对象特性的一组数据。对象状态。

2、对象的方法：包含在对象内部的函数。用来实现某个功能。对象行为。

3、对象的种类：自定义对象；预定义对象：内置对象和浏览器对象。

4、直接创建自定义对象：var 对象名 = {属性名1:属性值1,属性名2:属性值2,属性名3:属性值3,……}

5、自定义构造函数创建对象：调用构造函数要用new运算符；参数通常用于初始化新对象，this关键字。

例如：构造函数：function Student(name,sex,age){this.name=name;this.sex=sex;this.age=age;}

创建一个新对象：var student1 = Student("张三"，"男"，25);

定义方法：在构造函数里：this.showName=ShowName; 在构造函数外定义：function showName(){…}

或者在构造函数里直接定义：this.showName=function(){alert(this.name);};

6、prototype属性是所有函数都具有的属性，用于向对象添加属性和方法：object.prototype.name=value

如：Student.prototype.show=function(){alert("姓名:"+this.name+"\n性别:"+this.sex);}

var student1=new Student("张三","男");

student1.show();

7、通过内置对象创建自定义对象：obj=new Object([value]) 如：var student=new Object();

8、专门应用于对象的语句：for…in;用于遍历对象的每一个属性，每次将属性名作为字符串存在变量中。for(var example in object){……}

with(对象名称){语句}：大括号中的属性引用就不在需要对象名加点的形式了。

9、常用内部对象：内部动态对象必须用new创建实例才能引用；内部静态对象可以直接引用。

10、静态对象Math：数学常量和数学函数。PI圆周率、abs(x)绝对值、exp(x)乘方、max(n1,n2…)最大值、

min()、pow(x,y)x的y次方、random()随机数、round(x)四舍五入取整、sqrt(x)平方根

11、日期对象：dateObj = new Date()

dateObj = new Date(dateVal)

dateObj = new Date(year,month,date[,hour[,minutes[,seconds[,ms]]]])

getFullYear()/getMonth()+1/getDate()/getDay() 获取当前年月日星期 toString()日期转字符串

第6章数组

数组：数组概念；数组元素

定义数组：定义空数组；指定数组长度；指定数组元素；直接定义数组

操作数组元素：数组元素的输入和输出；数组元素的添加；数组元素的删除

数组元素的属性：length属性；prototype属性

数组的方法：数组的添加和删除；设置数组的排列顺序；获取某段数组元素；数组转换成字符串

1、 JS是一种弱类型语言，数组中的每个元素的类型可以不同，甚至数组可以包含数组。

2、定义空数组： arrayObject = new Array() 然后再给数组赋值arr[0]="零基础学JavaScript";

3、定义数组时可以定义数组的个数：arrayObject = new Array(size)

4、定义数组时直接赋值：arrayObject = new Array(element1,element2,element3,…)

5、直接定义数组：不使用构造函数，直接把数组元素放在一个中括号中：

arrayObject =[element1,element2,element3,…]

6、数组元素的删除：delete arr[1]; 删除的只是元素的值，变为undefined，元素的个数并未减少。

7、数组的属性：arr.length 数组的长度（元素个数）；自定义属性：Array.prototype.name=value

8、数组的添加和删除：

concat()方法：将其他数组连接到当前数组的尾部，产生一个新数组，原数组的元素和长度不变

arrayObject.concat(arrayX,arrayX,……,arrayX)

push()方法：向数组末尾添加一个或多个元素，返回添加后的数组的长度。

unshift()方法：向数组的开头添加一个或多个元素，数组新长度。

pop()方法：删除数组最后一个元素，返回删除元素的值！

shift()方法：删除数组中第一个元素的值，并返回删除元素的值。

splice()方法：删除数组中指定位置的元素，还可以向指定位置添加元素。

arrayObject.splice(start,length,element1,element2,…)

9、设置数组的排列顺序：reverse()颠倒数组中元素的顺序；sort()数组排序；

10、获取某段数组元素：arrayObject.slice(start,end)

11、数组转换成字符串：

arrayObject.toString() 返回的元素之间用逗号分隔

arrayObject.toLocalString()转换成本地字符串

arrayObject.join(separator)将数组中所有元素放入一个字符串中

二〇一九年二月十日星期日0时3分

第7章 String对象

String对象的创建

String对象的属性：length属性；constructor属性；prototype属性

String对象的方法：查找字符串；截取字符串；大小写转换；连接和拆分；格式化字符串

1、String对象是动态对象，使用构造函数可以显式创建字符串对象：

var newstr = new String(StringText)

任何一个字符串常量都可以看做是一个String对象，可直接用.调用其属性和方法，不同的是typeof返回值不同，一个是string类型，一个是object类型。

2、字符串的长度stringObject.length; 判断当前对象类型：newStr.constructor==String

自定义属性或方法：String.prototype.name=value

3、String对象的方法：

查找字符串：charAt()返回指定位置的字符；indexOf()返回子字符串在字符串中首次出现的位置。

lastIndexOf()返回子字符串在字符串中最后出现的位置

截取字符串：slice()提取字符串的片段；substr()从指定位置开始提取指定长度的字符串。

substring()提取两个指定索引之间的字符（不含索引元素）。

大小写转换：toLowerCase()转成小写，toUpperCase()转成大写。

连接和拆分：连接两个或多个字符串：stringObject.concat(stringX,stringX,…)

把一个字符串分割成字符串数组：stringObject(separator,limit)

5、格式化字符串：anchor()创建html锚;big()small()fontsize()字体大小和指定字号;

bold()italics()粗斜体;link()strike()blink()fixed()fontcolor()sub()sup()

二〇一九年二月十日星期日0时57分

第2篇核心技术

第8章 JavaScript事件处理

本章概览：JavaScript是一种基于对象的语言。最基本的特征就是事件驱动（event-driven）。

通常将鼠标或热键的动作称为事件(event);将由鼠标或热键引发的一连串动作,称为事件驱动(event-driven);而将对事件进行处理的程序或函数，则称为事件处理程序(Event Handler)。

事件与事件处理概述：什么是事件；JS常用事件；事件的调用；事件对象

表单相关事件：获得焦点与失去焦点的事件；失去焦点内容改变事件；表单提交与重置事件

鼠标和键盘事件：鼠标单击事件；鼠标按下和松开事件；鼠标移入和移出事件；鼠标移动事件；键盘事件

页面事件：加载与卸载事件；页面大小事件

1、JavaScript常用事件：

a.窗口事件,只在body和frameset元素中才有效

onload 页面或图片加载完成时

onunload 用户离开页面时

b.表单元素事件,在表单元素中才有效

onchange 框内容改变时

onsubmit 点击提交按钮时

onreset 重新点击鼠标按键时

onselect 文本被选择时

onblur 元素失去焦点时

onfocus 当元素获取焦点时

c.键盘事件

onkeydown 按下键盘按键时

onkeypress 按下或按住键盘按键时

onkeyup 放开键盘按键时

d.鼠标事件

onclick 鼠标点击一个对象时

ondblclick 鼠标双击一个对象时

onmousedown 鼠标被按下时

onmousemove 鼠标被移动时

onmouseout 鼠标离开元素时

onmouseover 鼠标经过元素时

onmouseup 释放鼠标按键时

e.其他事件

onresize 当窗口或框架被重新定义尺寸时

onabort 图片下载被打断时

onerror 当加载文档或图片时发生错误时

2、事件调用：在HTML中调用：

在JS中调用：首先要获得对象的引用：b_save=document.getElementById("save");

然后绑定单击事件：b_save.οnclick=function(){……}

3、表单获得焦点和失去焦点事件：

4、表单失去焦点内容改变事件：一般用于下拉菜单中。