Javascript,从“最被误解的语言”,最后神奇地转变成为“最流行的语言”,证明它经受得起时间的考验。虽然单独来看,它的交互设计有些失败,但是加上Ajax的完美配合,javascript就成了一款轻便并且又实用的好语法。
如果想要更高效、更系统地学会javascript,最好采用边学边练的学习模式。
如果觉得javascript的学习难度较高,不易理解,建议采用视频的方式进行学习,更易吸收:
“成功没有捷径,脚踏实地一步一个脚印,该来的总会来,不好高骛远,不急功近利,付出总会有回报,不管处于哪个阶段,都要一步一个脚印,踏实的走好每一步!”快和我一起走进JavaScript的世界吧。
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 函数名(形式参数列表){
函数体;
}
例如:
function sum(a, b){
return a + 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){
return a + b;
}
(3)JS中的函数定义在脚本块中,页面在打开的时候,函数并不会自动执行,函数是需要手动调用才能执行的。
(4)由于JS是一种弱类型编程语言,所以函数不能同名,没有重载机制
(5)这样的代码顺序是可以的,页面打开的时候会先进行所有函数的声明,函数声明优先级较高。
<script type="text/javascript">
sayHello();
function sayHello(){
alert("Hello JS");
}
</script>
(6)用户点击按钮,调用函数
<script type="text/javascript">
function sayHello(){
alert("hello js");
}
</script>
<input type="button" value="hello" onclick="sayHello();"/>
局部变量和全局变量
(1)局部变量:函数的形参是局部变量,另外使用var关键字在函数体中声明的变量是局部变量,函数执行结束之后,局部变量的内存就释放了。
(2)全局变量:在函数体外声明的变量属于全局变量,另外不使用var关键字声明的变量无论位置在哪,它都是全局变量,全局变量在浏览器关闭时销毁。
JS数据类型
- typeof运算符
- JS中为什么会有typeof运算符?
- typeof运算符怎么用,代码怎么写?
语法格式是:
function sum(a, b){
if("number" === typeof a && "number"=== typeof b){
return a + b;
}
alert("数据格式不合法");
return 0;
}
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)在标签中使用事件句柄的方式注册事件
<body onload="sayHello()"></body>
(2)在页面加载完毕后使用JS代码给元素绑定事件
<script>
window.onload = sayHello;
</script>
<script>
window.onload = function(){
}
</script>
重点:通过事件注册,理解回调函数的概念
代码的执行顺序
这是一种错误的写法:
<body>
<script type="text/javascript">
var elt = document.getElementById("btn");
</script>
<input type="button" id="btn" value="mybtn"/>
</body>
这样写:
<body>
<input type="button" id="btn" value="mybtn"/>
<script type="text/javascript">
var elt = document.getElementById("btn");
</script>
</body>
或者这样写:
<body>
<script type="text/javascript">
window.onload = function(){
var elt = document.getElementById("btn");
}
</script>
<input type="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>
<tbody id="userListTbody"></tbody>
</table>
<script>
var html = "";
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>";
var userListTbody = 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;