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)一個程式未必一定要由上到下執行的, 我們可以跟據一些條件來控制一個程式執行那一個部份, 亦即是控制它的流程。

  1. if

  2. if ... else

  3. for

  4. while

  5. break

  6. continue

71.for

72.while

73.continue

74.中階JS (先告一段落)到時再補

75.

Last updated