JavaScript总结

JavaScript 是世界上最流行的脚本语言。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被设计为向 HTML 页面增加交互性。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
1.JavaScript：写入 HTML 输出
实例
document.write(“h1 This is a heading /h1”);
document.write(“p This is a paragraph /p”);
2.HTML 中的脚本必须位于 script 与 /script 标签之间。
脚本可被放置在 HTML 页面的 body 和 head 部分中。
script 标签
如需在 HTML 页面中插入 JavaScript，请使用 script 标签。
script 和 script 会告诉 JavaScript 在何处开始和结束。
script 和 script之间的代码行包含了 JavaScript：
script
alert(“My First JavaScript”);
script
bod 中的 JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 body 写文本：
实例
!DOCTYPE html
html
body

script
document.write(“h1 This is a heading /h1”);
document.write(“p This is a paragraph /p”);
/script
body
html
3.JavaScript 通常用于操作 HTML 元素。
通过指定的 id 来访问 HTML 元素，并改变其内容：
!DOCTYPE html
html
body
h1我的第一张网页/h1
p id=”demo”我的第一个段落/p
script
document.getElementById(“demo”).innerHTML=”我的第一段 JavaScript”;
/script
/body
/html
4.JavaScript 注释
body

h1 id=”myH1”/h1

p id=”myP” /p

script
// 输出标题：
document.getElementById(“myH1”).innerHTML=”Welcome to my Homepage”;
// 输出段落：
document.getElementById(“myP”).innerHTML=”This is my first paragraph.”;

p b注释：/b注释不会被执行。/p

/body
/html
5.JavaScript 变量
var x=2;
var y=3;
var z=x+y;
var值是什么就是什么数据类型
var pi=3.14;
var name=”Bill Gates”;
var answer=’Yes I am!’;
6.一条语句，多个变量
var name=”Gates”, age=56, job=”CEO”;
声明也可横跨多行：
var name=”Gates”,
age=56,
job=”CEO”;
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：
var carname=”Volvo”;
var carname;
例如
body
p假设 y=5，计算 x=y+2，并显示结果。/p
button onclick=”myFunction()”点击这里/button
p id=”demo”/p
script
function myFunction()
{
var y=5;
var x=y+2;
var demoP=document.getElementById(“demo”)
demoP.innerHTML=”x=” + x;
}
/script
/body
7.JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例
var x // x 为 undefined
var x = 6; // x 为数字
var x = “Bill”; // x 为字符串
JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
var carname=”Bill Gates”;
var carname=’Bill Gates’;
8.JavaScript 对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。
汽车的属性：
car.name=Fiat
car.model=500
car.weight=850kg
car.color=white
汽车的方法：
car.start()
car.drive()
car.brake()
访问对象的属性
访问对象属性的语法是：
objectName.propertyName
本例使用 String 对象的 length 属性来查找字符串的长度：
var message=”Hello World!”;
var x=message.length;
9.script
$(function(){
{
alert(“Hello World!”);
}
})
/script
/head
body
button onclick=”myFunction()”点击这里/button
/body
/html
10JavaScript 运算符
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
y=5;
z=2;
x=y+z;
+ 加 x=y+2 x=7
- 减 x=y-2 x=3
* 乘 x=y*2 x=10
/ 除 x=y/2 x=2.5
% 求余数 (保留整数) x=y%2 x=1
++ 累加 x=++y x=6
– 递减 x=–y x=4
8.JavaScript 比较和逻辑运算符
比较和逻辑运算符用于测试 true 或 false。
运算符 描述 例子
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x===”5” 为 false
!= 不等于 x!=8 为 true

大于 x>8 为 false
< 小于 x<8 为 true
= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true
9.JavaScript If…Else 语句
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
实例
当时间小于 20:00 时，生成一个“Good day”问候：
if (time<20)
{
x=”Good day”;
}
实例
当时间小于 20:00 时，将得到问候 “Good day”，否则将得到问候 “Good evening”。
if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
实例
如果时间小于 10:00，则将发送问候 “Good morning”，否则如果时间小于 20:00，则发送问候 “Good day”，否则发送问候 “Good evening”：
if (time<10)
{
x=”Good morning”;
}
else if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
实例
如果时间小于 10:00，则将发送问候 “Good morning”，否则如果时间小于 20:00，则发送问候 “Good day”，否则发送问候 “Good evening”：
if (time<10)
{
x=”Good morning”;
}
else if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
10 JavaScript For 循环
document.write(cars[0] + “br”);
document.write(cars[1] + “br”);
document.write(cars[2] + “br”);
document.write(cars[3] + “br”);
document.write(cars[4] + “br”);
document.write(cars[5] + “br”);
不过通常我们这样写：
for (var i=0;i《cars .length;i++)
{
document.write(cars[i] + “br”);
}
For/In 循环
JavaScript for/in 语句循环遍历对象的属性：
实例
var person={fname:”John”,lname:”Doe”,age:25};
for (x in person)
{
txt=txt + person[x];
}
11.JavaScript While 循环
只要指定条件为 true，循环就可以一直执行代码。
实例
本例中的循环将继续运行，只要变量 i 小于 5：
while (i<5)
{
x=x + “The number is ” + i + “
”;
i++;
}
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
由于这个 if 语句只有一行代码，所以可以省略花括号：
for (i=0;i<10;i++)
{
if (i==3) break;
x=x + “The number is ” + i + “
”;
}
12.
JavaScript 错误 - Throw、Try 和 Catch
JS Break
JS 验证
try 语句测试代码块的错误。
catch 语句处理错误。
13.JavaScript 表单验证
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==”“)
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的代码：
html
head
script type=”text/javascript”

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==”“)
{alert(alerttxt);return false}
else {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=”submitpage.htm” onsubmit=”return validate_form(this)” method=”post”
Email: input type=”text” name=”email” size=”30”
input type=”submit” value=”Submit”
/form
/body
/html
14.JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
15.HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
实例
本例改变了 p 元素的内容：
html
body

p id=”p1”>Hello World! /p

script
document.getElementById(“p1”).innerHTML=”New text!”;
/script

/body
/html
16改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
实例
本例改变了 img 元素的 src 属性：
!DOCTYPE html
html
body

img id=”image” src=”smiley.gif”

script
document.getElementById(“image”).src=”landscape.jpg”;
/script

/body
/html