天天看點
傳回

初識JavaScript 第三節

初識JavaScript

    • JavaScript 指派
      • JavaScript 指派運算符
    • JavaScript 資料類型
      • JavaScript 擁有動态類型
      • JavaScript 字元串值
      • JavaScript 數值
      • JavaScript 數組
      • JavaScript 對象
      • typeof 運算符
      • Undefined
      • 空值
      • Null
    • JavaScript 函數
      • JavaScript 函數文法
      • 函數調用
      • 函數傳回
      • 為何使用函數？
      • () 運算符調用函數
      • 用作變量值的函數
      • 局部變量
    • JavaScript 對象
    • JavaScript 事件
    • JavaScript 字元串
      • JavaScript 字元串
      • 字元串長度
      • 特殊字元
    • JavaScript 字元串方法
      • 查找字元串中的字元串
      • 檢索字元串中的字元串
      • 提取部分字元串
      • `slice()` 方法
      • `substring()` 方法
      • `substr()` 方法
      • 替換字元串内容
      • 轉換為大寫和小寫
      • concat() 方法
      • `String.trim()`
      • `charAt()` 方法
      • `charCodeAt()` 方法
    • JavaScript 字元串搜尋
    • JavaScript 字元串模闆
    • 第三節到這裡就結束了

JavaScript 指派

JavaScript 指派運算符

運算符：

  • =

  • +=

  • -=

  • *=

  • /=

  • %=

  • <<=

  • >>=

  • >>>=

  • &=

  • ^=

  • |=

  • **=

提示：**= 運算符屬于 ECMAScript 2016 proposal (ES7) 的實驗部分。它的跨浏覽器表現并不穩定。請勿使用。

指派執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var x = 2525252;
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>
初識JavaScript 第三節

JavaScript 資料類型

  JavaScript 變量能夠儲存多種資料類型：數值、字元串值、數組、對象等等。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var x = 15455 + "Jager";
		document.getElementById("demo").innerHTML = x;
		</script>

		</body>
</html>
初識JavaScript 第三節

JavaScript 擁有動态類型

  JavaScript 擁有動态類型。這意味着相同變量可用作不同類型。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var x;               
		var x = 545587;         
		var x = "Jager";      

		document.getElementById("demo").innerHTML = x;
		</script>

		</body>
</html>
初識JavaScript 第三節

JavaScript 字元串值

字元串（或文本字元串）是一串字元（比如 “Jager”）。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var carName1 = "Jager 215454";
		var carName2 = 'Jager 15428545';

		document.getElementById("demo").innerHTML =
		carName1 + "<br>" + 
		carName2; 
		</script>

	</body>
</html>
初識JavaScript 第三節

JavaScript 數值

  JavaScript 隻有一種數值類型。超大或超小的數值可以用科學計數法來寫。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var x1 = 545.00;
		var x2 = 854;
		var x3 = 5.68;

		document.getElementById("demo").innerHTML =
		x1 + "<br>" + x2 + "<br>" + x3;
		</script>

	</body>
</html>
初識JavaScript 第三節

JavaScript 數組

  JavaScript 數組用方括号書寫。數組的項目由逗号分隔。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var cars = ["Jager", "system", "jg"];

		document.getElementById("demo").innerHTML = cars[0];
		</script>

		</body>
</html>
初識JavaScript 第三節

JavaScript 對象

  JavaScript 對象用花括号來書寫。對象屬性是 name:value，由逗号分隔。

執行個體：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>
	
		<script>
		var person = {
		    firstName : "Jager",
		    lastName  : "jg",
		    age       : 35,
		    eyeColor  : "blue"
		};

		document.getElementById("demo").innerHTML =
		person.firstName + " is " + person.age + " years old.";
		</script>

	</body>
</html>
初識JavaScript 第三節

typeof 運算符

  您可使用 JavaScript 的 typeof 來确定 JavaScript 變量的類型，typeof 運算符傳回變量或表達式的類型。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		document.getElementById("demo").innerHTML = 
		typeof "" + "<br>" +
		typeof "Jager" + "<br>" + 
		typeof "Jager jg";
		</script>
	</body>
</html>
初識JavaScript 第三節

Undefined

  在 JavaScript 中，沒有值的變量，其值是 undefined,typeof 也傳回 undefined。

空值

  空值與 undefined 不是一回事。空的字元串變量既有值也有類型。

Null

  在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。不幸的是，在 JavaScript 中，null 的資料類型是對象。我們可以把 null 在 JavaScript 中是對象了解為一個 bug。它本應是 null。

JavaScript 函數

  JavaScript 函數是被設計為執行特定任務的代碼塊。JavaScript 函數會在某代碼調用它時被執行。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		function myFunction(p1, p2) {
		    return p1 * p2;
		}
		document.getElementById("demo").innerHTML = myFunction(87, 8);
		</script>

		</body>
</html>
初識JavaScript 第三節

JavaScript 函數文法

  JavaScript 函數通過 function 關鍵詞進行定義，其後是函數名和括号 ()。函數名可包含字母、數字、下劃線和美元符号（規則與變量名相同）。

函數調用

  函數中的代碼将在其他代碼調用該函數時執行：

  • 當事件發生時（當使用者點選按鈕時）
  • 當 JavaScript 代碼調用時
  • 自動的（自調用）

函數傳回

  當 JavaScript 到達 return 語句，函數将停止執行。如果函數被某條語句調用，JavaScript 将在調用語句之後“傳回”執行代碼。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var x = myFunction(654, 7);
		document.getElementById("demo").innerHTML = x;

		function myFunction(a, b) {
		    return a * b;
		}
		</script>

	</body>
</html>
初識JavaScript 第三節

為何使用函數？

  我們能夠對代碼進行複用：隻要定義一次代碼，就可以多次使用它。您能夠多次向同一函數傳遞不同的參數，以産生不同的結果。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		function toCelsius(f) {
		    return (5/9) * (f-32);
		}
		document.getElementById("demo").innerHTML = toCelsius(123.8);
		</script>

	</body>
</html>
初識JavaScript 第三節

() 運算符調用函數

  使用上面的例子，toCelsius 引用的是函數對象，而 toCelsius() 引用的是函數結果。

用作變量值的函數

  函數的使用方法與變量一緻，在所有類型的公式、指派和計算中。

局部變量

  在 JavaScript 函數中聲明的變量，會成為函數的局部變量。局部變量隻能在函數内通路。

執行個體：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo1"></p>

		<p id="demo2"></p>

		<script>
		myFunction();

		function myFunction() {
		    var carName = "Jager";
		    document.getElementById("demo1").innerHTML =
		    typeof carName + " " + carName;
		}

		document.getElementById("demo2").innerHTML =
		typeof carName;
		</script>

	</body>
</html>
初識JavaScript 第三節

JavaScript 對象

  我們之前已經學到，JavaScript 變量是資料值的容器。這段代碼把一個單一值（porsche）賦給名為Jager的變量。

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var Jager = "jg";
		document.getElementById("demo").innerHTML = Jager;
		</script>

	</body>
</html>
初識JavaScript 第三節

JavaScript 事件

  HTML 事件是發生在 HTML 元素上的“事情”。當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件。

HTML 事件的例子：

  • HTML 網頁完成加載
  • HTML 輸入字段被修改

  • HTML 按鈕被點選

    執行個體：

<!DOCTYPE html>
<html>
	<body>

		<button onclick="document.getElementById('demo').innerHTML=Date()">點我顯示時間</button>

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

	</body>
</html>
初識JavaScript 第三節

下面是一些常見的 HTML 事件：

  • onchange HTML 元素已被改變
  • onclick 使用者點選了 HTML 元素
  • onmouseover 使用者把滑鼠移動到 HTML 元素上
  • onmouseout 使用者把滑鼠移開 HTML 元素
  • onkeydown 使用者按下鍵盤按鍵
  • onload 浏覽器已經完成頁面加載

JavaScript 字元串

JavaScript 字元串

  JavaScript 字元串是引号中的零個或多個字元。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>
		var x = "Jager";
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>
初識JavaScript 第三節

字元串長度

  内建屬性

length

可傳回字元串的長度。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

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

	</body>
</html>
初識JavaScript 第三節

特殊字元

  由于字元串必須由引号包圍，JavaScript 會誤解這段字元串，避免此問題的解決方法是，使用

\

轉義字元。

執行個體：

<!DOCTYPE html>
<html>
	<body>

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

		<script>

		var x = "\"Jager\"";
		document.getElementById("demo").innerHTML = x; 

		</script>

	</body>
</html>
初識JavaScript 第三節

JavaScript 字元串方法

查找字元串中的字元串

  

indexOf()

方法傳回字元串中指定文本首次出現的索引（位置）。

執行個體：

<!DOCTYPE html>
<html>
	<body>
		<p id="demo"></p>

		<script>
		var str = "The full name of China is the People's Republic of China.";
		var pos = str.indexOf("full");
		document.getElementById("demo").innerHTML = pos;
		</script>

	</body>
</html>
初識JavaScript 第三節

檢索字元串中的字元串

  

search()

方法搜尋特定值的字元串，并傳回比對的位置。

提取部分字元串

有三種提取部分字元串的方法：

  • slice(start, end)

  • substring(start, end)

  • substr(start, length)

slice()

 方法

  

slice()

提取字元串的某個部分并在新字元串中傳回被提取的部分。

substring()

 方法

  

substring()

類似于

slice()

。不同之處在于

substring()

無法接受負的索引。

substr()

 方法

  

substr()

類似于

slice()

。不同之處在于第二個參數規定被提取部分的長度。

替換字元串内容

  

replace()

方法用另一個值替換在字元串中指定的值。

轉換為大寫和小寫

  通過

toUpperCase()

把字元串轉換為大寫。通過

toLowerCase()

把字元串轉換為小寫。

concat() 方法

  

concat()

連接配接兩個或多個字元串。

String.trim()

  

trim()

方法删除字元串兩端的空白符。

提取字元串字元

  • charAt(position)
  • charCodeAt(position)

charAt()

 方法

  

charAt()

方法傳回字元串中指定下标（位置）的字元串。

charCodeAt()

 方法

  charCodeAt() 方法傳回字元串中指定索引的字元 unicode 編碼。

JavaScript 字元串搜尋

搜尋字元串的 JavaScript 方法：

  • String.indexOf()
  • String.lastIndexOf()
  • String.startsWith()
  • String.endsWith()

JavaScript 字元串模闆

  • Template Literals
  • Template Strings
  • String Templates
  • Back-Tics 文法

第三節到這裡就結束了

我爬得越高，眼前的風景就越發迷人。
網絡 javascript 前端 html
上一篇: 第三節：CSS 核心基礎
下一篇: 引入元件的兩種方式

繼續閱讀