home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

JavaScript Console: คู่มือสำหรับผู้เริ่มต้น

การเขียนโค้ด แม้จะสนุก แต่ก็อาจน่าเบื่อได้

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

นี่คือที่มาของ JavaScript console console ช่วยติดตามว่ากำลังเกิดอะไรขึ้นในโค้ด ทำให้ง่ายต่อการหาว่าผิดที่ไหน

ในคู่มือนี้ เราจะพูดถึงวิธีใช้ JavaScript console พร้อมตัวอย่างแอปพลิเคชันใช้ console เพื่อให้คุณ master JavaScript console ได้เร็ว

JavaScript Console

Developer พบกับ console คุณจะใช้เวลามากใน console ระหว่างเป็น developer จึงคุ้นเคยมัน

Console คือที่แสดง messages ขณะแอปพลิเคชันรัน และจัดการเนื้อหาหน้าเว็บได้

คุณสั่งโค้ด log messages ไปที่ console จะปรากฏตอนที่คุณสั่ง คุณยังใช้ console แก้ไข variables, values และตรวจสอบค่าที่เก็บใน variable ได้

เพื่อแสดง console ต้องเปิด developer tools ใน Chrome กด Ctrl + Shift + I บน Windows หรือ Cmd + Alt + I บน Mac ใน Firefox กด Command + Option + K

ตอนทำแล้ว จะเปิดหน้าต่างแบบนี้:

JavaScript Console: คู่มือสำหรับผู้เริ่มต้น

ทุก modern browser มี developer tools suite และมีฟีเจอร์ร่วมมากมาย ในบทช่วยสอนนี้ เราจะเน้นแค่ console

เริ่มต้นกับ Console

เริ่มด้วยการแสดงข้อความไปที่ console ทำได้โดยไม่ต้องมี webpage เปิด แค่เปิด browser console เขียน JavaScript statements ที่ต้องการ execute

มีสาม main methods ที่ใช้ใน console:

  • console.log(): แสดงข้อความไปที่ console
  • console.warn(): แสดง warning ใน console
  • console.error(): แสดง error ใน console

ก่อนต่อไป ไม่ควร paste อะไรเข้า console หากไม่รู้ว่าโค้ดทำอะไร หลายไซต์เตือนเพราะมี scams ใช้ console เข้าถึงข้อมูล sensitive ของ user

มาเริ่มกัน! แสดงข้อความไปที่ console:

console.log("Career Karma is logging stuff to the console!");

ทันทีที่ execute คำสั่งนี้ จะได้:

JavaScript Console: คู่มือสำหรับผู้เริ่มต้น

คุณยังแสดง errors และ warnings ไปที่ console ได้ ความต่างระหว่าง errors/warnings กับ log() ปกติคือ errors และ warnings แสดงสีส้มและแดงตามลำดับ:

console.warn("Hey, something is going on!"); console.error("Hey, your code has stopped working!");

โค้ดคืนค่า:

JavaScript Console: คู่มือสำหรับผู้เริ่มต้น

ใช้ Console ใน Application

เราจะสร้างแอปแบบ cookie clicker เพื่อ示範 console object ทำงาน แอปจะแสดง counter นับจำนวนคลิกที่รูปถ้วยชา เราจะ log ทุกครั้งที่คลิกไปที่ console เพื่อติดตาม

พัฒนา Front-End

ขั้นแรก พัฒนา front-end สร้าง "index.html" วางโค้ดนี้:

<!DOCTYPE html> <html> <head> <title>Tea Clicker</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="container"> <h2>Tea Clicker</h2> <p>Click the tea cup as many times as you can!</p> <img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" /> <p>You have clicked the tea cup <span>0</span> times.</p> </div> <script src="./scripts.js"></script> </body> </html>

โค้ดแสดงสี่อย่าง: title, คำอธิบายเกม, รูปถ้วยชา, และข้อความบอกจำนวนคลิก

เพิ่ม styles ให้สวย สร้าง "styles.css" วางโค้ดนี้:

.container { background-color: lightblue; margin: auto; width: 50%; padding: 40px; text-align: center; } span { color: yellow; } img { border-radius: 50px; }

Styles สร้างกล่องสำหรับเกม ตั้งสี counter เป็นสีเหลือง และมุมโค้งของรูป หน้าเว็บตอนนี้:

JavaScript Console: คู่มือสำหรับผู้เริ่มต้น

คลิกถ้วยชา ไม่เกิดอะไร เพราะยังไม่เพิ่ม JavaScript code มาเขียน JavaScript ให้แอปพลิเคชัน

เพิ่มฟังก์ชันด้วย JavaScript

เวลา user คลิกถ้วยชา counter ควรเพิ่ม 1 ก่อน increment counter ต้อง select DOM elements ที่จะทำงาน: รูปภาพและ counter DOM (Document Object Model) elements คือ tags บน webpage

var clickCounter = document.querySelector("span"); var teaCup = document.querySelector("img");

ตั้งตัวแปรติดตามจำนวนคลิก:

var clicks = 0;

ขั้นตอนต่อไป สร้างฟังก์ชัน log เมื่อคลิกปุ่ม และ increment counter 1:

function createClick() { console.log("The button has been clicked") clicks += 1; clickCounter.innerText = clicks; }

บรรทัดแรกพิมพ์ console message "The button has been clicked" ไปที่ console ต่อมา เพิ่ม 1 ให้ "clicks" counter แล้วเปลี่ยนเนื้อหา text ใน <span> tag ให้สะท้อน click count ที่อัปเดตด้วย innerText method

ลองดูเว็บและคลิกรูปถ้วยชา:

JavaScript Console: คู่มือสำหรับผู้เริ่มต้น

เห็นว่าเวลาคลิกถ้วยชา counter เพิ่ม 1 และข้อความที่ระบุในโค้ดพิมพ์ไปที่ console ช่วยเข้าใจว่าผู้ใช้คลิกเมื่อไหร่

แม้เป็น basic implementation ของ console.log() ในแอปพลิเคชันใหญ่ logging ใช้กันกว้างขวาง ส่วนใหญ่ logs เก็บไว้ใน development versions เท่านั้น เพราะ user ไม่ต้องรู้ว่าดีบรรทัดหลัง scene logging ยังคงเป็นเครื่องมือมีค่ามากสำหรับ developers

สรุป

Console เป็นเครื่องมือเรียนรู้โค้ดทำงานอย่างไร ใช้แสดง debugging messages ขณะโค้ดรัน หรือติดตาม warnings และ errors

ควรใช้ logging statements เฉพาะตอนพัฒนาแอปพลิเคชัน หรือสร้าง custom error messages สำหรับ debugging ไม่ควรเก็บ logs มากใน web application ที่ออนไลน์อยู่