step by step with code examples to help you understand each concept better.
1. JS Introduction
JavaScript is a versatile language that runs in the browser or on the server (with Node.js). It's used to make web pages interactive.
<!DOCTYPE html>
<html>
<body>
<h2>Hello, JavaScript!</h2>
<button onclick="myFunction()">Click Me</button>
<script>
function myFunction() {
alert("Hello, welcome to JavaScript!");
}
</script>
</body>
</html>
2. JS Where To
JavaScript can be placed in three locations:
- Inline:
<button onclick="alert('Inline JS')">Click me</button>
-
Internal (inside a
<script>tag):
<script>
function showMessage() {
alert("Internal JS");
}
</script>
-
External (in an external
.jsfile):
<!-- index.html -->
<script src="script.js"></script>
<!-- script.js -->
console.log("This is external JS!");
3. JS Output
Different ways to display output in JavaScript:
<!-- HTML output -->
<p id="output"></p>
<script>
// Write into HTML element
document.getElementById("output").innerHTML = "Hello World!";
// Write into browser's console
console.log("Console Output");
// Display in an alert box
alert("Alert Box");
</script>
4. JS Statements
A statement is an instruction. For example:
let a = 5; // This is a statement
let b = 6; // This is another statement
let sum = a + b; // Statement calculating the sum
5. JS Syntax
Syntax refers to the set of rules on how JavaScript programs are constructed:
let name = "John"; // Variable declaration and assignment
console.log(name); // Statement to output the value of 'name'
6. JS Comments
// This is a single-line comment
/*
This is a
multi-line comment
*/
let x = 10; // This is an inline comment
7. JS Variables
Variables store data values. You can declare them using let, var, or const.
let name = "Alice"; // Declaring a string variable
var age = 30; // Declaring a number variable
const country = "USA"; // Declaring a constant
8. JS Let
The let keyword allows you to declare variables with block scope.
let x = 10;
if (x > 5) {
let y = 20; // 'y' only exists inside this block
}
console.log(y); // Error: y is not defined
9. JS Const
Variables declared with const are immutable (you cannot reassign them).
const PI = 3.14159;
PI = 3.14; // Error: Assignment to constant variable.
10. JS Operators
Operators are used to perform operations on variables and values:
let a = 10;
let b = 20;
let sum = a + b; // Arithmetic operator
let isEqual = (a == b); // Comparison operator
let notEqual = (a != b); // Logical operator
11. JS Arithmetic
JavaScript provides basic arithmetic operators:
let x = 5;
let y = 2;
let sum = x + y; // Addition
let difference = x - y; // Subtraction
let product = x * y; // Multiplication
let quotient = x / y; // Division
let remainder = x % y; // Modulus (remainder of division)
12. JS Assignment
Assignment operators assign values:
let x = 10; // Assign 10 to x
x += 5; // Add 5 to x (x = x + 5)
x *= 2; // Multiply x by 2
13. JS Data Types
JavaScript has various data types:
let name = "Alice"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let person = {name: "John", age: 30}; // Object
let colors = ["Red", "Blue", "Green"]; // Array
let notDefined; // Undefined
let emptyValue = null; // Null
14. JS Functions
Functions are blocks of code designed to perform tasks.
function greet(name) {
return "Hello " + name;
}
console.log(greet("Alice")); // Output: Hello Alice
15. JS Objects
JavaScript objects are key-value pairs.
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};
person.greet(); // Output: Hello, John
16. JS Object Properties
Access object properties using dot notation or bracket notation:
let car = {make: "Toyota", model: "Corolla"};
console.log(car.make); // Output: Toyota
console.log(car["model"]); // Output: Corolla
17. JS Object Methods
Object methods are functions stored as object properties:
let person = {
name: "Alice",
sayHello: function() {
return "Hello, " + this.name;
}
};
console.log(person.sayHello()); // Output: Hello, Alice
18. JS Object Constructors
Object constructors allow you to create multiple objects with the same structure:
function Person(name, age) {
this.name = name;
this.age = age;
}
let john = new Person("John", 30);
console.log(john.name); // Output: John
These are the first few examples of JavaScript fundamentals with explanations and code. Let me know if you'd like to dive deeper into specific sections like arrays, loops, string manipulation, etc.!
Let’s continue with the full list of JavaScript concepts step by step, along with code examples:
19. JS Events
JavaScript can respond to various user events like clicks, mouse movements, or key presses.
<button onclick="displayMessage()">Click Me</button>
<script>
function displayMessage() {
alert("Button clicked!");
}
</script>
20. JS Strings
Strings in JavaScript are sequences of characters.
let greeting = "Hello, World!";
let length = greeting.length; // String length
let upperCaseGreeting = greeting.toUpperCase(); // Convert to uppercase
console.log(upperCaseGreeting); // Output: HELLO, WORLD!
21. JS String Methods
JavaScript provides several built-in string methods:
let str = "Hello, World!";
let subStr = str.substring(0, 5); // Extract substring
let replacedStr = str.replace("World", "Everyone"); // Replace part of string
console.log(replacedStr); // Output: Hello, Everyone!
22. JS String Search
You can search for substrings in JavaScript strings:
let sentence = "JavaScript is awesome!";
let position = sentence.indexOf("awesome"); // Finds the position of the word 'awesome'
console.log(position); // Output: 15
23. JS String Templates
Template literals allow embedding variables and expressions in strings.
let name = "Alice";
let greeting = `Hello, ${name}!`; // Template literal using backticks
console.log(greeting); // Output: Hello, Alice!
24. JS Numbers
JavaScript handles integers and floating-point numbers.
let num1 = 5;
let num2 = 2.5;
let sum = num1 + num2; // Adding numbers
console.log(sum); // Output: 7.5
25. JS BigInt
BigInt is used for arbitrarily large integers.
let bigNumber = BigInt("123456789012345678901234567890");
console.log(bigNumber); // Output: 123456789012345678901234567890n
26. JS Number Methods
JavaScript provides methods for numbers like:
let num = 9.656;
let rounded = num.toFixed(2); // Rounds to 2 decimal places
console.log(rounded); // Output: 9.66
27. JS Number Properties
JavaScript has built-in number properties:
let max = Number.MAX_VALUE; // Largest possible number in JS
console.log(max); // Output: 1.7976931348623157e+308
28. JS Arrays
Arrays are lists of values:
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Output: Banana
29. JS Array Methods
JavaScript arrays come with various methods:
let fruits = ["Apple", "Banana", "Cherry"];
fruits.push("Mango"); // Adds an element at the end
let lastFruit = fruits.pop(); // Removes the last element
console.log(lastFruit); // Output: Mango
30. JS Array Search
You can search for values in arrays:
let numbers = [1, 2, 3, 4, 5];
let index = numbers.indexOf(3); // Find the index of 3
console.log(index); // Output: 2
31. JS Array Sort
You can sort arrays using sort():
let fruits = ["Banana", "Apple", "Cherry"];
fruits.sort(); // Sort alphabetically
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
32. JS Array Iteration
Use loops or array methods to iterate through elements:
let fruits = ["Apple", "Banana", "Cherry"];
fruits.forEach((fruit) => console.log(fruit)); // Output each fruit
33. JS Array Const
Arrays declared with const can still have their contents modified:
const fruits = ["Apple", "Banana"];
fruits.push("Cherry"); // This works
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
34. JS Dates
JavaScript provides the Date object to work with dates:
let date = new Date();
console.log(date); // Output: Current date and time
35. JS Date Formats
You can format the date in different ways:
let date = new Date();
console.log(date.toDateString()); // Output: Mon Sep 28 2024
36. JS Date Get Methods
JavaScript provides methods to get parts of a date:
let date = new Date();
let year = date.getFullYear(); // Get the year
let month = date.getMonth(); // Get the month (0-11)
console.log(year, month); // Output: 2024, 8 (September)
37. JS Date Set Methods
You can set specific parts of a date:
let date = new Date();
date.setFullYear(2025); // Set the year to 2025
console.log(date); // Output: Updated date with the new year
38. JS Math
JavaScript provides a Math object for mathematical operations:
let x = Math.PI; // Value of PI
let y = Math.sqrt(16); // Square root of 16
console.log(x, y); // Output: 3.141592653589793, 4
39. JS Random
You can generate random numbers in JavaScript:
let randomNum = Math.random(); // Generates a number between 0 and 1
console.log(randomNum);
40. JS Booleans
Booleans can have two values: true or false.
let isJavaScriptFun = true;
let isFishTasty = false;
console.log(isJavaScriptFun); // Output: true
41. JS Comparisons
Comparison operators are used to compare values:
let a = 10;
let b = 5;
console.log(a > b); // true
console.log(a == b); // false
console.log(a !== b); // true
42. JS If Else
Conditional statements allow you to execute code based on conditions:
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are not an adult.");
}
43. JS Switch
The switch statement allows you to execute different blocks of code based on a value:
let fruit = "Apple";
switch (fruit) {
case "Banana":
console.log("Banana");
break;
case "Apple":
console.log("Apple");
break;
default:
console.log("Unknown fruit");
}
44. JS Loop For
The for loop allows you to repeat code a specified number of times:
for (let i = 0; i < 5; i++) {
console.log(i); // Output: 0, 1, 2, 3, 4
}
45. JS Loop For In
The for-in loop iterates over properties of an object:
let person = {name: "John", age: 30, city: "New York"};
for (let key in person) {
console.log(key + ": " + person[key]);
}
46. JS Loop For Of
The for-of loop is used to iterate over iterable objects like arrays:
let fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
console.log(fruit); // Output each fruit
}
47. JS Loop While
The while loop executes as long as the condition is true:
let i = 0;
while (i < 5) {
console.log(i); // Output: 0, 1, 2, 3, 4
i++;
}
48. JS Break
break is used to exit a loop:
for (let i = 0; i < 5; i++) {
if (i === 3) break;
console.log(i); // Output: 0, 1, 2
}
49. JS Iterables
Objects that can be iterated over are called iterables, like arrays, strings, maps, etc.
let str = "Hello";
for (let char of str) {
console.log(char); // Output each character
}
This is the continuation of the JavaScript tutorial, covering the next set of concepts. Let me know if you'd like further
details or any clarification!
Top comments (0)