JavaScript基础教程2--变量,函数,事件等等
一。变量的知识
首先要明白JavaScript 变量名称的规则：
- 变量对大小写敏感（y 和 Y 是两个不同的变量）
- 变量必须以字母或下划线开始
注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。
声明（创建） JavaScript 变量
在 JavaScript 中创建变量经常被称为“声明”变量。
您可以通过 var 语句来声明 JavaScript 变量：但是不用定义数据类型，网页会自动识别，如同一般的脚本语言，如VBS，VBE，PHP等等。
var x;
var carname;
在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值：
var x=5;
var carname="Volvo";
注释：在为变量赋文本值时，请为该值加引号。
向 JavaScript 变量赋值
通过赋值语句向 JavaScript 变量赋值：
x=5;
carname="Volvo";
变量名在 = 符号的左边，而需要向变量赋的值在 = 的右侧。
在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。
向未声明的 JavaScript 变量赋值
如果您所赋值的变量还未进行过声明，该变量会自动声明。
这些语句：
x=5;
carname="Volvo";
与这些语句的效果相同：
var x=5;
var carname="Volvo";
重新声明 JavaScript 变量
如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。
var x=5;
var x;
在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。
二。函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
实例
- 函数
- 如何调用函数。
- 带有参数的函数
- 如何向函数传递变量，以及如何在函数中使用该变量。
- 带有参数的函数 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 函数的知识，请阅读 JavaScript 高级教程中的相关内容：
- ECMAScript 函数概述
- 本节讲解函数的概念，ECMAScript 如何声明并调用函数，以及函数如何返回值。
- ECMAScript arguments 对象
- 本节介绍了此对象的基本用法，然后讲解了如何使用 length 属性来测定函数的参数数目，以及模拟函数重载。
- ECMAScript Function 对象（类）
- 本节讲解了如何使用 Function 类创建函数，然后介绍了 Function 对象的属性和方法。
- ECMAScript 闭包（closure）
- 本节讲解了闭包（closure）的概念，并分别为您展示了简单和稍复杂的两个闭包实例。
三。事件
事件是可以被 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" >
</a>
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
FF: Firefox, N: Netscape, IE: Internet Explorer
| 属性 | 当有以下情况发生时，出发该事件 | FF | N | IE |
|---|---|---|---|---|
| onabort | 图像加载被中断 | 1 | 3 | 4 |
| onblur | 元素失去焦点 | 1 | 2 | 3 |
| onchange | 用户改变域的内容 | 1 | 2 | 3 |
| onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
| ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
| onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
| onfocus | 元素获得焦点 | 1 | 2 | 3 |
| onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
| onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
| onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
| onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
| onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
| onmousemove | 鼠标被移动 | 1 | 6 | 3 |
| onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
| onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
| onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
| onreset | 重置按钮被点击 | 1 | 3 | 4 |
| onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
| onselect | 文本被选定 | 1 | 2 | 3 |
| onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
| onunload | 用户退出页面 | 1 | 2 | 3 |
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
实例
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("文本")确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("文本")提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("文本","默认值")五。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语言基础知识点图示，转