technilesh.com

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


    Amazon Offering Full time for SDE and Creative Asset Library: Apply Now Google Swags 2022 | Google Winter Swags : Apply Now