week14.md
download docx note 網頁設計第十二次上課.docx
1.dropdown 下拉式功能表，使用前面的功能顯示(display: none+hover後改變成block)
2.modularize 模組化: 把CSS獨立出來再用
<link rel="stylesheet" href="???.css"/>做使用
3.topbar 把前面的dropdown做修改再美化，加上hash標籤
4.dropright 可以使用float: right把想移動到右邊的內容移動
5.page 用程式直接填檔案
querySelectorAll() 會取得所有的
querySelector() 會取得第一個
這個寫法比較單一性，而且無法返回上一頁，下面的hash比較好用，也不會這麼囉嗦
6.hash 這個是比較弱的hash，真正會用的是下面的generalhash
windows.onhashchange是代表書籤改變就會執行
http://domain/#admin的location.hash=”#admin”
所以上面的windows.location.hash.toLowerCase()就是指後面的那個#???
後面的toLowerCase()可有可無
然後下面是當改變成其中一個case時就會執行後面的show
7.generalhash 這個是精簡版，跟上面的hash只有差在main裡
裡面要加or” “是因為假設一開始沒有標籤，會出現undefine
8.beautybutton 這個只是設CSS讓按鈕比較好看，要讓按鈕變好看，可以在padding上做調整
9.chart 這個圖表引用外部資源:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
長的像這樣，把網路上的資源拿來用
10.map
套用地圖功能
11.fetch 這個用到伺服端先不講
這裡的範例有使用JQuery，這個基本上用CSS都做得出來，稍微了解就好
$代表甚麼 ? Q : 可以代表任何一個東西，可以是變數，可以是函式，這裡代表JQuery函式，呼叫JQuery去改變裡面的節點
這個繪畫版長上面這樣
下面這個是他的區間id
上面是調顏色和大小及位置的funtion
上面是按下按鈕變換
上面是按下滑鼠，可以開始畫，偵測上面給的顏色和大小
最後這個是點generate image(button)可以產生剛剛畫的圖案
也可以用這樣，丟到指定id裡面
使用…可以在板子上顯示裡面的文字內容，可以做修改
需要引用CSS和JS :
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css">
就像這樣，可以顯示數學式
## Markdown
引用外部資源讓這裡也可以用markdown語言
上面兩個例子都是使用外部套件!
## infiniteScroll
這個是無限下滑，跟FB那種很像
下面的是早期的寫法
設定CSS到區塊裡，創建節點，建造區域，再遞迴循環
上面是在測捲動位置，判斷在哪，然後再看要不要呼叫callback。 這個比較複雜，但可以使用，只要知道要改哪邊就可以
按下按鈕觸發convert()功能
可以讓我們放入內容之後做變化，跟w3school提供的編譯功能蠻像的