DEV Community: manalabpsu

พื้นฐาน JavaScript เบื้องต้น

manalabpsu — Mon, 21 Sep 2020 13:49:52 +0000

๋JavaScript เป็นภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า “สคริปต์” (script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ซึ่งก่อนที่จะเริ่มเรียนเรื่อง JavaScrip นั้น จำเป็นต้องมีความรู้พื้นฐานเรื่อง HTML และ CSS เสียก่อน

สิ่งที่ควรรู้ใน JavaScript-101

ตัวแปรใน JavaScript
รู้จักกับ function ใน JavaScript
Array ชุดของข้อมูล
Loop ใช้ทำซ้ำตามเงื่อนไขที่กำหนด

Javascript : JavaScript Tutorial

1ตัวแปรใน JavaScript

ใน JavaScript จะมีการประกาศตัวแปรอยู่ 4 วิธีคือใช้ var, let, const หรือจะไม่ใช้อะไรเลยก็ทำได้ครับ

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

var test = 123;
if (true) {
   var test= 456;
}
console.log(test); // 456

let คือ การประกาศตัวแปรสำหรับใช้เฉพาะใน scope นั้นหรือเฉพาะใน block นั้นๆ

let test = 123;
if (true) {
   let test= 456;
}
console.log(test); // 123

const คือ การประกาศตัวแปรแบบค่าคงที่ หรือพูดง่ายๆคือตัวแปรแบบ Read Only

onst PI = 3.14
PI = 1 // "PI" is read-only เปลี่ยนค่าไม่ได้อีกแล้วนะ
const obj = { a: 1 }
const obj = { a: 2} // แต่การเปลี่ยนค่าภายใน object ไม่ได้ทำให้ memory  
address เปลี่ยนไป obj.a = 2 
console.log(obj) // { a: 2 }

ไม่ระบุ คือ การประกาศแบบ global การประกาศตัวแปรแบบ global คือการประกาศแบบใดก็ได้แต่เอาไว้ใน scope นอกสุด Shell (Mac, Linux):

2.รู้จักกับ function ใน JavaScript

สำหรับ function ใน JavaScript

มันสามารถเก็บลงตัวแปรได้
สามารถส่ง function เป็น argument เข้าไปใน function อื่นๆได้
สามารถ return ค่าออกมาเป็น function ก็ทำได้

ฟังก์ชั่น หรือชุดคำสั่งที่รวม Statement การทำงานเอาไว้ สามารถเรียกชื่อมาใช้งานตามที่เราต้องการใช้ได้

function ชื่อฟังก์ชั่น( ตัวแปรพารามิเตอร์ถ้ามี ){
Statement ที่ต้องการให้ทำงาน เมื่อมีการเรียก function
return <- ถ้าต้องการส่งค่าบางอย่างกลับไปนอกฟังก์ชั่น เมื่อการทำงานมาถึงจุดนี้
}

ตัวอย่างการเรียกใช้ฟังก์ชั่น เมื่อสร้างไว้เบื้องต้น

function hello() {
}
hello(); // เรียกใช้งาน

4.Array ชุดของข้อมูล

เป็นตัวแปรพิเศษซึ่งสามารถเก็บมากกว่าหนึ่งค่าในแต่ละครั้งหากต้องการมีรายการสินค้า (ตัวอย่างเช่นชื่อรถ) การจัดเก็บรถยนต์ในตัวแปรเดี่ยวอาจมีลักษณะดังนี้:

var cars = ["Saab", "Volvo", "BMW"];

ในการเข้าถึงของอาร์เรย์ค่าเริ่มต้นของ Index จะมีค่าเท่ากับ 0 เสมอ

5.Loop ใช้ทำซ้ำตามเงื่อนไขที่กำหนด

Loop for

for ( ตัวแปรเริ่มต้น ; กรณีเทียบ (Condition) ; เพิ่มค่าตัวแปร ) {
Statement ที่ต้องการให้ทำงาน ถ้ากรณีเทียบยังเป็นจริงอยู่
}

ตัวอย่างการทำงาน Loop for

for (var i = 1; i < 5 ; i++ ){
console.log(i);
}
/*
ผลลัพธ์เราจะได้
1 2 3 4
เพราะรอบสุดท้าย i มีค่าเป็น 5 ซึ่งจะทำให้ส่วนเทียบเป็นเท็จ เป็นการหยุด loop
*/

10 extension ยอดนิยมสำหรับผู้ ใช้ vscode ประจำปี 2019

manalabpsu — Sat, 18 Jul 2020 06:14:31 +0000

วิธีการติดตั้ง Extension บน VSCode

ให้กดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension
ในช่องค้นหาด้านบน ให้พิมพ์ชื่อ Extension ที่ต้องการ
คลิกที่ปุ่ม Install เมื่อทำการติดตั้งเสร็จเรียบร้อยก็ให้คลิกที่ปุ่ม Reload

1.VS Color Picker, Color Highlight

ใช้เลือกสีในการไฮไลท์โค้ด มีสองโหมดให้เลือกจะเลือกสีเอง หรือ ไปดูดมาจากที่อื่นๆ ข้างนอกโปรแกรมก็ดูดได้

2.Open In Default Browser

เป็นวิธีการทำให้ VS Code สามารถรัน HTML ผ่าน browser ได้ โดยกดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension ให้พิมพ์คำว่า open in browser

3.Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Bootstrap ช่วยในเรื่องการทำเว็บให้ responsive (รองรับทุกขนาดหน้าจอของผู้ใช้) แต่จริงๆ Bootstrap ยังทำให้ชีวิตเราง่ายขึ้นในหลายๆ ด้านมาก ไม่ว่าจะเป็นการดีไซน์เว็บให้สวยงามทันสมัยโดยที่เราเขียนโค้ดนิดเดียว หรือการจัด layout (แบบ) หน้าเว็บเราง่ายๆ โดยไม่ต้องเขียนโค้ด CSS เยอะ

4.GitHub

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

5.Auto Close Tag

เขียนแค่ tag เปิดก็พอ ไม่ต้องเขียน tag ปิด ลง Auto Close Tag ไว้ให้ editor ทำการปิด tag ให้เรา จะช่วยลดเวลาในการเขียนโค้ด

6.Auto Rename Tag

Auto Rename Tag เป็น Extension ที่ช่วยให้ผมสามารถแก้ไขชื่อ Tag แล้วตัวปิด Tag จะเปลี่ยนไปตามชื่อ Tag ที่แก้ไขด้วย ช่วยเพิ่มความสะดวกในการเขียนโค้ด

7.Live server

Live Server จะเป็นหน้าจอที่ 2 ช่วยแสดงผลลัพธ์ของโปรแกรมใน Code Editor แบบสดๆ ไม่ต้องนั่งสลับจอ หรือ Refresh ให้เสียเวลา เท่านี้การเขียนโค้ดก็จะง่าย และเร็วขึ้นอีกหลายเท่า

8.Quokka.js

Quokka จะช่วยในการแก้ไขจุดบกพร่อง และทดสอบโค้ด Javascript ให้โดยอัตโนมัติ พร้อมทั้งแสดงผลลัพธ์ให้ดู ทำให้ไม่ต้องเสียเวลาไปดีบั๊กภายหลัง

9.vscode-icons

‘VS Code Icons’ จะมาช่วยแยกประเภทของไฟล์ต่าง ๆ ในโปรเจคด้วย Icon ที่เป็นสัญลักษณ์ ที่ทำให้ง่ายสำหรับการค้นหาจึงช่วยประหยัดเวลา

10.Import Cost

extension ที่จะคอยแสดงขนาดไฟล์ของ package ที่เรา import เข้ามา โดยจะแสดงให้เห็นทันทีว่า package ตัวไหนมีขนาดไฟล์เท่าไหร่

อะไรคือ Deno?

manalabpsu — Wed, 15 Jul 2020 14:43:16 +0000

Deno เป็น Runtime สำหรับ JavaScript และ TypeScript ที่ใช้ V8 และสร้างขึ้นบน Rust เพื่อลบข้อผิดพลาดหรือปัญหาต่างๆ ที่ทำไว้ตอนที่สร้าง node.js ขึ้น ซึ่งมีผู้สร้างเดียวกันกับ node.js คือ Ryan Dahl

ทำไมต้อง Deno?

-มีความปลอดภัย Script ต่างๆจะไม่สามารถเข้าถึงไฟล์ในเครื่องได้โดยไม่ได้รับอนุญาตก่อน
-สนับสนุน TypeScript ว่ากันว่า TypeScript นั้นใช้งานได้ดีกว่า JavaScript ทำให้เป็นที่นิยมมาก เพียงแต่ยังใหม่อยู่เท่านั้น
-มี build-in utilities ให้ใช้ เช่น dependency inspector (deno info) และ code formatter (deno fmt).
-มีชุดที่ใช้ตรวจสอบมาตรฐานของ Module ที่รับประกันว่าจะทำงานกับ
Deno: deno.land/std

การติดตั้ง

Shell (Mac, Linux):

curl -fsSL https://deno.land/x/install/install.sh | sh

PowerShell (Windows):

iwr https://deno.land/x/install/install.ps1 -useb | iex

สามารถศึกษาวิธีติดตั้งเพิ่มเติมได้ที่ https://deno.land/

วิธีใช้งาน

เริ่มต้นด้วยวิธีอย่างง่าย

deno run https://deno.land/std/examples/welcome.ts

หรือวิธีที่ซับซ้อนหน่อย

import { serve } from "https://deno.land/std@0.61.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

เนื่องจากไม่มีสิ่งใดสมบูรณ์แบบ ทั้ง deno และ node.js ต่างก็มีข้อดีข้อเสียต่างกัน ที่เราทำได้ก็แค่เฝ้าดูไดโนเสารตวนตอไปวาจะวงแซงรนพอยาง node ไดหรอไม