Javascript ตอนที่ 2

หลังจากเราเรียนรู้เรื่องตัวแปรไปแล้วต่อไปเราจะมาเรียนรู้เกี่ยวกับภาพรวมและเรื่อง function ว่ามันทำงานแบบไหนอย่างไร แล้วเราจะใช้พวก function พื้นฐานที่ javascript เตรียมมาให้เราได้อย่างไรครับ

บทความมีอะไรบ้าง?

บทความนี้ผมจะสอนพวกพื้นฐานการเขียนเว็บโดยจะเริ่มแบบคนไม่รู้เลยว่าเว็บทำงานแบบไหนอย่างไร เพื่อให้พอมีความรู้และสามารถต่อยอดได้นะครับ อาจจะไม่ลงรายละเอียดแบบลึกว่ามันส่งค่าอะไรยังไง แต่จะพยายามให้คนอ่านสามารถเข้าใจและเขียนเว็บได้ในระดับเริ่มต้น โดยผมคิดว่าสิ่งที่ผมจะสอนนั้นจะสามารถหารายได้หรือสร้างรายได้นั่นเอง แต่ต้องให้คุณพยายามทำความเข้าใจและตั้งใจจริงนะครับ

โดยในบทความชุดนี้ผมจะมีการบ้านให้คุณได้ฝึกทักษะที่สอนในบทความอยากให้คุณลองทำตามดูนะครับโดยผมจะมีเฉลยให้ในตอนท้ายของบทความนะครับ ขอร้องว่าอย่าโกงกันนะเพราะตั้งใจเขียนเพื่อให้คุณได้เรียนรู้จริงๆ ถ้าติดตรงไหนในบทความอยากให้เพิ่มเติมอะไรก็สามารถ comment บอกได้นะครับ ผมเองจะพยายามปรับปรุงให้ดีขึ้นเรื่อยๆ

ภาพรวมกว้างๆ

อย่างแรกที่อยากจะบอกคุณก่อนคือ javascript นั้นในเริ่มแรกเราทำงานกับ browser หรือโปรแกรมที่เราใช้เปิดเว็บทั้งหลายไม่ว่าจะ chrome, firefox, safari, ie, etc. เหล่านี้เราเรียกว่า Browser ถ้าหากคุณยังไม่เข้าใจให้นึกถึงว่า

พวก chrome, firefox, safari พวกนี้คือยี่ห้อ เหมือนยี่ห้อรถมี toyota , honda, ford พวกนี้คือยี่ห้อ แล้วรถเนี้ยเทียบเท่ากับ browser

รถ = Browser

chrome, firefox, safari = toyota, honda, ford

ถึงนี้เจ้า javascript ( ต่อไปขอเรียกสั้นๆว่า js นะครับ ) มันทำงานกับ browser แล้วเวลาเราเปิดเว็บซัก 1 เว็บเนี้ยให้มองว่ามันคือการเปิด window มาถึง 1 tab แล้วเราจะโหลดพวกเนื้อหาของเว็บต่างๆมาใส่ใน document เอาง่ายๆมันจะเหมือนภาพด้านล่างครับ

ซึ่งเวลาที่เราจะเขียน js ควบคุมอะไรซักอย่างในเว็บเนี้ยส่วนใหญ่เราจะเขียนควบคุมของใน document ครับถามว่าควบคุม window ได้ไหม อาจจะได้เป็นบ้างอย่างแต่ที่แน่ๆคือเราเขียนควบคุมของต่างๆใน document ได้เช่น เราสามารถทำให้ input รับค่าเป็นตัวเลขอย่างเดียวเท่านั้นได้ เราสามารถควบคุมให้กดปุ่มแล้วปุ่มหาย หรือ แสดงได้ครับ

หลายๆคนน่าจะเคยเห็นคนแก้ไข เลขหวย ว่าถูกรางวัลที่หนึ่งจริงๆเราถ้าคุณเรียนรู้มาถึงจุดนี้ก็ทำได้แล้วครับ แต่อย่าลืมว่า js มันทำงานแค่หน้าจอของเราเท่านั้น ถ้าเราปรับเปลี่ยนอะไร มันไม่ได้มีผลกระทบต่อคนอื่น หลายคนอาจจะสงสัยว่าการที่ผมอธิบายแบบนี้แปลว่า ถ้าเราเขียน js คนอื่นๆจะไม่ได้รันคำสั่งที่เราเขียนขึ้นหรือเปล่า คำตอบคือ ถูกครึ่งผิดครึ่งครับ

เพราะ js มันจะรันคำสั่งตอนที่ user เปิดเว็บเรา ณ ตอนนั้นที่ user โหลดเว็บเราเสร็จเขาก็จะโหลด js ไปด้วยนั่นเอง ดูจากภาพด้านล่างครับ

จากที่เราเรียนรู้การเขียน html ทำให้เรารู้ว่าเราสามารถใส่ไฟล์ js เข้าไปกับไฟล์ html ได้แล้วคำสั่งที่เราเขียนไว้จะไปรันที่เครื่องของคนที่มาดูเว็บเรานั่นเองครับ แต่เมื่อเครื่องของคุณโหลดเว็บเสร็จแล้วคุณจะแก้ไขอะไรหน้าไฟล์ index.html หรือไฟล์ main.js ก็ไม่มีผลอะไรแล้วครับ

พักเรื่องการติดต่อระหว่าง client กับ server กันก่อนนะครับเราจะไปอธิบายกันอีกทีตอนเราไปเขียน ภาษา back-end เอาล่ะต่อมาเรารู้แหละว่าเราสามารถเขียน js ที่ไปรันที่เครื่อง user ได้เราจะเขียนอะไรดี ?

อย่างที่ผมบอกครับ สำหรับ js คือภาษาในการควบคุมการทำงานของหน้าเว็บให้มันสามารถตอบสนองกับผู้ใช้หรือ user โดยให้คลิกตอนไหน อะไรจะโผล่แต่ก่อนเราจะไปถึงตรงจุดนั้นเรามาเร่ิมฝึกใช้ function กันก่อนครับ

function คืออะไร ?

การเขียน code นั้นก็เหมือนการที่เราสร้างสมการอะไรบ้างอย่าง เช่น เราอาจจะต้องการโปรแกรมทำการบวกเลข ซึ่งถ้าเราต้องการทำครั้งเดียวอาจจะไม่เหนื่อยเท่าไรเราอาจจะเขียน js ได้ประมาณนี้ครับ

const a = 1 + 1
console.log(a) // a = 2

แต่ในโลกแห่งความจริงเราต้องการโปรแกรมที่มันจะ ทำงานซ้ำๆ เพราะฉะนั้นถ้าเราอยากบวกเลขหลายๆครั้งและมีการเปลี่ยนแปลงค่าที่จะบวกกันถ้าเราจะเขียน js ให้เหมือนตัวอย่างข้างบนเราก็อาจจะทำได้แต่เมื่อเราเริ่มเขียนโปรแกรมกันแล้วเราก็ต้องทำอะไรที่มันง่ายและเร็วเพื่อลดความผิดพลาดลง

เอาล่ะ ! เรามาลองสร้าง function อันแรกของเรากับภาษา js กันหน่อยครับว่ามันสร้างอย่างไร วิธีสร้างไปดูกันเลย

function a(param1, param2) {
}

const a = (param1, param2) => {
}

// วิธีเรียนกใช้งาน
a(1,1)

การสร้าง function จะมีสองวิธีอันแรกคือวิธีการสร้างแบบสมัยก่อน อีกวิธีเป็นการสร้างแบบปัจจุบันเรียนรู้ไว้ครับสามารถใช้ได้ทั้งสองแบบ แต่แนะนำให้เขียนแบบที่สองไปเลยนะครับ โดยค่าที่เราจะใช้ใน function ของเรานั้นก็คือ param1 และ param2 ครับ เราเรียกค่าที่ส่งเข้า function ว่า parameter เอาล่ะถึงเวลาที่เราจะสร้าง function บวกค่าสองค่าซักที

const plusTwoParam = (param1, param2) => {
  return param1 + param2
}
// วิธีเรียกใช้
const a = plusTwoParam(1, 1)

console.log(a) // 2
console.log(plusTwoParam(2, 2)) // 4

จะสังเกตุว่าเราสามารถส่งค่าที่ return จาก function plusTwoParam ให้ตัวแปร a หรือเราสามารถเรียกใช้แล้วเอาค่าไปใช้ต่อทันทีเหมือนตัวอย่างที่สองใต้ a นะครับตอนนี้เราก็ได้สร้าง function ที่บวกค่าสองค่าแล้วครับยินดีด้วย !!!

คราวนี้คุณรู้จัก function แล้วความเป็นจริงคือ เกือบทุกภาษาเขาได้เตรียมพวก function พื้นฐานไว้แล้วเช่น function วนลูป function สำหรับตัดคำ funciton สำหรับค้นหาคำในประโยค ที่เหลือคือเราต้องเรียนรู้การใช้งาน function ที่ทางภาษา js เตรียมไว้แล้วประยุกต์กันต่อ ซึ่งผมอาจจะไม่ได้แนะนำทุก function นะครับแต่จะสอนผ่านการเขียนในตัวอย่างต่างๆของบทความครับ

if else การเขียน code แบบทางเลือก

แน่นอนการเขียน code นั้นเราต้องทำให้มันรองการทำงานแบบหลากหลาย โดยการทำให้โปรแกรมที่เราเขียนนั้นสามารถตัดใจได้หลายๆทางเราจะใช้ if / else นะครับเรามาลองดูตัวอย่างกันดีกว่า สมมติว่า จากตัวอย่างโปรแกรมบวกเลขที่เราทำ เราจะเปลี่ยนโจทย์เป็นถ้าผลลัพธ์จากการบวกกันของสองค่ามี ถ้ามีค่ามากกว่า 50 เราจะให้ function ของเรา return string ที่เขียนว่า ‘more’ ส่วนถ้าต่ำกว่า 50 เราจะให้แสดงว่า ‘less’

ก่อนเราจะไปเขียน code เรามาดูกันว่าเจ้า if else มันมี systax อย่างไร ใครไม่เข้าใจคำว่า systax กลับไปอ่านบทความก่อนหน้านี้ได้ครับ อธิบายสั้นๆคือ ข้อบังคับในการเขียน เหมือนเวลาเขียนภาษาอังกฤษต้องมี tense มาบอกทำนองนี้ครับเอาล่ะมาดูกันว่า if else มันเขียนอย่างไร

// แบบสองทางเลือก
if (condition) {

} else {

}
// แบบหลายทางเลือก
if (condition) {

} else if (condition) {

} else {

}
// แบบสั้น
const a = (condition) ? true : false
const b = (condition) ? 'more' : 'less'

อธิบายวิธีการเขียนแบบต่างๆนะครับ ตรงที่เขียนว่า condition นั้นคือเราสามารถเขียน เงื่อนไข โดยคำตอบของเงื่อนไขจะเป็นตัวกำหนดให้โปรแกรมเราเลือกว่าจะไปทำงานใน block ไหนโดยสิ่งที่เรา เปรียบเทียบใน condtion จะต้องเป็นค่าที่เป็น true / false คือเวลาเราเขียน if else เราอาจจะเขียนแค่ if แล้วจบก็ได้ โดยแบบเริ่มต้นเราจะเขียนแบบนี้กันครับ

const a = 20
if ( a == 20 ) {
  // ถ้าค่า a มีค่าเท่ากับ 20 จะทำงานในตรงนี้
} else {
  // ถ้าค่า a มีค่าเท่ากับ 20 จะทำงานในตรงนี้
}

โดยการเปรียบเทียบจะเห็นว่ามีเครื่องเท่ากับสองอันติดกัน “==” แบบนี้คือการเปรียบเทียบค่าใน js จะรู้ว่าเราถ้าเขียนแบบนี้เมื่อไหร่จะเอาค่าทางซ้ายมาเปรียบเทียบกับค่าด้านขวา ผมจะแนะนำเพิ่มอีกคือถ้าเราเขียนเครื่องหมายเท่ากับสามกันติดกันจะเป็นการเปรียบเทียบทั้งค่าและชนิด ( type ) อีกด้วยฟังดูอาจจะงงไปดู code กันหน่อย

const a = 20
const b = '20'

if (a == b) {
   // บรรทัดนี้เราจะเห็นใน console ว่ามัน log ออกมา
   console.log('a equal b')
}

if (a === b) {
   // if ในนี้จะไม่ทำงานเพราะว่าการเปรียบเทียบแล้วไม่จริง
   console.log('a equal b and same type')
}

นอกจากนี้การเปรียบเทียบว่าน้อยกว่าหรือมากกว่าก็ทำได้คล้ายๆกันครับ โดยการใช้เครื่องหมาย มากกว่า หรือ น้อยกกว่าครับ เช่นเราต้องการเปรียบเทียบค่าว่าน้อยกว่าให้ทำอะไรก็สามารถทำได้ดังนี้ครับ

const a = 20

if (a < 30) {
  console.log("It's value less than 30")
}

const b = 100

if (b >= 100) {
  console.log("It's value gather than equal 100")
}

คราวนี้เรามาลองปรับ function เดิมกันครับ โดยโจทย์คือเราจะต้องเปรียบเทียบค่าของผลลัพธ์ที่ บวกกันแล้วว่ามันสูงหรือต่ำกว่า 50

const plusTwoParam = (param1, param2) => {
   const result = param1 + param2
   if (result > 50) {
     return 'more'
   } else {
     return 'less'
   }
}

console.log(plusTwoParam(30, 40)) // more
console.log(plusTwoParam(10, 20)) // less

หรือเราอาจจะเขียน function แยกเพื่อให้สามารถดูแลรักษา code ให้อ่านง่ายขึ้นหรือจัดการง่ายขึ้น

const plusTwoParam = (param1, param2) => {
  return param1 + param2
}

const checkValueAndPrintMoreOrLess(value) => {
  return (value > 50) ? 'more': 'less'
}

const a = plusTwoParam(30, 40)
console.log(checkValueAndPrintMoreOrLess(a))

สังเกตุว่าเราแยก function ให้ทำงานเป็นเรื่องๆ ไม่ปะปนกันทำให้ครั้งหน้าถ้าเราต้องการแก้ไข function เกี่ยวกับเรื่องการบวก มันก็จะไม่กระทบต่อ function ที่จะทำการเช็คค่าที่จะ log ค่าออกว่าเป็น more หรือ less ครับ การแยก function เป็นสัดส่วนแบบนี้เราเรียกว่าการ refactoring นั่นเอง ส่วนการที่เราตั้งชื่อตัวแปรหรือ function ให้อ่านง่ายเราเรียกว่า clean code

จริงๆเรื่อง if else ยังมีการเปรียบเทียบค่าแบบต่างๆอีกเยอะมาก แต่ตอนนี้เอาแค่นี้ก่อนครับ ซึ่งที่จะสอนต่อไปขอเป็นเรื่องการเช็คค่าต่อนะครับเกี่ยวกับถ้าสมมติเงื่อนไขเราต้องการให้รองรับแบบถูกอย่างใดอย่างหนึ่งก็ถือว่าถูก เช่น เราต้องการเช็คค่าบางอย่างแบบถูก 1 ในเงื่อนไขก็ถือว่าถูกและให้โปรแกรมทำงาน ยกตัวอย่างเราอาจจะต้องการเช็คว่า ค่านี้มีค่าเท่ากับ 40 หรือ มีค่าเท่ากับ 80 ให้ return ว่า ‘Yeah’

const a = 40
const b = 80

function printYeahWhenEqualFourtyOrEighty(value) {
  if (value === 40 || value === 80) {
     return 'Yeah'
  }
}

console.log(
  printYeahWhenEqualFourtyOrEighty(a)
)

console.log(
  printYeahWhenEqualFourtyOrEighty(b)
)

// ทั้งสองบรรทัดจะ log ว่า Yeah

โดยการใช้เครื่องหมาย “||” เรียกว่า ไปป์ ใส่สองตัวติดกันจะหมายความว่า เงื่อนไขข้างหน้าหรือข้างหลังถูกอันใดอันหนึ่งก็จะเข้าเงื่อนไข

นอกจากนั้นเรายังสามารถเช็คค่าแบบเป็นเงื่อนไขว่า ต้องถูกต้องทั้งสองเงื่อนไขถึงจะทำงานเช่น ค่าแรกต้องเป็น 40 และค่าที่สองต้อง 80 เรามาดูกัน

const a = 40
const b = 80

if (a === 40 && b === 80) {
  // code ตรงส่วนนี้จะทำงาน
}

โดยการใช้เครื่องหมาย && เรียกว่า แอนด์ ติดกันจะหมายความว่าเงื่อนไขข้างหน้าและข้างหลังต้องถูกต้องถึงจะทำงาน ถูกแค่ข้างหน้าหรือข้างหลังไม่ได้ ต่อไปเราจะเรียนรู้เกี่ยวกับการเขียน js ให้มันตอบสนองบ้างอย่างในหน้าจอกันดีกว่า ส่วนเรื่องพื้นฐานอื่นๆคุณต้องติดตามต่อไปนะครับ ผมจะไม่สอนทุกอย่างเพราะผมคิดว่ามันทำให้คุณผู้อ่านงง และเรียนไปยังไม่ได้ใช้ก็เท่านั้นครับ

Interactive กับปุ่ม

หลังจากเราเรียนรู้การเขียน js ไปบ้างแล้ว แล้วก็การใช้ if else แบบให้โปรแกรมของเรารู้จักทางเลือก เรามาลองเล่นอะไรกับหน้าจอ html จริงๆกันบ้างครับจะได้ชินเอาล่ะมาตั้งโจทย์กัน

โจทย์คือ เราจะมี tag p 1 tag มี class ชื่อว่า “text-toggle” และต้องการสร้างปุ่ม 1 ปุ่มแล้วเมื่อกดปุ่มจะทำการซ่อน tag p ตัวนี้เอาล่ะไปดู code กับหน้าตาดูว่ามันเป็นอย่างไรครับ

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>สอน Javascript โดย oxygenyoyo.com</title>
	<script src="js/main.js"></script>
</head>
<body>
	<p class="text-toggle">สอน javascript โดย oxygenyoyo.com</p>
	<button id="toggle-button">ซ่อน / แสดง tag p</button>
</body>
</html>

หน้าตาจะเป็นแบบนี้ครับ

ณ ตอนนี้ถ้าคุณคลิกปุ่มมันจะไม่เกิดอะไรขึ้น ก็แน่น่ะสิเพราะเรายังไม่ได้เขียน js อะไรเลย กลับไปที่ไฟล์ main.js จะเห็นใน code ตัวอย่างนะครับเราแยกเป็น js เป็นสัดเป็นส่วนโอเคไปต่อกันที่ js เราจะทำการเพิ่ม event หรือเพิ่ม function ในการคลิกติดกับปุ่มนั้นๆ ตอนนี้เรายังไม่ได้เรียนกับเกี่ยวการติด event กับ tag หรือปุ่มแต่ไม่เป็นไรเราดูการทำงานเลย ไปดูกันว่า code js เขียนแบบไหน เปิดไฟล์ main.js มาเลยครับ

let isShow = false
document.getElementById("toggle-button").addEventListener("click", function(){
  document.getElementsByClassName('text-toggle')[0].style.display = (isShow) ? '' : 'none'
  isShow = !isShow
})

คราวนี้ถ้าคุณ save แล้วทำการรันผลปรากฎว่า code จะไม่ทำงานครับ ใช่แล้วผมตั้งใจให้คุณเจอ error ครับไปดูกันว่า error เป็นอย่างไร เปิด inspect element แล้วดู console กันครับ

แปลง่ายๆ คือ js มันพยายามจะเอา function การกดปุ่มไปติดกับ element id ชื่อว่า toggle-button แต่มันหาไม่เจอ ปัญหานี้คนเขียน js มือใหม่จะเจอบ่อยๆ ผมเลยอยากให้คุณได้เจอก่อนครับจะได้เรียนรู้วิธีแก้ปัญหาว่ามันทำอย่างไร ในเมื่อเรารู้แล้วว่า error มันหมายความว่ายังไง ทางแก้ไขคือ ส่วนของ js มันทำงานก่อนที่ html จะทำการสร้าง tag นั้นๆ ถ้างงไปดูรูปกัน

วิธีการแก้ไขนั้นง่ายมากครับแค่ย้ายการเรียกไฟล์ js หรือ include js ไปอยู่ด้านล่างก่อนจะปิด body ครับแบบนี้ครับ

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>สอน Javascript โดย oxygenyoyo.com</title>
</head>
<body>
	<p class="text-toggle">สอน javascript โดย oxygenyoyo.com</p>
	<button id="toggle-button">ซ่อน / แสดง tag p</button>
	<script src="js/main.js"></script>
</body>
</html>

เมื่อทำการ save แล้ว refresh error นั้นก็น่าจะหายไปแล้วปุ่มก็จะทำงานแล้วครับ โดยการกดปุ่มครั้งแรกแล้ว tag p จะหายไปแล้วกดอีกทีก็จะแสดง ถ้าไม่มีอะไรผิดพลาดก็จะทำงานแบบที่ผมบอกไปครับ ยินดีด้วยคุณได้ทำการสร้างการตอบสนองแบบง่ายๆด้วย js แล้วครับ ต่อไปผมจะอธิบายเกี่ยวกับ code ส่วน js ว่ามันทำงานอย่างไรนะครับ

let isShow = false
document.getElementById("toggle-button").addEventListener("click", function(){
  document.getElementsByClassName('text-toggle')[0].style.display = (isShow) ? '' : 'none'
  isShow = !isShow
})

บรรทัดแรกเราประกาศตัวแปรชื่อว่า isShow เป็นตัวแปรแบบที่สามารถเปลี่ยนแปลงค่าได้ โดยเรากำหนดให้เป็น false ตั้งแต่ตอนแรก

บรรทัดที่สองเราทำการสร้าง function เพื่อจะไปติดกับ element ที่มี id ชื่อว่า toggle-button โดย event ที่เราจะเอาไปติดคือ click นั้นเอง ถ้าสมมติเราตัดมาแค่บรรทัดนั้นหน้าตาจะเป็นแบบนี้ครับ

document.getElementById("toggle-button").addEventListener("click", function () {})

หลายคนอาจจะงงทำไมต้องเขียนแบบนี้ จริงๆแล้วคำสั่ง addEventListener เรายังมีหลาย event ให้เลือกเช่นเราอาจจะบอกว่า เมื่อมีคนกดปุ่มแบบ double click ให้ทำอะไร ถ้ามีคนกดปุ่มค้างให้ทำอะไร เมื่อมีคนมาเลือก input นี้ให้ทำอะไร เช่นเวลาคุณ กรอกข้อความใส่ใน input หลายๆ เราสามารถควบคุมได้หลายแบบเลยครับ ตอนนี้เราเรียนรู้ click ไปก่อนนะครับ

ต่อมาคือ code ข้างใน event click

document.getElementsByClassName('text-toggle')[0].style.display = (isShow) ? '' : 'none'
  isShow = !isShow

บรรทัดแรกของ code ข้างบนคือ การที่เราสั่งให้ js ทำการค้นหา element ในหน้าเว็บที่ชื่อ class ว่า ‘text-toggle’ โดยเวลาเราถ้าหยิบมาด้วยชื่อ class มันจะกลับมาเป็น array เสมอนั่นทำให้เราต้องใส่ [0] เพื่อบอกว่าเราจะหยิบ element ที่ชื่อ class ‘text-toggle’ อันแรกเท่านั้น สมมติว่าในหน้าเว็บเรามี class ‘text-toggle’ หลายตัวจะได้ไม่เลือกผิดครับ

เสร็จเมื่อเราหยิบ element มาแล้วเราจะทำการเปลี่ยน style ที่ชื่อ property ว่า display ซึ่งหลังจากเราเรียนรู้ด้าน css มาแล้วจริงๆ style ก็คือการเปลี่ยนแปลง css ครับนั่นเป็นสาเหตุว่าทำไมผมถึงสอน css ก่อน โดยค่า display จะเปลี่ยนแปลงค่าตามค่าด้านขวาครับ

คราวนี้อธิบาย code ด้านขวาหน่อยนะครับ เราเขียนแบบนี้

(isShow) ? '' : 'none'

จำได้หรือเปล่าการเขียนแบบนี้คือการเขียน if แบบสั้นนั่นเองครับ อธิบายคือ เราทำการเช็คค่า isShow ว่าตอนนี้เป็น true หรือ false ถ้าเป็น true จะใช้ค่า string ว่าง ” หรือถ้าเป็น false จะเป็นค่า ‘none’ นั่นเองครับ

สุดท้ายเราทำการเปลี่ยนแปลงค่า isShow = !isShow หมายความว่าถ้าสมมติตอนแรกเรากำหนดให้ isShow = false ถูกไหมครับ การที่เราใส่เครื่องหมายตกใจหมายถึงเราจะทำการให้มันเปลี่ยนค่าเป็นตรงกันข้ามเช่น ตอนแรกเป็น false หลังจากคลิกปุ่มค่าใหม่จะเป็น true แล้วคลิกอีกก็จะเป็น false ครับ

เมื่อเราทำการคลิกครั้งแรก code มันจะทำงานแบบนี้ครับ ทำการหยิบ element tag p แล้วเช็คค่าว่าตอนนี้ isShow เป็นอะไร ซึ่งตอนแรกเรากำหนดเป็น false ค่าที่ได้คือ ‘none’ พอค่าเป็น ‘none’ ก็ทำให้ค่า display = ‘none’ ทำให้ tag p นั้นหายไปครับหลังจากทำการเปลี่ยนแปลงค่า css เราก็ทำการ เปลี่ยนแปลงค่า isShow ให้เป็น true ครับ

คราวนี้ถ้าคลิกอีกครั้งค่า isShow ตอนนี้เป็น true ก็จะไปเปลี่ยนแปลงค่า display จาก ‘none’ เป็น ” ทำให้ tag p แสดงนั่นเองครับและหลังจากนั้นก็ทำการเปลี่ยนแปลงค่า isShow เป็น false อย่างนี้ครับ

ก่อนจากกัน

บทความนี้น่าจะทำให้คุณได้เรียนรู้อะไรมากขึ้นแหละว่า js มันทำอะไรได้บ้าง และบทความนี้ทำให้คุณเห็นว่าคุณได้ใช้ความรู้เกือบทั้งหมดที่เราเรียนรู้มานั่นแหละว่าทำไมเขียนเว็บเรื่องมันเยอะ แต่ไม่ยากที่จะเรียนรู้ครับ บทความหน้าเราจะมาลองเรียนรู้การวนลูป ( loop ) การทำงานแบบวนซ้ำๆว่ามันใช้งานยังไง แล้วเราประยุกต์อะไรได้บ้าง

การบ้าน

จริงๆการที่เราพัฒนาต้องมีการลงมือทำจริง เพราะฉะนั้นอยากให้คุณพัฒนาครับ เราจะมีการบ้านให้คุณได้ประยุกต์ดูครับ

โจทย์: เราจะมี div ที่มี background เป็นสีขาว ‘white’ สูง 300px และกว้าง 300px และเราจะมีปุ่ม 3 ปุ่ม ปุ่มแรกชื่อว่า ‘red’ ปุ่มที่สองชื่อว่า ‘green’ และปุ่มสุดท้ายชื่อว่า ‘reset’ โดยแต่ปุ่มคลิกแล้วจะทำงานตามนี้ครับ

  • เมื่อคลิกปุ่ม red จะทำการเปลี่ยนสี div เป็นสีแดง สูง 200px และกว้าง 100px
  • เมื่อคลิกปุ่ม green จะทำการเปลี่ยนสี div เป็นสีเขียว สูง 400px และกว้าง 200px
  • เมื่อคลิกปุ่ม reset div กลับเป็นเหมือนทั้งสีขาว ความสูง ความกว้าง

ถ้าใครทำแล้วก็เม้นด้วย code มาได้นะครับ แล้วจะมาเฉลยในอาทิตย์ต่อมานะครับ

ฝากข้อคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.