2018/10/11 JAVAScript 學習第一天
目錄
作業完成彙報
- 課堂演示程式碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input {
height: 30px;
width: 60px;
}
</style>
<script type="text/javascript">
function sum() {
// 1 <!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function showText() {
var r = document.getElementById("t1").value;
document.getElementById("t1text").innerHTML = r;
}
</script>
</head>
<body>
<input type="text" id="t1">
<input type="button" value="click me" onclick="showText();" />
<hr/>
<h1 id="t1text">Click me</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
//
var status = 1;
function changeImg() {
if (status == 1) {
document.getElementById("bul").src = "http://www.w3school.com.cn/i/eg_bulboff.gif";
status = 0;
} else {
document.getElementById("bul").src = "http://www.w3school.com.cn/i/eg_bulbon.gif";
status = 1;
}
}
</script>
</head>
<body>
<img id="bul" src="http://www.w3school.com.cn/i/eg_bulbon.gif" onclick="changeImg();">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
function changeSize() {
var cv = document.getElementById("fs").value;
document.getElementById("zg").style.fontSize = cv + "px";
}
</script>
</head>
<body>
<select id="fs" onchange="changeSize();">
<option value="10">10px</option>
<option value="15">15px</option>
<option value="20">20px</option>
</select>
<hr>
<h1 id="zg">高磊</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 id="h">Hello</h1>
</body>
<script type="text/javascript">
document.getElementById("h").innerHTML = "Hi";
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 id="h">Hello</h1>
</body>
<script src="my.js"></script>
</html>
var i = 1;
alert(i);
document.getElementById("h").innerHTML = "Hi";
function t1() {
alert("t1");
}
- 問答題
JAVAScript發展歷史
1997 年，JavaScript 1.1 作為一個草案提交給歐洲計算機制造商協會（ECMA）。第 39 技術委員會（TC39）被委派來“標準化一個通用、跨平臺、中立於廠商的指令碼語言的語法和語義”(http://www.ecma-international.org/memento/TC39.htm)。由來自 Netscape、Sun、微軟、Borland 和其他一些對指令碼程式設計感興趣的公司的程式設計師組成的 TC39 錘鍊出了 ECMA-262，該標準定義了名為 ECMAScript 的全新指令碼語言。
在接下來的幾年裡，國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。
JAVAScript和java的區別
雖然JavaScript與Java有緊密的聯絡，但卻是兩個公司開發的不同的兩個產品。
Java是SUN公司推出的新一代面向物件的程式設計語言，特別適合於Internet 應用程式開發；而JavaScript是Netscape公司的產品，其目的是為
了擴充套件Netscape Navigator功能，而開發的一種可以嵌入Web頁面中的基於物件和事件驅動的解釋性語言，它的前身是Live Script；而Java的前身是Oak語言。
JAVAScript的程式碼格式規範有哪些
1、區域性變數命名才用駝峰式命名
2、如果是jQuery的變數使用$為字首
3、在for迴圈和if語句中左邊的大括號應該在行的結束位置,不應該單獨一行
4、在javascript中字串可以使用單引號與雙引號，但是建議是用單引號
5、合理的分號作為結束符
當有換行符（包括含有換行符的多行註釋）會自動加上分號
當有}時，如果缺少分號，會補分號
當程式原始碼結束時，如果缺少分號，會補分號
6、如果只有一行註釋就使用單行註釋，多行的就使用多行註釋
- 程式設計題
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<hr/>
<select id="select-1" onchange="cgcolour()">
<option value="red">紅色</option>
<option value="blue">藍色</option>
<option value="green">綠色</option>
</select>
<hr/>
<h1 id="h-1">20181011天氣晴</h1>
<script type="text/javascript">
function cgcolour() {
document.getElementById("h-1").style.color = document.getElementById("select-1").value;
}
</script>
<input type="text" id="input-1">
<input type="button" id="input-2" onclick="put();">
<script type="text/javascript">
function put() {
var x = document.getElementById("input-1").value;
console.log(x);
document.getElementById("h-1").style.fontSize = x + "px";
}
</script>
</body>
</html>
今日學習總結
JAVAScript程式碼編寫初學