fundamental

Javascript Zero to Hero บทนำ EP1

javascript มีอายุของภาษาก็ 25 ปีแล้ว ถือว่าเป็นภาษาที่ได้รับความนิยมมายาวนาน ด้วยความสามารถที่เขียนไครเอนซ์ไซน์ (client side) และเซอร์เวอร์ไซต์ (server side) ทำให้ตัวภาษารับความนิยม จึงทำให้บริษัทเจ้าใหญ่ๆ ตั้งทีมงานเพื่อมาพัฒนา framework เพื่อเป็นกรอบการทำงานของการพัฒนาแอพพลิเคชั่น (application) ที่เป็นมาตรฐานที่เป็น standard แบบเดียวกัน เช่น React (facebook) , Angular (google) ,Vue (Evan U) เป็นต้น สิ่งที่มีเหมือนกันของแต่ละ framework คือ fundamental ของตัวภาษา javascript เอง ชุดบทความนี้จะพาทำความรู้จักภาษา javascript ตั้งแต่เริ่ม zero จนกระทั่งถึง hero คือสามารถนำไปใช้งานและพัฒนาแอพพลิเคชั่นได้อย่างดีแน่นอน

ทำความรู้จักเครื่องมือ สิ่งที่ช่วยให้การเริ่มเขียน Javascript น่าสนุกมากยิ่งขึ้น

เครื่องมือที่เป็นเหมือนสิ่งที่แปล หรือแปลงโค๊ดของภาษา javascript มากกว่าให้สามารถทำงานได้มีหลัก ๆ อยู้ด้วยกัน 2 การคอมไพล์ (compile) ผ่านเครื่องมือเหล่านี้

  1. NodeJS Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
  2. Browser ต่าง ๆ ที่จะทำหน้าที่มี javascript runtime engine มาให้อยู่แล้ว เช่น Firefox , Safari ,Chrome แนะนำใช้งาน Google Chrome เพราะจะอัพเกรด version Javascript Engine ก่อน browser อื่น ๆ

console.log คืออะไร

เริ่มต้นก่อนที่จะพาไปรู้จักส่วนอื่น ๆ ในขั้นถัดๆ ไป ที่เรียกว่าขาดไม่ได้เลยคือการที่จะ debug หรือการที่จะแสดงผลลัพธ์ของตัวแปรที่เก็บอยู่ในโค๊ด การเรียกใช้งานคำสั่ง console.log(‘message or variable’)

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 'Zero', 'to', 'Hero')

การคอมเม้นท์ (comment)

การคอมเม้นท์ (comment code) คือการแทรกข้อความ หรืออื่น ๆ ที่ต้องการใส่ลงไปในไฟล์ของ โค๊ด javascript ที่ไม่ต้องการที่จะให้ javascript compile โค๊ดในส่งนี้เข้าไปในการทำงานของโปรแกรม จะไม่มีผลต่อการทำงานของโปรแกรม เพียงแต่จะมี text ข้อความแทรกอยู่ในไฟล์เท่านั้นเอง

ตัวอย่างการคอมเม้นท์ 1 บรรทัด
// This is the first comment
// This is the second comment
// I am a single line comment

ตัวอย่างการคอมเม้นท์ หลายบรรทัด
/_ This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
_/

การใช้เครื่องหมายดำเนินการทางคณิตศาสตร์

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

แนวทางการเขียน Javascript Code ต่าง ๆ บนหน้าเว็บ

แนวทางการเขียนโค๊ด javascript กับหน้าเว็บไซต์ในรูปแบบต่าง ๆ หลัก ๆ มีด้วยกัน 4 แนวทางคือ

  • inline script การแทรก javascript ใน tag html เป็นการเขียนที่ง่ายที่สุด ตัวอย่าง
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to Javascript Zero to Hero!')">Click Me</button>
  </body>
</html>
  • internal script การเขียนแทรก javascript code ในไฟล์ html โดยคำสั่งต่าง ๆ จะถูกเขียนอยู่ใน tag <script> </script>
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Internal Script</title>
    <script>
      console.log('Welcome to Javascript Zero to Hero')
    </script>
  </head>
  <body></body>
</html>
  • external script การเขียนโค๊ด javascript แยกเป็นอีก 1 ไฟล์ (นามสกุล .js) จากนั้นเรียกใช้งานเข้ามาในไฟล์ html ด้วยคำสั่ง <script src=”?”/>
    index.js
console.log('Welcome to Javascript Zero to Hero')

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:External script</title>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

Javascript Data Type ต่าง ๆ

ในภาษา javascript จะเรียกเป็นรูปแบบ Dynamic Type ความหมายคือเป็นการกำหนด type ที่สามารถเปลี่ยนได้ตลอดเวลา โดยมีการกำนด type อยู่ด้วยกันหลัก ๆ ตามนี้ String, Number, Boolean, undefined, Null, and Symbol.

String 

'Poolsawat'
'Apin'
'Javascript Zero to Hero'

Number

Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Boolean

True/true , False/false

Undefined

let name;
console.log(name) // undefined

Null

let emptyValue = null

การตรวจสอบประเภท หรือชนิดของตัวแปร

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

console.log(typeof 'Poolsawat') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

การประกาศตัวแปร และการกำหนดขอบเขตของการเข้าถึง

ภาษา javascript จะมีการกำหนดประเภทตัวแปร โดยมีอยู่ด้วยกัน 3 รูปแบบ คือ

Var การกำหนดประเภทตัวแปรที่เป็นระดับ global ที่จาก function หรือ condition ไหน ๆ ก็สามารถเข้าถึงได้สามารถ assign value ได้

var name = 'Poolsawat' , lname = 'Apin'
var age = 99
var isMale = true

Const การกำหนดประเภทตัวแปรที่จะคล้ายกับ Var แต่จะไม่สามารถ assign value ใหม่ให้ได้ แต่จะมี scope ที่แคบกว่า var

const name = 'Poolsawat' , lname = 'Apin'
const age = 99
const isMale = true

Let การกำหนดประเภทข้อมูลในระดับที่แคบมาก ๆ สามารถ assign value ใหม่ได้ สามารถกำหนดชื่อซ้ำกันได้ แต่อยู่คนละ statement code ได้

let name = 'Poolsawat' , lname = 'Apin'
let age = 99
let isMale = true
if (age == 99 ){
    isMale = false
}

สรุปท้ายบทความ

จากบทความนี้จะเป็นการปูพื้นฐานก่อนเริ่มการเขียน javascript ในบทถัด ๆ ไปสิ่งเหล่านี้จำเป็นต้องจดจำและฝึกฝนเขียนให้จำได้ เพราะในบทความต่อ ๆ ไปจะเจอคำสั่งหรือเรื่องจากบทความนี้เยอะมาก สำหรับการทดสอบเรียกคำสั่งแบบง่ายที่สุด เพียงแต่เปิด browser chrome กด F12 เลือกไปที่ tab console จากนั้นพิมพ์ console.log(‘message ‘); กด enter ผลลัพธ์ก็จะแสดงทันที บทความถัดไปจะมาอธิบายเกี่ยวกับเรื่องอะไรคอยติดตามกันด้วยนะครับ

12/22/2020 by Javascript 0

เรื่องล่าสุด

เรื่องราวข่าวสารล่าสุด