Chapter 15: Introduction to JavaScript – Adding Interactivity
JavaScript is a powerful programming language that allows you to create dynamic and interactive web content. It is an essential part of modern web development, enabling you to manipulate the DOM (Document Object Model), handle events, and communicate with servers. In this chapter, we’ll cover the basics of JavaScript, including its syntax, core concepts, and how to integrate it into your web projects.
---
1. What is JavaScript?
JavaScript is a high-level, interpreted programming language primarily used for client-side web development. It can enhance HTML and CSS by allowing you to add interactivity, control multimedia, create animations, and much more.
JavaScript can run in any modern web browser, making it a versatile choice for web applications. It can also be used on the server side with environments like Node.js.
2. Including JavaScript in HTML
There are several ways to include JavaScript in your HTML documents:
a. Inline JavaScript
You can write JavaScript directly within an HTML element using the onclick attribute (or other event attributes).
<button onclick="alert('Hello, World!')">Click me!</button>
b. Internal JavaScript
You can place JavaScript inside a <script> tag within the <head> or <body> section of your HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<script>
function greet() {
alert('Welcome to my website!');
}
</script>
</head>
<body>
<button onclick="greet()">Click me!</button>
</body>
</html>
c. External JavaScript
For better organization and reusability, you can write JavaScript in a separate file and link to it using the <script> tag with the src attribute.
script.js:
function greet() {
alert('Welcome to my website!');
}
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<script src="script.js" defer></script>
</head>
<body>
<button onclick="greet()">Click me!</button>
</body>
</html>
Using the defer attribute ensures that the script loads after the HTML document has been parsed.
3. Basic Syntax and Data Types
a. Variables
Variables are used to store data. You can declare variables using var, let, or const.
let name = 'John'; // String
const age = 30; // Number
var isStudent = true; // Boolean
b. Data Types
JavaScript has several data types, including:
Primitive Types: String, Number, Boolean, Null, Undefined, Symbol
Reference Types: Objects, Arrays, Functions
c. Operators
JavaScript supports various operators for arithmetic, comparison, and logical operations:
Arithmetic: +, -, *, /, %
Comparison: ==, ===, !=, !==, >, <, >=, <=
Logical: &&, ||, !
4. Control Structures
Control structures allow you to execute code conditionally or repeatedly.
a. Conditional Statements
You can use if, else if, and else to execute code based on conditions.
let score = 85;
if (score >= 90) {
console.log('Grade: A');
} else if (score >= 80) {
console.log('Grade: B');
} else {
console.log('Grade: C');
}
b. Loops
Loops enable you to execute code multiple times.
For Loop:
for (let i = 0; i < 5; i++) {
console.log(i);
}
While Loop:
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
5. Functions
Functions are reusable blocks of code that perform specific tasks. You can define a function using the function keyword.
a. Function Declaration
function add(a, b) {
return a + b;
}
b. Function Expression
const multiply = function(a, b) {
return a * b;
};
c. Arrow Functions
Arrow functions provide a concise syntax for writing functions.
const divide = (a, b) => a / b;
6. Working with the DOM
JavaScript can interact with HTML elements through the DOM. You can use methods to select, manipulate, and modify elements.
a. Selecting Elements
You can select elements using document.getElementById, document.querySelector, or document.querySelectorAll.
const heading = document.getElementById('myHeading');
const paragraphs = document.querySelectorAll('p');
b. Manipulating Elements
You can change the content, style, or attributes of an element.
heading.textContent = 'New Heading';
heading.style.color = 'blue';
c. Event Handling
JavaScript allows you to respond to user actions through events.
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
7. Conclusion
In this chapter, you learned the basics of JavaScript, including how to include it in HTML, its syntax, control structures, functions, and how to interact with the DOM. JavaScript is essential for creating interactive web pages, and understanding these fundamentals will allow you to enhance your w
eb applications. In the next chapter, we’ll explore more advanced JavaScript concepts, including object-oriented programming and asynchronous programming with Promises and async/await.
0 Comments