Technology Works

Thursday, September 13, 2018

JavaScript - Document Object Model - Window object

let a = window.innerWidth;
console.log(a);

Since, we are in the widow is the global object. That is why we can just use it as:
console.log(innerWidth);

If we want to actually, see the width of the window, check the outerWidth variable
console.log(outerWidth);

To check the height of the window:
console.log(innerHeight);
console.log(outerHeight);

To know all the available properties on the window object:
console.log(window);

The window object is a really complex object - giving access to high level features here. The methods: setTimeout and setInterval are also the methods available on the window object.

localStorage: It is a built in storage which will save certain values in the browser - as long as the application is running here. We can use the setItem method on the localStorage:

localStorage.setItem('key1',55);

Now, we can get the value stored against the key using the getItem method.
console.log(localStorage.getItem('key1'));

sessionStorage: We also have sessionStorage, which is similar to localStorage:

sessionStorage.setItem('key1',55);
console.log(sessionStorage.getItem('key1'));

The difference is the localStorage will persist. But the sessionStorage will be deleted or emptied when the user closes the tab or the browser.

location: The window object also has the location you are currently at:
console.log(window.location);

document: The window object also has access to the document or the DOM:
console.log(window.document); // the dom

open: This will open the URL in a separate tab:
window.open("http://www.google.com");

The goal is not to learn all. But, to know how to find and use these objects. The global scope we are referring to the window object. So, the global scope is the window object. Therefore, we do not need to use window.anything... we can use
window.open("http://www.google.com");

as

open("http://www.google.com");

Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Practice at:
http://jsbin.com/?js,console

JavaScript - Built in Feature - Regular Expressions

Regular Expressions are patterns used to match character combination in strings. Below are some examples:

var myString = "a quick brown fox jumped over the lazy dog";
console.log(myString);

var myPattern = /fox/;
console.log(myPattern);

console.log(myPattern.exec(myString));
console.log(myPattern.test(myString));
console.log(myString.match(myPattern));
console.log(myString.search(myPattern));

Console Output:

"a quick brown fox jumped over the lazy dog"
[object RegExp] { ... }
["fox"]
true
["fox"]
14

Regular expressions are a science of their own. There are a lot of special characters you can use to build complex queries.

Consider the following stackoverflow question:
https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript

Without regular expressions, you would have to loop through each character in the string to search for patterns. Using pattern matching with regular expressions makes this problem simple. The pattern does look difficult. But, we can google for help. Also, we we know it, then the difficulty reduces. It is quick as it offers a great performance and it is a one liner. You do not have to write multiple nested loops to acheive the same with slower performance.

The 3 important methods in Regular expressions:

exec
test
match

Refer:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Practice at:

http://jsbin.com

JavaScript - Built in Functions - Date Object

Date object is another important built in Object in JavaScript. Check out the following examples:

var currDate = new Date();
console.log(currDate.toString());

var specificDate = new Date(2018,14,1);
console.log(specificDate.toString());

var specificDate = new Date('2018/10/1');
console.log(specificDate.toString());

console.log(Date.parse('2018/10/1'));
console.log(currDate.getDate());
console.log(currDate.getDay());

Console Output:

"Thu Sep 13 2018 06:20:34 GMT+0530 (India Standard Time)"
"Fri Mar 01 2019 00:00:00 GMT+0530 (India Standard Time)"
"Mon Oct 01 2018 00:00:00 GMT+0530 (India Standard Time)"
1538332200000
13
4

Practice at:

http://jsbin.com

Refer:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Wednesday, September 12, 2018

JavaScript - Built in Functions - Math Object

In JavaScript, we may use some built in objects. One amongst them is the Math object.
Some useful examples using Math object:

var myPI = Math.PI;
console.log(myPI);

var myE = Math.E;
console.log(myE)

var a = -5.5648;
console.log(Math.abs(a))
console.log(Math.ceil(a))
console.log(Math.floor(a))
console.log(Math.exp(10)); // e to the power of 10
console.log(Math.log(10)); // log of 10 to the base e
console.log(Math.max(10,20,30,40,50,60,70,80,90,100));
console.log(Math.min(10,20,30,40,50,60,70,80,90,100));
console.log(Math.random()); // Generates a random number between 0 and 1
console.log(Math.random()*100); // To get a random number between 0 and 100
console.log(Math.floor(Math.random()*100 + 1)); // To get a random integer between 1 and 100

Console Output:

3.141592653589793
2.718281828459045
5.5648
-5
-6
22026.465794806718
2.302585092994046
100
10
0.1347258816281942
45.48059516716245
90

Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

Practice at:
http://jsbin.com

JavaScript - Built in Functions - String Functions

In JavaScript, a string is treated as an array. The following are some commonly used string functions:

var myString = " a quick brown fox ";
console.log(myString);
console.log(myString.length);
console.log(myString[12]);
console.log(myString.charAt(12));
console.log(myString.concat("jumped over the lazy dog"));
console.log(myString.concat("jumped over the lazy dog").toUpperCase());
console.log(myString.concat("jumped over the lazy dog").toLowerCase());
console.log(myString.concat("jumped over the lazy dog").split(" "));
console.log(myString.trim());
console.log(myString.slice(4,12));

Console Output:

" a quick brown fox "
21
"o"
"o"
" a quick brown fox jumped over the lazy dog"
" A QUICK BROWN FOX JUMPED OVER THE LAZY DOG"
" a quick brown fox jumped over the lazy dog"
["", "", "a", "quick", "brown", "fox", "", "jumped", "over", "the", "lazy", "dog"]
"a quick brown fox"
"quick br"

Practice at:

http://jsbin.com

Refer:

JavaScript - Built in Functions - parseInt - toString - toFixed

Built In Methods covered:

parseInt()
toString()
toFixed()

There are some other useful built in functions which allow you to transform values. Consider the following code snippet:

var myNum = "25";
console.log(myNum+" is a "+typeof(myNum));

Console Output:
"25 is a string"

Now, we can use the parseInt method - which is available on the window object. That is, parseInt is available on the Global Scope.

var myNum = "25";
console.log(parseInt(myNum)+" is a "+typeof(parseInt(myNum)));

Console Output:
"25 is a number"

Now, let me try with a string which is not a number:

var myNum = "fdfdf";
console.log(parseInt(myNum)+" is a "+typeof(parseInt(myNum)));

Console Output:
"NaN is a number"

parseInt takes another argument optionally. Here I can specify the base digits of system I am operating. The default is the decimal system, But, I can change it to hexadecimal system. For example:

var myNum = "fbb23";
console.log(parseInt(myNum,16)+" is a "+typeof(parseInt(myNum)));

And, now if I hit run:

"1030947 is a number"

JavaScript has transformed from Hexadecimal system to Decimal System.

var myNum = 123;
var myNumStr = myNum.toString();
console.log(myNum+ " is now a "+typeof(myNumStr));

Console Output:
"123 is now a string"

toString is a method defined on the Object.prototype. This is the base prototype of all the objects. Therefore every object has by default has this toString() method. We can apply this on any object in JavaScript.

var myNum = 10.3;
var myNumFixed = myNum.toFixed();
console.log(myNumFixed+ " is now a "+typeof(myNumFixed));

Console Output:
"10 is now a string"

We can also specify the number of decimal places

var myNum = 3.1425;
var myNumFixed = myNum.toFixed(2);
console.log(myNumFixed+ " is now a "+typeof(myNumFixed));

Console Output:
"3.14 is now a string"

These are some basic built in parsers - used for transforming values.

Practice at:
http://jsbin.com

Tuesday, September 11, 2018

JavaScript - Built in Functions - setTimeout and setInterval

There are two very import built-in functions in JavaScript. This registered in window object.

setTimeout
setInterval

setTimeout: This function accepts two arguments.

Function , named or closures (anonymous functions)
Time period in milliseconds, this setTimeout must wait before executing the function.

Example:

setTimeout(function(){console.log("Here I am");},2000);

setInterval: Another important function is the setInterval function which can be used to call periodically a function.

We can use setInterval in combination with setTimeout to create really interesting stuffs. Below is one example.

var interval = setInterval(function(){console.log("Inside setInterval");},200);

setTimeout(function(){clearInterval(interval);},1000)

Refer:
https://alligator.io/js/settimeout-setinterval/

Practice at:
http://jsbin.com