1.Javascript：直译式脚本语言
特点：弱类型语言，解释执行的脚本语言，基于对象的语言，跨平台性，javascript是依赖于浏览器
1 ECMAScript规范:描述了JS的语法和基本对象
2 文档对象模型（DOM）：处理网页内容的方法和接口
3 浏览器对象模型（BOM）：与浏览器交互的方法和接口
在页面中使用javascript的常见情况
1.动态改变网页的设计布局(操作页面中的标签元素)
2.验证表单
3.检测浏览器、控制浏览器的行为
4.操作cookies
5.处理页面中触发的事件
6.在使用ajax的时候也要用到javascript
7.很多前端的框架都是基于javascript的封装
js出现的位置
1.须位于 <script> 与 </script> 标签之间,一般放置在 HTML 页面的 <body> 或者 <head> 标签中:
js代码所写的位置会影响到代码的执行效果,因为浏览器会从上到下去加载整个html页面文件,如果js代码是写在head里面,就是先执行js代码然后加载页面标签元素,如果是写body标签中的下面,则表示先加载html页面元素然后在执行js代码.
2.写到标签元素的事件属性里面:<div οnclick="javascript:alert('hello world')">
3.写到一个外部的文件里面(.js结尾的文件)
写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用,<script type="text/javascript" src="js/test.js"></script>
javascript中的变量：ECMAScript的变量是弱类型
局部变量与全局变量：var、
生命周期：局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
javascript中的数据类型：ECMAScript不支持自定义类型，只有六种数据类型
五种基本数据类型：Undefined，Null，Boolean，Number，String
一种引用数据类型：Object(本质由一组无序的键值对组成)
javascript中的三种弹框:阻断型弹框
alert 提示框/警告框
confirm 确认框
prompt 输入对话框
String、Date、Math对象
操作符：1.全等比较(恒等于)
仅比较不转换，先比较两个数所属的数据类型，如果类型不同则不同，如果类型相同，再继续比较两个数的值
console.log("55" == 55); true
console.log("55" === 55);false
2.逗号操作符
可以在一条语句中执行多个操作：var num1 = 1, num2 = 2, num3 = 3;
流程控制语句
1 if语句
2 switch语句
3 循环语句：for语句，do-while语句，while语句
for-in 语句：是一种精准的迭代语句，可以用来枚举对象的属性
for(var propName in window){
console.log(propName+":"+window[propName]);
}
label 语句
循环关键字 break 跳出循环体
continue 结束本次循环，进行下一次循环
4 特殊语句：with语句 简化语句
1.DOM 文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型
document查找 HTML 元素
document.getElementById("...");对象
document.getElementsByName("...");集合
document.getElementsByTagName("...");集合
document.getElementsByClassName("...");集合
找到元素之后干什么
1.改变元素中的内容：利用innerHTML 或者 value来改变元素中显示的内容
2.改变元素的属性
3.改变元素的css样式
4.给元素添加事件处理(覆盖之前的事件)
5.给元素添加事件监听(不覆盖之前的事件)
6.添加或删除元素
2.javascript中的事件
1)事件三要素：事件目标（event target）
事件处理（event handler）
事件对象（event object）
2)事件处理
1.<input type="button" value="clickMe" οnclick="javascript:alert('clicked');">
2.<script type="text/javascript">
function showMsg(){
alert("clicked");
console.log(this)//this代表window
}
</script>
<input type="button" value="clickMe" οnclick="showMsg()">//函数传参this表示当前对象本身
2. 在js中访问元素的事件属性并且赋值
var btn = document.getElementById("btn");
btn.onclick = function(){
console.log(this);
console.log(this == btn);//true this代表btn本身
}
如果之前btn对象中已经有了onclick事件处理了,那么这种方式会覆盖之前的事件
3. 使用指定函数给元素添加事件处理(IE11之前不支持)
在低版本的IE中绑定事件和解除事件可以分别使用attachEvent()函数和detachEvent()函数
事件绑定使用addEventListener函数
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.log(this);
console.log(this == btn);//true
});
注意函数中this代表的含义
注意第一个参数所写的事件名称中不带on
注意这种方式【不会】覆盖之前的事件
事件删除使用removeEventListener函数
var btn = document.getElementById("btn");
var handler = function(){
console.log(this);
console.log(this == btn);//true
}
btn.addEventListener("click",handler);
//移除事件
btn.removeEventListener("click",handler);
注意:可以添加多个事件处理程序，并且按照添加她们的顺序触发。添加事件时如果使用匿名函数将无法删除
注意:这个时候使用btn.οnclick=null是【不能】移除事件处理的
3)事件对象
1. DOM中的事件对象
在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中
element.onclick = function(event){
console.log(event);
}
element.addEventListener("click",function(event){
console.log(event);
});
2. 事件对象event的特殊属性
1)客户区坐标位置
clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标
2)页面坐标位置
pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等
3)屏幕坐标位置
screenX,screenY
4)事件类型
1. UI事件
onload：在浏览器完成对象的装载后立即触发
onunload：在浏览器完成对象的卸载后立即触发(有些情况需要浏览器支持)
onselect:当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
onresize:当浏览器窗口被调整到一个新的高度或者宽度时，会触发
2. 焦点事件
onfocus:元素获得焦点的时候触发
onblur:元素失去焦点的时候触发
//IE支持
onfocusin:与onfocus等价
onfocusout:与onblur等价
3. 鼠标与滚轮事件
onclick:在用户用鼠标左键单击对象时触发。只有在一个元素上相继发生onmousedown,onmouseup事件，才会触发click事件
ondblclick:当用户双击对象时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件
onmousedown:任意鼠标按钮按下时触发
onmouseup:释放鼠标按钮触发
onmousemove:鼠标在元素内部移动的时候重发触发
onmousewheel
滚轮事件
火狐浏览器中需要以下方式来添加该事件
div.addEventListener("DOMMouseScroll",function(event){
//如果是负值说明滚轮是向上滚动，如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数
console.log(event.detail);
});
onmouseover:鼠标位于元素外部，将其首次移入另一个元素边界之内时触发
onmouseenter:鼠标光标从元素外部首次移动到元素范围内激发
onmouseout：在位于元素中的鼠标光标移入到另外一个元素中
onmouseleave:在位于元素中的鼠标光标移动到元素范围之外时触发
4. 鼠标按钮
onmousedown,onmouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。
例如:
function test(event){
//event.button=0 左键
//event.button=1 中键
//event.button=2 右键
}
<input type="button" value="点击" οnmοusedοwn="test(event)" />
5. 键盘事件
onkeydown 当用户按下键盘【任意】按键时触发。
onkeypress 当用户按下【字母数字】键时触发。
onkeyup 当用户按下并释放键盘按键时触发
6. 表单事件
onsubmit 当表单将要被提交时触发。
onreset 当用户重置表单时触发
onchange 当对象或选中区的内容改变时触发。
3.正则表达式和表单验证
1.正则表达式(RegExp)
1)正则表达式的基本语法规则
创建正则表达式对象:
var reg = new RegExp(pattern,modifiers);或者var reg = /pattern/modifiers;
pattern 描述了表达式的模式/规则
modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配
对应修饰符modifiers有三个选项:
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
ascii(A：65中间不全是字符 a:97)
2)pattern内容的分析
括号:
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
(red|blue|green) 查找任何指定的选项。
元字符:
. 查找单个任意字符，除了换行和行结束符.如果要表示.这个字符,需要转义
\w 查找单词字符。 字母 数字 _
\W 查找非单词字符。非 字母 数字 _
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
量词:
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 到 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
3)支持正则表达式的 String 对象的方法
使用字符串对象的相关方法按照正则表达式所描述的规则去搜索、匹配、替换、分割.
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
4)RegExp 对象方法
使用正则表达式对象(RegExp)的相关方法来对指定字符串进行格式的验证.
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
2.表单验证
第一种方式:提交的时候验证
<form action="" οnsubmit="return jsCheck()">
<input type="text" name="name" /><br>
...
<input type="submit" value="提交" />
</form> jsCheck()"表示表单提交之前先调用jsCheck()这个函数进行验证,然后jsCheck()返回true表示通过验证,则表单可以继续提交,返回false表示验证失败,表单不能提交. 第二种方式:在填写输入框的时候或者输入框失去焦点的时候进行验证,和第一种方式验证的时间点不同,但是验证使用的函数都是一样的.一般用ajax做
4.浏览器对象模型Browser Object Model (BOM)
1)窗口大小
innerWidth 页面视图区的宽度
innerHeight 页面视图区的高度
outerWidth 浏览器窗口的宽度
outerHeight 浏览器窗口的高度
2)scrren对象
屏幕总宽度/高度:
screen.width
screen.height
3)打开/关闭窗口
window.open()
window.colse();
4)location对象：提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location是个神奇的对象，既是window的对象也是document的对象
5)history对象
6)window的超时调用和定时调用
特点：弱类型语言，解释执行的脚本语言，基于对象的语言，跨平台性，javascript是依赖于浏览器
1 ECMAScript规范:描述了JS的语法和基本对象
2 文档对象模型（DOM）：处理网页内容的方法和接口
3 浏览器对象模型（BOM）：与浏览器交互的方法和接口
在页面中使用javascript的常见情况
1.动态改变网页的设计布局(操作页面中的标签元素)
2.验证表单
3.检测浏览器、控制浏览器的行为
4.操作cookies
5.处理页面中触发的事件
6.在使用ajax的时候也要用到javascript
7.很多前端的框架都是基于javascript的封装
js出现的位置
1.须位于 <script> 与 </script> 标签之间,一般放置在 HTML 页面的 <body> 或者 <head> 标签中:
js代码所写的位置会影响到代码的执行效果,因为浏览器会从上到下去加载整个html页面文件,如果js代码是写在head里面,就是先执行js代码然后加载页面标签元素,如果是写body标签中的下面,则表示先加载html页面元素然后在执行js代码.
2.写到标签元素的事件属性里面:<div οnclick="javascript:alert('hello world')">
3.写到一个外部的文件里面(.js结尾的文件)
写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用,<script type="text/javascript" src="js/test.js"></script>
javascript中的变量：ECMAScript的变量是弱类型
局部变量与全局变量：var、
生命周期：局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
javascript中的数据类型：ECMAScript不支持自定义类型，只有六种数据类型
五种基本数据类型：Undefined，Null，Boolean，Number，String
一种引用数据类型：Object(本质由一组无序的键值对组成)
javascript中的三种弹框:阻断型弹框
alert 提示框/警告框
confirm 确认框
prompt 输入对话框
String、Date、Math对象
操作符：1.全等比较(恒等于)
仅比较不转换，先比较两个数所属的数据类型，如果类型不同则不同，如果类型相同，再继续比较两个数的值
console.log("55" == 55); true
console.log("55" === 55);false
2.逗号操作符
可以在一条语句中执行多个操作：var num1 = 1, num2 = 2, num3 = 3;
流程控制语句
1 if语句
2 switch语句
3 循环语句：for语句，do-while语句，while语句
for-in 语句：是一种精准的迭代语句，可以用来枚举对象的属性
for(var propName in window){
console.log(propName+":"+window[propName]);
}
label 语句
循环关键字 break 跳出循环体
continue 结束本次循环，进行下一次循环
4 特殊语句：with语句 简化语句
1.DOM 文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型
document查找 HTML 元素
document.getElementById("...");对象
document.getElementsByName("...");集合
document.getElementsByTagName("...");集合
document.getElementsByClassName("...");集合
找到元素之后干什么
1.改变元素中的内容：利用innerHTML 或者 value来改变元素中显示的内容
2.改变元素的属性
3.改变元素的css样式
4.给元素添加事件处理(覆盖之前的事件)
5.给元素添加事件监听(不覆盖之前的事件)
6.添加或删除元素
2.javascript中的事件
1)事件三要素：事件目标（event target）
事件处理（event handler）
事件对象（event object）
2)事件处理
1.<input type="button" value="clickMe" οnclick="javascript:alert('clicked');">
2.<script type="text/javascript">
function showMsg(){
alert("clicked");
console.log(this)//this代表window
}
</script>
<input type="button" value="clickMe" οnclick="showMsg()">//函数传参this表示当前对象本身
2. 在js中访问元素的事件属性并且赋值
var btn = document.getElementById("btn");
btn.onclick = function(){
console.log(this);
console.log(this == btn);//true this代表btn本身
}
如果之前btn对象中已经有了onclick事件处理了,那么这种方式会覆盖之前的事件
3. 使用指定函数给元素添加事件处理(IE11之前不支持)
在低版本的IE中绑定事件和解除事件可以分别使用attachEvent()函数和detachEvent()函数
事件绑定使用addEventListener函数
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.log(this);
console.log(this == btn);//true
});
注意函数中this代表的含义
注意第一个参数所写的事件名称中不带on
注意这种方式【不会】覆盖之前的事件
事件删除使用removeEventListener函数
var btn = document.getElementById("btn");
var handler = function(){
console.log(this);
console.log(this == btn);//true
}
btn.addEventListener("click",handler);
//移除事件
btn.removeEventListener("click",handler);
注意:可以添加多个事件处理程序，并且按照添加她们的顺序触发。添加事件时如果使用匿名函数将无法删除
注意:这个时候使用btn.οnclick=null是【不能】移除事件处理的
3)事件对象
1. DOM中的事件对象
在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中
element.onclick = function(event){
console.log(event);
}
element.addEventListener("click",function(event){
console.log(event);
});
2. 事件对象event的特殊属性
1)客户区坐标位置
clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标
2)页面坐标位置
pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等
3)屏幕坐标位置
screenX,screenY
4)事件类型
1. UI事件
onload：在浏览器完成对象的装载后立即触发
onunload：在浏览器完成对象的卸载后立即触发(有些情况需要浏览器支持)
onselect:当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
onresize:当浏览器窗口被调整到一个新的高度或者宽度时，会触发
2. 焦点事件
onfocus:元素获得焦点的时候触发
onblur:元素失去焦点的时候触发
//IE支持
onfocusin:与onfocus等价
onfocusout:与onblur等价
3. 鼠标与滚轮事件
onclick:在用户用鼠标左键单击对象时触发。只有在一个元素上相继发生onmousedown,onmouseup事件，才会触发click事件
ondblclick:当用户双击对象时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件
onmousedown:任意鼠标按钮按下时触发
onmouseup:释放鼠标按钮触发
onmousemove:鼠标在元素内部移动的时候重发触发
onmousewheel
滚轮事件
火狐浏览器中需要以下方式来添加该事件
div.addEventListener("DOMMouseScroll",function(event){
//如果是负值说明滚轮是向上滚动，如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数
console.log(event.detail);
});
onmouseover:鼠标位于元素外部，将其首次移入另一个元素边界之内时触发
onmouseenter:鼠标光标从元素外部首次移动到元素范围内激发
onmouseout：在位于元素中的鼠标光标移入到另外一个元素中
onmouseleave:在位于元素中的鼠标光标移动到元素范围之外时触发
4. 鼠标按钮
onmousedown,onmouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。
例如:
function test(event){
//event.button=0 左键
//event.button=1 中键
//event.button=2 右键
}
<input type="button" value="点击" οnmοusedοwn="test(event)" />
5. 键盘事件
onkeydown 当用户按下键盘【任意】按键时触发。
onkeypress 当用户按下【字母数字】键时触发。
onkeyup 当用户按下并释放键盘按键时触发
6. 表单事件
onsubmit 当表单将要被提交时触发。
onreset 当用户重置表单时触发
onchange 当对象或选中区的内容改变时触发。
3.正则表达式和表单验证
1.正则表达式(RegExp)
1)正则表达式的基本语法规则
创建正则表达式对象:
var reg = new RegExp(pattern,modifiers);或者var reg = /pattern/modifiers;
pattern 描述了表达式的模式/规则
modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配
对应修饰符modifiers有三个选项:
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
ascii(A：65中间不全是字符 a:97)
2)pattern内容的分析
括号:
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
(red|blue|green) 查找任何指定的选项。
元字符:
. 查找单个任意字符，除了换行和行结束符.如果要表示.这个字符,需要转义
\w 查找单词字符。 字母 数字 _
\W 查找非单词字符。非 字母 数字 _
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
量词:
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 到 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
3)支持正则表达式的 String 对象的方法
使用字符串对象的相关方法按照正则表达式所描述的规则去搜索、匹配、替换、分割.
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
4)RegExp 对象方法
使用正则表达式对象(RegExp)的相关方法来对指定字符串进行格式的验证.
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
2.表单验证
第一种方式:提交的时候验证
<form action="" οnsubmit="return jsCheck()">
<input type="text" name="name" /><br>
...
<input type="submit" value="提交" />
</form> jsCheck()"表示表单提交之前先调用jsCheck()这个函数进行验证,然后jsCheck()返回true表示通过验证,则表单可以继续提交,返回false表示验证失败,表单不能提交. 第二种方式:在填写输入框的时候或者输入框失去焦点的时候进行验证,和第一种方式验证的时间点不同,但是验证使用的函数都是一样的.一般用ajax做
4.浏览器对象模型Browser Object Model (BOM)
1)窗口大小
innerWidth 页面视图区的宽度
innerHeight 页面视图区的高度
outerWidth 浏览器窗口的宽度
outerHeight 浏览器窗口的高度
2)scrren对象
屏幕总宽度/高度:
screen.width
screen.height
3)打开/关闭窗口
window.open()
window.colse();
4)location对象：提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location是个神奇的对象，既是window的对象也是document的对象
5)history对象
6)window的超时调用和定时调用
1132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
