week14.md

HOME

---

---

APP

Site

1.dropdown 下拉式功能表，使用前面的功能顯示(display: none+hover後改變成block)

2.modularize 模組化: 把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 這個用到伺服端先不講

補充

canvas-sketchpad

這裡的範例有使用JQuery，這個基本上用CSS都做得出來，稍微了解就好

$代表甚麼 ? Q : 可以代表任何一個東西，可以是變數，可以是函式，這裡代表JQuery函式 呼叫JQuery去改變裡面的節點

這個繪畫版長上面這樣

下面這個是他的區間id

上面是調顏色和大小及位置的funtion

上面是按下按鈕變換

上面是按下滑鼠，可以開始畫，偵測上面給的顏色和大小

最後這個是點generate image(button)可以產生剛剛畫的圖案

也可以用這樣，丟到指定id裡面

Tex(用來寫數學式)

使用…可以在板子上顯示裡面的文字內容，可以做修改 需要引用CSS和JS :

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js"></script>

就像這樣，可以顯示數學式 ##　Markdown

引用外部資源讓這裡也可以用markdown語言

上面兩個例子都是使用外部套件!

##　infiniteScroll 這個是無限下滑，跟FB那種很像 下面的是早期的寫法

設定CSS到區塊裡，創建節點，建造區域，再遞迴循環

上面是在測捲動位置，判斷在哪，然後再看要不要呼叫callback。 這個比較複雜，但可以使用，只要知道要改哪邊就可以

HtmlEditorEmpty

按下按鈕觸發convert()功能

可以讓我們放入內容之後做變化，跟w3school提供的編譯功能蠻像的