Landy Blog
0%

發表於 分類於

繼上一篇，介紹了js中的函式與非同步環境會造成的callback Hell的前因後果，最終需要Promise來解決這個問題的過程後，此篇要記錄怎麼使用Promise物件。

Promise物件

Promise物件包含兩個東西，一個叫reslove 另一個叫reject。
當該Promise執行成功的話，就會去呼叫reslove，失敗的話，就會去執行reject的內容。

Promise物件創建的方法

書中有提供兩種，其實意思差不多
函式運算式用new來創建

1
2
3
4
const FirstPromise = new Promise((resolve, reject) => {
  resolve(某個資料);
  reject('Promise failure');
})

函式回傳new Promise物件

1
2
3
4
5
6
function FirstPromise() {
  return new Promise((resolve, reject) => {
    resolve(某個資料);
    reject('Promise failure');
  })
}
閱讀全文 »

發表於 更新於 分類於

函式

函式是一個物件，所以，它也可以擁有自己的屬性。
它可以被存放在變數、陣列中。

函式運算式-有括號和沒括號的差別

1
2
3
4
5
6
7
function inner() {
  return 'Hello';
}
let a = inner;  // 沒有加括號
let b = inner(); // 有加括號
console.log(a, b);
console.log(a());

從console.log的結果a是直接印出整個inner函式內容，而b是印出inner回傳的內容’hello’。
那最後那一行，a()就可以執行inner函式，故會回傳內容’hello’。
要小心它們之間的不同喔~~~~

ES6箭頭函式

這種函式有以下的特性:
．this變數的強制綁定
．簡短的撰寫方式

接下來，筆記一下箭頭函式可以簡寫的一些特性:

可以忽略return的特性

原本的函式

1
2
3
const plus = function(numA, numB) {
  return numA + numB;
}

像上面這個範例，只有需要return計算的結果的話，除了箭頭函式的內容以外，我們還可以把return忽略。
所以，就會變成下面這樣:

1
const plus = (numA, numB) => numA + numB;

若箭頭函式中的括號中沒有參數是不行忽略的括號的

1
2
const sayhello = () => console.log('hello');
sayhello();

若箭頭函式中的括號只有一個參數的話，可以忽略括號

1
2
const sayhello(msg) => console.log(msg);
sayhello('hello');
閱讀全文 »

發表於 更新於 分類於

JS是一個「事件驅動」的程式語言，必須等到事件被觸發後，才會去執行相對應的內容。

事件機制的原理

事件觸發->去做相對應的內容

事件流程

網頁元素接收事件的順序
分別有以下兩種:
Event Capturing: 事件捕獲 -從document，由上往下傳遞，直到找到啟動元素為止。
Event Bubbling: 事件冒泡 - 從觸發事件的目標元素，由下往上傳遞，直到找到document為止。

那在addEventListener的事件監聽的第三個參數，true代表捕獲，false代表冒泡。

事件傳遞

我覺得在事件流程中的捕獲和冒泡的機制，我最不習慣的是事件會傳遞的部分。阿不就點到誰就該由誰跳出來嗎(誤XDD)
在JS中，事件會因為捕獲和冒泡的機制而往上傳遞 或 往下傳遞，那這類的應用在本章的最後面的事件指派的部分，
你就會感受到事件傳遞的麻煩，阿不是，是事件傳遞的威力囉~~

閱讀全文 »

發表於 更新於 分類於

網頁中主要有三個組成部分，分別為

  1. JavaScript核心
  2. BOM (Brower Object Model)
  3. DOM (Document Object Model)

    BOM 簡介

    a. BOM的核心是window物件。
    b. 它是JavaScript用來與瀏覽器溝通的窗口。
    ex:
    1
    window.alert('Hello');

    DOM 介紹

    JavaScript透過DOM來操控網頁的元素。
    ex:
    1
    document.querySelector('h1').textContent = '標題一';
    閱讀全文 »

發表於 更新於 分類於

接續上一篇還沒紀錄完的部分，繼續記錄。

JS「傳值」與「傳址」機制

基本型別 和 物件型別 互相比較的不同

基礎型別互相比較

1
2
3
4
---基本型別---
var a = 10;
var b = a;
console.log(a === b); // true

在JS中，基本型別我們只看它們的「值」。

物件型別互相比較

1
2
3
var num = {value:10};
var num1 = {value:10};
console.log(num === num1); //false

在JS中，物件型別我們將它們看成「實體」。
雖然，它們的成員屬性是相同的，但是，它們指向的位址是不同的，所以，它們彼此之間是不相同的。

閱讀全文 »

發表於 分類於

函式

函式簡介

當我們有一段程式碼需要重複使用的話，我們就會用一個函式包起來。
所以，每次要使用的話，我們就可以呼叫這個函式就可以囉，而且，也變得比較好維護。

定義函式的方式

a. 函式宣告

1
2
3
4
funtion triple(number){
    return number*numbre*number
}
console.log(triple(2)); // 8

b. 函式運算式
利用變數來儲存函式

1
2
3
4
var triple = function(number){
    return number*numbre*number
}
console.log(triple(2)); // 8

c. 用new Funtion關鍵字建立函式

1
var triple = new Funtion('number', 'return number*numbre*number')
閱讀全文 »

發表於 分類於

這一篇就記錄一下，使用Vue的環境來製作口罩地圖的過程。

安裝相關套件和口罩地圖API網址

step1.
首先先用vue create指令創建你的專案。
step2.
我們先把，原本vue專案中預設設置的Helloworld的元件內容先拿掉。
直接在APP.vue的元件檔中，做所有的事。
step3.
將bootstrap加入你的專案檔中。
所以，輸入指令npm install bootstrap
接著，導入bootstrap。
你就在App.vue的檔案中的引入

1
2
3
4
---App.vue元件檔---
<style lang="scss">
    @import 'bootstrap/scss/bootstrap'
</style>

然後，你就再這個檔案中隨便套一個bootstrap的元件看看你有沒有引入成功囉。

step4.
接著你到課堂上提供的公版 貼到你的App.vue元件檔中。，

step5.
以下這個連結就是口罩地圖的API。
你打開這個api的網址，就可以看到資料個格式和內容囉。

step6.
我們要利用vue-axios這個套件來將以上的api內容，接進來你的專案檔裡面。
接著，我們就輸入指令npm install --save axios vue-axios來安裝這個套件。
再來你要將vue-axios的相關程式碼加入到你的main.js檔案。

1
2
3
4
5
---main.js---
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
閱讀全文 »

發表於 分類於

AJAX 與函式應用教學

這個章節主要是教怎麼用XML物件來將口罩地圖的opendata載入下來，接著，再對載入的資料做相對應的處理。
注意!!!!!!!!!!
其中一個特別需要注意的技巧，是載入loading圖片的作法。
老師的作法是
當資料庫的資料還再載入的時候，顯示loading的圖片，如果，資料源載入完成後，就不用再顯示loading的圖片了。
那切換要不要再放loading圖片的程式碼，你就放在XML物件的onload的函式裡面，因為，onload的函式就是當資料源的資料有完整載入完成後，才會觸發的event，所以，放在裡面是不錯的選擇。

閱讀全文 »

發表於 分類於

什麼是 Cross-Origin Resource Sharing (CORS)？

這個章節在說當你想要擷取線上的開放資料，會遇到CORS的問題。
如果資料源的CORS沒有開放，代表該資料源不支持跨網域的功能，即你無法從你的本機端跟該opendata做互動，即做資料的傳輸與擷取。

你可以利用
這個連結
這個連結，將你的opendata的連結丟到這個測試網站中的Remote URL
的欄位裡面，接著按Send Request按鈕，
你可以看XHR status的數字，
如果是200代表該opendata 有支援跨網域的功能，
如果是0代表該opendata 沒有支援跨網域的功能。

傳統表單輸入介紹

這個章節在教有關AJAX的POST技巧，即我們將像帳號或密碼丟到伺服器端做驗證的動作。
例

1
2
3
4
5
6
7
8
9
<form action="index.html">
   <label for="inputEmail">帳號</label>
   <input type="text" name="account" id="inputEmail">
   <br>
   <label for="password">密碼</label>
   <input type="password" name="password" id="password">
   <br>
   <input type="submit" value="送出">
</form>

你可以看到以上的form的action屬性值是確定表單資料提交的方向，如果不寫則提交當前頁面，而這邊的範例的話，
是直接放當前頁面因為我們沒有要提交該表單。
當你提交了此表單之後，你看你的瀏覽器上放網址中的內容
file:///D:/hexschool/Javascript_lecture/Ajax_practice/index.html?account=you%40gmail.com&password=123

你可以看到index.html? 代表你的當前頁面，而在問號後面接的就是這個表單提交的參數，分別是
account 就是你輸入的帳號內容
password就是放你輸入的密碼

AJAX POST - 以form表單格式傳送 (提供 API 練習)

這個小節是示範，怎麼將資料丟到伺服器端，並從伺服器端回傳的內容，判斷是否該資料是傳送成功或失敗。
例

1
2
3
4
var xhr = new XMLHttpRequest();
xhr.open('post','伺服器端的網址', true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send('email=abcd@gmail.com&password=123456');

以上的程式範例就是將資料post到伺服器端的語法，要特別注意這一行新的指令，
即setRequestHeader這一行的指令就是post API的格式，這個是一般表單輸入的格式。

另外，在xhr的send函式裡面要送哪些訊息，你要先去看你的伺服器端能夠接收那些資料，像這個例題，它能接受的就是email和password的資料。
若以上的操作都成功的話，你再呼叫一次xhr這個物件，readyState應該會回傳4，而在responseText欄位裡面應該就會出現註冊成功的字串內容溜~

從 Chrome 開發人員工具檢視 AJAX POST

你可以利用你的瀏覽器的開發者視窗中的網路這個選項中，
有回應跟請求，可以看到用戶端丟了什麼訊息給伺服器端，
而伺服器端又回應了什麼樣的訊息給客戶端。

AJAX - 以JSON格式傳遞

本小節是在教導如何改用JSON格式把資料傳送給伺服器端做驗證，其實，跟上面的傳統表單傳送的寫法差不多，一點點差異而已
例:

1
2
3
4
5
6
7
8
9
var account = {
   email: 'jaredleto@gmail.com',
   password: '12313'
}
var xhr = new XMLHttpRequest();
xhr.open('post,'https://hexschool-tutorial.herokuapp.com/api/signup',true);
xhr.setRequestHeader('content-type','application/json');
var data = JSON.stringify(account);
xhr.send(data);

以上的範例你可以看到在創XMLHttpRequest物件的方式一模一樣，
不同的部分是setRequestHeader有更動內容改成application/json，就代表我們要上傳json的格式資料給伺服器端。
而我們要傳入物件account的內容，故我們在上傳此物件時，並須把先它轉成JSON的字串格式給伺服器端，才能將它上傳。

由此總結在上傳一般表單格式 和 上傳JSON格式的內容給伺服器不一樣的地方為setRequestHeader的內容
和 上傳之前是否需要把上傳內容做json的字串轉換。
注意~!!在寫json的時候，你要注意json的拚法喔，因為，你會一直寫成
JASON 這是不對的，應該是JSON才對，沒有A啦，不要把它跟頂級超市的JASONS搞混了==

發表於 更新於 分類於

網路請求的過程

在我們了解 Ajax 之前，我們先了解一下，發送網路請求中間會發生什麼事?

什麼是網路請求

當我們在 chrome 上輸入一個 IP ，並按下 enter ，此時我們已經發送一個請求改目標端的伺服器，當目標端的伺服器確認我們的身分沒問題後，
它會去他們自己家的資料庫取出資料，並吐給我們，此時，我們這端的瀏覽器就可以拿到對方吐回來的資料囉。
以上的這個請求和傳輸的過程就是發送一個網路請求會經過的過程。

網頁請求過程

上面我們介紹了網路請求的過程。那經過網路請求，我們會先獲得該目標網站的 HTML 文本檔，接著，瀏覽器會去解析這個 HTML 文本的內容，
若在解析的過程中，遇到需要向外獲取像是 CSS, img, js 這類的檔案，瀏覽器就會對目標資料庫發出請求，而這種透過解析網站的 HTML 文本
所發出的請求，我們就可以稱為網頁請求。
瀏覽器和伺服器之間的傳輸圖

瀏覽器 request Header

當瀏覽器發送請求時，會夾帶一些瀏覽器本身的資訊，像是它是屬於哪一種伺服器、它的 IP 是多少等等的資訊。那放這些內容的地方通常都會在 request header 中，
找得到。

伺服器 response Header

那在伺服器回傳給瀏覽器的資料夾，會有 response Header，那它會夾帶著這個回傳的資料是什麼格式(像是 text/html)，讓瀏覽器可以因應這個格式，去做相對應的呈現。
另外，回傳的資料會放在 response 裡面，像是回傳的 html 文本內容，就會被放在 response 裡面。
記得，response header 和 response 它們回傳的不一樣的喔。

以上的內容就是瀏覽器發送請求給伺服器，然後，在他們之間會傳送什麼樣的文件的內容。
那接下來我們就來介紹 Ajax 在幹嘛吧。

什麼是 AJAX？

AJAX可以達到不需要重新刷新頁面，而達到跟後端取得相對應資料的效果。

課程名稱: 透過 XMLHttpRequest 物件跨瀏覽器撈資料
第一，
我們會先創建一個XMLHttpRequest的物件，並利用這個物件去跟伺服器做互動。

第二，
當XMLHttpRequest的物件創立成功時，我們會利用open這個函式來決定我們是要從伺服器端撈資料過來 或是 丟資料到伺服器端
即

1
2
var ptr = new XMLHttpRequest();
ptr.open('get', '你要擷取資料的網址', true);

上面的第二行程式碼，open的三個參數代表的意義分別為
格式: 最常用的是get (從伺服器端拿資料回來)、post(從本地端丟資料到伺服器端)
網址: 將資料源的網址放到這個欄位裡面
同步 或 非同步: 當此引數為true(非同步) 而 當此引數為false(同步)

第三，
我們可以利用XMLHttpRequest物件回傳的readyState的值，來判斷本地端和伺服器端彼此之間的關係
當readyState = 0，代表XMLHttpRequest物件還沒有完成初始化，還沒有連結到你要撈的資料
當readyState = 1，你用了open()，但你還沒有把資料傳過去
當readyState = 2，偵測到你有用send()
當readyState = 3，loading
當readyState = 4，你撈到資料了，數據已經完全接收

第四，
利用XMLHttpRequest物件的send函式
ptr.send(null);

以上這行在send裡面放入null的原因是因為，我並沒有要送資料到資料端，所以，放null，
而當你使用完send函式之後，你看ptr回傳的readyState的值應該會是回傳4，代表已經撈到資料了，
接著，你再看responseText這個屬性值，應該就有把資料端的資料讀近來了。
而為什麼readyState會直接從1跳到4呢，是因為這次的練習範例的內容很少，
所以，讀取資料端的速度很快，其實是有經過2 和 3的過程，只是太快了，你看不到，所以，才會有這種錯覺~~

AJAX 非同步觀念 (上)

這邊講解XMLHttpRequest物件的open函式的第三個引數的用意
若

1
2
3
ptr.open('get', '你要擷取資料的網址', true);
ptr.send(null);
console.log(ptr.responseText);

若你在open的第三個引數放入true，你會發現在console.log(ptr.responseText) 出現的內容式空的，
若你今天把true改成false時，此時console.log(ptr.responseText)就有資料源的內容。
而以上這個現象就是Ajax同步與非同步的體現
當第三個引數等於true時，代表非同步，不會等資料傳回來，就讓程式繼續往下跑，等到回傳才會自動回傳
當第三個引數等於false時，代表同步，它等資料傳回來，才讓程式繼續往下跑

AJAX 非同步觀念 (下)

這個小節在講解，當你的AJAX是在非同步的狀態下，要怎在資料回傳的時候，將資料或取出來
例

1
2
3
4
5
6
7
var ptr = new XMLHttpRequest();
ptr.open('get','資料源網址',true);
ptr.send(null);

ptr.onload = function(){
   console.log(ptr.responseText);
}

以上這個onload事件，就是用在當AJAX非同步時，當資料回傳時，就可以把資料源的資料擷取回來。

HTTP狀態碼

這小節是在說明你可以利用XMLHttpRequest物件回傳的status屬性值，來判斷你是否有正確地將資料源的資料擷取回來。
當status 是200，代表你是從正確的資料源拮取資料
當status 是404，代表你是從錯誤的資料源拮取資料
例:

1
2
3
4
5
6
7
8
9
10
11
var ptr = new XMLHttpRequest();
ptr.open('get','資料源網址',true);
ptr.send(null);

ptr.onload = function(){
   if(ptr.status == 200){
      console.log(ptr.responseText);
   }else {
      console.log("資料錯誤!!");
   }
}

你可以看到在ptr的onload事件裡面，你可以利用status的屬性值來寫保護，當回傳是200時，才去截取資料源的資料，若不是就顯示資料錯誤的提示訊息。
另外，onload事件是代表加載完成後立即發生，以上面的範例為例，代表當ptr物件加載完成後，才會觸發後面function的內容。