第一章：JavaScript基礎---（一）基礎語法
阿新 • • 發佈：2019-02-16
很渴望快速學習完成專案，不希望花費太多的時間來學習一門語言，雖然本文沒有詳細介紹特性但是以下
程式碼執行就足以理解JavaScript語法，觀察以下程式碼，複製到文字中用瀏覽器開啟。
JavaScript是大小寫敏感的， 這裡我們快速的瞭解它的語法
作為入門練習可以每個程式碼自行敲打一遍。
1：helloworld，我們寫的第一個例項
<script language="JavaScript">
document.write("Hello World!!!");
</script>2：對話方塊形式顯示helloworld 三種形式
3：with關鍵字用法 --簡化程式碼用<a href="JavaScript:alert('Hello World!!!')">請單擊</a> <a href="#" onclick="alert('Hello World!!!')">請單擊</a> <a href="JavaScript://" onclick="alert('Hello World!!!')">請單擊</a>
4：變數宣告，總是var 開頭開域語句,表示在with語句中的任何表示式的所屬物件或者是類都由with後緊跟的變數所代表 功能：為一段程式建立預設物件。簡化程式碼<br> <br>格式： <br>with (<物件>){ <br> <語句組> <br>｝ <Script> with (document) { write ("<br><Li>限時搶購物品："); write ("<Li>ViewSonic 17\" 顯示器。"); write ("<Li>EPSON 印表機。"); } document.write ("<br>---------------"); document.write ("<Li>限時搶購物品："); document.write ("<Li>ViewSonic 17\" 顯示器。"); document.write ("<Li>EPSON 印表機。"); </Script>
<br>JavaScript資料的表示：
<br>整數：由正負號、數字構成，八進位制、十進位制、十六進位制； <br>浮點數：由正負號、數字和小數點構成，常規記數法、科學記數法； <br>邏輯值：true、false <br>字串值：單引號、雙引號 <br>空值：null <br>未定義值：根本不存在的物件、已定義但沒有賦值的量； <br> <br> <script language="JavaScript"> var stdId; var total=3721; var notNull=true; var name="李小龍",sex="先生"; var i=j=0; var hobby=["聽音樂","看電影"]; hobby[2]="123"; var test; stdId = 2004007; document.write("變數stdId="+stdId+"<br>"); document.write("變數i="+i+"<br>"); document.write("變數j="+j+"<br>"); document.write("變數name="+name+"<br>"); document.write("變數sex="+sex+"<br>"); document.write("變數notNull="+notNull+"<br>"); document.write("變數hobby="+hobby+"<br>"); document.write("變數hobby[0]="+hobby[0]+"<br>"); document.write("變數hobby[1]="+hobby[1]+"<br>"); document.write("變數hobby[2]="+hobby[2]+"<br>"); document.write("變數hobby[3]="+hobby[3]+"<br>"); document.write("未賦值的變數test="+test+"<br>"); document.write("不存在的數值(0.0/0.0)="+(0.0/0.0)+"<br>"); var t1=1.7976931348623157E+10308 document.write("正數超出範圍的值"+t1) document.write("<br />") var t2=-1.7976931348623157E+10308 document.write("負數超出範圍的值"+t2) </script>
5：全域性變數宣告
<Script>
var langJS = "JavaScript"; //langJS是全域性變數
test();
function test() {
var langVBS = "VBScript"; //langVBS是區域性變數
document.write("<LI>" + langJS);
document.write("<LI>" + langVBS);
}
document.write("<LI>" + langJS);
document.write("<LI>" + langVBS);
</Script><script language="JavaScript">
var x = 11;
var y = 5;
with (document) {
write("x = 11, y = 5");
write("<LI>x + y 是 ", x + y);
write("<LI>x - y 是 ", x - y);
write("<LI>x * y 是 ", x * y);
write("<LI>x / y 是 ", x / y);
write("<LI>x % y 是 ", x % y);
write("<LI>++ x 是 ", ++ x);
write("<LI>-- y 是 ", -- y);
write("<LI>x 是 ", x);
write("<LI>y 是 ", y);
write("<LI>x-- 是 ", x--);
write("<LI>y-- 是 ", y--);
}
</script>7：++運算
<Script>
var x = y = 3;
with (document) {
write("y++=",(y++),"<br>");
write("++y=",(++y),"<br>");
write("x = 3, y = 5 <br>");
write("若x = y++ 運算之後：");
x = y++;//y→x，y+1→y
write("x 是 ", x, "; y 是 ", y, "<br>");
write("再作x = ++y 運算：");
x = ++y;//y+1→x，y+1→y
write("x 是 ", x, "; y 是 ", y);
}
</Script>
&& || !
例１：
<Script>
var t = true;
var f = false;
with(document) {
write("<OL><LI>true && true 的結果是 ", t && t);
write("<LI>true && false 的結果是 ", t && f);
write("<LI>false && true 的結果是 ", f && t);
write("<LI>false && false 的結果是 ", f && f);
write("<LI>true && (1==1) 的結果是 ", t && (1==1));
write("<LI>false && 'A' 的結果是 ", f && 'A');
write("<LI>'A' && false 的結果是 ", 'A' && f);
write("<LI>true && 'A' 的結果是 ", t && 'A');
write("<LI>'A' && true 的結果是 ", 'A' && t);
write("<LI>'A' && 'B' 的結果是 ", 'A' && 'B');
write("<LI>1 && 1 的結果是 ", 1 && 1);
write("<LI>1 && 0 的結果是 ", 1 && 0);
write("<LI>true && 0 的結果是 ", true && 0);
write("<LI>true && 1 的結果是 ", true && 1);
write("<LI>true && '0' 的結果是 ", true && '0');
//&&：有一個不是邏輯值，只要第一個運算元的值為flase，則返回第一個運算元的值flase，否則，返回第二個運算元的值
}
</Script><Script>
var t = true;
var f = false;
with(document) {
write("<OL><LI>true || true 的結果是 ", t || t);
write("<LI>true || false 的結果是 ", t || f);
write("<LI>false || true 的結果是 ", f || t);
write("<LI>false || false 的結果是 ", f || f);
write("<LI>true || (1==1) 的結果是 ", t || (1==1));
write("<LI>false || 'A' 的結果是 ", f || 'A');
write("<LI>'A' || false 的結果是 ", 'A' || f);
write("<LI>true || 'A' 的結果是 ", t || 'A');
write("<LI>'A' || true 的結果是 ", 'A' || t);
write("<LI>'A' || 'B' 的結果是 ", 'A' || 'B');
write("<LI>1 || 1 的結果是 ", 1 || 1);
write("<LI>1 || 0 的結果是 ", 1 || 0);
write("<LI>true || 0 的結果是 ", true || 0);
write("<LI>true || 1 的結果是 ", true || 1);
write("<LI>true || '0' 的結果是 ", true || '0');
//||：有一個不是邏輯值，只要第一個運算元為的值true、字元或非零的數字，則返回第一個運算元的值，否則，返回第二個運算元的值
}
</Script><Script>
with(document) {
write("<LI>!true 的結果是 ", !true);
write("<LI>!false 的結果是 ", !false);
write("<LI>!'A' 的結果是 ", !'A');
write("<LI>!0 的結果是 ", !0);
write("<LI>!1 的結果是 ", !1);
write("<LI>!2 的結果是 ", !2);
write("<LI>!'0' 的結果是 ", !'0');
write("<LI>!'1' 的結果是 ", !'1');
write("<LI>!-1 的結果是 ", !-1);
}
</Script>
12：this關鍵字 this通常指向的是我們正在執行的函式本身，或者是指向該函式所屬的物件
<Script>
function validate(obj) {
alert("你輸入的值是："+ obj.value);
} </Script>
請輸入任意字元：<BR>
<INPUT TYPE="text" onKeyup="validate(this)">
<BR>
當按鈕鬆開時執行指令碼 長按不會觸發<Script>
//forms 集合可返回對文件中所有 Form 物件的引用。
function showSex() {
onOroff = document.forms[0].sex[0].checked
status = (onOroff)? "帥哥" : "美女"
alert("Hello! " + status)
}
</Script>
請輸入你的性別：
<FORM >
<INPUT TYPE=radio NAME=sex onClick=showSex()>男生
<INPUT TYPE=radio NAME=sex onClick=showSex()>女生
</FORM>14：註釋語句
<Script>
//單行註釋
/*
多行註釋
*/
//例：
/***************************************
* 源 碼 之 家 *
* http://www.mycodes.net *
* 下載:http://www.mycodes.net *
* 論壇http://www.mycodes.net/bbs *
*****************************************/
</Script>
<Script>
var now = new Date();
var hour = now.getHours();
document.write(now);
document.write("<br>");
if (6 < hour && hour < 18)
document.write ("現在"+hour+"點是白天");
else
document.write ("現在"+hour+"點是晚上");
</Script>
<Script>
var now = new Date();
var day = now.getDay();
var dayName;
if (day == 0) dayName = "星期日";
else if (day == 1) dayName = "星期一";
else if (day == 2) dayName = "星期二";
else if (day == 3) dayName = "星期三";
else if (day == 4) dayName = "星期四";
else if (day == 5) dayName = "星期五";
else dayName = "星期六";
document.write ("今天是快樂的", dayName);
</Script><Script>
var i = 5;
while ( i > 0 ) {
document.write("i = " ,i ,"<BR>");
i--;
}
</Script>
<Script>
var i = 5;
do {
document.write("i = " ,i ,"<BR>");
i--;
} while ( i > 0 )
</Script>
<Script>
for ( var i = 5; i > 0; i-- ) {
document.write("i = " ,i ,"<BR>");
}
</Script><html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html><br>格式：
<br>
<br>for ( 變數 in 物件 ){
<br> <語句組>
<br>}
<br>
<br>例：
<br>
<Script>
function member(name, sex) {//建構函式member
this.name = name;
this.sex = sex;
}
function showProperty(obj, objString) {
var str = "";
for (var i in obj)
str += objString + "." + i + " = " + obj[i] + "<BR>";
return str;
}
papa = new member("楊巨集文", "男生");//建立物件例項papa
document.write(showProperty(papa, "papa"))
</Script>