Jquery Selector แบบต่างๆ

  
การทำ Dynamic Webpage นั้นคือ การที่ Element ต่างๆของ หน้าเว็บ สามารถเปลี่ยนแปลงได้นั้นจำเป็นต้อง select element เพื่อการแก้ไขก่อน ด้วยการ select ของ jQuery

รับเขียนโปรแกรม JQuery

 รับเขียนโปรแกรม Web Application

Select BY Id

$("# id ของ element")

<div id="my_div" ></div>
<script>
      $("#my_div").html("Select By Element Id");
</script>

•  ผลลัพธ์คือหน้าเว็บจะแสดงคำว่า Select By Element Id
• $("# id ของ element")  ต้องมี # ด้านหน้าด้วย
• .html(" ..... ") คือ การใส่ Element เข้าไปภายใต้ element ที่มี id ตาม selector ที่กำหนด

Select By Class 

 $(". class ของ element")

<div class="my_div"></div>
<script>
      $(".my_div").html("Select By Class");
</script>

กรณีที่มี class มากกว่า 1 element 

<div class="my_div"></div>
<div class="my_div"></div>
<script>
      $(".my_div").html("Select By Class");
</script>

•  $(". class ของ element") ต้องมี . นำชื่อ class ด้วย
• ผลลัพธ์คือหน้าเว็บจะแสดงคำว่า Select By Class จำนวน 2 แถว เพราะ class ที่มีชื่อว่า my_div มีอยู่ 2 element

 jQuery each+ select By Class

เราสามารถใช้ jQuery each สำหรับการเข้าถึง element ที่ select เจอมากกว่า 1 element

<div class="my_div"></div>
<div class="my_div"></div>
<script>

       $(".my_div").each(function(index,element){

                $(element).html("Element "+index);//index คือ ลำดับที่ของ element

       });

</script>

• ผลลัพธ์ที่ได้คือ หน้าจอจะแสดง
  
  Element 0
  Element 1

Select By Property

 $("[ชื่อ property =' ค่าของ property ' ]")


<div><a href="https://youtube.com" ></a></div>
<div><a href="https://facebook.com" ></a></div>
<div><a href="https://google.com" ></a></div>
<script>

    $("[href='https://youtube.com']").html('Youtube');
    $("[href='https://facebook.com']").html('Facebook');
    $("[href='https://google.com']").html('Google');
   
</script>

• href คือ property ของ element a

Select ซ้อน Select

  $("....").find("...")

<div id="my_div">
       <div class="my_class"></div>
       <div class="my_class"></div>
       <div class="my_class"></div>
</div>

<script>

     $("#my_div").find(".my_class").html("my_div >> my_class");

</script>

• เมื่อ selector ตัวแรกแล้ว เราใช้ .find เพื่อเลือก element ถัดไป

• ผลลัพธ์ที่ได้คือ
  
  my_div >> my_class
  my_div >> my_class
  my_div >> my_class
   
   

Javascript Event Binding

การ Binding Event ใน JavaScript คือ การกำหนดชุดคำสั่งเมื่อเกิดเหตุการณ์ขึ้นกับ Element ในหน้าเว็บ เช่น ผู้ใช้คลิกที่ Element หรือเมื่อผู้ใช้เปลี่ยนตัวเลือกใน Select Element

Javascript Event Binding

 

แบบที่ 1 กำหนด function ที่จะทำงานลงใน element

<button class='btn btn-primary' onclick="click_function()" >OK</button>
<script>
 function click_function() { //กำหนดให้เมื่อผู้ใช้ click ปุ่ม OK
     alert('Click !!!');
}
</script>

แบบที่ 2 ใช้คำสั่ง document.addeventlistener

<button id="my_button" class='btn btn-primary' >OK</button>

<script>

document.getElementById("my_button").addEventListener("click",click_function)

 function click_function() {
     alert('Click !!!');
}

</script>

• กำหนด id ให้กับ Element ( ในที่นี้ชื่อ my_button ) โดยเมื่อการกำหนด id ให้กับแต่ละ Element จะต้องไม่ซ้ำกัน
•  document.getElementById("id ของ element").addEventListener("ชื่อ event","ชื่อ function")

jQuery Event Binding

<button id="my_button" class='btn btn-primary' >OK</button>

<script>

$("#my_button").on("click",click_function) ;

 function click_function() {
     alert('Click !!!');
}

</script>

•  เราใช้ $("#my_button") แทน document.getElementById("my_button")
• อย่าลืม # นำหน้า id ของ element

ตัวอย่าง "change" event สำหรับ  select element

<select class="form-control" id="my_select" >
       <option value=""></option>
       <option value="1">ตัวเลือกที่ 1</option>
       <option value="2">ตัวเลือกที่ 2</option>
       <option value="3">ตัวเลือกที่ 3</option>
</select>

<script>

$("#my_select").on("change",change_function) ;// เปลี่ยนจาก click event เป็น change event

 function change_function() {
     alert('Select Changed!!!');
}

       
</script>

การติดตั้ง node js แบบต่างๆ

 

  การติดตั้ง module ต่างของ NodeJS นั้นเราจะใช้คำสั่ง npm  install ซึ่งแบ่งเป็นประเภทต่างๆ ดังนี้

  รับเขียนโปรแกรม NodeJS

npm install  -g ชื่อpackage

การใช้คำสั่งการ install ประเภทนี้เรียกว่าการ install แบบ grobal คือเมื่อเรา install แล้วจะสามารถใช้ comand line ของ module นั้นได้โดยไม่ต้องมี node นำหน้า
เช่น npm install -g firebase-tools , npm install -g @angular/cli
 โดยเมื่อเรา install แบบ grobal แล้วสามารถใช้คำสั่ง firebase init สำหรับ npm install -g firebase-tools  หรือ ng new my-app สำหรับ npm install -g @angular/cli

npm install ชื่อpackage --save

เป็นการเพิ่ม module เข้าไปในโปรเจค โดยจะเพิ่ม Dependencies  เข้าไปในไฟล์ package.json ด้วย
เช่น npm install express --save ซึ่งเมื่อ install แล้วเราสามารถใช้คำสั่ง var express = require('express') ได้

npm install  ชื่อpackage ( ไม่มี --save )

เป็นการเพิ่ม module เข้าไปในโปรเจค โดยจะไม่เพิ่ม Dependencies  เข้าไปในไฟล์ package.json

การใช้งาน Firebase Hosting

จากที่เราได้ทดลองสร้าง REST API โดยใช้ firebase cloud function  แล้วตาม ตัวอย่างการพัฒนา API บน Firebase Cloud Function ด้วย NodeJS และ ExpressJS และ ตัวอย่างการพัฒนา API บน Firebase Cloud Function ตอน 2 Token Authentication ( JSON Web Token )

รับเขียนโปรแกรม Firebase 

ต่อไปจะเป็นการใช้งาน Firebase Hosting ( บริการ Web Hosting ไว้บนระบบ cloud ของ firebase )

1. เปิด command line สร้าง directory ชื่อ my-firebase-app โดยใช้คำสั่ง mkdir my-firebase-app หรือ md my-firebase-app บน windows จากนั้น install firebase-tools  โดยใช้คำสั่ง sudo npm install -g firebase-tools แล้วใส่ password ของเครื่อง ( สำหรับ windows ไม่ต้องมีคำสั่ง sudo นำหน้าก็ได้ )

 

 2.  เมื่อ install firebase-tools แล้วให้ login เข้าสู่ firebase  โดยใช้คำสั่ง firebase login

 

 3. ใน browser ให้กดอนุญาตตามรูป

 

  

 

 4. ไปที่เว็บ https://firebase.google.com/

 

 5. ไปที่เมนู Hosting และกดเริ่มต้นใช้งาน

 

 6. กดถัดไป

 

 7. เปิด command line พิมพ์ cd my-firebase-app แล้วพิมพ์คำสั่ง firebase init เพื่อเชื่อมโยง folder เข้ากับโปรเจคของ firebase

 

8. เลือกโปรเจคของ firebase ที่ต้องการใช้ hosting

 

 

9.  พิมพ์ yes เพื่อให้ firebase สร้าง folder public สำหรับ ใส่ไฟล์เว็บ

 

  

10. ใน folder my-firebase-app จะมี folder public และใน folder public index.html ซึ่งคือไฟล์เริ่มต้นของหน้าเว็บ สามารถแก้ไขโดย คลิกขวาที่ไฟล์ index.html แล้วเลือก Open With เลือกโปรแกรม visual studio code

 

11.  แก้ไขหน้าเว็บด้วยตามต้องการ

 

12. เราสามารถ แสดงหน้าเว็บแบบ local โดยคำสั่ง firebase serve

 

13.  หากเราต้องการ Deploy เว็บไซต์ไปที่ server ของ firebase เราสามารถใช้ คำสั่ง firebase deploy  เพื่อ upload เว็บไซต์ขึ้นสู่ firebase