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標籤 /*<img src="pic_trulli.jpg" >*/
href——>link標籤，a標籤 /*<a href="https://www.w3schools.com/">W3Schools</a>*/
 
也可以引用其他網站的資料(要完整路徑)

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