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!!

http://jsbin.com

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.

https://nodejs.org/en/download/

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:

https://github.com/toubaijaz19/javascriptBasicsPractice

My Full Stack 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