> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/zi-li-cheng-bei/201902/2019-0214-alex_js.md). # 2019/0217/huli\_half Developer {% embed url="" %} {% embed url="" %} ## 基礎 1.新的問題造就出新的library(函式庫) 2.(WS/MAC) 都必備工具編輯器/終端機 3.前後端不等於!=前後台，Keyword面試經典題 ## HTML 4.HTML=超文本標記語言=讓瀏覽器看得懂的文本架構排版指令 5.HTML既定規則/原理階層/父子屬性鬆散辨識元屬性 ## CSS 6.CSS=階層樣式表=讓瀏覽器看得懂的文本架構添加裝飾屬性 7.開發者工具怎麼改，如果都只是改客戶端，別以為你是駭客，改了還是只有你自己看的見 ( 但有眉角 ... 8.需求(電腦不知道你到底是要幫哪個地方化妝)了解，選擇器為啥需要有分類 (指定#/類別./標籤h1)(id/class/tag) 9.一般來說style並不會寫在html裡面，而是會獨立出一個css檔案並在head引入 ``` ... ``` 10.black區塊元素(ex.div、p...):佔用整個區塊的空間(可設定高寬/上下距)。 11.inline行內元素(ex.span、a...):強制佔用標籤本身(text/img)的空間/會蓋過其他人(高寬固定不可設置)。 12.inline-block讓元素不獨佔一行又可設置其屬性 {% embed url="" %} {% embed url="" %} {% embed url="" %} ![](/files/-LYuRyDpmcQbrEGOErnE) 13.每個元素都有預設的display但還是能用css修改但只是不建議。ex.div變成inline，span轉為black ![](/files/-LYuVq162jBjt8VDzgg1) 14.black可以看成一個box，具有長寬、內距(padding)、外距(margin)，框線(border) ![粗黑線的地方為抽象裡面的實體箱子的位子](/files/-LYuWPWmqCPgwM2w78tI) {% embed url="" %} 14.HTML相同不同的化妝術(CSS)可以打造無數種截然不同的網頁 {% embed url="" %} 15.但是CSS雖然可以達成有動畫/變化但是並無法讓使用者與網頁互動，想要互動就必須寫點小程式=>JS!! ## JavaScript 17.Java與JavaScript的關係就跟與龍共舞中周潤發與周星馳的關係一樣 18.JavaScript如同CSS會獨立成一個檔案再引入 ![](/files/-LYw6VbpEVU5aZt2LWLH) 19.JS為物件導向語言，物件/事件/功能 A.在程式裡取得按鈕 ``` var btn = document.querySelector('#btn'); ``` B.監聽按鈕的click事件 ``` btn.addEventListener('click', onClick); ``` C.跳出彈出式視窗 ``` function onClick (){alert('click!');} ``` 20\. 匿名函式 / callbackfuntion 遞迴 ![](/files/-LYw9UqjHB3YjQuHYQ_k) {% embed url="" %} 21.學到這邊JS卡住了先看以下 {% embed url="" %} ### 基礎 22.以往沒有JS通常利用CGI做媒介，將客戶端所有資料傳置伺服器端，檢查完有錯在回傳客戶端直到正確，非常考驗伺服器功率，直到有了JS可以在客服端完成部分任務。 23.JS大小寫有不同的意義 24.嚴謹寬鬆其實都是在形容該語言中變數型態定義 {% embed url="" %} 25.\ 其實是HTML的註解標記，一些舊的網頁不支援JS會直接顯示JS代碼，而//為JS註解標記，合體則為\! ，後半段的 //- ->!則是讓JS忽略 - ->!，JS的註解標記有兩種，第二種為/\* \*/。 26.HTML與JS都是直譯式語言，一行翻譯完執行一行。 27.JS可以編寫於HTML裡面JAVA不能 28.JAVA編寫的程式為編譯語言，需要編譯為Java byte-code才可執行(現階段java基礎為0後續補) 29.JS多運用Cookie存少許資料於瀏覽器，且不能控制網路，多用於html與客戶端之互動。 30.java可以讀寫檔案，可以控制網路(現階段java基礎為0後續補)。 31.javascript原為livescript後來與寫java的公司合作所以改名為javascript但兩者根本沒關係。 32.js可以寫在html任何地方，但通常js寫在head原因為html為直譯式，寫在head能確保js被優先載入，且使用某些WYS/WYG的網頁編輯器修改body時不會影響到js。 33.寫在\後面，好處是不會影響到\內容，適合一班免費網頁供應商置入廣告。 34.將js放入另一個檔案的好處有二1.所有的html檔案只需要加入這句就可以享用library.js內的js，2.當瀏覽器不支援js時就不用下載js檔案。 35.物件與物件利用.串接，( )中都是方法，{ }中為函式，" ' ' "中間為字串，; 結束這段 36.noscript 為當網頁不支援js時會顯示的內容 (一定要寫在body，才會顯示在頁面) ### 物件 37.JS為瀏覽器的物件導向式語言，即是瀏覽器內的任何東西都視為物件，而物件又包含其他物件。 ![圖一： JavaScript 物件層次圖 (JavaScript Object Hierarchy) 來源： Netscape JavaScript Reference](/files/-LZ-DjIgUXZuCoSoTGMM) 38.名稱name / id = 1.找物件名稱2.找出該物件的上層(容器/ Container)並用 . 串聯。(如果在該層想操控該層名稱則不需列出上層名稱) document.my\_form.myname 39.方法Method=類似一個函數(function) 操控與該物件有關的動作，寫在在物件名稱後方用( 參數 )代表，並包覆著參數，就算沒有方法 ( ) 也必須要寫 document.write() 40.屬性 Property=用來取得該物件的屬性或設定屬性內容也是用 . 與物件名稱串聯 document.bgColor="silver" 41.想改變物件屬性只要把屬性當作變數，等號右邊指定內容即可。(更深的js物件包含的方法跟屬性應該要去w3c看，可能等我html跟css ### 變數 42.JS變數命名規則英文、數字、底線，第一個字元不可是數字，不可是保留自 43.JS Date Type ![](/files/-LZ022jzRH4ixfoPmY6S) 44.鬆散型態好處:不須牢記，不須寫太多東西，js會自動判斷你想用的資料型態。壞處:有時會搞錯，js未來可能會盡量與java整合所以... ??? 45.js允許同個陣列儲存不同型態資料 46.陣列內資料為該陣列元素(elements)，資料數目為長度(length) var array\_name = new Array( length ); // length直接輸入數字 var array\_name = new Array( date1 , date2 .... ); 47.陣列內的資料表達式 ``` array_name[index] ``` index 為由0開始的陣列指定位置，最大值為 length -1 陣列的長度表達式 ``` array_name.length ``` ### 運算子 48.運算子( Operators): 算術 Arithmetic /字串 String /邏輯 Logical /位元 Bitwise /指定 Assignment/比較 Comparison /特別 Special 49.**邏輯** 通常是做一些有關布林型態的運算。傳回的值可以是 true 或 false ，如果有算式未被定義，就會傳回 null 。 ![](/files/-LZ0NMZ6-BclNA2CkKU0) ![](/files/-LZ0Nu37SkTn-IKlDNnu) 例子：辨斷能否參加高考 (Alevel exam)，假設參加高考的要求是語言科目合格，或者年滿 21 歲。例子說明：例子中所有變數都是布林型態，參加者年滿 21 歲，經運算後 alevel 就是 true 。 50.**位元運算子 (Bitwise Operators)** 用來做二進制的位元運算。因為位元運算可以說是低階 (Low-level)工作，所以運算得較快，而且有些位元運算子可以做算術運算，例如乘以 2 的倍數或除以 2 的倍數。 ![](/files/-LZ0QqOiDlP63f8OYaT9) ![](/files/-LZ0SjZRqjgoM0r6gcKd) 51.**指定運算子 (Assignment Operators)**將運算後的結果放到某個變數，最常用的就是等號 (=)，還有，指定運算子可以令算式簡單一點。 ![](/files/-LZ0RjkVFNQqk73AG8KK) ![](/files/-LZ0Sw6J-Sp8DdR-PRtO) 52.**比較運算子 (Comparison Operators)**用來比較多兩個算式的關係，例如一個算式是否等於另一個算式。比較後傳回的結果是 true 或 false 其中一個。
![](/files/-LZ0T3k7d6AO7Uqd-23L) 53.**特別運算子 (Special Operators)** 用來做特別或較複雜的運算。 ![](/files/-LZ0TCmXwNtAhsSFc0q-) ### 函數 54.函數其實是一組程序，你可以自行定義它來做指定的工作。在定義了函數之後，當你要執行該函數的程序，只須呼叫它便可。 55.使用函數的好處是可以將一個大的程式分成多個小部份，方便管理及偵錯，還可以讓程式的每個部份都可以享用函數，以減少重覆的程序。 56\. 語法：定義函數 ![](/files/-LZ0VD6Ug-ufRw379ZNG) 57\. 語法：呼叫函數 ![](/files/-LZ0VMbCQqy_-xFVOLF5) 例子說明：這個例子有兩個 **\