Basics of JavaScript For beginners || Introduction to JavaScript

What is JavaScript? Short Key Points.

JavaScript allows client-side Scripting to create completely dynamic web applications and websites.

It was designed for making pages alive.

With Nodejs javascript can be used as a backend language.

JavaScript Has no link with Java Programming language.

Installing VS Code, Extension & Setup

• To Download VS code Visit https://code.visualstudio.com/download.
• In VS code. click on Extension and download.
• a. Live Server
• b. JavaScript ES6 Code scripts

Run Javascript in chrome console.

• Right Click on any page on browser and select inspect element
• Selelct the console option. where we can run our Javascript code.
• We will se the result of our JS code in console.

Add JS to HTML

<Script> tag: Adding <Script> Your code </script>

External JS:- Adding A file with .js Extention through link For Example:- <script src=”js/w3hiring.js”></script>

Some Important Command:

Console.log():- This is used to print output to the console. we can put anything inside the log(). It can be array, object, string, boolean etc.

For Example:- Console.log(W3hiring); #It will print w3hiring in the console of chrome browser.

Console.table():- It Generate a table inside a console. The input must be an array or an object.

For example:- Console.table({name:”Syam”, Language: “Python”, passion:”Teaching”});

Output:-

Console.assert():- This method writes a message to the console that the assertion failed and the message we provide as a parameter, but only if an expression is true, nothing will happen.

For Example: – Console.assert(0>1,”Expression is false”)

Console.warn():- By default. the warning message will be hightlighted with yellow color

for example:- Console.warn(“This is warning”);

Console.clear():- It is clear the console.

For example:- Console.clear()

Console.time() & Console.timeEnd():- With them we can find the amount of time spend by a code on execution

For Example:-

Console.time()
for (i=0; i<100;i++)
{//your code here}
Console.timeEnd();

Console.error():- By default, The error will be highlighted in red colour.

For Example:- Console.error(“This is an Error”);

Console.Count():- The Console. count() is used to count the number that the function hit by this counting method. In Javascript counting starts from 0.

Console.group() & Console.GroupEnd() :- They allows us to group content in a separate block.

For Example:-

Console.group('simple');
Console.log('Grouped');
Console.groupEnd('simple');
Console.log('new section');

Two types of Comments In Javascript:-

Single Line Comment:- we can use the double forward slash to make a single-line comment or we have a shortcut to make a single line comment (Ctrl+/)

For Example:- //Single line comment

Multiline Comment:- we can use a single forward slash and star to make multiple line comments or we can use the shortcut key to make multiple line comment. first, we select all the lines to want to make comment in the press “ctrl+/”.

For example:-

/* multiline comment

line two

line three */

Variables:- Variables are containers or memory locations to store data.

Note:- Data types in JS are either variable or constant.

Keywords to declare a variable are following:-

• Var
• Let
• Const (const is used when a developer don’t want to change the value of variable)

For Example:-

var n1=10;
var n2=46;
console.log(n2+n1)

#Output:- 56

Note:- We can use let in a similar way live we have to use var in the above code. JS variables are case sensitive

For example:- a and A are different variables.

Const:- We use const when we are sure a variable will not be redeclared.

For example:-

Const age =20;
Const num =10;
Const job = Developer;

Data Type is Javascript:-

Two Types of Data types in JavaScript:-

Primitive Data Type:- Undefined, null, number, string, boolean, symbol.

Reference Data type:- Arrays, Object.

String:-

var str1="This is an apple"
var str2="This is a string"
console.log(str1)
//output:- 'This is and apple'

Number:-

Var num1=55;
console.log(num1)

What is Object ?

The object is a reference data type. It is like other variables but the only difference is that an object holds multiple value arrays. Function etc. we create an object with figure bracket {….} with an optional list of properties.

For Example:-

let Marks={ravi:34, harry:78}
console.log(marks);

Boolean:-Represents one of two values: true or false.

var a=true;
var b=false;
console.log(a)
//output:- True

Undefined:- Variable that has been declared but not defined.

var und=undefined;
//or
var und; 

Null:-

var n=null
console.log(n)

Arrays:- Arrays are objects to store multiple values in a single variable.

//Empty array syntax.
let arr=[];
let arr=new Array();
//Output:-0,1,2,3,4

var arr=[1,2,3,4,5]
console.log(arr[4])
//output:- 5 //numbering starts from 0

Array Methods:-

i) Length of an array:- Return the number of elements in an array.

let myarr=['glass','plate',23,null,true]
console.log(myarr.length);

ii) .push():- Add an item to the end of the array.

let fruits=["Orange","Apple"];
let len= fruit.push('mango')

New arr is [“Orange”,”Apple”,”Mango”]

iii) .Pop( ) :- Remove an item from end.

iv) .shift():- Remove an item from beginning of array

v) .Unshift() :- Add an item to the begining.

vi) .tostring():- Convert array to string.

vii) .Splice( ):- Remove an item from index position.

Index position is, in short, numbering(Generally denoted by i). Other variables can also be used.

let fruits=["orange","Apple","mango"]
let removed item =Fruit.splice(pos,1)
//new array-->["orange","mango"]

Functions:-

What is a function?:- it is a group of reusable code which can be called anywhere in the program this eliminates the need to rewrite the same code.

Defining a function:

To create a function declaration use the function keyword and then its name. let’s see

//Syntax of a function
function name(parameters){
statement
}

let us define a function that can be used to find the average of any two numbers.

funtion avg(a,b){
return (a+b)/2;}
c1=avg(4,6);
c2=avg(14,16);
console.log(c1,c2)

Number

console.log('3')
//Output: 3

String

console.log('4')
//Output: 4

Conditionals

Var age=34;
if else:
   if(age>8){
   console.log("you are not a kid");
}
else
{ console.log('you are kid');}

//Output:- You are not a kid.

if checks the condition and if it is false then ‘else’ is printed Otherwise ‘if’ is printed.

If-else Ladder :-

if(age>32)
{
console.log('youtube are not kid');
}
else if(age>26)
{ console.log("Not a kid");
}
else 
{console.log("you are kid");
}

It keeps on checking condition & where it is satisfied then that statement is printed.

Loop:-

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

For Loop:- No to iterate the above array. get one value from the array.

for(var i=0; i<arr.length; i++)
{
Console.log(arr[i])
}

Dom Manipulation:-

We can edit HTML & CSS of a page. Dynamically usingJS.

<button id='harry' clickme> </button>

To click on a button we can use a document. get element by(“javaScript”).click()

Changing CSS of a button:-

Document get element byId("Harry").style border='blue'

To find element in complex program:-

let elem=document.getelementbyId('JavaScript')
console.log(elem)

Thanks for visiting us. we hope you have understood the basic concept of JavaScript.