JavaScript is a high-level, dynamic programming language commonly used to create interactive effects within web browsers.
It is an essential part of web development, alongside HTML and CSS, enabling dynamic content, controlling multimedia, and animating images.
JavaScript is versatile and supports event-driven, functional, and imperative programming styles.
Key Features of JavaScript
- Interpreted Language: JavaScript code is executed line-by-line by the browser's JavaScript engine.
- Dynamic Typing: Variables in JavaScript do not require a type definition and can hold different data types at different times.
- Prototype-based Object Orientation: Objects in JavaScript can directly inherit properties and methods from other objects.
- First-class Functions: Functions in JavaScript are treated as first-class objects, meaning they can be assigned to variables, passed as arguments, and returned from other functions.
- Event-driven: JavaScript can respond to user events like clicks, form submissions, and keyboard input.
Basic Examples
1. Hello World
A simple example to display "Hello, World!" in an alert box.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script>
alert("Hello, World!");
</script>
</body>
</html>
2. Manipulating the DOM
Changing the content of an HTML element using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
</head>
<body>
<h1 id="myHeader">Original Text</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("myHeader").innerText = "Text Changed!";
}
</script>
</body>
</html>
3. Basic Function
A simple function that adds two numbers and logs the result to the console.
<!DOCTYPE html>
<html>
<head>
<title>Basic Function</title>
</head>
<body>
<script>
function addNumbers(a, b) {
return a + b;
}
let result = addNumbers(5, 10);
console.log("The result is: " + result);
</script>
</body>
</html>
4. Event Handling
Handling a button click event to display a message.
<!DOCTYPE html>
<html>
<head>
<title>Event Handling</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Button was clicked!");
});
</script>
</body>
</html>
5. Loop and Condition
A for loop and if condition example.
<!DOCTYPE html>
<html>
<head>
<title>Loop and Condition</title>
</head>
<body>
<script>
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
console.log(i + " is even");
} else {
console.log(i + " is odd");
}
}
</script>
</body>
</html>
Conclusion
JavaScript is a powerful and versatile language used for web development.
It enables developers to create interactive and dynamic web pages, enhancing the user experience.
By learning JavaScript, you can significantly improve your web development skills and create more engaging web applications.