WebDesign 心得綜整

2022年9月1日星期四

JS - 箭頭函式的用法 => , 即函式的簡約寫法

目的: 了解 JS 箭頭函式的用法 =>

處理說明: 1>箭頭函式 => , 即 function 的簡要 statement

2>var func = function (x) { return x + 1 }

可簡約寫成 var func= (x)=>x+1

3>若用 {} , 則需自行 (return 傳回值)

var func1=function (x) { return x+1}

需簡約寫成 var func1=(x)=>{return x+1};

--> 若簡約寫成 var func1=(x)=>{x+1}; , 會無傳回值

JS - class 的寫法 - 和 prototype的關係, 如何用 extends 達到繼承 (inheritance) 效果

目的: 了解 JavaScript class 的寫法及繼承(extends) & static 的用法

處理說明: 1>JavaScript class 的本體是函式(function) ,

class 只是宣告函式的一種特別的語法。

2>class person_child extends person_parent{

}

-->JavaScript將 person_child.prototype 的 [[Prototype]] 設為 person_parent.prototype，

[傳統寫法] [class寫法]

一.傳統寫法 - 物件屬性 - 以 prototype 定義屬性
1>傳統宣告 Object ＿的方法 - function ObjectName(par_param) { }
1>>定義物件 - 以 function 函式定義物件 - constructor() , this.property=xxxx;

function Person(par_name){
this.name=par_name;
}

2>>定義屬性 Object.prototype.property

Person.prototype.name="Defaultname";

3>>定義方法 Object.prototype.property=function() { }

Person.prototype.SayHello=function(){
console.log(" Hello !! "+this.name);
}

4>實際建立 Object - new Constructor
var Person1=new Person("parent Micro Tsai");
Person1.SayHello();

--> 執行結果 :

Hello!! parent Micro Tsai

二.傳統宣告 Object 的＿inherit 方法 - child.prototype=parent.prototype;

1>>宣告 person_son Object

function person_son(par_name,par_age){
this.name=par_name;
this.age=par_age
}

2>>person_son 繼承自 person
//person_son.prototype.__proto__ = Person.prototype;

person_son.prototype = Person.prototype;
person_son.prototype.ShowName = function(){
console.log("My name is "+this.name);
}
person_son.prototype.ShowAge = function(){
console.log("My age is "+this.age);
}
var person_son1=new person_son("child Micro Tsai",28);
person_son1.SayHello(); //person_son1未定義 SayHello ,因繼承自 parent ,所以可以用 SayHello
person_son1.ShowName();
person_son1.ShowAge();

--> 執行結果:

Hello !! child Micro Tsai

My name is child Micro Tsai

My age is 28

三.class 的物件寫法

1>宣告 class - class class_name{ constructor(){}; SayHello(){}; }

class Person_parent{

constructor(par_name){

this.name=par_name;

}

SetName(par_name){ this.name=par_name; }

SayHello(){

console.log(" Hello "+this.name);

}

Person2=new Person_parent("Micro Tsai 2");

Person2.SayHello();

Person2.SetName("Micro Tsai 3");

Person2.SayHello();

--> 執行結果:

Hello parent Micro Tsai

Hello parent Micro Tsai SetName

2>class的繼承子class extends 父class

class Person_child extends Person_parent{

constructor (par_name,par_gender){

super(par_name); //call parent.constructor

this.gender=par_gender;

}

SetAge(par_age){

this.age=par_age;

}

ShowAge(){

console.log(this.name+" age is "+this.age);

}

SayHello(par_name){

console.log("please Jump !! "+par_name);

super.SayHello(); //call parent function SayHello();

}

ShowGender(){

console.log(this.name+" gender is "+this.gender);

}

Person_child=new Person_child("Micro Tsai 5","Male");

Person_child.SayHello(Person_child.name);
Person_child.SetAge(57);

Person_child.ShowAge();

Person_child.ShowGender();

--> 執行結果:

please Jump !! Micro Tsai 5

Hello Micro Tsai 5

Micro Tsai 5 age is 57

Micro Tsai 5 gender is Male

2022年8月31日星期三

JS Callback function - function 的執行順序

目的 : 認識 callback function 的定義及用法

處理說明: JavaScript 是一個「非同步」的語言，

當我們執行程式時， for 迴圈並不會等待處理作業(statement)結束後才繼續，

而是在執行階段就一口氣將statement執行完。

一. callback function 的定義: call function , 只有滿足某個條件(event 發生時)才會被執行

Callback function 跟一般的函式沒什麼不同，差別在於被呼叫執行的時機

Office.addEventListener( '電話響', function(){ /* 接電話 */ }, false);

Callback function就是「把函式當作另一個函式的參數，透過另一個函式來呼叫它」

Ex1> window.setTimeout( function(){ ... }, 1000);

Ex2>

var handler = function() { /* 接電話 */ };
Office.addEventListener( '電話響', handler, false);

Ex3:

var funcA = function(){
console.log('function A');
};

var funcB = function(){
console.log('function B');
};

funcA();
funcB();

--> 先印 function A , 再印 function B

Ex4:

var funcA=function {
window.setTimeout(function(){ console.log('function A'); },

Math.random()*1000);
}

var funcB=function {
window.setTimeout(function(){console.log('function B'); },
Math.random()*1000);
}

funcA();

funcB();

--> 不確定 function A / function B 先印

Ex5: 確保 function A 先印, 再印 function B

var funcA=function(par_callback) {
window.setTimeout(function(){

console.log('function A');

if (typeof par_callback="function"){

par_callback();

}

Math.random()*1000);

};

var funcB=function(){

window.setTimeout(function(){

console.log('function B');

Math.random()*1000);

};

funcA(funcB);

--> 無論 funcA 在執行的時候要等多久，

funcB 都會等到 console.log('function A'); 之後才執行。

Ex6 : 在五秒鐘之內，每秒鐘依序透過 console.log 印出： 0 1 2 3 4

for (var i=0;i<5;i++){

window.setTimeout(function(){ console.log(i); }

,1000*i);

};

//執行結果 : 5 5 5 5 5

--> JavaScript 是一個「非同步」的語言,執行程式時，

for迴圈並不會等待處理作業(statement , window.setTimeout )結束後才繼續，

而是在執行階段就一口氣將statement執行完。

--> 切分變數(i)有效範圍的最小單位是 "function"

--> 因為函式未宣告變數 i , 所以每次執行 console.log(i); 的 i 變數是去函式「外層」取得
因 function() 內未宣告 var i, 所以會在函式外層取得 (此時for迴圈已跑完 i=5) , 所以印出 5

for(var i =0; i<5;i++) --> 宣告 i 為全域變數

二.IIFE(Immediately Invoked Function Expression, IIFE)

一般宣告方式: doit(x);

IIFE宣告方式: 函式宣告當下即呼叫 , 傳入參數 i , 即傳入當時的 i 值(0,1,2,3,4,5)

(function doit(x){ console.log(x);} ) (i)

--> for (var i=0;i<5;i++)

(function doit(x){ console.log(x);} ) (i);

JS Array 陣列宣告 - push,pop - unshift,shift

目的: 說明陣列 (Array) 的宣告及使用

陣列可以看作是一種特別的「物件」，同樣是零至多個元素的集合

陣列內可以是原始的資料類型、其他陣列、函式等等

陣列是個有順序性的集合，且只能透過 [] 來存取。

陣列的索引是由 0 開始計算的

一.陣列宣告的3個方法:

1>方法1: new Array();

var a = new Array();
a[0] = "apple";
a[1] = "boy";
a[2] = "cat";
a.length; // 3

2>方法2: []

var a = [];
a[0] = "apple";
a[1] = "boy";
a[2] = "cat";
a.length; // 3

3>方法3: ["apple","boy","cat"];

var a = ["apple", "boy", "cat"];
a.length; //3

二.陣列的新增/刪除

1>Array.legth 可以修改

var a = ["apple", "boy", "cat"];

a.length; // 3

a.length = 1;

console.log(a); // ["apple"]

a.length = 3;

console.log(a); // ["apple", undefined, undefined]

2>Array元素可以任意指定

var array = ['a', 'b', 'c'];

array.length; // 3

array[7] = 'z';

console.log(array); // ["a", "b", "c", undefined, undefined, undefined, undefined, "z"]

3>在陣列末端新增/移除元素時，可以透過 ARRAY.push() ; Array.pop()

var array = ['a', 'b', 'c'];

array.length; // 3

array.push('d');

console.log(array); // ['a', 'b', 'c', 'd']

array.pop(); //傳回 "d"

console.log(array); // ['a', 'b', 'c']

4>在陣列前端新增/移除元素時，可以透過 ARRAY.unshift() ; Array.shift()

var array=['a', 'b', 'c'];
var Tmp_el=array.shift();
console.log(array); // ['b','c']
Tmp_el=array.shift();
console.log(array); // ['c']
Tmp_el=array.unshift(4,"e");
console.log(array); // [4,"e",'c']

JS - - Object,Array的宣告 , Object 基本型別及物件型別 - Object 的建立 - 屬性的存取 - typeof 型別的判斷 - == ===

JavaScript 內建的型別主要可以分成基本型別 (Primitives) 與物件型別 (Object) 兩大類。

基本型別又分成 string、number、boolean、null、undefined 幾種，
除了以上幾種之外，其他都可以歸類至物件型別 (Object)

一.物件的定義 - Object :

「An object is a collection of properties and has a single prototype object.」

一個物件可以是個零至多種屬性的集合，而屬性是鍵 (key) 與值 (value) 之間的關聯。

一個屬性的「值」可以是某個基本型別，也可以是另一個物件，甚至可以是一個函數。
物件可以是瀏覽器預先定義好的，當然也可以是由自己定義物件的屬性與內容

1>Object 的宣告方式:

var person={} //或是 var person=new Object();

person["NAME"]="蔡聰進";

person["GENDER"]="male";

2>Array的宣告方式:

var tempData=[];

tempData.push(rec);

1>建立 Object 的2種方法如下:

方法1> new Object() 方式,建立物件 , 再設定物件屬性

var person = new Object();

person.name = 'Kuro';

person.job = 'Front-end developer';

person.sayName = function() { alert( this.name ); };

方法2> JSON 方式 , 建立物件

var person = {

name: 'Kuro',

job: 'Front-end developer',

sayName: function() { alert( this.name ); }

};

-->

直接用大括號 { }，即可建立起一個新的物件，並且在建立物件的同時直接指定屬性至該物件內。
這種建立物件的方式稱為「物件實字 (Object literal)」，同時也是 JSON 格式的核心語法。

二.屬性的存取 , 建議用 Object["Name"]

存取屬性的2種方法如下:

var person = {

name: 'Kuro',

job: 'Front-end developer',

sayName: function() { alert( this.name ); } ,

"001" : "Hello",

};

1>由.Name存取

person.name; // 'Kuro'

person.sayName(); // ƒ sayName()

person.001; // SyntaxError: Unexpected number

2>由 [Name]存取
person["name"]; // 'Kuro'

person["sayName"]; // ƒ sayName()

person["001"] // Hello

--> 屬性的新增及刪除

person["age"]=50;
console.log("person[age]]",person["age"]); //50
delete person["age"];
console.log("person[age]]",person["age"]); //undefined

--> 判斷屬性是否存在

方法1: ==undefined

if (person["age"]!=undefined){

console.log("property age exist");

}

方法2: (age in person) , true/false

if (age in person){

console.log("property age exist");

}

方法3: person.hasOwnProperty('age')

if (person.hasOwnProperty('age')) {

console.log("property age exist");

}

-->

if (person["name"]!="undefined"){
    console.log("1 property name exist");
};
if ("name" in person){
    console.log("2 property name exist");
};
     if (person.hasOwnProperty('name')) {
    console.log("3 property name exist");
};

三.型別的判斷 - typeof - typeof 運算子回傳的東西都是「字串」

typeof true; // 'boolean'

typeof 'Kuro'; // 'string'

typeof 123; // 'number'

typeof NaN; // 'number'

typeof { }; // 'object'

typeof [ ]; // 'object' Array

typeof undefined; // 'undefined'

typeof window.alert; // 'function'

typeof null; // 'object'

--> typeof Array --> 得到 "object" , 非 array

由 Array.isarray([]) 判斷 //true

Array.isarray( [4,"a","b","c"] ); //true

Array.isarray("abc"); //false

四.== === 比較

var a = 10;

var b = "10";

console.log( a == b ); // true

console.log( a === b ); // false

console.log(null == undefined) ; //true

console.log(null === undefined) ; //false

-->

在 JavaScript 這門程式語言中，大家會提倡盡量使用 === 來取代 == 的原因。

-->

!= 的版本會做自動轉型，而 !== 則不會做自動轉型。

JS function - var 變數宣告, 及scope變數的範圍 - 全域變數/區域變數

function 的宣告 , 如下兩種均可

1>function doSomeThing(y){}

2>var doSomeThing = function (y) {}

Ex1> function 宣告, [函式宣告]方式定義的函式可以在宣告前使用：

square(2); // 4

function square(number) {

return number * number;

}

Ex2: function 宣告, [變數定義的函式] 不可以在宣告前使用：

square(2); // TypeError: square is not a function

var square = function (number) {

return number * number;

};

Ex1: 函式內的變數宣告
var x = 1;

var doSomeThing = function(y) {

var x = 100;

return x + y; };

console.log( doSomeThing(50) ); // 150

console.log( x ); // 1

--> 同 function doSomeThing(y) { var x=100; return x+y;}
-->

因為切分變數有效範圍的最小單位是 "function"，所以
在函式區塊內透過 var 定義的 x 實際上只屬於這個函式。
換句話說，外面的 x 跟 function 內的 x 其實是兩個不同的變數。

-->

自己的 function 內如果找不到，就會一層層往外找，直到全域變數為止：

function 可以讀取外層已經宣告的變數， 但外層拿不到裡面宣告的變數。

Ex2: 函式的變數宣告

var x = 1;

var doSomeThing = function(y) {

x = 100;

return x + y; };

console.log( doSomeThing(50) ); // 150

console.log( x ); // 100

Ex3: 函式的變數宣告

var x = 1;

var doSomeThing = function(y) {

console.log(x); // 會出現什麼？

var x = 100;

return x + y; };

console.log( doSomeThing(50) ); // 150

console.log( x ); // undefined

-->

要是不小心在 var 宣告前就使用了這個變數，這時候 JavaScript
就會開始尋找變數 x 了，在自己的 scope 找... 啊，找到了！
雖然是在下面，但可以確認的是自己的 scope 裡面有宣告，

於是就很貼心地「只會把宣告的語法」拉到這個 scope 的「最上面」...

-->如上寫法同下:

var doSomeThing = function(y) {

var x;

console.log(x); // undefined

x = 100; return x + y;

};

-->

變數都盡量在 scope 的最上面先宣告完成後再使用。

二.全域變數/區域變數

1>全域變數

JavaScript 這門語言中，沒有所謂「全域變數」這種東西。
更準確地說，

我們所說的「全域變數」其實指的是「全域物件」(或者叫「頂層物件」) 的屬性。

以瀏覽器來說，「全域物件」指的就是 window，在 node 環境中則叫做 global。

Ex:

var a = 10;

console.log( window.a ); // 10

變數有效範圍 (scope) 的最小切分單位是 function (ES6 的 let 與 const 例外)
即使是寫在函式內，沒有 var 的變數會變成「全域變數」
全域變數指的是全域物件 (頂層物件) 的「屬性」

敘述句 (Statement)：敘述句就是執行某個動作 ,

Ex: var foo;

運算式 (Expression): 運算式最大的特性，就是它會產生一個「值」。

Ex: var a = 10 * 10;

在運算式中，會透過提供一些數值給「運算子」(Operator) 進行運算，進而得到一個運算的結果。

DOM - 2 Event 的特殊處理 - 停止event預設動作 - 停止往上冒泡 -bubble,catch

目的: 停止event預設動作 - 停止往上冒泡處理說明:1> Label 的event flow 為 bubble 方式時

2> 觸發 lbl.onclick event後 , console 顯示 "lbl click"

瀏覽器將 click event 自動往下傳, 即傳給 checkbox.click event

3> 因 checkbox event 為 bubble 方式,所以又往上傳給 lbl

即觸發 lbl.onclick event , concole 又顯示 "lbl click"

--> 即 lbl.onclick event 被觸發兩次

一.要阻擋事件向上冒泡傳遞:

--> event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<h1>Hi friend, try edit me!</h1>
<label class="lbl">
Label <input type="checkbox" name="chkbox" id="chkbox" />
</label>
// label

lbl.addEventListener('click', function (e) {
console.log('lbl click');
}, false);

chkbox.addEventListener('click', function (e) {
console.log('chkbox click');
}, false);

</script>
<script src="src/script.js"></script>
</body>
</html>

-->

chkbox.addEventListener('click', function (e) {
console.log('chkbox click');
e.stopPropagation();

}, false);

二.不執行預設動作, 只執行目前動作( console.log("google") )

<a id="link" href="https://www.google.com">Google</a>

var link = document.querySelector('#link');

// 在 evend handler 加上 e.preventDefault();

link.addEventListener('click', function (e) {

e.preventDefault();
console.log('Google!');
}, false);

訂閱：文章 (Atom)

2022年9月1日星期四

JS - 箭頭函式的用法 => , 即函式的簡約寫法

JS - class 的寫法 - 和 prototype的關係, 如何用 extends 達到繼承 (inheritance) 效果

2022年8月31日星期三

JS Callback function - function 的執行順序

JS Array 陣列宣告 - push,pop - unshift,shift

JS - - Object,Array的宣告 , Object 基本型別及物件型別 - Object 的建立 - 屬性的存取 - typeof 型別的判斷 - == ===

JS function - var 變數宣告, 及scope變數的範圍 - 全域變數/區域變數

DOM - 2 Event 的特殊處理 - 停止event預設動作 - 停止往上冒泡 -bubble,catch

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2022年9月1日 星期四

2022年8月31日 星期三

追蹤者

網誌存檔

關於我自己

2022年9月1日星期四

2022年8月31日星期三