Intro to JS 1 - Web Editor

Web Editor - Intro to JS 1

<!DOCTYPE html>
<html>
    <head>

</head>
    <body>
        <h1 id="click-me" style="background-color:#ffaaaa">
            Click Me
        </h1>

<h2 onclick="h2Function()" style="background-color:#aaffaa">
            Click Me as well
        </h2>
        

        <script>
            //Single Line Comment
            /*Multi-line
              Comment   */

/*Output
            --------------------------------------------*
            console.log("Hello World");
            alert("This is an alert!");
            */

/*Input
            --------------------------------------------*
            var myName = prompt("What is your name?");
            console.log(myName);
            */

/*Variables   
            --------------------------------------------*           
            //Undefined variable
            var nothingVar;
            console.log(nothingVar);           
            //Numbers
            var myNum = 5;
            console.log(myNum);
            //Strings
            var myString = "words";            
            console.log(myString);
            //Boolean
            var myBool = true;
            console.log(myBool);
            //Adding numbers and strings together
            var aNum = 5;
            aNum = aNum + "6";
            console.log(aNum);
            console.log(typeof(aNum));
            */

/*Arrays
            --------------------------------------------*
            //arrays can have mixed data types
            var myArray = [25, 'a', 6, 'apples'];
            console.log(myArray[3]);
            */

/*If Statements
            --------------------------------------------*
            var y = 6;
            if (true) {
                console.log("True If Statement");
            }
            else if (true){
                console.log("True Else/If Statement");
            }
            else {
                console.log("False Statement");
            }
            */

/*While Loop
            --------------------------------------------*
            var x = 10;
            while(x > 0){
                console.log(x);
                x=x - 3;
            }
            */

/*For Loop
            --------------------------------------------*
            for(var i = 0; i < 10; i++) {
                console.log(i);   
            }
            //For Loops and Arrays      
            var array2 = ['a', 'b', 'giraffe', 52];
            for(var i = 0; i < array2.length; i++) {
                console.log(array2[i]);
            }
            
            //The 'length' property allows us to know the length of the array
            //We can use the name 'i' for our counter variable
            //    again because it is used locally within a for 
            //    loop each time
            */
        </script>
        
        <script>
            /*Function
            --------------------------------------------*
            //Define a function, then call it
            
            //Function without Parameters
            function logHelloWorld(){ //Function Definition
                console.log("Hello World");
                console.log("more stuff");
            }
            logHelloWorld(); //Function Call
            
            //Function with Parameters
            function add(num1, num2) { //num1 & num2 are parameters
                return num1 + num2;
            }
            var answer = add(5, 66); //5 & 6 are arguments
            console.log(answer);   
            
                     
            //Alternative Function Syntax
            var functionName = function(param1, param2) {
                // code
            }
            var arg1 = 1;
            var arg2 = 2;
            functionName(arg1, arg2);
            */
        </script>

function h2Function(){
                console.log('Green button was clicked');
            }
        </script>
    </body>
</html>

WebEditor - an OYOclass application, own your own class today.

Page Live Preview

Open page in New Window

Console

Created on 2021-04-12T14:01:57Z

Author: Mentor Doug