week5.md

Please download 網頁設計第五次上課.docx to see the content picture of homework, thanks.

---

---

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標籤 // href——>link標籤，a標籤 /W3Schools/

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

Output

這種做法很沒效率

<下面是常用功能> 上面這個會先跳出小視窗才會進到網頁，因為script先被執行

</上面是常用功能>

按了會跳出影印

Statement

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

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較常用)