首页手记 JavaScript的使用

JavaScript的使用

标签：

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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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、事件：
所谓事件，就是鼠标单击、鼠标滚动之类动作，主要事件列表如下：

事件	说明
	鼠标单击
onmouseover	鼠标经过
onmouseout	鼠标移开
onchange	文本框内容改变
onselect	文本款内容被选中
onfocus	光标聚集
onblur	光标离开
	网页导入
onunload	关闭网页

我们最常用的就是事件了，比如给一个按钮添加一个事件，就是在按钮标签那里添加 = "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>

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