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!
Written by Ragesh
Experienced Webdesigner and SEO Consultant Specialist from Cochin, Kerala with over three years of experience in the field of Search Engine Optimization, SEO and Internet Marketing
0 comments:
Post a Comment