JS-網頁前端工程入門(一萬字)

Javascript 簡介

現代網頁的必需品
Java V.S Javascript

接下來他介紹了可以在HTML檔案裡寫入JS的其中一種方式如下:

Javascript 變數與運算子

資料: 數字字串布林值物件
變數: 可存放資料的空間並且它可以命名
運算子: 可對資料做操作的符號

單行的註解以及多行註解:

數字字串(需要””包裹或是’’包裹) 布林值

變數

需要宣告並且賦予值之後才能跑
等號右邊的值被抓取給變數
可以被覆蓋，跟文章一樣有順序由上至下

運算子

常見的有加減乘除

單元運算 ++把數值加一
result++ => result = result + 1

布林值

比較運算

一個 = 是指派
兩個 = 是相等的值

也可以用變數做運算

輸入、輸出

使用者有感的程式:

輸入: prompt(提示語,預設值)-> 程式做運算 -> 輸出:alert(資料)

prompt的效果裡面的提示語是字串”請輸入數字”，”1”就是預設值

一個簡單的可以跟使用者互動的程式:

流程控制

判斷式
迴圈

第一個: if

if(){}

當小括號的布林值為true的時候會跑後面大括號的程式，如果為false則跳過

像這邊就會讓使用者輸入值並去判斷大小，再根據判斷內容去決定是否跑後面的程式

第二個: else

當if後面的比較式出錯之後就會跑else

第三個: else if

會一直做判斷如果都不是true的話則執行else

一個簡單的四則運算使用上面所學:

一個重點在於prompt會要求輸入字串所以必須做資料型態轉換

迴圈

while迴圈(跟if不一樣的地方在while會一直跑)

下圖就是個很好的while的範例，他會跑50遍在n變成51的時候跳脫迴圈被印出51

另一個很常見的1+~100:

do 迴圈

還有個do 迴圈跟while不一樣的是do 一定會跑至少一次，while如果條件不成立就一次都不會跑。

下圖可以觀察出do 的執行式在上面所以他一定至少會跑一次程式

for迴圈

第一個分號之前initializes整個loop，同時定義binding
第二個部分check整個loop要不要繼續跑
最後一個部分更新整個loop狀態在每一次迴圈結束之後

break 強制跳出迴圈

直接跳出迴圈印出50:

continue 強制進行下一次的迴圈

因為continue會強制進行迴圈所以下方的x被省略了25次也就是100裡面整除4的數字的數量所以印出75

迴圈仔細新手教學

計算1+~+50:

建議直接把數字帶進去可以幫助理解:

這邊來理解continue:

觀察下方追蹤的數字可以發現x必須執行兩次才會+1一次，所以印出x是50

函式教學

函式基礎

內建函式

人家內建好的程式碼，例如:
alert();

設計階段

當多個參數的時候可以使用(,)隔開

function test(message//參數名稱){
//函式的本體
    alert(message)
}

呼叫/使用階段

1	test("Helloe World"//傳入函式的參數資料);

這邊的result因為上方function沒有輸入return回傳值，所以下面的alert(result)會回傳undefined

因此這邊要介紹到reture，他會把函式本體跑的結果回傳到呼叫的位置，這樣下方的alert(result)就會回傳7瞜!

return回傳明確可以做些甚麼呢?可以再利用return回傳到呼叫位置，再去做運算結果會得掉210!

整合範例

因為函式就是設定一個方法來做重複使用，所以數字上面不能寫死，用max來代替之後輸入max值之後就可以用在其他地方了

函式變形與名稱空間

函式變形

創造函式有兩種方法:

第一種就是上面介紹的創造函式

第二種比較像是使用變數指派函數給變數

所以她是可以這樣使用的像是變數一樣改變指派的內容一樣可以跑這個函式
test後面的add就代表函式的本體(因為她沒有做呼叫)

判別x後面的資料是什麼他就可以做甚麼事情

函是創造新的名稱空間

變數找不到往外找

!!外部的程式碼不能使用內部的變數!!

物件object

建立物件:

var point = new Object();

point.x=3; //物件裡面裝的東西不是函式就是屬性
point.y=4;
point.getPosition=function(){//如果是函式就是方法
alert(this.x+this.y);
};

//使用物件

//這邊跟函式的呼叫很像
point.getPosition();

綜合範例

使用建構式:

建構式就是要取代設計的部分讓未來要產生類似的物件的時候會更輕鬆

建構式的函式呼叫必須加上new

紅框框的部分是讓這個函式可以讓複數的變數呼叫

HTML DOM

基本教學

然後有個小地方windows這個部分可以不寫程式一樣可以正常執行

這張圖特別重要這張圖就代表DOM

下圖可以看出那個樹狀圖出現在程式碼中並且加上一個innerHTML去修改裡面的內容:

但是他修改整個body會導致泛用性不高因此可以這樣改:

使用getElementId的工具來取的id來做修改這樣子就到處都可以用摟!

剛剛上面都是修改內容其實還可以修改CSS:

這邊有個重點因為CSS裡面有很多功能有包含(-)JS不能使用，因此都改成字首大寫例如:font-weight會改成fontWeight

選單操作開合範例

使用onclick在HTML裡面，並且設定id去操作:

不過在搭配class 選擇器使用之後可以讓他更精簡:

接下來當選單不只一個需要開闔的時候就可以放入編號:

並且在選單處的id放入編號就可以針對點擊的選單收放摟!

事件處理

基本教學

基本上任何標籤都可以加上事件處理:on+事件的名稱

當使用者對畫面做出動作的時候，程式必須偵測到這個動作並且做出反應

最簡單的就是點擊onclick:

類似CSS裡面的hover功能:

onmouseover

onmouseout

靜態的事件處理器:

直接寫入HTML裡面，不推薦這樣寫

動態的事件處理器:

必須先在要處理的tag裡面設置id，這邊是設置”btn”

下方的addEvenListener是比較好的寫法

有很多的功能參數使用在事件裡面，例如: click, mouseover, focus, blur….

MDN網站:事件參考

事件物件的取得和使用

這是個簡單的跳出式窗hello的程式在你點擊瀏覽器之後

function init(){ // 這邊這個init會對應到HTML中tag裡面
    var btn=document.getElementById("btn");
    var handler=function(){ // 註冊函式
        alert("hello");
    };
    btn.addEventListener("click", handler); // 註冊事件處理器
}