JS基础
JS的作用
1、操作HTML元素
2、相应用户的操作
3、处理发送的数据
等等
如何插入JavaScript代码
使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。
<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。
规范：
变量必须使用字母、下划线(_)或者美元符($)开始。
然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
不能使用JavaScript关键词与JavaScript保留字。
JS严格区分大小写
变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
不允许使用JavaScript关键字和保留字做变量名
如果浏览器不支持script的话则进行
<noscript>
您的浏览器不支持JavaScript
</noscript>
不过基本用不上...
JavaScript-什么是函数
函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。
//基本语法如下
function 函数名()
{
函数代码;
}
JS如何获取Html元素：
1.通过ID获取（常用方法）
document .getElementById('id')
2.点击事件：
document .getElementById('id') .onClick=
function(){
//响应的内容
alert('alert是弹窗的意思');
}；
不同位置的JS代码：
如果script标签在body上面，是获取不到id的，所以要添加一段语句
//页面在加载完成之后，执行代码,一个页面只能出现一次
window.onload=function(){
}
JavaScript-输出内容（document.write）
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
</script>
看一个完整例子：（点击粉色框出现弹框alert）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tit11e</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "Microsoft Himalaya";
}
a {
text-decoration: none;
}
a img {
display: block;
border: none;
}
li {
list-style: none;
}
#box {
width: 100px;
height: 100px;
background: pink;
margin: 50px auto;
}
</style>
<script>
window.onload=function(){
document.getElementById("box").onclick=function () {
alert("hello ~~");
}
};
</script>
</head>
<body>
<div id="box"></div>
<script>
document.getElementById("box").onclick=function () {
alert("hello word!");
}
</script>
</body>
</html>
JavaScript事件
图片来自http://www.w3school.com.cn/jsref/jsref_events.asp
JavaScript 系统弹窗
1、alert("提示弹窗");
2、confirm("判断弹窗")
3、prompt("输入弹窗")
系统弹窗是不可以给样式的。
JavaScript-打开/关闭新窗口（window.open/window.close）
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
参数表：
关闭窗口：
window.close(); //关闭本窗口
改变内容的方式
1、innerHTML
//效果是鼠标移动到这个box中 改变这个标签的内容为：内容
document.getElementById("box").onmouseover=function () {
document.getElementById("box").innerHTML='内容';
}
2、innerText
使用方法同innerHTML，区别是innerHTML可以识别内容中的标签，而innerText只能识别纯文本。
定义变量 -> var
定义变量的规则：
字母、数字、"_"、"$" 不能以数字开头。
var box = document.getElementById('box');
box.onmouseover = function () {
document.getElementById("box").innerHTML = '内容1';
}
操作样式
操作JS修改的元素样式的时候一般都是都是标签样式，标签样式的优先级是最高的。
var box = document.getElementById('box');
box.onmouseover = function () {
this.innerHTML = '内容1';
this.style.background="#cc00ff"
}
//改变 <p> 元素的样式，将颜色改为红色，字号改为40,背景颜色改为红：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="red";
</script>
//object.removeAttribute('style'); 代表清空当前对象的所有样式
属性表如下：
显示和隐藏（display属性）
语法：
Object.style.display = value
value取值：
none ： 此元素不会被显示（隐藏此元素）
block ： 此元素将显示为块级元素（显示此元素）
控制类名（className 属性）
语法：
object.className = classname
作用：
1.获取元素的class 属性
- 为网页内的某个元素指定一个css样式来更改该元素的外观
Demo
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className='body'
}
function modify(){
var p2 = document.getElementById("p2");
p2.className='two'
}
</script>
</body>
</html>
JS运算优先级：保持先后顺序(操作符优先级）
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
JS的事件
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
事件表：
JS的对象
Date 日期对象
日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象 :
var Udate=new Date();
注意:使用关键字new ,Date()的首字母必须大写。
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。
日期的访问方法和语法：
“<日期对象>.<方法>”
String 字符串对象
- stringObject.length; 返回该字符串的长度。
- toUpperCase() 方法来将字符串小写字母转换为大写：
- toLowerCase() 方法将字符串转为小写；
- stringObject.charAt(index);返回指定位置的字符
- split()分割字符串 将字符串分割为字符串数组，并返回此数组。
- substring() 方法用于提取字符串中介于两个指定下标之间的字符。
stringObject.substring(startPos,stopPos)
注意：
(1) 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
(2) 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
(3) 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。 - 提取指定数目的字符substr()
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 - Math对象，提供对数据的数学计算。
Array 数组对象
- 定义了一个空数组:
var 数组名= new Array();
- 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>...];
我们定义myArray数组，并赋值，代码如下：
var myArray = [2, 8, 6];
Window对象
JavaScript计时器
setTimeout(代码,延迟时间);
clearTimeout(id_of_setTimeout); id则是setTimeout（）返回的id
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法]
属性：
length：返回浏览器历史列表中的URL数量
方法：
back()加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go(number) 加载某一个具体的页面. number参数：1前一个跟forward()等价 0当前页面 -1后一个back（）等价
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法：location.[属性|方法]
Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
screen对象
screen对象用于获取用户的屏幕信息。
语法：window.screen.属性
DOM !!
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）
HTML文档可以说由节点构成的集合，DOM节点有:
- 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
-
属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
节点属性.png
遍历节点树
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
- 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
- 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
document.getElementsByTagName(Tagname)
说明:
- Tagname是标签的名称，如p、a、img等标签名。
- 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
