1 / 4

Lecture Exercise (Wk4)

Explore JavaScript functions for calculating values and implementing control structures. Learn to handle user inputs and correct errors in scripts. Discuss common coding practices like adding comments for clarity and readability.

russellhunter
Download Presentation

Lecture Exercise (Wk4)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture Exercise (Wk4) CS1301 Introduction To Computer Programming (11-12 Semester B) www.cs.cityu.edu.hk/~helena Question 1 According to the given code, what will be shown in the page? <html> <head> <title>Try calling functions</title> <script type="text/javascript"> function x1() { return 3+x2(8); } function x2(value) { return value*5; } </script> </head> <body> <script type="text/javascript"> document.write(x1()); </script> </body> </html> calculate 3 + x2(8) and then return the result • Question 2 • Complete the code on the right to show the price of the chosen food. • Learn: • To check whether one is equal to another, use ==. var f=prompt("Choose: toast($6) or sandwich($8)?",""); if (f=="toast") alert("$6"); if (______________________) _____________ (b) According to the above program code, if the user types a wrong food name, what will happen? (c) Modify the code such that : If the user types anything other than “toast” or “sandwich”, the computer will say “Wrong choice”. var f=prompt("Choose: toast($6) or sandwich($8)?",""); if (f=="toast") alert("$6"); (d) Complete the code on the right to check whether a whole number x is odd or not. (Hint: use %) var x=prompt("Input a whole number for x“,””); if (________________) alert("It is even."); else alert("It is odd."); Page 1

  2. Question 3 Mary is told to write a page which (i) firstly shows the date/time in an alert box and then (ii) shows the date-time in a span: Below is her code: <html> <head> <title>Show date-time</title> </head> <body> <script type="text/javascript"> alert(Date()); document.getElementById("datetime").innerHTML=Date(); </script> Date: <span id="datetime"></span> </body> </html> • However, after displaying (i) date/time in an alert box, it only shows an error message. • Explain the error. • (b) How to correct it? • (c) Another approach is to replace the script block by an onload event handler. Try: Unable to set value of the property ‘innerHTML’: object is null or undefined <html> <head> <title>Show date-time</title> </head> <body Date: <span id="datetime"></span> </body> </html> • (d) Rewrite (c) by adding a function called startup(); then call this function from the onload event handler. <html> <head> <title>Show date-time</title> <script type="text/javascript"> </script> </head> <body Date: <span id="datetime"></span> </body> </html>

  3. Question 4 We usually add comments to explain our code. [Reminder: this is required for our assignments] Particularly, we add comments (1) for all global variables (2) to describe functions (add simple comments before each function) (3) to briefly explain different parts of the code (4) for some complicated logic whose meaning / purpose is not obvious In formal practices, we also add comments at the beginning of the source file to show (1) brief description of the application (2) name of the person who created / modified the code (3) creation / modification dates (4) any special notes for the user Add appropriate comments to the code: Beginning / End <script type="text/javascript"> var c=0; function count( ) { c=c+1; document.getElementById("counter").innerHTML=c; } </script> Question 5 Consider the following flow-chart.What is the output if the input for n1 is 50 and n2 is 60? (Answer: output 0, 1, or 2?) Flowchart Symbols Explanation Process / Assignment Start Selection Input / Output input n1 Flow input n2 n1 equals n2 True False n1 < n2 True False Output0 Output2 Output1 End

  4. Question 6 When Mary chooses a boy friend, she wants him to be kind, polite and hardworking. She rejects those who are not kind, or not polite, or not hardworking. Which one(s) of the below is/are correct (or confusing)? if kind and polite and hardworking say “let's be friends” else say “please go away” if not kind say “please go away” else if not polite say “please go away” else if not hardworking say “please go away” else say “Great! Let's be friends!” if kind or polite or hardworking say “let's be friends” else say “please go away” if kind say “let's be friends” else if polite say “let's be friends” else if hardworking say “let's be friends” else say “please go away” if kind if polite if hardworking say “Great! Let's be friends!” say “please go away” Mother will give Mary a hat. The hat has one single color. But Mary likes pink, yellow, and blue only. For any other color she will pass it to her sister. Mary writes the “code” below. However, the code is often confusing : - Sometimes it says “put it on” but then it will say “pass to sister”. - Sometimes it says “pass to sister” but then it will say “put it on”. (i) Use flowchart to analyze it. (ii) Write the correct “code” using || . (Say one single decision only.) if pink say “put it on” else say “pass to sister” if yellow say “put it on” else say “pass to sister” if blue say “put it on” else say “pass to sister” • Correct • Correct • Correct • Correct • Correct • Wrong • Wrong • Wrong • Wrong • Wrong • Confusing • Confusing • Confusing • Confusing • Confusing

More Related