JS笔记小鸟变凤凰的开始 2010_07

本文介绍了JavaScript的基础知识，包括语法特点、变量声明、基本数据类型、流程控制等核心概念，并讲解了如何在HTML页面中嵌入JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识论

JavaScript 是一种脚本语言（一种轻量级的编程语言）

轻量级：相对较小的包，与项目的耦合程度小

可直接嵌入HTML页面,一种解释性语言（代码执行不进行预编译）

JavaScript 的正式名称是 "ECMAScript",ECMA-262 是正式的 JavaScript 标准,这个标准由 ECMA 组织发展和维护。

基础知识整理

要把一段JavaScript 插入HTML 页面,要使用<script type="text/javascript"> 和 </script>标签,脚本位置可放在<head>或<body>标签内

<html>

<head>

</head>
<body>
<script type="text/javascript"> document.write("Hello World!"); //标准的页面输出 </script>
</body>
</html>

旧的浏览器不支持JavaScript ,用HTML标签注释防止把脚本作为页面的内容来显示

知识扩充

前端的开发涉及到浏览器的兼容性,实际应用中根据不同的浏览器类型及版本进行特殊处理。

JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的userAgent属性来判断。userAgent可以知其版本。

取巧方法：只有IE支持创建ActiveX控件，只要判断window对象存在 ActiveXObject函数，就可以明确判断出当前浏览器是IE
IE各个版本典型的userAgent
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
版本号是MSIE之后的数字

！注意

在若干页面中执行相同的脚本,写成.js文件作为外部文件

需要执行时用<script> 标签中的 "src" 属性

例如<script src="../Js/<%= GetjsPath%>GlobalLogAjax.js" language="javascript" type="text/javascript"></script>

通常要在每行语句的结尾加上一个分号,分号是可选的（根据 JavaScript 标准）,通过使用分号，可以在一行中写多条语句。

单行的注释 //

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

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

var 语句来声明 JavaScript 变量： var carname;

1.算术运算符 + - * / % ++ --

2.赋值运算符 = += -= *= /= %=

+ 运算符可用于字符串连接 var str1 = "abc"; var str2 = "def" ; var str3=str1 + str2

3.比较运算符 == != > < >= <= 返回true或false

4.逻辑运算符 && || !

5.条件运算符 variablename=(condition)?value1:value2

条件语句

1.IF IF ...ELSE... IF... ELSE IF...ELSE

2.switch(n)
{
case 1:

执行代码块 1 break
   case 2:
     执行代码块 2
     break
   default:
     如果n即不是1也不是2，则执行此代码
   }

警告框

alert("文本")

用户需要点击确定按钮才能继续进行操作。

确认框
confirm("文本")

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

提示框

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

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

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

注意：别忘记 JavaScript 中大小写字母的重要性。"function" 这个词必须是小写的，否则 JavaScript 就会出错。

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

JavaScript 变量的生存期

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

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

循环语句

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

while (真)
{
需执行的代码
}

do
{
需执行的代码
}
while (真)

至少循环1次

使用 break 语句来终止循环。

使用 continue 语句来终止当前的循环，然后从下一个值继续执行。

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

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

事件举例：

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

onFocus, onBlur 和 onChange

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

onSubmit

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

onMouseOver 和 onMouseOut

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

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

使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

注意：chrome、opera 和 safari 浏览器不支持 onerror 事件。

try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}

Throw 声明

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

onerror 事件

JavaScript 会忽略多余的空格

name="Hege"
name = "Hege"

两行是等效的：

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

document.write("Hello /
World!")

document.write /
("Hello World!")

.length 计算字符长度

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

.match 查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

.replace 在字符串中用某些字符替换另一些字符

使用 Date() 方法获得当日的日期。

使用 getTime() 计算从 1970 年到今天有多少年。

使用 setFullYear() 得到精确的日期。

使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

使用 getDay() 来显示星期，而不仅仅是数字。

myDate.setDate(myDate.getDate()+5)

增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

只要页面中出现脚本错误，就会产生 onerror 事件。创建一个处理错误的函数。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

插入特殊字符

代码	输出
/'	单引号
/"	双引号
/&	和号
//	反斜杠
/n	换行符
/r	回车符
/t	制表符
/b	退格符
/f	换页符

onload 和 onUnload

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

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

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

JavaScript 变量名称的规则：

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

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

取巧方法：Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。
Firefox各个版本典型的userAgent
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12

版本号是Firefox之后的数字。

取巧方法：Opera提供了专门的浏览器标志，就是window.opera属性
Opera各个版本典型的userAgent
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0

版本号是靠近Opera的数字。

取巧方法：Safari浏览器中有一个其他浏览器没有的openDatabase函数
Safari各个版本典型的userAgent
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

版本号是Version之后的数字。

取巧方法：Chrome有一个MessageEvent函数，但Firefox也有,不过没有Firefox的getBoxObjectFor 函数
Chrome各个版本典型的userAgent
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

版本号是Chrome之后的数字。

Chrome的userAgent还包含了Safari的特征，可以运行所有Apple浏览器应用