Javascript — Basics

Jadu Fellowship Week 6

Introduction to Javascript:

Javascript (“JS” for short) is a scripting language, commonly used to create interactive effects within web browsers. It was originally developed by Netscape as a means to add dynamic and interactive elements to websites. JS is used on both the client-side and the server-side to make our web pages effective and interactive. Where HTML and CSS are the structure and style of a web page, then Javascript is the logic that creates a dynamic and interactive experience for the user.

Javascript is basically a very versatile and beginner-friendly language. With more practice and experience, you will soon be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!

— You can add Javascript to HTML by following methods:

  1. Javascript in <head>
  2. Javascript in <body>
  3. External Javascript

JS bin compiler is best for online practice. Follow the below link and start practicing Javascript!!

Javascript in <head>:

In this type, Javascript is added in the head of the HTML file.

The function moreInfo() is called when a button is clicked.

Output before clicking the More Info button:

Output after clicking More Info Button: The selected paragraph is added to the introduction page after using Javascript.

Javascript in <body>:

In this type, Javascript is added in the body of the HTML file.

Output before clicking the More Info button:

Output after clicking the More Info button:

External Javascript:

In this type, we create an external javascript file (.js extension ) and link it with the HTML document in the <head> using the following line of code. In the src attribute, we will write our .js file name.

<script src=””></script>

Output before clicking the More Info button:

Output after clicking the More Info button:

Javascript Basics:

Firstly, install nodejs in your system by using the below link.

In Javascript, the console.log() function is used to print any kind of defined variables or message that needs to be displayed to the user.

run this command in terminal

Variables — A variable is a container for a value, that we might use in a sentence or in the calculation. We define variables by using 3 keywords

  1. var → var keyword was the only way to declare a JavaScript variable, before 2015.
  2. let → let keyword be used to define variables with restricted scope.
  3. const → const keyword define variables that cannot be reassigned.

Datatypes — Javascript mainly has 2 datatypes

  1. Primitive datatypes → number, string, boolean
  2. Non-primitive datatypes → object, array, function

Number: Number is a primitive datatype. In Javascript, every number whether it’s an integer or float is considered a number datatype. The typeof function shows the datatype of the variable.

String: String is primitive datatype. It is a set of characters that can also contain spaces and numbers. In Javascript, we can initialize string in 3 ways

  1. Single quoted string → we use single quotation marks for string initialization.
  2. Double quoted string → we use double quotation marks for string initialization.
  3. Template Literals → Template literals are enclosed by the backtick (` `). These are indicated by the dollar sign and curly braces (${expression}).

Boolean: It is a primitive datatype. Boolean datatype is a type that has a true or a false value.

Object: An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a variable or function known as methods. Curly brackets {} are used for containing object items.

Array: Array is basically a container that contains multiple items, items can be of the same datatype or different datatype. In Javascript, we can list different datatype variables into one array. An array is a non-primitive datatype and any non-primitive datatype is an object. Square brackets [] are used for containing array items.

You can find the practice.js code from the below link:

My Web Development Journey

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store