1
複製代碼 代碼如下://頁面中寫入html內容
document.write("<h1>Hello World!</h1>")
2複製代碼 代碼如下://為了防止不支援 JavaScript 的瀏覽器把js當作為頁面的內容來顯示
//注釋行末尾的兩個正斜杠是 JavaScript 的注釋符號,它會阻止 JavaScript 編譯器對這一行的編譯。
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
3複製代碼 代碼如下://onload事件的多種寫法
//第一種通過body標籤加入onload事件
<script type="text/javascript">
function message(){ alert("該提示框是通過 onload 事件調用的。");}
</script>
<body onload="message()">
//第二種直接用window函數調用onload事件
<script type="text/javascript" language="javascript">
window.onload=message;
function message(){ alert("該提示框是通過 onload 事件調用的。"); }
</script>
4
//JavaScript 放置的位置
當頁面載入時,會執行位於 body 部分的 JavaScript。(直接執行)
當被調用時,位於 head 部分的 JavaScript 才會被執行。
head 部分
包含函數的指令碼位於文檔的 head 部分。這樣我們就可以確保在調用函數前,指令碼已經載入了。
5.
//分號的作用
//分號是可選的(根據 JavaScript 標準),瀏覽器把行末作為語句的結尾,通過使用分號,可以在一行中寫多條語句。
6。
//JavaScript 變數名稱的規則:
變數對大小寫敏感(y 和 Y 是兩個不同的變數)
變數必須以字母或底線開始
7。
//變數的聲明
如果您所賦值的變數還未進行過聲明,該變數會自動聲明。
例:
x=5; carname="Volvo";
與後面的這些語句的效果相同:var x=5; var carname="Volvo";
8。
//比較子
運算子 描述 例子
=== 全等(值和類型) x===5 為 true; x==="5" 為 false
9。
//條件運算子(三目運算子)
JavaScript 還包含了基於某些條件對變數進行賦值的條件運算子。
name=("liuhuan"=="LH")?"劉歡":"歌星";
10。
//獲得當前系統時間(小時數)
var d = new Date()
var time = d.getHours()
11。
//隨機數
var num=Math.random();
產生的偽隨機數介於 0 和 1 之間(含 0,不含 1),也就是,傳回值可能為0,但總是小於1。在第一次載入 JScript 時隨機數發
生器自動產生 。
12。
//擷取今天的星期數(星期日為0,星期1-6為1-6)
var d = new Date()
theDay=d.getDay()
13。
//按鈕的觸發事件
<input type="button" onclick="disp_alert()" value="顯示警告框" />
14。
//彈出框內容換行
alert("再次向您問好!在這裡,我們向您示範" + '\n' + "如何向警告框添加折行。")
15.
//確認框(刪除方法)
//confirm("文本")
<script type="text/javascript">
function show_confirm()
{
var r=confirm("確認刪除?");
if (r==true) {
alert("刪除成功!");
}
else{
alert("刪除失敗!");
}
}
</script>
16.
//於使用者互動的彈出框(可輸入文字的提示框)
//prompt("文本","預設值")
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("請輸入您的名字","Bill Gates")
if (name!=null && name!=""){
document.write("你好!" + name + " 今天過得怎麼樣?")
}
}
</script>
17。
//帶有參數並傳回值的函數
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(6,5))
</script>
</body>
18。
//for迴圈 (本例中動態產生html中的h標籤)
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++){
document.write("<h" + i + ">這是標題 " + i)
document.write("</h" + i + ">")
}
</script>
</body>
19。
//break跳出語句
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
if (i==3){break}
document.write("數字是 " + i)
document.write("<br />")
}
</script>
<p>解釋:迴圈會在 i=3 時中斷。</p>
20。
//continue跳出語句
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
if (i==3){continue}
document.write("數字是 " + i)
document.write("<br />")
}
</script>
<p>解釋:當 i=3 時,會中斷迴圈,並從下一個值開始繼續迴圈。</p>
值為:01245678910
21。
//for in迴圈(相當於.net中的foreach迴圈)
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "寶馬"
mycars[1] = "平治"
mycars[2] = "賓利"
for (x in mycars)
{
document.write("x的值為"+x+ "<br />");
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
22。
//javascript事件
onload 某個頁面或映像被完成載入 //頁面載入
onunload 使用者退出頁面
onfocus 元素獲得焦點
onblur 元素失去焦點 //表單驗證
onchange 使用者改變域的內容
onreset 重設按鈕被點擊
onsubmit 提交按鈕被點擊 //用於在提交表單之前驗證所有的表單域。
例如:
(當使用者單擊表單中的確認按鈕時,checkForm() 函數就會被調用。checkForm() 函數的傳回值是 bool類型,如果傳回值為true,則
提交表單,反之取消提交。)
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onkeydown 某個鍵盤的鍵被按下
onkeypress 某個鍵盤的鍵被按下或按住 //鍵盤操作
onkeyup 某個鍵盤的鍵被鬆開
onclick 滑鼠點擊某個對象
ondblclick 滑鼠雙擊某個對象
onmousedown 某個滑鼠按鍵被按下 //滑鼠操作
onmousemove 滑鼠被移動
onmouseout 滑鼠從某元素移開
onmouseover 滑鼠被移到某元素之上
onmouseup 某個滑鼠按鍵被鬆開
onabort 映像載入被中斷
onerror 當載入文檔或映像時發生某個錯誤
onresize 視窗或架構被調整尺寸
onselect 文本被選定
23。
//js中的錯誤提示 err.description及其try...catch 語句
例如:
<script type="text/javascript">
var txt=""
function message(){
try{
adddlert("Welcome guest!")
}
catch(err){
txt="本頁中存在錯誤。\n\n"
txt+="錯誤描述:" + err.description + "\n\n"
txt+="點擊“確定”繼續。\n\n"
alert(txt);
}
}
</script>
24。
//帶有確認框的 try...catch 語句
<head>
<script type="text/javascript">
var txt=""
function message(){
try{
adddlert("Welcome guest!")
}
catch(err){
txt="本頁中存在錯誤。\n\n"
txt+="點擊“確定”繼續查看本頁,\n"
txt+="點擊“取消”返回首頁。\n\n"
if(!confirm(txt))
{
document.location.href="../index.html"
}
}
}
</script>
</head>
<body>
<input type="button" value="查看訊息" onclick="message()" />
</body>
25。
//建立 exception(異常或錯誤)。(配合try...catch語句使用)
例如:
<script type="text/javascript">
var x=prompt("請輸入 0 至 10 之間的數:","")
try{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er){
if(er=="Err1")
alert("錯誤!該值太大!")
if(er == "Err2")
alert("錯誤!該值太小!")
if(er == "Err3")
alert("錯誤!該值不是數字!")
}
</script>
26。
//return true和return true的用法
(它可以返回一個bool型的參數,繼續用於判斷)
function jiance(msg,url,l){
alert("你確定嗎?")
return true
}
function jieguo(){
if(jiance()){
alert("是");
}
else{
alert("否");
}
}
27.
//onerror 事件
<html><head>
<script type="text/javascript">
//當出現錯誤時觸發onerror事件
onerror=handleErr;
var txt=""
function handleErr(msg,url,l){
txt="本頁中存在錯誤。\n\n"
txt+="錯誤:" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行:" + l + "\n\n"
txt+="點擊“確定”繼續。\n\n"
alert(txt)
return true
}
function message(){
adddlert("確定嗎?")
}
</script>
</head><body>
<input type="button" value="查看訊息" onclick="message()" />
</body></html>
28。
//JavaScript 中使用反斜線來向文本字串添加特殊字元。
例如:
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
29。
//javascript注意事項
1。JavaScript 對大小寫敏感
2。JavaScript 會忽略多餘的空格
3。在編寫代碼時可以使用反斜線進行換行
例:
document.write("Hello \
World!");