Learn JavaScript in an Hour with full Explanation and project ideas -technilesh.com

 JavaScript Full in 1 hour with Full Explanation with Source code and Project Ideas for Beginner- Technilesh.com

Hello Guys ,

You Can Learn the Whole Javascript Scripting Language in Just 1 hour and for Video Explanation Go to Youtube Channel CodewithNilesh and Bytecode.technilesh.com.

The Java Script is Scripting Language and used to make Alive Website .By using CSS and Html You Can make Web site having Interesting design

but you cant implement functionality to the website. ( eg You can create the simple button using HTML and CSS but the working cant happen when you click button).

To alive the Button or What happen When you Click to the Button is Given by the javascript.so lets starts from basic of JAVASCRIPTS and My own Short trick while making the website.

div.cname => <div class="cname"></div>

button#cid => <button id="cid"></button>

. ( dot) is use for class naming 

& # (hash) is use for id naming 

1) Data Typs:

The mainly two types of data are present in JAva script is Primitive and References .

                            Primitive data       References data type

                            Undefined Arrays

                             Null Objects

                              string

                             Boolean

                               Symbol

                                Number

 1.1)Undefined

When you declear the variable but not provide any parameter ,there it is Default Variable.

  //undefined 
var und = undefined;
console.log(und);

output : Undefined

 

 1.2)Null

  //NULL
var n = null;
console.log(n);

output : NULL

When You Declear the Variable and assigned the null value .it is Different from the Undefined data Type  

 1.3)String

Actually it is a collection of Character . To assigned it we used the Double and single quote ( '  ' ,"  " )

  
//no and string important
var str1 = "This is String1";
var str = "This is String2";
document.write(str+str1);

Output : This is String1 This is String2

 

 1.4)Boolean

IT gave output in true and false format .

//Booleans true or false
var a= true;
var b=false;
console.log(a,b)

Output:- true


  

 

#SYmbole is not import as so is just skip if you want to learn more about the Symbol then just google

 1.5)Number(int)

We use for assigning the no to variables and used for calculation purpose. 

 

1.6)Arrays

It is the References data type ,It actually a collection of data of any data type like string or number .The Array is Calculated by using the indexing concept and staring index [0]

  //arrays collection of strings 
var arr = [1,2,3,4,5]
console.log(arr[0]);//index start from 0 zero
console.log(arr);//full arrr 

Output: 1

 

 1.7)Objects

Most Important point of JAvascript is Object because the javascript is basically Based on the Objects.

  

//objecct data types to store data
var marks={
    ravi:45,
    shubham:99,

}
console.log(marks)

 

2)Operators

There are many types of Operators , these are following.

 2.1)arithmetic operator

+,-,*,/ 

 2.2)assignment operator 

used to assigen value ' =,+=,-=,'

 2.3)Comprising operator

 > ,< , = 

 2.4)logical operators

 true ya false me ans dete he..

// && and || or

// !true= false

//operator and operands .. a and b are operands , operator are above's

3)Functions

Function are actually use for save the work of repetition .If you make fun of average no and calling many time using function .that will run efficiently but if you don't use

the function then you have to write the average no logic that much time that much you want to find the average no 

//Functions
function fun(a,b) {
    return (a+b)/2;
}
c = fun(4,3);


  

4)Conditional 

This Is very important concept in JavaScript to Assign the some condition while coding or designing the website.

 4.1)IF 

This Conditional state use to write specific condition and if  you satisfied that condition then only execute the action present in the IF BLOCK

//conditionals
var age = 34;
if(age==34){
    console.log("gfj");
}

output=gfj


  

 4.2)IF--Else

IF you have Two Condition for variable ,eg if you take age as variable , in IF block the condition is ( age>18) output will be 'Valid for voting' and in else ( other condition to execute)

//conditionals
var age = 34;
if(age==34){
    console.log("gfj");
}
else{
    console.log('fghf');

output:gfj 


  

and if the age is not equal to 34 the output will be   fghf

 4.3)IF--ELSEIF

IF you more than Two condition then use the IF--elseif

//conditionals
var age == 34;
if(age=34){
    console.log("gfj");
}
elseif(age==18){
}
else{
    console.log('fghf');

output : gfj 

  

 

and if the age is not equal to 34 & 18 the output will be   fghf and if it equal to 18 the out put will none.

5)Loops

Use to iterate many times.

 5.1)For Loop

Using the for loop we can iterate in array

//loops
//FOR Loops
var arr =[1,2,3,4]
for(var i=0;arr<4;i++){
console.log(arr[i])    
}

Output: 1 2 3 4 
Using Function also 
 var arr =[1,2,3,4]
arr.forEach(function(element)){
    console.log(element) 



  

 

  5.2)While Loop

We introduce new data type Let which only used for single block , it means like Local Variable .It has only limited acces and cant cant acces out of {  } this block.here Intially we Find the condtion if it true then go in loop.

let j = 0;
 const a = 0;
while(j<arr.length){
    console.log(arr[j])
    j++;
}
Output will be : 1 2 3 4  


  

 

 5.3)Do while

just one difference from while loop is that we check condition after execution's of first time.

Let J=0; 
Do{
console.log(arr[j])
j++;
}

while(j<arr.length);
Output will be : 1 2 3 4  



  

 

6)Break and Continue

Continue : Just Skip that condition 

Break: Break from the loop and go outside the loop

  //Break
var arr = [1, 2, 3, 4]
    for (var i = 0; arr < 4; i++) {
        if(i==2){
             Breake;   
        }
        console.log(arr[i])
    }
output: 1
//Continue
var arr = [1, 2, 3, 4]
    for (var i = 0; arr < 4; i++) {
        if(i==2){
             continue;   
        }
        console.log(arr[i])
    }
output:- 1 3 4

 

7) Array Opration 

let arr = [1, 2, 3, 4 ,"hi" ,true,null]
    console.log(arr.length);
    arr.pop(); // last element will remove
    console.log(arr.length);
    arr.push("nasd");//new element added to last of array
    console.log(arr.length);
    arr.shift();//first element will remove
    console.log(arr.length);
    arr.unshift("garry");//ADDed new element at frist postion
    console.log(arr.length);
    arr.toString();//convet all elemnt into string
    console.log(arr); //
    arr.sort()//sort the array (  convert it to the string then sort )

  

 

 

8) String Method

 

let string= 'technilesh is best';

    console.log(string.length)//lengthof string = 17

    console.log(string.indexOf("technilesh"))//to find the index of that spe cific string 0

    console.log(string.slice(0,3))//0,1,2,3 ke charecter delete kardiye nilesh is best

    console.log(string.replace("technilesh","nilesh"))//this will replace that to anthor string nilesh is best

 

9) Dates in JS 

let myDate = new Date();
console.log(myDate) 
Output : Current date eg 27/11 saturaday 19:12


Many other method :
1) gettime -> gaves time 
2) getDay -> todays day
3) getminute -> get time in minute
and many other.


  

 

10)DOM  Important 

IT API for the Html and very important point for html and css handling. You dynamically changes in the CSS and html. The main is the ID of the html 

also read comment for explanation.

 

//DOM manipulation

 document.getElementById("click");

//short trick geb g-get , element- e by-b

let elemclass =document.getElementsByClassName("con");

elemclass[1].getElementsByClassName.background = yellow;

//if you create the css and add to the html then used this

elemclass[0].classList.add("css name") //eg .container{  style}

//also can be remove the css

elemclass[0].classList.remove('css name');

//To acces the html of particular block

elemclass[0].innerHTML()//this gave the html if you want to add any new block or remove it

element[0].innerText()//this gave the text inside the element block

let tn =document.getElementsByTagName('h1')//this will use the tag of any html that we used and want to change any change or add new featuer

tn[0].appendChild(createdElement)

createdElement =innerText('asda asasas')

createdElement = document.createElement('p')//any tag we can used we take the para graph tag

createdElement2 = innerText('replace the para')

createdElement2 = document.createElement('p')

tn[0].replaceChild(createdElement2,createdElement)//take to parameter also the remove method

sel = document.querySelector('.container')

console.log(sel)//gave the frist element of container

sel = document.querySelectorAll('.container')

console.log(sel)//gave the all element of container 

11)Events In Javascripts

//events that happeing in web like moving the cursor
window.onload =function(){
}//when the document was loaded then function will work
corn.addEventListner('click',function () {
    console.log("clicked on the container")
})
///when the mouse is getting over the button this will appen 
corn.addEventListner('mouseover',function () {
    console.log("mouse on the container")
})
corn.addEventListner('mouseout',function () {
    console.log("mouse out the container")
})
corn.addEventListner('mouseclick',function () {
    console.log("clicked on the container")
})
corn.addEventListner('mouseup',function () {
    console.log("mouse up clicked on the container")
})
corn.addEventListner('mousedown',function () {
    console.log("mouse down on the container")
})
 


  

 

12)Local Storages

We do only two operations.1 add ,2 delete .

  Syntex
localstorage.setitem();
 Localstorage.clear();

 

 

13)JSON 

JAVA SCRIPT OBJECT NOTATION ,Which is used to convert the object to the string of JSON file. JSON can easily share the data and easy to access the data .Also JSON easily convert the data from object to string.

It having large opration

1) Parsed -> to convert the string json to object

2) Stringfy -> to convert object to the JSON string

This is finally of topic and do programming more and more and developmend many small projects like #todo list #portfoio website #web app #google chrome extension and also learn the some framer works like #reactjs # 

I also Provide the Full code of some of my personal Projects and stay happy learn more from Bytecode.technilesh.com & technilesh.com