Basic Syntax of JavaScript
JavaScript
syntax refers to the rules for how programs should be written in the language.
Here are some common elements of JavaScript:
- Variables
Variables store data values. In modern JavaScript, you can define variables using: - let: Allows the variable to be
reassigned.
- const: The value of the variable
cannot be reassigned.
- var: The older way to declare
variables (less preferred).
let name = 'John'; // Can be reassigned
const age = 25; // Constant, can't change
var city = 'New York'; // Old syntax
- Comments
Comments help explain the code. - Single-line comment: //
- Multi-line comment: /* */
// This is a single-line comment
/* This is a
multi-line
comment */
- Functions
Functions are reusable blocks of code.
function greet() {
console.log('Hello,
World!');
}
greet(); // Calls the function
- Conditional Statements
These control the flow based on conditions.
if (age > 18) {
console.log('Adult');
} else {
console.log('Not
an adult');
}
- Loops
Loops help to repeat actions multiple times.
for (let i = 0; i < 5; i++) {
console.log(i);
// Outputs 0 to 4
}
- Arrays
Arrays store multiple values in a single variable.
let colors = ['red', 'green', 'blue'];
console.log(colors[0]); // Outputs 'red'
- Objects
Objects are collections of key-value pairs.
let person = {
name: 'John',
age: 25
};
console.log(person.name); // Outputs 'John'
Writing and Embedding JavaScript in HTML
There are
two common ways to add JavaScript to an HTML file:
1. Internal JavaScript (In the HTML file using the <script> tag)
You can
place JavaScript code directly inside an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>JavaScript
Example</title>
</head>
<body>
<h1>Welcome
to My Website</h1>
<p id="greeting"></p>
<!--
Embedding JavaScript internally -->
<script>
document.getElementById('greeting').textContent
= 'Hello, World!';
</script>
</body>
</html>
2. External JavaScript (In a separate .js file)
You can
link an external JavaScript file to your HTML document.
- HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>JavaScript
Example</title>
</head>
<body>
<h1>Welcome
to My Website</h1>
<p id="greeting"></p>
<!--
Linking to external JavaScript file -->
<script
src="script.js"></script>
</body>
</html>
- JavaScript file (script.js):
document.getElementById('greeting').textContent = 'Hello
from an external file!';
Best Practices for Embedding JavaScript
- Place your <script> tag at the end of the <body> tag, just before </body>. This ensures that the HTML
is fully loaded before the script runs.
<body>
<!--
content here -->
<script
src="script.js"></script>
</body>
- Use the async or defer attribute to load scripts
efficiently if they are placed in the <head> section.
- Async: Loads the script
asynchronously.
- Defer: Defers loading the script
until the HTML has been parsed.
<script src="script.js" async></script>
<script src="script.js" defer></script>
0 Comments