JavaScript Course Overview

What is JavaScript?

JavaScript (JS) is a versatile and robust programming language used both on the front-end and back-end of the servers. It is a well-known scripting language for web pages, but many non-browser environments like Node.js, Adobe Acrobat, and Apache CouchDB also use it. JavaScript is a lightweight and interpreted programming language designed for network-centric applications.

How to use JavaScript in real-world projects?

JavaScript converts static pages into interactive pages and improves user interaction. You must incorporate some JS projects to enhance your resume, such as - 

  • Hangman Game
  • JavaScript Calculator
  • JavaScript Form Validation
  • JavaScript Weather App
  • Tic Tac Toe game

To start a simple JavaScript project, follow the basic three steps:

  1. Create a project by optionally providing a project name -
  • create-js-project [project-name]
  • npm init js-project [project-name]

  2. Choose the project name and your desired template.

  3. Wait till the installation is complete, and then you can start with coding.

How does it work?

JavaScript is a client-side scripting language, meaning it can run in the web browsers on the client-side server. JavaScript is a dynamically-typed, interpreted language. 


It is not a compiled language such as C++ or Java. In a compiled language, the source code is passed through a compiler which translates it into bytecode. The machine understands the bytecode and hence executes it. In JavaScript, there is no compiler. Instead, an interpreter reads the JavaScript code and runs it line by line. Many modern browsers use JIT (Just In Time) compilation. It compiles JavaScript to bytecode just as it is about to run.

Why should you learn JavaScript?

why to learn javascriptJavaScript is a must for students and professionals in the web development domain. It is a dynamic language and supports object-oriented, imperative, and declarative styles. 

Some key advantages of learning JavaScript are as follows:

  • JavaScript is the most popular programming language and is an excellent choice for programmers. After mastering JavaScript, you can create many front-end as well as back-end applications using JS frameworks and libraries. 
  • JavaScript is very popular and is used everywhere. It is installed in every modern web browser, including Chrome, Safari, and Mozilla Firefox. So, you don’t need an additional environment setup to learn JavaScript.
  • JavaScript is used for mobile app development, desktop app development, and game development. Hence, you get many opportunities to learn and explore once you learn JavaScript.
  • JavaScript is high in demand and offers a higher pay scale and decent job growth for professionals adept at it.
  • It is a beginner-friendly programming language. It turns intricate details into abstracts. This makes JavaScript easy to learn. Also, it supports essential skills like object-oriented, imperative, and functional programming. You can apply these concepts while learning other skills like Java, C++, and Python. 
  • You can create visual effects, and eye-catching aesthetics to attract user attention and enhances interaction. Plus, you can add animations, scrolling videos, interactive maps, and other cool features.

Where can you run JavaScript?

You can use Javascript anywhere in a document. You must assess the performance to make it easy for the developers to find your scripts. The standard best practice is to place them at the head of the document. It also ensures that all Javascript has been loaded and executed before the document is displayed. 

There are two ways to execute Javascript in a browser:

  • Including your Javascript inside your HTML document

The most basic way to include Javascript in your HTML code

<script>

var x = 3;

alert(‘hello there, this Javascript is ‘+x)

</script>

This can be included anywhere in the project, and it would be executed. Some places are considered better than other places to put the code. Earlier, it was needed to comment out Javascript with an HTML comment to prevent the browsers from considering the code as HTML. This only applies to old browsers, so we need not incorporate this any longer. But if you use strict XHTML as your DOCTYPE, you must enclose the Javascript into the CDATA block to validate it. 

  • Linking to an external Javascript file

You must add an src attribute to your script element to link an external Javascript file. 

<script type="text/javascript" src="testscript.js"></script>

The browser will load the file testscript.js on meeting this element in the page, and execute it. The content inside the script element will be skipped when you provide an src attribute. For example, the following code will load the file testscript.js and execute the code inside it, but it will not run the alert code written inside the script element:

<script type="text/javascript" src="testscript.js">

  alert('This code will not be executed);

</script>

It is better to keep the code in an external Javascript file:

  • Maintaining the code is easy as you can apply the same Javascript functionality to several HTML documents.
  • The browser will cache your Javascript files. This means that the browser will keep a copy of your Javascript and store it on the device of the visitors surfing your site.
  • It will be easy to find your Javascript file and modify it when needed,

JavaScript and Programming Basics

JavaScript is a lightweight, robust programming and scripting language executed on a web browser, and it is easy to learn.

1. JavaScript Data Types

Data Types are fundamental to any programming language.

JavaScript can change the content of HTML. It allows three primitive types of data types to work with.

  • Boolean(Boolean value true or false)
  • Numbers (Numerical value)
  • Strings (contain Characters)

JavaScript also defines NULL (represents no value ) and Undefined (represents undefined value), which define a single value. 

It also supports a non-primitive data type known as Object (through which one can access members), Array (Collection of similar values), and RegExp (Regular expression), which is a composite data type. All numbers are defined as floating-point numbers using a 64-bit floating-point format in JavaScript. In JavaScript, it does not make a distinction between integers and floating-point numbers.

2. JavaScript Variables

JavaScript also has variables like other programming languages. Variables can be taken as names of storage locations. It has two variable types (i.e., Local Variable and Global Variable). 

Note: In JS, a and A are different variables, Because JS(JavaScript) variables are case sensitive.

Before using any variable, we must declare it first and the rules for declaring variables in JS, also called Identifiers.

Name: It starts with a to z (or) A to Z, Underscores (_), or ‘$’ sign.

After the first letter, we use Digits (0 to 9).

JS(JavaScript)Variables are declared with the var keyword.

For example, correct declaration of variables.

var a=10;

var _name=”Aasha”;

Incorrect declaration of Variables.

var 56=30;  

var *xx=120; 

We can also declare multiple variables with “var” keywords.

var name,money;

Example 2:

<script>

var k=5;

var l=4;

var z=k+l;

document.write(z);

</script>

—> Output : 9

JavaScript Local Variables

  • It is declared and accessible within a function or block. Function parameters are local to the function.
  • If we declare the same name for a local and global variable. So, you can hide the global variable.

Example:

<script>

function abc(){

var k=10;       // local variable

}

</script>

Example:

<script>

if (20<26){

var a=20;       // JS local variable

}

</script>

JavaScript Global Variables

  • It is declared and accessible from any function (outside the function) or outside a block with a window object called Global variable.

Example:

<script>

var x=100 ;                         // declared global variable  

function xyz(){  

document.writeln(x);  

}  

function abc(){  

document.writeln(x);  

}  

xyz();                                                    //calling JavaScript function  

abc(); //calling JavaScript function

</script>

3. JS (JavaScript) Constant

Constants in JS are defined as “const”. The term ‘const’  does not define any constant value. Instead, it defines a constant reference to a value. 

  • JS (JavaScript), the ‘const’ variable must be assigned a value when declared. Use ‘const’ while declaring Object, Array, RegExp, and Function.
  • Variables defined with ‘const’ cannot be redeclared and reassigned, and these are Block-scoped.
  • Variables defined with ‘const’ can change the elements of a constant array and the properties of constant objects.

Example:

// const variable cannot be reassigned.

const x=1.234567;

x=1.23; // give an error

x=x+1; // give an error

// const variable must be assigned.

const x= 1.234567; // correctly assigned

// const variable must be assigned.

const x;

x=1.234567; //incorrectly assigned.

4.JS (JavaScript) Strings

JS Strings is a set of characters or sequence of characters used for storing and manipulating text or characters.

There are two ways to make strings in JS.

  • String literal (Using Double quotes)

// var string_name=”My name is Thanos”; 

  • String Object (Using new keyword)

var string_name=new String(‘My name is Thanos”);

 // new used to create an instance.

5.JavaScript String Methods

JavaScript String Methods help us to work with strings. JS treats primitive values as objects when executing methods of JS String.

  • JS String charAt(index) Method: Returns the character at the given index.

Example:

<script>

var string=”helloworld”;

document.write(string.char(5));

</script>

Output: o

  • JS String concat(str) Method: It joins two strings.

Example:

<script>

var string1=”Hello”;

var string2=”world”;

var string3=string1.concat(string2);

document.write(string3);

</script>

Output: ‘Hello world’

  • JS String indexOf(str)Method: It Returns index values of given strings

Example:

<script>

var string=”hello world is my first printing string”;

var s1=string.indexOf(“world”);

document.write(s1);

</script>

Output: 6

  • JS String lastIndexOf(str)Method: It returns the last index position of the string.

Example:

<script>

var string=”hello world index”;

var s1=string.lastIndexOf(“world”);

document.write(s1);

</script>

Output: 11

  • JS String toLowerCase()Method: It returns a string in lowercase.

Example:

<script>

var string=”HELLO WORLD INDEX”;

var s1=string.toLowerCase();

document.write(s1);

</script>

Output: hello world index

  • JS String to LowerCase() Method: It returns a string in uppercase.

Example:

<script>

var string=”hello world index”;

var s1=string.toUpperCase();

document.write(s1);

</script>

Output: HELLO WORLD INDEX

  • JS String slice (beginIndex, endIndex) Method: It extracts a part of the given string from the starting index to the last index.

The starting index is inclusive, and the end index is exclusive.

Example:

<script>

var string=”helloworldindex”;

var s1=string.slice(5,8);

document.write(s1);

</script>

Output: two   // 8th position is exclusive

  • JS String trim() Method: It removes the trailing and leading black spaces from both sides of the string.

Example:

<script>

var string=”      helloworldindex     ”;

var s1=string.trim();

document.write(s1);

</script>

Output: ‘helloworldindex’

  • JS String split() Method: It splits the string with blank spaces.

Example:

<script>

var string=”helloworldindex”;

document.write(string.split(“ ”));

</script>

Output: hello world index

6. JS(JavaScript) Numbers

It returns a numerical value, which can be decimal or without the decimal, may be an integer or floating-point.

Example 1 :

// Creating Number object in JS

var s1= new Number(value);

Example 2:

var a=12; //Integer Value

var a=12.456; // floating point

var c=1e12; // Exponent Value

var d=new Number(10); // integer value using Number object

Output: 12 12.456,1000000000000,10

7. Arithmetic Operators

It operates on two numbers, which can be literals, variables, or expressions.

E.g, +,-,*,/,**(exponentiation),%(modulus),++(increment),--(decrement).

Example:

Let a =10+12; //literal

Let c= a+b; //variables

Let c=(a+b)*10; // Expression

  • Increment operator: It increments the number by 1. For example,

<script>

let x = 21;

x++;

let z = x;

document.getElementById("demo").innerHTML = z;

</script>

//the output will be 22

  • Decrement operator: It decrements number by 1. For example,

<script>

let x = 21;

x++;

let z = x;

document.getElementById("demo").innerHTML = z;

</script>

//the output will be 20

8.JS Assignment Operators:  It assigns the value to a JavaScript variable.

Example :

=,+=,-=,*=,/=,%=,<<=,>>=,>>>=,&=,^=,|=,**=.

The assignment operator(=): It assigns values to variables.

Example: let a=10;

How to write numbers in JavaScript?

JavaScript Number Objects

The JavaScript number is used to represent numeric values. The value can be an integer or a floating point. JavaScript follows IEEE standards to represent floating-point numbers. 

You can create a number object using the Number () constructor. Here is an example, 

var n = new Number(value);

To check if the value is a number, you can use the function NaN(). If the value cannot be converted into a number, the above command returns NaN, i.e., not a number.

To assign a number to a variable, you can follow, 

var a = 7; //integer value

var b = 34.7;//floating point value

var c = 7e4;//exponent value, it returns 70000

var x = new Number(16) ;//integer value by number object

The output of the above commands is as follows:

7  34.7  7000  16

JavaScript Number Constants

Following is the list of JavaScript Number Constants:

MIN_VALUE: It returns the minimum value. 

MAX_VALUE: It returns the largest value. 

POSITIVE_INFINITY: It returns positive infinity, which is an overflow value. 

NEGATIVE_INFINITY: It returns negative infinity, which is an overflow value. 

NaN: it represents “not a number”. 

JavaScript Number functions:

isInteger(): it checks whether the given value is an integer. 

isFinite(): it checks if the given value is a finite number. 

parseInt(): it converts the string passed in the function into an integer number. 

parseFloat(): it converts the string passed in the function into a floating-point number. 

toString(): it returns the given number in the form of a string. 

toPrecision(): it returns the string representing several specified precision. 

toFixed(): it returns a string which is a number with exact digits after a decimal point. 

toExponential(): it returns a string representing an exponential notation of the given number. 

How to write strings in JavaScript?