1. Introduction to JavaScript
JavaScript can be added to an HTML document using the <script> tag. Here's a simple example of a complete HTML document with JavaScript:
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello, World!";
</script>
</body>
</html>
2. Variables
Variables are used to store data values. In JavaScript, you can declare a variable using var, let, or const.
javascript
var name = "John";
let age = 30;
const pi = 3.14;
console.log(name); // Outputs: John
console.log(age); // Outputs: 30
console.log(pi); // Outputs: 3.14
3. Data Types
JavaScript has several data types, including:
- String:
"Hello" - Number:
123 - Boolean:
trueorfalse - Array:
[1, 2, 3] - Object:
{name: "John", age: 30} - Null:
null - Undefined:
undefined
4. Functions
Functions are blocks of code designed to perform a particular task. You can define a function using the function keyword.
javascript
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice")); // Outputs: Hello, Alice
5. Events
JavaScript can react to events, such as when a user clicks a button.
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Events</title>
</head>
<body>
<button onclick="displayDate()">Click me</button>
<p id="demo"></p>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = new Date();
}
</script>
</body>
</html>
6. Conditional Statements
Conditional statements control the flow of code based on conditions.
javascript
let time = 20;
if (time < 18) {
console.log("Good day");
} else {
console.log("Good evening");
}
7. Loops
Loops can execute a block of code a number of times.
javascript
for (let i = 0; i < 5; i++) {
console.log("The number is " + i);
}
8. Arrays
Arrays are used to store multiple values in a single variable.
javascript
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Outputs: Apple
console.log(fruits.length); // Outputs: 3
9. Objects
Objects are collections of properties, and a property is an association between a name (or key) and a value.
javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // Outputs: John Doe
10. DOM Manipulation
JavaScript can be used to change HTML content.
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
</head>
<body>
<h1 id="header">Hello, World!</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("header").innerHTML = "Hello, JavaScript!";
}
</script>
</body>
</html>
This should give you a good foundation to start with JavaScript. Feel free to ask if you have any specific questions or need further examples!
