week5.md

HOME

download docx note 網頁設計第五次上課.docx

---

---

Javascript Part1

(較有挑戰性)

弱型態語言:python, javascript
不需要宣告變數型態

---

Introduction

JavaScript 做的功能大致上都是把網頁的字串塞入，或一掉或修改CSS屬性把影藏便顯示，把顯示變影藏

另一個範例

document.getElementById後面加.改什麼 : 指定特定位置物件做出改變(後面要輸入物件id)

html在網頁裡面被表達成樹狀結構，每個節點(p,div…)都可以做修改

另一個範例

網頁遇到問題時，可以去 自訂及管理Googe Chrome>更多選項>開發人員工具程式碼，也可以利用裡面的console作互動，更了解程式碼的含意

JavaScript也可以做到變數(用var宣告)帶入

下面是對內容做style的修改

---

Where to

寫在<script>…</script>裡的程式碼預設一開始就會執行，不像button要點還要加type=”button” onclick=…..

補充:src代表source(源文件), href代表hypertext reference(超文本引用)
這兩個用的地方不一樣
src——>img標籤，script標籤，iframe標籤 /*<img src="pic_trulli.jpg" >*/
href——>link標籤，a標籤 /*<a href="https://www.w3schools.com/">W3Schools</a>*/

也可以引用其他網站的資料(要完整路徑)

---

Output

這種做法很沒效率

---

<下面是常用功能>

上面這個會先跳出小視窗才會進到網頁，因為script先被執行

</上面是常用功能>

按了會跳出影印

Statement

這個在開發人員選項做練習，在網頁上(w3school)寫會比較慢

---

Syntax(語法)

直接用deno和vscode做練習
安裝deno(https://deno.land/manual@v1.9.1/getting_started/installation) : 先開windows powershell，打入指令iwr https://deno.land/x/install/install.ps1 -useb | iex

安裝choco(https://chocolatey.org/install?fbclid=IwAR1aKTJHpY5nJ8ALMr8y7O439oxwHM3HmKr4w9St6MzMsOyvNVYPcJ1WuWQ)

Deno載好以後就可以在VScode裡打開發人員選項的形式 

進去deno要輸入deno
按control+D返回，取消deno輸入
Javascript的打印是用console.log(“Hello JavaScrip”)

下面是while迴圈

---

VS指令

git clone 網址 :可以把網頁上的檔案複製到本地資料夾

補充 :  .\是代表這層，..\是代表上一層(在VScode終端機輸入)
		Ex: c:\ccc\wp\test.html，如果要用wp裡面的a.jpg要先回到上一層再找

pwd是檢視目前所在資料夾
ls是代表檢視這層所有資料夾，如果是要看上一層的a.jpg就要打:ls ../ai
(/和\是同樣的意思/在linus較常用)