JavaScrip学习笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/tsiring/article/details/4946813

本文介绍了JavaScript的基本概念及其在网页设计中的广泛应用，包括交互行为添加、表单验证、cookies管理等，并详细讲解了其语法特点和常见操作技巧。

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

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

什么是 JavaScript？

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
所有的人无需购买许可证均可使用 JavaScript。

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

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

JavaScript 可以读写 HTML 元素

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

JavaScript 可被用来验证数据

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

JavaScript 可被用来创建 cookies

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

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

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

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

js/javascript放在Web文件的<head>……</head>和放在文件的<body>……</body>处有什么不同吗？

严格来讲有区别。
javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。

比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。因而除了部分需要在网页中输出内容、调整显示的JavaScript必须放在<head></head>之间，

一般的JavaScript放在<head></head>和放在<body></body>之间从执行结果来看是没有区别的，但是有如下的经验规则：
1.当JavaScript要在页面加载过程中动态建立一些Web页面的内容时，应将JavaScript放在body中。
2.定义为函数并用于页面事件的JavaScript应当放在head标记中，因为它会在body之前加载。
采用这种方法，页面就不会被脚本搞得一团糟，易于阅读，在每个页面中，总可以在同一个位置找到脚本。

JavaScript脚本在HTML中的head与body的不同？

放在head中可以保证在页面加载时函数已经定义了,要不可能会出现找不到对象的错误

1. function定义了都是不会自动执行的，都是在被调用时才会执行
2. 同head中一样，function定义了并不会马止执行
<script type="text/javascript">
// 下面这句是会马上执行的，不管在head还是body中
var str="hello,world!";
// 下面这个函数是不会马上执行的，只是定义了这个函数
function test()
{
alert("ok");
}
// 调用test的时候test才会执行
test();
</script>

位于 head 部分的脚本：

当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。

位于 body 部分的脚本：

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

使用外部 JavaScript

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

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

通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在 web 上的 JavaScript 案例中也常常会看到这种情况。

分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。

注释：通过使用分号，可以在一行中写多条语句。

JavaScript 注释

单行的注释以 // 开始。

JavaScript 多行注释

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

variablename=(condition)?value1:value2

警告框

alert("文本")

确认框

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

confirm("文本")

提示框

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

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

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

函数

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

JavaScript 变量的生存期

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

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

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 函数的事件。

onload 和 onUnload

onFocus, onBlur 和 onChange

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

onSubmit

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

onMouseOver 和 onMouseOut

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

我们可向图像地图内部的 <area> 标签添加（能调用JavaScript的）事件。<area> 标签支持以下事件：onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>

<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant
planets like Jupiter are by far the largest objects
in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very
difficult to study from the Earth because it is
always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>

<p id="desc"></p>

</body>
</html>

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

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

注意：try...catch 使用小写字母。大写字母会出错。使用小写字母编写 throw。使用大写字母会出错！

<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>

使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。

如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

注意：只要页面中出现脚本错误，就会产生 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" οnclick="message()" />
</body>

</html>

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

JavaScript 对大小写敏感

JavaScript 是面向对象的编程语言 (OOP)。

OOP 语言使我们有能力自定义对象和变量类型。

注意：对象只是一种特殊的数据。对象拥有属性和方法。

属性

属性指与对象有关的值。

方法

方法指对象可以执行的行为（或者可以完成的功能）。

内建(置)的 JavaScript 对象:

String 方法:toUpperCase()、 indexOf() 、replace() 、match() 。。属性：length

Date 方法:getTime() 、setFullYear() 、 getDay() 、toUTCString() 。。

Array 方法：concat() 、 join() 、sort() 。。

注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。

使用 for...in 声明来循环输出数组中的元素。

Boolean 方法:

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

Math 方法：round()、 random() 、 max() 、 min()

RegExp 方法：test()、exec() 以及 compile()。

RegExp 对象用于规定在文本中检索的内容。

除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象

JavaScript 浏览器检测

JavaScript 包含一个名为 Navigator 的对象,

Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等。

属性appName

保存浏览器类型

属性appVersion

存有浏览器的版本信息（其他信息中的一项）

appVersion 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。

重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。怎么会出现这样的错误呢？无论如何，我们需要清楚的是，JavaScript 在 IE6、IE5 和 IE4 中的获得的版本号是相同的。

cookie 用来识别用户

什么是cookie?

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
}
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

JavaScript 表单验证

必填（或必选）项目

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}

E-mail 验证

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}

JavaScript 动画

使用 JavaScript 创建动态图像是可行的。

窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>

<body>
<a href="http://www.w3school.com.cn" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
onmouseOver="mouseOver()" onmouseOut="mouseOut()" />
</a>
</body>
</html>

注意：我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。

JavaScript 计时

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

创建你自己的 JavaScript 对象

对象有助于组织信息。

JavaScript与DOM的关系

因为谈到web标准的时候，人们总是这样说:
结构xml+xhtml、表现css、行为dom+ecma javascript
结构与表现的概念是很容易理解并掌握的，行为的两个概念却是很容易混淆。希望更多牛人回复，各自说说，看能不能找个很合适的比喻来说明它们之间的关系，这想，这会帮助很多想入门的朋友。

当你想要改变网页行为的时候你该怎么办呢？你不会用脚来踹网页或者用头来顶网页吧？
这时候怎么办呢？而你手中有javascript 这种工具！所以你就会考虑用javascript来改变网页行为，而这时候你会想我怎么改变呢？而我发现网页原来有接口的，就好像你推车有车柄一样，你可以作用于车柄让它往前走，同样的你也会作用于网页的接口改变他的行为，而这个接口就是DOM。
所以 javascript和DOM 就好像你的手和车柄一样，你不会用你的头去撞车柄，同样你也不会用CSS去改变网页行为！
当然手也不只是限于推车，还可以做别的事情，javascript也一样可以干别的事情！

dom 页面的内容
css 页面的呈现
JS 页面的行为

看了一些书，包括jeremy keith 的javascript dom编程艺术。这本书里有这样的一种概念： DOM是一种API，就像化学元素周期表或者摩尔斯电报码。W3C这样定义DOM：“一个与系统平台和编程语言无关的接口，程序或者脚本可以通过这个接口动态的对文档的结构、内容和样式进行访问与修改”。同时还有这样的一句话：“javascript语言的特点使它成为了DOM脚本程序设计的最佳选择”。javascript与Dom出现的目的都一样：改善文档的可交互性。
如果把“交互性”看作是给浏览者的一种礼物的话（gift），那么javascript就是把这个礼物运送给浏览者的卡车（track），而DOM就是卡车要走的那条最好的路（road）。
javascript与DOM相互作用，成就了W3C标准中的行为。

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API（应用程序编程接口），为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。

JavaScript对DOM进行操作，从而来完成我们想要的东西。
比如AJAX技术，就是利用DOM，JavaScript，CSS和XML 来实现WEB功能的。