菜鳥資訊管理師 x 菜逼八日記

Home Archive for 2021

JS part6_Todolist

7月 29, 2021 Add Comment Edit

#Todolist

getAttribute取出屬性:要先取得當前標籤

data- 屬性

JS part6_Ajax_axios

7月 26, 2021 Add Comment Edit

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

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

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

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

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

資訊回應 (Informational responses, 100–199),
成功回應 (Successful responses, 200–299),
重定向 (Redirects, 300–399),
用戶端錯誤 (Client errors, 400–499),
伺服器端錯誤 (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

CODEPEN

成功CONSOLE會回傳

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

失敗CONSOLE會回傳

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

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

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

API --> xhr : 請求網址

#帳號註冊練習

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

JS part5_event偵聽事件_forEach

7月 17, 2021 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]
})

JS part4_function_DOM

7月 15, 2021 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

※表單元素取值

7月 10, 2021 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

7月 10, 2021 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"數值轉型為字串

SASS/SCSS初介紹

6月 29, 2021 Add Comment Edit

＃SASS:用來管理CSS!!管理繁複重複的語法!

(css都寫在sass裡面,且單一scss檔可以抽出運用在下一專案中)

＃網頁(瀏覽器)只看得懂CSS

＃SASS→需透過編譯產生all.css

＃SASS提拱兩種寫法SASS,SCSS(較相似於CSS,較常見)

6月 28, 2021 Add Comment Edit

＃宣告變數方法:let、const、var

＃基本型別

查詢資料型別 typeof

let a = 123;let b = -1;let c = 1.34;
  console.log(typeof a);//輸出"number"
  console.log(typeof b);//輸出"number"
  console.log(typeof c);//輸出"number"

＃宣告變數:let 允許重新賦值

(!!可隨意更改其內容的區塊區域變數)

let a = 456;
  console.log(a);//輸出"456"

＃宣告變數:const 通常不允許重新賦值(無法修改)

(!!只可讀取不可變常數)

 const a=1;
  console.log(a);//輸出"1"
       a=2;
  console.log(a);//"error"

＃宣告變數:var 不嚴謹(不建議使用)(目前多用const,let)

(!!可隨意更改其內容的變數)

＃宣告變數之特性

(1)開頭不可為數字
(2)區分大小寫
(3)支援 _ , $ ,中文
(4)不可以保留字命名

4月 11, 2021 Add Comment Edit

今天又接到一個難題了，要把之前在sybase操作的查詢在vs以web form形式讀出來，寫回去。

其實很久之前就該學ㄌ只是現在帶我的人才教我，一個小時的快速講解，暈，每次都好趕，這是今天下午的任務，希望我今天能回家QQQQ。

阿，今天邊聽邊困惑，問了才知道其實現在比較不支持join的方法查詢，(sql server好像也比較不支援)，傾向單個單個資料表查詢，哭啊，我用了那麼久，一開始分開，後來想說要合起來先join，好ㄌ現在又要分開ㄌ..........

這樣形式的問題其實就在我每天while迴旋式的循環.........................................