lesson-7-example

<!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 examples</title>

    <!-- This is the example of internal JS -->
    <script>
        //code here
    </script>

    <!-- This is an external JS file. -->
    <script src="jsExternal.js"></script>

</head>
<body>

    <h1>JavaScript</h1>

    <!-- This is the example of internal JS -->
    <script>
        //code here
    </script>

    <!-- This is an external JS file. -->
    <script src="jsExternal.js"></script>

    <!-- Two Examples of JavaScript functions (sum of digits and combining Strings) -->
    <script>

        function myFunction(x,y) {
            var sum = 0;    // sum is undefined
            sum = x + y;    // sum has values (total) of x + y
            return sum;     // return the value of the sum
        }

        console.log(myFunction(4,5));

        function myText(a, b, c) {
            var myText = "";
            myText = a + " " + b + " " + c;
            return myText;
        }

        console.log(myText("Joe", "Doe", "Second"));

        // display message in console
        console.log(7+8);

    </script>

    <!-- Alert JavaScript -->
    <script>

        // display this message in the alert pop up box.
        window.alert("This is my text!");

    </script>

    <p id="demo">    </p>
    <p id="example">   </p>

    <!-- inherHTML JavaScript -->
    <script>

        // insert value in the tag with specific ID
        document.getElementById("demo").innerHTML = "Hello World!";
        document.getElementById("example").innerHTML = 5 + 7;
    </script>


<br>
<br>
<br>
<br>

<!-- Basic JavaScript onclick method -->
<h1>Display my name below</h1>

<form>
    <label for="fName">Name</label><br>
    <input type="text" name="fName" id="firstName" placeholder="John">
    <br>
    <input type="button" value="Display my Name" onclick="replaceText()">
</form>

<p id="output">Your Name will be displayed here.</p>

<script>

    function replaceText() {

        var myName = document.getElementById("firstName").value;
        document.getElementById("output").innerHTML = "Your input Name is: " + myName;

    }

</script>

</body>
</html>