home

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

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

การเขียนโค้ดในขณะที่สนุกสนานก็อาจกลายเป็นเรื่องน่าเบื่อได้เช่นกัน

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

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

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

คอนโซล JavaScript

นักพัฒนาพบกับคอนโซล คุณจะใช้เวลาส่วนใหญ่ในคอนโซลระหว่างช่วงที่คุณเป็นนักพัฒนา ดังนั้นคุณจะต้องทำความคุ้นเคย

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

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

หากต้องการแสดงคอนโซล คุณต้องเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ใน Chrome คุณสามารถทำได้โดยใช้ Ctrl + Shift + I บน Windows หรือ Cmd + Alt + I บน Mac ใน Firefox คุณสามารถเปิดเครื่องมือสำหรับนักพัฒนาโดยใช้ Command + Option + K

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

เมื่อคุณทำเช่นนั้น หน้าต่างเช่นนี้จะเปิดขึ้น:

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

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

การเริ่มต้นใช้งานคอนโซล

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

มีสามวิธีหลักที่คุณจะใช้ในคอนโซล:

  • console.log():แสดงข้อความไปยังคอนโซล
  • console.warn():แสดงคำเตือนในคอนโซล
  • console.error():แสดงข้อผิดพลาดในคอนโซล

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

อย่างที่บอก มาเริ่มกันเลย! เพื่อแสดงข้อความไปยังคอนโซล เราสามารถใช้รหัสนี้:

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

ทันทีที่คุณรันคำสั่งนี้ สิ่งต่อไปนี้จะถูกส่งกลับ:

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

คุณยังสามารถแสดงข้อผิดพลาดและคำเตือนไปยังคอนโซลได้ ความแตกต่างระหว่างข้อผิดพลาดและคำเตือนและ log() . แบบดั้งเดิม คำสั่งคือข้อผิดพลาดและคำเตือนปรากฏเป็นสีส้มและสีแดงตามลำดับ:

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

รหัสของเราส่งคืน:

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

การใช้คอนโซลในแอปพลิเคชัน

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

การพัฒนาส่วนหน้า

ขั้นตอนแรกของเราคือการพัฒนาส่วนหน้าของแอปพลิเคชันของเรา สร้างไฟล์ชื่อ “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="http://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>

รหัสนี้แสดงรายการสี่รายการบนหน้าเว็บของเรา:ชื่อ คำอธิบายเกม รูปภาพของถ้วยชา และข้อความแจ้งผู้ใช้ว่าพวกเขาคลิกถ้วยชากี่ครั้ง

มาเพิ่มสไตล์ให้กับโค้ดของเราเพื่อทำให้ดูน่าสนใจ สร้างไฟล์ชื่อ “styles.css” แล้ววางในรหัสนี้:

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

span {
    color: yellow;
}

img {
    border-radius: 50px;
}

สไตล์เหล่านี้สร้างกล่องสำหรับเกมตัวคลิกชา ตั้งค่าสีของตัวนับการคลิกเป็นสีเหลือง และสร้างมุมโค้งมนสำหรับรูปภาพของเรา นี่คือลักษณะที่หน้าเว็บของเราตอนนี้:

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

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

การเพิ่มฟังก์ชันการทำงานโดยใช้ JavaScript

เมื่อผู้ใช้คลิกที่ถ้วยชา ตัวนับควรเพิ่มขึ้นทีละหนึ่ง ก่อนที่เราจะสามารถเพิ่มตัวนับได้ เราต้องเลือกองค์ประกอบ DOM ที่เราจะใช้งาน:รูปภาพและตัวนับ องค์ประกอบ DOM หรือ Document Object Model เป็นแท็กบนหน้าเว็บของเรา 

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

นอกจากนี้เรายังจะตั้งค่าตัวแปรที่ติดตามจำนวนครั้งที่มีการคลิกถ้วยชา:

var clicks = 0;

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

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

บรรทัดแรกจะพิมพ์ข้อความคอนโซล "ปุ่มถูกคลิก" ไปยังคอนโซล ต่อไป เราเพิ่ม 1 ลงในตัวนับ "การคลิก" ของเรา จากนั้นเราจะเปลี่ยนเนื้อหาของข้อความในแท็ก เพื่อแสดงจำนวนคลิกที่อัปเดตโดยใช้วิธี innerText

มาดูหน้าเว็บของเราและคลิกที่รูปถ้วยชา:

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

อย่างที่เห็น เมื่อเราคลิกถ้วยชา ตัวนับของเราจะเพิ่มขึ้นทีละหนึ่ง นอกจากนี้ ข้อความที่เราระบุในรหัสของเราจะถูกพิมพ์ไปยังคอนโซล ซึ่งช่วยให้เราเข้าใจเมื่อผู้ใช้คลิกที่ถ้วยชา

ขณะนี้เป็นการใช้งาน console.log() . ขั้นพื้นฐาน ในแอปพลิเคชันขนาดใหญ่ คุณอาจเห็นว่ามีการใช้การบันทึกอย่างกว้างขวาง โดยส่วนใหญ่ บันทึกจะเก็บไว้ในแอปพลิเคชันเวอร์ชันพัฒนาเท่านั้น เนื่องจากผู้ใช้ไม่จำเป็นต้องดูว่าเกิดอะไรขึ้นเบื้องหลัง จากที่กล่าวมา การบันทึกยังคงเป็นเครื่องมือที่ทรงคุณค่าอย่างเหลือเชื่อสำหรับนักพัฒนา

บทสรุป

คอนโซลเป็นเครื่องมือที่คุณสามารถใช้เพื่อเรียนรู้วิธีการทำงานของโค้ด คุณสามารถใช้เพื่อแสดงข้อความการดีบักขณะที่โค้ดของคุณทำงาน หรือเพื่อติดตามคำเตือนและข้อผิดพลาด

คุณควรใช้คำสั่งการบันทึกเฉพาะในกรณีที่คุณกำลังพัฒนาแอปพลิเคชันของคุณ หรือหากคุณต้องการสร้างข้อความแสดงข้อผิดพลาดที่กำหนดเองสำหรับโค้ดของคุณ คุณสามารถใช้สำหรับการดีบักได้ คุณไม่ควรเก็บบันทึกในเว็บแอปพลิเคชันที่พร้อมใช้งานออนไลน์มากเกินไป