Web前端超度指南|最适合小白的JavaScript入门教程
Javascript，从“最被误解的语言”，最后神奇地转变成为“最流行的语言”，证明它经受得起时间的考验。虽然单独来看，它的交互设计有些失败，但是加上Ajax的完美配合，javascript就成了一款轻便并且又实用的好语法。 如果想要更高效、更系统地学会javascript，最好采用边学边练的学习模式。 如果觉得javascript的学习难度较高，不易理解，建议采用视频的方式进行学习，更易初学者吸收： 在线观看：https://www.bilibili.com/video/BV1Ft411N7R3 资料下载：http://www.bjpowernode.com/javavideo/207.html JavaScript介绍 （1）简称JS （2）一种脚本语言，脚本语言的特点 Java语言是一种非脚本语言，属于编译型语言。 JavaScript语言是一种脚本语言（解释型语言），JavaScript的“目标程序”是以普通文本的形式保存。用记事本是可以直接打开的。浏览器打开就直接解释执行了。 （3）JavaScript和JScript的关系 JavaScript是网景公司开发的，javascript之父是 布兰登艾奇。JavaScript前身叫做LiveScript。当时网景公司开发JavaScript的目的是为了占领“浏览器”市场。网景公司有一个浏览器，当时非常著名：领航者浏览器Navigator。JavaScript语言是为领航者浏览器专门量身打造的。JavaScript只支持Navigator浏览器，其它浏览器不支持。这个时候微软慌了，马上组建团队，开发了一种编程语言叫做Jscript，专门和JavaScript抗衡的，只支持IE浏览器。网景公司在某个历史阶段，和SUN公司有合作，SUN公司把LiveScript改名为JavaScript。 （4）JavaScript主要用来操作HTML中的节点，产生动态效果 JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果的。JavaScript中也有变量、数据类型、运算符、if语句、for循环、标识符、关键字等。 （5）JavaScript和Java的区别 JavaScript运行在浏览器当中，浏览器中有执行JS代码的内核。 Java运行在JVM当中。JavaScript和Java没有任何关系。 Java语言是SUN公司开发的，JavaScript这个名字是SUN公司给起的名。 JavaScript选择是对的，真的搭上了Java的顺风车！ JavaScript包括三块：ECMAScript、DOM、BOM （1）ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法 （2）DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。（Document Object Model：文档对象模型） （3）BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。（Browser Object Model：浏览器对象模型） 嵌入JS三种方式以及JS的注释 行间事件 （1）<input type="button" value="hello" οnclick="window.alert('hello js')" /> （2）JS是一种基于事件驱动型的编程语言，当触发某个事件之后，执行一段代码 （3）JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。 （4）JS中的字符串可以使用单引号括起来，也可以使用双引号括起来 （5）window是JS中的内置BOM顶级对象，代表当前浏览器窗口，window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。 （6）JS中的一条语句结束后可以使用“;”结尾，也可以不写。 （7）window.alert()中的window.可以省略。 页面script标签嵌入 （1）<script type="text/javascript">JS代码</script> （2）window.alert()的执行会阻塞当前页面的加载 （3）一个页面中可以写多个脚本块 （4）脚本块的位置没有限制 （5）暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行 外部引入 （1）<script type="text/javascript" src="js文件路径"></script> （2）<script type="text/javascript" src="js文件路径">这里不能写JS代码</script> （3）这种写法错误：<script type="text/javascript" src="js文件路径"/> 标识符和关键字 （1）标识符命名规则和规范按照java执行 （2）关键字不需要刻意记 变量 变量的声明与赋值 （1）变量未赋值，系统默认赋值undefined （2）JS是一种弱类型编程语言，一个变量可以接收任何类型的数据 （3）一行上也可以声明多个变量 函数的定义与调用 （1）函数类似于java语言中的方法，是一段可以完成某个功能的可以被重复利用的代码片段 （2）定义函数的两种语法 第一种：普通函数定义，这种方式较多 function函数名(形式参数列表){ 函数体; } 例如： functionsum(a,b){ returna+b; } 注意： a和b是形式参数列表，也是两个局部变量。 JS中的函数不需要指定返回值类型，因为JS是弱类型编程语言，变量可以接收任何类型的数据，也就是说JS中的函数可以返回任何类型的数据，当然也可以不返回任何数据。返回数据使用return语句。 JS中的函数在调用的时候，实参可以随意，例如调用以上的sum函数，可以这样调用：sum()，没有传任何实参的时候a和b变量没有赋值，则a和b都是undefined。也可以这样调用sum(10)，这样就表示a变量赋值10，b变量仍然是undefined。还可以这样调用：sum(1,2)，这样则表示a是1，b是2。 第二种：如果是把函数的声明当做类进行定义这种方式较多 函数名=function(形式参数列表){ 函数体; } 例如： sum=function(a,b){ returna+b; } （3）JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。 （4）由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制 （5）这样的代码顺序是可以的，页面打开的时候会先进行所有函数的声明，函数声明优先级较高。 <scripttype="text/javascript"> sayHello(); functionsayHello(){ alert("HelloJS"); } </script> （6）用户点击按钮，调用函数 <scripttype="text/javascript"> functionsayHello(){ alert("hellojs"); } </script> <inputtype="button"value="hello"onclick="sayHello();"/> 局部变量和全局变量 （1）局部变量：函数的形参是局部变量，另外使用var关键字在函数体中声明的变量是局部变量，函数执行结束之后，局部变量的内存就释放了。 （2）全局变量：在函数体外声明的变量属于全局变量，另外不使用var关键字声明的变量无论位置在哪，它都是全局变量，全局变量在浏览器关闭时销毁。 JS数据类型 typeof运算符 JS中为什么会有typeof运算符 typeof运算符怎么用，代码怎么写 语法格式是： functionsum(a,b){ if("number"===typeofa&&"number"===typeofb){ returna+b; } alert("数据格式不合法"); return0; } typeof运算符的运算结果都是全部小写的字符串 "undefined" "number" "string" "boolean" "object" "function" ES6版本之前的数据类型有6种 Undefined 只有一个值undefined，变量声明没赋值，系统默认赋值undefined Number （1）Number类型包括哪些值：0,1，-1,3.14,12,300，NaN，Infinity （2）parseInt()函数 （3）parseFloat()函数 （4）Math.ceil()函数：向上取整 （5）isNaN()函数 String （1）可以使用单引号，也可以用双引号 （2）JS中的字符串包括小String，也包括大String，小String属于原始类型，大String是JS的内置对象，大String属于Object类型。 （3）无论大String还是小String，它们的属性和方法都是通用的。 （4）字符串中常用方法讲一些，主要讲解字符串的substr()和substring()的区别。 Null （1）该类型只有一个值：null （2）typeof运算符的执行结果是"object" Boolean （1）只有两个值：true和false （2）Boolean()函数 （3）JS中的if语句自动调用Boolean()函数。 Object （1）JS中如何定义一个类。 （2）JS中如何创建一个对象。 （3）JS中如何访问对象属性，调用对象的方法。 （4）JS中的一个函数，既是函数声明，又是类的定义，同时函数名也可以看做构造方法名。直接调用函数表示普通函数调用，如果使用new运算符来调用该函数则会创建对象。 （5）使用prototype属性动态的给对象扩展属性以及方法。 ES6版本及之后包括的数据类型有8种 除了以上6种类型之外，还有两种类型分别叫做：Symbol和BigInt null NaN undefined区别 （1）=、==、===三者的区别 （2）null NaN undefined三者类型不同，null和undefined的值可以等同 JS中的事件 常用事件 （1）blur失去焦点 （2）change下拉列表选中项改变，或文本框内容改变 （3）click鼠标单击 （4）dblclick鼠标双击 （5）focus获得焦点 （6）keydown键盘按下 （7）keyup键盘弹起 （8）load页面加载完毕 （9）mousedown鼠标按下 （10）mouseover鼠标经过 （11）mousemove鼠标移动 （12）mouseout鼠标离开 （13）mouseup鼠标弹起 （14）reset表单重置 （15）select文本被选定 （16）submit表单提交 注册事件的两种方式 （1）在标签中使用事件句柄的方式注册事件 <bodyonload="sayHello()"></body> （2）在页面加载完毕后使用JS代码给元素绑定事件 <script> window.onload=sayHello; </script> <script> window.onload=function(){ } </script> 重点：通过事件注册，理解回调函数的概念 代码的执行顺序 这是一种错误的写法： <body> <scripttype="text/javascript"> varelt=document.getElementById("btn"); </script> <inputtype="button"id="btn"value="mybtn"/> </body> 这样写： <body> <inputtype="button"id="btn"value="mybtn"/> <scripttype="text/javascript"> varelt=document.getElementById("btn"); </script> </body> 或者这样写： <body> <scripttype="text/javascript"> window.onload=function(){ varelt=document.getElementById("btn"); } </script> <inputtype="button"id="btn"value="mybtn"/> </body> 通过keydown事件演示回车键13，ESC键27 JS运算符之void 运算符就讲这一个，告诉学生其它运算符和java一样用。void主要讲：javascript:void(0)的用法。 JS之控制语句 告诉学生控制语句和Java一样用，课堂上不再讲解。只讲一下for..in语句的使用，使用for..in语句遍历数组，以及遍历一个对象的属性。 JS内置对象 Array （1）创建数组 （2）JS中的数组特点 （3）JS中数组对象常用方法：push，pop，join，reverse等。 （4）数组遍历 Date （1）new Date() 获取当前系统时间 （2）new Date().getTime()获取时间戳 （3）new Date().getFullYear()、getMonth()等方法。 BOM和DOM的区别与联系 BOM: Browser Object Model（浏览器对象模型），通过BOM的对象和方法可以完成浏览器窗口的操作，例如：关闭浏览器，前进，后退，修改地址栏上的地址等，这些操作都属于BOM。BOM的顶级内置对象是window。 DOM: Document Object Model（文档对象模型），通过DOM的对象和方法可以完成网页中元素的增删改，让网页产生动态效果，DOM的顶级内置对象是document。 DOM编程案例 innerHTML innerText操作div和span JS的正则表达式(Regular Expression) 正则表达式概述 （1）正则表达式是一门独立的学科，不止用在JS中 （2）正则表达式专门用来做字符串格式匹配的 常用的正则表达式符号 参考30分钟入门正则表达式： ^字符串开始 $字符串结束 \s空白 *0~N次 +1~N次 ?0或1次 {3}3次 {3,}3~N次 {3,5}3~5次 (a|b)a或b [a-z]a到z [^abc]不是abc 会写简单的正则表达式 （1）qq号正则 （2）必须由数字和字母组成，不能含有其它符号的正则 （3）给学生一些常用的正则表达式 会创建JS中的正则表达式对象 （1）var regExp = new RegExp("^[1-9][0-9]{4,}$"); （2）var regExp = /^[1-9][0-9]{4,}$/; 会调用JS中正则表达式对象的test()函数 写一个校验用户名只能由数字和字母组成的案例 表单验证 （1）用户名不能为空 （2）用户名必须在6-14位之间 （3）用户名只能由数字和字母组成，不能含有其它符号（正则表达式） （4）密码和确认密码一致，邮箱地址合法。 （5）统一失去焦点验证 （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。 （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value （8）最终表单中所有项均合法方可提交 复选框全选和取消全选 document.getElementById() document.getElementsByName() document.getElementsByTagName() 以上三个函数告知学生很重要 获取下拉列表选中项的value change事件 显示网页时钟 window.setInterval() window.clearInterval() 主要两个函数 捎带着提一下window.setTimeout() 拼接html的方式，设置table的tbody <table> <thead></thead> <tbodyid="userListTbody"></tbody> </table> <script> varhtml=""; html+="<tr>"; html+="<td>"; html+="zhangsan"; html+="</td>"; html+="<td>"; html+="2000-10-11"; html+="</td>"; html+="</tr>"; html+="<tr>"; html+="<td>"; html+="lisi"; html+="</td>"; html+="<td>"; html+="2001-10-11"; html+="</td>"; html+="</tr>"; varuserListTbody=document.getElementById("userListTbody"); userListTbody.innerHTML=html; <script> 要求学生在此之后会使用浏览器的F12 会使用F12调试面板：第一会调错；第二会定位并查看HTML页面元素。 BOM编程案例 window.open()和window.close() window.alert()和window.confirm() 如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口 if(window.top!=window.self){ window.top.location=window.self.location; } 历史记录 window.history.back(); window.history.go(-1); window.history.go(1); window.location.href 提示一下document.location.href也可以完成同样功能 JSON对象 eval函数 怎么创建json对象以及访问json对象的属性 json在开发中有什么用 数据交换作用 写一个这样的JSON 描述一个班级的总人数，另外包括描述班级中每个学生的信息，这样的JSON怎么写 JS中[]和{}的区别 总结一下浏览器向服务器发送请求的常见方式 （1）直接在浏览器地址栏上写URL，get请求。 （2）点击页面超链接，get请求。 （3）提交form表单，可以是get，也可以是post。 （4）window.open(url); （5）window.location.href=url; （6）document.location.href=url;
