JavaScript SimpliLearn Certificate course

1. What is JavaScript Object?

        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript</title>
    </head>
    <body>
        <h1>creating Javascript object</h1>
        <p id="demo"></p>
    <script>
            // this is  the 1 st method to create basic js object format.
            var student = {
                name: "Chris",
                age: 21,
                studies: "Computer Science",
            };
            document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;
            
        </script>
        

        <script>
        // this is  the 1 st method to create basic js object format.

            var student = new Object();
            student.name = "Chris",
            student.age = 21,
            student.studies = "computer Science",
            document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

        </script>



        <script>
            // this is the 3rd method to create an object in js.
            function stud(name,age,studies){
                this.name = name;
                this.age = age;
                this.studies = studies;
            }
            var student = stud("chris",22,"computer science")
            document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

        </script>
        
    </body>
    </html>
 

2. JavaScript Function

 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Function</title>
        <p id="demo"></p>
    </head>
    <body>

        <!-- <script>
            //  this is a simple function
            function myFun(val){
                document.getElementById("demo").innerHTML = val * val;
            }
            myFun(5);
        </script> -->



    <!-- 


        <script>
            // this is function expression
            let x = function(){
                alert("Hello World!")
            };
            document.getElementById("demo").innerHTML = x();

        </script> -->




        <!-- <script>
            // this is function constructor
            var myFunction = new Function("a","b","return a + b")
            var x = myFunction(3,5);
            document.getElementById("demo").innerHTML = "The sum is " + x;

        </script>
    -->



    <!-- 


        <script>
            // self invoking functions
            (function(){
                alert("This is invoking functions")
            })()
        </script> -->




    <!-- 
        <script>
            // function as a value
            function Product(a,b){
                return a*b;
            }
            let y = Product(2,5)*5;
            document.getElementById("demo").innerHTML = "The product is " + y;

        </script>
    -->



    <!-- <script>
        // use function as Object
        var body = "return Math.PI * red *red"
        var circle = new Function("red",body)
        alert(circle(5))
    </script>
    -->

    <!-- 
        <script>
            // arrow function
            const Myfunc = (a,b,c) => {return a*b*c}
            let product = Myfunc(2,2,3)
            document.getElementById("demo").innerHTML = "The product of the three digits is " + product;
            
        </script>
    -->




    <!-- 
        <script>
            // create a generator function
            function* generateFunc(){
                yield 1;
                yield 2;
                return 3;
            }
            let generator = generateFunc();
            let one = generator.next();
            let two = generator.next();
            let three = generator.next();
            alert(JSON.stringify(one));
            alert(JSON.stringify(two));
            alert(JSON.stringify(three));
        </script>
    -->





        <script>
            // predefined function
            let x = 5;
            let y = 6;
            let z = 7;
            console.log(eval("x+y"));
            console.log(eval(z));
        </script>

        
    </body>
    </html>
 

3. JavaScript Closure

    <script>
        var a = 10;
        function first_function(){
            var b = 20;
            function second_function(){
                var c = a + b;
                return c;
            }
            return second_function();

        }
        var sum = first_function();
        document.write("the sum is " + sum + '<br>')
    </script>

4. Promises in JavaScript

    <script>
        //  this is promises. how promises work.
        let car = new Promise(function(resolve, reject){
            fuel_fulltank = false;
            if(fuel_fulltank){
                resolve()
            }
            else{
                reject()
            }            
        });
        car.then(function(){
            document.write("The fuel tank is full. Happy Driving.")
        }).catch(function(){
            document.write("The fuel tank is not empty.")
        })
    </script>    
 

    <script>
        // this is nested promises.
        let empty_tank = function(){
            return new Promise(function(resolve,reject){
                resolve("The car does not have enough fuel.")
            })
        }
        let engine = function(message){
            return new Promise(function(resolve,reject){
                resolve(message + "The engine is over heating.")
            })
        }
        let travel = function(message){
            return new Promise(function(resolve,reject){
                resolve(message + "The car is not safe for travelling.")
            })
        }

        empty_tank().then(function(result){
            return engine(result)
        }).then(function(result){
            return travel(result)
        }).then(function(result){
            console.log("Done! " + result);
        })
    </script>
 

5. JavaScript Async/ Await

This is a very simple promises we created without Async-await.

 
    <script>
        //  this is a very simple promises we created without Async-await.
        let result = function(score){
            return new Promise(function(resolve,reject){
                console.log("Calculating results...")
                if(score > 50){
                    resolve("Congratulations! You have passed.")
                }
                else{
                    reject("You have failed.")
                }
            })
        }
        let grade = function(response){
            return new Promise(function(resolve,reject){
                console.log("Calculating your grade....")
                resolve("Your grade is A. " + response)
            })
        }

        result(80).then(response => {
            console.log("Results received")
            return grade(response)
        }).then(finalgrade => {
            console.log(finalgrade)
        }).catch(err =>{
            console.log(err);
        })

    </script>
 
 
    output:

    Calculating results... 
    Result Received. 
    Calculating your grade.... 
    Your grade is A. Congratulations! You have passed.  

Making an Async keyword to calling it.

 
 <script>
       //  making a Async keyword to calling it.
        let result = function(score){
            return new Promise(function(resolve,reject){
                console.log("Calculating results...")
                if(score > 50){
                    resolve("Congratulations! You have passed.")
                }
                else{
                    reject("You have failed.")
                }
            })
        }
        let grade = function(response){
            return new Promise(function(resolve,reject){
                console.log("Calculating your grade....")
                resolve("Your grade is A. " + response)
            })
        }

        async function calculateResult(){
            try{
            const response = await result(80)   
            // const response = await result(20)
            console.log("Result Received.")
            const finalgrade = await grade(response)
            console.log(finalgrade);
        }
        catch(err){
            console.log(err)
        }
    }
    calculateResult()
 
    </script>
 
 
    output:

    Calculating results... 
    Result Received. 
    Calculating your grade.... 
    Your grade is A. Congratulations! You have passed. 

6. JavaScript this Keyword

 
    <script>
        // this demo for 'this' keyword purpose only. How this keyword work.
        var value = 50;
        
        function my_function(){
            var value = 100
            alert("value " + value)
            alert("This value: " + this.value)
        }
        my_function();

    </script>
 

 
        <script>
            // let show how 'this' keyword work on Object.
            const random = {
                name: "John",
                info(){
                    console.log("Hi! My name is " + this.name)
                }
            }
            random.info();
        </script>
 
    output: Hi! My name is John. 

    <script>
        // let show how 'this' keyword work on Object.
        const random = {
            name: "Tutorial",
            video: ["JavaScript", "this","Keyword"],
            info(){
                this.video.forEach(function(tag){
                    console.log(this.name, tag)
                },this)
            }
        }
        random.info();
    </script>
 
 
     output: 
 
     Tutorial JavaScript 
     Tutorial this 
     Tutorial Keyword
 

7. JavaScript form Validation

1st file

 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS Form validation</title>
        <script type="text/javascript">
            function validate(){
                if(document.myForm.EMail.value == ""){
                    alert("Please provide your email ID.");
                    document.myForm.EMail.focus()
                    return false;
                }
                else if(document.myForm.Password.value == ""){
                alert("Please provide your Password.");
                    document.myForm.Password.focus()
                    return false;
                }
                else{
                    return true;
                }
            }
        </script>
    </head>
    <body>
     Here is an error: A 'return' statement can only be used within a function body 
    <form action="message.html" name="myForm" onsubmit="return(validate());">
        <input name =EMail placeholder = "Email" type="text"><br>
        <input name =password placeholder = "password" type="text"><br>
        <button type="submit">Submit</button>
    </form>
    </body>
    </html>
 
 

2nd file

 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=s, initial-scale=1.0">
        <title>Form validation</title>
        <script type="text/JavaScript"></script>
    </head>
    <body>

        <h1>Hello there welcome</h1>
        
    </body>
    </html>
 