javascript編程基礎1
1，javascript能幹什麽？
直接寫入html中：
<script> document.write("<h1>這是一級標題</h1>") //輸出加大加黑的文本 </script>
可以定義某個頁面對事件的反應：
<body> <button type="button" onclick="alert(‘歡迎!‘)">點我!</button> //點擊以後出現提示窗口，提示：歡迎！ </body>
改變html本頁的某些內容：
<body> <p id="demo"> JavaScript 能改變 HTML 元素的內容。</p> <script> function myFunction() { x=document.getElementById("demo"); // 函數首先獲得元素 x.innerHTML="Hello JavaScript!"; // 然後函數把該元素的文本換一下，編程hello javascript } </script> <button type="button" onclick="myFunction()">點擊這裏</button> //定義了一個按鈕，一點擊就運行函數，然後改變id=demo的元素的內容 </body>
<button onclick="this.innerHTML=Date()">現在的時間是?</button> //定義了一個按鈕，按下會改變自己按鈕上的內容，註意this
改變html圖像：
<script> function changeImage() { element=document.getElementById(‘myimage‘) //獲取id，確定要對哪個元素下手 if (element.src.match("bulbon")) //獲取元素src屬性，這個屬性相當於文件的url，如果從src屬性中匹配到‘bulbon’，那就用bulboff這張圖 { element.src="/images/pic_bulboff.gif"; } else //如果匹配不到，那就用bulbon這張圖{ element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
親測有效，厲害了！註意，當改動了圖以後，圖像的src屬性也改了，所以再次點擊，會再一次變換圖片
js可以改變html樣式：
<body> <p id="demo"> JavaScript 能改變 HTML 元素的樣式。 </p> //今天改的就是你了 <script> function myFunction() { x=document.getElementById("demo") // 找到元素，此時x相當於id=”demo“的元素 x.style.color="#ff0000"; // 改變樣式，改變該樣式style中的color屬性，註意，用句號連接。 } </script> <button type="button" onclick="myFunction()">點擊這裏</button> //設置觸發事件 </body>
可以驗證輸入：
<body> <h1>我的第一段 JavaScript</h1> <p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</p> <input id="demo" type="text"> //這是接收用戶輸入的文本框 <script> function myFunction() { var x=document.getElementById("demo").value; //獲得id="demo”的文本框的內容，註意後綴的：.value 語句，不僅僅是或者某個id的位置 if(x==""||isNaN(x)) //註意，||和shell編程一樣，表示or，如果x為空或者x不是數字 { alert("不是數字"); //用單獨的浮動窗口提示：不是數字 } } </script> <button type="button" onclick="myFunction()">點擊這裏</button> //按鈕激發事件 </body>
2，用法規則
HTML 中的腳本必須位於 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。javascript也可以被放在外部，用的時候指定它是外來的就行了
外部js程序示例：
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> //親測有效，灰常厲害，src表示文件的url </body> </html>
事件就是某個操作執行時候，我們可以激發我們的程序。比如，點擊的時候
js輸出數據的方式：
- 使用 window.alert() 彈出警告框。實際上單用alert也行。
- 使用 document.write() 方法將內容寫到 HTML 文檔中。
- document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素
- innerHTML = "xxx" 是用於修改元素的 HTML 內容
- 使用 innerHTML 寫入到 HTML 元素。比如：<script> document.write(Date());</script> 直接輸出中國時區的時間。
- 使用 console.log() 寫入到瀏覽器的控制臺，chrome中，控制臺為shift+ctrl+j，打開以後能看到：11
js字面量：一般固定值成為字面量，整數、小數、科學計數，字符串，數組，對象，函數。
js的一些重要關鍵字：
以下是 JavaScript 中最??重要的保留字（按字母順序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | wit |
js註釋：
單行註釋：//，//後面的內容就不會再執行了
多行註釋：/* */，被註釋的行和塊就不會再執行了。
3，變量
js中變量一般是可變的，字面量是一個值。
js中聲明變量就像這樣： 變量必須以字母開頭（$和_可用於標誌特殊變量），對大小寫敏感，使用關鍵字var來聲明變量
var x=2; //也可以只聲明不賦值，比如：var carname; 變量 carname 的值將是 undefined：
var y=3;
var z=x+y; //第一次聲明的時候使用var，往後就不用了
var name="Gates", age=56, job="CEO";
//一下子聲明很多變量也是可以的，也支持重新聲明變量
//如果您把值賦給尚未聲明的變量，不管是在函數內部還是腳本內部，該變量將被自動作為全局變量聲明。
js常用的變量類型：數字和字符串，文本外要加單雙引號，數字不用加引號
<p id="demo"></p>
<script> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
</script>
// 創建了名為 carname 的變量，向其賦值 "Volvo"，然後把它放入 id="demo" 的 HTML 段落
註意：一個好的編程習慣是，在代碼開始處，統一對需要的變量進行聲明
4，js數據類型
字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。
JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型
var x // x 為 undefined var x = 6; // x 為數字 var x = "Bill"; // x 為字符串
- js字符串和一般字符串一樣的，不多說。學名：String
- js只有一種數字類型，帶不帶小數點都可以，支持科學計數法。學名：Number
- js布爾值，ture和false，學名：Boolean
- js數組和php數組差不多，學名：Array
var cars=new Array(); //聲明一個變量cars，用”new“表明了類型，是數組。實際上相當於實例化一個class cars[0]="Audi"; //然後開始向數組中加數據，註意js中的數組的下標從0開始 cars[1]="BMW"; cars[2]="Volvo";
var cars=["Saab","Volvo","BMW"]; //這樣創建數組也可以，它按照下標來說事，叫：literal array
- js的Undefined數據類型就是聲明了但是未賦值，所以它不含有值。
- js的變量Null表示空，可以通過將變量的值設置為 null 來清空變量。
- js對象（Object）：對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔，花括號內部空行和折行都沒關系
<script>
var person={ //屬性名稱和值用冒號分隔，屬性和屬性用逗號分隔。
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />"); //對象屬性有兩種尋址方式，對象.屬性 這種方法我比較喜歡
document.write(person["lastname"] + "<br />");
</script>
//訪問對象屬性：語法：objectName.propertyName
//訪問對象方法：語法：objectName.methodName()
聲明變量類型：
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
5，js對象object
JavaScript 對象是擁有屬性和方法的數據。js中，幾乎所有的事物都是對象。js中對象是變量的容器。js對象是屬性和方法的容器。
對象定義：
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566, //前三個是對象的屬性
fullName : function() //這個定義了對象的方法，註意格式，
{
return this.firstName + " " + this.lastName; //對象的fullName方法會把firstname和lastname加起來返回。”this“估計是約等於python中的self
}
};
document.getElementById("demo").innerHTML = person.fullName(); //向id等於demo的元素輸出fullName結果。
</script>
//訪問對象屬性：name=person.lastName; 或者 name=person["lastName"]
//訪問對象的方法：name=person.fullName(); 括號必不可少
寫法類似於python中的字典，php中的關聯數組
6 函數
函數可以應用在網頁的html語言上，無縫銜接，比較重要
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!"); //函數打印”hello world"
}
</script>
</head>
<body>
<button onclick="myFunction()">點擊這裏</button> //定義了一個按鈕，點擊的時候執行函數，通過提示窗口的方式顯示函數執行結果
</body>
</html>
函數可以帶參數：
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
<button onclick="myFunction(‘Bill Gates‘,‘CEO‘)">點擊這裏</button> //按鈕中傳參進去
函數可以return
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3); //這句話在<script>內，在函數定義之外
註意：return在函數中也有break的作用，return以後，函數停止，返回結果，如果函數以外還有命令，則繼續執行其他命令，僅僅希望退出函數的時候也可以使用return語句，後面不要加返回值。
function myFunction(a,b) { if (a>b) { return; //如果a>b那就退出函數 } x=a+b }
註意：
函數外聲明的是全局變量，函數內部聲明的變量是局部變量，只有函數內部可以訪問。局部變量只作用於函數內，所以不同的函數可以使用相同名稱的變量。局部變量在函數開始執行時創建，函數執行完後局部變量會自動銷毀。
如果把值賦給尚未聲明的變量，該變量將被自動作為 window 的一個屬性。也就是全局變量。（全局變量，在函數外聲明並且賦值的變量，函數內部沒有聲明直接賦值的變量，js中的全局變量都是window變量，都可以用window.globalname; 來訪問。）
7，事件
HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。事件可以是用戶的或者是瀏覽器的行為。
事件實例：
- HTML 頁面完成加載
- HTML input 字段改變時
- HTML 按鈕被點擊
常見的html事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點擊 HTML 元素 |
| onmouseover | 用戶在一個HTML元素上移動鼠標 |
| onmouseout | 用戶從一個HTML元素上移開鼠標 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的加載 |
js可以做什麽？
事件可以用於處理表單驗證，用戶輸入，用戶行為及瀏覽器動作:
- 頁面加載時觸發事件
- 頁面關閉時觸發事件
- 用戶點擊按鈕執行動作
- 驗證用戶輸入內容的合法性
8 字符串（此處說的是純字符串，不是字符串對象，字符串對象如:var name= new String("john"）可以理解為創建了一個字符串實例）
字符串支持索引：
var carname="hello world"; var character=carname[7]; //取到o，字符串的索引是從0開始 var a="it \‘ s alright"; //得到：it‘s alright,轉義符號不見了，而且轉單引號就得到單引號，轉雙引號得到雙引號。當要字符串內包含的引號和外部沖突了，可以轉義
var slen=carname.length; //得到11，空格也算一個字符
字符串中如果需要下列字符，那請先轉義：
| 代碼 | 需要的符號 |
|---|---|
| \‘ | 單引號 |
| \" | 雙引號 |
| \\ | 反斜杠 |
| \n | 換行 |
| \r | 回車 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 換頁符 |
註意：
我們也可以使用 new 關鍵字將字符串定義為一個對象：
var x = "John"; var y = new String("John"); typeof x // 返回 String，註意typeof,相當於pythonn中的type（） typeof y // 返回 Object //註意： var x = "John"; var y = new String("John"); (x === y) // 結果為 false，因為 x 是字符串，y 是對象，這兩者不同
9 運算符
等於號賦值，加號合並字符串或者累加數字。
算術運算符：y=5
| 運算符 | 描述 | 例子 | 結果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 減 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除，不是地板除哦 | x=y/2 | x=2.5 |
| % | 求余數 (保留整數) | x=y%2 | x=1 |
| ++ | 累加,可理解為x=y+1 | x=++y | x=6 |
| -- | 遞減，可理解為x=y-1 | x=--y | x=4 |
賦值運算符：
x=10,y=5
| 運算符 | 例子 | 等價於 | 結果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
字符串合並：
+
順便說一句：x=5 + "5" 得到”55“，數字與字符串相加，結果將成為字符串！要註意，不然以後要犯錯的。
順便說一句：document.write(x) ,在js中是原地直接打印輸出的意思
比較運算符
假設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 為 tr |
邏輯運算符
假定x=6，y=3，和shell編程裏運算符差不多
| 運算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 為 true |
| || | or | (x==5 || y==5) 為 false |
| ! | not | !(x==y) 為 true |
and 和or別混了，老鐵！
條件運算符（個人覺得這更像是if條件的特殊寫法）
greeting=(visitor=="PRES")?"Dear President ":"Dear "; //visitor等於“PRES”嗎？如果是的話，greeting等於"Dear President",不是的話，greeting等於"Dear"
9，條件運算符
if...else...
<!DOCTYPE html>
<html>
<body>
<p>點擊這個按鈕，獲得基於時間的問候。</p>
<button onclick="myFunction()">點擊這裏</button> //定制一個網頁上的按鈕，按下的時候會運行頁面底部的函數
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours(); //new 運算符是用來實例化一個類，所以Date（）是一個內部定義好了的類，getHours（）是一個方法
if (time<20) //註意格式，花括號在下一行，上括號和下括號都單獨占一行，和php不同，php上括號頂著function寫
{
x="Good day";
}
else // if ...else if...else...格式都是一樣的
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
還有個語句叫if...else if...else...,寫法是一樣的。
switch基於不同的條件來執行不同的動作
<!DOCTYPE html> <html> <body>
<button onclick="myFunction()">點擊這裏</button> <p id="demo"></p> <script> function myFunction() { var x; //聲明一個變量，沒有被賦值 var d=new Date().getDay(); //實例化一個Date對象，並且使用其getDay（）的方法，賦值給d。 switch (d) //按照d的值來決定執行哪個case語句，今天是周天，sunday在這裏是0，所以會執行第一個case語句 { case 0: x="Today it‘s Sunday"; //在這裏x被賦值 break; case 1: x="Today it‘s Monday"; break; case 2: x="Today it‘s Tuesday"; break; case 3: x="Today it‘s Wednesday"; break; case 4: x="Today it‘s Thursday"; break; case 5: x="Today it‘s Friday"; break; case 6: x="Today it‘s Saturday"; break; } document.getElementById("demo").innerHTML=x; //x的值將會在指定的id=demo的位置輸出 } </script> </body> </html>
需要註意的是default： default 關鍵詞來規定匹配不存在時做的事情，約等於else
<html>
<body>
<button onclick="myFunction()">點擊這裏</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay(); //實例，獲取當前的星期數
switch (d) //把星期數作為判斷執行哪個語句的標準，
{
case 6: //這個語句會在d等於6的時候執行
x="Today it‘s Saturday";
break;
case 0: //這個語句會在d等於0的時候執行
x="Today it‘s Sunday";
break;
default: //這個語句會在d不等於6和0的時候執行，作用類似於條件判斷語句中的else。
x="Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
for循環叠代
循環i
<!DOCTYPE html>
<html>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++) //叠代i，從i=0一直叠代到小於cars.length,每次加1。括號內的條件判斷語句可以省略，但是分號不可以省略
{
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>
循環數組：
<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) //註意，此處叠代的是person的值，不是鍵，這和php不一樣
{
txt=txt + " "+person[x];
}
document.getElementById("demo").innerHTML=txt; // 返回：Bill Gates 56
}
</script>
while循環
<script>
function myFunction()
{
var x="",i=0;
while (i<5) //註意格式就可以了
{
x=x + "The number is " + i + "<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>
do...while循環實際上和while循環差不多，只不過判定語句在執行以後
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
註意別寫無限循環就行了
10，循環控制語句：
break 語句用於跳出循環。
for (i=0;i<10;i++)
{
if (i==3) //if和x=x+...這一句是平級的，i==3的時候，跳出的循環是for循環，if是條件判斷，不屬於循環，謹記
{
break;
} //if語句可以簡寫：if (i==3) break; 註意，php和js條件語句後面不加分號這一點是一樣的。
x=x + "The number is " + i + "<br>";
}
continue 用於跳過循環中的一個叠代。
for (i=0;i<=10;i++)
{
if (i==3) continue; //i==3的時候，就不打印x了，直接調到for語句，i++變成4
x=x + "The number is " + i + "<br>";
}
break在js中還有一個用，指定跳出一個標簽，就是指定停止一個東西的意思
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
//結果是：cars[0],cars[1],cars[2]可以被打印出來，break list；以後的語句不會被執行。
11，錯誤
try 語句允許我們定義在執行時進行錯誤測試的代碼塊。
catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
try
{
//在這裏運行代碼
}
catch(err)
{
//在這裏處理錯誤
}
//類似於python中的try...excet...
throw 語句允許我們創建自定義錯誤。
正確的技術術語是：創建或拋出異常（exception）。
<!DOCTYPE html>
<html>
<body>
<script> //這個例子好好看一下，灰常值得學習
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值為空";
if(isNaN(x)) throw "不是數字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err) //如果try有問題，那就從‘mess’處得到值
{
var y=document.getElementById("mess");
y.innerHTML="錯誤：" + err + "。";
}
}
</script>
<h1>我的第一個 JavaScript 程序</h1>
<p>請輸入 5 到 10 之間的數字：</p>
<input id="demo" type="text"> //定義了一個文本框，id是‘demo’，類型是text，js通過getElementById（)賦值給x
<button type="button" onclick="myFunction()">測試輸入值</button> //定義一個按鈕，按下的時候執行函數
<p id="mess"></p>
</body>
</html>
javascript編程基礎1