分類彙整:JavaScript

物件導向

使用共同物件,做出其他很多的類似物件,簡化物件數

Object Types

聯想:貓咪有不同毛色,品種,但他們都是動物

1  建立基盤:改寫物件為建構子函數constrator function

//物件形式
var winstonTeen = {
    "nickname": "Winsteen",
    "age": 15,
    "x": 100,
    "y": 200
};
var winstonAdult = {
    "nickname": "Mr. Winst-a-lot",
    "age": 30,
    "x": 229,
    "y": 200
};

//建構子形式,改寫上方資料如下
var Winston = function(nickname, age, x, y) {
    this.nickname = nickname;
    this.age = age;
    this.x = x;
    this.y = y;
};

2  建構資料:用new 呼叫建構子函數

//物件形式
/*****************
var winstonTeen = {
    "nickname": "Winsteen",
    "age": 15,
    "x": 20,
    "y": 50
};
var winstonAdult = {
    "nickname": "Mr. Winst-a-lot",
    "age": 30,
    "x": 229,
    "y": 50
};
****************/

//建構子函數
var Winston = function(nickname, age, x, y) {
    this.nickname = nickname;
    this.age = age;
    this.x = x;
    this.y = y;
};

//new 呼叫建構子函數
var winstonTeen = new Winston("Winsteen", 15, 100, 200);
var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 229, 200);
//之後可以用WinstonTeen/winstonAdult呼叫物件資料
//Winston.nickname→"Winsteen"

現在物件資料模型建構完成了,但還沒有連接上畫圖函數,所以看不到東西

Object Methods

聯想:貓咪除了會鳴叫還會吃飯

Methods:利用prototype原型,連接建構子與畫圖(或其他)函數,使資料具現化

//建構子←資料屬性
var Winston = function(nickname, age, x, y) {
 this.nickname = nickname;
 this.age = age + "yrs old";
 this.x = x;
 this.y = y;
};

background(255, 255, 255);
//1.1 prototype 連接建構子與畫圖函數←行為
//1.2 裡面的物件資料要用this指定
Winston.prototype.draw = function() {
 // face
 fill(255, 255, 0);
 ellipse(this.x, this.y, 90, 90);
 fill(46, 46, 41);
 // eyes
 ellipse(this.x - 20, this.y - 20, 15, 15);
 ellipse(this.x + 24, this.y - 25, 15, 15);
 fill(252, 65, 65);
 // mouth
 ellipse(this.x + 13, this.y + 18, 40, 40);

 //txt
 var txt = this.nickname + ", " + this.age;
 text(txt, this.x - 40, this.y - 60);
};

//3 嘗試接其他函數:talk
Winston.prototype.talk = function() {
 text("I'm Winston!", this.x - 30, this.y + 70);
};

//new 呼叫建構子函數
var winstonTeen = new Winston("Winsteen", 15, 100, 200);
var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 229, 200);

//2 prototype接好後,呼叫draw
winstonTeen.draw();
winstonAdult.draw();

//4 呼叫talk函數
winstonTeen.talk();
winstonAdult.talk();
Display

參考:ProcessingJS呈現在網頁的方法
12345678999999999999999999999999999999999999999

See the Pen OOD by Ian Chen (@ianchen0419) on CodePen.

Object Inheritance

聯想:貓咪會鳴叫,狗狗會吠叫,但他們都是相似動物,一樣會吃飯,睡覺,有年齡。

ood

  1. 建立母親建構子(共同資料屬性)
  2. 母親建構子的Method(共同行為)
  3. 建立小孩1建構子,用call宣告繼承母親的資料屬性
  4. 補足小孩1的獨特資料屬性
  5. create宣告繼承母親的Method行為
  6. 補足小孩1的獨特Method行為
  7. 同3456,建立小孩2建構子
  8. 資料建構完畢,開始印出來
  9. 用new呼叫各小孩自己的建構子
canvas#mycanvas
   /************************
   ****母親區Creature*******
   ************************/
  background(255, 255, 255);
  //1 Creature 共通資料屬性母建構子
  var Creature = function(nickname, age, x, y) {
   this.nickname = nickname;
   this.age = age + "yrs old";
   this.x = x;
   this.y = y;
  };
  //2 Creature Method  母建構子的共通行為
  Creature.prototype.talk = function() {
   text("SUPPP!?!?!?!??!", this.x - 40, this.y + 70);
  };

  /************************
   ****小孩1區Hopper********
   ************************/

  //3 繼承母資料屬性
  var Hopper = function(nickname, age, x, y) {
   //call後面是母資料屬性的資料
   Creature.call(this, nickname, age, x, y);

   //4 省略小孩獨特資料屬性
   //補充:增加小孩獨特資料屬性方法
   //this.cover = cover;
  };
  //5 繼承母行為method
  Hopper.prototype = Object.create(Creature.prototype);

  //6.1 增加小孩獨特行為method
  Hopper.prototype.draw = function() {

   //face
   fill(230, 230, 250);
   ellipse(this.x, this.y, 60, 100);

   //eyes
   fill(0, 0, 0);
   line(this.x + 10, this.y - 25, this.x + 25, this.y - 25);
   line(this.x - 10, this.y - 25, this.x + 5, this.y - 25);

   //month
   fill(252, 65, 65);
   triangle(this.x, this.y + 20, this.x + 10, this.y + 10, this.x + 20, this.y + 20);
   //txt
   fill(0, 0, 139);
   var txt = this.nickname + ", " + this.age;
   text(txt, this.x - 40, this.y - 60);
  };
  //6.2 增加小孩獨特行為2
  Hopper.prototype.hooray = function() {
   text("Hooooray!!!", this.x - 30, this.y + 70);
  };

  /************************
   ****小孩2區Winston********
   ************************/

  //3 繼承母資料屬性
  var Winston = function(nickname, age, x, y) {
   Creature.call(this, nickname, age, x, y);
  };

  //4 省略小孩獨特資料屬性
  //5 繼承母行為method
  Winston.prototype = Object.create(Creature.prototype);

  //6 增加小孩獨特行為method
  Winston.prototype.draw = function() {
   // face
   fill(255, 255, 0);
   ellipse(this.x, this.y, 90, 90);
   // eyes
   fill(46, 46, 41);
   ellipse(this.x - 20, this.y - 20, 15, 15);
   ellipse(this.x + 24, this.y - 25, 15, 15);
   // mouth
   fill(252, 65, 65);
   ellipse(this.x + 13, this.y + 18, 40, 40);
   var txt = this.nickname + ", " + this.age;
   text(txt, this.x - 50, this.y - 60);
  };

  /**********資料建構完畢,下面印出來*************/

  /******呼叫Hopper跟Hopper2.0*********/

  //A 呼叫資料(等於建立小孩的物件資料)
  var lilHopper = new Hopper("Little Hopper", 15, 50, 240);
  var bigHopper = new Hopper("Big Hopper", 30, 50 + 200, 240);
  //B 呼叫行為(實體化)
  bigHopper.draw();
  bigHopper.hooray();
  lilHopper.draw();
  lilHopper.talk();

  /******呼叫Winston跟Winston2.0*********/

  //A 呼叫資料(等於建立小孩的物件資料)
  var winstonTeen = new Winston("Winsteen", 15, 50, 70);
  var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 50 + 200, 70);
  //B 呼叫行為(實體化)
  winstonTeen.draw();
  winstonTeen.talk();
  winstonAdult.draw();
Display

See the Pen OOD2 by Ian Chen (@ianchen0419) on CodePen.

jQuery 收合選單:show(), hide(), toggle()

show()

顯示指定物件,等於在該物件添加display: none屬性

ul
 li
  div.problem PROBLEM A
  div.ans ANSWER A
 li
  div.problem PROBLEM B
  div.ans ANSWER B
 li
  div.problem PROBLEM C
  div.ans ANSWER C
 li
  div.problem PROBLEM D
  div.ans ANSWER D
ul
 display: inline-block  
li
 display: block
 margin: 10px   

.problem
 padding: 10px 15px 10px 15px
 background-color: #90a955
 color: #fff    
.ans
 padding: 15px
 background-color: #ebf9de
 display: none
$("li").click(
 function() {
  //find往下找子元素
  //show顯示指定物件
  $(this).find(".ans").show();
 }
);

hide()

隱藏指定物件,在元素添加display: none屬性

功能介紹:改編上一個範例:點開任一PROBLEM後,點選其他PROBLEM會産生

  1. 原ANSWER收合
  2. 新ANSWER展開

撰寫方法:命令系統在每次點擊時執行

  1. 收合所有ANSWER
  2. 展開指定ASNWER
//HTML與CSS跟上例相同
$("li").click(
 function() {
  //1 hide 收合所有ANSWER
  $(".ans").hide();
  //2 show 顯示指定PROBLEM
  $(this).find(".ans").show();
 }
);

toggle()

像電燈般開闔物件

效果:

  1. 點擊PROBLEM,開啓ANSWER
  2. 再點擊一次該PROBLEM,關閉ANSWER
//HTML與CSS跟上例相同
$("li").click(
 function() {
  //toggle 像電燈般開闔物件
  $(this).find(".ans").toggle();
 }
);

在網頁編輯器上使用KhanAcademy的JS語法 ProcessingJS

一般編輯器無法顯示KhanAcademy的JS語法原因

  1. 未設定Processing.js函式庫
    https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js
  2. 沒有在html寫canvas標籤

 解決方法

canvas#mycanvas
var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(400, 400); 
        frameRate(30);
        
        // 這邊貼上KhanAcademy的JS程式碼
    
    }};

    // Get the canvas that Processing-js will use
    var canvas = document.getElementById("mycanvas"); 
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc); 

Ajax

説明

使用外部(後台)資料,不用自己建構資料模型。

步驟

  1. 使用ajax串接後台api
  2. 印出資料,success:成功
  3. 將function内資料外接
  4. 之後使用tododata變數,可以在外部編輯這筆資料

範例

div#notify
// 3 將function内資料外接
var tododata;

// 1 使用ajax串接後台api
$.ajax(
 {
  url: "https://goo.gl/PBvlqI",
 // 2 印出資料,success:成功
  success: function(res){
   $("#notify").text(res);
   tododata=res;
  }
 }
);

// 4 之後使用tododata變數,可以在外部編輯這筆資料
Display

(按下載入不安全的代碼後顯示)

應用:JSON與ajax結合

  1. 製作html清單模板
  2. 定義外部api
  3. ajax串接,ajax裡面是物件形式
    • 連接url變數
    • 成功:傳回參數→結果→外接
    • JSON.parse(文字)→物件結構
  4. 製作迴圈,準備列印資料
    • 迴圈下的api資料
    • 代換變數
    • 載入代換後的新模板
  5. 建立打勾項目
    • 取代class
    • 定義打勾class
.todolist
 h3 我的代辦清單
 hr
 ul#listitem
 //li(class="{{class}}") {{num}}. {{name}} {{date}}
*
font-family: 微軟正黑體
 
body
 padding: 30px

.todolist
 display: inline-block
 padding: 20px
 border: solid 3px
 
 & ul
  padding: 0px

 & li
  list-style: none
  width: 300px
  padding: 5px

 .done
  &:before
  content: " ✔ "
  color: red
// 1 製作html清單模板
var html="<li class='{{class}}'>{{num}}.{{name}} {{date}}</li>";
// 2 定義外部api
var api="https://goo.gl/PBvlqI";
// 3.3 定義外接資料
var data;

// 3 ajax串接,ajax裡面是物件形式
$.ajax({
 // 3.1 連接url變數
 url: api,
 // 3.2 成功:傳回參數→結果→外接
 success: function(res){
 // 3.3 JSON.parse(文字)→物件結構
 // console.log(JSON.parse(res));
 data=JSON.parse(res);
 
 // 4 製作迴圈,準備列印資料
 for(i=0;i<data.length;i++){
 // 4.1 迴圈下的api資料
 var item=data[i]
 // 5.2 定義打勾class
 // if簡寫(檢査項目==true)?"是的話傳値":"否的話傳値"
 var now_class=(item.done)==true?"done":"";
 
 
 // 4.2 代換變數
 var new_html=
 html.replace("{{num}}",i+1)
 .replace("{{name}}",item.name)
 .replace("{{date}}",item.date)
 // 5 建立打勾項目
 // 5.1 取代class
 .replace("{{class}}",now_class);
 
 // 4.3 載入代換後的新模板
 $("#listitem").append(new_html);
 }
 }
});
Display

CODEPEN

購物清單

資料模型製作、存取與修改

步驟

  1. 開始建構資料模型
    定義一個陣列
  2. 陣列裡面要有物件,開始編號
  3. 定義資料清單html模板:項目與總價
    • 將内部”取代成’
    • 清除換行空格
    • 將變動資料抽換成取代定義符號
  4. 製作迴圈,跑出item_html模板
  5. 建立一個取代變數,將html模板的取代資訊用2的資料代掉(re_item_html)
    • 取代數字
    • 取代名稱(定義變數item=list[i],呼叫陣列list裡面的物件name)
    • 取代價格
  6. 定義渲染函數showlist
  7. 先執行一次showlist
  8. 製作功能
    建立新增按鈕功能

    • 新增輸入的資料,push,裡面用{}代表一連串動作
    • 用val接收input資料
    • 重新執行一次showlist
  9. 建立刪除按鈕功能:選取刪除按鈕
    • 製作每個刪除按鈕的id:取代用符號{{del}}
    • 將{{del}}取代成自定義編號del_i
    • 刪除按鈕自定義編號
    • 選取刪除用定義編號
  10. 建立移除功能
    • 建立移除函數,鎖定移除値id(id是一個數字)
    • splice(陣列中第幾筆資料,之中的第幾個)
    • 抓取刪除用的id,新增取代用屬性{{item_del}}
    • 將{{item_id}}取代為序數
    • 定義id為序數
    • remove(id),id為陣列中第幾項資料,所以是數字
    • parseInt,將資料轉換為數字
    • 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id値)
  11. 合計欄位
    • 先執行出html模板
    • 宣告變數 var re_total_html取代{{tot}}
    • 定義變數total_price
    • 製作total_price加總的動作
    • 使用parseInt定義内部項目為數字

範例

#buylist
 h1 My Buylist 購物清單
 .item.control_panel
  label 商品名
  input#input_name(placeholder="名稱...")
  label 價錢
  input#input_price(placeholder="100")
  span.add +新增
 #list
  //- li.item 1.吹風機
  //- .price 100
  //- .del ×
  //- li.item 2.吹風機
  //- .price 100
  //- .del ×
  //- li.item 3.吹風機
  //- .price 100
  //- .del ×
  //- li.item 4.吹風機
  //- .price 100
  //- .del ×
  //- li.item 5.吹風機
  //- .price 100
  //- .del ×
  //- li.item.total 合計
  //- .price 100
$black: #444
$yellow: #ffc954
$red: #ff3d4a
$white: #f3f3f3

*
 // border: 1px solid $black
 position: relative
 font-family: 'Noto Sans TC'
 font-weight: 400
 transition-duration: 0.5s

html,body
 width: 100%
 height: 100%
 margin: 0
 display: flex
 justify-content: center
 align-items: center
 background-color: $yellow

#buylist
 position: absolute
 padding: 20px
 border: 4px solid $black
 background-color: $white
 box-shadow: 0px 0px 30px rgba(0,0,0,0.2)

 h1
 padding: 20px
 margin-top: -20px
 margin-left: -20px
 margin-right: -20px
 border-bottom: 4px solid $black
 background-color: $red
 color: $white

#list
 padding: 5px
 margin-top: 10px

.item
 padding: 5px
 list-style: none
 border: 3px solid $black
 margin-top: 10px
 font-weight: 400

 input
 width: 100px
 border: 3px solid $black
 padding: 2px

 .price
 display: inline-block
 position: absolute
 padding-left: 8px
 padding-right: 8px
 right: 50px
 background-color: $yellow

 &:before
 content: "$ "

 .del
 display: inline-block
 position: absolute
 // 上下0,左右6
 padding: 0px 6px
 right: 10px
 cursor: pointer
 &:hover
 background-color: $red
 color: #fff

 .add
 cursor: pointer
 margin-left: 10px
 padding: 5px
 border: 3px solid $black

 &:hover
 background-color: $red
 color: #fff

.control_panel
 padding: 20px


.total
 background-color: $red
 color: $white
 font-weight: 400
 .price
 background-color: transparent
var list = [];

// 2 陣列裡面要有物件,開始編號
list = [
 {name: "吹風機",
 price: 300}, 
 {name: "麥克筆",
 price: 9000}, 
 {name: "筆記型電腦",
 price: 54555}, 
 {name: "iPhone 9",
 price: 32000}, 
 {name: "神奇海螺",
 price: 5000}, 
];

// 3 定義資料清單html模板:項目與總價
// 3.1 將内部"取代成'
// 3.2 清除換行空格
// 3.3 將變動資料抽換成取代定義符號

// 9.1 製作每個刪除按鈕的id:取代用符號{{del}}
// 10.3 抓取刪除用的id,新增取代用屬性{{item_del}}

var item_html="<li class='item' >{{num}}.{{name}}<div class='price'>{{price}}</div><div class='del' id={{del}} data-del={{item_del}}>×</div></li>";

var total_html="<li class='item total'>合計<div class='price'>{{tot}}</div></li>";

// 6 定義渲染函數showlist
function showlist() {

 // 8.4 每次執行:全部清空後執行
 $("#list").html("");

 // 11.3 定義變數total_price
 var total_price = 0;

 // 4 製作迴圈,跑出item_html模板
 for(var i=0; i<list.length; i++) {

 // 5 建立一個取代變數,將html模板的取代資訊用2的資料代掉(re_item_html)
 var item = list[i];
 // 9.3 刪除按鈕自定義編號
 var del_i = "del_" + i;
 // 10.5 定義id為序數
 var id = i;

 // 11.4 製作total_price加總的動作
 // 11.5 使用parseInt定義内部項目為數字
 total_price += parseInt(item.price);

 var re_item_html =
 // 5.1 取代數字
 item_html.replace("{{num}}", i + 1)
 // 5.2 取代名稱(定義變數item=list[i],呼叫陣列list裡面的物件name)
 .replace("{{name}}", item.name)
 // 5.3 取代價格
 .replace("{{price}}", item.price)
 // 9.2 將{{del}}取代成自定義編號del_i
 .replace("{{del}}", del_i)
 // 10.4 將{{item_id}}取代為序數
 .replace("{{item_del}}", id);

 $("#list").append(re_item_html);

 // 9 建立刪除按鈕功能,選取刪除按鈕
 // 9.4 選取刪除用定義編號
 $("#" + del_i).click(
 function() {
 // 10.6 remove(id),id為陣列中第幾項資料,所以是數字
 // 10.7 parseInt,將資料轉換為數字
 // 10.8 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id値)
 remove(parseInt($(this).attr("data-del")));
 }
 );

 }
 // 11 合計欄位

 //11.2 宣告變數 var re_total_html取代{{tot}}
 var re_total_html = total_html.replace("{{tot}}", total_price);

 // 11.1 先執行出html模板
 $("#list").append(re_total_html);
}

// 7 先執行一次showlist
showlist();

// 7**:資料建構完畢,接下來製作功能

// 8 建立新增按鈕功能

$(".add").click(
 function() {

 // 8.1 新增輸入的資料,push,裡面用{}代表一連串動作
 list.push({
 // 8.2 用val接收input資料
 name: $("#input_name").val(),
 price: $("#input_price").val()
 });
 // 8.3 重新執行一次showlist
 showlist();

 }

);

// 10 建立移除功能
// 10.1 建立移除函數,鎖定移除値id(id是一個數字)
// 10.2 splice(陣列中第幾筆資料,之中的第幾個)
function remove(id) {
 list.splice(id, 1);
 showlist();
}
Display

CODEPEN

陣列與物件

陣列[]:依照編號排排站好的資料

  1. 宣告陣列[]
  2. 編號資料
  3. 利用push,新增資料
  4. 開始列印資料
ul#menu
// 1宣告陣列
var menu=[];

// 2編號資料
menu[0]="東坡肉炒飯";
menu[1]="葱爆羊肉";
menu[2]="花式炒鮭魚";

// 3利用push,新增資料
menu.push("新疆烤山豬");

// 4開始列印資料
$("#menu").append("<li>"+menu[0]+"</li>");
$("#menu").append("<li>"+menu[1]+"</li>");
$("#menu").append("<li>"+menu[2]+"</li>");
$("#menu").append("<li>"+menu[3]+"</li>");

陣列進階:簡寫方法

var menu = [];

// 1 編號資料簡寫,簡化以下資料
// menu_json[0]="東坡肉炒飯";
// menu_json[1]="葱爆羊肉";
// menu_json[2]="花式炒鮭魚";

// *毎筆資料用逗號隔開
menu = ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"];

menu.push("新疆烤山豬");

// 2 列印資料簡寫,利用迴圈for制定規則
// $("#menu_json").append("<li>"+menu_json[0]+"</li>");
// $("#menu_json").append("<li>"+menu_json[1]+"</li>");
// $("#menu_json").append("<li>"+menu_json[2]+"</li>");
// $("#menu_json").append("<li>"+menu_json[3]+"</li>");

// 迴圈變數(開始;結束;規則)
for (var i = 0; i < 4; i++) {
 // debug: console.log(i);
 $("#menu").append("<li>" + menu[i] + "</li>");
}

陣列進階2:自動判斷資料長度

var menu = [];

menu = ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"];

menu.push("新疆烤山豬");

// 迴圈結束値使用menu.length
for (var i = 0; i < menu.length; i++) {
 $("#menu").append("<li>" + menu[i] + "</li>");
}

物件{}:毎一項資料都有名字的陣列

  1. 定義物件
  2. 編寫物件
  3. 列印物件
ul#shop
// 1 定義物件
var shop = {};

// 2 編寫物件
shop.name="阿東熱炒";
shop.addr="台北市宵夜路";
shop.phone="02 123456789";

// 3 列印物件
// 補充:列印物件方法二shop["name"]=shop.name
// 方法二使用時機,中括號裡面是變數或參數時使用
// shop.name只有當name是存在的物件名才可使用
$("#shop").append("<li>商店名稱:"+shop.name+"</li>");
$("#shop").append("<li>商店地址:"+shop.addr+"</li>");
$("#shop").append("<li>商店電話:"+shop.phone+"</li>");

物件進階:編寫物件簡寫

var shop = {};

// 編寫物件簡寫,簡化以下項目
// shop.name="阿東熱炒";
// shop.addr="台北市宵夜路";
// shop.phone="02 123456789";

// 用逗號區隔
shop={
 //屬性名稱有空格時需要"包起來
 //ex. "shop name": "阿東熱炒"
 name: "阿東熱炒",
 addr: "台北市宵夜路",
 phone: "02 123456789"
};


$("#shop").append("<li>商店名稱:"+shop.name+"</li>");
$("#shop").append("<li>商店地址:"+shop.addr+"</li>");
$("#shop").append("<li>商店電話:"+shop.phone+"</li>");

物件内的陣列&清單内的子清單

ul#shop
var shop = {};

// 1 物件内新增陣列
shop = {
 name: "阿東熱炒",
 addr: "台北市宵夜路",
 phone: "02 123456789",
 menu: ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"]
};

// 2 一樣可以用push,不過前面要+物件名
shop.menu.push("新疆烤山豬");

// 4 定義子清單變數
// 4.1 建立ul開始標籤
var menu_html = "<ul>";
// 4.2 製作内部迴圈
for(i = 0; i < shop.menu.length; i++){
 menu_html+="<li>"+shop.menu[i]+"</li>";
}
// 4.3 建立ul結束標籤
menu_html += "</ul>";

// 3 列印子陣列,先用menu_html借代,因為要做子清單
$("#shop").append("<li>商店名稱:" + shop.name + "</li>");
$("#shop").append("<li>商店地址:" + shop.addr + "</li>");
$("#shop").append("<li>商店電話:" + shop.phone + "</li>");
$("#shop").append("<li>商店菜單:" + menu_html + "</li>");

使用變數呼叫物件

必須要將整串變數連名帶姓地存成變數或參數

var car={brand: "Audi", color: "blue", foot: 4};

var s=car.brand;
console.log(brand); //Audi

//不可以這樣做↓
var s2=brand;
console.log(car.v2); //error

//呼叫變數的式子不管有多長,都不可以拆開
//要寫成像這樣→var s3=title.dataset.name
//參數同理

 

建立函數

目的

撰寫Js時,不想重複撰寫相同的函數,可以將函數命名,方便套用

範例

.countbox
 .minus -
 .num 12
 .pulse +
 .text 賣得不錯喔
*
 border: 1px solid #000
 

.countbox
 width: 200px
 background-color: #333
 color: #fff

.minus,.num,.pulse
 display: inline-block
 font-family: '微軟正黑體'
 font-size: 49px
 padding: 5px
 user-select: none
 
.num
 width: 50px
 text-align: center
 
.minus,.pulse
 cursor: pointer
 
 
.text
 font-family: '微軟正黑體'
 text-align: center
 padding: 5px
var num = 12

// function定義
function check() {
  if (num < 10) {
    $(".text").text("數量極少");

  } else if (num < 20) {
    $(".text").text("賣得不錯喔");

  } else {
    $(".text").text("還剩很多");
  }
}

// 按鈕功能
$(".minus").click(
  function() {
    num = num - 1
    $(".num").text(num);
    check();
  }

);

$(".pulse").click(
  function() {
    num = num + 1
    $(".num").text(num);
    check();

  }

);

jQuery簡化

var num = 12

// function定義
function check() {
  if (num < 10) {
    $(".text").text("數量極少");

  } else if (num < 20) {
    $(".text").text("賣得不錯喔");

  } else {
    $(".text").text("還剩很多");
  }
}

// 按鈕功能
function click(num_var) {
  num = num + num_var
}

$(".minus").click(
  function() {
    click(-1);
    check();
  }

);

$(".pulse").click(
  function() {
    click(1);
    check();

  }

);

return

return可以把結果叫出來

var result;

function add(num1, num2){
    //計算但沒有講出來
    var X = num1 + num2;
    //講出來
    return X;
}
//呼叫函數
result = add(1,2);

迴圈化函數

將相似並且重複多次的函數,寫成一個迴圈

//迴圈前的函數們
$("#0").click(
 function() {
  items[0].number++;
  showlist();
 }
)

$("#1").click(
 function() {
  items[1].number++;
  showlist();
 }
)

$("#2").click(
 function() {
  items[2].number++;
  showlist();
 }
)

$("#3").click(
 function() {
  items[3].number++;
  showlist();
 }
)

$("#4").click(
 function() {
  items[4].number++;
  showlist();
 }
)

$("#5").click(
 function() {
  items[5].number++;
  showlist();
 }
)
//迴圈後
//迴圈後
for(i=;i<6;i++){
 //因為迴圈跑完後,i會消失,所以要再function外面再包一層臨時函數,設定一個臨時參數(參數會保存下來
 var tempFunction=function(tempVar){
  $("#"+tempVar).click(
   function(){
    items[tempVar].number++;
    showlist():
   }
  );
 }
 //然後再把i帶進去臨時函數裡面
 tempFunction(i);
}

jQuery 初階滑鼠事件 Click / Hover

原生JavaScript版

function()

function(),就是一連串的動作,後面一定要接()
$(this),係指function的母事件所指定的元素

點擊觸發,與紀錄購買狀態(click)

 .buybtn 點擊購買
.buybtn
  border: 1px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
 
.buyed
  border: 1px solid #000
  background-color: #f24
  color: white
$(".buybtn").click(
  function() {
    $(this).text("已經購買");
    $(this).addClass("buyed");
  }
);

$(this)操作觸發的案件:請選擇物品

.selbtn(data-cata="tree") 選擇物品一
.selbtn(data-cata="sea") 選擇物品二
.selbtn(data-cata="flower") 選擇物品三
h4.show-info 已選擇物品:無
h4.show-cata 已選擇種類
.selbtn
  border: 1px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

.show-info
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

.show-cata
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
$(".selbtn").click(
  function() {
    //.text包空的表示選取前面this的文字
    $(".show-info").text($(this).text());
    //.attr選取html裡面的屬性
    $(".show-cata").text($(this).attr("data-cata"));
    //等於要兩個等號
    //事件用{}包住
    //符合→條件式後面直接加符合事件
    //不符合→else後面加不符合事件
    if ($(this).attr("data-cata") == "flower") {
      $(".show-cata").append(",他買的是花");
    } else {
      $(".show-cata").append(",NO他買的是不是花ˊˋ");
    }
  }
);

滑鼠的移入移出

.mbtn 使用者移入了嗎?
.mbtn
  border: 2px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
$(".mbtn").mouseenter(
  function() {
    $(this).css("background-color", "#333");
    $(this).css("color", "#fff");
    $(this).text("使用者進入了!!");
  }
);

$(".mbtn").mouseleave(
  function() {
    $(this).css("background-color", "#fff");
    $(this).css("color", "#333");
    $(this).text("使用者離開了 :(");
  }
);

setTimeout:一定時間後的效果

.timerbox 10秒之後這裡變紅色
.timerbox
  border: 2px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
//setTimeout(事件, 毫秒);→經過特定時間後執行
setTimeout(
  function() {
    $(".timerbox").css("background-color", "#f24");
  }, 10000);

進階:倒數計時器製作

.countbox 經過了×××秒
.countbox
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
var nowtime = 0;

//setInterval(事件, 毎隔多少秒改變的秒數)→毎隔×秒後會出現的效果
setInterval(
  function() {
    nowtime = nowtime + 1
    //.text("原本的文"+變數名稱+"字")→變數置入文字中
    $(".countbox").text("已經經過" + nowtime + "秒");
  }, 1000);
   //表示毎經過一秒,會觸發兩個動作
   //1 nowtime+1
   //2 nowtime的値更新在文字上

jQuery改變HTML與CSS

原生JavaScript版

使用:Settings→JavaScript→QuickAdd→jQuery

html() 更新元素内部html

.block.block1
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block
$(".block1").html("更新公告");
Display
更新公告

css() 更新元素内部css

.block.block2
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block
$(".block2").css("background-color","#f24")
$(".block2").css("border-radius","100%")
Display

addClass()/removeClass() 新增 / 移除class

.block.block3 add class
.block.block4.bigblock remove class
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block

.bigblock
 width: 150px
 height: 150px
$(".block3").addClass("bigblock")
$(".block4").removeClass("bigblock")
Display
add class
remove class

 

html() 動態新增元素

prepend→元素新增在.html()之前
append→元素新增在.html()之後

.block.block5.bigblock
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block
 
.bigblock
 width: 150px
 height: 150px
$(".block5").html("<div class='block'>商品</div><div class='block'>商品</div>");
$(".block5").prepend("<p>商品列表</p>");
$(".block5").append("共有兩項");
Display

商品列表

共有兩項

text() 顯示純文字

.block.block6.bigblock
.block {
 width: 70px;
 height: 70px;
 border: 1px solid #000;
 display: inline-block;
}

.bigblock {
 width: 150px;
 height: 150px;
}
.text("<div class='block'></div><div class='block'></div>")
Display
<div class=’block’></div><div class=’block’></div>

Khan Academy JavaScript 筆記

Khan Academy Intro to JS: Drawing & Animation

Drawing basics

  • 圓形,ellipse(X離右側距離, Y離頂端距離, Weight寬, Height長) ;
  • X:0-400, Y:0-400
  • line( X離右側距離, Y離頂端距離, start, end);
  • rect(X, Y width, radius高度/胖瘦度 );
  • line(x1, y1, x2, y2);。1下面,2上面

Coloring

  • backroung(RGB code)
  • 填滿特定區域:在特定形狀code上方插入fill(RGB code);
  • 線條顏色:在線條code上方插入stroke(RGB code);
  • 線條粗細:strokeweight(px);
  • 去除框線:在所有code上方插入nosttoke();

Variable

  • variable:批量改尺寸
    ❶頂端列鍵入var  名稱 = 20;
    ❷找到要修改的函數ellipse(157,151,名稱,名稱)

Animation Basics

  • 動畫效果:原理,設定X變數,用相同的X變數+某數寫出其他圖形。所以如果X變數連續增加,就會有動畫效果。
  • draw = function() {
    ❶放background,消除毎次移動的滑行殘影
    ❷這裡放所有有X變數在的圖形(要動起來的東西)
    不要放 var x = 某數,var放在draw上方,數値設起點値
    ❸設 x = x+1(速率:一秒移動1px)
    }