一、JS定义及应用
JavaScript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JS控制HTML方式：
直接在HTML中写入代码：<script type="text/javascript">......</script>
引用JS外部文件：<script src="script.js"></script>（script.js是外部文件）
二、JS基础
- 1、JS变量命名（var）规则：
- 1.变量必须使用字母、下划线(_)或者美元符($)开始。
- 2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
- 3.不能使用JavaScript关键词与JavaScript保留字。
- 2、函数定义：
function 函数名()
{
函数代码;
} - 函数的调用：1、在<script>标签内部直接调用。2、在html文件中，通过按钮调用函数（<input type="button" value="点点我" onclick="函数名"> ）
3、输出内容：document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。输出HTML标签，并起作用，标签使用""括起来。
4、消息对话框：alert（字符串或变量）; 直接在对话框中显示括号里的内容。
confirm 消息对话框：
confirm(str);
str：在消息对话框中要显示的文本
返回值: Boolean值
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
function rec(){
var mymessage=confirm("是女的？") ;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
- prompt 消息对话框:
prompt(str1, str2);
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:
点击确定按钮，文本框中的内容将作为函数返回值
点击取消按钮，将返回null
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score =prompt("请输入成绩：") ;
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
打开新窗口：window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。窗口关闭：window.close(); 或<窗口对象>.close(); （关闭指定窗口）
DOM节点:
1、元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2、文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3、属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
通过id获取元素： document.getElementById(“id”)
innerHTML属性：Object.innerHTML Object是获取的对象
改变html样式：Object.style.property=new style;
显示和隐藏：Object.style.display = value
控制类名：object.className = classname（1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观）
三、JS数组
- 创建数组：var myarray=new Array();
- 二维数组：
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
四、JS事件
-
主要事件表：
Paste_Image.png 鼠标单击事件( onclick ）:当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
鼠标经过事件（onmouseover）：鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
鼠标移开事件（onmouseout）：鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
光标聚焦事件（onfocus）：当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
失焦事件（onblur）：onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
内容选中事件（onselect）：选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
文本框内容改变事件（onchange）：通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
加载事件（onload）：事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：
1、 加载页面时，触发onload事件，事件写在<body>标签内。
2.、此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。
卸载事件（onunload）：当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
Windows对象方法：
五、JavaScript 计时器：
-
计时器方法
Paste_Image.png
计时器setInterval():setInterval(代码,交互时间);
参数说明：
1、代码：要调用的函数或要执行的代码串。
2、交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。 取消计时器clearInterval()：clearInterval(id_of_setInterval)
计时器setTimeout()：setTimeout(代码,延迟时间);在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
取消计时器clearTimeout()：clearTimeout(id_of_setTimeout)
History 对象：window.history.[属性|方法]；history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
History 对象属性
- History 对象方法
返回前一个浏览的页面：window.history.back();=window.history.go(-1);
返回浏览历史中的其他页面：window.history.go(number);
参数：
- Location对象：location.[属性|方法]；location用于获取或设置窗体的URL，并且可以用于解析URL。
- location 对象属性：
- location 对象方法:
- Navigator对象：包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:
userAgent：navigator.userAgent；返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
- screen对象：window.screen.属性;用于获取用户的屏幕信息。
对象属性：
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
- screen.height 返回屏幕分辨率的高
- screen.width 返回屏幕分辨率的宽
屏幕可用高和宽度 - screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
- screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
六、文档对象模型DOM（Document Object Model）：
定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
遍历节点树:
以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
DOM操作:
getElementsByName()方法：document.getElementsByName(name)；返回带有指定名称的节点对象的集合。（返回名字是name的元素数组）
getElementsByTagName()方法：document.getElementsByTagName(Tagname)；返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
getElementByID,getElementsByName,getElementsByTagName区别：
1、ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2、Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3、TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。getAttribute()方法：elementNode.getAttribute(name)；通过元素节点的属性名称获取属性的值。
1、elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2、name：要想查询的元素节点的属性名字setAttribute()方法：elementNode.setAttribute(name,value)；setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1、nodeName : 节点的名称
2、nodeValue ：节点的值
3、nodeType ：节点的类型访问子节点childNodes：elementNode.childNodes；访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
firstChild 属性：返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。lastChild 属性：返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。访问父节点parentNode： elementNode.parentNode；
访问兄弟节点：
1、nextSibling 属性：nodeObject.nextSibling；可返回某个节点之后紧跟的节点（处于同一树层级中）。
2、previousSibling 属性：nodeObject.previousSibling ；可返回某个节点之前紧跟的节点（处于同一树层级中）。
插入节点appendChild()：appendChild(newnode)；在指定节点的最后一个子节点列表之后添加一个新的子节点。
插入节点insertBefore()：insertBefore(newnode,node);可在已有的子节点前插入一个新的子节点。（node: 指定此节点前插入节点。）
删除节点removeChild()：nodeObject.removeChild(node)；removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
替换元素节点replaceChild()：node.replaceChild (newnode,oldnew ) ；实现子节点(对象)的替换。返回被替换对象的引用。
创建元素节点createElement：document.createElement(tagName)；
创建文本节点createTextNode：document.createTextNode(data)
