有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，
趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～
适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人
基础知识：HTML
JavaScript就这么回事1：基础知识
1 创建脚本块
<
script language
=
”JavaScript”
>
JavaScript code goes here
</
script
>
2 隐藏脚本代码
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
: document.write(“Hello”);
4
:
//
-->
5
:
</
script
>
在不支持JavaScript的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
1
:
<
noscript
>
2
: Hello to the non
-
JavaScript browser.
3
:
</
noscript
>
4 链接外部脚本文件
1
:
<
script language
=
”JavaScript” src
=
"
/”filename.js
"
”
></
script
>
5 注释脚本
1
:
//
This is a comment
2
: document.write(“Hello”);
//
This is a comment
3
:
/*
4: All of this5: is a comment
6: */
6 输出到浏览器
1
: document.write(“
<
strong
>
Hello
</
strong
>
”);
7 定义变量
1
:
var
myVariable
=
“some value”;
8 字符串相加
1
:
var
myString
=
“String1”
+
“String2”;
9 字符串搜索
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
:
var
myVariable
=
“Hello there”;
4
:
var
therePlace
=
myVariable.search(“there”);
5
: document.write(therePlace);
6
:
//
-->
7
:
</
script
>
10 字符串替换
1
: thisVar.replace(“Monday”,”Friday”);
11 格式化字串
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
:
var
myVariable
=
“Hello there”;
4
: document.write(myVariable.big()
+
“
<
br
/>
”);
5
: document.write(myVariable.blink()
+
“
<
br
/>
”);
6
: document.write(myVariable.bold()
+
“
<
br
/>
”);
7
: document.write(myVariable.fixed()
+
“
<
br
/>
”);
8
: document.write(myVariable.fontcolor(“red”)
+
“
<
br
/>
”);
9
: document.write(myVariable.fontsize(“18pt”)
+
“
<
br
/>
”);
10
: document.write(myVariable.italics()
+
“
<
br
/>
”);
11
: document.write(myVariable.small()
+
“
<
br
/>
”);
12
: document.write(myVariable.strike()
+
“
<
br
/>
”);
13
: document.write(myVariable.sub()
+
“
<
br
/>
”);
14
: document.write(myVariable.sup()
+
“
<
br
/>
”);
15
: document.write(myVariable.toLowerCase()
+
“
<
br
/>
”);
16
: document.write(myVariable.toUpperCase()
+
“
<
br
/>
”);
17
:
18
:
var
firstString
=
“My String”;
19
:
var
finalString
=
firstString.bold().toLowerCase().fontcolor(“red”);
20
:
//
-->
21
:
</
script
>
12 创建数组
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
:
var
myArray
=
new
Array(
5
);
4
: myArray[
0
]
=
“First Entry”;
5
: myArray[
1
]
=
“Second Entry”;
6
: myArray[
2
]
=
“Third Entry”;
7
: myArray[
3
]
=
“Fourth Entry”;
8
: myArray[
4
]
=
“Fifth Entry”;
9
:
var
anotherArray
=
new
Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10
:
//
-->
11
:
</
script
>
13 数组排序
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
:
var
myArray
=
new
Array(
5
);
4
: myArray[
0
]
=
“z”;
5
: myArray[
1
]
=
“c”;
6
: myArray[
2
]
=
“d”;
7
: myArray[
3
]
=
“a”;
8
: myArray[
4
]
=
“q”;
9
: document.write(myArray.sort());
10
:
//
-->
11
:
</
script
>
14 分割字符串
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
:
var
myVariable
=
“a,b,c,d”;
4
:
var
stringArray
=
myVariable.split(“,”);
5
: document.write(stringArray[
0
]);
6
: document.write(stringArray[
1
]);
7
: document.write(stringArray[
2
]);
8
: document.write(stringArray[
3
]);
9
:
//
-->
10
:
</
script
>
15 弹出警告信息
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
: window.alert(“Hello”);
4
:
//
-->
5
:
</
script
>
16 弹出确认框
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
:
var
result
=
window.confirm(“Click OK to
continue
”);
4
:
//
-->
5
:
</
script
>
17 定义函数
1
:
<
script language
=
”JavaScript”
>
2
:
<!--
3
:
function
multiple(number1,number2)
{ 4: var result = number1 * number2;5: return result;6: }
7
:
//
-->
8
:
</
script
>
18 调用JS函数
1:
<
a
href
=”#”
onClick
=”functionName()”
>
Link text
</
a
>
2:
<
a
href
="/”javascript:functionName"
()”
>
Link text
</
a
>
19 在页面加载完成后执行函数
1:
<
body
onLoad
=”functionName();”
>
2: Body of the page3:
</
body
>
20 条件判断
1
:
<
script
>
2
:
<!--
3
:
var
userChoice
=
window.confirm(“Choose OK or Cancel”);
4
:
var
result
=
(userChoice
==
true
)
?
“OK” : “Cancel”;
5
: document.write(result);
6
:
//
-->
7
:
</
script
>
21 指定次数循环
1
:
<
script
>
2
:
<!--
3
:
var
myArray
=
new
Array(
3
);
4
: myArray[
0
]
=
“Item
0
”;
5
: myArray[
1
]
=
“Item
1
”;
6
: myArray[
2
]
=
“Item
2
”;
7
:
for
(i
=
0
; i
<
myArray.length; i
++
)
{ 8: document.write(myArray[i] + “<br/>”);9: }
10
:
//
-->
11
:
</
script
>
22 设定将来执行
1
:
<
script
>
2
:
<!--
3
:
function
hello()
{ 4: window.alert(“Hello”);5: }
6
: window.setTimeout(“hello()”,
5000
);
7
:
//
-->
8
:
</
script
>
23 定时执行函数
1
:
<
script
>
2
:
<!--
3
:
function
hello()
{ 4: window.alert(“Hello”);5: window.setTimeout(“hello()”,5000);6: }
7
: window.setTimeout(“hello()”,
5000
);
8
:
//
-->
9
:
</
script
>
24 取消定时执行
1
:
<
script
>
2
:
<!--
3
:
function
hello()
{ 4: window.alert(“Hello”);5: }
6
:
var
myTimeout
=
window.setTimeout(“hello()”,
5000
);
7
: window.clearTimeout(myTimeout);
8
:
//
-->
9
:
</
script
>
25 在页面卸载时候执行函数
1:
<
body
onUnload
=”functionName();”
>
2: Body of the page3:
</
body
>
JavaScript就这么回事2：浏览器输出
26 访问document对象
1
:
<
script language
=
”JavaScript”
>
2
:
var
myURL
=
document.URL;
3
: window.alert(myURL);
4
:
</
script
>
27 动态输出HTML
1
:
<
script language
=
”JavaScript”
>
2
: document.write(“
<
p
>
Here’s some information about
this
document:
</
p
>
”);
3
: document.write(“
<
ul
>
”);
4
: document.write(“
<
li
>
Referring Document: “
+
document.referrer
+
“
</
li
>
”);
5
: document.write(“
<
li
>
Domain: “
+
document.domain
+
“
</
li
>
”);
6
: document.write(“
<
li
>
URL: “
+
document.URL
+
“
</
li
>
”);
7
: document.write(“
</
ul
>
”);
8
:
</
script
>
28 输出换行
1
: document.writeln(“
<
strong
>
a
</
strong
>
”);
2
: document.writeln(“b”);
29 输出日期
1
:
<
script language
=
”JavaScript”
>
2
:
var
thisDate
=
new
Date();
3
: document.write(thisDate.toString());
4
:
</
script
>
30 指定日期的时区
1
:
<
script language
=
”JavaScript”
>
2
:
var
myOffset
=
-
2
;
3
:
var
currentDate
=
new
Date();
4
:
var
userOffset
=
currentDate.getTimezoneOffset()
/
60
;
5
:
var
timeZoneDifference
=
userOffset
-
myOffset;
6
: currentDate.setHours(currentDate.getHours()
+
timeZoneDifference);
7
: document.write(“The time and date
in
Central Europe is: “
+
currentDate.toLocaleString());
8
:
</
script
>
31 设置日期输出格式
1
:
<
script language
=
”JavaScript”
>
2
:
var
thisDate
=
new
Date();
3
:
var
thisTimeString
=
thisDate.getHours()
+
“:”
+
thisDate.getMinutes();
4
:
var
thisDateString
=
thisDate.getFullYear()
+
“
/
”
+
thisDate.getMonth()
+
“
/
”
+
thisDate.getDate();
5
: document.write(thisTimeString
+
“ on “
+
thisDateString);
6
:
</
script
>
32 读取URL参数
1
:
<
script language
=
”JavaScript”
>
2
:
var
urlParts
=
document.URL.split(“
?
”);
3
:
var
parameterParts
=
urlParts[
1
].split(“
&
”);
4
:
for
(i
=
0
; i
<
parameterParts.length; i
++
)
{ 5: var pairParts = parameterParts[i].split(“=”);6: var pairName = pairParts[0];7: var pairValue = pairParts[1];8: document.write(pairName + “ ：“ +pairValue );9: }
10
:
</
script
>
你还以为HTML是无状态的么？
33 打开一个新的document对象
1
:
<
script language
=
”JavaScript”
>
2
:
function
newDocument()
{ 3: document.open();4: document.write(“<p>This is a New Document.</p>”);5: document.close();6: }
7
:
</
script
>
34 页面跳转
1
:
<
script language
=
”JavaScript”
>
2
: window.location
=
“http:
//
www.liu21st.com/”;
3
:
</
script
>
35 添加网页加载进度窗口
1:
<
html
>
2:
<
head
>
3:
<
script
language
='javaScript'
>
4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');5:
</
script
>
6:
<
title
>
The Main Page
</
title
>
7:
</
head
>
8:
<
body
onLoad
='placeHolder.close()'
>
9:
<
p
>
This is the main page
</
p
>
10:
</
body
>
11:
</
html
>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
