JavaScript——基礎

初識JavaScript
- 什么是JavaScript
- JavaScript的特點
- JavaScript開發工具
- 第一個JavaScript程式
- 基本的語法規則
JavaScript入門
- JavaScript引入方式
- JavaScript常用輸出陳述句
- 注釋
- 資料與運算
- 函式
- 物件
- 事件

初識JavaScript

什么是JavaScript

JavaScript是Web開發領域中的一種功能強大的編程語言，主要用于開發互動式的Web頁面，對于一個網頁來言，HTML代表了結構，CSS代表了樣式，JavaScript代表了行為；結構是網頁的骨架，樣式是網頁的外觀，行為則是網頁的互動邏輯，

語言	作用	說明
HTML	結構	從語意的角度，描述網頁結構
CSS	樣式	從審美的角度，美化頁面
JavaScript	行為	從互動的角度，提升用戶體驗

JavaScript的特點

JavaScript是一種腳本語言
·腳本語言：依賴于解釋器，只有在被呼叫時才會自動進行解釋或編譯，常見的腳本語言還有VBScript、PHP、Python等；
·非腳本語言：一般需要經過編譯、鏈接，生成獨立可執行的檔案后才能運行，如C、C++、Java、C#等；
JavaScript可以跨平臺
·JavaScript不依賴作業系統，僅需要瀏覽器的支持；
JavaScript支持面向物件
·面向物件是程式開發中的一種重要的編程思想，基于面向物件思想，誕生了許多優質的庫和框架，使JavaScript開放變得更加快捷、高效；
·除了經典的jQuery庫，近年來又誕生了Bootstrap、AngularJS、Vue.js、React、webpack等框架和工具；

JavaScript開發工具

1.瀏覽器（常見瀏覽器列舉）

開發商	瀏覽器
Microsoft	Internet Explorer、Microsoft Edge
Google	Google Chrome
Mozilla	Mozilla Firefox
Apple	Safari

2.代碼編輯器
·Notepad++：一款在Windows環境下的免費、開源的代碼編輯器；
·Sublime Text：一個輕量級、跨平臺的代碼編輯器；
·NetBeans：一個由Sun公司建立的可擴展開發平臺；
·Adobe Dreamweaver：一個集網頁制作和網站管理于一身、所見即所得的網頁編輯工具；
·WebStorm：一款由JetBrains公司推出的前端開發工具，HTML5、JavaScript是其強項，支持Bootstrap、AngularJS、Vue.js、React、webpack等流行的前端框架和工具；

第一個JavaScript程式

1.首先撰寫一個簡單的網頁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一個JavaScript程式</title>
	</head>
	<body>網頁內容</body>
</html>

2.之后使用嵌入式JavaScript，通過script標簽將代碼嵌入其中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一個JavaScript程式</title>
		<script>
			alert('Hello world!');
		</script>
	</head>
	<body>網頁內容</body>
</html>

3.進行測驗
出現彈窗

基本的語法規則

JavaScript嚴格區分大小寫，在撰寫代碼時一定要注意大小寫的正確性；
JavaScript對空格、換行、縮進不敏感，為了美觀，一條陳述句可以分成多行書寫；
JavaScript在一條陳述句結束、換行書寫下一條陳述句時可省略英文分號，但為了保持良好的代碼風格，建議每條陳述句都以英文分號結尾；

JavaScript入門

JavaScript引入方式

1.嵌入式

<script>
	JavaScript陳述句;
</script>

<script type="text/javascript">
	JavaScript陳述句;
</script>

在HTML5中，script標簽type屬性的默認值即為"text/javascript"，因此可以選擇省略
2.外鏈式
（1）先創建單獨的js檔案

// hello.js
alert('Hello world!');

（2）之后在HTML檔案內，使用script標簽的src屬性引入js檔案

<script src="hello.js"></script>

（3）src屬性可指定為以下形式

相對路徑；
絕對路徑；
URL地址；
3.行內式

<a href="javascript:alert('Hello world!');">test</a>
<input type="button" onclick="javascript:alert('Hello world!');" value="test">

行內式是將JavaScript作為HTML標簽屬性來使用，上述代碼實作了單擊test或按鈕test，會彈出顯示“Hello world!”的警告框

JavaScript常用輸出陳述句

1.alert()

用于彈出一個警告框，點擊“確定”按鈕才能關閉，確保用戶可以看到某些資訊；
前面已經演示過；
2.console.log()
用于在瀏覽器的控制臺輸出內容；
演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<script>
			console.log('異世相遇，盡享美味！');
		</script>
	</head>
	<body>網頁內容</body>
</html>

之后打開HTML檔案，單擊右鍵→審查元素→console，即可看到運行結果：

3.document.write()

用于在HTML檔案頁面中輸出內容；
演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<script>
			document.write('<b>輸出內容中的HTML標簽會被瀏覽器決議</b>');
		</script>
	</head>
	<body>網頁內容</body>
</html>

運行結果

注意：輸出內容中不要有script結束標記，否則會導致程式提前結束；如果不得不加，那么“/”前要加轉義符號“\”；

注釋

1.單行注釋

// 這是單行注釋

2.多行注釋

/*
這是多行注釋
*/

資料與運算

1.數學運算：加（+）減（-）乘（*）除（/）四則運算

alert(1 + 2);	 //3
alert(2 * 3 + 4);  //10
alert(2 * (3 + 4)/3 - 1);  //7

2.比較兩數大小：輸出布爾型別的值

alert(1 > 2);	 //false
alert(2 == 2);  //true
alert(1 < 2);  //true

3.使用字串保存資料：英文單引號or英文雙引號

alert('刻晴');	 
alert("菲謝爾");

4.比較兩個字串是否相等

alert('1' == '2');	 //false
alert('2' == '2');  	//true

5.字串與數字的拼接

字串的拼接：“+”

alert('1' + '2');	 //結果為12

若字串與數字同時出現，它會自動與數字拼接：

alert('1 + 2= '+1+2);	 //結果為1+2=12

所以在這種情況下，應使用小括號提高資料運算的優先級：

alert('1 + 2= '+(1+2));	 //結果為1+2=3

6.使用變數保存資料

格式：var 變數名=變數值/之前宣告過的變數名;
演示：

var num1 = 1;
var num2 = 2；
var num3 = num1; //1
alert(num1 + num2);	//3

函式

1.用途：封裝常用功能模塊，將代碼模塊化、組件化，如需使用呼叫即可，而非重寫整段代碼，這樣做既減少了代碼的使用又使代碼撰寫更有條理；

2.函式的回傳值：函式執行后回傳的一個表示執行結果的值；

var food = prompt('請輸入你最愛吃的食物：');	//彈出一個輸入框，提示用戶輸入內容
alert('你最愛吃' +food);	//輸出函式回傳值

3.函式的引數：有些函式支持一個或多個引數，多個引數之間用英文逗號隔開；

var food = prompt('請輸入你最愛吃的食物：','酸菜魚');	//第二個引數，設定彈出輸入框中的默認文本

4.自定義函式：用于封裝自己的代碼；

// 定義函式
function sum(a,b){
	var c = a + b;	//函式的內部代碼
	return c;	//函式的回傳值
//呼叫函式
alert(sum(33,66));	//99
//自定義函式后續會詳細講解

物件

物件的組成：一個物件的成員由屬性和方法組成，屬性就是一些變數，方法就是一些函式，我們通過訪問物件的屬性來獲取資訊，通過呼叫物件的方法來實作所需要的功能；

1.window物件：window物件是JavaScript與瀏覽器互動的主要接入點，提供了用于JavaScript腳本控制瀏覽器的一些介面

訪問方法：window.屬性名/方法();

window.console();
window.document;

2.document物件：document物件是window物件的屬性之一，主要用于與網頁檔案進行互動，當通過JavaScript訪問或修改網頁中的某個元素時，需要使用其附屬的方法；

演示：

<body>
	<p id="23333">蒙德北部，應急食物</p>
	<script>
		var test = document.getElementById('23333');	//根據id獲取元素物件
		alert(test.innerHTML);	//通過innerHTML屬性獲取元素內容，輸出段落里的陳述句
	</script>
</body>

4.String物件：用于在代碼中直接定義字串型別；
-演示：

var str = 'apple';
alert(str.length);	//獲取字串長度
alert(str.toUpperCase());	//轉換為大寫

5.自定義物件

演示：

// 創建物件
var stu = {};
//添加屬性
stu.name = 'Jack';
stu.age = '18';
//訪問屬性
alert(stu.name);
//添加方法
stu.introduction = function(){
	return '我是'+this.name+',今年'+this.age+'歲，';
	//"this"用來訪問當前物件的屬性或方法
}
//呼叫方法
alert(stu.introduction());
//自定義物件后續會詳細講解

事件

事件是指可以被JavaScript偵測到的互動行為；

演示：

<input type="button" onclick="javascript:alert('Hello world!');" value="test">

不推薦行內式，建議通過元素物件來添加事件：

<body>
	<input type="button" id="btn" value="test">
	<script>
		document.getElementById('btn').onclick = function(){	//設定滑鼠點擊onclick事件
			alert(this.value);	//獲取按鈕的value屬性
		};	//事件注冊和事件型別，在后續會詳細講解
	</script>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/279825.html

標籤：其他

上一篇：css重要標簽總結

下一篇：vue2.x 從vue.config.js配置到專案優化