JavaScript常用语句总结---来自W3School

来源：互联网发布：java json依赖包编辑：程序博客网时间：2024/05/23 12:07

JavaScript 参考手册：http://www.w3school.com.cn/js/js_reference.asp

写入 HTML 输出

使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph</p>");

对事件作出反应

<button type="button" onclick="alert('Welcome!')">点击这里</button>

改变 HTML 内容

x=document.getElementById("demo")  //查找元素x.innerHTML="Hello JavaScript";    //改变内容

改变 HTML 图像

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}

改变 HTML 样式

x=document.getElementById("demo")  //找到元素x.style.color="#ff0000";           //改变样式

验证输入

if isNaN(x) {alert("Not Numeric")};

JavaScript 函数

<!DOCTYPE html><html><head><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></head><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button></body></html>

JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \World!");

JavaScript 变量

var x=2;var y=3;var z=x+y;

字符串、数字、布尔、数组、对象、Null、Undefined

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

JavaScript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

对象属性有两种寻址方式：

实例

name=person.lastname;name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;person=null;

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;var x=      new Number;var y=      new Boolean;var cars=   new Array;var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

带有返回值的函数

在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：

function myFunction(a,b){if (a>b)  {  return;  }x=a+b}

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定 x=5，下面的表格解释了比较运算符：

运算符描述例子==等于x==8 为 false===全等（值和类型）x===5 为 true；x==="5" 为 false!=不等于x!=8 为 true>大于x>8 为 false<小于x<8 为 true>=大于或等于x>=8 为 false<=小于或等于x<=8 为 true

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符描述例子&&and(x < 10 && y > 1) 为 true||or(x==5 || y==5) 为 false!not!(x==y) 为 true

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2

break 语句用于跳出循环。

continue 用于跳到循环中的一个迭代。

JavaScript 抛出错误

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法

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

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

<!DOCTYPE html><html><head><script>var txt="";function message(){try  {  adddlert("Welcome guest!");  }catch(err)  {  txt="There was an error on this page.\n\n";  txt+="Error description: " + err.message + "\n\n";  txt+="Click OK to continue.\n\n";  alert(txt);  }}</script></head><body><input type="button" value="View message" onclick="message()"></body></html>

Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
实例
本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 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>
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}
}
}
下面是连同 HTML 表单的完整代码：
<html>
<head>
<script type="text/javascript">
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}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==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>

0 0