1.JS簡介
JavaScript 是 Web 的編程語言，所有現代的 HTML 頁面都使用 JavaScript，
JavaScript 是 web 開發人員必須學習的 3 門語言中的一門：
- HTML 定義了網頁的內容
- CSS 描述了網頁的布局
- JavaScript 網頁的行為
JavaScript 是互聯網上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備，
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言，
JavaScript 是可插入 HTML 頁面的編程代碼，
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS簡單學習</title>
<script>
function displayDate() {
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一個JavaScript程式！！！</h1>
<p id="demo">這是一個段落</p>
<button type="button" onclick="displayDate()">顯示日期</button>
</body>
</html>
2.JS的用法簡介
HTML 中的腳本必須位于 <script> 與 </script> 標簽之間，腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中，
如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標簽，
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束，<script> 和 </script> 之間的代碼行包含了 JavaScript，
通常，我們需要在某個事件發生時執行代碼，比如當用戶點擊按鈕時，
如果我們把 JavaScript 代碼放入函式中，就可以在事件發生時呼叫該函式，
主要有以下三種方式：👇👇👇
2.1 <head> 中的 JavaScript 函式（包含 <script> 標簽）
2.2 <body> 中的 JavaScript 函式（包含 <script> 標簽）
2.3 外部的 JavaScript（外部腳本不能包含 <script> 標簽）
3.初學JS的簡單實體
實體一：JavaScript直接寫入 HTML 輸出流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS簡單學習</title>
</head>
<body>
<p>JavaScript能夠直接寫入HTML輸出流中：</p>
<script>
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落</p>");
</script>
<p>
您只能在 HTML 輸出流中使用 <strong>document.write</strong>，
如果您在檔案已加載后使用它（比如在函式中），會覆寫整個檔案，
</p>
</body>
</html>
實體二：JavaScript對事件的反應
alert() 函式在 JavaScript 中并不常用，但它對于代碼測驗非常方便，
onclick 事件是JS的眾多事件之一，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS簡單學習</title>
</head>
<body>
<h1>JavaScript對事件的反應：</h1>
<p>↓↓↓點擊下面這個按鈕↓↓↓</p>
<button type="button" onclick="alert('歡迎!')">點我！！！</button>
</body>
</html>
實體三：JavaScript改變HTML內容
我們會經常看到 document.getElementById("some id")，這個方法是 HTML DOM 中定義的，
DOM (Document Object Model)（檔案物件模型）是用于訪問 HTML 元素的正式 W3C 標準，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS簡單學習</title>
</head>
<body>
<h1>JavaScript改變HTML內容：</h1>
<p id="demo">點擊下面的按鈕，這里的內容將會被修改，</p>
<script>
function myFunction() {
x=document.getElementById("demo");
x.innerHTML="Hello JavaScript!!!";
}
</script>
<button type="button" onclick="myFunction()">點擊這里</button>
</body>
</html>
實體四：JavaScript改變HTML影像
以上實體中代碼 str.src.match("close") 的作用意思是：檢索 <img id="myimage" οnclick="changeImage()" src="img/close.png" width="120" height="160"> 里面 src 屬性的值有沒有包含 close 這個字串，如果存在字串 close，圖片 src 更新為 "img/open.png"，若匹配不到 close字串，src 則更新為 "img/close.png"，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS簡單學習</title>
</head>
<body>
<script>
function changeImage() {
str=document.getElementById('myimage');
if(str.src.match('close')) {
str.src="img/open.png";
}else {
str.src="img/close.png";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="img/close.png" width="120" height="160" />
<p>點擊燈泡就可以打開或者關閉這盞燈！！！</p>
</body>
</html>
實體五：JavaScript改變HTML樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS簡單學習</title>
</head>
<body>
<h1>JavaScript改變HTML樣式：</h1>
<p id="demo">點擊下面的按鈕將改變這個段落的樣式</p>
<script>
function myFunction() {
x=document.getElementById("demo");
x.style.color="red";
}
</script>
<button type="button" onclick="myFunction()">點擊我！！！</button>
</body>
</html>
實體六：JavaScript驗證輸入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS簡單學習</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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258970.html
標籤：其他
上一篇：HTML網頁標簽代碼基本教學