【054】◀▶ JavaScript 语法参考

---------------------------------------------------------------------------------------------------------

●·● 目录：

<I> If...Else 语句：
<II> Switch 语句：
<III> 弹出框：
<IV> Functions(函数)：
<V> For 循环：
<VI> While 循环：
<VII> Break & Continue：
<VIII> For...In：
<IX> Events(事件)：
<X> Try...Catch 语句：
<XI> Throw 语句：
<XII> 转义字符：

<I> 浏览器监测：
<II> Cookie：
<III> 表单验证：
<IV> 计时：
<V> 创建自己的 JavaScript 对象：
<VI> 动画：
<VII> 图像地图：
<VIII> 总结：

A1 ………… Date 对象
A2 ………… Array 对象
A3 ………… String 对象
A4 ………… Boolean 对象
A5 ………… Math 对象
A6 ………… Number 对象
A7 ………… RegExp 对象
A8 ………… Global properties and functions
A9 ………… Events 对象

JavaScript 函数(MSDN)：

G1 ………… alert 函数
G2 ………… typeof 函数
G3 ………… confirm 函数
G4 ………… document.write 函数
G5 ………… parseInt 函数

U1 ………… function 语句

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第O0个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● 写在前面：

1. 在写 JavaScript 代码的时候, 直接写在 <script></script> 里面即可,

Old examples has type="text/javascript" in the <script> tag. This is no longer required. JavaScript is the default scripting language in all modern browsers and in HTML5.

2. 若是想要操作一个 HTML 元素, 可以使用 document.getElementById(id) 方法来获取, 其中的 "id" 来决定是哪一个 HTML 元素.

<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

The JavaScript is placed at the bottom of the page to make sure it is executed after the <p> element is created.

3. JavaScript 可以写在一个 HTML 网页的 <body> 内部, 也可以写在 <head> 内部.

4. 调用外部文件, 扩展名为 .js, 将文件名称写在 "src" 属性中.

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

5. 在 JavaScript 中每个语句结束用分号 ";" 分隔, 但是不用的话也没错, 分隔会增加可读性.

6. JavaScript 是大小写敏感的的, 因此 getElementById 与 getElementbyID 是不同的.

7. 单行注释为：//. 多行注释为：/* */.

8. 所有变量的创建都是用关键词 "var" 实现的, 文本型的赋值用双引号或是单引号引起来, 数字类型的则不加引号.

　　如果重新声明一个 JavaScript 的变量(不赋值的情况下), 他将不会丢掉原来的值.

　　在函数里面声明的变量是局部变量, 在函数外面声明的变量为全局变量.

　　若一个变量没有声明, 则会在使用的时候自动声明为全局变量.

不声明变量可充当全局变量使用

 1 <html>
 2 <body>
 3 
 4 <script type="text/javascript">
 5 function exer()
 6 {
 7 text = "hello";　　//不声明变量, 当调用此函数之后, 会自动将其当成全局变量使用.(若不使用,则后面无法调用).
 8 var p = document.getElementById("nihao");
 9 p.innerHTML = text;
10 }
11 function exer2()　　//先点击 click 在点击 click2 会有效果, 但是单独点击 click2 是没有效果的.
12 {
13 var p = document.getElementById("nihao");
14 p.innerHTML = text + "2";　　//前面使用后, 此处便可以调用.
15 }
16 </script>
17 
18 <input type="button" value="click" onclick="exer()">
19 <input type="button" value="click2" onclick="exer2()">
20 <br/>
21 <p id="nihao">hihao</p>
22 
23 </body>
24 </html>

9. JavaScript 的数据类型包括 String, Number, Boolean, Array, Object, Null, Undefined.

　　为 String 变量赋值的时候, 可以是单引号, 其内部可以自由地加入双引号; 若变量由双引号覆盖, 则内部可以自由地加入单引号, 同时也可以用 "\" 放在单双引号的前面, 作为转义字符.

变量声明举例

 1 　　String：
 2 
 3 var answer1="He is called 'Johnny'";
 4 var answer2='He is called "Johnny"';
 5 var answer='It\'s alright';
 6 
 7 　　Number：
 8 
 9 var pi=3.14;
10 var x=34;
11 var y=123e5;    // 12300000
12 var z=123e-5;   // 0.00123
13 
14 　　Boolean：
15 
16 var x=true
17 var y=false
18 
19 　　Array：
20 
21 var cars=new Array();
22 cars[0]="Saab";
23 cars[1]="Volvo";
24 cars[2]="BMW";
25 
26 var cars=new Array("Saab","Volvo","BMW");
27 
28 var cars=["Saab","Volvo","BMW"];
29 
30 　　Object：
31 
32 var person={firstname:"John", lastname:"Doe", id:5566};
33 
34 var person={
35 firstname : "John",
36 lastname  : "Doe",
37 id        :  5566
38 };
39 
40 name=person.lastname;　　　　//调用方法一
41 name=person["lastname"];　　//调用方法二
42 
43 　　Null or Undefined：
44 
45 cars=null;
46 person=null;
47 
48 　　用 new 关键字声明变量：
49 
50 var carname=new String;
51 var x=      new Number;
52 var y=      new Boolean;
53 var cars=   new Array;
54 var person= new Object;

10. "===" 表示数值和类型都一样. "!==" 表示数值和类型都不一样.

x=5
x == "5"　　// true
x === "5"　　// false
x !="5"　　//false
x !== "5"　　//true

---------------------------------------------------------------------------------------------------------

            ╔═════════╗
╠════╣ 第O¼个    ╠══════════════════════════════════════════════════╣
            ╚═════════╝

●·● JavaScript 基础知识：

<I> If...Else 语句：

▷ w3school (英)：http://www.w3schools.com/js/js_if_else.asp　　

▷ w3school (中)：http://www.w3school.com.cn/js/js_if_else.asp

if statement - use this statement to execute some code only if a specified condition is true
if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false
if...else if....else statement - use this statement to select one of many blocks of code to be executed
switch statement - use this statement to select one of many blocks of code to be executed

<II> Switch 语句：

▷ w3school (英)：http://www.w3schools.com/js/js_switch.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_switch.asp

<III> 弹出框：

▷ w3school (英)：http://www.w3schools.com/js/js_popup.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_popup.asp

Alert Box - alert("sometext"); 只有"确定"按钮的弹出框.
Confirm Box - confirm("sometext"); 有"确定"和"取消"按钮的弹出框.
Prompt Box - prompt("sometext", "defaultvalue"); 有输入框, 第二个参数为输入框默认文本.

<IV> Functions(函数)：

▷ w3school (英)：http://www.w3schools.com/js/js_functions.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_functions.asp

function functionname(var1, var2)　　// function 语法, 括号内部为参数
{
　　some code
　　return x;　　　　//函数可以有返回值. 当想要退出函数的时候可以这样写 "return;" 即可.
}

<V> For 循环：

▷ w3school (英)：http://www.w3schools.com/js/js_loop_for.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_loop_for.asp

for - loops through a block of code a specified number of times
while - loops through a block of code while a specified condition is true

<VI> While 循环：

▷ w3school (英)：http://www.w3schools.com/js/js_loop_while.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_loop_while.asp

<VII> Break & Continue：

▷ w3school (英)：http://www.w3schools.com/js/js_break.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_break.asp

The break statement will break the loop and continue executing the code that follows after the loop (if any).
The continue statement will break the current iteration and continue the loop with the next value.

<VIII> For...In：

▷ w3school (英)：http://www.w3schools.com/js/js_loop_for_in.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_loop_for_in.asp

<IX> Events(事件)：

▷ w3school (英)：http://www.w3schools.com/js/js_events.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_events.asp

<button id="myBtn" onclick="displayDate()">Try it</button>　　　　　　　　//点击
<body onload="checkCookies()" />　　　　　　　　　　　　　　　　　　　　  //加载　　　　　
<input type="text" onchange="checkEmail()" />　　　　　　　　　　　　　　  //改变内容　　　　　　
<form method="post" action="mySubmit.asp" onsubmit="checkForm()">　　 //提交

document.getElementById("myBtn").onclick=function(){displayDate()};

<X> Try...Catch 语句：

▷ w3school (英)：http://www.w3schools.com/js/js_try_catch.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_try_catch.asp

try
  {
  　　//Run some code here
  }
catch(err)
  {
  　　//Handle errors here
  }

<XI> Throw 语句：

▷ w3school (英)：http://www.w3schools.com/js/js_throw.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_throw.asp

throw exception

<XII> 转义字符：

▷ w3school (英)：http://www.w3schools.com/js/js_special_characters.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_special_characters.asp

Code	Outputs
\'	single quote
\"	double quote
\\	backslash
\n	new line
\r	carriage return
\t	tab
\b	backspace
\f	form feed

---------------------------------------------------------------------------------------------------------

            ╔═════════╗
╠════╣ 第O½个    ╠══════════════════════════════════════════════════╣
            ╚═════════╝

●·● JavaScript 高级知识：

<I> 浏览器监测：

▷ w3school (英)：http://www.w3schools.com/js/js_browser.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_browser.asp

navigator 对象

appCodeName
appName
appVersion
cookieEnabled
platform
userAgent

<II> Cookie：

▷ w3school (英)：http://www.w3schools.com/js/js_cookies.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_cookies.asp

document.cookie

<III> 表单验证：

▷ w3school (英)：http://www.w3schools.com/js/js_form_validation.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_form_validation.asp

<IV> 计时：

▷ w3school (英)：http://www.w3schools.com/js/js_timing.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_timing.asp

setTimeout

var t1 = setTimeout("alert('5 秒！')",5000)
var t2 = setTimeout("document.getElementById('txt').value='2 秒'",2000)

function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

clearTimeout
```
clearTimeout(t)
```

<V> 创建自己的 JavaScript 对象：

▷ w3school (英)：http://www.w3schools.com/js/js_objects.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_objects.asp

<VI> 动画：

▷ w3school (中)：http://www.w3school.com.cn/js/js_animation.asp

<VII> 图像地图：

▷ w3school (中)：http://www.w3school.com.cn/js/js_image_maps.asp

<VIII> 总结：

▷ w3school (英)：http://www.w3schools.com/js/js_summary.asp

▷ w3school (中)：http://www.w3school.com.cn/js/js_summary.asp

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A1个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Date 对象：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

▷ MSDN：http://msdn.microsoft.com/zh-cn

1. 启用日期和时间的基本存储和检索。

2. date 对象方法：

getDate：使用当地时间，返回日期的月份值。
getDay：使用当地时间，返回天的星期值。
getFullYear：使用当地时间，返回的年份值。
getHours：使用当地时间，返回小时值。
getMilliseconds：使用当地时间，返回的毫秒值。
getMonth：使用当地时间，返回的月份值。
getSeconds：使用当地时间，返回的秒钟值。
getTime：返回在 Date 对象的时间值作为毫秒数自午夜 1970 年一月 1 日。
getYear：返回年份值。
setDate：使用当地时间，设置数值日期。
setFullYear：使用当地时间，将年份值。
setHours：使用当地时间，设置小时值。
setMilliseconds：使用当地时间，设置毫秒值。
setMinutes：使用当地时间，设置分钟值。
setMonth：使用当地时间，将月份值。
setSeconds：使用当地时间，设置秒钟值。
setTime：将 Date 对象的日期和时间值。
toDateString：返回日期作为字符串值。
toLocaleString：返回对象转换为字符串使用当前区域设置。
toLocaleTimeString：返回时间以字符串值对应于宿主环境的当前区域设置。
toString：返回对象的字符串表示形式。
toTimeString：返回时间作为字符串值。
valueOf：返回指定对象的原始值。

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A2个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Array 对象：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

▷ MSDN：http://msdn.microsoft.com/zh-cn

1. 提供对数组的支持创建任何数据类型。

2. array 对象属性：

length：返回数组中所定义的最高位最高的元素是一个的整数值。

3. array 对象方法：

concat：返回由两个数组组合新数组。
forEach：调用每个元素的已定义的回调函数在数组。
indexOf：返回一个值的第一个匹配项在数组中的索引。
join：返回由数组的所有元素 String 对象联接在一起。
lastIndexOf：返回指定值的最后出现在数组中的索引。
pop：从数组中移除最后一个元素并将其返回。
push：追加新元素为数组，并返回数组的新长度。
reverse：返回一个反转的元素 Array 对象。
shift：从数组中移除第一个元素并将其返回。
slice(start, [end])：返回数组的一部分。
sort：返回与排序的元素 Array 对象。
splice：从数组中移除元素，并且，如果需要，在中，插入新元素在它们的位置，并返回所移除的元素。
unshift：数组中开始插入新元素。

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A3个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● String 对象：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

▷ MSDN：http://msdn.microsoft.com/zh-cn

1. 允许操作和格式化文本字符串和子字符串的确定和定位字符串中的。

2. string 对象属性：

length：返回 String 对象的长度。

3. string 对象方法：

anchor (name)：将具有 name 特性中的文本周围的 HTML 定位点。
big ：在文本周围的 <用> 了 HTML 标记。
blink ：在文本周围的 <闪烁> 了 HTML 标记。 <闪烁> 标记在 Internet Explorer 中不支持。
bold：在文本周围的 <B> 了 HTML 标记。
fixed ：在文本周围的 <TT> 了 HTML 标记。
fontcolor (color)与一颜色属性的 <字体> 了 HTML 标记在文本周围。
fontsize (size)：与范围属性的 <字体> 了 HTML 标记在文本周围。
italics ：在文本周围的 <我> 了 HTML 标记。
link (href)：将 HREF 特性中的文本周围的 HTML 定位点。
small ：在文本周围的 <小> 了 HTML 标记。
strike ：在文本周围的 <STRIKE> 了 HTML 标记。
sub ：在文本周围的 <下标> 了 HTML 标记。
sup ：在文本周围的 <sup> 了 HTML 标记。
charAt：返回指定索引位置处的字符。
concat：返回由所提供的两个字符串串联而成的字符串。
indexOf：返回子字符串第一次出现在字符串中的字符位置。
lastIndexOf：返回一个子字符串的最后出现在字符串中。
localeCompare：返回一个值两个字符串是否等效在当前区域设置。
replace：返回一个字符串的副本以及使用正则表达式或搜索字符串替换文本的。
search：返回第一个子字符串匹配项的位置。正则表达式搜索。
slice(start, [end])：返回字符串的一部分。
split：返回结果字符串数组，其中字符串拆分为若干子时。
substr：在指定的位置返回子字符串开头和具有指定的长度。
substring：在 String 对象中的指定位置返回该子字符串。
toLocaleLowerCase：返回对象转换为字符串，则使用当前区域设置。
toLocaleUpperCase：返回所有字母都被转换为大写的字符串，请考虑到宿主环境的当前区域设置。
toLowerCase：返回所有字母都被转换为小写的字符串。
toString：返回对象的字符串表示形式。
toUpperCase：返回所有字母都被转换为大写的字符串。
trim：返回指定对象的原始值。

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A4个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Boolean 对象：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A5个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Math 对象：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A6个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Number 对象：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A7个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● RegExp 对象：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A8个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Global properties and functions：

▷ w3school (英)：http://www.w3schools.com

▷ w3school (中)：http://www.w3school.com.cn

1. 全局属性和函数可用于所有内建的 JavaScript 对象, 都是可以直接用的, 因为是全局的。

2. 顶层函数(全局函数)：

encodeURI()：把字符串编码为 URI。→ 会把一些汉字编码.
decodeURI()：解码某个编码的 URI。
encodeURIComponent()：把字符串编码为 URI 组件。
decodeURIComponent()：解码一个编码的 URI 组件。
escape()：对字符串进行编码。→ 会把所有字符都编码.
unescape()：对由 escape() 编码的字符串进行解码。
eval()：计算 JavaScript 字符串，并把它作为脚本代码来执行。
getClass()：返回一个 JavaObject 的 JavaClass。
isFinite()：检查某个值是否为有穷大的数。
isNaN()：检查某个值是否是数字。
Number()：把对象的值转换为数字。
parseFloat()：解析一个字符串并返回一个浮点数。
parseInt()：解析一个字符串并返回一个整数。
String()：把对象的值转换为字符串。

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A9个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Events 对象：

▷ w3school (中)：http://www.w3school.com.cn

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第G1个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● alert 函数：

参考：JavaScript alert()函数详细使用说明

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第G2个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● typeof 函数：

参考：Javascript typeof 用法

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第G3个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● confirm 函数：

参考：JavaScript confirm应用实例

result = confirm("我是提示信息");
alert("你点击的结果是"+result);

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第G4个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● document.write 函数：

参考：document.write()

document.write("big的效果".big());
document.write("<br>bold的效果".bold());
document.write("<br>fontsize=5的效果".fontsize("5"));
document.write("<br>A的Unicode编码是"+"A".charCodeAt(0));
document.write("<br>Unicode编码为70的字符是"+String.fromCharCode(70));
document.write("<br>Test toLowerCase".toLowerCase());
document.write("<br>Test toUpperCase".toUpperCase());

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第G5个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● prompt 函数：

参考：JavaScript 弹出框prompt例子

intA = prompt("请输入第一个数字","");
intB = prompt("请输入第二个数字",27);
document.write("你输入的第一个数字是"+intA);
document.write("<br>你输入的第二个数字是"+intB);
document.write("<br>两者和是"+(parseInt(intA)+parseInt(intB)));

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第G6个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● parseInt 函数：

1. 返回从字符串转换得到的整数。

parseInt("abc")     // Returns NaN.
parseInt("12abc")   // Returns 12.

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第U1个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● function 语句：

1. 声明一个新函数。

function functionname ([arg1 [, arg2 [,...[, argN]]]]) {
    statements
}

posted on 2012-06-28 11:24 McDelfino 阅读(462) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）

alex_bn_lee

导航

公告

统计

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (1762)

随笔档案 (1207)

相册 (9)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

【054】◀▶ JavaScript 语法参考

●·● 目录：

●·● 写在前面：

●·● JavaScript 基础知识：

●·● JavaScript 高级知识：

●·● Date 对象：

●·● Array 对象：

●·● String 对象：

●·● Boolean 对象：

●·● Math 对象：

●·● Number 对象：

●·● RegExp 对象：

●·● Global properties and functions：

●·● Events 对象：

●·● alert 函数：

●·● typeof 函数：

●·● confirm 函数：

●·● document.write 函数：

●·● prompt 函数：

●·● parseInt 函数：

●·● function 语句：