Introduction to JavaScript
JavaScript is a programming language that allows you to add interactivity and dynamic behavior to websites. It's primarily used for client-side web development, meaning it runs directly in the browser. Here's a basic example to get you started:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1 id="demo">Hello, World!</h1>
<script>
// JavaScript code goes here
// You can write JavaScript code directly in the <script> tags within your HTML file
// Let's change the text of the heading with id "demo"
var heading = document.getElementById("demo");
heading.innerHTML = "Hello, JavaScript!";
</script>
</body>
</html>
To explain the code:
The line var heading = document.getElementById("demo"); uses the document.getElementById() method to retrieve the element with the id "demo" and store it in the heading variable.
The line heading.innerHTML = "Hello, JavaScript!";
updates the content of the heading element using the innerHTML property. In this case, we change it to "Hello, JavaScript!".
When you open this HTML file in a web browser, it will display the heading with the updated text, "Hello, JavaScript!".
When you open this HTML file in a web browser, it will display the heading with the updated text, "Hello, JavaScript!".
_____output_____
Example 1:
Alerting a message
<html>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script>
// JavaScript code goes here
alert("Hello, World!");
</script>
</body>
</html>
In this example, the `alert()` function displays a pop-up window with the message "Hello, World!" when the page is loaded.
Example 2:
Handling button click
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<button onclick="showMessage()">Click me</button>
<script>
// JavaScript code goes here
function showMessage() {
alert("Button clicked!");
}
</script>
</body>
</html>
output
Here, we have a button element that triggers the `showMessage()` function when clicked. The function displays an alert with the message "Button clicked!".
Example 3:
Manipulating CSS styles
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="demo">Hello, World!</h1>
<script>
// JavaScript code goes here
var heading = document.getElementById("demo");
heading.classList.add("highlight");
</script>
</body>
</html>
output
In this example, we define a CSS class `.highlight` that sets the text color to red and the font weight to bold. JavaScript code selects the heading element and adds the class to it, resulting in the text being styled accordingly.
0 Comments