30 Day of Javascript , 100 Days of LeetCode 30 Day of CSS , : Get Started

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






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


    var und = undefined;


    output : Undefined




    var n = null;


    output : NULL

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


    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";


    Output : This is String1 This is String2



    IT gave output in true and false format .

    //Booleans true or false

    var a= true;

    var b=false;


    Output:- true


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


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



    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



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

    //objecct data types to store data

    var marks={







    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


    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 


    function fun(a,b) {

        return (a+b)/2;


    c = fun(4,3);


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


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


    var age = 34;






    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)


    var age = 34;







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


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


    var age == 34;








    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.


    Use to iterate many times.

     5.1)For Loop

    Using the for loop we can iterate in array


    //FOR Loops

    var arr =[1,2,3,4]

    for(var i=0;arr<4;i++){



    Output: 1 2 3 4 

    Using Function also 

     var arr =[1,2,3,4]




      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;




    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; 






    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


    var arr = [1, 2, 3, 4]

        for (var i = 0; arr < 4; i++) {






    output: 1


    var arr = [1, 2, 3, 4]

        for (var i = 0; arr < 4; i++) {






    output:- 1 3 4


    7) Array Opration 

    let arr = [1, 2, 3, 4 ,"hi" ,true,null]


        arr.pop(); // last element will remove


        arr.push("nasd");//new element added to last of array


        arr.shift();//first element will remove


        arr.unshift("garry");//ADDed new element at frist postion


        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();


    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

    //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
    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 .







    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

    I am GR,3+ years Exp of SEO, content writing, and keyword research ,software dev with skills in OS, web dev, Flask, Python, C++, data structures, and algorithms ,Reviews.

    Post a Comment