Introduction
JavaScript is a versatile, high-level programming language commonly used in web development to create dynamic and interactive user experiences. It can be used for front-end and back-end development, making it an essential tool for modern web developers.
Setting Up
- Browser Console: Open your web browser and access the console (usually found in Developer Tools).
- Text Editor: Use any text editor like VSCode, Sublime Text, or even Notepad.
Basics
Variables
Variables are used to store data. You can declare variables using let
, const
, or var
.
let name = "John";
const age = 30;
var isStudent = true;
Data Types
JavaScript supports various data types, including:
-
String:
"Hello"
-
Number:
42
-
Boolean:
true
orfalse
-
Array:
[1, 2, 3]
-
Object:
{ key: "value" }
-
Undefined:
undefined
-
Null:
null
Functions
Functions are blocks of code designed to perform a particular task.
function greet() {
console.log("Hello, World!");
}
greet(); // Output: Hello, World!
Control Structures
Conditional Statements
Used to perform different actions based on different conditions.
let time = 20;
if (time < 12) {
console.log("Good morning");
} else if (time < 18) {
console.log("Good afternoon");
} else {
console.log("Good evening");
}
Loops
Used to repeat a block of code a number of times.
for (let i = 0; i < 5; i++) {
console.log(i); // Output: 0 1 2 3 4
}
Events
JavaScript can respond to events, like clicks or keyboard input.
<button onclick="sayHello()">Click me</button>
<script>
function sayHello() {
alert("Hello!");
}
</script>
DOM Manipulation
JavaScript can interact with HTML elements to change content, style, and attributes.
<p id="demo">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed!";
}
</script>
Arrays and Objects
Arrays and objects are used to store collections of data.
Arrays
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
Objects
let person = {
firstName: "John",
lastName: "Doe",
age: 30
};
console.log(person.firstName); // Output: John
ES6 Features
Modern JavaScript (ES6 and later) introduces several new features:
Arrow Functions
const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5
Template Literals
let name = "John";
console.log(`Hello, ${name}!`); // Output: Hello, John!
Destructuring
let person = { firstName: "John", lastName: "Doe" };
let { firstName, lastName } = person;
console.log(firstName); // Output: John
Conclusion
This is just a brief introduction to JavaScript. There's much more to explore, including advanced topics like asynchronous programming and API's ......
I’m excited to share more blog posts like this. just follow and give reactions