JavaScript基础总结三部曲之一

Posted 人艰不拆_zmc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础总结三部曲之一相关的知识,希望对你有一定的参考价值。

  JavaScript是一种基于对象的编程语言,基于对象指的是所有的对象已经由浏览器提供好了,用户直接使用就可以了。

另外,JS是嵌入在HTML语法之中的编程语言。

PS:虽然是基于对象的语言,但是在编写代码的过程中,尽量按照面向对面的要求书写代码。

输出语法:

document.write():向页面输出html代码。虽然javascript定义在HTML页面中,但是它却可以控制HTML代码的输出。document.write()函数输出的HTML代码不能控制元素的顺序,所以在开发之中不会使用此函数输出HTML代码。

在开发中往往使用console.log()来进行代码输出,来进行页面调试

变量:

Js定义变量,是根据赋予的内容来决定变量类型。

例如,可以像下面那样声明并初始化数组:

PS:本操作没有严格之处,最大的好处是没有长度限制,动态数组。(当然也可以静态初始化,new数组时直接初始化)当然在开发中一般不会使用new关键字声明数组。实际在定义js变量的时候也可以不使用var进行定义,这样的是全局变量,当然一般并不使用。

函数:

function 函数名称(参数){//不需要返回值类型,如果需要返回,直接return,参数也可以不写var

}

PS:在学习java的时候,方法有几个形参,调用的时候实参个数必须相同,可是JavaScript没有这种限制,

如add(10)依旧调用函数add(x,y):

所以为了用户的操作,JavaScript提供了一个功能,函数名称.arguments:表示取得函数的参数的内容,返回的是一个数组。可以使用length判断长度。

function add(x,y){
   switch(add.arguments.length){
       case 0:return 0;
       case 1:return x;
       case 2:return x+y;
}
alert(add(10))//调用

PS:但是在实际工作中,还是强烈建议语法严格,函数里面定义几个参数,调用时就传几个参数, 尽量不出现以上情形。(规范)

事件处理:

在页面上任何的操作都可能称为事件源,而对于每一个事件都可以进行自定义的处理方式。  例如,页面加载,鼠标移动等等都可以称它为事件源。所有的事件在JavaScript里面都是以”onXXX”的形式命名。

举例如下两个事件(这两个事件只能够在”<body>”元素里面进行处理):

页面加载事件: onload

页面的卸载事件:onunload

发现浏览器打开页面时出现”页面加载”,关闭页面时显示”再见”

范例在表格中当鼠标移入新的一行时,改变当前行的颜色:

原理:JS是一个基于对象的编程语言,每一个HTML元素都是一个对象 ,也就是说每一个元素,例如”<tr>”、”<td>”都属于一个JS对象。

总结:javascript取得的所有html元素都是对象。(基于对面编程语言)Java属于面向对象的编程语言,面向对象过程之中,需要由用户自己定义类,产生对象,但是JavaScript是一种基于对象的编程语言,即:所有的对象都已经由浏览器自动为用户提供好了,用户直接使用即可,最典型的对象:每一个HTML元素都是一个对象 。(如:<html><head><body>)所有HTML定义的时候要想轻松的取得指定元素,必须加上有ID属性,作为唯一标记 。

JavaScript事件之动态绑定事件(开发中使用最多)

但是需要注意,所有的事件除了采用以上“onXXX”的方式之外也可以动态设置,这种形式在开发之中是使用最多的。那么可以使用 addEventListener(事件类型,处理函数名称,触发时机) 进行动态设置。

PS:触发时机都会设置为false,表示在事件的触发过程进行处理。

范例:观察动态设置

之前这么写: 

动态绑定事件: 

所有的动态设置的事件都可以在onload里面进行动态的配置。但是如果要配置,那么必须能够取得一个明确的元素对象。可以使用docuent.getElementById(元素Id)的操作方式取得元素对象。

这种动态设置操作事件的最大好处在于,HTML代码不会和JavaScript代码混合在一起。

PS:innerHTML方法:在此元素内增加指定内容,而且内容可以是HTML代码。

setTimeout方法练习:

实例:轮播图

 

以上是关于JavaScript基础总结三部曲之一的主要内容,如果未能解决你的问题,请参考以下文章

总结前端三剑客之一(HTML基础)

JavaScript基础大总结

Go语言基准测试(benchmark)三部曲之一:基础篇

JavaScript正则表达式学习笔记之一 - 理论基础

基础总结篇之一:Activity生命周期

JavaScript基础大总结