Problem Solving / JavaScript ProgrammingAfter this lab is complete you should be able to:
Understand what algorithmic problem solving means.
Understand the role that JavaScript plays in web pages.
Understand iteration.
Web pages that are purely HTML are static, and do not change over time.
JavaScript allows you to add code to your HTML document so that it can become interactive (respond to user input), and dynamic (change over time).
1) Your web page document, tables, buttons, images, links etc. are known as
objects. Each object has certain properties that can be changed.
For example, the document has a color property that can be changed by assigning it another color. We might add the following line to the SimpleJavaScript.html file.
• Place this line between the script tags of the source code from www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript1.html
document.body.style.backgroundColor = "red";
Change the color and try it again. (You can also use the hexadecimal values instead the word to represent the color. For example: document.bgColor = "#ff0000". You can search online for html color codes to find the hex codes for different colors.) Save your code.
Which property has been assigned a value in the line above?
What is the value that it has been assigned?
• Let us add an id property within the tag so we can identify that tag in our code.
Showing the alert
• Place this line within the script tags of the source code from
www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript1.html
document.getElementById("heading").style.color = "green";
Save your code.
Which property of which object has been assigned a value in the line above?
What is the value that it has been assigned?
We can even change the actual contents of the page the same way! Add the following line:
document.getElementById("heading").innerHTML = "Alert shown!";
Save your code.
Which property of which object has been assigned a value in the line above? A text property is added to the heading
What is the value that it has been assigned? "alert shown" in the heading
2) INPUT: JavaScript allows input in different ways. We will look now at the text box.
a) Copy and paste the following URL into your browser: www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript2.html
After you type the value into the text box, click outside of the text box.
What happened? An alert pops up showing the day of the week entered
b) Copy and paste the SimpleJavaScript2.html source code into your own
.html document.
Input a value into the text box and then click outside of the textbox.
The text box that is in the script above is also an object. We can refer to its
value in the following way:
document.Sample.dayOfWeek.value = "Sunday";
This statement says that the value property of the text box dayOfWeek in the form, Sample, in the document, should be assigned the value of "Sunday". The text box, form and document are all objects. The text box is an element in the form.
An event is an occurrence. An example of a user-caused event in the JavaScript code above is when the text box value changes. onChange is the event-handling attribute for the text box. The event handler is JavaScript code (no script tags are needed because event handlers are understood to be code).
In the case above, an alert box pops up with the information.
c) Change the event handler above. Some possible options are: have the background change color when something is entered, have a message print out in the input box itself, etc. NOTE: onChange is only realized when you click the mouse outside of the text box.
Changed event to:
JavaScript code:_
d) Look at www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript5.html. Copy and paste the JavaScript source code into your own .html document. Look at the code.
Here an event that is triggered is the click of a button. In the example above we have onClick as the event-handling attribute for the two buttons.
e) Change the code so that there is a choice of four colors instead of two.
JavaScript Code:
3) Here is a JavaScript example of a simple game. Play it once! Answer the following questions:
1. What was your score?
2. How did you input information into the script? Be specific.
3. How was information output to you?
3) A random number between 0 and 1 (not including 1) can be obtained by the following line of JavaScript: Math.random()
You can see this used with an alert box at: www.cs.csi.cuny.edu/~zelikovi/csc115/random1.html
To get a random number between 0 and any other number (not including that number)(let us give 5 as an example), you can multiply the statement above by that number, in this case:
Math.random()*5
You can see this used with an alert box at: www.cs.csi.cuny.edu/~zelikovi/csc115/random2.html
To make sure that these are whole numbers with no decimals, you can take the whole number part only with the addition of the following statement:
Math.floor(Math.random()*5)
You can see this used with an alert box at: www.cs.csi.cuny.edu/~zelikovi/csc115/random3.html
If you declare a variable: var number;
then you could get number to be a random number between 0-4, by assigning it as follows:
number = Math.floor(Math.random()*5);
4) Time for us to write our own JavaScript code!
You will be creating a web page that predicts the future!!!!
Begin your web page with some nice HTML lines/paragraphs welcoming the user, and explaining what your web page will do. Use color, fonts, images to make this look professional.
Create table with three buttons and a text box. The buttons are named for three areas that your page will predict. (for example, you might have buttons named: Financial, Love, School, Work, Family, etc).
When a user clicks on one of the buttons, the text box fills with a prediction for the future in that particular area. For example, if the user click on Financial, the text box might fill with "You will win the lottery tomorrow!".
To do, you will get a random number, and use an if statement to choose a prediction based upon that random number. For each of the three buttons, there will be five possible predictions and depending upon the random number, you will have the text box give a particular predition.
Below is a simple sample view of a piece of this page after the Financial button has been clicked:
5) Click on the following link to see how iteration works:
http://www.cs.csi.cuny.edu/~zelikovi/csc115/iteration1.html
• Click the button and describe what this web site does.
In fact, there are two .jpg files and they are alternatively shown. As in Part 2) above, the src attribute of the img tag is changed! You can take a look at the code using view/source and at the .jpg files that are used for this program at:
• Click on:
http://www.cs.csi.cuny.edu/~zelikovi/csc115/iteration2.html
What happens when we leave out the stop button?
This is what is termed an infinite loop! The same code is executed until we actually shut down the browser.