Learn JS

What is JS ?

A programming language that is used to make web pages interactive.
Interpreted language.
Runs on the client's computer/browser.

Why JS?

Game Development.
Server Application.
Web Application.
Native Mobile Application.
Desktop Application.
Typescript.
Frameworks before core javascript???

Little more about JS.

Dynamically Typed Language.
Case sensitive.
Whitespace are ignored.
Variables much not be a keyword.

How JS works

Syntax parser

Your code => Compiler => Run at your computer
Reads each characters one by one.
Js object are name value paired.
Execution context

Creation phase
Execution code

How JS works

Single Threaded
Synchronous.
Invocation

Basics

Declarations

-var

-let

-const

Declaring variables.

var firstName = 'JS';

Variable Hoisting.
Function Hoisting.
Declaring const.
```
const PIE = 3.14;
```

Data Types

Boolean.

var isReadable = true;

null

var fruits = null;

undefined

var firstName;

Never initialize you variable to undefined use null instead.

Number

var firstIndex = 0;

String

var firstName = 'I love JS';

Object

var myCar = {};

How to know data types ??

typeof myCar;

"1" to 1

parseInt()
parseFloat()
+"1"

// Example:
let myNumber = '30.22';

parseInt(myNumber);
parseFloat(myNumber);
+myNumber;

Conditional Statement

1. if ... else statement.

Syntax:

if(condition) {
    // do something
} else if(second condition) {
    // do something else
} else {
    // if none condition match, do this
}

Example:

var dollarPrice = 100;

if (dollarPrice <== 90) {
    alert('Currently dollar price is low');
} else (dollarPrice > 90 || dollarPrice <== 140) {
    alert('Current price of dollar is average')
} else {
    alert('Current price of dollar is high')
}

2. switch statement

Syntax:

switch (condition) {
  case label:
    // do something
    break;
  case label_2:
    // do something else
    break;
  default:
    // do if other doesnt do
    break;
}

Falsy Value

1. fasle
2. undefined
3. null
4. ''
5. 0
6. NaN

Loops and iteration

1. For statement

Syntax

for(statement1, statement2, statement3) { // code to be executed }

Example

for (let i = 0; i < 10; i++) {
  console.log('index', i);
}

2. do..while and while statement

Syntax

while (condition) {
  // code to be executed
}

Example

while (i < 10) {
  console.log('index', i);
  i++;
}

Syntax

do {
  // code to be executed
} while (condition);

Example

do {
  console.log('index', i);
  i++;
} while (i < 10);

4. for...in statement

Syntax

for item in collection {
    // code to be executed
}

Example

let fruits = ['apple', 'banana', 'cherry'];

for (fruit in fruits) {
  console.log(fruits[fruit]);
  // code to be executed
}

Functions

Syntax

function functionName(parameter1, parameter2) {
  // code to be executed
  return value;
}

Example

var result = getFirstName('Hari prasad');

function getFirstName(firstName) {
  return 'Mr.' + firstName;
}

OR

const getFirstName = function(firstName) {
  return 'Mr.' + firstName;
};

Array

Collection of same data type.

concat()

Joins two array.

Syntax:

var result = Array.concat(value1[, value2[, ...[, valueN]]])

Example

let fruits = ['apple'];
let additionalFruits = ['banana', 'cherry'];
let myFruits = fruits.concat(additionalFruits);

map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Syntax:

Array.map(function(item, index) {
  return item;
});

Example

// Multiple each number in array by 5.
var myNumbers = [1, 2, 3, 4];

var result = myNumbers.map(function(item, index) {
  return item * 5;
});

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Syntax:

Array.filter(function(item, index) {
  return condition;
});

Example

// Multiple each number in array by 5.
var myNumbers = [1, 2, 3, 4];

var result = myNumbers.filter(function(item, index) {
  return item % 2 === 0;
});

map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Syntax:

Array.map(function(item, index) {
  return item;
});

Example

// Multiple each number in array by 5.
var myNumbers = [1, 2, 3, 4];

var result = myNumbers.map(function(item, index) {
  return item * 5;
});

reduce()

The reduce() method executes a provided function for each value of the array (from left-to-right).

Syntax:

Array.reduce(function(total, currentValue, currentIndex), initialValue) {
  return item;
});

Example

var myNumbers = [1, 2, 3, 4];

var result = myNumbers.reduce(function(total, item) {
  return total + item;
});

includes()

The includes() method determines whether an array contains a specified element

Syntax:

Array.includes(value);

Example

var myNumbers = [1, 2, 3, 4];

var result = myNumbers.includes(5);

push()

The push() method adds new elements to the end of an array, and returns the new length

Syntax:

Array.push(value);

Example

var myNumbers = [1, 2, 3, 4];

myNumbers.push(5)

pop()

The pop() method removes the last element of an array, and returns that element

Syntax:

Array.pop();

Example

var myNumbers = [1, 2, 3, 4];

myNumbers.pop()

sort()

The sort() method sorts the elements of an array

Syntax:

Array.sort();

Example

// Multiple each number in array by 5.
var myNumbers = [5, 1, 2, 3, 4];

var result = myNumbers.sort();
var result = myNumbers.reverse();

Object

A JavaScript object is a collection of named values. Object can have properties and methods.

Example:

var phone = {
  modelNo: '1600',
  brand: 'Nokai',
  color: 'white',
  getInfo: function() {
    return 'Your mobile is' + this.brand + 'of' + this.modelNo;
  }
};

Here, modelNo, brand and color are properties of phone.

getInfo is a method.

this refers to the owner of the funtion. Here this is a phone object that owns getInfo function.

Creating our first object.

Syntax:

var myObject = {};
var myObject = new Object();
var myObject = { key: value };

Accessing Object Properties

Syntax:

object.propertyName

Example:

var phone = {
  modelNo: '1600',
  brand: 'Nokai',
  color: 'white'
};

var myPhone = phone.brand;

Mutable vs Imutable

Javscript array and object are mutable, means any change to a copy of an object will also change the original.

var yesterdayCollection = 100;
var todayCollection = yesterdayCollection;
todayCollection = 200;

var yesterdayCollectionObj = {
  amount: 100
}

var todayCollectionObj = yersterdayCollection;
todayCollection = {
  amount: 200;
}

Result:

console.log(yesterdayCollection) //100

console.log(todayCollection) //200

console.log(yesterdayCollectionObje) //obj.amount = 200

console.log(todayCollectionObje) //obj.amount = 200

HTML with JS

DOM stands for Document Object Model.

Docuement is everthing that is inside the html page. Object are the HTML elements and model is relationship between each nodes, elements and attributes.

The DOM allows us to use our javascript code to access parts of the web page.

Accessing DOM

getElementById
getElementByTagName
getElementByClassName
querySelector

Example

<div id='firstName'>Im JS</div>

<input type='radio' name='gender' value='male' checked>Male</radio>

<input type='radio' name='gender' value='female'>Femaile</radio>

var myElement = document.getElementById('firstName');

var allDivElement = document.getElementByTagName('div');

var gender = document.querySelector('input[name=gender]:checked');

Changing Elements and values using js.

var myElement = document.getElementById('firstName');

console.log(myElement.innerHTML); // i'm JS
console.log((myElement.style.color = 'red'));

Accessing DOM with relation

Example

<div>
  <input type="text" id='firstName' name="firstName" placeholder="Enter you firstname*" required />

  <div class='error_name'> Name cannot be empty</div>
</div>

Getting previous element value.

document.getElementByClassName('error_name')[0].previousElementSibling.attributes['name'].value;

Getting next element value.

document.getElementById('firstName').nextElementSibling.innerHTML = 'Changed sibling text';

Separation of Concerns

It is also good idea to have your HTML code looks like HTML and js code looks like JS code. We should not try to mix match them.

What is this? JS code or HTML code?

<JS/>

Here in this element, we used javascript function inside the element. This is mixture of HTML and JS.

<button id='btn' onclick='function()'>Click Me</button>

Instead of this, we can write

my.html

<button id='btn'>Click Me</button>

my.js

var btn = document.getElementById('btn');

function onSubmit() {
  console.log('you clicked');
}
btn.onclick = onSubmit;
OR;
btn.addEventListener('click', onSubmit);

JS utils

Date()

The Date() method returns current date

Example:

var todayDate = new Date(); //Sat Sep 22 201411:49:05
todayDate.getDay(); //6
todayDate.Date(); // 22
todayDate.getFullYear(); // 2014
todayDate.toLocaleTime(); // "11:48:49 AM"
todayDate.toLocaleDate(); // 9/22/2014

setTimeOut()

The setTimeOut() method calls a function or evaluates an expression after a specified number of milliseconds.

Syntax:

setTimeout(function, milliseconds, param1, param2, ...)

Example:

setTimeout(
  function(name) {
    alert(name + '10 sec is up');
  },
  10000,
  'ram'
);

setInterval()

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

Syntax:

setInterval(function, milliseconds, param1, param2, ...)

Example:

// Get live time.

setInterval(function() {
  document.body.innerHTML = new Date().toLocaleTimeString();
}, 1000);

clearInterval()

The clearInterval() method clears a timer set with the setInterval() method.

Syntax:

clearInterval(setIntervalValue)

Example:

// Get live time.
var currentTime = setInterval(function() {
  document.body.innerHTML = new Date().toLocaleTimeString();
}, 1000);

clearInterval(currentTime);

JSON.stringify()

You can easily convert number to string with .toString() method. But inorder to convert object into string, you need JSON.stringify()

Syntax

var myResult = {
  math: 100,
  science: 100
}

JSON.stringify(myResult) // "{"math":100,"science":100}"

window

The window object is supported by all browsers. It represents the browser's window.

Window Object Properties

innerHeight: Returns the height of the window's content area (viewport) including scrollbars
innerWidth: Returns the width of a window's content area (viewport) including scrollbars
location: Returns the Location object for the window.
localStorage: Allows to save key/value pairs in a web browser. Stores the data with no expiration date

Window Object Method.

alert(): Displays an alert box with a message and an OK button.
close(): Closes the current window.
blur(): Removes focus from the current window.

Syntax:

// Get url info

window.location;
window.location.host;
window.location.href;
window.location.pathname;

// Get/Set localstorage
window.localStorage;
window.localStorage.setItem(name,'Im jS');
window.localStorage.getItem(name);

// get alert
window.alert('You are alret')

Math

The Math object allows you to perform mathematical tasks.

Syntax:

var x = Math.PI;            // Returns PI
var y = Math.sqrt(16);      // Returns the square root of 16
var z = Math.pow(5,2);      // 25
var a = Math.round(4.7);    // 5
var rand = Math.random();   // 0.555

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
README.md		README.md

badyakarprabin/I-m-JS

Folders and files

Latest commit

History

Repository files navigation

Learn JS

What is JS ?

Why JS?

Little more about JS.

How JS works

How JS works

Basics

Data Types

"1" to 1

Conditional Statement

1. if ... else statement.

Syntax:

Example:

2. switch statement

Syntax:

Falsy Value

Loops and iteration

1. For statement

Syntax

Example

2. do..while and while statement

Syntax

Example

Syntax

Example

4. for...in statement

Syntax

Example

Functions

Syntax

Example

Array

concat()

Syntax:

Example

map()

Syntax:

Example

filter()

Syntax:

Example

map()

Syntax:

Example

reduce()

Syntax:

Example

includes()

Syntax:

Example

push()

Syntax:

Example

pop()

Syntax:

Example

sort()

Syntax:

Example

Object

Example:

Creating our first object.

Syntax:

Accessing Object Properties

Mutable vs Imutable

Result:

HTML with JS

DOM stands for Document Object Model.

Docuement is everthing that is inside the html page. Object are the HTML elements and model is relationship between each nodes, elements and attributes.

The DOM allows us to use our javascript code to access parts of the web page.

Accessing DOM

Example

Changing Elements and values using js.

Accessing DOM with relation

Example

Packages