Home Archive for 7月 2021

JS part6_Ajax_axios

Add Comment Edit

 #AJAX:非同步的JS與XML技術

不重整改動頁面的情況下能取得部分頁面資料

-vertical dots->更多工具>網路開發工具->network -> 可以看到網頁有多少個網路請求

載入順序 index.html->img.src(html順序)->all.js(html順序)

 #網路請求狀態碼(由伺服器回傳)

  1. 資訊回應 (Informational responses, 100–199),
  2. 成功回應 (Successful responses, 200–299),
  3. 重定向 (Redirects, 300–399),
  4. 用戶端錯誤 (Client errors, 400–499),
  5. 伺服器端錯誤 (Server errors, 500–599).

 # 3xx為 已有暫存資料 所以不重新抓取 直接從暫存抓 節省記憶體資源

(若要清除重抓 可以打開開發人員工具 對重新整理右鍵 清除快取...)

 #Request 請求  Response回傳

-Chrome->vertical dots->更多工具>網路開發工具->network -> 網路請求->Headers

請求資料: Request Header +Request Data

回傳資料:Response Header+Response  Data

 #AJAX

(1)JS的網路請求原生寫法: XMLHttpRequest (冗長), Fetch(回傳要轉json)


(2)套件，需額外載入JS: axios

#可CDN載入
#axios整理好的response資訊

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function (response) {  //response是axios整理好的資訊
    console.log(response.data);//data本身
    console.log(response.status);//狀態馬
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });
#取出資料後顯示在網頁上https://codepen.io/xarielleex/pen/eYWMpMp?editors=1010

 #Axios非同步

因為在資料還未回傳時，js允許程式先繼續往下跑(防止使用者看到整個頁面空白)，所以可能會有資料來不及回傳、賦值的問題

function內資料還未回傳所以未執行，而下方console.log程式先跑，所以是空陣列



#用函式處理非同步.
https://codepen.io/xarielleex/pen/GRmxopz?editors=1010


#Http請求方法

#POST 

api練習 https://github.com/hexschool/nodejs_ajax_tutorial


#POST 四種常見contentType

請求資料格式Request header contentType

1. application/x-www-form-urlencoded
2.multipart/form-data (請求為檔案)
3. application/json(axios預設,練習的api也適用此)
4. text/xml(記事本)

#練習API


成功CONSOLE會回傳

"message": "帳號註冊成功"


失敗CONSOLE會回傳

 "message": "此帳號已被使用"

-Chrome ->vertical dots->更多工具>網路開發工具->network 

API --> preflight : 先個網址是否支援跨網域有的話執行xhr 
API --> xhr : 請求網址

#自行練習註冊登入功能(同一api)

























Read More»

JS part5_event偵聽事件_forEach

Add Comment Edit

 

#event偵聽事件

※addEventListener

※偵聽事件搭配DOM

※CHROME瀏覽器

右鍵-->檢查-->EventListener分頁可查看網頁中的監聽事件
console.log(e);//e會回傳點擊事件的物件(紀錄點擊時的詳細資訊eg.點擊座標等)

※nodeNmae :知道此目標在目前 DOM 的 HTML哪個標籤(only tag name)

※e.target :知道此目標在目前 DOM 的 HTML的標籤位置(整段tag)

※nodeName+e.target 抓到我要的位置(可能用重複的class name)

   nodeName被包在其他標籤裡面抓不到需要先e.targe再nodeName

※e.preventDefault :取消默認(預設)的觸發行為

#forEach

let data=[30,31];//一筆資料30的陣列
data.forEach(function(item,index,array){ //forEach陣列會自動產生帶入item,index,array這三參數(若沒用到可省略)
console.log(item,index,array);//item當下這筆資訊;index資料筆數;array讀取陣列狀態
//30,0->(2)[30,31]
//31,1->(2)[30,31]
})





Read More»

JS part4_function_DOM

Add Comment Edit

 

#函式function

※函式宣告

function sayHello(){ //函式宣告
 console.log("Hello");
 Shakehand();//函式中執行函式
}
function Shakehand(){ //函式宣告
console.log("Shake hand");
}

sayHello();//執行

※函式參數、回傳return

function calculate(num1,num2){ //函式宣告
 return num1+num2;
}
 let total =calculate(1,2);//total為3

※return可以中斷函式的執行

#DOM(Document Object Model)

※<script>的英方在<html>之後，這樣才讀取的到解析完的document

※抓取document網頁元素

querySelector選擇器:只會抓第一個

 const el=document.querySelector('h1');//選取h1
 const el2=document.querySelector('.header');//css選擇器 選取header class

querySelectorAll選擇器:可抓多個

 const el=document.querySelectorAll('h1');//el會以陣列回傳el[0].el[1]..選取

textContent文字寫入

el.textContent="new word"//複寫h1文字

innerHTML插入標籤:會清空內部所有物件再插入(put?)

innerHTML可以變數加入(字串改成變數或字串穿插變數)

el2.innerHTML =ˋ<h1 class="header2">h1標題</h1>ˋ//可以單引號雙引號包覆;插入class為header2的h1段落
el2.innerHTML =ˋ<h1 class="header2">${name}</h1>ˋ

setAttribute新增標籤屬性

const link=document.querySelector('a');
link.setAttribute("href","https:...");//更換連結屬性的連結網址("屬性","加入參數")

 .innerHTML(取出標籤內容)、.textContent(取出文字)、.getAttribute(取出屬性)取值

console.log(link.getAttribute("href"));//網址
console.log(link.innerHTML);//link<a>內標籤//輸出<span>123</span>//原html<a href=..><span>123</span>></a>
console.log(link.textContent);//123

※表單元素取值












Read More»

JS part3_比較邏輯運算子_陣列與物件

JS part3_比較邏輯運算子_陣列與物件
Add Comment Edit


 #比較邏輯運算子

>  <   >=   <=  ==   !=
let a = 2 > 1;//也可以這樣表現
console.log(a);//輸出true

 # == 與 === 的差別

==    !=會幫忙自動轉型
===  !==不會自動轉型，會判斷型別(比較嚴謹)
let a = 1;
let b = "1"; 
console.log(a==b);//輸出true
console.log(a===b);//輸出false
console.log(a!=b);//輸出flase
console.log(a!==b);//輸出true

 #陣列與物件

※陣列

可以放入混和資料!
let ary=[];//宣告方式
ary=['a',1,true];

※讀取陣列資料

※寫入陣列資料(ary[0], push, unshift)

let ary=[];//宣告方式
ary[0]='a';//['a']
ary.push("b");//新增在陣列最後->ary[1] ['a','b']
ary.unshift("c");//新增在陣列最前面['c','a','b']

※刪除陣列資料(pop, shift, splice)

ary.pop();//刪除陣列最後一項資料
ary.shift();//刪除陣列第一項資料
ary.splice(1,1);//刪除特定資料(陣列起始位置,包含自己刪除幾項資料) 輸出['C','b']

※物件:有許多屬性組成

※物件格式

let person={ name:"Ariel", age:18 ,pet:true};//屬性:值

※讀取物件內值

console.log(person);//回傳整個物件
console.log(person.age);//取出18
console.log(person['age']);//另一種方式
let a='age';
console.log(person[a]);//另一種方式;if JSON格式 若屬性名稱為01就無法使用peron.01

※新增物件屬性

person.sibiling=['Eric','Tom'];

※刪除物件資訊

delete person.pet; 
console.log(person.pet);//undefined

※陣列混和物件

let person=[
{
  name:"Ariel",
  age:18,
  pet:true
 },
 {
  name:"Eric",
  age:15,
  pet:false
 }
]

※讀取陣列混和物件

console(person[0].name);//Ariel

※傳遞資料的共通格式:常用JSON

CHROME網頁JSON友善介面套件

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related?hl=zh-TW

※物件裡面還能包物件!

物件以.選取；陣列以[ ]選取
let Ariel={ 
sex:female,

 dog:{
 name:"Small",
 age:2,
 },
 cat:{
  [
 {
  name:"Meowmeow",
 age:5,
 color:"black"
  },
 {
 name:"leeya",
 age:3,
 color:"orange"
 }
]
 }

}
console.log(Ariel.dog.name);//Small
console.log(Ariel.cat[1].age);//3


Read More»

JS part2_字串_其他變數型別

JS part2_字串_其他變數型別
Add Comment Edit

 #環境vscode

瀏覽器只會執行html檔<--所以 index.html載入all.js

 #顯示資訊

    印出資訊console.log(a,b);

    彈跳視窗alert(a);

#字串宣告

成對單引號 或 成對雙引號 包覆皆可
差別為弱字串含有單引時，最外層以雙引號包覆(或內雙外單)
let a = "let's go";

#字串相加

let b = 'shall we?';
console(a+'    '+b) //let's go    shall we ( '   ' 內為空白 )

#typeof  查詢變數型別

#自動轉型

字串+數字→還是字串

let name='Ariel';
let age=18; 
let total=name+age
console.log(typeof total);//輸出string
//有些情況下會自動轉型使之能以字串形式相加

#NaN (非數字)

let total=name*age;//字串*數字
console.log(typeof total);//輸出NaN

#字串處理方式

length() 查詢長度(字元數) !!無法接受null值(a不可為null)

a.length("30");//字串轉型為數值

trim() 減去空白 !!無法接受null值

a.trim();//字串轉型為數值

#樣板字面值 template literals

let content="你好我是"+name+"我現在"+age+"歲";

ES6寫法

let content=ˋ你好我是${name}，我現在${age}歲ˋ; //利用ˋ反斜單引號包整個字串，${}放入變數

#布林值true/false

#undefined(尚未被賦予值)

let a;
console.log(a)//輸出undefined

#null (有被賦予值，事告知為空值)

let c=null;
console.log(c);//輸出null

#字串轉數字parseInt()

let num=parseInt("30");//字串轉型為數值

#數字轉字串toString()

let a=25;//number
let word=a.toString();//"25"數值轉型為字串





Read More»
訂閱： 文章 ( Atom )