Anil

Posted on Oct 7

Javascript important concepte || important javascript concepte

#webdev #javascript #beginners #programming

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 .js file):

<!-- 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!