JavaScript

最新推荐文章于 2024-03-20 09:48:49 发布

brightyuan

最新推荐文章于 2024-03-20 09:48:49 发布

阅读量975

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/gamekenlove/article/details/39207221

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简介：

Node.js，avaScript的服务器技术

jQuery ,JavaScript的前端技术

要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行

Node.js的原理正是如此，它使用了Google的V8虚拟机

Node.js事实上既是一个运行时环境，同时又是一个库

伴随着Node.js的还有许多有用的模块，它们可以简化很多重复的劳作，比如向终端输出字符串

JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,

将动态的文本放入 HTML 页面 ,

对事件作出响应,

可以读写 HTML 元素

JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

简明教程：

如何把 JavaScript 放入 HTML 页面

document.write("Hello World!");

`如何与老的浏览器打交道`

防止那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示可以使用这样的 HTML 注释标签

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

</script>

实例
head 部分
包含函数的脚本位于文档的 head 部分-->确保在调用函数前，脚本已经载入了。

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

body 部分

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

外部 JavaScript

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

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

注释

// 这行代码输出标题：

/*
  下面的代码将输出
  一个标题和两个段落
*/

变量名称的规则：

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

通过 var 语句来声明 JavaScript 变量：

var x;

var carname="Volvo";

如果您所赋值的变量还未进行过声明，该变量会自动声明

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

var x=5;
var x;

运算符

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

运算符:

variablename=(condition)?value1:value2

if,switch  同于php

警告框

经常用于确保用户可以得到某些信息

alert("文本")

确认框

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

confirm("文本")

提示框

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

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

函数

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

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

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

定义函数

//带有参数，返回值的方法

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

变量的生存期

1>当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。

您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。

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

for 循环

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

语法：

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

while 循环

while 循环用于在指定条件为 true 时循环执行代码。

语法：

while (变量<=结束值)
{
    需执行的代码
}

do...while 循环

语法：

do
{
    需执行的代码
}
while (变量<=结束值)

For...In 声明

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

语法：

for (变量 in 对象)
{
    在此执行代码
}

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

事件举例：
鼠标点击 
页面或图像载入 
鼠标悬浮于页面的某个热点之上 
在表单中选取输入框 
确认表单 
键盘按键 
onload 和 onUnload
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

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

<input type="text" size="30" id="email" οnchange="checkEmail()">
onSubmit
onSubmit 用于在提交表单之前验证所有的表单域。
使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。
假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。
如果返回值为true，则提交表单，反之取消提交。

<form method="post" action="xxx.htm" οnsubmit="return checkForm()">
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框
οnmοuseοver="alert('An onMouseOver event');return false">

Try...Catch 语句
语法：
try
{
   //在此运行代码
}
catch(err)
{
   //在此处理错误
}

Throw 声明

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

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

onerror 事件 （chrome、opera、safari 浏览器不支持）

只要页面中出现脚本错误，就会产生 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() {
            alert("Welcome guest!")
        }
    </script>
</head>

<body>
<input type="button" value="View message" οnclick="message()"/>
</body>
</html>

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

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

字符串使用单引号或者双引号来起始或者结束。
var txt="We are the so-called \"Vikings\" from the north."
document.write ("You \& me are singing!")

在文本字符串内部使用反斜杠对代码进行折行
document.write("Hello \
World!")
JavaScript 是面向对象的编程语言 (OOP)

String（字符串）对象实例

方法	描述	FF	IE
anchor()	创建 HTML 锚。	1	3
big()	用大号字体显示字符串。	1	3
blink()	显示闪动字符串。	1
bold()	使用粗体显示字符串。	1	3
charAt()	返回在指定位置的字符。	1	3
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。	1	4
concat()	连接字符串。	1	4
fixed()	以打字机文本显示字符串。	1	3
fontcolor()	使用指定的颜色来显示字符串。	1	3
fontsize()	使用指定的尺寸来显示字符串。	1	3
fromCharCode()	从字符编码创建一个字符串。	1	4
indexOf()	检索字符串。	1	3
italics()	使用斜体显示字符串。	1	3
lastIndexOf()	从后向前搜索字符串。	1	3
link()	将字符串显示为链接。	1	3
localeCompare()	用本地特定的顺序来比较两个字符串。	1	4
match()	找到一个或多个正在表达式的匹配。	1	4
replace()	替换与正则表达式匹配的子串。	1	4
search()	检索与正则表达式相匹配的值。	1	4
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。	1	4
small()	使用小字号来显示字符串。	1	3
split()	把字符串分割为字符串数组。	1	4
strike()	使用删除线来显示字符串。	1	3
sub()	把字符串显示为下标。	1	3
substr()	从起始索引号提取字符串中指定数目的字符。	1	4
substring()	提取字符串中两个指定的索引号之间的字符。	1	3
sup()	把字符串显示为上标。	1	3
toLocaleLowerCase()	把字符串转换为小写。	-	-
toLocaleUpperCase()	把字符串转换为大写。	-	-
toLowerCase()	把字符串转换为小写。	1	3
toUpperCase()	把字符串转换为大写。	1	3
toSource()	代表对象的源代码。	1	-
toString()	返回字符串。	-	-
valueOf()	返回某个字符串对象的原始值。	1	4

Date（日期）对象实例

Date 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
Date()	返回当日的日期和时间。	1	3
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。	1	3
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。	1	3
getMonth()	从 Date 对象返回月份 (0 ~ 11)。	1	3
getFullYear()	从 Date 对象以四位数字返回年份。	1	4
getYear()	请使用 getFullYear() 方法代替。	1	3
getHours()	返回 Date 对象的小时 (0 ~ 23)。	1	3
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。	1	3
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。	1	3
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。	1	4
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。	1	3
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。	1	3
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。	1	4
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。	1	4
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。	1	4
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。	1	4
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。	1	4
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。	1	4
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。	1	4
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。	1	4
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。	1	3
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。	1	3
setMonth()	设置 Date 对象中月份 (0 ~ 11)。	1	3
setFullYear()	设置 Date 对象中的年份（四位数字）。	1	4
setYear()	请使用 setFullYear() 方法代替。	1	3
setHours()	设置 Date 对象中的小时 (0 ~ 23)。	1	3
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。	1	3
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。	1	3
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。	1	4
setTime()	以毫秒设置 Date 对象。	1	3
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。	1	4
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。	1	4
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。	1	4
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。	1	4
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。	1	4
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。	1	4
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。	1	4
toSource()	返回该对象的源代码。	1	-
toString()	把 Date 对象转换为字符串。	1	4
toTimeString()	把 Date 对象的时间部分转换为字符串。	1	4
toDateString()	把 Date 对象的日期部分转换为字符串。	1	4
toGMTString()	请使用 toUTCString() 方法代替。	1	3
toUTCString()	根据世界时，把 Date 对象转换为字符串。	1	4
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。	1	3
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。	1	3
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。	1	3
UTC()	根据世界时返回 1997 年 1 月 1 日到指定日期的毫秒数。	1	3
valueOf()	返回 Date 对象的原始值。	1	4

定义日期

var myDate=new Date()

注释：Date 对象自动使用当前的日期和时间作为其初始值

操作日期

日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()
myDate.setFullYear(2008,7,9)

将日期对象设置为 5 天后的日期

var myDate=new Date()
myDate.setDate(myDate.getDate()+5)

数组对象的作用是：使用单独的变量名来存储一系列的值
定义数组
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

var mycars=new Array("Saab","Volvo","BMW")
访问数组
document.write(mycars[0])
修改已有数组中的值
mycars[0]="Opel";

方法	描述	FF	IE
concat()	连接两个或更多的数组，并返回结果。	1	4
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。	1	4
pop()	删除并返回数组的最后一个元素	1	5.5
push()	向数组的末尾添加一个或更多元素，并返回新的长度。	1	5.5
reverse()	颠倒数组中元素的顺序。	1	4
shift()	删除并返回数组的第一个元素	1	5.5
slice()	从某个已有的数组返回选定的元素	1	4
sort()	对数组的元素进行排序	1	4
splice()	删除元素，并向数组添加新元素。	1	5.5
toSource()	返回该对象的源代码。	1	-
toString()	把数组转换为字符串，并返回结果。	1	4
toLocaleString()	把数组转换为本地数组，并返回结果。	1	4
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。	1	6
valueOf()	返回数组对象的原始值	1	4

Boolean（逻辑）对象

Boolean 对象

Boolean 对象理解为一个产生逻辑值的对象包装器,用于将非逻辑值转换为逻辑值（true 或者 false）。

var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
var myBoolean=new Boolean(NaN)

下面的所有的代码行均会创初始值为 true 的 Boolean 对象：

var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")

下面的例子展示 toSource() 方法的用法：

<script type="text/javascript">

function employee(name,job,born)
{
     this.name=name;
     this.job=job;
     this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.toSource());

</script>

输出：

({name:"Bill Gates", job:"Engineer", born:1985})

方法	描述
toSource()	返回该对象的源代码。
toString()	把逻辑值转换为字符串，并返回结果。
valueOf()	返回 Boolean 对象的原始值。

Math 对象

round()

如何使用 round()。

random()

如何使用 random() 来返回 0 到 1 之间的随机数。

max()

如何使用 max() 来返回两个给定的数中的较大的数。

min()

如何使用 min() 来返回两个给定的数中的较小的数。

RegExp 对象

RegExp 是正则表达式的缩写, 用于规定在文本中检索的内容,可用于解析、格式检查、替换等等

定义 RegExp

RegExp 对象用于存储检索模式

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"

RegExp 对象的方法

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false

例子：

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：

true

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null

例子 1：

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：

compile()

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数

例子：

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：

true false

RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[a-Z]	查找任何从小写 a 到大写 Z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
[red\|blue\|green]	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	查找位于单词的开头或结尾的匹配。
\B	查找不处在单词的开头或结尾的匹配。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。		4

HTML DOM

HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素

使用 JavaScript 来访问和处理 DOM 对象的知识：

对象	描述
Document	代表整个 HTML 文档，用来访问页面中的所有元素。
Anchor	代表 <a> 元素。
Area	代表图像地图中的 <area> 元素。
Base	代表 <base> 元素。
Body	代表图像地图中的 <body> 元素。
Button	代表 <button> 元素。
Event	代表事件的状态
Form	代表 <form> 元素
Frame	代表 <frame> 元素
Frameset	代表 <frameset> 元素
Iframe	代表 <iframe> 元素
Image	代表 <img> 元素
Input button	代表 HTML 表单中的按钮
Input checkbox	代表 HTML 表单中的选择框
Input file	代表 HTML 表单中的 fileupload 。
Input hidden	代表 HTML 表单中的隐藏域。
Input password	代表 HTML 表单中的密码域。
Input radio	代表 HTML 表单中的单选框。
Input reset	代表 HTML 表单中的重置按钮。
Input submit	代表 HTML 表单中的确认按钮。
Input text	代表 HTML 表单中的文本输入域。
Link	代表 <link> 元素
Meta	代表 <meta> 元素
Object	代表一个 <Object> 元素
Option	代表 <option> 元素
Select	代表 HTML 表单中的选择列表。
Style	代表某个单独的样式声明。
Table	代表 <table> 元素。
TableData	代表 <td> 元素。
TableRow	代表 <tr> 元素。
Textarea	代表 <textarea> 元素。

表单验证

在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证

检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true

< html >

< head >

< script type = "text/javascript" >

function validate_required (field,alertxt){

with (field){

if (value == null || value == "" ){

alert(alertxt);

return false ;

} else {

alert(value);

return true ;

}

function validate_form (thisform) {

with (thisform) {

if (validate_required(email, "Email must be filled out!" ) == false ) {

email.focus();

return false

}

</ script >

</ head >

< body >

< form action = "JS.php" onsubmit = " return validate_form (this) " method = "post" >

Email:< input type = "text" name = "email" size = "30" >

< input type = "submit" value = "submit" >

</ form >

</ body >

</ html >

E-mail 验证

将上面的方法改为如下（输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号）：

function validate_required (field,alertxt){

with (field){

var apos = value.indexOf( "@" );

var dotpos = value.indexOf( "." );

if (apos < 1 || dotpos - apos < 2 ){

alert(alertxt);

return false ;

} else {

alert(value);

return true ;

}

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM 树

查找 HTML 元素

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

<p id="intro">Hello World!</p>

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var y= document.getElementsByTagName("p");

如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件对做出反应
如何添加或删除 HTML 元素

HTML DOM 允许 JavaScript 改变 HTML 元素的内容

document.write() 可用于直接向 HTML 输出流写内容

改变 HTML 内容

改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

< p id = "p1" > Hello World! </ p >

< script > document .getElementById( "p1" ).innerHTML = "<h2>Hello ken</h2>" ; </ script >

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

改变了 <img> 元素的 src 属性

< img id = "image" src = "/i/eg_tulip.jpg" />

< script > document .getElementById( "image" ).src = "/i/shanghai_lupu_bridge.jpg" ; </ script >

Document

< script type = "text/javascript" >

function createNewDoc ()

{

var newDoc = document .open( "text/html" );

var txt = "<html><body>Learning about the DOM is FUN!</body></html>" ;

newDoc.write(txt);

newDoc.close();

}

</ script >

HTML DOM - 改变 CSS

改变 HTML 样式

改变 <p> 元素的样式：

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

对 HTML 事件做出反应

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

例子 1

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

例子 2

<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性

向 button 元素分配 onclick 事件：

<button οnclick="displayDate()">点击这里</button>

使用 HTML DOM 来分配事件

通过使用 JavaScript 来向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

onload 和 onunload 事件

1.onload 和 onunload 事件会在用户进入或离开页面时被触发。

2.onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

3.onload 和 onunload 事件可用于处理 cookie。

onchange 事件

常结合对输入字段的验证来使用

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" οnchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

< div onmouseover = " mOver (this) " onmouseout = " mOut (this) " >把鼠标移到上面</ div >

< script >

function mOver (obj) { }

function mOut (obj) { }

</ script >

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件

DOM 元素

创建新的 HTML 元素

向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

< body >

< div id = "div_name" >

< p id = "p1" >one text</ p >

</ div >

< script type = "text/javascript" >

var para = document .createElement( "p" ); 创建元素

var node = document .createTextNode( "add subText Node" ); 创建节点

para.appendChild( node ); 添加节点->元素

var ele = document .getElementById( "div_name" ); 取得元素

ele.appendChild(para); 添加元素

</ script >

</ body >

删除已有的 HTML 元素

删除 HTML 元素，您必须首先获得该元素的父元素

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Window 对象

它表示浏览器窗口

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

Window 尺寸

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Location

window.location 对象在编写时可不使用 window 这个前缀。

一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL

document.write(location.href);

location.pathname 属性返回 URL 的路径名

document.write(location.pathname);

location.assign() 方法加载新的文档

 window.location.assign("http://www.w3school.com.cn")

Window History

history.back() - 与在浏览器点击后退按钮相同, 加载历史列表中的前一个 URL
history.forward() - 与在浏览器中点击按钮向前相同, 加载历史列表中的下一个 URL

Window Navigator

包含有关访问者浏览器的信息

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

浏览器检测

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

三种消息框：警告框、确认框、提示框

警告框

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

语法：

alert("文本")

确认框

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

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

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

语法：

confirm("文本")

提示框

用于提示用户在进入页面前输入某个值

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

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

语法：

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

计时事件

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

两个关键方法是:
setTimeout() //未来的某时执行代码

clearTimeout() //取消setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数

实例

当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出

var t=setTimeout("alert('5 seconds!')",5000)

实例 - 无穷循环

创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身,达到递归调用的作用

<script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } </script>

clearTimeout()

语法

clearTimeout(setTimeout_variable)

实例

和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器

<script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } function stopCount() { clearTimeout(t) } </script>

cookie 用来识别用户

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

创建和存储 cookie

在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。

<html>
<head>
    <script type="text/javascript">
        //建一个可在 cookie 变量中存储访问者姓名的函数
        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.toString())
        }

        //先会检查 document.cookie 对象中是否存有 cookie,继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串
        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                document.write(document.cookie);
                var c_start = document.cookie.indexOf(c_name + "=")
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1
                    var 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 "";
        }
        //如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字
        function checkCookie() {
            var 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 框架：

jQuery
Prototype
MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理

jQuery

使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）

jQuery 同时提供 companion UI（用户界面）和插件

Prototype

Prototype 是一种库，提供用于执行常见 web 任务的简单 API

Prototype 通过提供类和继承，实现了对 JavaScript 的增强

MooTools

提供了可使常见的 JavaScript 编程更为简单的 API。

也含有一些轻量级的效果和动画函数

引用 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

测试 JavaScript 框架库 - jQuery

jQuery 描述

主要的 jQuery 函数是 $() 函数（jQuery 函数）,如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

JavaScript 方式：

function myFunction()
{
     var obj=document.getElementById("h01");
     obj.innerHTML="Hello jQuery";
}
οnlοad=myFunction;

等价的 jQuery 是：

jQuery 方式：

function myFunction()
{
     $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法

提示：jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同

jQuery 对象拥有的属性和方法，与 DOM 对象的不同

不能在 jQuery 对象上使用 HTML DOM 的属性和方法

测试 jQuery

<html>
<head>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <script>
        function myFunction() {
            $("#h01").attr("style", "color:red").html("Hello jQuery");
            $("#h01").append("hello 2jquery");
        }

        $(document).ready(myFunction);
    </script>
</head>

Prototype 描述

Prototype 提供的函数可使 HTML DOM 编程更容易。
 也有自己的 $() 函数。$() 函数接受 HTML DOM 元素的 id 值（或 DOM 元素），并会向 DOM 对象添加新的功能。
与 jQuery 不同，Prototype 没有用以取代 window.onload() 的 ready() 方法。相反，Prototype 会向浏览器及 HTML DOM 添加扩展。

分配一个函数以处理窗口加载事件：

JavaScript 方式：

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
οnlοad=myFunction;

等价的 Prototype 是不同的：

Prototype 方式：

function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

Event.observe() 接受三个参数：

您希望处理的 HTML DOM 或 BOM（浏览器对象模型）对象
您希望处理的事件
您希望调用的函数

总结

jQuery

jQuery 是一个 JavaScript 库
jQuery 极大地简化了 JavaScript 编程

HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

HTML DOM 独立于平台和语言，可被任何编程语言使用，比如 Java、JavaScript 和 VBscript

AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。

通过与服务器进行数据交换，AJAX 可以在不重新加载整个网页的情况下，对网页的某部分进行更新

JSON

JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析

PHP

脚本在服务器上运行

brightyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript

如何把 JavaScript 放入 HTML 页面

如何与老的浏览器打交道

运算符

运算符:

函数

变量的生存期

for 循环

语法：

while 循环

语法：

do...while 循环

语法：

For...In 声明

语法：

Throw 声明

String（字符串）对象 实例

Date（日期）对象 实例

Date 对象方法

定义日期

操作日期

Boolean（逻辑）对象

Boolean 对象

Math 对象

RegExp 对象

定义 RegExp

RegExp 对象的方法

test()

例子：

exec()

例子 1：

compile()

例子：

RegExp 对象

直接量语法

创建 RegExp 对象的语法：

参数

返回值

抛出

修饰符

方括号

元字符

量词

RegExp 对象属性

RegExp 对象方法

支持正则表达式的 String 对象的方法

HTML DOM

表单验证

E-mail 验证

HTML DOM （文档对象模型）

HTML DOM 树

查找 HTML 元素

改变 HTML 内容

改变 HTML 属性

改变 HTML 样式

例子 1

例子 2

HTML 事件属性

使用 HTML DOM 来分配事件

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

DOM 元素

创建新的 HTML 元素

删除已有的 HTML 元素

Window 对象

Window 尺寸

Window Screen

Window Location

Window History

Window Navigator

浏览器检测

警告框

语法：

确认框

语法：

提示框

语法：

语法

`如何与老的浏览器打交道`

String（字符串）对象实例

Date（日期）对象实例