javascript基础教程:javascript基础

JavaScript 基础

Formhttp://www.w3school.com.cn/js/js_obj_intro.asp

 

什么是 JavaScript

 

        * JavaScript 被设计用来向 HTML 页面添加交互行为。

        * JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。

        * JavaScript 由数行可执行计算机代码组成。

        * JavaScript 通常被直接嵌入 HTML 页面。

        * JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。

        * 所有的人无需购买许可证均可使用 JavaScript

 

Java JavaScript 是相同的吗?

 

不同!

 

在概念和设计方面,Java JavaScript 是两种完全不同的语言。

 

Java(由太阳微系统公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C C++

JavaScript 能做什么?

 

JavaScript HTML 设计师提供了一种编程工具

    HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。

JavaScript 可以将动态的文本放入 HTML 页面

    类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面:document.write("<h1>" + name + "</h1>")

JavaScript 可以对事件作出响应

    可以将 JavaScript 设置为当某事件发生时才会被执行,例如页面载入完成或者当用户点击某个 HTML 元素时。

JavaScript 可以读写 HTML 元素

    JavaScript 可以读取及改变 HTML 元素的内容。

JavaScript 可被用来验证数据

    在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。

JavaScript 可被用来检测访问者的浏览器

    JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。

JavaScript 可被用来创建 cookies

    JavaScript 可被用来存储和取回位于访问者的计算机中的信息。

 

真实的名称是 ECMAScript

 

 

 

 

 

如何实现 JavaScript

 

如果需要把一段 JavaScript 插入 HTML 页面,我们需要使用 <script> 标签(同时使用 type 属性来定义脚本语言)。

 

这样,<script type="text/javascript"> </script> 就可以告诉浏览器 JavaScript 从何处开始,到何处结束。

 

<html>

<body>

<script type="text/javascript">

...

</script>

</body>

</html>

 

document.write 字段是标准的 JavaScript 命令,用来向页面写入输出。

 

 

JavaScript 放置到何处

 

当页面载入时,会执行位于 body 部分的 JavaScript

 

当被调用时,位于 head 部分的 JavaScript 才会被执行。

 

 

实例

 

head 部分

包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前,脚本已经载入了。

 

body 部分

执行位于 body 部分的脚本。

 

外部 JavaScript

如何访问外部脚本。

使用外部 JavaScript

 

有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。

 

为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

 

注意:外部文件不能包含 <script> 标签。

 

然后把 .js 文件指定给 <script> 标签中的 "src" 属性,就可以使用这个外部文件了:

 

<html>

<head>

<script src="xxx.js">....</script>

</head>

<body>

</body>

</html>

 

提示:您可以把 .js 文件放到网站目录中通常存放脚本的子目录中,这样更容易管理和维护。

 

 

JavaScript 语句

 

JavaScript 是由浏览器执行的语句序列。

浏览器按照编写顺序依次执行每条语句。

 

JavaScript 注释

 

单行的注释以 // 开始。

多行注释以 /* 开头,以 */ 结尾。

 

JavaScript 变量

 

JavaScript 变量名称的规则:

 

    * 变量对大小写敏感(y Y 是两个不同的变量)

* 变量必须以字母或下划线开始

 


声明(创建) JavaScript 变量:

 

您可以通过 var 语句来声明 JavaScript 变量:

 

var x;

var carname;

 

在以上声明之后,变量并没有值,不过您可以在声明它们时向变量赋值:

 

var x=5;

var carname="Volvo";

 

注释:在为变量赋文本值时,请为该值加引号。

 

 

重新声明 JavaScript 变量:

 

如果您再次声明了 JavaScript 变量,该变量也不会丢失其原始值。

 

var x=5;

var x;

 

在以上语句执行后,变量 x 的值仍然是 5。在重新声明该变量时,x 的值不会被重置或清除。

 

用于字符串的 + 运算符:

 

+ 运算符用于把文本值或字符串变量加起来(连接起来)。

 

如需把两个或多个字符串变量连接起来,请使用 + 运算符。

 

 

对字符串和数字进行加法运算:

如果把数字与字符串相加,结果将成为字符串。

 

JavaScript 比较和逻辑运算符

 

比较运算符:

 

比较运算符在逻辑语句中使用,以测定变量或值是否相等。

 

给定 x=5,下面的表格解释了比较运算符:

===       全等(值和类型)      x===5 truex==="5" false

 

条件运算符:

 

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

 

variablename=(condition)?value1:value2

 

 

 

 

 

 

JavaScript 消息框

 

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

 

警告框

 

警告框经常用于确保用户可以得到某些信息。

 

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:

 

alert("文本")

 

 

确认框

 

确认框用于使用户可以验证或者接受某些信息。

 

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

 

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false

语法:

 

confirm("文本")

 

 

提示框

 

提示框经常用于提示用户在进入页面前输入某个值。

 

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

 

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null

语法:

 

prompt("文本","默认值")

 

 

 

 

 

 

 

 

JavaScript 函数

 

实例:

 

函数

    如何调用函数。

带有参数的函数

    如何向函数传递变量,以及如何在函数中使用该变量。

带有参数的函数 2

    如何向函数传递多个变量,以及如何在函数中使用这些变量。

返回值的函数

    如何从函数返回值。

带有参数并返回值的函数

如何向函数输入两个参数值,并返回值。

 

 

JavaScript 函数:

 

将脚本编写为函数,就可以避免页面载入时执行该脚本。

 

函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。

 

你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。

 

函数在页面起始位置定义,即 <head> 部分。

 

例如:

<html>

<head>

<script type="text/javascript">

function displaymessage()

{

alert("Hello World!")

}

</script>

</head>

 

<body>

<form>

<input type="button" value="Click me!" onclick="displaymessage()" >

</form>

</body>

</html>

 

假如上面的例子中的 alert("Hello world!!") 没有被写入函数,那么当页面被载入时它就会执行。现在,当用户击中按钮时,脚本才会执行。我们给按钮添加了 onClick 事件,这样按钮被点击时函数才会执行。

 

如何定义函数:

创建函数的语法:

 

function 函数名(var1,var2,...,varX)

  {

  代码...

  }

 

var1, var2 等指的是传入函数的变量或值。{ } 定义了函数的开始和结束。

 

return 语句:

return 语句用来规定从函数返回的值。

因此,需要返回某个值的函数必须使用这个 return 语句。


JavaScript 变量的生存期:

 

当您在函数内声明了一个变量后,就只能在该函数中访问该变量。当退出该函数后,这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量,这是因为只有声明过变量的函数能够识别其中的每个变量。

 

如果您在函数之外声明了一个变量,则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始,在页面关闭时结束。

 

 

JavaScript For...In 声明

 

For...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

 

for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

 

语法:

 

for (变量 in 对象)

{

    在此执行代码

}

 

“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。

 

实例:

 

使用 for ... in 循环遍历数组。

 

<html>

<body>

 

<script type="text/javascript">

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

 

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

</script>

 

</body>

</html>

 

 

JavaScript 事件

 

事件

 

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

 

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例:

 

    * 鼠标点击

    * 页面或图像载入

    * 鼠标悬浮于页面的某个热点之上

    * 在表单中选取输入框

    * 确认表单

    * 键盘按键

 

注意:事件通常与函数配合使用,当事件发生时函数才会执行。

例如:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

 

 

JavaScript Try...Catch 语句

 

try...catch 的作用是测试代码中的错误。

 

JavaScript - 捕获错误

 

当我们在网上冲浪时,总会看到带有 runtime 错误的 Javascript 警告框,同时会询问我们“是否进行 debug?”。像这样的错误信息或许对开发人员有用,对用户则未必。当错误发生时,他们往往会选择离开这个站点。

 

本节向你讲解如何捕获和处理 Javascript 的错误消息,这样就可以为受众提供更多的便利。

 

有两种在网页中捕获错误的方法:

 

    * 使用 try...catch 语句。( IE5+Mozilla 1.0、和 Netscape 6 中可用)

* 使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

 

 

例如:

<html> <head> <script type="text/javascript"> var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="此页面存在一个错误。\n\n" txt+="错误描述: " + err.description + "\n\n" txt+="点击OK继续。\n\n" alert(txt) } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>

 

 

JavaScript Throw 声明

 

throw 声明的作用是创建 exception(异常或错误)。

 

Throw 声明

 

throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。

语法:

 

throw(exception)

 

exception 可以是字符串、整数、逻辑值或者对象。

 

例如:

<html> <body>

 <script type="text/javascript">

var x=prompt("Enter a number between 0 and 10:","")

 try

 {

if(x>10)

throw "Err1"

else if(x<0)

throw "Err2"

}

catch(er)

{

if(er=="Err1")

alert("Error! The value is too high")

 if(er == "Err2")

 alert("Error! The value is too low")

 }

</script> </body> </html>

 

 

 

 

JavaScript 特殊字符

 

你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。

 

插入特殊字符:

 

反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

JavaScript 中,字符串使用单引号或者双引号来起始或者结束。

 

下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中:

代码        输出

\'      单引号

\"      双引号

\&    和号

\\      反斜杠

\n     换行符

\r      回车符

\t      制表符

\b     退格符

\f      换页符

 

 

换行

 

您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的:

 

document.write("Hello \

World!")

 

但是不能像这样折行:

 

document.write \

("Hello World!")

Tags:  javascript javascript基础知识 零基础学javascript javascript基础教程

延伸阅读

最新评论

发表评论