JavaScript Learning Guide

We already Know that the JavaScript is a high-level, interpreted programming language that allows developers to create interactive websites. It is one of the core technologies of the web, alongside HTML and CSS.

History of JavaScript: Introduced in 1995 by Brendan Eich while working at Netscape, it was initially called Mocha, then renamed LiveScript, and finally JavaScript. It has since evolved into a powerful language used for both client-side and server-side development.

Why JavaScript?

Versatile Language: JavaScript can be used for front-end and back-end development, making it one of the most versatile languages today.
Popularity: JavaScript has consistently ranked as one of the most popular programming languages in the developer community. It's used in web development, game development, mobile applications, and more.
Ease of Learning: It's beginner-friendly, making it ideal for those new to programming, yet powerful enough for experienced developers to build complex applications.

Building the JavaScript

In a project, there are three primary ways to add JavaScript:

Inline JavaScript
Internal JavaScript

External JavaScript

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>JavaScript Methods</title>
   <!-- Internal JavaScript -->
   <script>
     function internal() {
       document.getElementById("internal").innerHTML = "This is from Internal JavaScript!";
     }
   </script>
 </head>
 <body>

   <h1>JavaScript in HTML</h1>

   <!-- Inline JavaScript -->
   <button onclick="alert('This is from Inline JavaScript!')">Click</button>

   <!-- Link to external JavaScript file -->
   <script src="script.js"></script>
 </body>
 </html>

Variables

Variables store data that can be used and manipulated later in your code. They can be declared using var, let, or const.
var is function-scoped and can be re-declared.
let is block-scoped and cannot be re-declared in the same scope.

  let myName = 'ashish';
  let age = 26;
  age = 28;
  console.log(name);
  console.log(age);

  const year = 1920;
  console.log(year);

  var number = 56;
  number = 70;
  console.log(number);

Data Types

Primitive Types: Number, String, Boolean, Null, Undefined, Symbol.

Non-Primitive Types: Complex structures like arrays and functions.


  // number
  let num = 3.4;
  console.log(typeof num);

  // strings
  let text = 'hello' ;
  console.log(text);

  // boolean
  let greater = 10>11;
  console.log(greater);

  // null
  let value = null;
  console.log(value);
  // undefined
  let define;
  console.log(define);

Operators

  // operators
  let num = 10;

  console.log(num + 10);
  console.log(num - 5);
  console.log(num * 10);
  console.log(num / 2);
  console.log(num ** 4);

  num++;
  num--;
  num += 15;

  console.log(num);

Conditional Statements

if...else: Control flow based on conditions.

  const age = 25;
  if(age >= 25 & age != 25 ){
      console.log('age is 25');
  }else if( age !== 25 ){ 
  console.log('age is more 25');
  }
  else{
      console.log('age is not 25')
  }

Loops

for loop: Repeats code a specific number of times

  for(let i = 0; i<10;i++){
      if(i === 4){
          console.log('this is 4')
          continue;
          }

      if (i=== 7){
          console.log('stop here')
          break;
      }    
      console.log(i);
  }

  const names =  ['ashish','madhu','chirag'];

  for(let i=0 ; i<names.length;i++){
      console.log(i)
  }

Functions

  //  Function Declaration
  const word = function (){
      console.log('this is function Expression');
  }
  word();
  const add = function (x){
      return x + x ;
  }
  console.log(add(7));
  // IIFE
  (function(){
      console.log('this is iife');
  }) ();

Arrays

        let names = ['ashish','madhu','alok']

        console.log(names);
        console.log(names[1]);
        names[2]= 'alok';

JavaScript ES6+ Features

Promises and Async/Await: Make asynchronous code easier to manage.

  async function sam (){
      try{
    const sams = await fetch('https://dummyjson.com/todos')
    const data = await sams.json()
    return data
  } catch(error){
      console.log(error)
  }

  //An HTTP request is a message sent by a client to a server
  const products = (files)=>{
      return new Promise((resolve,reject)=>{
          const httpRequest = new XMLHttpRequest()
          httpRequest.addEventListener('readystatechange',()=>{
              if(httpRequest.readyState === 4 && httpRequest.status === 200){
                  const data = JSON.parse(httpRequest.responseText)
                 resolve(data)
              }
              else if(httpRequest.readyState === 4){
                 reject('could not fetch data')
              }
          })
          httpRequest.open('GET',files)
          httpRequest.send()
      })

  }

Object-Oriented Programming

  class User {
      constructor(username,email){
        this.username = username;
        this.email = email;
        this.score = 0;
      }
      signin(){
        console.log(`${this.username} is signned in`)
        return this
      }
      signout(){
        console.log(`${this.username} is signned out`)
        return this
      }
      scores(){
        this.score++
        console.log(`${this.username} has a score of ${this.score}`)
        return this
      }
  }
  const user1 = new User('ashish','ashishprabhakar1010@gmail.com')
  const user2 = new User('madhu','madhukumari8513@gmail.com')
  console.log(user1,user2)

  user2.signin().scores().scores().signout();

Inheritence:

  class player {
    constructor(game,captain){
      this.game = game;
      this.captain = captain;
    }
    properties(){
      console.log(`${this.game} players can run`)
    }
  }

  class football extends player {

  req(){
    console.log('they need a ball')
  }
  }

this.keyword in JavaScript


  const user = {
      name : 'ashish prabhakar',
      email: 'ashishprabhakar1010@gmail.com', 
      languages : ['Hindi','English'],
      signin (){
          console.log('user signed in')
      },
      signout (){
          console.log('user signed out')
      },
      language () {
          console.log(this)
          this.languages.forEach(lang =>{
              console.log(lang)
          })
      }
  }

  user.language();
  console.log(this)

⌚Date and Object in JavaScript

const days = new Date();
console.log(days);

// dates and time method
console.log(days.getFullYear());
console.log(days.getMonth());
console.log(days.getDate());
console.log(days.getDay());
console.log(days.getHours());
console.log(days.getMinutes());
console.log(days.getSeconds());
console.log(days.getMilliseconds());

// string method
console.log(days.toDateString());
console.log(days.toTimeString());
console.log(days.toLocaleString());

🕛Digital Clock

const clock = document.querySelector('.clock');

const time = () => {
const now = new Date();

const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();

const html = `
<span>${h}</span> :
<span>${m}</span> :
<span>${s}</span>
`
clock.innerHTML = html;
}
setInterval(time, 1000)

⏲️Time and Stamps:

const days = new Date();
const past = new Date('July 1 2022 11:30:28');
// console.log(days.getTime(), past.getTime());
const differ = days.getTime() - past.getTime();
console.log(differ);

const mins = Math.round(differ / 1000 / 60);
const hours = Math.round(mins / 60);
const day = Math.round(hours / 24);

console.log(mins);
console.log(hours);
console.log(`this video is published ${day} ago`);

Let’s try to build some basics Question for the Interview:

Factorial

function factorial(n) {
    if (n < 0) {
        return -1;
    }
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}
const result = (factorial(5))

console.log("🚀 ~ result:", result)

Fibonacci Series:

function fiboncacci(n){
    let a = 0, b = 1, c;
    for(let i = 0; i < n; i++){
        c = a + b;
        a = b;
        b = c;
    }
}
const result=fiboncacci(5)
console.log("🚀 ~ result:", result)

Largest Number:

const arr = [5, 10, 25, 43, 65, 78, 91];

let LargestNumber = arr[0];

for (let i = 1; i < arr.length; i++) {
    if(arr[i]>LargestNumber){
        LargestNumber = arr[i];
    }
}
console.log("🚀 ~ LargestNumber:", LargestNumber)

Objects:

let user = {
    name: "ashsih",
    age: 20,
    gender: 'male',
    email: 'ashishprabhkar1010@gmail.com',
    login: function () {
        console.log("you are now logged in")
    }
}
console.log("🚀 ~ user:", user)

Palindrome:

function Palindrome(num) {
    let str = num.toString();  
    const reversedStr = str.split("").reverse().join("");  
    return str === reversedStr;  
}

const result = Palindrome(121);  

console.log("🚀 ~ result:", result)

Prime Numbers:

// jo kudh se divisible ho 1,12
function isPrime(num) {
    if (num <= 0) return false;
    for (let i = 2; i <= Math.sqrt(num); i++) {
        if (num % i === 0) {
            return false;
        }
    }
    return true

}
const number = 12;
console.log(`${number} is ${isPrime(number) ? "prime" : "not prime"}`)

JavaScript Frameworks and Libraries

React.js: A popular front-end library for building user interfaces.

Node.js: JavaScript runtime that allows for server-side development.
Vue.js, Angular: Other popular frameworks.

Now You can also Contribute with me in the Github Account :
👍Github Link

Let's Learn with JavaScript📱

Why JavaScript?

Variables

Operators

Conditional Statements

JavaScript Frameworks and Libraries

More from this blog

React Firebase 🔥

Hangman Game: A Fun & Interactive Project in React

Integrating React.js into a Pokedex App

Command Palette

Why JavaScript?

Variables

Operators

Conditional Statements

JavaScript Frameworks and Libraries

More from this blog