Automatically translated.View original post

vscode & JavaScript

# Web Site Writing Basics

# javascript # vscode

Writing JavaScript (JS) for beginners can be done simply without needing to install any of the many programs at first. It can be started in the most basic way, using browsers and HTML files.

1.Initial JavaScript writing method

1.1 Writing in the browser (Console)

It is the simplest and quickest way to experiment with short coding:

1.Open a web browser (such as Chrome, Firefox).

2. Right-click any web page and select "Inspect" or "Developer Tools" (Developer Tools).

3. Go to the "Console" tab.

4. You can type JavaScript commands into it. For example:

❇ Type alert ("Hello World!"); and then press Enter, an alert window will appear.

❇ Type console.log ("This is the text in the console"); and then press Enter. The text will be displayed in the console.

1.2 Writing in HTML files (for websites)

Because JavaScript is primarily designed for use in browsers, combining code with HTML is the most popular way:

1.Create an HTML file: Create a new file in a text editor (such as VS Code, Notepad) and save it as a name, such as index.

2.Add the < script > tag: Insert your JavaScript code within the < script > tag in the HTML file:

HTML

< html >

< head >

< title > My First JS < / title >

< / head >

< body >

< h1 > Try writing JavaScript < / h1 >

< script >

/ / This is JavaScript writing.

/ / Text display in console

console.log ("JavaScript code is working!");

/ / Order to change the content of the h1 tag.

document.querySelector ('h1') .innerText = 'JavaScript has changed text!';

< / script >

< / body >

< / html >

3.Open File: Open index.html file with web browser (double click).

1.3 JavaScript file separation

For more complex projects, JavaScript code should be separated into separate files:

1.Create a JS file: Create a new file and save it as a name, such as app.js.

2. Write code in the app.js file:

JavaScript

/ / app.js

console.log ("Code from the app.js file is working!");

alert ("Hello!");

3.Link in an HTML file: Use the src attribute in the < script > tag to link to the app.js file:

HTML

< html >

< head >

< title > External JS < / title >

< / head >

< body >

< h1 > External file link < / h1 >

< script src = "app.js" > < / script >

< / body >

< / html >

2. Important basics to know

Concept, Brief Description, Code Sample

Variables (Variables) are used to store data. There are main keys: var, let, and const let name = "Alice"; const PI = 3.14;

Data type (Data Types) JavaScript contains data types such as string (text), number (number), boolean (true / false), object (object), array (sequence row) let age = 30; let isStudent = true;

Functions A group of commands that perform specific functions for reuse. Function greet (name) {return "Hello," + name;}

Conditions (Conditions) Decisions to run a program, such as if, other if, other if (age > = 18) {console.log ("Adult");}

Loops (Loops) Repeating the original set of instructions multiple times, such as for, while for (let i = 0; i < 5; i + +) {console.log (i);}

2025/9/27 Edited to

... Read moreสำหรับผู้เริ่มใช้งาน Visual Studio Code (VS Code) รู้ไหมว่ามันมีฟีเจอร์มากมายที่จะช่วยให้การเขียน JavaScript ง่ายและสะดวกขึ้นมาก เช่น การใช้คีย์ลัดสำหรับจัดรูปแบบโค้ด (format document) ที่ช่วยให้โค้ดดูเรียบร้อยและอ่านง่ายขึ้น หรือการติดตั้งส่วนเสริม (Extensions) ที่ช่วยตรวจสอบข้อผิดพลาดโค้ดอัตโนมัติ เช่น ESLint นอกจากนี้ VS Code ยังรองรับการดีบัก (debug) โค้ด JavaScript ที่ช่วยให้คุณตรวจสอบและแก้ไขบั๊กได้รวดเร็วขึ้น นอกจากการเขียนโค้ดในไฟล์ HTML และแยกไฟล์ JS แล้ว การใช้ Git ร่วมกับ VS Code ก็เป็นอีกหนึ่งแนวทางที่ดีในการจัดการโปรเจกต์และแชร์งานกับผู้อื่นได้อย่างราบรื่น นอกจากนี้ยังมีระบบ Terminal ในตัวที่ช่วยให้คุณรันคำสั่ง npm หรือคำสั่งอื่น ๆ ได้ในทันทีโดยไม่ต้องสลับโปรแกรม หากต้องการเพิ่มประสิทธิภาพในการเขียน JavaScript ลองใช้ Snippet ที่เป็นชุดโค้ดสำเร็จรูปหรือปรับแต่งคีย์ลัดให้เหมาะกับตัวเอง ช่วยประหยัดเวลาและเพิ่มความรวดเร็วได้มากจริง ๆ สรุปคือ VS Code ไม่เพียงแต่เป็นเครื่องมือแก้ไขโค้ดเท่านั้นแต่ยังเป็นเครื่องมือที่ช่วยพัฒนาทักษะการเขียนโปรแกรมและเพิ่มประสิทธิภาพในการทำงานของคุณอย่างแท้จริง