JavaScript is a popular programming language mainly used for web development. It adds interactive and dynamic features to websites, making them more engaging and functional. Here’s a basic overview of JavaScript:
Key Concepts
-
Variables: Used to store data values.
var: Function-scoped or globally-scoped.let: Block-scoped, introduced in ES6.const: Block-scoped and read-only, also introduced in ES6.
var name = "John"; let age = 30; const isActive = true; -
Data Types: JavaScript supports various data types including:
- Primitive types: Number, String, Boolean, Null, Undefined, Symbol, BigInt.
- Object types: Object, Array, Function, Date, RegExp, etc.
let number = 10; // Number let text = "Hello"; // String let isTrue = true; // Boolean let nothing = null; // Null let notDefined; // Undefined -
Operators: Used to perform operations on variables and values.
- Arithmetic:
+,,,/,%,++,-. - Assignment:
=,+=,=,=,/=,%=. - Comparison:
==,===,!=,!==,>,<,>=,<=. - Logical:
&&,||,!.
let result = 5 + 10; // Arithmetic let isEqual = (5 == "5"); // Comparison (true) let isStrictEqual = (5 === "5"); // Strict Comparison (false) let andOperator = (true && false); // Logical (false) - Arithmetic:
-
Functions: Blocks of code designed to perform particular tasks, reusable throughout the code.
- Function Declaration:
function greet(name) { return "Hello, " + name; } console.log(greet("Alice")); // "Hello, Alice"- Function Expression:
const greet = function(name) { return "Hello, " + name; }; console.log(greet("Bob")); // "Hello, Bob"- Arrow Functions (introduced in ES6):
const greet = (name) => "Hello, " + name; console.log(greet("Charlie")); // "Hello, Charlie" -
Control Structures: Direct the flow of the program.
- Conditional Statements:
if,else if,else,switch.
if (age > 18) { console.log("Adult"); } else { console.log("Not an adult"); }- Loops:
for,while,do...while,for...in,for...of.
for (let i = 0; i < 5; i++) { console.log(i); } let count = 0; while (count < 5) { console.log(count); count++; } - Conditional Statements:
-
Objects and Arrays: Collections of data.
- Object:
let person = { name: "Alice", age: 25, greet: function() { console.log("Hello, " + this.name); } }; console.log(person.name); // "Alice" person.greet(); // "Hello, Alice- Array:
let numbers = [1, 2, 3, 4, 5]; console.log(numbers[0]); // 1 numbers.push(6); console.log(numbers); // [1, 2, 3, 4, 5, 6] -
Events: JavaScript can respond to user actions on web pages.
document.getElementById("myButton").addEventListener("click", function() { alert("Button clicked!"); }); -
DOM Manipulation: JavaScript can interact with and modify the HTML and CSS of a web page.
document.getElementById("myElement").innerHTML = "New Content"; document.getElementById("myElement").style.color = "blue";
Example Code
Here’s a simple example to demonstrate some of the basics:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button id="changeTitleButton">Change Title</button>
<script>
// Function to change the title text
function changeTitle() {
document.getElementById("title").innerHTML = "Title Changed!";
}
// Add event listener to the button
document.getElementById("changeTitleButton").addEventListener("click", changeTitle);
</script>
</body>
</html>
This example demonstrates:
- Selecting and modifying a DOM element.
- Defining a function.
- I am adding an event listener to a button to trigger the function.
Understanding these basics provides a solid foundation for exploring more than using these concepts in upcoming tutorials NodeJs and ReactJs etc.