Javascript ตอนที่ 3

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

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

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

Loop คืออะไร

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

หลังจากอธิบายไปแล้วมาดูตัวอย่างกันดีกว่าครับ สมมติว่าเราอยากให้ js ทำการนับเลข 1 – 10 โดยการ console.log ออกมา ถ้าใช้ความรู้ก่อนเราจะมาเรียนรู้เรื่อง loop เราจะทำยังไง ? ก็คงทำแบบนี้ถูกต้องไหมครับ

console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
console.log(6)
console.log(7)
console.log(8)
console.log(9)
console.log(10)

สมมติว่าถ้าโจทย์เปลี่ยนเป็นให้ console.log 1 – 100 เราคงไม่ทำแบบนี้ร้อยครั้งถูกไหมครับ เนี้ยแหละครับคือข้อดีของการวนลูปเรามีดูกันว่าจากตัวอย่างให้ console.log 1 – 10 แบบวนลูปเราจะทำอย่างไร

for (const i = 1; i <= 10; i++) {
	console.log(i)
}

แค่นี้เลย เขียน 3 บรรทัดต่อให้เราจะนับ 1 -100 เราก็ยังเขียนแค่ 3 บรรทัดเหมือนเดิมสะดวกไหมครับ ? เอาล่ะมาอธิบาย code กันหน่อยครับ ลูปที่เราใช้งานในตัวอย่างด้านบนเราเรียกว่า ลูปแบบ for ซึ่งลูปเนี้ยก็มีหลายแบบมาก ทั้ง for, map, do … while, while … do แต่เราค่อยไปเรียนรู้กันทีหลัง

for loop มันเขียนอะไรบ้าง อย่างแรกก็ให้เริ่มที่คำว่า for แล้วตามด้วย เงื่อนไขในวงเล็บ ซึ่งเราจะกำหนดค่า i จริงๆมันคือตัวแปรจะเปลี่ยนชื่อเป็นอะไรก็ได้ครับ โดยเรากำหนดค่าเริ่มต้นให้มันคือ 1 แล้วถัดมาหลัง semi colon (;) เราบอกว่า ถ้าเงื่อนไขตัวแปร i นั้น น้อยกว่าหรือเท่ากับ 10 จะยังคงวนอยู่ในลูป แล้วสุดท้ายคือ ทุกครั้งที่จบการทำงานในลูป 1 รอบจะให้ตัวแปร i เพิ่มขึ้นหรือลดลง การใส่ว่า i++ แปลว่าจะเพิ่มขึ้นทีละ 1 นั่นเอง

มันเอาไปใช้อะไรได้บ้าง ?

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

ปกติเราใช้การวนลูปกับอะไร ?

จากที่สอนไปเราจะเข้าใจเรื่องวนลูปแต่เรายังไม่รู้เลยว่ามันจะวนกับอะไรยังไง เดี๋ยวเราไปลองเล่นกับการวนลูปที่เราใช้กันบ่อยๆใน js กันดีกว่าครับ โดยเราได้เรียนรู้ไปใน javascript ตอนที่ 1 ว่ามีตัวแปรแบบเก็บหลายๆค่าได้นั่นคือ array โดยปกติเวลาเราเขียน js ส่วนใหญ่ตัวแปรที่เราจะยุ่งเกี่ยวนั้นจะเป็น array ซะส่วนใหญ่ครับ เพราะมันสะดวกในการใช้งาน สามารถจัดเก็บทั้ง string , number, object อยู่ในตัวเองได้ และมี function หลายๆอย่างที่ทาง javascript ช่วยเหลือในการตัด ต่อ เติม ค่าเข้าออกครับ

พูดมายาวเราไปลองเล่นกับมันเลยดีกว่าครับ สมมติว่าเราจะทำการสร้าง List เพื่อแสดงผลโดยข้อมูลเราจะได้รับมาเป็น array object โดย 1 element ( เราเรียกแต่ละค่าใน array ว่า element นะครับ ) จะมีค่า 3 ค่าคือ first_name, last_name, age เอาล่ะไปดูกันครับ

const data = [
    {
        "first_name": "John",
        "last_name": "Snow",
        "age": 35
    },
    {
        "first_name": "Daenerys",
        "last_name": "Targaryen",
        "age": 24
    },
    {
        "first_name": "Arya",
        "last_name": "Stark",
        "age": 17
    }
]

เราจะทำการสร้าง list จากที่เราเรียนรู้ไปเกี่ยวกับ html แล้วและเอาการวนลูปมาผสมกันครับหน้าตาตอนสุดท้ายจะออกมาประมาณนี้

โอเคเราไปดูส่วน code กันครับ

const people = [
    {
        "first_name": "John",
        "last_name": "Snow",
        "age": 35
    },
    {
        "first_name": "Daenerys",
        "last_name": "Targaryen",
        "age": 24
    },
    {
        "first_name": "Arya",
        "last_name": "Stark",
        "age": 17
    }
]

document.write('<ul>')

people.map((person) => {
    document.write(`<li>first name: ${person.first_name} last name: ${person.last_name} age: ${person.age}</li>`)
})

document.write('</ul>')

จาก code ด้านบนตรง document แล้วเราทำการใช้จุดแล้วตามด้วยคำว่า write นั้นเป็นการเรียกใช้ function จาก document นั่นเองอย่างที่เคยอธิบายไปในตอนที่ 2 ว่าตัว javascript นั้นมี document ก่อนที่ถูกเรียกอย่างที่สองแล้วใน document ก็มี function มากมายให้เราเรียกใช้ครับ โดย write เป็นหนึ่งใน function ครับโดยมันจะเอาค่าที่ส่งเข้าไปใน function ไปแสดงผลทางหน้าจอ

ตรงจะคล้ายๆกับเราอ่านว่าเราจะ เขียน ( write ) เข้าไปใน เอกสาร ( document ) ครับแล้วเราก็ทำการ write tag ul ตอนแรก เสร็จแล้วบรรทัดต่อมาก็คือการ วนลูปด้วย function map นั่นเองครับ โดย map จะทำการวนทีละ element จะสังเกตุว่าใน loop ผมจะทำการเขียน li ทีละบรรทัดครับ

document.write(`<li>first name: ${person.first_name} last name: ${person.last_name} age: ${person.age}</li>`)

โดย map เราจะใช้ในการวนลูปตัวแปร array นั่นเองครับคุณน่าจะเริ่มเห็นแล้วว่าเราจะใช้ประโยชน์การวนลูปอย่างไร

ในความเป็นจริงนั้นเราจะไม่ได้วนลูปแบบเอาค่ามาวนๆแบบนี้นะครับแต่ในตัวอย่างโค้ดบทความนี้แสดงให้คุณเห็นถึงว่าการเขียนวนลูปทำอย่างไร อะไรคือการลูปนะครับ เกือบทุกภาษาของการเขียนโปรแกรมก็มีพวกนี้แหละครับ function , loop , systax

For … loop

ต่อมาเรามารู้กับ loop พื้นฐานที่หลายๆภาษามีเป็นการวนโดยการกำหนดเลขเริ่มต้นและสร้างเงื่อนไขออกจากลูป เสร็จแล้วจะทำการเพิ่มค่าของตัวแปรในเงื่อนไข อ่านแล้วคง งงไปดู code กันดีกว่าครับ

// วิธีใช้
for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

// การเรียกใช้
for (let i = 0; i <= 10; i++) {
    console.log(i)
}

สังเกตุว่าการใช้ for … loop นั้นจะต้องมี 3 statement ( statement คือคำสั่งที่เราเขียนแล้วลงท้ายด้วยการขั้น semi colon “;” ) โดยแบ่งตามนี้ครับ

statement 1 จะเป็นการกำหนดค่าเริ่มต้นของตัวแปรไว้ปรียบเทียบในเงื่อนไขจะทำงานครั้งเดียวครับ ในตัวอย่างคือเรากำหนดค่าตัวแปรที่ชื่อว่า i เป็น let ซึ่งจะเปลี่ยนแปลงค่าได้ และมีค่าเป็น 0

statement 2 จะเป็นการนำเอาตัวแปรที่อยู่ใน statement 1 มาทำการหาเงื่อนไขในการหลุดออกจากลูปโดยจะทำงานเรื่อยๆถ้าเงื่อนไขตรงนี้เป็นจริงจากตัวอย่างเรากำหนดเงื่อนไขเปรียบเทียบค่า i ต้องน้อยกว่าหรือเท่ากับ 10 ถ้ายังตรงกับเงื่อนไขนี้ code block จะทำงานเรื่อยๆ หมายถึง code ส่วนการ console.log

statement 3 จะเป็นการคำสั่งหลังจากที่ทำการรันคำสั่ง code block เสร็จจะทำการรันคำสั่ง statement นี้ครับโดยเรากำหนดให้เพิ่มค่าตัวแปร i ไปอีก 1 เพราะฉะนั้นลำดับจะเป็นแบบนี้ครับ

  • กำหนดค่า i เป็น 0
  • เอาค่า i เปรียบว่าน้อยกว่าหรือเท่ากับ 10 ไหม ? ( 0 <= 10 ) เป็นจริง
  • ถ้าเป็นจริงจะทำการรันคำสั่งใน code block จากตัวอย่างคือ console.log(i)
  • หลังจากนั้นจะทำการเพิ่มค่าตัวแปร i ไปอีก 1 ตอนนี้ i จะเป็น 1 แหละครับ
  • นำค่าตัวแปร i มาเปรียบเทียบว่าน้อยกว่าหรือเท่ากับ 10 ไหม -> เป็นจริง เพราะ (1<= 10)
  • ถ้าเป็นจริงจะทำการรันคำสั่งใน code block จากตัวอย่างคือ console.log(i)
  • หลังจากนั้นจะทำการเพิ่มค่าตัวแปร i ไปอีก 1 ตอนนี้ i จะเป็น 1 แหละครับ
  • จะทำอย่างนี้ไปจนกระทั่งค่า i เป็น 11 และนำมาเทียบ ( 11 <= 10 ) ได้ค่าเป็น false จะหลุดจาก ลูปนั้นครับ

ถ้าเราเปิด inspect element ที่สอนไปจะปรากฎการ log ออกมาดังภาพข้างล่างครับ

While Loop

ต่อมาเรามารู้จัก while loop เป็นการวนถ้าเช็คว่าเงื่อนไขยังเป็นจริงมันจะวนไปเรื่อยๆไม่สิ้นสุดคราวนี้สมมติว่าเราอยากได้เหมือนตัวอย่างข้างบนให้ console.log เรามาดูกันว่าเขียนอย่างไร

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

จะได้ผลลัพธ์เหมือนกับ for loop คราวนี้คำถามคือ เราจะมีคำสั่งเกี่ยวกับวนลูปทำไมเยอะเยะอันนี้คือแค่สองอันนะยังไม่ได้บอกที่เหลือ คือผมจะบอกว่า แต่ละอันสามารถทำการวนได้เหมือนๆกันแต่ละแตกต่างกันในบางกรณีครับ อย่างตัว while loop เราใช้สำหรับการเปรียบเทียบค่า ไม่ต้องกำหนดตัวเลข แต่ถามว่าเรากำหนดได้ไหมก็ทำได้แต่อย่างที่บอกใช้เครื่องมือให้ถูกกับสถานการณ์พอครับ อย่าฝืนถ้ามันไม่ใช่

do … while

ต่อมาเรามารู้จักอีกการวนลูปคือ do … white loop โดยทุกครั้งมันจะทำการรันคำสั่งก่อนอย่างน้อยที่สุดคือ 1 รอบ ถึงแม้ว่ามันจะหลุดจากเงื่อนไข loop ตั้งแต่แรกก็ตามมันจะรันคำสั่งแน่ๆ 1 ครั้งครับไปดูหน้าตากันว่ามันทำงานอย่างไร

let i = 0;

do {
  console.log(i);
  i++;
}
while (i < 10); 

มาจะทำการ console.log(i) อย่างน้อย 1 ครั้งครับโดยการวนลูปแบบนี้มันจะรันก่อนแล้วค่อยทำการเช็คเงื่อนไขทีหลังครับ

Array Loop

นอกจากการวนลูปแบบทั่วๆไปที่เราได้เรียนรู้กันไปแล้วคราวนี้เราจะสอนเกี่ยวกับการวนลูปของ array กันบ้าง เพราะปัจจุบันการใช้ตัวแปรแบบ array ใน JS มันสามารถประยุกต์ได้หลายแบบมาก จากที่เราเรียนรู้มาในบทก่อนๆ

const a = ['1', '2', '3']
const b = [{ a: 1}, { a: 2}, { a: 3}]

เราเรียกตัวแปร a ว่าเป็นแบบ array ทั่วไป ส่วนตัวแปร b เราจะเรียกว่า array object ซึ่งส่วนใหญ่จะใช้แบบ b เยอะแต่ทั้งคู่สามารถใช้ function การวน loop ของ array ได้ทั้งคู่ครับ

ปกติการวน loop array นั้นเราจะทำเพราะต้องการเปลี่ยนแปลงค่าใน array เช่น ตอนแรกอาจจะมีหลายๆค่าแต่เราต้องการเพียงค่ายกตัวอย่างเช่น สมมติว่าเรามีตัวแปรแบบนี้

const users = [
    { 
        first_name: 'John',
        last_name: 'snow',
        age: 21
    },
    { 
        first_name: 'Harry',
        last_name: 'potter',
        age: 21
    },
    { 
        first_name: 'Nick',
        last_name: 'fury',
        age: 21
    }
]

เราอาจจะต้องการ array ชุดใหม่ที่เก็บชื่อแบบ full name โดยการเอาชื่อ first_name กับ last_name โดยผลลัพธ์จะเป็นแบบนี้

['John snow', 'Harry potter', 'Nick fury']

เรามาลองดูกันว่าทำอย่างไร

map

function ที่จะสอนอันแรกของการวน loop array คือ function map ครับการใช้งานก็คือมันจะทำการวนไปที่ตัว เราเรียกว่า element แต่ละ element ก็คือค่าแต่อันใน array นั้นเอง

const a = ['1', '2', '3']

const b = a.map(function(element, index) {
  // console.log(element) วนเป็น 1 รอบที่สองจะเป็น 2 ไปเรื่อยๆ จนหมด array
  return element
});

// b จะเป็นเหมือน a 

คราวนี้เรามาลองวนเพื่อจะทำเหมือนโจทย์ ตอนแรกที่เราต้องการเป็นชื่อเต็มกันดูครับ ว่าทำอย่างไร

const users = [
    { 
        first_name: 'John',
        last_name: 'snow',
        age: 21
    },
    { 
        first_name: 'Harry',
        last_name: 'potter',
        age: 21
    },
    { 
        first_name: 'Nick',
        last_name: 'fury',
        age: 21
    }
]

const fullnames = users.map(function(element) {
  return `${element.first_name} ${element.last_name}`
})

console.log(fullnames) // [ 'John snow', 'Harry potter', 'Nick fury' ]

สามารถใช้ keyword สำหรับค้นใน google ต่อด้วยคำว่า array javascript loop ครับจะมีการวนอีกหลายรูปแบบเลย สามารถดูที่นี่ก็ได้ครับ

https://www.w3schools.com/jsref/jsref_map.asp

สรุป

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

Homework

  • ให้วนลูป console.log เริ่มที่ 1 – 500
  • ให้วนลูป array โดยกำหนดให้ตัวแปร users เป็นแบบนี้
const users = [
    { 
        first_name: 'John',
        last_name: 'snow',
        age: 21
    },
    { 
        first_name: 'Harry',
        last_name: 'potter',
        age: 21
    },
    { 
        first_name: 'Nick',
        last_name: 'fury',
        age: 21
    }
]

ให้สุดท้ายผลลัพธ์ออกมาเป็นแบบนี้

const users = [
    { 
        first_name: 'John',
        last_name: 'snow',
        age: 19,
        is_student: true
    },
    { 
        first_name: 'Harry',
        last_name: 'potter',
        age: 25,
        is_student: false
    },
    { 
        first_name: 'Nick',
        last_name: 'fury',
        age: 30,
        is_student: false
    }
]

โดยเงื่อนไขให้ถ้าอายุของคน คนนั้นเกินกว่า 23 ปีให้เพิ่มค่า is_student เป็น true ถ้าไม่ใช่ให้เป็น false นะครับ

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

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