Introduction to JavaScript
What is JavaScript?
JavaScript is a versatile programming language that allows you to add interactivity and dynamic functionality to web pages. It is primarily used for client-side scripting, running directly in the web browser. JavaScript is widely supported by all modern browsers and has become an essential component of web development.
Example Usage
Here's a simple example that demonstrates JavaScript usage:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
<script>
function greet() {
var name = prompt("Enter your name:");
alert("Hello, " + name + "!");
}
</script>
</head>
<body>
<button onclick="greet()">Click Me</button>
</body>
</html>In the above example, a JavaScript function called greet() prompts the user to enter their name and displays a greeting message in an alert box.
JavaScript Variables and Data Types
Introduction to Variables
In JavaScript, variables are used to store data values. They are declared using the var, let, or const keyword.
Data Types in JavaScript
JavaScript supports various data types:
- Number: Represents numeric values, including integers and floating-point numbers.
- String: Represents sequences of characters enclosed in single quotes ('') or double quotes ("").
- Boolean: Represents a logical value, either
trueorfalse. - Array: Represents an ordered list of values enclosed in square brackets ([]).
- Object: Represents a collection of key-value pairs enclosed in curly braces ({}) and allows for complex data structures.
- Null: Represents the absence of any object value.
- Undefined: Represents a variable that has been declared but not assigned a value.
Example Usage
Here's an example that demonstrates the usage of variables and data types:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Variables Example</title>
<script>
var name = "John";
var age = 25;
var isStudent = true;
var hobbies = ["reading", "painting", "gaming"];
var person = {
name: "John",
age: 25,
isStudent: true
};
console.log(name);
console.log(age);
console.log(isStudent);
console.log(hobbies);
console.log(person);
</script>
</head>
<body>
<p>Check the browser console for output.</p>
</body>
</html>The above example declares variables with different data types and logs their values to the browser console for verification.
JavaScript Functions
What are Functions?
In JavaScript, functions are reusable blocks of code that perform specific tasks or calculations. They can accept parameters (input) and return values (output).
Creating Functions
Here's an example that demonstrates the creation of a JavaScript function:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Functions Example</title>
<script>
function greet(name) {
return "Hello, " + name + "!";
}
var message = greet("John");
console.log(message);
</script>
</head>
<body>
<p>Check the browser console for output.</p>
</body>
</html>In the above example, a function called greet() is defined with a parameter name. It returns a greeting message with the provided name. The function is invoked with the argument "John", and the result is logged to the browser console.
JavaScript Conditional Statements
What are Conditional Statements?
Conditional statements allow you to execute different blocks of code based on specified conditions. JavaScript provides various conditional statements like if, else if, and else.
Example Usage
Here's an example that demonstrates the usage of conditional statements:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Conditional Statements Example</title>
<script>
var num = 10;
if (num > 0) {
console.log("Number is positive");
} else if (num < 0) {
console.log("Number is negative");
} else {
console.log("Number is zero");
}
</script>
</head>
<body>
<p>Check the browser console for output.</p>
</body>
</html>The above example evaluates the value of the num variable and displays a corresponding message based on whether the number is positive, negative, or zero.
JavaScript DOM Manipulation
What is the DOM?
The Document Object Model (DOM) is a programming interface that represents the structure and content of a web page. It provides methods and properties to access, modify, and manipulate HTML elements.
Example Usage
Here's an example that demonstrates JavaScript DOM manipulation:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript DOM Manipulation Example</title>
<script>
function changeText() {
var element = document.getElementById("myElement");
element.textContent = "New Text";
}
</script>
</head>
<body>
<p id="myElement">Original Text</p>
<button onclick="changeText()">Click Me</button>
</body>
</html>The above example demonstrates how to change the text content of an HTML element with the id myElement. Clicking the button triggers the changeText() function, which modifies the text content of the element.
.png)
.png)
0 Comments