为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript的使用

2018.10.07 12:52 1472浏览

前言:

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

参数说明
topNumber窗口顶部离开屏幕顶部的像素数
leftNumber窗口左部离开屏幕左端的像素数
widthNumber窗口的宽度
heightNumber窗口的高度
menubaryes,no窗口有没有菜单
toolbaryes,no窗口有没有工具条
scrollbarsyes,no窗口有没有滚动条
statusyes,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>

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

总结:

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



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


点击查看更多内容
12人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消