[HTML]Tutorial—JavaScript in HTML
JavaScript：
JavaScript makes HTML pages more dynamic and interactive. JavaScript使HTML頁面具有更強的動態與互動性。
HTML Script Tags
| Tag | Description |
|---|---|
| <script> | Defines a client-side script |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
The HTML <script> Tag
The <script> tag is used to define a silent-side script (JavaScript).
<script>標籤用來定義客戶端指令碼（JavaScript）。
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
<script> 元素包含指令碼語句，或者通過src屬性指向外部指令碼檔案。
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. JavaScript常用來進行影象處理、表單驗證以及內容的動態變化。
To select an HTML element, JavaScript very often uses the document.getElementById() method. 如果要選擇一個HTML元素，JavaScript 經常使用 document.getElementById() 方法。
This JavaScript example writes “Hello JavaScript!” into an HTML element with id=“demo”: 這個 JavaScript 例子向id=“demo”的HTML元素寫入“Hello JavaScript!” 。
<!DOCTYPE html> A Taste of JavaScript
1.JavaScript can change HTML content
JavaScript可以改變HTML的內容
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
2.JavaScript can change HTML styles
JavaScript可以改變HTML的樣式
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
3.JavaScript can change HTML attributes
JavaScript可以改變HTML屬性
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
4.Click to display Time and Date.
點選以展示時間和日期。
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
The HTML <noscript> Tag
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripts:
在瀏覽器中有不可使用的指令碼或瀏覽器不支援客戶端指令碼時，<noscript> 標籤向用戶提供一個可替換的文字內容。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
</body>
</html>