iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 12

DAY12-JavaScript(二)

a-website-2gb-of-javascript-just-a-bit-more-46331875.png

前言:

昨天我們介紹了JavaScript幾個最基本的用法,今天我打算來介紹JavaScript是如何跟網頁做互動的!這裡阿森來講一下JavaScript在操作上給我的感覺好了,我覺得可以分成以下幾個步驟:

抓到你想操控的部分→設定在哪種情況(event)下要做出什麼動作(handler)→設定這些動作(handler)

這樣說起來很簡單,可是當這些動作越來越複雜、互相牽扯的時候,你可能會發現你的coding和網頁資料夾已經達到一個非常龐大的程度...但這都是要完成一個好網頁要做出的犧牲!(對吧...)

那就讓我們開始今天的介紹吧!

HTML的部分~:

在HTML裡我們要先寫出幾個拿來操作的tag,我們就先寫一個h1 tag當標題好了!再來為了演示event我們再加一個button tag吧!

<h1>Sen's Webpage</h1>

<ul class = "msg-list">
	<li>msg 1</li>
	<li>msg 2</li>
	<li>msg 3</li>
	<li>msg 4</li>
</ul>

<input class="input" type="text" />
<button class = "submit">submit</button>

所以這時候我們的body會變這樣:

<body>
    <h1>Sen's Webpage</h1>

		<ul class = "msg-list">
        <li>msg 1</li>
        <li>msg 2</li>
        <li>msg 3</li>
        <li>msg 4</li>
    </ul>
		
		<input class="input" type="text" />
		<button class = "submit">submit</button>
</body>

再來我們創建一個新的js檔,取名為app.js,透過script tag把它引入,在把我們剛剛的tag分別加上幾個class,這時候我們的body會變這樣:

<body>
    <h1>Sen's Webpage</h1>

		<ul class = "msg-list">
        <li>msg 1</li>
        <li>msg 2</li>
        <li>msg 3</li>
        <li>msg 4</li>
    </ul>
		
		<input class="input" type="text" />
		<button class = "submit">submit</button>
    <script src="./app.js"></script>
</body>

當你看到頁面變成這樣時,html就大概完成了喔!

截圖 2021-08-24 下午4.12.53.png

JavaScript & DOM:

在開始寫JavaScript之前,我想先介紹一下一直提到的DOM到底是什麼,其實DOM就是所謂的文件物件模型(Document Object Model),它可以把html中的各種元素用樹狀結構方法表示出來,像下圖這樣:

dom.png

更進一步來說,DOM 是擁有屬性與函式節點、物件組成的結構化表示法。節點也可以附加事件處理程序,一旦觸發事件就會執行處理程序,讓我們可以更方便的讓程式存取、改變文件架構、風格和內容。

介紹完了DOM就要來介紹今天最主要的部分啦,如何抓取這些元素呢?

這時候我們會用到幾個javascript的指令:

const text = document.querySelector(".title");

簡單來說就是透過document裡面的querySelector來抓取我們的class,再指派一個const去代表這個元素,如此一來透過text我們就可以操作title這個class的元素了。

我們可以透過它來更改一些東西:

text.style.backgroundColor = "lightblue";

或是引入同一個目錄下css檔案裡的某項選擇器:

//in css
.text {
	color: lightblue;
	border: 12px solid darkblue;
	font-size: 50px
}
//in JavaScript
text.classList.add("text")

也可以成功套用。

再來我們可以加一些事件的反饋:

const msgInput = document.querySelector(".input");
const submit = document.querySelector(".submit");
const msgList = document.querySelector(".msg-list");

submit.addEventListener("click", () => {
	const newLi = document.createElement("LI");
	const liContent = document.createTextNode(msgInput.value);
	newLi.appendChild(liContent);
	msgList.appendChild(newLi);
});

這時候我們網頁就變這樣:

截圖 2021-08-24 下午4.39.27.png

我們可以輸入測試訊息:

截圖 2021-08-24 下午4.40.19.png

成功!

這樣一來我們就成功對網頁元素進行操作啦!

小結:

今天我們成功對網頁DOM進行最基本的幾個操作,相信這樣大家對JavaScript的用法也有一定的了解,各位有興趣也可以找網路上的影片或是document來看,越是熟練對之後的React就越容易上手,那今天就先這樣,接下來阿森打算用JavaScript來寫一個簡單的網頁小遊戲,那我們就明天再見吧!


上一篇
DAY11-JavaScript(一)
下一篇
DAY13-JavaScript實作網頁小遊戲
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言