JavaScript基础

http://www.w3school.com.cn/js/js_howto.asp

<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

</body>
</html>

把 JavaScript 放置到何处

 

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

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

 

 

使用外部 JavaScript

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

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

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

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

<html>
<head>
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>

<body onload="message()">

</body>
</html>

 

 

<html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("该消息在页面加载时输出。")
</script>

</body>
</html>


 

<html>
<head>
</head>
<body>

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

<p>
实际的脚本位于名为 "xxx.js" 的外部脚本中。
</p>

</body>
</html>

 

 

JavaScript 语句

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

 

 

JavaScript 注释


 

JavaScript 注释

可以添加注释来对 JavaScript 进行解释，或者提高其可读性。

单行的注释以 // 开始。

本例用单行注释来解释代码：

<script type="text/javascript">
// 这行代码输出标题：
document.write("<h1>This is a header</h1>");
// 这行代码输出段落：
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

TIY

JavaScript 多行注释

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

本例使用多行注释来解释代码：

<script type="text/javascript">
/*
下面的代码将输出
一个标题和两个段落
*/
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

 

 

JavaScript 变量

正如代数一样，JavaScript 变量用于保存值或表达式。

可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。

JavaScript 变量也可以保存文本值，比如 carname="Volvo"。

JavaScript 变量名称的规则：

  • 变量对大小写敏感（y 和 Y 是两个不同的变量）
  • 变量必须以字母或下划线开始

注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。

 

 

<html>
<body>

<script type="text/javascript">
var firstname;
firstname="George";
document.write(firstname);
document.write("<br />");
firstname="John";
document.write(firstname);
</script>

<p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值。</p>

</body>
</html>

 

<html>
<body>

<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>

<h3>规则是：</h3>

<p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p>

</body>
</html>

 

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("<b>早安</b>")
}
</script>

<p>本例演示 If 语句。</p>

<p>如果浏览器时间小于 10，那么会向您问“早安”。</p>

</body>
</html>

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("<b>早安</b>")
}
else
{
document.write("<b>祝您愉快</b>")
}
</script>

<p>本例演示 If...Else 语句。</p>

<p>如果浏览器时间小于 10，那么会向您问“早安”，否则会向您问候“祝您愉快”。</p>

</body>
</html>

 

<html>
<body>

<script type="text/javascript">
var r=Math.random()
if (r>0.5)
{
document.write("<a href='http://www.w3school.com.cn'>学习 Web 开发！</a>")
}
else
{
document.write("<a href='http://www.microsoft.com'>访问微软！</a>")
}
</script>

</body>
</html>

 

html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
  document.write("<b>Finally Friday</b>")
  break
case 6:
  document.write("<b>Super Saturday</b>")
  break
case 0:
  document.write("<b>Sleepy Sunday</b>")
  break
default:
  document.write("<b>I'm really looking forward to this weekend!</b>")
}
</script>

<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

</body>
</html>

 

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

实例

警告框
带有折行的警告框
确认框
提示框

警告框

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

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

语法：

alert("文本")

确认框

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

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

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

语法：

confirm("文本")

提示框

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

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

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

语法：

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

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

实例

函数
如何调用函数。
带有参数的函数
如何向函数传递变量，以及如何在函数中使用该变量。
带有参数的函数 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 事件，这样按钮被点击时函数才会执行。

在 JS 事件这一章，你会学到更多关于 JavaScript 事件的知识。

如何定义函数

创建函数的语法：

function 函数名(var1,var2,...,varX)
  {
  代码．．．
  }

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

注意：无参数的函数必须在其函数名后加括号：

function 函数名()
　　{
　　代码．．．
　　}

注意：别忘记 JavaScript 中大小写字母的重要性。"function" 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。

return 语句

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

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

例子

下面的函数会返回两个数相乘的值（a 和 b）：

function prod(a,b)
{
x=a*b
return x
}

当您调用上面这个函数时，必须传入两个参数：

product=prod(2,3)

而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。

JavaScript 变量的生存期

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

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

 

JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true 时）。

实例

For 循环
如何编写 loop 循环来按照指定的次数执行相同的代码。
循环产生 HTML 标题
如何使用Loop循环来产生不同的HTML标题。

JavaScript 循环

在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。

JavaScript 有两种不同种类的循环：

for
将一段代码循环执行指定的次数
while
当指定的条件为 true 时循环执行代码

for 循环

在脚本的运行次数已确定的情况下使用 for 循环。

语法：

for (变量=开始值;变量<=结束值;变量=变量+步进值) 
{
    需执行的代码
}

实例：

解释：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。

注释：步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。

<html>
<body>

<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>

</body>
</html>

结果：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

while 循环

<html>
<body>

<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("数字是 " + i)
document.write("<br>")
i++
}
</script>

<h1>解释：</h1>

<p><b>i</b> 等于 0。</p>

<p>当 <b>i</b> 小于或等于 5 时，循环将继续运行。</p>

<p>循环每运行一次，<b>i</b> 会累加 1。</p>

</body>
</html>

 

JavaScript For...In 声明

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

实例

For...In 声明
如何使用 For...In 声明来遍历数组内的元素。

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 侦测到的行为。

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

事件举例：

  • 鼠标点击
  • 页面或图像载入
  • 鼠标悬浮于页面的某个热点之上
  • 在表单中选取输入框
  • 确认表单
  • 键盘按键

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

如果需要更多有关 Javascript 可识别事件的知识，请阅读我们的 JavaScript 事件参考手册。

onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

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

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">

<img src="w3school.gif" width="100" height="30">

JavaScript Try...Catch 语句
try...catch 的作用是测试代码中的错误。
实例
try...catch 语句 
如何编写 try...catch 语句。 
带有确认框的 try...catch 语句 
另一个编写 try...catch 语句的例子。 
JavaScript - 捕获错误
当我们在网上冲浪时，总会看到带有 runtime 错误的 Javascript 警告框，同时会询问我们“是否进行 debug？”。像这样的错误信息或许对开发人员有用，对用户则未必。当错误发生时，他们往往会选择离开这个站点。
本节向你讲解如何捕获和处理 Javascript 的错误消息，这样就可以为受众提供更多的便利。
有两种在网页中捕获错误的方法：
  • 使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
  • 使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用) 
Try...Catch 语句
try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。
语法：
try
{
   //在此运行代码
}
catch(err)
{
   //在此处理错误
}
注意：try...catch 使用小写字母。大写字母会出错。
实例 1
下面的例子原本用在用户点击按钮时显示 "Welcome guest!" 这个消息。不过 message() 函数中的 alert() 被误写为 adddlert()。这时错误发生了：
<html>
<head>
<script type="text/javascript">
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>
我们可以添加 try...catch 语句，这样当错误发生时可以采取更适当的措施。
下面的例子用 try...catch 语句重新修改了脚本。由于误写了 alert()，所以错误发生了。不过这一次，catch 部分捕获到了错误，并用一段准备好的代码来处理这个错误。这段代码会显示一个自定义的出错信息来告知用户所发生的事情。
<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>
实例 2
下一个例子会显示一个确认框，让用户来选择在发生错误时点击确定按钮来继续浏览网页，还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false，代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true，那么代码什么也不会做。
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="There was an error on this page.\n\n"
  txt+="Click OK to continue viewing this page,\n"
  txt+="or Cancel to return to the home page.\n\n"
  if(!confirm(txt))
    {
    document.location.href="http://www.w3school.com.cn/"
    }
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>
onerror 事件
我们马上会讲解 onerror 事件。但首先您需要学习如何使用 throw 语句来创建异常。throw 语句可以与 try...catch 语句一起使用。


JavaScript Throw 声明
throw 声明的作用是创建 exception（异常或错误）。
实例
throw 声明 
如何使用 throw 声明。 
Throw 声明
throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。
语法：
throw(exception)
exception 可以是字符串、整数、逻辑值或者对象。
注意：使用小写字母编写 throw。使用大写字母会出错！
实例 1
下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。
<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 onerror 事件
使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。
实例
onerror 事件 
如何使用 onerror 事件捕获网页中的错误。 
onerror 事件
我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。
只要页面中出现脚本错误，就会产生 onerror 事件。
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
语法：
onerror=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
浏览器是否显示标准的错误消息，取决于 onerror 的返回值。如果返回值为 false，则在控制台 (JavaScript console) 中显示错误消息。反之则不会。
实例：
下面的例子展示如何使用 onerror 事件来捕获错误：
<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>
 
JavaScript 特殊字符
你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。
插入特殊字符
反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。
请看下面的 JavaScript 代码：
var txt="We are the so-called "Vikings" from the north."
document.write(txt)
在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为：We are the so-called。
要解决这个问题，就必须把在 "Viking" 中的引号前面加上反斜杠 (\)。这样就可以把每个双引号转换为字面上的字符串。
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
现在 JavaScript 就可以输出正确的文本字符串了：We are the so-called "Vikings" from the north。
这是另一个例子：
document.write ("You \& me are singing!") 
上面的例子会产生以下输出：
You & me are singing!
下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：
代码输出
\'单引号
\"双引号
\&和号
\\反斜杠
\n换行符
\r回车符
\t制表符
\b退格符
\f换页符
 
JavaScript 指导方针
本节的内容是：在使用 JavaScript 进行编码的过程中，其他一些需要了解的重要事项。
JavaScript 对大小写敏感
名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数，同样，变量 "myVar" 和变量 "myvar" 也是不同的。
JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时，请注意字符的大小写。
空格
JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：
name="Hege"
name = "Hege"
换行
您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：
document.write("Hello \
World!")
但是不能像这样折行：
document.write \
("Hello World!")
posted @ 2009-05-30 21:39  minmin8110  阅读(350)  评论(0)  编辑  收藏  举报