JavaScript學習——JavaScript基礎
JavaScript 簡介
JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可廣泛用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
JavaScript 很容易學習。
JavaScript是跨平臺的
JavaScript是依賴於瀏覽器本身的，與操作系統無關。
JavaScript是基於對象和事件驅動的(動態的)
它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它對用戶的響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁中執行了某種操作所產生的動作，就稱為“事件”。比如按下鼠標，移動窗口，選擇菜單等都可以視為事件。當事件發生後，可能會引起相應的事件響應。
JavaScript：直接寫入 HTML 輸出流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>
<p>
JavaScript 能夠直接寫入 HTML 輸出流中：
</p>
<scrip
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<p>
您只能在 HTML 輸出流中使用 <strong>document.write</strong>。
如果您在文檔已加載後使用它（比如在函數中），會覆蓋整個文檔。
</p>
</body>
</html>
JavaScript：對事件的反應
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javaScript</title> </head> <body> <h1>我的第一個 JavaScript</h1> <p> JavaScript 能夠對事件作出反應。比如對按鈕的點擊： </p> <button type="button" onclick="alert(‘歡迎!‘)">點我!</button> </body> </html>
alert() 函數在 JavaScript 中並不常用，但它對於代碼測試非常方便。
onclick 事件只是您即將在本教程中學到的眾多事件之一。
JavaScript：改變 HTML 內容
使用 JavaScript 來處理 HTML 內容是非常強大的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改變 HTML 元素的內容。 </p> <script> function dtt(){ d=document.getElemenById("demo"); // 找到元素 x.innerHTML="Hello JavaScriot!"; // 改變內容 } </script> <button type="button" onclick="dtt()">點擊這裏</button> </body> </html>
經常看到 document.getElementById("some id")。這個方法是 HTML DOM 中定義的。
DOM (Document Object Model)（文檔對象模型）是用於訪問 HTML 元素的正式 W3C 標準。
JavaScript：改變 HTML 圖像
本例會動態地改變 HTML <image> 的來源（src）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客園mtimeyu</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById(‘myimage‘)
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>點擊燈泡就可以打開或關閉這盞燈</p>
</body>
</html>
以上實例中代碼 element.src.match("bulbon") 的作用意思是：檢索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 裏面 src 屬性的值有沒有包含 bulbon 這個字符串，如果存在字符串 bulbon，圖片 src 更新為 bulboff.gif，若匹配不到 bulbon 字符串，src 則更新為 bulbon.gif
JavaScript 能夠改變任意 HTML 元素的大多數屬性，而不僅僅是圖片。
改變 HTML 元素的樣式，屬於改變 HTML 屬性的變種。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客園mtimeyu</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改變 HTML 元素的樣式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改變樣式
}
</script>
<button type="button" onclick="myFunction()">點擊這裏</button>
</body>
</html>
JavaScript 常用於驗證用戶的輸入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客園mtimeyu</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是數字");
}
}
</script>
<button type="button" onclick="myFunction()">點擊這裏</button>
</body>
</html>
簡單的介紹了JavaScript 的一些功能和用法 下一篇接著學習JavaScript的用的語法 語句 等等。
JavaScript學習——JavaScript基礎