Rajesh Rathod

Available for New Projects

Introduction to JavaScript

Written by

Rajesh Rathod

in

Introduction to JavaScript

JavaScript (JS) is a powerful, high-level programming language primarily used for creating interactive web applications. It is a client-side language (executed in the browser), but with Node.js, it can also run on the server side.

JavaScript is essential for modern web development, allowing developers to create dynamic and interactive web pages. It works alongside HTML and CSS to provide a complete web development experience.

Benefits & Possibilities

  1. Making Web Pages Interactive: By adding animations, sliders, pop-ups, we can make site/apps interactive.
    • We can develop Dynamic Websites by Implementing features like real-time updates, dynamic content loading, and interactive elements.
    • Create Single Page Applications (SPAs) – Build fast-loading, smooth, and app-like websites using frameworks like React or Vue.
    • Build Full-Stack Applications – Use JavaScript for both frontend (React, Vue) and backend (Node.js, Express) development.
    • Build Web Applications – Create full-fledged applications with frameworks like React, Angular, and Vue.js.
    • Develop Custom WordPress Features – Add JavaScript-based enhancements, custom blocks, and interactive elements to WordPress sites.
  2. Control Web Page Behavior – Manipulate HTML and CSS dynamically using the DOM (Document Object Model).
  3. Develop Backend with Node.js – Use JavaScript for server-side development and create APIs.
  4. Work with Databases – Use JS with databases like MongoDB or Firebase for dynamic content.
  5. Create Browser Extensions – Develop Chrome/Firefox extensions for custom functionality.
  6. Build Mobile and Desktop Apps – Use frameworks like React Native and Electron for cross-platform development.
  7. Working as a freelancer – JavaScript is one of the most in-demand skills in web development. You can offer JavaScript development services for web projects.

Writing JavaScript in an HTML File

Create a basic HTML file and link JavaScript inside it.

Example 1: Displaying a Message

Foundational Concepts JavaScript

Variables

Variable – a named container for a value.

Ref:

  • Envato Tuts+ Course on Javascript [YouTube Video]
  • MDN Doc [Online Resource]
  • You Don’t Know JavaScript [Book by ]

There’re 3 ways to declare a variable-

  1. var
  2. let
  3. const

For example;

var name;

We can assign a value to variable also;

var name=Rajesh;

We can have multiple values in a variable; 

var name=Rajesh, age=24, education=Graduate;

Since JavaScript is a dynamic/interactive programming language, we can change the values. For example-

var age=24;
age= 25;
age=30

If you log the value of variable ‘age’ in console, you its changing from 24 to 25 and then 30.

Sidenote:

To show values in the console(or front end); we use different functions.

console.log(age)

// OR

alert(age)

Scope: The scope of var is global variable(meaning the scope of var applied to the inner element applies to the outer element). So, instead of var we use let variable.

var : Global or function scope

let & const: Block Scope

Data Types

Primitives:

  1. numbers
  2. string
  3. boolean
  4. undefined
  5. null
  6. symbol

Number

let number=42; //Btw 42 is a very famous number from the novel Hitcher Guide to Galaxy.

let oct=0o77; //63-second letter can be either small/large o (O for orange)

let hex= 0x0011; 17

let bin= 0b1100; //12

String

The content inside strong should be wrapped in a single(”) OR double(“”) quote. Many people prefer single quote(”), as its very easy.

let string ='Hello world!'
let quote = '"Be the change you want to see in the world"' 
let escaped = '"Oh no, you don\'t, said Akash';
let joined = 'wait' + 'what";
let multiline = 'this
string 
has 
multiple
linebreaks';
let multiline2 = 'this\nstring\nhas\nmultiple\nlinebreaks'; //We can write same this like this, but this code is not much readable.

Boolean

let amountPayable = true;
let paymentProcess = false;

Symbol

The content inside bracket is used to describe symbol. Each symbol is unique and is useful for debugging purposes.

let mySymbol = Symbol('my symbol') //

Array

The array is a container like a variable, except that it can hold multiple support for values. They are like objects, but they have a fixed numerical index.

let array = [42, 'Rajesh', true];//Preferred format 
let array2 = new Array() //Array Constructor
array[0]; //42

Object

let obj = {
num:42,
str:'Rajesh'
};

obj.num; //42 (Dot Notation)
obj['str']; // Rajesh (Bracket Notation)

T.

More posts