JavaScript
JavaScript (JS) is a programming language that allows you to implement complex features on
web pages. It’s commonly used for:
● Adding interactivity (e.g., dynamic forms, buttons)
● Manipulating the Document Object Model (DOM)
● Communicating with APIs
● Validating user input
● Creating dynamic and responsive web apps
JavaScript is an essential part of the front-end web development stack along with HTML
(structure) and CSS (presentation).
How JavaScript Fits with HTML & CSS
● HTML is responsible for structuring the content on the web page (like headings,
paragraphs, images, and links).
● CSS is used to style this content, making the web page visually appealing by defining
colors, layouts, and fonts.
● JavaScript brings interactivity and dynamic behavior to the page. It can manipulate the
HTML structure (add/remove elements), change styles dynamically, and handle user
interactions (like clicks and key presses).
For example:
● HTML defines a button.
● CSS styles the button (size, color).
● JavaScript makes the button interactive, like showing an alert message when clicked.
Ways to Add JavaScript to a Webpage
There are three ways to add JavaScript to a webpage: Inline, Internal, and External.
1. Inline JavaScript
, Inline JavaScript is written directly inside an HTML tag using the onclick, onmouseover, or
other event attributes. It’s convenient for small scripts but not recommended for larger projects
because it can clutter the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & JS</title>
</head>
<body>
<div>
<button onclick="alert('Hello, this is inline JavaScript!')">Click
Me</button>
</div>
</body>
</html>
Here, the JavaScript code alert('Hello, this is inline JavaScript!') is directly added inside the
HTML tag using the onclick event.
2. Internal JavaScript
Internal JavaScript is placed inside the <script> tag within the <head> or <body> section of the
HTML file. This method is better than inline JavaScript because it separates the behavior from
the HTML structure.
<!DOCTYPE html>
JavaScript (JS) is a programming language that allows you to implement complex features on
web pages. It’s commonly used for:
● Adding interactivity (e.g., dynamic forms, buttons)
● Manipulating the Document Object Model (DOM)
● Communicating with APIs
● Validating user input
● Creating dynamic and responsive web apps
JavaScript is an essential part of the front-end web development stack along with HTML
(structure) and CSS (presentation).
How JavaScript Fits with HTML & CSS
● HTML is responsible for structuring the content on the web page (like headings,
paragraphs, images, and links).
● CSS is used to style this content, making the web page visually appealing by defining
colors, layouts, and fonts.
● JavaScript brings interactivity and dynamic behavior to the page. It can manipulate the
HTML structure (add/remove elements), change styles dynamically, and handle user
interactions (like clicks and key presses).
For example:
● HTML defines a button.
● CSS styles the button (size, color).
● JavaScript makes the button interactive, like showing an alert message when clicked.
Ways to Add JavaScript to a Webpage
There are three ways to add JavaScript to a webpage: Inline, Internal, and External.
1. Inline JavaScript
, Inline JavaScript is written directly inside an HTML tag using the onclick, onmouseover, or
other event attributes. It’s convenient for small scripts but not recommended for larger projects
because it can clutter the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & JS</title>
</head>
<body>
<div>
<button onclick="alert('Hello, this is inline JavaScript!')">Click
Me</button>
</div>
</body>
</html>
Here, the JavaScript code alert('Hello, this is inline JavaScript!') is directly added inside the
HTML tag using the onclick event.
2. Internal JavaScript
Internal JavaScript is placed inside the <script> tag within the <head> or <body> section of the
HTML file. This method is better than inline JavaScript because it separates the behavior from
the HTML structure.
<!DOCTYPE html>
