2019/0217/huli_half Developer
基礎
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引入
<html>
<head>
<link rel="stylesheet" type="text/css" href="cool.css">
</head>
<body>
...
</body>
</html>10.black區塊元素(ex.div、p...):佔用整個區塊的空間(可設定高寬/上下距)。
11.inline行內元素(ex.span、a...):強制佔用標籤本身(text/img)的空間/會蓋過其他人(高寬固定不可設置)。
12.inline-block讓元素不獨佔一行又可設置其屬性
13.每個元素都有預設的display但還是能用css修改但只是不建議。ex.div變成inline，span轉為black
14.black可以看成一個box，具有長寬、內距(padding)、外距(margin)，框線(border)
14.HTML相同不同的化妝術(CSS)可以打造無數種截然不同的網頁
15.但是CSS雖然可以達成有動畫/變化但是並無法讓使用者與網頁互動，
想要互動就必須寫點小程式=>JS!!
JavaScript
17.Java與JavaScript的關係就跟與龍共舞中周潤發與周星馳的關係一樣
18.JavaScript如同CSS會獨立成一個檔案再引入
19.JS為物件導向語言，物件/事件/功能
A.在程式裡取得按鈕
var btn = document.querySelector('#btn');B.監聽按鈕的click事件
btn.addEventListener('click', onClick);C.跳出彈出式視窗
function onClick (){alert('click!');}20. 匿名函式 / callbackfuntion 遞迴
21.學到這邊JS卡住了先看以下
基礎
22.以往沒有JS通常利用CGI做媒介，將客戶端所有資料傳置伺服器端，檢查完有錯在回傳客戶端直到正確，非常考驗伺服器功率，直到有了JS可以在客服端完成部分任務。
23.JS大小寫有不同的意義
24.嚴謹寬鬆其實都是在形容該語言中變數型態定義
25.<!- - - -> 其實是HTML的註解標記，一些舊的網頁不支援JS會直接顯示JS代碼，而//為JS註解標記，合體則為<!- - XX //- ->! ， 後半段的 //- ->!則是讓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.寫在</html>後面，好處是不會影響到<html>內容，適合一班免費網頁供應商置入廣告。
34.將js放入另一個檔案的好處有二1.所有的html檔案只需要加入這句就可以享用library.js內的js，2.當瀏覽器不支援js時就不用下載js檔案。
35.物件與物件利用.串接，( )中都是方法，{ }中為函式，" ' ' "中間為字串，; 結束這段
36.noscript 為當網頁不支援js時會顯示的內容 (一定要寫在body，才會顯示在頁面)
物件
37.JS為瀏覽器的物件導向式語言，即是瀏覽器內的任何東西都視為物件，而物件又包含其他物件。
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
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 。
例子：辨斷能否參加高考 (Alevel exam)， 假設參加高考的要求是語言科目合格， 或者年滿 21 歲。
例子說明：例子中所有變數都是布林型態， 參加者年滿 21 歲 ， 經運算後 alevel 就是 true 。
50.位元運算子 (Bitwise Operators) 用來做二進制的位元運算。 因為位元運算可以說是低階 (Low-level)工作， 所以運算得較快， 而且有些位元運算子可以做算術運算， 例如乘以 2 的倍數或除以 2 的倍數。
51.指定運算子 (Assignment Operators)將運算後的結果放到某個變數， 最常用的就是等號 (=)， 還有， 指定運算子可以令算式簡單一點。
52.比較運算子 (Comparison Operators)用來比較多兩個算式的關係， 例如一個算式是否等於另一個算式。 比較後傳回的結果是 true 或 false 其中一個。
53.特別運算子 (Special Operators) 用來做特別或較複雜的運算。
函數
54.函數其實是一組程序， 你可以自行定義它來做指定的工作。 在定義了函數之後， 當你要執行該函數的程序， 只須呼叫它便可。
55.使用函數的好處是可以將一個大的程式分成多個小部份， 方便管理及偵錯， 還可以讓程式的每個部份都可以享用函數， 以減少重覆的程序。
56. 語法： 定義函數
57. 語法：呼叫函數
例子說明：
這個例子有兩個 <script> ， 一個在 <head> 範圍， 另一個在 <body>範圍。
在<head>範圍內的<script>定義了一個welcome函數，而在<body>範圍內的<script>就呼叫 welcome 函數。
58.參數 : 有時我們希望函數在不同的情況下有不同的結果， 因此會用參數。 將參數傳入函數， 成為函數內的變數， 就可以根據這些變數的內容來做不同的工作。
59. 定義一般函數的寫法：
例子說明：
student("Tom", 18, true); 呼叫 student 函數， 同時將 "Tom", 18 和 true 分別傳入 student 函數內的 name , age 和 is_graduated 三個變數。
60.傳回資料 : 函數也可以傳回 (return) 資料， 通常這些資料是該函數的運算結果。
傳回資料的寫法
61.變數的範圍 : 如果你在函數內定義一個變數， 那就只有該函數可以存取這個變數。
62.如果你定義一個變數的地方是在 <script> 範圍內， 但不是在任何函數內， 那麼該個變數就可以被整頁來儲取， 包括不在 <script> 以內的範圍。
事件
63.事件是由系統轉化使用者的動作或系統訊息而得來的。 使用者的動作例子包括： 按下滑鼠鍵、確定送出表單等。 而系統的動作包括： 當一頁完全載入， 或瀏覽器要離開某頁等。 系統會將每個動作轉成一個事件， 然後送到程式， 我們便可以跟據不同的事件來設計不同的工作。 這種工作模式就叫做事件處理 (Event Handling)， 而負責處理事件的名稱就叫做事件處理者 (Event Handler)。
64. 事件處理的好處就是不用在主程式內檢查某事件有否發生， 我們只須把要做的工作連繫到事件， 當某事件真的發生了， 系統就自動把這個訊息送到程式， 那就會自動執行要做的工作了。
65.JavaScript 的事件處理者通常是連繫著物件的， 因此不同的物件就支援不同的事件處理者。
66.把函數指定到事件 : 我們通常把那些在某事件發生後要做的工作寫成一個函數， 不過如果你的工作很簡單， 可以不用寫在函數內。
67.語法：把事件處理者寫成一個物件的 HTML 標記屬性， 而屬性內容就是要執行的 JavaScript 敘述
68.this 其實是一個物件， 它是指當時正在使用中的物件。用 this 的好處就是不用知道該物件的名稱也可以使用該物件。
69.終止事件 : 你可以中途停止一個函數或事件。
語法：終止函數
70.流程控制 (Flow Control)一個程式未必一定要由上到下執行的， 我們可以跟據一些條件來控制一個程式執行那一個部份， 亦即是控制它的流程。
if
if ... else
for
while
break
continue
71.for
72.while
73.continue
74.中階JS (先告一段落)到時再補
75.
Last updated
Was this helpful?