【程式碼筆記】Web-Javascript-javascript簡介
阿新 • • 發佈：2018-11-12
一，效果圖。
二，程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 簡介</title>
<script type="text/javascript">
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<!--第一個javascript程式-->
<h1>我的第一個javascript程式</h1>
<p id="demo">這是一個段落</p>
<button type="button" onclick="displayDate()">顯示日期</button>
<!--JavaScript：直接寫入 HTML 輸出流-->
<script>
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落</p>");
</script>
<!--對事件的反應-->
<button type="button" onclick="alert('歡迎!')">點我!</button>
<!--改變 HTML 內容-->
<p id="demo">
JavaScript 能改變 HTML 元素的內容。
</p>
<script>
function myFunction() {
x = document.getElementById("demo"); // 找到元素
x.innerHTML = "Hello JavaScript!"; // 改變內容
}
</script>
<button type="button" onclick="myFunction()">點選這裡</button>
<!--改變 HTML 影象-->
<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>
<!--改變 HTML 樣式-->
<h1>我的第一段Javascript</h1>
<p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</p>
<input id="demo" type="text">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("demo").value;
if (x == "" || isNaN(x)) {
alert("不是數字");
};
}
</script>
<button type="button" onclick="myFunction()">點here</button>
</body>
</html>
參考資料：《菜鳥教程》