Problem Solving / JavaScript Programming

City University of New York (CUNY) City University of New York (CUNY)

CUNY Academic Works CUNY Academic Works

Open Educational Resources College of Staten Island

2024

Problem Solving / JavaScript Programming Problem Solving / JavaScript Programming

Sarah Zelikovitz

CUNY College of Staten Island

, sarah.zeliko[email protected].edu

Orit D. Gruber

CUNY College of Staten Island

, [email protected].edu

How does access to this work bene;t you? Let us know!

More information about this work at: https://academicworks.cuny.edu/si_oers/104

Discover additional works at: https://academicworks.cuny.edu

This work is made publicly available by the City University of New York (CUNY).

Contact: AcademicWorks@cuny.edu

CSI

Computer Science Dept.

CSC117\CSC119

Problem Solving / JavaScript Programming

This lab experiment is a 2-part lab, which focuses on JavaScript Programming. Upon

completing the lab, you will be able to understand each of the following:

• The definition of Algorithmic Problem Solving.

• The role of JavaScript in web pages.

• The concept of Iteration in computer programming.

PART 1

Web pages that are purely HTML are static, and do not change over time. The HTML page

that you wrote in the previous lab experiment is static, and does not change over time. That

(html) web page does not provide an option for user input.

JavaScript programming allows you to add code to your HTML document so that it can

become interactive, and change. 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).

JavaScript code within an HTML document is surrounded by the script tag :

</script>

Note: JavaScript is case sensitive, unlike HTML.

1) OUTPUT

JavaScript provides several options for a program to output (display results) to the user.

We will first focus on the alert box.

 Type or copy and paste (pls do not click on) the following URL into your browser:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript1.html

The following example shows how an alert box works. The page source code is below:

<html>

<head>

<title> Simple JavaScript </title>

</head>

<body>

<h2> Showing the alert </h2>

alert("hi");

</script>

</body>

</html>

<HTML>

<HEAD>

To prevent problems with older browsers, the JavaScript code is usually placed between

HTML comments, as follows:

< !- - Beginning of JavaScript -

(all your JavaScript instructions)

// - End of JavaScript - -->

</script>

note: The  tags are used to hide comments in HTML from the browser.

 Copy and paste the following URL into your browser:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript1.html

 Display the source code:

 Right click anywhere on the page.

 When the menu is displayed, select View Page Source.

 Copy the source code from the webpage and paste into your own .html file.

 Modify the code to change the alert message: replace hi with your own message.

 To check that this source code works: open the file in a Browser Window.

 Save your code.

If your browser window displays a warning message about active content, or the

webpages do not appear properly, proceed to do the following :

Go to Tools/Internet Options.

Click on the Advanced Tab.

Check the boxes (enable) near the following options:

∙ Allow Active content to run files on my computer

∙ Allow Active content from CDs

 Copy and paste the following URL into your browser:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScriptError.html

What does the webpage display ?

__________________________________________________

 Look at the source code using View/Source:

Click anywhere on the page

Right click

Select from the menu, View\Source

 Debug the page, by checking the first line that is not executing properly.

 Copy and paste the correct code here.

______________________________________________________

What does this page do now?

________________________________________________

 The prompt box is similar to the alert box that is discussed above. The prompt box

allows for user input. The prompt syntax is as follow:

var name=prompt("Please enter your name","Harry Potter");

The instruction above sets aside space in computer memory for the variable name. The

parentheses include the prompt and the default value for the location. In the example above,

“Please enter your name” is the prompt, and the default value is: Harry Potter.

You can also declare the variable and initialize the value using the following two statements:

var name;

name =prompt("Please enter your name","Harry Potter");

View this webpage in your web browser:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScriptPrompt.html

Describe what this webpage computes:

___________________________________________________

What is your input to this webpage:_____________________

What is the output on this webpage:____________________

 Copy & paste the source code from the following webpage into a new notepad file:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScriptPrompt.html

 Save the file with a filename of your choice with the extension .html.

 Remove the ,0 from the prompt statement.

 Open your source code in a web browser.

Describe what is displayed. Explain why this happened.

_________________________________________________________________

 Re-insert the ,0 in your source code and change the line:

total =

TOTAL =

 Open the source code in a web browser.

Describe what is displayed. Explain why this happened.

_______________________________________________________

Assignment

Create a webpage that will Compute a College Student’s Tuition Bill.

Instructions

An alert box should first Welcome the Student.

After the alert appears, your web page should display the other fees. Up to two

paragraphs in HTML is sufficient.

Your page should display three (3) prompts, requesting the name of the student, their

academic year (freshman, sophomore, junior, or senior), and the number of credits to

be taken this semester.

The price for each credit is $360 dollars. If a student takes more than 12 credits, the

additional credits (i.e. more than 12 credits) are free. Therefore, the maximum charge

for credits is $360/credit x 12 credits = $4,320.

In addition, freshmen have a student fee of $50, sophomores have a fee of $75, and

juniors and seniors have a fee of $100.

The program should compute the total tuition bill including the price for the total credits

and the student fee.

When the program is done, the amount of the tuition bill should be properly displayed.

Preparing the Algorithm

Input

Describe the data that the student needs to input (to the program) ?

Processing

Which calculations are needed in this program ?

Output

What are the results displayed when the program is done ?

PART 2

1) The web page document, tables, buttons, images, and links 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 to it a

different color. The code below could be added to the SimpleJavaScript.html file as follows:

 View the webpage below.

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript1.html

 Display the source code as follows:

 Right click anywhere on the page; a menu will be displayed.

 Select View Page Source.

 Copy the source code from the webpage into a new .html file:

 Insert the following line between the script tags in the source code:

 View the .html file in a new browser window.

 Modify the code to change the document color.

 Save the file.

 View the file again in a new browser window.

Instead of using a word to reference a color, the hexadecimal value can be used to

specify the color.

For example:

document.bgColor = “#ff0000”

Explore html color codes online for the hex codes corresponding to other colors.

 Save your code.

Which property has been assigned a value in the line above?

What is the value that has been assigned?

 Add an id property within the <h2> tag so that we can identify that tag in our code.

document.body.style.backgroundColor = "red";

<h2 id = "heading" > Showing the alert </h2>

 Copy the source code from the following webpage into your own .html file:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript1.html

 Place the following line within the script tags of the source code:

<h2 id = "heading" > Showing the alert </h2>

 Save your code.

document.getElementById("heading").style.color = "green";

(refer to the line above): What is the object ?

______________________________________________________________

What is the property of that object ? ________________________________

What is the value assigned to the property of that object ?

The actual contents of the page can be changed in 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?

_________________________________________________

What is the value of the property assigned to object document ?_______________

 Save your code.

2) INPUT

JavaScript allows input to a program in different ways. Let’s examine the text box.

a) Copy and paste the following URL into your browser:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript2.html

 Type a value into the text box, then click outside of the text box.

Describe what happens: _______________________________________________

b) Copy and paste the source code from SimpleJavaScript2.html into your own .html file.

Input a value in 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";

In the statement above the value property of the text box dayOfWeek in the form Sample, in

the document, is 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 suggestions are as follows:

Modify the code so that the background changes color when something is entered.

Modify the code so that a message is printed inside the input box.

note: onChange is activated only when you click the mouse outside of the text box.

Write the code you wrote to change the event:

________________________________________________________________

Describe how the event changed: __________________________________

d) View this webpage:

www.cs.csi.cuny.edu/~zelikovi/csc115/SimpleJavaScript5.html

 Copy and paste the JavaScript source code into a new .html file.

 Review the code.

The event that is triggered is the click of a button. In the example above the onClick

is the event-handling attribute for the two buttons.

e) Modify the code to provide a choice of four colors instead of two colors.

Write the modified code below:

3) The following is an example of a simple game in JavaScript:

https://www.cs.csi.cuny.edu/~zelikovi/csc115/hitTheDot.html

 Play the game once, by clicking on GAMe below:

GAMe

https://www.cs.csi.cuny.edu/~zelikovi/csc115/hitTheDot.html

 Proceed to answer the following questions:

a. What was your score? _____________________

b. How did you input information into the script? specify.

______________________________________________________________

10 
 
c.  How was information output (displayed) ?   
 
3) A random number between 0 and 1 (not including 1) can be obtained by running the 
following line of JavaScript code (function):    
Math.random()   
   
An example of an alert box which uses this function is below: 
 
www.cs.csi.cuny.edu/~zelikovi/csc115/random1.html   
   
To obtain a random number between 0 and any other number (not including that number), 
multiply the statement above by that number.  
 
For example, to obtain a random number between 0 and 5:   
 
Math.random()*5   
 
The following illustrates an example using an alert box: 
    
www.cs.csi.cuny.edu/~zelikovi/csc115/random2.html   
   
To produce whole numbers without decimals, extract only the whole number by adding the 
following statement:   
   
  Math.floor(Math.random()*5)   
   
An example using an alert box is displayed on the following webpage:    
 
www.cs.csi.cuny.edu/~zelikovi/csc115/random3.html   
   
If a variable number is declared as follows:  var number;  
Number can then be assigned a random number value between 0-4 using the following 
assignment statement:   
   
   number = Math.floor(Math.random()*5);   
   
4) Create a JavaScript Program

You are now ready to create 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 webpage

appear professionally presentable.

Create a table with three buttons and a text box. The buttons are named for three life

topics that your page will predict. (ex: Financial, Love, School, Work, Family, Social).

When a user clicks on one of the buttons, the text box fills with a random prediction for

the future in that particular life topic. For example, if the user clicks on

Financial, the text box may display: “You will win the lottery tomorrow!”.

Your program should get a random number, and use an “if statement” to select a

prediction based upon that random number. Each of the three buttons (life topics),

should include five possible predictions; depending upon the random number, the text

box will select a particular prediction to display.

Below is a sample of a portion of the page, after the Financial button has been clicked:

5) Iteration

❖ Click on the following link (or copy & paste into a new browser window) to see how iteration

works:

https://www.cs.csi.cuny.edu/~zelikovi/csc115/iteration1.html

❖ Click the button and describe what happens on this webpage.

_________________________________________________________________________

Note that there are two .jpg files and they are alternatively shown. As in section 2) above

(Input), the src attribute of the img tag is changed. Review the code using View/Source and

the .jpg files used for this program on the following webpage.

 Click on the following link:

http://www.cs.csi.cuny.edu/~zelikovi/csc115/iteration2.html

Describe what happens when the stop button is removed ?

When the same code is executed again and again, etc. until the browser is closed, it is known

as an infinite loop.

Congratulations ! You have completed the JavaScript Lab.

References:

1. Fluency With Information Technology, 7th edition

Lawrence Snyder, Ray Henry

2. https://www.w3schools.com/

Original Prepared and Updated: Prof. Sarah Zelikovitz, 2008 - 2022

Updated: ODG, June 2024