Javascript basic fundamentals and type conversions

Javascript and HTML binding

To insert javascript in your html page which is very basic and easy javascript and their fundamentals

First, you create a HTML page index.html in your IDE( i.e webstrom, netbeans, Visual Studio etc..) .
In index.html page start with and write code in script tag .

<html> 
    <head> 
        <title> My first page</title> 
    </head> 
    <body>
        <h3>Javascript fundamentals</h3> 
    </body> 
<script>
     alert("This is test");
</script>
</html>

First you create a HTML page index.html in your IDE( i.e webstrom, netbeans, Visual Studio etc) .
Make a another page app.js and link with index.html

<html> 
    <head> 
        <title> My first page</title> 
    </head> 
    <body>
        <h3>Javascript fundamentals</h3> 
    </body> 
<script src="app.js"> </script>
</html>

In app.js write the javascript code

alert("This is test");

(Don't forget to save the code)

Working with Console

In Chrome or any other browser open the dev tool with F12

click the left mouse button go to the Inspect click on that and window will appear on the screen

In console you can execute the javascript code and there you can write code just to check whether your javascript is working properly or not.You can do pretty things of javascript in your console.Console is used for testing, debugging, and try things out

For javascript comments

Single line comments :- // is used for single line //

Multiple line comments :- /* This is used for a multiple lines using this you can comment multiplelines*/

To work with the console when you write anything in aap.js page you can see results in console .Suppose you write.

console.log("This is test");

you can see results in console same way, if you log number you can write in console output number is with blue and string is with black so don't worry about that.

console.log("52762");

Boolean :- To log boolean you can write the below code

console.log("true");

Variable :- To log variable or if you want to create variable you can use below code.

var test='This is variable test';
console.log('test');

Array :- You can also log array to log array you use [] because this bracket tell that number or string is in array format you can see the code below.

console.log([1,2,3,4,5,6]);

Object :- Objects are also used in javascript you can log objects for log objects you can see the below code.

console.log({a:1,b:2,c:3});

you can hit the button like array and in console you can see the output in more readable form. Other things you can do with object is that table. The table function is used to make the structure of the table and show output in table format you can use below code.

console.table({a:1,b:2,c:3});

Error :- Another function in javascript is error if you want to show error you can use error function .

console.error('This is some error');

and save this code you will notice that the output is in red color and this also shows that where is the error coming in application.

Clear :- This function is used to clear all the data of javascript.

console.clear();

Warn:- Warn function in javascript is used to show warning that something is going wrong, it does the same thing as error except it come in yellow color you can see the code below .

console.warn('This is a warning');

Time :- The other thing in javascript is timmer. This function tells the time of the code where to start and to the end. So if you want to know how long something take in your script then you can use console.time function.

console.time('Hello');
 console.log('Hello world');
 console.log('Hello world');
 console.log('Hello world');
 console.log('Hello world');
 console.log('Hello world');
console.timeEnd('Hello');

Type conversion in javascript

The conversion take the variable and change the data type there are different way to do conversion it is very easy by just creating a one variable

let val;
//number to string
val=3;
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

1. First thing in the output you will get 3 which is a value that's fine.
2. Second typeof val tells that this is a number .
3. Third is the length which is an undefined because you trying to get length from a number which doesn't work for get the length you have to convert a number in a string format.

Number to string

To convert number to string you use the string and define in a variable

let val;
//number to string
val=String(555);
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

1. First thing in output you will get 555 which is the value.
2. Second typeof val tells that this is, a string not a number because in code before number there you write String it means that number convert to a string.
3. Third is the length which is a 3 because you have written 5 in string 3 times so it gives a length as 3.

let val;
//number to string
val=String(555);
val=String(2+2);
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

Always remember when you keep using Val its going to overwrite one before. Another method to convert number to string in expression form is given above

Boolean to string

To convert boolean to string the code is given below

let val;
//boolean to string
val=String(true);
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

1. First thing in the output you will get True because boolean give result in true or false
2. Secondtypeof val tells that this is, a string not a number because boolean is a string .
3. Third is the length which is a 4 because you have written True in which 4 letters are there.

Date to string

In this conversion, you get the exact date and time of the code execution.To convert date to string the code is given below

let val;
//Date to string
val=String(new Date());
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

1. First thing in the output you will get the Val which is date at which time code is executed.
2. Secondtypeof val tells that this is, a string not a number because the date is in string format as in a given code above
3. Third is the length which is a 57.when you run the code you will get the date and time because it count everything as a character.

Array to string

As you know that array is an object and the string is the method to join that object.So to convert the array to string the code is given below.

let val;
//Array to string
val=String([1,2,3,4,5]);
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

1. First, you will get the val 1,2,3,4,5 as the value .
2. Secondtypeof val tells that this is, a string not a number because the array is in string form as in a given code
3. Third is the length which is a 9. when you run the code you will get 9 because it count each character including comma.

Apart from the above method you can use the tostring method .

let val;
//toString
val=5.toString();
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

In the above code you get 5 as a string and the length is 1.

to string to boolean

let val;
//toString
val=true.toString();
//output
console.log(val);
console.log(typeof val);
console.log(val.length);

In the above code you get true as a value and type as a string and the length is 4.

String to number

Now the conversion of string in number is different as the above conversion because in this you are not going to use alength because length is property of the string.In this conversion you use the method to fixed it only works on number to keep a specified number of decimals.

let val;
//String to number
val=Number('5');
//output
console.log(val);
console.log(typeof val);
console.log(val.toFixed());

1. Here you get value at 5 as it specify that this is number.
2. The number you get as a type of val because in code val=number('5'); already specify.
3. Last and important is toFixed() returns a string representation of num Obj that does not use exponential notation and has exactly digits digits after the decimal place.

Boolean to number

To convert boolean to a number the code is given below.

let val;
//Boolean to number
val=Number(true);
val=Number(false);
val=Number(null);
//output
console.log(val);
console.log(typeof val);
console.log(val.toFixed());

1. If you pass true as a val that actually gives you a 1 .In the same way when you pass the false or null as a val you will get 0 .
2. In typeof val you wil get number as a type .
3. Here tofixed() gives you 1 for true and 0 for false and null .

When you pass value as a number

let val;
//Boolean to number
val=Number('hello');
//output
console.log(val);
console.log(typeof val);
console.log(val.toFixed());

1. Here you get NaN as a val which means not a number.
2. In typeof val is a number.
3. In this code tofixed() gives you NaN not a number.

Note:If you pass array you get the same output instead of val=Number('hello'); you can write val=Number([1,2,3,4,5]); and you will get the same output NaN not a number.

Use of parseInt and parseFloat

The parseInt() pass string argument and return an integer number.Whereas parseFloat() pass the incoming string in a floating point number rather than a decimal.

let val;
//parseInt 
//parseFloat
val=parseInt('100.30');
val=parseFloat('100.30');
//output
console.log(val);
console.log(typeof val);
console.log(val.toFixed(2));

1. Here you get 100 as a val because parseInt pass as a interger and for the parseFloat it gives you 100.3.
2. In typeof val you get number of both parseInt and parseFloat.
3. In toFixed you pass 2 so the output for parseint 100 but for the parseFloat it gives you 100.30 because when you pass value it give a number after decimal if you put blank it simply gives you 100.

Keywords: