# 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](https://javascript.info/).


**What is JavaScript?**

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

**What is the interaction with Web page?**

![Gif description](https://i0.wp.com/codemyui.com/wp-content/uploads/2016/08/build-in-loading-submit-button.gif?fit=880%2C440&ssl=1)

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](https://reactjs.org/)  is used as most popular front-end library. 
- [ReactNative](https://reactnative.dev/) is used to build mobile applications. 
- [Node](https://nodejs.org/en/) is used to build server side APIs. 
- [Electron](https://www.electronjs.org/) 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
*