11_JS_Functions.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Functions</title>
    <style>
        body{
            margin: 0;
            font-family: "Comic Sans MS",sans-serif;
        }
        h2{
            background-color: lightgreen;
            text-align: center;
            padding: 10px;
        }
        div{
            background-color: seagreen;
            padding: 10px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>

    <h2>JS Functions Example</h2>
    <div>
        <h1 id="display"></h1>
    </div>

</body>

<script>

    //creation of a simple function with no args and execute a function
    function greet() {
        var output = "Hello World";
        console.log(output);
        document.getElementById('display').innerHTML = output;
    }
    greet();

    //creation of a simple function with args
    function hello(name) {
        var output = "Hello" + name;
        console.log(output);
    }
    hello(" John");

    // executing a function with less number of params
    function lessParams(name,age) {
        var output = "Hi " + name + " You are " + age + " Years Old..!";
        console.log(output);
    }
    lessParams();//if you don't pass any params ,it will return with undefined.

    //executing a function with more number of params
    function moreParams(name,age) {
        var output = "Hi " + name + " You are " + age + " Years Old..!";
        console.log(output);
    }
    moreParams('Mike',34,40000,'Manager');

    //Statement => function overloading is not possible here

    // functions with return values
    function valueReturn(name,age) {
        var output = "Good Morning "+ name;
        return output;
    }
    var greeting = valueReturn('Colt');
    console.log(greeting);
    //function with empty return /no return
    function emptyReturn(name,age) {
        var output = "Good Morning "+ name;
        return;
    }
    var greeting1 = emptyReturn('Colt');
    console.log(greeting);

    // function Expressions with name and execution
    var greetFn = function greet(){
        var output = "this is from function expression";
        console.log(output);
    }
    greetFn();

    // Anonymous Function Expression and execution
    var greetAnonymous = function () {
        var output = "This is from the anonymous function";
        console.log(output);
    }
    greetAnonymous();

    // Functions as arguments without args
    function greet1(){
        var output = "This is from greet1 function";
        console.log(output);
    }

    function greet2(){
        var output = "This is from greet2 function";
        console.log(output);
    }
    function greetEngine(fName){
        fName();
    }
    greetEngine(greet1);

    //with args
    function greet1(name){
        var output = "This is from greet1 function";
        console.log(output);
    }

    function greet2(name){
        var output = "This is from greet2 function";
        console.log(output);
    }
    function greetEngine(fName,name){
        fName(name);
    }
    greetEngine(greet1,'John');


    // Functions as arguments with args args
    var greetArgs1 = function (name) {
        var output = "Hello "+ name + " I'm from GreetArgs1";
        console.log(output);
    };
    var greetArgsEngine =function (fName,name) {
        fName(name);
    }
    greetArgsEngine(greetArgs1,'Colt')


    // Functions in Objects and Execution
    var student = {
        fName :'Colt',
        lName : 'Steele',
        getFullName : function () {
            return this.fName + " " + this.lName;
        }
    }
    var student_name = student.getFullName();
    console.log(student_name);

    // this keyword for accessing objects props in function


    // Coding Exercise 1
    /*
    Create an employee obj and address object in it. add a property called
    isFromState() to return true if a person from that state.
     */
    var employee = {
        fName : 'Mike',
        lName : 'Smith',
        address : {
            city : 'Hyderabad',
            state : 'Telengala',
            country : 'India'
        },
        isFromCity : function (city) {
            return this.address.city === city;
        }
    };
    var emp_city = employee.isFromCity('Hyderabad');
    var output = "isFromCity Hyderabad ? :" + emp_city;
    console.log(output);

    // Default Function Arguments (arguments)

    function defaultArgs() {
        var output = "";
        for ( var i = 0 ; i < arguments.length ; i++){
            output += arguments[i] + " ";
            console.log(output);
        }
    }
    defaultArgs('Mike' ,40 , 'Developer');


</script>
</html>