2018/10/11渡課
目錄
一.將課堂演示的程式碼理解的敲出來，並正確執行。
二.完成程式設計作業：
a.要求：完成一個字型樣式設定功能的程式碼編寫,可以改變字型的大小和顏色。
b.提示：定義兩個select框分別表示字型大小和顏色,注意使用option中的value。
<!DOCTYPE html> <html> <head> <title></title> </head> <body align="center"> <input type="text" id="input-2" placeholder="請輸入英文顏色"> <input type="button" onclick="cgcolour();" value="變"> <script type="text/javascript"> function cgcolour() { var y = document.getElementById("input-2").value; document.getElementById("h-1").style.color = y; } </script> <hr/> <input type="text" id="input-1" placeholder="請輸入字型大小"> <input type="button" onclick="bgsize();" value="變"> <script type="text/javascript"> function bgsize() { var x = document.getElementById("input-1").value; document.getElementById("h-1").style.fontSize = x + "px"; } </script> <hr/> <h1 id="h-1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h1> </body> </html>
三.問答題
a.JavaScript的發展史?
Javascript是一種由Netscape的LiveScript發展而來的面向物件的客戶端指令碼語言，主要目的是為了解決伺服器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當時服務端需要對資料進行驗證，由於網路速度相當緩慢,只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了資料驗證的基本功能。
JavaScript 的正式名稱是 “ECMAScript”。這個標準由 ECMA 組織發展和維護。ECMA-262 是正式的 JavaScript 標準。這個標準基於 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 發明了這門語言，從 1996 年開始，已經出現在所有的 Netscape 和 Microsoft 瀏覽器中。ECMA-262 的開發始於 1996 年，在 1997 年 7 月，ECMA 會員大會採納了它的首個版本。
在 1998 年，該標準成為了國際 ISO 標準 (ISO/IEC 16262)。這個標準仍然處於發展之中。
在 2005年12月，ECMA釋出ECMA-357標準（ISO/IEC 22537）出臺，主要增加對擴充套件標記語言XML的有效支援。
b.JavaScript和Java的區別?
JavaScript 是一種嵌入式指令碼檔案，直接插入網頁，有瀏覽器一邊解釋一邊執行。
java 語言不一樣，他必須在JAVA虛擬機器上執行。而且事先需要進行編譯。
JAVA的語法規則比JavaScript要嚴格的多，功能要強大的多。
c.JavaScript的程式碼格式規範有哪些?
1.變數名
變數名推薦使用駝峰法來命名(camelCase):
firstName = “John”;
lastName = “Doe”;
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
2.空格與運算子
通常運算子 ( = + - * / ) 前後需要新增空格:
例項:
var x = y + z;
var values = [“Volvo”, “Saab”, “Fiat”];
3.程式碼縮排
通常使用 4 個空格符號來縮排程式碼塊：
函式:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Note 不推薦使用 TAB 鍵來縮排，因為不同編輯器 TAB 鍵的解析不一樣。
4.語句規則
簡單語句的通用規則:
一條語句通常以分號作為結束符。
例項:
var values = [“Volvo”, “Saab”, “Fiat”];
var person = {
firstName: “John”,
lastName: “Doe”,
age: 50,
eyeColor: “blue”
};
5.複雜語句的通用規則:
將左花括號放在第一行的結尾。
左花括號前新增一空格。
將右花括號獨立放在一行。
不要以分號結束一個複雜的宣告。
函式:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
迴圈:
for (i = 0; i < 5; i++) {
x += i;
}
條件語句:
if (time < 20) {
greeting = “Good day”;
} else {
greeting = “Good evening”;
}
6.物件規則
物件定義的規則:
將左花括號與類名放在同一行。
冒號與屬性值間有個空格。
字串使用雙引號，數字不需要。
最後一個屬性-值對後面不要新增逗號。
將右花括號獨立放在一行，並以分號作為結束符號。
例項:
var person = {
firstName: “John”,
lastName: “Doe”,
age: 50,
eyeColor: “blue”
};
短的物件程式碼可以直接寫成一行:
例項:
var person = {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”};
7,每行程式碼字元小於 80
為了便於閱讀每行字元建議小於數 80 個。
如果一個 JavaScript 語句超過了 80 個字元，建議在 運算子或者逗號後換行。
例項:
document.getElementById(“demo”).innerHTML =
“Hello Runoob.”;
嘗試一下 »
8.命名規則
一般很多程式碼語言的命名規則都是類似的，例如:
變數和函式為小駝峰法標識, 即除第一個單詞之外，其他單詞首字母大寫（ lowerCamelCase）
全域性變數為大寫 (UPPERCASE )
常量 (如 PI) 為大寫 (UPPERCASE )
變數命名你是否使用這幾種規則： hyp-hens, camelCase, 或 under_scores ?
9.HTML 和 CSS 的橫槓(-)字元:
HTML5 屬性可以以 data- (如：data-quantity, data-price) 作為字首。
CSS 使用 - 來連線屬性名 (font-size)。
Note - 通常在 JavaScript 中被認為是減法，所以不允許使用。
10.下劃線:
很多程式設計師比較喜歡使用下劃線(如：date_of_birth), 特別是在 SQL 資料庫中。
PHP 語言通常都使用下劃線。
帕斯卡拼寫法(PascalCase):
帕斯卡拼寫法(PascalCase) 在 C 語言中語言較多。
駝峰法：
JavaScript 中通常推薦使用駝峰法，jQuery 及其他 JavaScript 庫都使用駝峰法。
Note 變數名不要以 $ 作為開始標記，會與很多 JavaScript 庫衝突。
11.HTML 載入外部 JavaScript 檔案
使用簡潔的格式載入 JavaScript 檔案 ( type 屬性不是必須的):
使用 JavaScript 訪問 HTML 元素
一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。
以下兩個 JavaScript 語句會輸出不同結果:
例項
var obj = getElementById(“Demo”)
var obj = getElementById(“demo”)
嘗試一下 »
12.HTML 與 JavaScript 儘量使用相同的命名規則。
訪問 HTML(5) 程式碼規範。
副檔名
HTML 檔案字尾可以是 .html (或 .htm)。
CSS 檔案字尾是 .css 。
JavaScript 檔案字尾是 .js 。
使用小寫檔名
大多 Web 伺服器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 伺服器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統一的風格，我們建議統一使用小寫的檔名。