JS_Arrays.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS_Arrays</title>
</head>
<body>
    <h2>Student</h2>
    <label>name: <input type="text" name="" id="studentName"></label>
    <label>subject: <input type="text" name="" id="subject"></label>
    <label>grade: <input type="number" name="" id="grade"></label>
    <button onclick="saveStudentData()">Save</button>
    <button onclick="showStudentNames()">ShowNames</button>
</body>
<script type="text/javascript">
    // example 1:
    var studentNames = [];

    // when left click on button "Save":
    var saveStudentData = function(){
        studentNames.push(document.getElementById("studentName").value);
        console.log(`studentNames = ${studentNames}`);
    }

    // when left click on button "ShowNames":
    var showStudentNames = function(){
        console.log(studentNames);

        for (var i = studentNames.length - 1; i >= 0; i--) {
            console.log( studentNames[i].toUpperCase() );
        }
    }
</script>

<script type="text/javascript">
    // example 2:
    var colors = ["red", "green", "blue","black"];


    for(var i=0; i<colors.length; i++){
        console.log( colors[i].toUpperCase() );
    }

</script>
</html>