一、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对象的方法如下：
常用的一些方法在本文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对象属性图示:
location 对象属性：
location 对象方法:
| 方法 | 作用 |
| assign() | 加载新的文档 |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
4、navigator对象：
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。语法：navigator.属性名。
该对象的属性有：
5、screen对象：
screen对象用于获取用户的屏幕信息。语法：window.screen.属性。
其属性有：
五、认识DOM:
DOM（Document Object Model）就是文档对象模型，定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树），如下图：
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结构如下：
理解了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标签内容
运行结果如下：
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部分对节点操作的很多方法没有进行研究，不过这些方法都很易懂，需要用时自行百度即可。
