CSC102-Spring-24-/basics.html at main · DaveLoading/CSC102-Spring-24- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="1.1_css.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming Basics</title>
</head>
<header>
    <nav>
        <!--the a tag is the anchor tag - it creates a hyperlink  -->
    <a href="index.html"> Home </a>
</br> <a href="boards.html">Boards</a>
</br> <a href="game.html">Game</a>
</br> <a href="palindrome.html">Palindrome</a>
</br> <a href="basics.html">Basics</a>
</br> <a href="strings.html">Strings</a>
</br> <a href="w11sound.html">Sound</a>
</br> <a href="w13table_html.html">Table</a>
</nav>
</header>
<body>
     <!-- 1 and only 1 H1 tag on a page -->
<h1>
    Here are the basics of programming
</h1>
<h2> Variables</h2>
<script>
//this is a single line comment in javascript
/*this is a multiline comment in javascript*/

//lets create a variable
var firstname = "david "
console.log("the value of our first name variable is: " + firstname);

//create the variable, set it to an empty string
//we will give it value later
var lastname = "S"

//the 3rd way to create a variable
//- this is a valid way of creating a variable in javascript
//DO NOT USE THIS METHOD
 var middlename = "daniel"


</script>

<h2> Function</h2>
<!-- #1 rule of coding wirte as little code as possible -->
<script>
// this is javascript function definition, we need to use the keyboard function
//functions are awesome , you write code 1 time and can reuse it throuout your program
//functionsss help organize code
//function names usually be some sort of action
//always include the () . sometimes there will be variable(s) in between the () or they may be empty
//always make sure there are a mathcing set of curly braces { }
    function runCalc(){ //do not mix ; and {}
    //whatever code is in the curly braces belongs to this function
// we will create a variable called num1, and we are going to give it a defualt value of 0
//javacript should assume this a numeric datatype

    var num1 = 0;
    var num2 = 0;
    //we want to prompt the usr for a number, using the built in javascript prompt function
    //the prompt function takes an argument (variable) - the text that will be shown to the user with the prompt
    //the prompt function returns the value that the user entered in
    //let the num1 variable equal to the value the user entered in


    //do while loop will run at least 1 time, and they can run as
    //many times as needed; while loops may run 0 times
    do{
        //make user enter a number; this loop will run until a number
        //is entered
        num1 = prompt("Please enter number 1: "); //most signs of javascript need a ; at the end
    //if isNotaNumber is true (they entered text) or the user entered 0
    //the loop will keep running
    }while(isNaN(num1) || num1 == 0); // this ; is mandatory

// get another number from the user and assign it to the numb2 variable
    num2 = prompt("Please enter number 2: "); //most signs of javascript need a ; at the end
    //lets add num1 and num2 together and store that value in the total varible
    // the built in javascript functions parsIent makes sure that javascript treats the num1 and num2
    //variables as integers (whole numbers)
    var total = parseInt(num1) + parseInt(num2);
//call the built in javascript function called alert - this will show a message to the user
// it should show our numbers and the total
    //alert("the total of ") + num1 + "plus" + num2 + "is" + total

}
// we have created a function, now we need to call it so that the function code will run
// the () are black because we don't need to pass any information into this function
//runCalc();

//the code here does not belong to the function

</script>

<h2>Decision Logic (if/else) </h2>

<script>
//create a variable called age with a defeault value of 5
// 1 equal sign is assignment, the variable on the left is assigned the
//value on the right

var age = 5;

// 2 equal signs mean check for equality, or does the value on the left side
//match the value on the right side
if (age == 5) {
    //this code will run if the value of the age variable is 5
    //alert("age " + age);
}
// else if will be checked when the if statement does not evaluate to true
else if (age == 6) {
    //this code will run if the value of the age variable is 6
    //alert("age " + age);

}
else{
//the else statement is a catch-all, it will run if the value of the age variable is anything other than
// 5 or 6
//alert("age was not 5 or 6");
}

</script>


<h2>Loops</h2>
<script>
//loops run code repeatedly
// they are great for displaying data
//there are 2 basic types of loops - for loop and while loop

//we are going to create an infinite loop bug
var count = 0;

//set up a while loop, we want it to run until the counter hits 5
while(count <-5){

    //do whatever thing this loop needs
    console.log("count="+count);

    //change the value of our counter
    //count++ is the same thing as count = count + 1
    //count-- is the same thing as count = count - 1
    count--;
}

// for loops are generally used when you know how many times you want
//the code to run

// use the variable "i" for your counter variable for your loop
// 1st part of our for loop is a counter variable, and we are setting it
// to a default value of 0
// 2nd part the condition that the for loop will test on each run
// the loop will run as long as this condition is true
// 3rd part is incrementing the counter variable each time the loop runs
// i++ is the same thing as i = i + 1
for (var i = 0; i < 5; i++){
//alert("i=" + i);

}

//counter variable, set to default value of 0
var counter = 0;
// while loop will run until the counter is equal to 5
while(counter < 5){
    //display the value of the counter in an alert
    //alert ("counter=" + counter);

// increase the value counter by 1 every time the while loop runs
    counter++;
}

//while loops are generally used when you do not know how many times you
//want the code to run

</script>

<!-- We will build an html form so we can gather user input and then validate it.-->
<!-- method = "post" is the best way to handle what happens with the data in the form. It
will post the datat to the page instead of putting the data in the querystring (URL) -->
<form method="post" onsubmit="return validateForm();">
    <!--Label should be linked to the input by the name of the input  -->
        <!-- This is the label for the user's name -->
    <label for="fullname"> Full Name: </label>
    <!-- Text box input were we can gather the user's full name  -->
    <input type="text" id="fullname" name="fullname" >
    <br><br>  <!-- 2 line breaks for spacing -->
    <!-- Label for the email -->
    <label for="theEmail"> Email Address: </label>
    <!-- Text box input where we can gather the user's email address -->
    <input type="email" id="theEmail" name="theEmail">
    <br><br>  <!-- 2 line breaks for spacing -->
    <!-- Label for age -->
    <label for="age"> Age: </label>
    <!--Text box input where we can gather the user's age  -->
    <input type="number" id="age" name="age">
    <br><br>  <!-- 2 line breaks for spacing -->
    <!-- Create a submit button so the form can be validated,etc. -->
    <input type="submit" value="Submit">

</form>

<script>
   //this function will validate the input that the user entered in our form
   function validateForm(){
    // full name the user entered, stored in a variable called fullname
     var fullname = document.getElementById("fullname").value;
     //email the user entered, stored in a variable called email
     var email= document.getElementById("theEmail").value;
     //age the user entered, stored in a variable called age
     var age = document.getElementById("age").value;

     //Check to make sure the user has entered a name
     if (fullname.trim() == ""){
        //tell user to enter a name
        alert("Please enter your name.");
        //don't allow the form to submit to the server
        return false;
     }
        //allow the form to submit to the server
        return true;

        //Check to make sure the user has entered a name
     if (email.trim() == ""){
        //tell user to enter a name
        alert("Please enter your email.");
        //don't allow the form to submit to the server
        return false;
     }
        //allow the form to submit to the server
        return true;

         //Check to make sure the user has entered a name
     if (age.trim() == ""){
        //tell user to enter a name
        alert("Please enter your age.");
        //don't allow the form to submit to the server
        return false;
     }
        //check if age is a number; if the input is not a number, this if statement will be true
        if(isNaN(age))
        //tell the user to
        alert("Please enter a valid age");
         //don't allow the form to submit to the server
         return false;

        //allow the form to submit to the server
        return true;

    }
</script>
<!-- Event Driven Programming Section -->
<h2>Event Driven Programming </h2>
<!-- Button 1 -->
<button id="button1">Click Me</button>
<!-- Button 2 -->
<button id="button2" onclick="handleClick2()">Click Me</button>

<script>
    //create a shortcut to refer to the HTML button (button 1)
    var button1 = document.getElementById("button1");

    // this is our event handler; it is just a function that we set up to run when the button is clicked
    function handleClick(event){
        alert("Button Clicked!")
    }

    //Wire the button to listen for the events (when the button is clicked)
    button1.addEventListener("click",handleClick);

    //fucntion to handle the button 2 click events
    function handleClick2(event){
        alert("Button 2 Clicked!");
    }

</script>

</body>
     </html>