JavaScript的使用前言
前言:
JavaScript作为使用得最多的脚本语言，可以说是无处不在。所有主流浏览器都支持JavaScript。目前，全世界大部分网页都使用JavaScript。它可以让网页呈现各种动态效果。 作为后台程序员的我们，JavaScript也是必备的。接下来就一起来学习一下JavaScript，感受它的魅力！
一、JavaScript简介：
JavaScript是脚本语言，简称js，用来给HTML网页增加动态功能。注意JavaScript和Java并没有半毛钱关系，Java是编译执行的语言，也就是一次性把代码转换成cpu看得懂的语言，一行行执，而JavaScript是解释执行的语言，一行行的解析，解析一行执行一行。
二、js基础：
1、js代码的位置： 在html，通过下面的标签编写js：
<script type="text/javascript">
// js编写区
</script>不过不建议将js代码直接写在html页面中，可以单独编写js文件，然后在html页面中按下面的方式引入js文件：
<script src="script.js"></script>这样就把script.js引入进来了。
2、JavaScript注释： JavaScript注释和Java一样，单行注释用//，多行注释用/* */。
3、js的变量：
js中用var声明变量，取分大小写。变量的命名需遵循如下规则：
(1)变量必须使用字母、下划线_或者美元符$开始。
(2)然后可以使用任意多个英文字母、数字、下划线_或者美元符$组成。
(3)不能使用JavaScript关键词与JavaScript保留字。
变量需先声明再赋值，也可重复赋值，如下：
var mychar;
mychar="javascript";
mychar="hello";// 可重复赋值
var mynum = 6;4、if ... else判断：
if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }if条件判断和Java中的是一样的。
5、js函数的定义： 所谓函数，就是Java中所说的方法，JavaScript中用function关键字来定义函数：
function 函数名()
{
函数代码;
}上面的是无参函数，也可以定义带参函数，和Java中的带参方法一样，多个参数用逗号隔开。函数不调用不执行，调用直接写函数名即可。
6、输出内容：
可以使用document.write() 直接在网页中输出内容，，就和Java的System.out.println()差不多，可以输出变量，也可以输出""之间的内容，还可以加<br>换行标签等。
7、alert弹窗：
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。直接alert("在此输入弹窗内容")即可。我们经常用该方法来调试js代码。
8、confirm消息对话框： confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。当用户点击"确定"按钮时，返回true当用户点击"取消"按钮时，返回false。看如下案例：
function rec(){
var mymessage= confirm("你是女的吗？") ;
if(mymessage==true){
document.write("你是女士!");
}
else{
document.write("你是男士!");
}
}
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
</body>当点击“点击我，弹出确认对话框”按钮后，就会有“你是女的吗”的弹窗，如果点“确定”，那页面就会输出“你是女的”，如果点“取消”，就会输出“你是男的”。
9、prompt消息对话框： 直接看案例：
function rec(){
var myname=prompt("请输入你的姓名:");
if(myname!=null){
alert("你好"+myname);
}
else{
alert("你好 my friend");
}
}调用了rec方法后，就会有个弹窗，弹窗中有个输入框叫你输入姓名，如果输入了“刘亦菲”点确定，那么就会弹出“你好刘亦菲”，没输入内容点确定就会弹出“你好 my friend”。
10、window.open():
open() 方法可以查找一个已经存在或者新建的浏览器窗口。语法如下：
window.open([URL], [窗口名称], [参数字符串])
例如：
window.open('http://www.baidu.com',
'_blank',
'width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')这段代码表示打开百度网首页，_blank表示新窗口打开，该参数值还可以为_self和_top，_self表示在当前窗口打开新页面，_top表示在框架网页中在上部窗口中显示目标网页；第三个参数字符串可以设置如下内容：
参数 | 值 | 说明 |
|---|---|---|
top | Number | 窗口顶部离开屏幕顶部的像素数 |
left | Number | 窗口左部离开屏幕左端的像素数 |
width | Number | 窗口的宽度 |
height | Number | 窗口的高度 |
menubar | yes,no | 窗口有没有菜单 |
toolbar | yes,no | 窗口有没有工具条 |
scrollbars | yes,no | 窗口有没有滚动条 |
status | yes,no | 窗口有没有状态栏 |
11、循环： for循环、while循环、do while循环都和Java中的是一样的。
12、事件： 所谓事件，就是鼠标单击、鼠标滚动之类动作，主要事件列表如下：
事件 | 说明 |
|---|---|
onclick | 鼠标单击 |
onmouseover | 鼠标经过 |
onmouseout | 鼠标移开 |
onchange | 文本框内容改变 |
onselect | 文本款内容被选中 |
onfocus | 光标聚集 |
onblur | 光标离开 |
onload | 网页导入 |
onunload | 关闭网页 |
我们最常用的就是onclick事件了，比如给一个按钮添加一个onclick事件，就是在按钮标签那里添加onclick = "fun()"，就表示单击了这个按钮就会调用fun这个函数。其他事件此处不再做详细解释。
三、js的内置对象：
至于什么是对象，这里就不再解释了。接下来看看js提供了哪些内置对象：
1、Date日期对象：
定义日期对象：var date = new Date()，也可以带参数定义：var date = new Date(2018,9,23)
日期对象的方法：
方法名 | 作用 |
|---|---|
get/setDate() | 返回/设置日期 |
get/setFullYear() | 返回/设置年份，四位数表示 |
get/setYear() | 返回/设置年份 |
get/setMonth() | 返回/设置月份，0是一月 …… 11是十二月 |
get/setHours() | 返回/设置小时，24小时制 |
get/setMinutes() | 返回/设置分钟 |
get/setSeconds() | 返回/设置秒 |
get/setTime() | 返回设置时间(毫秒为单位) |
返回星期的方法：
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write("今天是："+ weekday[mynum]);//输出星期几
</script>2、String字符串对象：
定义字符串的方法就是直接赋值：var mystr = "I love JavaScript!"
获取字符串长度：mystr.length
将字符串中的大(小)写字母转为小(大)写：mystr.toLowerCase()、mystr.toUpperCase()
返回字符串中指定位置的字符：mystr.charAt(2)，从0开始，空格也算一个字符
分割字符串：
var mystr = "www.baidu.com";
document.write(mystr.split(".")+"<br>");// 用 . 分割
document.write(mystr.split(".", 2)+"<br>");// 用 . 分割，返回两个串
document.write(mystr.split("")+"<br>");// 每隔字符间都会分割一下第一个结果是www，baidu，com；第二个结果是www，baidu；第三个结果是w,w,w,.,b,a,i,d,u,.,c,o,m 。
提取字符串：mystr.substring(startPos,stopPos) ，两个参数分别是开始位置和结束位置，第二个参数可选。
获取指定数目的字符串：mystr.substr(startPos,length)
3、Math对象：
Math对象提供数据的数学计算，和Java中的Math对象差不多。提供的方法有很多，此处不逐一列举，常用的有Math.random()，用来获取随机数。
4、Array数组对象： (1)、一维数组： js中的数组存储的数据可以是任何类型（数字、字符、布尔值等），定义数组方式如下：
var myarr=new Array(); //定义数组
myarr[0]=80;
myarr[1]=90;
myarr[2]=99;
myarr.length; //获得数组myarray的长度或者这样：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值或者简写为：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）注意js中数组长度是可变的，增加元素的个数，length自然改变，或者直接myarr.length=10也可以设置数组长度。
(2)、二维数组：
定义方法：
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]四、认识BOM：
BOM全称是Browser Object Model，中文就是浏览器对象模型，由多个对象组成，接下来就来学习一下它的对象。 1、window对象： window对象是BOM的顶层对象，其它对象都是这个对象的子对象，代表浏览器窗口。window对象的方法如下：
image.png
常用的一些方法在本文js基础部分已经讲过，这里不再赘述。
2、History对象：
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。语法：window.history.属性或window.history.方法。
History对象的属性：
属性 | 含义 |
|---|---|
length | 浏览器历史列表中的URL数量 |
History对象的方法：
方法 | 作用 |
|---|---|
back() | 相当于返回上一页 |
forward() | 加载history列表中的下一个url |
go(参数) | 加载history列表中的某个具体的页面，参数为1表示下一页，为-1表示前一页，以此类推 |
3、location对象：
location用于获取或设置窗体的URL，并且可以用于解析URL。语法：location.[属性|方法]。
location对象属性图示:
image.png
location 对象属性：
image.png
location 对象方法:
方法 | 作用 |
|---|---|
assign() | 加载新的文档 |
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
4、navigator对象：
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。语法：navigator.属性名。
该对象的属性有：
image.jpg
5、screen对象：
screen对象用于获取用户的屏幕信息。语法：window.screen.属性。
其属性有：
image.png
五、认识DOM:
DOM（Document Object Model）就是文档对象模型，定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树），如下图：
image.png
HTML文档可以说由节点构成的集合，三种常见的DOM节点: (1) 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。 (2) 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。 (3) 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。 现有如下代码：
<a href="http://www.imooc.com">JavaScript DOM</a>那么其DOM结构如下：
image.png
理解了DOM之后，再来学习以下方法：
1、获取元素： 获取元素通过document对象调用以下方法：
方法名 | 作用 | 返回 |
|---|---|---|
getElementById("id") | 通过指定id获取元素 | 一个 |
getElementsByName("name") | 通过元素name属性获得元素 | 一组 |
getElementsByTagName("Tagname") | 通过标签名称获得元素 | 一组 |
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
document.getElementById(“hobby1”)<!--通过id获取-->
document.getElementsByName("hobby")<!--通过name获取-->
document.getElementsByTagName("input")<!--通过TagName获取-->2、innerHTML 属性：
innerHTML 属性用于获取或替换 HTML 元素的内容。语法如下：
Object.innerHTML
案例：
<h2 id="con">javascript</h2>
var mychar= document.getElementById("con") ;// 获取h2元素
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "Hello world";// 修改h2标签的内容
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容运行结果如下：
image.png
3、改变HTML样式：
语法如下：
Object.style.property=new style;
部分基本属性(property)如下表：
属性 | 描述 |
|---|---|
backgroudColor | 设置元素背景颜色 |
height | 设置元素高度 |
width | 设置元素宽度 |
color | 设置文本颜色 |
font | 设置字体属性 |
fontSize | 设置字体大小 |
案例：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>这段代码就是把“Hello World！”设置为红色、字体大小为20、背景颜色为蓝色。
4、显示和隐藏(display):
我们在论坛或者贴吧下载别人分享的资源时，通常是要评论了以后才会显示下载链接，没评论就不会显示，这就是用到了display属性。语法如下：
Object.style.display = value
value的取值如下：
值 | 描述 |
|---|---|
none | 此元素不会被显示 |
block | 此元素将显示为块级元素 |
案例：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.display="none";
</script>这样就会把“Hello World！”隐藏掉。
5、控制类名(className属性)：
一般的标签除了有id，还会有class，那么通过下面的方式就可以获取和改变class值。语法：
获取class的值：
object.className
改变class的值：
object.className = " ..."
案例：
<p id="pcon" class="one">Hello world</p>
<script>
function fun(){
var mychar = document.getElementById("pcon");
mychar.className="two";
}
</script>调用了fun函数后，就会把p标签的class属性的值由one变为two。
6、getAttribute()和setAttribute()方法：
getAttribute()方法是通过元素节点的属性名称获取属性的值，语法：elementNode.getAttribute(name)；setAttribute()方法就是增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值，语法：elementNode.setAttribute(name,value)。elementNode是使用getElementById()、getElementsByTagName()等方法，获取到的元素节点，name是要想查询的元素节点的属性名字，value是要新增或者设置的值。案例：
<h1 id="alink" title="测试">hello JavaScript1</h1>
var elementNode = document.getElementById("alink");
var attr1 = elementNode.getAttribute("id");
var attr2 = elementNode.getAttribute("title");
elementNode.setAttribute("title","测试更新");attr1就是“alink”，attr2就是“测试”，最后一行代码就是将“测试”改为“测试更新”。
7、节点属性： 在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要属性 ： (1)、 nodeName : 节点的名称，是只读的 a. 元素节点的 nodeName 与标签名相同 b. 属性节点的 nodeName 是属性的名称 c. 文本节点的 nodeName 永远是 #text d. 文档节点的 nodeName 永远是 #document (2)、 nodeValue ：节点的值 a. 元素节点的 nodeValue 是 undefined 或 null b. 文本节点的 nodeValue 是文本自身 c. 属性节点的 nodeValue 是属性的值 (3)、 nodeType ：节点的类型，是只读的，常用的几种结点类型如下表：
元素类型 | 节点类型 |
|---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
案例：
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var list = document.getElementsByTagName("li");
list[0].parentNode.nodeName;// 获取父节点的名称，也就是ul节点
for(i=0;i<=list.length;i++){
document.write(list[i].nodeName);// 结果输出三个li
}
var node = document.getElementsByTagName("ul");//获取ul的子节点
var result = node[0].childNodes.length;// 子节点的个数(结果是3，因为有3个li)
node.firstChild;// 获取到的是第一个li
node.lastChild;// 获取到的是最后一个li
</script>对于节点的操作还有： 访问兄弟节点、插入节点、删除节点、替换节点、替换元素节点、创建元素节点、创建文本节点等。
总结:
JavaScript十分强大，且使用广泛，几乎所有的web应用都会用到JavaScript。重点要理解DOM以及对DOM的一些操作。由于本人学后端的，所以DOM部分对节点操作的很多方法没有进行研究，不过这些方法都很易懂，需要用时自行百度即可。