JAVASCRIPT TUTORIAL
JAVASCRIPT TUTORIAL
JavaScript (JS) is a high-level programming language and core technology of the World Wide Web.
JavaScript
➔ JavaScript is used to create dynamic content for websites.
➔ It can update and modify both HTML and CSS.
➔ JavaScript is an interpreted language that executes code line by line.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript alert</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>JavaScript alert</h3>
<script>
const userName = prompt("Please enter your name:");
if (userName !== null) {
alert("Hello " + userName);
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Click on the picture
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Image change on click</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h3>JavaScript Image change on click</h3>
<img src="resources/images/fruits-apple.png" alt="Fruits Image" id="myImage" />
<script>
const myImage = document.querySelector("#myImage");
myImage.addEventListener("click", () => {
const currentSrc = myImage.getAttribute("src");
if (currentSrc === "resources/images/fruits-apple.png") {
myImage.setAttribute("src", "resources/images/fruits-orange.png");
} else {
myImage.setAttribute("src", "resources/images/fruits-apple.png");
}
});
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
What JavaScript can do
➔ JavaScript can create dynamic content and update content without reloading the page.
➔ JavaScript can validate forms, checking user input before sending it to the server for processing.
➔ JavaScript can add user interaction by implementing features like dropdown menus, image carousels, animations, and can dynamically respond to user actions.