Intro to JavaScript

Hello guys,

Welcome to my day to day blogging about my learnings. We are going to get started with most Popular language JavaScript.

What is JavaScript?

It's a programming language which makes the web pages interactive.

What is the interaction with Web page?

In the above gif it shows when we click the button it transforms and shows 'success'. Thats interaction. JavaScript talks to us. It is the widely used scripting language for making webpages.

Now-a-days JavaScript can be run on any device not only on web with the help of Engines which supports JavaScript.

Most of the browsers have JavaScript and activated by default. Different browsers have different engines installed in them lets say Chrome has V8 engine, Safari has JavaScript core etc.

JavaScript has completed integration with html & CSS so its easy to build web pages with it. Moreover Js have huge community support and very popular libraries for both front-end and back-end. With Js alone we can build fullstack web application using Js libraries.

• React is used as most popular front-end library.
• ReactNative is used to build mobile applications.
• Node is used to build server side APIs.
• Electron is used as desktop applications.

As we are going to learn the Vanilla JavaScript which is used in client side for interaction. We will learn about dev tools in browser.

Developer Tools

These tools helps us debug the JavaScript code.

What is debugging?

When your code doesnt run in expected way. We can track where its gone wrong. It can be done easily by dev tools.

Most of the browsers have the support for dev tools. Chrome, edge, Brave, safari. Dev use the chrome browser for debugging as it has the best dev tools. You can access the dev tools in chrome either by right click and click Inspect or by shortcut

ctrl+shift+I

How to add JS code in html?

• We use <script> tage to add JavaScript. It can be inline or external by using src attribute in <script>tag.
• With src we can add external Js file to html by adding its relative or absolute path.
• If we add src path to <script> tag the inline Js is ignored

Structure

• It is the syntax of the language. How it looks , Semicolons , paranthesis, braces etc.
• It is not necessary to have semicolons for every statement in JavaScript but its a good practice to do so.

console.log("Hello");
console.log("World");

Variables

• Variables are container to store data.
• We can declare the variables with the keyword let, const, (var which is old version) with a variable name.
• In let the variable can be changed after assignment but in const once its assigned it cannot be changed

let myNum=1;
myNum=2; //variable changes from 1 to 2
const pi=3.25;
pi=2/26; // throws error

DataTypes

Data types are the type of data we use in our programs example : integer, decimal, string etc JavScript is dynamically typed which means if we assign a integer to varaible which was already stored with float value , It will get assigned with no errors.

let value=2;
value=1.77; // no error

Different types of datatypes : Number, BigInt, String, Boolean, Null, Undefined, Symbol, Object -> Non Primitive data type

Typeof is used to know the type of data type

let a=1;
typeof a;// outputs integer

Alert, Prompt,Confirm

Alert

To show the message in alert window

alert("hello world");

Prompt

To get input from new window

Prompt("Enter your age?");

It also takes one more argument but that is optional.

Confirm

confirm("Are you sure");

It just asks for confirmation to move forward or cancel.

Type Conversion

• Data type conversion can be done explicity even though sometimes its done automatically.
• To make it convert explicity we use below functions.
• In math operations string are automatically converted into numbers

let a=1;
a= String(a);// a is converted to string
typeof a ; // returns 'String'
Number(a);// changes to number
Boolean(a); // changes to true or false

Operators

Below are the math operators used in JavaScript

+ - addition,
 - - Subtraction ,
 * - Multiplication ,
 / - Division,
 % - Remainder,
 ** - Exponential.

With + we can even concatenate strings.

We also have Unary operator which has only one operand.

++var , var++ pre and post increment
--var, var-- pre and post decreament

Pre and post increment does same thing but in different order In pre increment the addition is done first and value is returned afterwards

It can be seen when we assign it only.

Comparisons

As in mathematics we have all the comparison operators.

<,>,<=,>=,==,===,!=

We can assign the results of comparisons to bool.

Conditionals

if ( condition)
    statement to run if the condition is true
else 
   statement to run if the condition is false

Conditional operator '?'

The same can be written in another form which easy and concise.

(condition) ? statement if true : statement if false ;

...To be continued