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

2. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 1
การ เราจะเ ยนโปรแกรม นมา 1 โปรแกรม เราจะ อง อน า โปรแกรม
เรา งจะส าง นมา อโปรแกรมอะไร กระบวนการ งานอะไร าง ห าตา
ของโปรแกรมเ นอ างไร แ ในเ ม 1 ผมจะมาก าว งการเ ม นการเ ยน
โปรแกรม อน เ อใ ไ เ าใจโครงส างการ งานภายในของโปรแกรม
Software อ ด ง มา ดเ ยงใ เ ดเ น 1 โปรแกรม อน เราจะ
การส างโปรแกรม นมา องมา ด อน า โปรแกรมของเรา จะ ซอ ฟแว
อะไร าง เ น จะ โปรแกรม ดการห า าน จะประกอบ วย ซอ ฟแว ดการ
น า ซอ ฟแว ดการตะก า น า ซอ ฟแว ห บ ดเ น เ น น
ในห ง อเ ม เ นเ ยงเ อหา น ๆ เ ยบเ ยงโดย นกฤต ห กษร
การเ ยนเ อใ เ อน ๆ ไ ไ เ ยนจบห อเคย กษาเ ยว บการเ ยน
โปรแกรมมา ไ าน นและสามารถ าน เ องและเ าใจ โดยไ อง อสง ย าง
คา จน อง การเ ด Google เ อ นหา พ เฉพาะ ก ง งใ อเ าใจ
าย และสามารถเ ยน ไ ไว
อน เ มเ ยน อยากใ กคน เ ดไป ง 2 ห า ด าย เ อ จะไ
เค อง อในการ กฝน ฒนาและเ ยน ไปพ อม น

3. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 2
โครงส างของซอ ฟแว ประกอบ วย
วแปร (Variable)
ใ ห บระ ประเภทของ า าง ๆ ในซอ ฟแว ของเรา แ ละภาษา
โปรแกรม จะ การเ ยกใ งาน วแปร แตก าง น
ในภาษา Javascript เราจะ การประกาศประเภทของ วแปร 3 ประเภท
const อ าคง เ อ หนดแ ว ไ สามารถเป ยนแปลง า ประกาศ
วย const ไ ในภายห ง
let อ า ดห น สามารถเป ยนแปลงไ
var ณสม เ นเ ยว บ let แ จะไ ยมใ ใน จ น
ณสม ของ วแปร
- String อ วแปร เ น อความหลาย
วอ างการใ String ในภาษา Javascript
const name = “JAY”
- Character อ วแปร เ น ว กษร เ ยว
วอ างการใ Character ในภาษา Javascript
const name = “J”
- Booleen อ วแปร เ น าความจ งเ จ TRUE / FALSE
วอ างการใ Booleen ในภาษา Javascript

4. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 3
const isSuccess = true
- Integer อ วแปร วเลขเ ม นวน
วอ างการใ Integer ในภาษา Javascript
const age = 26
- Decimal ( Float, Double ) อ วแปร เ นทศ ยม
วอ างการใ Integer ในภาษา Javascript
const weight = 65.50
- Object อ วแปร เ บ อ ล ประกอบ วย Key และ Value งภายใน
Object จะ Key ไ น
Key อ อ ใ ดเ บ อ ลใน Object น ๆ
Value อ า เราจะ ดเ บไ ใน Key
วอ างการใ Object ในภาษา Javascript

5. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 4
- Array อ วแปร เ บ อ ลเ น บ Index เ น วระ บของ
อ ล างใน
อ บายเ มเ มเ ยว บ Index
Index ใน Array อ บของ อ ลภายใน Array งสามารถเ บ อ ล
ไ หลายประเภท โดยจะเ ม Index 0 เสมอ
วอ างการใ Array ในภาษา Javascript
ใน วแปร Array อ า profiles งหมด 1 Index โดยเ นการเ บ
อ ล Object ไ ใน Index 0
ใน วแปร Array อ า number งหมด 6 Index โดยเ นการเ บ
อ ลหลายประเภทไ ใน Array งก าว

6. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 5
ตรรกศาสต (Operator)
เ นเค องหมายทางห กค ตศาต มาใ ในการ นวน ส างเ อนไข
เป ยบเ ยบ า
+ การบวก
- การลบ
* การ ณ
/ การหาร
=== เป ยบเ ยบ า ตรง น
ผล พ ไ จะเ น Booleen
!== เป ยบเ ยบ า ไ ตรง น
ผล พ ไ จะเ น Booleen
> เป ยบเ ยบ า าน าย มากก า า านขวา
ผล พ ไ จะเ น Booleen
< เป ยบเ ยบ า าน าย อยก า า านขวา
ผล พ ไ จะเ น Booleen
>= เป ยบเ ยบ า าน าย มากก าห อเ า บ า านขวา
ผล พ ไ จะเ น Booleen
<= เป ยบเ ยบ า าน าย อยก าห อเ า บ า านขวา
ผล พ ไ จะเ น Booleen
++ เ ม าค งละ 1
-- ลด าค งละ 1
% หาร าโดย ดเฉพาะเศษ ไ จากการหาร

7. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 6
วอ างการใ ตรรกศาสต
const summary = 10
const qty = 5
const total = summary * qty
าใน total จะ าเ น 50
const userName = “JAY”
const adminName = “JAY”
const isAdmin = userName === adminName
าใน isAdmin จะ าเ น TRUE
const myAge = 26
const newMyAge = myAge++
าใน newMyAge จะ าเ น 27

8. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 7
เ อนไข (Condition)
ว วยใ เราสามารถ ใ โปรแกรมสามารถส างทางเ อกในการ เ ยก
ใ ง น ห อ ควบ มการ งานตาม หนดไ
- IF-ELSE เ นการ หนดทางเ อก า าใน if เ นจ ง จะ งใ ง อ
ภายใน if งาน และจะ ามไป งานใน ง eles เ อ อ ล เ นเ จ
วอ าง
จาก ง าง น จะเ น า า 1 เ า บ 1 นเ นจ ง ง
console.log(‘YES’) จะ งาน แ าเ นเ จ ง console.log(‘NO’) จะ
งาน

9. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 8
- Switch Case เ น ง ห บการส างเ อนไขแบบหลากหลายเ อนไข
เราจะใ ง อเ อ องการใ การ งานเ อ อ ล งเ ามา ตรง
ตาม หนดไ
วอ าง
จาก ง เ อ Switch ไ บ าจาก วแปร textCase จะ า
ไ บไปเป ยบเ ยบ บ า อ ใน case เราส างไ จาก วอ าง ง
textCase าเ า บ “HELLO” ง น case าเ น “HELLO”
เ าเ อนไข และ งใ ง เ ยนไ ภายใน งาน อไป

10. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 9
งานวน (Looping)
วยใ โปรแกรมของเรา งาน ๆ ภายใ เ อนไข หนดไ สามารถ
งาน อเ อง จนก าจะ การ งใ น ดการ งาน
- For loop เ น ง งาน ๆ แ นอน ประกอบ วยการ หนด
า วแปรคง เ อนไข และ ง ห บ ดการ าในการ เ อนไข
ภายใน
วอ าง

11. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 10
อ บาย
เ มจากบรร ดแรก อนนะค บ
for(let i = 0; i < 10; i++) {
ด ง อ for (_[ 1 ]_ ; _[ 2 ]_ ; _[ 3 ]_)
[ 1 ] initial value อ าเ ม น ง for จะ บเ าเ อนไข
ใน วอ างจะเ น let i = 0 ง น for loop จะ งานเ ม น วแปร i าเ า บ
0
[ 2 ] condition อ งเ อนไข หาก เ อนไข ง ผล พ เ น TRUE จะ
ใ ง อ ใน for loop งาน ใน วอ างจะเ น i < 10 า าใน วแปร i
ง า อยก า 10 จะ งใ งใน for loop งาน
[ 3 ] increase อ การ หนดเ อนไขค ง ดไป ใน วอ างผมจะใ
วแปร i เ ม น 1 กค ง จบเ อนไขการ งาน
ง for loop จะ น ด อเ อ วแปร i าเ า บ 10

12. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 11
- While loop เ น ง งาน ๆ สามารถเป ยนแปลง า น ดไ
าเป ยบเ ยบ บ For loop น For loop จะ การ น ดของเ อนไข
แ นอน วน While loop เราสามารถเป ยนแปลงการ น ดไ
วอ าง
ด ง อ while (_[ 1 ]_) {
[ 1 ] condition อ งเ อนไข หาก เ อนไข ง ผล พ เ น TRUE จะ
ใ ง อ ใน while loop งาน ใน วอ างจะเ น num < 10 า าใน
วแปร num ง า อยก า 10 จะ งใ งใน while loop งาน

13. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 12
เราสามารถจะใ วแปร num ในการ หนด ด น ดของการ งาน เรา
สามารถเ มเ อนไข IF-ELSE เ อใ เ อนไข น ดไ
วอ าง
จากโ ด างบน ผมไ เ มเ อนไข IF-ELSE เ าไป น อ num === 5
อ บาย อ า num าเ า บ 5 ผมจะ เป ยน าใน วแปร num ใ เ น 10
เ อจบการ งานของ ง while loop น

14. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 13
- Foreach loop เ น ง จะจบการ งาน วย วเอง นอ บ า บ
เ ามา โดยใ อ ล ปแบบ Array ในการ งการ งาน
เ น า Array งหมด 10 index ง Foreach จะ งาน 10 ค ง
ห อ งาน ก index จน ง index ด ายใน Array น
วอ าง

15. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 14
- Reduce loop เ น ง จะ งใ งาน ๆ ตาม อ ล ไ บมา โดย
ใ อ ล ปแบบ Array ในการ ง งาน เ น ง วยใ เราสามารถ
เป ยนแปลง าผล พ ไ าย ด
วอ าง
อ บาย
ง reduce จะประกอบ วย function จะ ง น า previous และ
current จ ง ๆ ง currentIndex แ ผมจะไ ขอก าว งนะค บ และจะ การ
หนด าเ ม นใน า ด าย จาก วอ างผม หนดใ เ ม น 0 เราสามารถ
หนด าใน วน เ น าใด ๆ ไ ตาม เรา องการ
ห งจาก น งจะ บ อ ล ปแบบ Array เราไ การ งเ ามาใน
ง previous ค งแรก จะ ง าเ ม น และ current จะเ น า บแรก ง บ
แรกใน Array อ บ 0 (ห อเ ยก า Index 0) จาก วอ าง บ 0 จะ า
เ น 4
ง อมาใน วนของ return ผมไ เ ยนตรรกศาสต ใ า previous
และ current มารวม น จะไ เ น 0 + 4 ผล พ จะ ก งไปเ าไปใน าเ ม น ก
ค ง ในขณะ าเ ม นของเราไ เป ยนเ น 4 แ ว และจะ แบบ จนก าจะ
ครบ ก Index ใน Array

16. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 15
ง น (Function)
ห งจาก ไ เ ยน โครงส างของโปรแกรมใน วนของ วแปรตรรกศาสต
และ ง นฐาน าง ๆ ไปแ ว ใน วนของบท เราจะมา กษาเ ยว บ ง น
ของโปรแกรม
กโปรแกรม จะประกอบไป วย ง นหลาย ๆ ง น มาประกอบ
เ า วย นกลายเ น โปรแกรม
และจง ไ เสมอ า ง น 1 ง น ควรจะ อง งานเ ยงห งอ าง
เ า น เ อ จะไ า ง น ห อการ งาน ตรงและแ นอน สามารถตรวจสอบและ
า ด บกพ อง (Bug) ไ าย
วอ าง ง น ของระบบ าน า
- ง น นวนราคา น า งหมด
- ง น นวน นวน น า
เ อ ง นเห า มารวมเ า วย น จะไ เ นโปรแกรม นวนราคา
น า

17. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 16
โครงส างของ ง น
อน น เรามา ห าตาของ ง น น อนนะค บ ห งจาก ผมจะส าง
โปรแกรม ดเ นของ าน า โดยผมจะส าง ง น ง
- ง น นวนราคา น า งหมด (calGrandTotal)
- ง น นวน นวน น า (calTotalQty)
ง น นวนราคา น า งหมด (calGrandTotal)

18. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 17
ง น นวน นวน น า (calTotalQty)

19. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 18
จาก วอ าง ง น ผมไ แสดงใ เ นไป น อ าง ง นงง นนะค บ
เ ยวผมจะ การอ บายใ าน น
ง น ประกอบ วย ( ภาพประกอบตาม บ)
1. ประกาศการส าง ง น (Function method)
2. หนด อ ง น (Function name)
3. า ไ บ จากการเ ยกใ งาน ง น (Parameter)
4. วนของการ งานภายใน (Scope)
5. า ง น (Return)

20. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 19
การเ ยกใ งาน ง น (Call function)
ห งจาก เราส าง ง น นมาแ ว จะ ง นมาใ งาน น เราจะ
เ ยกกระบวนการ า Call function ห อ เ ยกใ งาน ง น
วอ าง
อ บาย
function inputName จะ การ บ Parameter อ า name ไ ง น ง
น เราจะ อง ง าเ าไปใน ง น วย
การเ ยก ง น วยการ ม อ ง น ตาม วยวงเ บ ดและเ ด จะ
ไ เ น inputName()
ห งจาก น การ ง Parameter ไปใ ง น โดยสามารถส าง วแปร
ให ห อ ม ในวงเ บ อไ หาเ น อความ ใ การใ “...” กค ง จะไ เ น
inputName(“Thinnakrit”)

21. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 20
จากเ อหา งหมด อการเ ยนโปรแกรม น นฐาน เราจะ องจด และ
กใ นาญ อย น สามารถ ง าง ๆ มาใ วม น และ ใ เ ด ง น
หลากหลาย
แนะ ในการเ ยน เ มเ ม
เ อน ๆ สามารถใ เค อง อใน Google Chrome เ อ การ ก
ฒนาการเ ยนโปรแกรมของตนเอง โดยเ ด Google Chrome และค กขวา และ
เ อก Inspect

22. อยากเ ยนโปรแกรม ก ว เ ม 1 | ห า 21
และเ อก Console ใน วนตรง เราสามารถเ ยน ง าง ๆ วยภาษา
Javascript เ อ น ง าง ๆ รวม งการส าง ง นไ
ขอใ กคนส ก บการเ ม นเ ยนโปรแกรมค บ
: ]