1. 首页
  2. 知识库

深入理解JavaScript核心概念

Javascrip是Netscape推出的一种嵌入HTML文档,基于对象的脚本描述语言。

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。JavaScript代码由浏览器内置的JavaScript引擎解释执行。JavaScript是广泛用于客户端,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

目录

1 JS用途

2 JS数据类型

3 内置对象

4 BOM、DOM对象模型

5 自定义对象(函数对象)

6 函数的定义与调用

7 流程控制:体现逻辑之美

8 JS嵌入方法

9 JS代码在THML中书写的方法

10 script语句什么时候被执行?

11 脚本执行的顺序

12 代码执行的次数

13 JS借助DOM对HTML进行操作

14 JS动态变更样式

JS是通过自身内建的对象和DOM对象模型所提供的对象和事件,对网页内容进行控制、对用户操作进行响应,从而实现网页的动态交互效果的。

JS与VBA一样,是基于对象的脚本语言,它们都有一个宿主,主要操作的是宿主对象的元素,所以基本上无须考虑再创建新的类或对象,而是基于现有的对象,去获取或引用,然后再操作。

1 用途

1.1 嵌入动态文本到HTML页面。

1.2 对浏览器事件做出响应。

1.3 读写HTML元素。

1.4 在数据被提交到服务器之前用正则表达式验证数据。

1.5 检测访客的浏览器信息。

1.6 控制cookies,包括创建和修改等。

1.7 基于Node.js技术进行服务器端编程。

2 JS数据类型

2.1 基本数据类型(原生对象):字符串、数值型、布尔型;

2.2 复合数据类型

2.2.1 数组Array

构造函数:

new Array( )

new Array(size)

new Array(element0, element1, …, elementn)

数组方法:

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素

Array.toLocaleString( ) 把数组转换成局部字符串

Array.toString( ) 将数组转换成一个字符串

Array.unshift( ) 在数组头部插入一个元素

2.2.2 对象Object

I 内置对象

II 宿主对象(BOM、DOM):浏览器、文档对象模型

III 自定义对象(函数对象):用构造函数去构造一个对象;

深入理解JavaScript核心概念

3 内置对象

JS提供了很多类,这些类按照不同的功能封装了一些函数和变量,用于不同的数据运算,如字符串运算、数学运算、数值转化、格式化等;这些类被包含在JS解释器中,因此,也被称为内建类。一些内建类无须实例化,可以直接调用类的方法和属性,而另外一些类则需要使用new关键字实例化才可以调用类的方法和属性;

在JavaScript提供了String(字符串)、Math(数值计算)、Date(日期)、Boolean、Function、Global、Number等对象。

JS内建的类也是某一事物的抽象,所以也必须创建实例才能使用,如Date类,首先要创建该类的新实例,然后才可使用它的方法和属性,也就是创建了类的一个新实例后,该类的所有属性和方法都会被复制到该实例中。

var currentDate=new Date()

var currentMinute=currentDate.getMinutes()

有一些类虽然也是事物的抽象,但是这些类一般不会有什么个体而言,如月亮抽象为一个类,该类有方法和属性,但是世上只有一个月亮,它是唯一的,所以也谈不上个体,也就无须实例化,JS中内建的Math类就属于这一类型,无需实例化。

4 BOM、DOM对象模型

JS中对于不同的运行环境,有着不同的内置宿主对象,这是由于JS是被作为一种扩展语言而设计的。对于通用程序设计语言,开发者必自己开发运行时的上下文环境。正因如此,那些语言才有了通用设计语言的名称。另一方面,扩展语言是在内建对象的应用程序(宿主环境)中运行程序的。宿主应用程序会在这时收到一些运行时的上下文信息。JS会以全局对象作为根节点的对象树的形式,接收这些上下文信息。在启动时,JS从宿主环境获取的对象树就被称为宿主对象。从JS代码的角度来看,全局对象在程序启动前就已经存在了,客户端JS的全局对象被称为Window对象。

浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

文档对象模型(DOM),描述处理网页内容的方法和接口。

浏览器自身也被设计为一个对象集合的模型,我们可以使用这些浏览器对象来操作浏览器;

BOM对象不仅具有属性、方法,还具有事件,在JS中通过事件处理器来处理事件。当事件发生时,事件处理器将连接到相应的事件处理代码,不同的对象具有不同的事件。

深入理解JavaScript核心概念

5 自定义对象(函数对象)

js中对象随处可见,却没有定义类的概念,可以使用函数来定义一种新的类型。

JS中是使用构造函数来构造一个类。

function show()

{

document.write(“<li>”+ this.name + ” ” + this.age + “<br />”);

}

function Student(_name,_age)

{

this.name = _name;

this.age = _age;

this.show = show;

}

var stu1 = new Student(“Tom”,20);

var stu2 = new Student(“Lily”,10);

show.call(stu1);

stu2.show();

/*

Tom 20

Lily 10

*/

一般写成下面的格式更紧凑:

function Student(_name,_age)

{

this.name = _name;

this.age = _age;

this.show=function()

{

document.write(“<li>”+ this.name + ” ” + this.age + “<br />”);

}

}

var stu1 = new Student(“Tom”,20);

var stu2 = new Student(“Lily”,10);

//show.call(stu1);

stu2.show();

6 函数的定义与调用

函数是一个单独的逻辑单元,执行一个特定任务。使用一个函数前,必须先对它定义。然后在脚本中对它进行调用。

函数是属于延迟执行的一个指令集;函数定义后并不会自动被执行,需要在特殊位置调用时才被执行。

函数具有对象的全部特征,多出的()表示函数本身还可以被调用;

函数可以把重复的运算封闭在一起,有利于代码的重用,JS内建了很多预定义函数,用于处理一些常见操作。你也可以自定义函数,从而将一些重复运算的语句封装起来;

JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。

预定义的函数也叫全局函数,enscape()、encode()、parse Float()、Number()、String()、isFinite()、isNaN()、eval()。

6.1 普通定义方式

function a(x,y){

return x+y;

}

var n=a(5,6);

document.write(n);

6.2 变量定义方式

var varf=new Function(“x”,”y”,”return x+y;”);

var i = 3;

var j =4;

var mul = varf(i,j);

document.write(‘ ‘,mul);

6.3 匿名函数

函数定义时也可以省略函数名。匿名函数也是一个表达式。以下赋值表达式右侧的就是匿名函数表达式:

var a=function(x,y){return x+y;};

6.4 构造函数

构造函数是用于生成对象的函数,构造函数通过new表达式来调用。

function MyClass(x,y){

this.x=x;

this.y=y;}

var obj=new MyClass(3,2);

document.write(obj.x,”,”,obj.y);

6.5 闭包closure

闭包closure 是一种具有状态的函数;在函数声明的内部声明另一个函数,即嵌套的函数声明;

function getsum()

{

….function sum(a,b)

….{

……..return a+b;

….}

….return sum;

}

var sumoftwo = getsum();

var total = sumoftwo(3,8);

document.write(‘ ‘,total);

6.6 函数的执行

调用函数就是使用当前文档中所定义的函数,或者调用另一个窗口或框架定义的函数。调用时需要用指定的参数来执行一个特殊的行为。一个函数还可以自己递归。

6.6.1 函数的简单调用

函数的定义语句通常放在HTML文件的<head>段;而函数的调用语句通常放在<body>段中;如果函数定义之前调用函数,执行将会出错。

使用函数的返回值:变量名=函数名();

6.6.2 在事件响应中调用函数

当用户单击某个按钮或某个复选框时都将触发事件,通过编写程序对事件做出反应的行为称为响应事件;onClick=””函数名();

6.6.3 通过链接调用函数

<a href=”javascript:函数名();”>链接名</a>;

7 流程控制:体现逻辑之美;

7.1 条件判断:if、switch;

7.2 循环控制:while、for;

7.3 跳转语句:continue、break;

8 JS嵌入方法

JS可以放在HTML的任何地方(head或body标签内),但以下情况例外:

I 当我们在代码中定义了函数时,就一定要注意将函数的定义放在对该函数的调用之前;

II 当浏览器由上到下、由左至右执行HTML代码时,遇到对函数的调用时,如果在调用函数之前,该函数已被定义,浏览器将正确执行该函数;如果函数的定义在函数调用之后,浏览器无法执行该函数;

<head></head>之间的javascript代码一般用于提前载入,以响应用户的页面动作,一般不影响HTML文档的浏览器显示格局;

<body></body>之间的javascript代码一般用于在页面载入时运行JS代碼生成頁面內容;

8.1 利用<script>…</script>加入到HTML中:

<script language=”javascript>…</script>

8.2 利用SRC属性级联脚本文件:

<script language=”javascript” src=”cnc/adnews.js”></script>

8.3 直接加入到HTML标记:

<body onload=”javascript:window.alert(“欢迎光临我们的网站”)>

<a href=”javascript:void(null)” onclick=”document.execCommand(‘SaveAs’)”>js操作</a>

9 JS代码在THML中书写的方法

书写的方法不同,其执行的流程也各不相同。

9.1 <script>无法操作<script></script>之后的元素,因为之后的元素还未构造,所以JS代码也无法取得之后的DOM元素。

9.2 读取外部的JS文件,还可以指定defer、async属性去推迟或异步执行。

9.3 onload:在页面读取完后再对其执行,可以操作全部DOM元素。

<body onload=”alert(‘hello’)”>

window.onload=function(){alert(‘hello’);};

10 script语句什么时候被执行?

决定因素是script语句在文档中的位置;

10.1 在文档加载时;

10.2 在文档加载后;

10.3 根据用户的动作作出响应;

10.4 当其它script语句调用它时;

11 脚本执行的顺序

11.1 按它们在文档里出现的顺序顺序执行;

11.2 事件驱动异步执行;

element对象上的一个重要的属性集合就是事件处理程序相关的的属性,可以在脚本中为之绑定一个函数,这个函数会在某一个事件发生时以异步的方式调用,事件处理程序可以以JS代码修改窗口文档和组成文档元素的行为,事件处理函数的属性名是以单词“on”开始,如D.onclick=function(){};

12 代码执行的次数

12.1 一次,即顺序执行一次,

12.2 调用的次数;

12.3 定时器按时间间隔执行;

重复调用某个函数或执行某个表达式,并且对函数或表达式的调用间隔只有固定时间的延迟。

setInterval(“functionOrExpr”,msecDelay [,funcarg1,…,funcargn])

清除计算器可以使用以下语法:

window.clearInterval(id);

12.4 对代码延迟执行

当你需要在将来某个时间执行一次函数或表达式时。实际应用于警告框的显示时间和状态栏的跑马灯效果、打字效果等。

window.setTimeout(“functionOrExpr”,msecDelay);

13 JS借助DOM对HTML进行操作

13.1 节点的获取

通过 id 查找 HTML 元素

var x=document.getElementById(“intro”);

var x=document.getElementById(“main”);

var y=x.getElementsByTagName(“p”);

通过类名找到 HTML 元素

var x=document.getElementsByClassName(“intro”);

13.2 节点的创建和新增

var para=document.createElement(“p”);

var node=document.createTextNode(“This is new.”);

para.appendChild(node);

var element=document.getElementById(“div1”);

element.appendChild(para);

13.3 节点的内容更改

document.getElementById("p1").innerHTML="New text!";
document.getElementById("image").src="landscape.jpg";

13.4 节点的删除

var parent=document.getElementById(“div1”);

var child=document.getElementById(“p1”);

parent.removeChild(child);

13.5 改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容:

document.write(Date());

14 JS动态变更样式

14.1 通过className属性更改class名

var child0 = document.createElement(“div”);

child0.innerHTML = “child0”;

child0.className = “newDiv”;

parent.appendChild(child0);

14.2 通过classList属性更改class名

在html中,一个tag可以应用了多个类,如:

<div class=”bg tex”>……</div>

通过className属性去更改其中的一个类比较麻烦。

而使用classList属性则会很方便,如:

obj.classList.remove(‘bg’);

14.3 更改style属性

<div id=”foo” style=”position:absolute”>This is a sample.</div> <script>

var elem=document.getElementById(‘foo’);

var frame=0;

setInterval(function(){

frame+=1;

elem.style.left=frame*10+’px’;},100);

</script>

(还可以通过setInterval(匿名函数)实现动态效果;)

14.4 直接更改样式表

function changecss(nh) {

CSS.href=””;

CSS.href=nh;

}

-End-

文章来自,经Mr.PLB整理后发布(声明:本站所有文章仅供学习,版权归原作者所有;若有侵权,请联系删除,文章链接:http://www.51kxg.com/index.php/archives/2592。)

发表评论

电子邮件地址不会被公开。 必填项已用*标注