DOJO004

Dashool 創辦人
喜歡調酒
Rails、Nextjs、TypeScript

重新認識 JavaScript

JavaScript

前言

近期腦中有一個想法，”要是有人問我 JavaScript 是什麼? 我應該要怎麼回答?”。

思考了許久，發現自己雖然寫了一段時間的 JS ( 約 10 個月 )，卻沒有深入的去了解它，讓我不禁好奇了起來。

沒什麼特別的，就只是記錄一下 ”重新認識 JavsScript” 的過程罷了。

簡介

1995 年，由 Netscape 的工程師 Brendan Eich 創造了 JavaScript。最初的名字是 LiveScript，但因為行銷策略而被改名為 JavsScript。
世人常混淆 Java 與 JavaScript，但這兩者並沒有太大的關係。

JavaScript 沒有任何輸入、輸出的概念。
他被設計為在 host 環境下執行的腳本語言。

型態

Number 數字
String 字串
Boolean 布林值
Object 物件
- Function 函式
- Array 陣列
- Date 日期
- Math 數學
- RegExp
Null 空
Undefined 未定義

JavaScript 可以做什麼?

改變 HTML 的內容例如有一個 HTML

<div id="demo"></div>

document.getElementById("demo").innerHTML = "Hello JavaScript"; // 找到 id = demo 的元素，並置入文字

改變 HTML Attribute 在按下 “Turn on the light” or “Turn off the light” 之後，會將 img 裡面的 src 替換。

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

改變 CSS

document.getElementById("demo").style.fontSize = "35px"; // 改變 id = demo 元素的字體大小

document.getElementById("demo").style.display = "none"; // 讓 id = demo 元素的 display 屬性 = none (隱藏)
document.getElementById("demo").style.display = "block"; // 讓 id = demo 元素的 display 屬性 = block (顯示)

基本上只要與使用者互動有相關的，都可以列在 JavaScript 的範圍裡。

JavaScript 要放在哪裡?

可以放在 HTML <head> or <body> 標籤內，但要包在 <script> 標籤裡面。

// in head
<!DOCTYPE html>
<html>
	<head>
		<script>
		function myFunction() {
		  document.getElementById("demo").innerHTML = "Paragraph changed.";
		}
		</script>
	</head>
	<body>
		<h2>Demo JavaScript in Head</h2>
		
		<p id="demo">A Paragraph</p>
		<button type="button" onclick="myFunction()">Try it</button>
		
	</body>
</html>

// in body
<!DOCTYPE html>
<html>
	<body>
	
	<h2>Demo JavaScript in Body</h2>
	
	<p id="demo">A Paragraph</p>
	
	<button type="button" onclick="myFunction()">Try it</button>
	
	<script>
		function myFunction() {
		  document.getElementById("demo").innerHTML = "Paragraph changed.";
		}
	</script>
	
	</body>
</html>

或是放在外部，用引入的方式。

假設我有兩個檔案 “index.html”、”index.js”

// index.js
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

在 index.html 可以用這樣的方式引入 (放在 <head> or <body> 都可以，但通常會選擇 <head>)。

<html>
	<head>
		<script src="index.js"></script>
	</head>
	<body>
		<h2>Demo JavaScript in Head</h2>
		
		<p id="demo">A Paragraph</p>
		<button type="button" onclick="myFunction()">Try it</button>
		
	</body>
</html>

放在外部有什麼優點?

與 HTML 分開。
更好閱讀、維護 HTML、JavaScript。
可以加快頁面載入速度。

三種不同方式引入腳本

我們可以透過三種不同的方式去引入 JavaScript 腳本:

完整的 url

<script src="<https://www.example.com/js/index.js>"></script>

檔案位置

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

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

happy coding!