一、为什么学习JavaScript（JavaScript是脚本语言）
1、JavaScript是web开发人员必须学习的3门语言：1.HTML定义了网页的内容 2.CSS描述了网页的布局 3.JavaScript控制了网页的行为
二、JavaScript的各种方法
1、JavaScript：直接写入HTML输出流
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");2、JavaScript：对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>3、JavaScript：改变HTML内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>女孩</h4>
<p id="demo">男孩</p>
<button type="button" onclick="myFunction()">点击</button>
</body>
<script>
function myFunction(){
x=document.getElementById("demo");//找到元素
x.innerHTML="我喜欢你"; //改变内容
}
</script>
</html>
4、改变HTML图像
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">5、JavaScript：改变 HTML 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变样式</title>
</head>
<body>
<p id="demo">我喜欢你</p>
<button type="button" onclick="myFunction()">点击样式</button>
</body>
<script>
function myFunction(){
var x = document.getElementById("demo");
x.style.color="#ff0000";
}
</script>
</html>6、JavaScript：验证输入
isNaN():验证输入
三、JavaScript用法
1、外部的JavaScript
把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
//外部的js文件可以放在<head>和<boby>
<body> <script src="myScript.js"></script> </body>
2 、JavaScript显示数据(JavaScript输出没有任何打印或者输出的函数)
1、使用window.alert()弹出警告框
2、使用document.write()方法将内容写到HTML文档中
3、innerHTML写入到HTML元素
4、使用console.log()写入到浏览器的控制台
四、JavaScript数据类型
1、值类型(基本类型)
1、 数字(Number)字面量可以是整数或者小数，或者是科学计数(e)
3.14 10001 123e5
2、字符串(String)字面量可以使用单引号或双引号
var carname="Volvo XC60";
var carname='Volvo XC60';
3、布尔(Boolean) 布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
4、空(Null)
val cars=null;
5、未定义(Undefined)
6、Symbol
(Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。)
2、引用数据类型(对象类型)
1、数组(Array)
1、(condensed array):
var cars=new Array("Saab","Volvo","BMW");
2、(literal array):
var cars=[1,2,34,5,6,9]
2、对象（Object）定义一个对象
name=person.lastname;
name=person["lastname"];
3、函数（Function）定义一个函数
function myFunction(a, b) { return a * b;}
4、正则(RegExp) 特殊的对象
5、日期(Date)
五、JavaScript变量
在编程语言中，变量用于存储数据值。JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
var x = 6;
1、变量的命名规则：
1.变量必须以字母开头
2.变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
3.变量名称对大小写敏感（y 和 Y 是不同的变量）
2、局部 JavaScript 变量
1、在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的)
3、全局 JavaScript 变量
1、在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
4、JavaScript 变量的生存期
1、JavaScript 变量的生命期从它们被声明的时间开始。
2、局部变量会在函数运行以后被删除。
3、全局变量会在页面关闭后被删除。
5、JavaScript 作用域
1、在 JavaScript 中, 对象和函数同样也是变量。
2、变量在函数内声明，变量为局部变量，具有局部作用域。局部变量：只能在函数内部访问。
六、JavaScript操作符
类型 实例 描述 赋值，算术和位运算符 = + - * / 在 JS 运算符中描述 条件，比较及逻辑运算符 == != < > 在 JS 比较运算符中描述
七、JavaScript关键字
abstract else instanceof super boolean enum int switch break export interface synchronized byte extends let this case false long throw catch final native throws char finally new transient class float null true const for package try continue function private typeof debugger goto protected var default if public void delete implements return volatile do import short while double in static with
八、 JavaScript函数
JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b;
// 返回 a 乘以 b 的结果
}
九、JavaScript字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
十、JavaScript语句标识符
语句 描述 break 用于跳出循环。 catch 语句块，在 try 语句块执行出错时执行 catch 语句块。 continue 跳过循环中的一个迭代。 do ... while 执行一个语句块，在条件语句为 true 时继续执行该语句块。 for 在条件语句为 true 时，可以将代码块执行指定的次数。 for ... in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 function 定义一个函数 if ... else 用于基于不同的条件来执行不同的动作。 return 退出函数 switch 用于基于不同的条件来执行不同的动作。 throw 抛出（生成）错误 。 try 实现错误处理，与 catch 一同使用。 var 声明一个变量。 while 当条件语句为 true 时，执行语句块。
十一、JavaScript对象
JavaScript 对象是拥有属性和方法的数据。
1、对象的属性和方法
属性 方法 car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = whitecar.start()
car.drive()
car.brake()
car.stop()
十二、 JavaScript事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
1、HTML事件
HTML 事件可以是浏览器行为，也可以是用户行为。
1、修改 id="demo" 元素的内容。
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
2、修改自身元素的内容 (使用 this.innerHTML)
<button οnclick="this.innerHTML=Date()">现在的时间是?</button>
3、常见的HTML事件
事件 描述 onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 鼠标指针移动到指定的元素上时发生 onmouseout 用户从一个 HTML 元素上移开鼠标时发生 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载
2、HTML DOM事件（DOM： 指明使用的 DOM 属性级别。）
1、鼠标事件
属性 描述 DOM onclick 当用户点击某个对象时调用的事件句柄。 2 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发 ondblclick 当用户双击某个对象时调用的事件句柄。 2 onmousedown 鼠标按钮被按下。 2 onmouseenter 当鼠标指针移动到元素上时触发。 2 onmouseleave 当鼠标指针移出元素时触发 2 onmousemove 鼠标被移动。 2 onmouseover 鼠标移到某元素之上。 2 onmouseout 鼠标从某元素移开。 2 onmouseup 鼠标按键被松开。 2
2、键盘事件
属性 描述 DOM onkeydown 某个键盘按键被按下。 2 onkeypress 某个键盘按键被按下并松开。 2 onkeyup 某个键盘按键被松开。 2
3、框架/对象（Frame/Object）事件
属性 描述 DOM onabort 图像的加载被中断。 ( <object>) 2 onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 2 onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) onhashchange 该事件在当前 URL 的锚部分发生修改时触发。 onload 一张页面或一幅图像完成加载。 2 onpageshow 该事件在用户访问页面时触发 onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发 onresize 窗口或框架被重新调整大小。 2 onscroll 当文档被滚动时发生的事件。 2 onunload 用户退出页面。 ( <body> 和 <frameset>) 2
4、表单事件
属性 描述 DOM onblur 元素失去焦点时触发 2 onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 2 onfocus 元素获取焦点时触发 2 onfocusin 元素即将获取焦点时触发 2 onfocusout 元素即将失去焦点时触发 2 oninput 元素获取用户输入时触发 3 onreset 表单重置时触发 2 onsearch 用户向搜索域输入文本时触发 ( <input="search">) onselect 用户选取文本时触发 ( <input> 和 <textarea>) 2 onsubmit 表单提交时触发 2
4、剪贴板事件
属性 描述 DOM oncopy 该事件在用户拷贝元素内容时触发 oncut 该事件在用户剪切元素内容时触发 onpaste 该事件在用户粘贴元素内容时触发
5、打印事件
属性 描述 DOM onafterprint 该事件在页面已经开始打印，或者打印窗口已经关闭时触发 onbeforeprint 该事件在页面即将开始打印时触发
6、拖动事件
事件 描述 DOM ondrag 该事件在元素正在拖动时触发 ondragend 该事件在用户完成元素的拖动时触发 ondragenter 该事件在拖动的元素进入放置目标时触发 ondragleave 该事件在拖动元素离开放置目标时触发 ondragover 该事件在拖动元素在放置目标上时触发 ondragstart 该事件在用户开始拖动元素时触发 ondrop 该事件在拖动元素放置在目标区域时触发
7、多媒体（Media）事件
事件 描述 DOM onabort 事件在视频/音频（audio/video）终止加载时触发。 oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。 oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。 ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。 onemptied 当期播放列表为空时触发 onended 事件在视频/音频（audio/video）播放结束时触发。 onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。 onloadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。 onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。 onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。 onpause 事件在视频/音频（audio/video）暂停时触发。 onplay 事件在视频/音频（audio/video）开始播放时触发。 onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。 onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。 onratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。 onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。 onseeking 事件在用户开始重新定位视频/音频（audio/video）时触发。 onstalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发。 onsuspend 事件在浏览器读取媒体数据中止时触发。 ontimeupdate 事件在当前的播放位置发送改变时触发。 onvolumechange 事件在音量发生改变时触发。 onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。
8、动画事件
事件 描述 DOM animationend 该事件在 CSS 动画结束播放时触发 animationiteration 该事件在 CSS 动画重复播放时触发 animationstart 该事件在 CSS 动画开始播放时触发