Introduction to JavaScript

6 min readFeb 15, 2021

What is JavaScript?

JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user, simply say that JavaScript is a tool for developers to add interactivity to websites.

Why we use JavaScript?

JavaScript is an event-based programming language.JavaScript adds interactivity and makes it a dynamic application that means where content is change with some kind of interaction.JavaScript adds behavior to web pages.

What are the things it can do?

JavaScript is mainly used for web-based applications and web browsers.

In the starting JavaScript, use to run only in the browser so we can only use JavaScript to program a website but with the introduction of node JS, we can also write JavaScript for the server.

Here are some basic things we can do with JavaScript :

1- Desktop application using JavaScript, HTML,and CSS

2-Create Native apps for android and IOS using React

3- Adding interactive behavior to web pages -

4-Create animated videos like movies

example — 1-oatthegoat.co.nz

2- http://bruno-simon.com

JavaScript allows users to interact with web pages.

Show or hide more information with the click of a button
Change the color of a button when the mouse hovers over it
Slide through a carousel of images on the homepage
Zooming in or zooming out on an image
Displaying a timer or count-down on a website
Playing audio and video on a web page
Displaying animations
Using a drop-down hamburger menu

Benefits of learning JavaScript:

1- Web Development -

2-Desktop App Development

3-Mobile app Development

Implementation of JavaScript

2 ways to implement JavaScript code

. Inpage / Internal JavaScript —

we can either include the JavaScript code internally within our HTML document itself

<!DOCTYPE html>

<head>

<title>Phone Purchase</title>

</head>

<body>

</body>

</html>

.External JavaScript —

we can keep the JavaScript code in a separate external file and then point to that file from our HTML document.

<!DOCTYPE html>

<head>

<title>Phone Purchase</title>

</head>

<body>

</body>

</html>

comments in JavaScript

Types of JavaScript Comments

There are two types of comments in JavaScript.

Single-line Comment -

It is represented by double forward slashes (//). It can be used before and after the statement.

example :

// It is a single-line comment

2-Multi-line Comment

It can be used to add single as well as multi-line comments. So, it is more convenient.

It is represented by a forwarding slash with an asterisk then an asterisk with forwarding slash. For example:

/* your code here

It will not be displayed */

Data Types in JavaScript :

Types of values are called Datatypes.

There are two types of data types in JavaScript.

Primitive / Values data type
Non-primitive / reference data type

1- primitive / values data types

Data types that are known as primitive values in JavaScript & primitive are copied by their values. and values is a building block of a program

Numbers, Strings, Booleans, Null, Undefined, and Symbol

How do we check the type of value?

To check that value we use typeof operator’s

Typeof operator —

Type of operator accept a value and tell us the typeof that value.typeofreturns a string indicating the data typetypeof 3; // "number"

example —

>typeof 21;

<” Number”

>typeof 23.25;

<” Number”

we can see both the values are of type number.

1-Number — Any numeric value integers or decimal is considered to be a number type in JavaScript.

Some operations we can perform a number

To change the number value we can use operations

What is an Operator?

In JavaScript, an operator is a special symbol used to perform operations on operands (values and variables). For example,

2 + 3; // 5

Here + is an operator that performs addition, and 2 and 3 are operands.

The + operator is used to adding two operands.

1-Addition(+) — 22+10; //32

2-Subtraction(-) — 22–10; //12

3-multiplication(*) — 22*10; //220

4-division(/) — 22/10; //2.2

There are some special number :-

1- NaN- NaN stand for not a number

NaN is sticky. Any further operation on NaN returns NaN:

2- Infinity — -Infinity will return NAN.

both these values are number types.

2- String —

string can be character words or paragraphs or visually any value that is enclosed in ‘ single qoute’, ”Double qoute” or `backtics`.

In JavaScript, there are 3 types of quotes.

Double quotes: "Hello".
Single quotes: 'Hello'.
Backticks: `Hello`.

The start and end quotation mark of the string should be the same.

This is a valid string.

"Hello".
'Hello'.
`Hello`.

THis is invalid string

"Hello’.
'Hello”.
`Hello’.

Joining two string using plus (+) operator

example :

1 - >“Hello” + “World”

output->“HelloWorld”

if we want to add space in between we can use multiple plus within space in middle.

2 →“Hello” + “ ” + “World”

output- > “Hello World”

3-Booleans —

The boolean type has only two values: true and false.

These are classified as boolean type values. This type is commonly used to store yes/no values: true means “yes, correct”, and false means “no, incorrect”.

4- Null →

The Null type has exactly one value: null.

5-Undefined →

The special value undefined also stands apart. It makes a type of its own, just like null.

The meaning of undefined is “value is not assigned” .a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned.

Two special values undefined and null these values are also known as empty values. these are used to show the absence of any meaningful data there is no fundamental difference between undefined and null.

These all Numbers, Strings, Booleans, Null, Undefined, and Symbol

are called primitive types. these types can only contain one value, they can’t contain a collection of values.

The non-primitive data types:-

it can contain multiple values.

Object — An object contains a collection of keys and values in pairs.for multiple values we use objects.

# JavaScript Variable

A JavaScript variable is a container for storing data value.

To create a variable in JavaScript, use the let keyword.

example:-

let x=5;

let y =10;

let z = 11;

x,y,z are variable, declared with let keyword, where x store the value 5

y store the value 10 and z store the value of 11.

There are two types of variables in JavaScript: local variable and global variable.

Some rules while declaring a JavaScript variable also known as identifiers.

Variable naming rules:-

There are limitations on variable names in JavaScript:

The name must contain only letters, digits, or the symbols $ and _.
The first character must not be a digit. A variable name cannot start with a number.
JavaScript is a case-sensitive language so a variable that has lower case hello not the same as uppercase Hello.
We cannot include any special Character other than the $ symbol and _.
We should use camelCase for the variable name. we should Use human-readable names like userName or shoppingCart.
We should write a Descriptive variable name the variable name should able to describe the value it holds. It tells about what the value, the variable is holding. A variable name should have a clean, obvious meaning, describing the data that it stores.
If a site visitor is called a “user” then we should name related variables currentUser or newUser instead of currentVisitor or newManInTown.

Examples of valid names:

let userName;
let test123;

Example of invalid variable name

1-let 123Test;

2-let my-name;

3-let !name;

String Template Litral/Template literal ( ` ` ).

Backtics are known as String literal. Template literals are enclosed by the backtick (` `) character instead of double or single quotes.

Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between the backticks (` `) get passed to a function.

Backticks, allow us to embed any expression into the string, by wrapping it in ${…}

Syntax

`string text`

Benefits of using String

1-We don’t have to use commas.

2-We don’t have to use String Concatenation of “+”.

We will continue learning more about JavaScript in another article.

Thanks for reading.