ข้อไหนอ่านโจทย์แล้วเกิดข้อสงสัยหรือไม่เข้าใจตรงไหนสามารถทักถามอาจารย์หรือ TA ก่อนได้เลย ไม่จำเป็นต้องรอให้ถึงคาบเรียน

สามารถแก้ไข Vue Instance ที่อยู่ใน <script> ที่อยู่ส่วนล่างของ checkout.html ได้เลย!!! ไม่ต้องกลัวครับ

ข้อ 1 ประกาศตัวแปรเพื่อรับค่าจากแบบฟอร์มที่มีให้ ดังนี้

prename ใช้รับค่าจาก select ชื่อ prename

fname ใช้รับค่าจาก input ชื่อ fname

lname ใช้รับค่าจาก input ชื่อ lname

score ใช้รับค่าจาก input ชื่อ score

เมื่อทำถูกต้องแล้ว ค่าต่าง ๆ ที่พิมพ์ไปจะแสดงเป็นตัวอักษรแดง ๆ ข้างล่างฟอร์ม

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex1">

Prename

Firstname

Lastname

Score

prename = {{prename}}
fname = {{fname}}
lname = {{lname}}
score = {{score}}

ข้อ 2 สังเกตว่าจะมีปุ่ม Add Student อยู่ปุ่มนึง และมี table ที่มี column "Name" และ "Score" โดยนักศึกษาจะต้องทำให้เมื่อกดปุ่มนี้แล้ว ข้อมูลที่ถูกกรอกจากข้อ 1 จะต้องเพิ่มใน table ที่เห็นอยู่ โดยให้สร้าง Method ชื่อว่า addStudent() โดยมีรายละเอียดที่จะต้องทำใน Method นี้ ดังนี้

ตรวจสอบข้อมูลทุกช่อง หากช่องไหนยังไม่ได้กรอก ให้ขึ้น Alert ว่า "Please enter all inputs"
ตรวจสอบข้อมูลจากช่องใส่คะแนน ค่าของคะแนนจะต้องอยู่ในช่วง 0-100 หากไม่ได้อยู่ในช่วงดังกล่าว ให้ขึ้น Alert ว่า "Score is incorrect"
ถ้าข้อมูลไม่ติดเงื่อนไขข้อ a. และ ข้อ b. แล้ว ให้เพิ่มข้อมูลที่กรอกไปในตัวแปร students ในรูปแบบของ Object
ข้อมูลของช่องต่าง ๆ ที่อยู่ใน ข้อ 1. จะถูกเคลียค่าเป็นค่าว่างเหมือนเดิม

แต่ยังไม่จบแค่นั้น!! นักศึกษาจะต้อง loop ข้อมูลในตัวแปร student มาแสดงใน table และแสดงข้อมูลตามตัวอย่างที่แสดงให้ดู ส่วนปุ่ม Delete จะใช้ในข้อถัดไป

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex2">

Add Student

Name	Score
{{`${student.prename}${student.fname} ${student.lname}`}}	{{student.score}}	Delete

ข้อ 3 สร้าง Method ชื่อว่า removeStudent() โดยจะมีหน้าที่ลบแถวของนักศึกษาที่ต้องการ โดยมีหลักการทำงานของ method ดังนี้

รับ Parameter มา 1 ตัว คือ index ที่ได้จากการ loop

ลบ Object ตำแหน่งที่ index จาก Parameter ที่รับมา

โดยเมื่อกดปุ่มลบของแถวที่ต้องการ จะทำการ call Method ดังกล่าว และแถวที่กด Delete ก็จะต้องหายไปตามการทำงานของ Method

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ของปุ่ม Delete ใน <div id="ex2">

ข้อ 4 ให้สร้าง Computed Properties ขึ้นมา 2 ตัว

ตัวแรกมีชื่อว่า sumScore โดยจะมีหน้าที่รวมคะแนนจากทุกคนจากตารางข้อที่ 2. โดยอัตโนมัติ

ตัวที่สองมีชื่อว่า avarageScore โดยจะมีหน้าที่หาค่าคะแนนเฉลี่ยจากตารางข้อที่ 2. ซึ่งสามารถนำ sumScore มาใช้ต่อได้เลย

และแสดงผลลัพท์ที่ได้แทนที่ค่าตัวอย่างที่ให้มา

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex4">

sum	{{sumScore}}
avarage	{{avarageScore}}

ข้อ 5 ให้สร้าง Watchers ในการดักจับการเปลี่ยนแปลงของค่า averageScore และทำการบันทึกการเปลี่ยนแปลงเข้าไปในตัวแปร logs ในรูปแบบของ Object และนำข้อมูลใน logs มาแสดงผลในรูปของตาราง ตามตัวอย่างด้านล่าง โดยมีเงื่อนไขในการแสดงผล ดังนี้

ให้ตารางการแสดงผลมีทั้งหมด 3 columns ได้แก่ Average Score Change, From และ Different From Old Value
ถ้าค่า averageScore มีค่าเพิ่มขึ้น ให้แสดงผลโดยใช้ตัวอักษรสีเขียว
ถ้าค่า averageScore มีค่าลลง ให้แสดงผลโดยใช้ตัวอักษรสีแดง

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode และแก้ไข code ใน <div id="ex5">

Simple Log Table

Average Score Change	From	Different From Old Value
{{log.newVal}}	{{log.oldVal}}	{{`${log.newVal - log.oldVal >= 0 ? '+' : '-'} ${Math.abs(log.newVal - log.oldVal)}`}}

ข้อ 6 ให้ใช้ Watchers สำหรับการค้นหา First Name และ Last Name แล้วแสดงผลข้อมูลตามที่ค้นหามาได้

ตัวช่วย 💡Array.prototype.includes()

First Name	Last Name	E-mail	Gender
{{item.first_name}}	{{item.last_name}}	{{item.email}}	{{item.gender}}

ข้อ 7

ให้ใช้ Computed สำหรับการค้นหา Gender จากการเลือกตัวเลือกใน drop down list แล้วแสดงผลข้อมูลตามที่ค้นหามาได้

First Name	Last Name	E-mail	Gender
{{item.first_name}}	{{item.last_name}}	{{item.email}}	{{item.gender}}