非常感謝： 帥氣的劉某人，本博客有很大部分參考了該博主的博客：JavaScript初學入門（JS打印9*9乘法表，JS製作簡易計算器）
JavaScript 是什麼？
- JavaScript 和 Java 毫無關係
- JavaScript 是一種被廣泛採用的跨平臺編程語言
- JavaScript 運行在瀏覽器上，對網頁行爲進行編程
- ECMAScript 是 JavaScript 的語言規範，JavaScript 是 ECMAScript 的實現和擴展
JavaScript 的註釋方式
方法:
/* 註釋內容 */
or
//註釋內容
JavaScript 的三種使用方式：
1）內嵌到 HTML 標籤中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//onclick後面是 js的語言，這是嵌入到 html語言中的，這個功能是彈出'ok'窗口
<input type="button" value="點擊" οnclick="window.alert('ok');"/>
</body>
</html>
2）寫在 Script 標籤中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
window.alert("ok"); //注意有分號
}
</script>
</head>
<body>
<input type="button" value="登錄" οnclick="text()" /> <!--空標籤-->
</body>
</html>
3）外部導入 . js 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/js4.js"></script> <!--導入js文件-->
</head>
<body>
<input type="button" value="登錄" οnclick="text()"/>
</body>
</html>
外部.js文件：
function text(){
window.alert("hello");
}
JavaScript 的瀏覽器調試方式
也稱 console 的調試技巧：
console.log(123) -- 直接輸出 123
其他方法還有:
console.info -- 信息圖標（google沒有）
console.warn -- 警告標識（黃色背景）
console.error -- 錯誤警示（紅色背景）
JavaScript 的函數加不加括號的問題
舉例：
// 下面這個函數會直接執行（彈出'ok'窗口）
(function(){
alter(123);
})();
// 下面這個函數不會直接執行，除非調用這個函數
function(){
alter(123);
}
JavaScript 的塊作用域
JS 中作用域有：全局作用域、函數作用域、塊級作用域
<script type="text/javascript">
{
var a = 1;
console.log(a); // 1
}
console.log(a); // 1
// 可見，通過 var定義的變量可以跨塊作用域訪問到。
(function A() {
var b = 2;
console.log(b); // 2
})();
console.log(b); // 報錯
// 可見，通過 var定義的變量不能跨函數作用域訪問到
if(true) {
var c = 3;
}
console.log(c); // 3
for(var i = 0; i < 4; i++) {
var d = 5;
};
console.log(i); // 4
console.log(d); // 5
// if 語句和 for語句中用 var定義的變量可以在外面訪問到
// 可見，if語句和 for語句屬於塊作用域，不屬於函數作用域
{
var a = 1;
let b = 2;
const c = 3;
{
console.log(a); // 1 子作用域可以訪問到父作用域的變量
console.log(b); // 2 子作用域可以訪問到父作用域的變量
console.log(c); // 3 子作用域可以訪問到父作用域的變量
var aa = 11;
let bb = 22;
const cc = 33;
}
console.log(aa); // 11 可以跨塊訪問到子塊作用域的變量
console.log(bb); // 報錯 bb is not defined
console.log(cc); // 報錯 cc is not defined
}
</script>
上述內容原網址
JavaScript 的 var、let、const 的區別
var 定義的變量：沒有塊的概念，可以跨塊訪問, 不能跨函數訪問
let 定義的變量：只能在塊作用域裏訪問，不能跨塊訪問，也不能跨函數訪問
const 用來定義常量：使用時必須初始化(即必須賦值)，只能在塊作用域裏訪問，而且不能修改
<script type="text/javascript">
// 塊作用域
{
var a = 1;
let b = 2;
const c = 3;
c = 4; // 修改變量，報錯
let a = 'a'; // 重複聲明，報錯：上面 var a = 1 那行報錯
var b = 'b'; // 重複聲明，報錯：本行報錯
let c = 'c'; // 重複聲明，報錯：本行報錯
var aa;
let bb;
const cc; // 報錯
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(aa); // undefined
console.log(bb); // undefined
}
console.log(a); // 1
console.log(b); // 報錯
console.log(c); // 報錯
// 函數作用域
(function A() {
var d = 5;
let e = 6;
const f = 7;
console.log(d); // 5
console.log(e); // 6 (在同一個{ }中,也屬於同一個塊，可以正常訪問到)
console.log(f); // 7 (在同一個{ }中,也屬於同一個塊，可以正常訪問到)
})();
console.log(d); // 報錯
console.log(e); // 報錯
console.log(f); // 報錯
</script>
上述內容原網址
下面講解 JavaScript 的基本作用：
一、JavaScript 能夠改變 HTML 內容
getElementById() 函數是多個 JavaScript HTML 方法之一，本例使用該方法來查找 id="demo" 的 HTML 元素，並把元素內容改爲 "Hello JavaScript"
實例：
<p id="demo">JavaScript 能夠改變 HTML 內容</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>點擊我！</button>
點擊前👇
點擊後👇
二、JavaScript 能夠改變 HTML 屬性
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">開燈</button>
<img id="myImage" src="/i/eg_bulboff.gif"> //燈泡
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">關燈</button>
點關燈👇
點開燈👇
三、JavaScript 能夠改變 HTML 樣式 （CSS）
<p id="demo">JavaScript 能夠改變 HTML 元素的樣式</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
點擊我！
</button>
點擊前👇
點擊後👇
四、JavaScript 能夠 隱藏與顯示 HTML 元素
<p>JavaScript 隱藏的 HTML 元素</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">
點我顯示！
</button>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
點擊隱藏！
</button>
點擊隱藏👇
點擊顯示👇
五、JavaScript 的引號
雙引號 或 單引號 包圍的字符串，兩者效果是一樣的
"Courser Li" or 'Courser Li' //都是字符串
JavaScript 的五種輸出方式：
1）window.alert(" ")： 彈窗的方式進行輸出
2）document.write(" ")： 以流的方式輸出到頁面中（原地跳轉到新的頁面）
3）console.write(" ")：將信息打印在控制檯上
4）innerHTML()：將內容寫在HTML的標籤裏
5）innerText()：將內容寫在html標籤裏（Text的括號裏的所有都是文本）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text1()
{
window.alert("第一種方式：彈出窗口");
}
function text2()
{
document.write("第二種方式，打印在新的頁面");
}
function text3()
{
console.log("將信息打印在控制檯上F12可見");
}
function text4()
{
//需要創建 div標籤，然後把信息打印在 div1標籤裏
var doc=document.getElementById("div1");
doc.innerHTML="<h1>A</h1>";
doc.innerText="<h1>A</h1>";
// innerHTML和 innerText的區別是:
//前者相當於在 id=div1 的 div中在放一個 h1的標題標籤
//後者會打印出 <h1>A</h1> 這個文本信息
//但若兩者同時存在，後者優先
}
</script>
</head>
<body>
<input type="button" value="第一種方式" onclick="text1()" />
<input type="button" value="第二種方式" onclick="text2()" />
<input type="button" value="第三種方式" onclick="text3()" />
<input type="button" value="第四種方式" onclick="text4()" />
<div id="div1"></div>
</body>
</html>