JavaScript的用法

来源：互联网发布：金山数据恢复软件多大? 编辑：程序博客网时间：2024/05/18 18:15

（一）JavaScript的概念

JavaScript是一种描述式的脚本语言，他与HTML结合起来，用于增强功能，并提高与用户的交互性能。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

一、JavaScript的主要组成

JavaScript主要由三部分组成：基础语法（ECMAScript），DOM（Document Object Model）文档对象模型，BOM（Brower Object Model）浏览器对象模型。

二、JavaScript的位置

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

三、引用外部脚本

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件

<html><head><script src="myScript.js"></script></head></html>

（二）JavaScript的调试

JavaScript的调试最基础的两个方法：一个是：打印输出另一个是：删一段改一段

一、通过设置让IE进行报错，确定出错的位置

IE-工具-Internet选项-高级-打开禁用脚本调试和显示每个错误通知。

这种方法，对于动态页面（错误是动态页面转化为静态页面之后的位置，还是很难确定）

二、通过集成的开发环境来调试JavaScript

（三）JavaScript的语法（类比java进行学习）

一、JavaScript的变量

1、JavaScript的变量是弱类型变量，可以直接使用。变量通过var来定义。（建议先定义在使用）

2、变量名区分大小写

3、当您声明新变量时，可以使用关键词 "new" 来声明其类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

4、可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可。（多个变量也可以横跨多行）

var name="Gates",age=56,job="CEO";

5、JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。（函数内部声明的变量）

全局变量会在页面关闭后被删除。（函数外声明的变量）

二、JavaScript的数据类型

1、JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

2、Undefined 这个值表示变量不含有值。可以通过将变量的值设置为null来清空变量。

3、JavaScript数组（Array）

var arr1 = new Array('a', 'b', 'c');    //这是一个预定义的数组，在创建时初始化var arr2 = ['a', 'b',' 'c' ];       //同样是在创建时初始化，但是这种创建更为边界直观

三、JavaScript对象

JavaScript 变量均为对象。对象是拥有属性和方法的数据。当您声明一个变量时，就创建了一个新的对象。（JavaScript中的所有事物都是对象）

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

1、JavaScript对象的属性

对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

访问对象的属性有两种方式：

第一种：objectname.propertyname;

第二种：objectname["propertyname"];

2、JavaScript对象的方法

对象的方法就是定义一个函数，并作为对象的属性存储。

格式：methodName：function() { //函数体 }

访问对象的方法：

objectName.methodName();

（四）JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

一、函数语法（用function声明函数，必须小写）

function functionName（）{ //执行代码 }

1、可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

2、函数自调用：本质就是一个匿名自调用函数（没有函数名）

就是函数闭包：内部定义的变量和函数只在此范围内有效。

形式：$( function (arg) {..} )( param )；由于操作符的优先级，需要给匿名函数加括号，其中（function （arg）{.. } )相当于函数名，（param）相当于调用函数的参数

$（function（）{}）；和 jQuery（function（$）{..}）；和 $（document ).ready（function（）{..}）

以上三者作用一样，就是：网页加载完毕后，执行匿名函数。

（五）JavaScript事件处理

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

onFocus：在用户为了输入而选择select、text、textarea等时

(onFocus.htm)

onBlur：在select、text、password、textarea失去焦点时

(onBlur.htm)

onChange：在select、text、textarea的值被改变且失去焦点时

(onChange.htm/SelectionChange.htm)

onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）

(onClick.htm)

onLoad：出现在一个文档完成对一个窗口的载入时

(onLoad.htm)

onUnload：当用户退出一个文档时

(onload.htm)

onMouseOver：鼠标被移动到一个对象上时

(onMouse.htm)

onMouseOut：鼠标从一个对象上移开时

(onMouse.htm)

onSelect：当form对象中的内容被选中时

(onSelect.htm)

onSubmit：出现在用户通过提交按钮提交一个表单时（可以用于验证用户的数据）

(onSubmit.htm)

1、onSubmit实例：

<form name="test" action="1.htm" onsubmit="return false"> //return false：表单会无法提交 return true：表单才可以提交这里就可以使用函数来对数据进行判断
<input type="text" name="t">
<input type="submit" value="ok">
</form>

（六）JavaScript的输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。使用 document.getElementById(id) 方法获取元素。
使用 console.log() 写入到浏览器的控制台。

确认框(confirm)：根据不同的选择，返回true/false

询问框(prompt)：返回输入的值（不常用）

（七）JavaScript的内置对象

1、this：表示指的是当前的对象（即当前的这个标签）。

2、for ..in ：表示循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};for (x in person)  {  txt=txt + person[x];  }

3、with：设置代码在特定对象中的作用域（不推荐使用）

with 语句是运行缓慢的代码块，尤其是在已设置了属性值时。大多数情况下，如果可能，最好避免使用它

使用with关键字的目的是为了简化多次编写访问同一对象的工作，比如下面的例子：

1
2
3
varqs = location.search.substring(1);
varhostName = location.hostname;
varurl = location.href;

这几行代码都是访问location对象中的属性，如果使用with关键字的话，可以简化代码如下：

1
2
3
4
5
with(location){
  varqs = search.substring(1);
  varhostName = hostname;
  varurl = href;
}

4、new：创建一个新的对象

四、BOM（browser object model）：浏览器对象模型

1、window对象：表示浏览器窗口。（ HTML DOM 的 document 也是 window 对象的属性之一）

方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

2、screen对象：window.screen 对象包含有关用户屏幕的信息。

属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

3、location对象：window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

属性：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 返回当前页面的 URL。

方法：

location.assign() 方法加载新的文档。

4、history对象：window.history 对象包含浏览器的历史。

方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

5、navigator对象：window.navigator 对象包含有关访问者浏览器的信息。

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

6、cookie：表示存储在本机的文本文件中的一些数据，用于记录客户端的用户信息。

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

7、JavaScript的计时事件

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

（1）setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码，

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval("javascript function",milliseconds);

（2）setTimeout() - 暂停指定的毫秒数后执行指定的代码

window.setTimeout("javascript 函数",毫秒数);

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

五、DOM（document object Model）：文档对象模型

1、通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素，通过id找到html元素，document.getElementById("intro");
JavaScript 能够改变页面中的所有 HTML 属性，document.getElementById(id).attribute=新属性值
改变HTML的内容：document.getElementById(id).innerHTML=新的 HTML
JavaScript 能够改变页面中的所有 CSS 样式：document.getElementById(id).style.property=新样式
JavaScript 能够对页面中的所有事件做出反应

2、addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

可以使用 removeEventListener() 方法来移除事件的监听。

语法：element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").（注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"）

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。（false|true）

冒泡：内部元素的事件会先被触发，然后再触发外部元素。（默认为冒泡，false）

捕获：与冒泡相反。

3、添加删除HTML元素

添加html元素：

这段代码创建新的<p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

删除HTML元素：

找到 id="div1" 的元素：

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

六、JavaScript对象

1、Number对象：JavaScript只有一种数字类型，可以使用也可不使用小数点来写数字（类似于java中浮点型）

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

在JavaScript中以Infinity表示无穷大。

NaN 属性是代表非数字值的特殊值。

可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

2、String对象：

属性：

长度属性length来计算字符串的长度

方法：

indexOf() 来定位字符串中某一个指定的字符首次出现的位置

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符，没有找到，返回null。

replace() 方法在字符串中用某些字符替换另一些字符。

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

字符串使用split()函数转为数组:

3、Date对象

setFullYear() 设置具体的日期。

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

getFullYear() 获取年份。

4、Array对象

（1）: 常规方式:

var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";

（2）: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

（3）: 字面:

var myCars=["Saab","Volvo","BMW"];

数组对象的排序函数sort（）：

function sortNumber(a, b){
return a - b; //这里返回的是他们的差值，如果是小于0的值，就会将a排在前面，如果大于0,就会将b排在前面，如果是0的话，就随便。（冒泡排序法！！）
}

将数组的前两个参数传入，进行比较，实现一个升序排列。（即小的数字排在前面）。如果要实现倒序的话，返回b-a即可（return b-a）。

合并两个数组 - concat()

合并三个数组 - concat()

用数组的元素组成字符串 - join()

删除数组的最后一个元素 - pop()

数组的末尾添加新的元素 - push()

将一个数组中的元素的顺序反转排序 - reverse()

删除数组的第一个元素 - shift()

从一个数组中选择元素 - slice()

数组排序（按字母顺序升序）- sort()

数字排序（按数字顺序升序）- sort()

数字排序（按数字顺序降序）- sort()

在数组的第2位置添加一个元素 - splice()

转换数组到字符串 -toString()

在数组的开头添加新元素 - unshift()

5、Math对象

round（）：对一个数进行四舍五入。

random() 来返回 0 到 1 之间的随机数。

max() 来返回两个给定的数中的较大的数。

min() 来返回两个给定的数中的较小的数。

6、RegExp对象：用于规定在文本中检索的内容。（正则表达的缩写）

语法：var patt=new RegExp(pattern,modifiers);

模式描述了一个表达式模型。
修饰符(modifiers)描述了检索是否是全局，区分大小写等。

修饰符用于执行不区分大小写和全文的搜索。

i - 修饰符是用来执行不区分大小写的匹配。

g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。

test() 方法检索字符串中的指定值。返回值是 true 或 false。

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

阅读全文

0 0