前端三劍客之JavaScript初體驗

原創 探索者李小白 2020-06-10 12:46

爲什麼學習JavaScript？

從這兩年的發展趨勢來看，大前端應該是打了實錘了，而JavaScript作爲web前端的主要編程語言，自然是不容小覷。HTML 定義了網頁的內容，CSS 描述了網頁的佈局，而JavaScript 決定網頁的行爲。

JavaScript是什麼？

  • JavaScript是一種輕量級的編程語言
  • JavaScript 是可插入 HTML 頁面的編程代碼。
  • JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

JavaScript直接寫入Html輸出流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>範例</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：點擊事件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>點擊事件範例</title> 
</head>

<body>
	
<h1>我的第一個 JavaScript</h1>

<p>
JavaScript 能夠對事件作出反應。比如對按鈕的點擊：
</p>

<button type="button" onclick="alert('你最帥!')">點我!</button>
	
</body>
</html>

JavaScript：改變 HTML 內容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>改變html的內容</title> 
</head>

<body>
	
<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改變 HTML 元素的內容。
</p>

<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改變內容
}
</script>

<button type="button" onclick="myFunction()">點擊這裏</button>
	
</body>
</html>

您會經常看到 document.getElementById(“some id”)。這個方法是 HTML DOM 中定義的。DOM (Document Object Model)（文檔對象模型）是用於訪問 HTML 元素的正式 W3C 標準。

JavaScript：改變 HTML 圖像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>點擊燈泡可以打開關閉這盞燈</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>

JavaScript：改變 HTML 樣式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>改變HTML樣式</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>驗證輸入</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 顯示數據

  • 使用 window.alert() 彈出警告框。
  • 使用 document.write() 方法將內容寫到 HTML 文檔中。
  • 使用 innerHTML 寫入到 HTML 元素。
  • 使用 console.log() 寫入到瀏覽器的控制檯。

使用window.alert(),你可以彈出警告框來顯示數據

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>彈出警告框來顯示數據</title>
</head>

<body>

<h1>我的第一個頁面</h1>

<p>我的第一個段落。</p>

<script>
window.alert(5 + 5);
</script>
	
</body>
</html>

操作 HTML 元素

如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。請使用 “id” 屬性來標識 HTML 元素，並 innerHTML 來獲取或插入元素內容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>操作 HTML 元素</title> 
</head>

<body>
	
<h1>我的第一個 Web 頁面</h1>

<p id="demo">我的第一個段落。</p>

<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

寫到 HTML 文檔

document.write() 僅僅向文檔輸出寫內容,如果在文檔已完成加載後執行 document.write，整個 HTML 頁面將被覆蓋

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>寫到控制檯</title> 
</head>
<body>
	
<h1>我的第一個 Web 頁面</h1>

<p>
瀏覽器中(Chrome, IE, Firefox) 使用 F12 來啓用調試模式， 在調試窗口中點擊 "Console" 菜單。
</p>

<script>
a = 500;
b = 20;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

JavaScript變量

JavaScript 使用關鍵字 var 來定義變量， 使用等號來爲變量賦值

<!DOCTYPE html>
<html>

<head> 
<meta charset="utf-8"> 
<title>JavaScript變量</title> 
</head>

<body>

<p id="demo"></p>

<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>

</body>
</html>

JavaScript 字面量

  • 數字（Number）字面量 可以是整數或者是小數，或者是科學計數(e),如3.14，100,123e5
  • 字符串（String）字面量 可以使用單引號或雙引號:如"Lee", ‘Lee’
  • 表達式字面量 用於計算如：5+5,6*6
  • 數組（Array）字面量 定義一個數組：[2,0,1,3,1,4]
  • 對象（Object）字面量 定義一個對象：{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
  • 函數（Function）字面量 定義一個函數,如下所示
function myFunction(a, b) { return a * b;}

JavaScript 數據類型

JavaScript 有多種數據類型：數字，字符串，數組，對象等等：

  • var length = 10; // Number 通過數字字面量賦值
  • var points = x * 10; // Number 通過表達式字面量賦值
  • var lastName = “ljz”; // String 通過字符串字面量賦值
  • var cars = [“lee”, “zhang”, “wang”]; // Array 通過數組字面量賦值
  • var person = {firstName:“lee”, lastName:“zhang”}; // Object 通過對象字面量賦值

JavaScript函數

JavaScript 語句可以寫在函數內，函數可以重複引用：
引用一個函數 = 調用函數(執行函數內的語句)。

function myFunction(a, b) {
   	return a * b;                                // 返回 a 乘以 b 的結果
}

JavaScript 字母大小寫

JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函數 getElementById 與 getElementbyID 是不同的。
同樣，變量 myVariable 與 MyVariable 也是不同的。

JavaScript 語句標識符

在這裏插入圖片描述

JavaScript 對象

JavaScript 對象是擁有屬性和方法的數據。在 JavaScript中，幾乎所有的事物都是對象。

對象定義

你可以使用字符來定義和創建 JavaScript 對象:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>對象定義</title> 
</head>

<body>

<p>創建 JavaScript 對象。</p>
<p id="demo"></p>

<script>
var person = {firstName:"李小白", lastName:"蘇小軾", age:23, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.lastName + " 現在 " + person.age 
	+ " 歲,"+"他的眼睛是"+person.eyeColor+"色";
</script>

</body>
</html>

訪問對象屬性

  • 通過.property來訪問對象屬性
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>通過.property來訪問對象屬性</title> 
</head>
<body>

<p>
有兩種方式可以訪問對象屬性：
</p>

<p>
你可以使用 .property 或 ["property"].
</p>

<p id="demo"></p>

<script>
var person = {
    firstName : "A",
    lastName : "B",
    id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>
  • 通過[“property”]來訪問對象屬性
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>通過["property"]來訪問對象屬性</title> 
</head>
<body>

<p>
有兩種方式可以訪問對象屬性: 
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "A",
    lastName : "B",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

對象方法

對象的方法定義了一個函數，並作爲對象的屬性存儲。
對象方法通過添加 () 調用 (作爲一個函數)。
該實例訪問了 person 對象的 fullName() 方法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>訪問對象方法</title> 
</head>

<body>

<p>創建和使用對象方法。</p>

<p>對象方法作爲一個函數定義存儲在對象屬性中。</p>

<p id="demo"></p>

<script>
var person = {
    firstName: "A",
    lastName : "B",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

如果你要訪問 person 對象的 fullName 屬性，它將作爲一個定義函數的字符串返回

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>訪問 person 對象的 fullName 屬性</title> 
</head>

<body>

<p>創建和使用對象方法。</p>
<p>對象方法是一個函數定義,並作爲一個屬性值存儲。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "你",
    lastName : "好 帥",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括號輸出函數表達式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括號輸出函數執行結果："  +  person.fullName();
</script>
	
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

小程序學習筆記

探索者李小白 2018-11-13 02:01:55

Android實戰之Jsoup爬取簡書網站首頁詳解

探索者李小白 2018-11-04 12:36:49

前端三劍客之JavaScript初體驗上篇

探索者李小白 2018-10-20 11:38:00

前端三劍客之CSS初體驗

探索者李小白 2018-10-15 22:06:18

前端三劍客之HTML初體驗

探索者李小白 2018-10-13 22:06:06