JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。
基本特色
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
-
是一种解释性脚本语言（代码不进行预编译）。
-
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
-
JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
-
可以实现web页面的人机交互。
日常用途
HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
下面是一些常见的 HTML 事件：
- onchange HTML 元素已被改变
- onclick 用户点击了 HTML 元素
- onmouseover 用户把鼠标移动到 HTML 元素上
- onmouseout 用户把鼠标移开 HTML 元素
- onkeydown 用户按下键盘按键
- onload 浏览器已经完成页面加载
- onunload 当刷新或者关闭浏览页面时加载
onchange HTML 元素已被改变
使用 onchange 事件将下拉框的选项，跳转链接页面，到同页面iframe页面里面显示：
onclick 鼠标点击了 HTML 元素
onmouseover 当鼠标移动到 HTML 元素上
onmouseout 当鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载
onunload 当刷新或者关闭浏览页面是加载(注：火狐或者谷歌浏览器要打开 F12 开发者模式 )
测试发现只有刷新有效，关闭时不提示，修改代码：
然后在IE浏览器里测试，刷新和关闭时都会有提示：
DOM的官方定义:
DOM Document Object Model 文档对象模型。
DOM的官方定义：W3C的DOM，可以使程序（HTML CSS）或脚本(JS或AS、JScript)，动态的访问或操作文档的内容（某些具体的数据）、结构（标签或者元素）、样式(CSS）。
DOM只是一个标准（W3C），就是操作网页的标准。而这个标准(模型)在浏览器中，以“对象”的方式实现。
DOM的分类
l 核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
l HTMLDOM：针对HTML文档，提供的专有的属性和方法。
l XMLDOM：针对XML文档，提供的专有的属性和方法。
l EventDOM：事件DOM，提供了很多的常用事件。
l CSSDOM：提供了操作CSS的一个接口。
HTML节点（标签、元素）树
DOM中节点的类型：
l document文档节点：代表整个网页，document文档节点不对应标记。是访问文档中各元素的起点。
l element元素节点：元素节点对应于网页中的各标记。
l attribute属性节点：每个元素都有若干个属性。
l text文本节点：文本节点是最底层节点。
核心DOM公共属性和方法
l nodeName：节点名称。
l nodeValue：节点的值。
l firstChild：第一个子节点。
l lastChild：最后一个子节点。
l parentNode：父节点。
l childNodes：子节点列表，是一个数组。
节点访问
为什么，document.firstChild找到的不是HTML节点呢？
DOM是针对HTML4.01开发的。我们现在是XHTML1.0。
所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。
为什么，node_body.firstChild找不到table节点？
在Firefox下，会把空格或换行，当成一个文本节点。因此，所有标记之间的空格和换行，都去掉。
查找html节点的方法
l document.firstChild
l document.documentElement(兼容性较好)
查找body节点的方法
l document.firstChild.lastChild
l document.body(推荐使用)
节点属性
1、getAttribute()——获取属性的值
l 描述：获取节点属性的值。
l 语法：nodeObj.getAttribute(name)
l 参数：name代表当前节点的某个属性。
l 举例：var src = imgObj.getAttribute(“src”)
2、setAttribute()——添加属性
l 描述：给某个节点添加属性。
l 语法：nodeObj.setAttribute(name,value)
l 参数：
u name代表属性名称。
u value代表属性的值。
l 举例：imgObj.setAttribute(“src” , “images/02.jpg”)
3、removeAttribute()——删除属性
l 描述：删除某个节点的属性。
l 语法：nodeObj.removeAttribute(name)
l 举例：imgObj.removeAttribute(“src”)
节点操作
createElement()创建节点
l 语法：var nodeObj = document.createElement(tagName)
appendChild()追加节点
l 语法：parentNode.appendChild(childNode)
课堂实例：随机显示小星星
<script type="text/javascript">
//实例：随机显示小星星
/*
(1)网页加载完成，背景色为黑色
(2)创建图片节点，并追加到body父节点下
(3)定时器
(4)星星随机大小
(5)星星随机定位
(6)单击星星，星星消失。
*/
window.onload = function()
{
document.body.bgColor = "#000";
//定时器开关
window.setInterval("start2()",1000);
}
function start2()
{
//创建图片节点
var imgObj = document.createElement("img");
//追加到body节点
document.body.appendChild(imgObj);
//添加src属性
imgObj.setAttribute("src","images/xingxing.gif");
//添加width属性
var imgWidth = getRandom(15,85);
imgObj.setAttribute("width",imgWidth);
//添加style属性
var winWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var winHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
var x = getRandom(0,winWidth);
var y = getRandom(0,winHeight);
imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px");
//单击删除星星
imgObj.setAttribute("onclick","removeImg(this)");
}
function removeImg(imgObj)
{
//删除子节点img
document.body.removeChild(imgObj);
}
function getRandom(min,max)
{
var random = Math.random()*(max-min)+min;
//向下取整
random = Math.floor(random);
//返回值
return random;
}
</script>
HTML DOM简介和新特性
在核心DOM中，已经可以实现对网页元素的操作了，为什么还要有HTMLDOM呢？
因为，核心DOM中，对节点的访问，都是从根节点开始的，访问方式十分麻烦。特别是当节点层次很深时，更是麻烦。因此，才有了HTMLDOM。
1、HTMLDOM的新特性
l 每一个HTML标记，都对应一个对象。如：<img>标记，就是一个img对象。
l 每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
u <img>属性：src、width、height、border、style、title、id、class等。
u 在JS中，img对象属性：src、width、height、border、style、title、id、className等。
2、HTML DOM访问HTML元素的方法
（1）根据元素的id查找对象——document.getElementById(id)
2、根据HTML标签名找对象
l 描述：根据HTML标签名找对象
l 语法：var arr = parentNode.getElementsByTagName(tagName)
l 参数：
u tagName就是要查找的标签名称，不能带尖括号。
u parentNode代表上层节点。
l 返回值：返回一个对象数组。
l 举例：ulObj.getElementsByTagName(“li”)
元素对象的属性
l tagName：与nodeName功能一样。
l className：与class属性功能一样。
l innerHTML：设置或读取某个标记中的所有内容，包括HTML文本。只能用于双边标记。
u nodeValue：指纯文本。
l offsetWidth：指元素的可见宽度，不含滚动条中的内容。只读属性。不带px单位。
l offsetHeight：指元素的可见高度，不含滚动条中的内容。只读属性。不带px单位。
l scrollWidth：指元素的总宽度，包含滚动条中的内容。只读属性。不带px单位。
l scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。
l scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。
u 如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。
l scrollLeft：与scrollTop描述一样，只是向左滚动的距离。
事件：onscroll
l 描述：当拖动滚动条时发生。
课堂案例：书讯快递
Event DOM
1、事件简介
事件可以实现人机交互，或者与网页的交互。
当网页加载完成(onload)，更改网页背景色(功能函数)。
2、事件属性
每一个HTML标记的属性，与元素对象的属性，一一对应。
每一个HTML标记的事件属性，与元素对象的事件属性，也是一一对应。
HTML中的事件属性：onMouseOver、onLoad、onClick……
JS中的事件属性：onmouseover、onload、onclick……
注意：JS中的事件属性，要全小写。
提示：事件发生后，调用的一定是JS函数，不管是有名函数，还是匿名函数。
Event对象简介
当事件发生时，会自动向事件调用函数，传递一个event参数。那么，这个event参数，就是event对象。
Event对象的作用：可以获取当前事件发生时的环境信息。如：点击时的坐标值。
Event对象是短暂存在的，也就是：当一个新的事件发生时，这个event对象就消失了。
每时每刻，只能有一个事件发生。每时每刻，只能有一个event对象产生。
DOM中Event对象——标准浏览器(火狐、谷歌)
1、DOM中引入Event对象
（1）通过HTML标记的事件属性来传递event对象
提示：在传递event时，该event参数，必须全小写，并且不能加引号。
（2）使用元素对象的事件属性来传递event对象
2、DOM中Event对象属性
l type：事件类型
l clientX和clientY：相对浏览器窗口的坐标。
l pageX和pageY：相对网页左端和顶端的距离。
l screenX和screenY：相对显示屏幕左端和顶端的距离。
IE中Event对象
在IE中，event是window对象的一个属性。如：window.event或event
1、IE中引用Event对象
2、IE中Event对象属性
l type：事件类型
l clientX和clientY：相对浏览器窗口的坐标。
l x和y：相对于网页的坐标。
l screenX和screenY：相对于屏幕的坐标。
课堂实例：点出满天小星星
满天星
<!DOCTYPE html>
<html οnclick="star()" style="background-color: black">
<head>
<title>star</title>
<meta charset="utf-8">
<script type="text/javascript">
function star() {
var img=document.createElement('img');
img.src="images/star.gif";
img.width=Math.floor(Math.random()*(100-30) + 20);
var X=event.clientX,Y=event.clientY;
img.style.position='fixed';
img.style.top=Y+'px';
img.style.left=X+'px';
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
制作一个页面。要求：进入页面是黑色，点击页面任意位置出现星星。大小随机。
效果图：
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
