JavaScript的使用

Javascript作为使用得最多的脚本语言，可以说是无处不在。所有主流浏览器都支持Javascript。目前，全世界大部分网页都使用Javascript。它可以让网页呈现各种动态效果。 作为后台程序员的我们，Javascript也是必备的。接下来就一起来学习一下Javascript，感受它的魅力！

Javascript是脚本语言，简称js，用来给HTML网页增加动态功能。注意Javascript和Java并没有半毛钱关系，Java是编译执行的语言，也就是一次性把代码转换成cpu看得懂的语言，一行行执，而Javascript是解释执行的语言，一行行的解析，解析一行执行一行。

1、js代码的位置：
在html，通过下面的标签编写js：

不过不建议将js代码直接写在html页面中，可以单独编写js文件，然后在html页面中按下面的方式引入js文件：

这样就把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()差不多，可以输出变量，也可以输出""之间的内容，还可以加
换行标签等。

7、alert弹窗：
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。直接alert("在此输入弹窗内容")即可。我们经常用该方法来调试js代码。

8、/confirm/i消息对话框：
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。当用户点击"确定"按钮时，返回true当用户点击"取消"按钮时，返回false。看如下案例：

function rec(){    var mymessage=    confirm("你是女的吗？")     ;    if(mymessage==true){        document.write("你是女士!");
    }    else{        document.write("你是男士!");
    }
}    
    

当点击“点击我，弹出确认对话框”按钮后，就会有“你是女的吗”的弹窗，如果点“确定”，那页面就会输出“你是女的”，如果点“取消”，就会输出“你是男的”。

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表示在框架网页中在上部窗口中显示目标网页；第三个参数字符串可以设置如下内容：

11、循环：
for循环、while循环、do while循环都和Java中的是一样的。

12、事件：
所谓事件，就是鼠标单击、鼠标滚动之类动作，主要事件列表如下：

我们最常用的就是事件了，比如给一个按钮添加一个事件，就是在按钮标签那里添加 = "fun()"，就表示单击了这个按钮就会调用fun这个函数。其他事件此处不再做详细解释。

至于什么是对象，这里就不再解释了。接下来看看js提供了哪些内置对象：
1、Date日期对象：
定义日期对象：var date = new Date()，也可以带参数定义：var date = new Date(2018,9,23)
日期对象的方法：

返回星期的方法：

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(".")+"
");// 用 . 分割document.write(mystr.split(".", 2)+"
");// 用 . 分割，返回两个串document.write(mystr.split("")+"
");// 每隔字符间都会分割一下

第一个结果是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全称是Browser Object Model，中文就是浏览器对象模型，由多个对象组成，接下来就来学习一下它的对象。
1、window对象：
window对象是BOM的顶层对象，其它对象都是这个对象的子对象，代表浏览器窗口。window对象的方法如下：

image.png

常用的一些方法在本文js基础部分已经讲过，这里不再赘述。

2、History对象：
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。语法：window.history.属性或window.history.方法。
History对象的属性：

History对象的方法：

3、location对象：
location用于获取或设置窗体的URL，并且可以用于解析URL。语法：location.[属性|方法]。
location对象属性图示:

image.png

location 对象属性：

image.png

location 对象方法:

4、navigator对象：
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。语法：navigator.属性名。
该对象的属性有：

image.jpg

5、screen对象：
screen对象用于获取用户的屏幕信息。语法：window.screen.属性。
其属性有：

image.png

DOM（document Object Model）就是文档对象模型，定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树），如下图：

image.png

HTML文档可以说由节点构成的集合，三种常见的DOM节点:
    (1) 元素节点：上图中、、

等都是元素节点，即标签。
    (2) 文本节点:向用户展示的内容，如

Javascript DOM

那么其DOM结构如下：

image.png

理解了DOM之后，再来学习以下方法：

1、获取元素：
获取元素通过document对象调用以下方法：

  音乐  登山
document.getElementById(“hobby1”)document.getElementsByName("hobby")document.getElementsByTagName("input")

2、innerHTML 属性：
innerHTML 属性用于获取或替换 HTML 元素的内容。语法如下：
Object.innerHTML
案例：

javascriptvar mychar=  document.getElementById("con") ;// 获取h2元素document.write("原标题:"+mychar.innerHTML+"
"); //输出原h2标签内容mychar.innerHTML = "Hello world";// 修改h2标签的内容document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

运行结果如下：

image.png

3、改变HTML样式：
语法如下：
Object.style.property=new style;
部分基本属性(property)如下表：

案例：

Hello World!

这段代码就是把“Hello World！”设置为红色、字体大小为20、背景颜色为蓝色。

4、显示和隐藏(display):
我们在论坛或者贴吧下载别人分享的资源时，通常是要评论了以后才会显示下载链接，没评论就不会显示，这就是用到了display属性。语法如下：
Object.style.display = value
value的取值如下：

案例：

Hello World!

这样就会把“Hello World！”隐藏掉。

5、控制类名(className属性)：
一般的标签除了有id，还会有class，那么通过下面的方式就可以获取和改变class值。语法：
获取class的值：
object.className
改变class的值：
object.className = " ..."
案例：

Hello world

调用了fun函数后，就会把p标签的class属性的值由one变为two。

6、getAttribute()和setAttribute()方法：
getAttribute()方法是通过元素节点的属性名称获取属性的值，语法：elementNode.getAttribute(name)；setAttribute()方法就是增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值，语法：elementNode.setAttribute(name,value)。elementNode是使用getElementById()、getElementsByTagName()等方法，获取到的元素节点，name是要想查询的元素节点的属性名字，value是要新增或者设置的值。案例：

hello Javascript1var 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 ：节点的类型，是只读的，常用的几种结点类型如下表：

案例：

  

     
javascript
     
HTML/CSS
     
jQuery
     
  
  

对于节点的操作还有：
访问兄弟节点、插入节点、删除节点、替换节点、替换元素节点、创建元素节点、创建文本节点等。

Javascript十分强大，且使用广泛，几乎所有的web应用都会用到Javascript。重点要理解DOM以及对DOM的一些操作。由于本人学后端的，所以DOM部分对节点操作的很多方法没有进行研究，不过这些方法都很易懂，需要用时自行百度即可。

作者：贪挽懒月
链接：https://www.jianshu.com/p/0c5db240f254