![Page 1: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/1.jpg)
1
Review:
* head section, body section
* img element, src attribute, alt attribute
* h1 element
* style block: CSS
* Relative URL vs Absolute URL
<!DOCTYPE html> <html> <head> <title>HTML Image Alternate Text</title>
<style>
h1 { color:red; } </style> </head> <body> <h1>Image Display</h1> <img src="images/character.png" alt="a male character"/> </body> </html>
![Page 2: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/2.jpg)
2
For Slide#2-3
Adding CSS: cursor
Inside a webpage, there is the document object (also the window object, element objects etc..) (https://www.w3schools.com/js/js_htmldom_document.asp )
For example, we can alert(document.lastModified);
<!DOCTYPE html> <html> <head> <title>HTML Image Alternate Text</title> <style> h1 {color: red;} </style> <script> function myclick() { alert("Welcome to CS2312!"); } function myclickWarning() { alert("Don't miss my class!"); } </script> </head> <body> <h1>Image Display</h1> <h2 onclick = "myclick();">Click Me</h2> <img onclick = "myclickWarning();" src="file:///C:/Users/cshwong/Desktop/example/images/character.png" alt="Howard"/> <img src="images/character.png" alt="Howard"/> <img src="images/../images/character.png" alt="Howard"/> <!-- "../" means go up one level --> </body> </html>
.. <head> <title>HTML Image Alternate Text</title> <style> h1 {color: red;} h2 {cursor: pointer;} </style> ..
<h2 onclick = "myclick();">Click Me</h2>
<img onclick = "myclickWarning();" src="file:///C:/Users/cshwong/Desktop/example/images/character.png" alt="Howard"/>
<img onclick = "alert('Hello');" src="images/character.png" alt="Howard"/>
<img onclick = "alert(document.lastModified);" src="images/../images/character.png" alt="Howard"/>
![Page 3: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/3.jpg)
3
For slide#4
Inside a webpage, there is the document object (also the window object, element objects etc..) (https://www.w3schools.com/js/js_htmldom_document.asp )
For example, we can refer to document.getElementById([an ID]).innerHTML (Recall: Lab06)
Using id with CSS Lucky number: Math.random()
<!DOCTYPE html> <html> <head> <title>Demo Slide 4</title> <script> function showDynamicContent() { document.getElementById("welcome").innerHTML = "<h2>Welcome!</h2>"; } </script> </head> <body onload="alert('content is coming'); showDynamicContent();"> <h1>CS1102</h1> <div id="welcome"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Demo Slide 4</title> <style> #welcome {color: red;} </style> <script> function showDynamicContent() { document.getElementById("welcome").innerHTML= "Welcome! Your lucky number is " + Math.random(); } </script> </head> <body onload="alert('content is coming'); showDynamicContent();">
<h1>CS1102</h1> <div id="welcome"></div> </body> </html>
![Page 4: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/4.jpg)
4
For slide #5
Before adding comments:
After adding comments:
<!DOCTYPE html> <html>
<head>
<title>Comments</title>
<style> #course { color: red; } </style>
<script> function init() { document.getElementById("course").innerHTML="<h2>Introduction to Computer Studies</h2>"; } </script>
</head>
<body onload="init();"> <h1>CS1102</h1> <div id="course"></div> </body>
</html>
<!DOCTYPE html> <html>
<head>
<title>Comments</title>
<style> /* The following CSS style sets the corresponding div element with color red */ #course { color: red; } </style>
<script> function init() { // this function is called after the webpage has been loaded /* The following statment dynamically replaces the content of the corresponding div elemnt by the given string */ document.getElementById("course").innerHTML="<h2>Introduction to Computer Studies</h2>"; } </script>
</head>
<body onload="init();"> <!-- Page content begins here --> <h1>CS1102</h1> <!-- the following div element's content is empty in the HTML and will be assigned by Javascript after the webpage has been loaded --> <div id="course"></div> <!-- Page content ends here --> </body>
![Page 5: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/5.jpg)
5
For slide#6
<!DOCTYPE html> <html> <head> <title>Javascript Input Prompt</title> <script> function init() { var name; // declare a variable name = prompt("What is your name?"); // assign the user input to the variable document.getElementById("hello").innerHTML = "Hello " + name + "!"; } </script> </head> <body onload="init();"> <div id="hello"></div> <p>Welcome to CS1102!</p> </body> </html>
![Page 6: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/6.jpg)
6
For slide#7
• Writing s = [some value / expression]; means to change the content of the left-hand-side to the given value or the result of the operation from the right-hand-side.
• Given a text string inside variable s, Writing s = s + […]; means to change the content of s (left-hand-side) to the result of joining the current value of s and […].
<!DOCTYPE html> <html> <head> <title>Javascript Arithmetic Operators</title> <script> function init() { var s = ""; var x,y,z; x = 7%3; s = s + "x = 7%3 =" + x + "<br /><br />"; y = 1; s = s + "Initially y = " + y + "<br />"; y++; s = s + "After y++, y = " + y + "<br /><br />"; z = 2; s = s + "Initially z = " + z + "<br />"; z--; s = s + "After z--, z = " + z + "<br /><br />"; document.getElementById("display").innerHTML = s; } </script> </head> <body onload="init();"> <h1>Javascript Arithmetic Operators</h1> <div id="display"></div> </body> </html>
![Page 7: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/7.jpg)
7
For slide#8
• The expression Number(input) converts the string input to its numerical value so that it can be manipulated as a number
<!DOCTYPE html> <html> <head> <title>Javascript Comparison and Logical Operators</title> <script> function init() { var s = ""; var input = prompt("Enter a month (1-12):"); var month = Number(input); if (month>8 && month <=12) s = s+"This month is in Semester A\n"; if (month == 12 || month < 3) s = s+"This is a winter month.\n"; if (month != 12) s = s+"Santa Claus is not coming this month.\n"; alert(s); } </script> </head> <body onload="init();"> <h1>Logical Operators</h1> </body> </html>
![Page 8: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/8.jpg)
8
For slide#9
Try:
alert(Number(p)+Number(p));
alert(p+p);
<!DOCTYPE html> <html> <head> <title>Javascript One-Way Conditional</title> <script> function init() { var p; var currentDate = new Date(); p = prompt("What is your birth month? (1-12)"); if (Number(p)==currentDate.getMonth()+1) alert("Happy Birthday!"); } </script> </head> <body onload="init();"> <h1>One Way Conditional</h1> </body> </html>
![Page 9: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/9.jpg)
9
For slide#10
<!DOCTYPE html> <html> <head> <title>Javascript Two-Way Conditional</title> <script> function init() { var p, s; s = ""; p = prompt("What is your attendance rate in percentage in this course CS1102? (0-100)"); if (Number(p)>90) s = s+"You have excellent attitude!\n"; else s = s+"Please take the effort to attend the class more often.\n"; s = s+"Good luck with your quiz and exam!"; alert(s); } </script> </head> <body onload="init();"> <h1>Two-Way Conditional</h1> </body> </html>
![Page 10: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/10.jpg)
10
For slide#11
<!DOCTYPE html> <html> <head> <title>Javascript N-Way Conditional</title> <script> function init() { var p, s, cgpa; s = ""; p = prompt("What is the CGPA"); cgpa = Number(p); if (cgpa >= 3.5) s = "1st Class Honours"; else if (cgpa >= 3.0) s = "Upper 2nd Class Honours"; else if (cgpa >= 2.5) s = "Lower 2nd Class Honours"; else if (cgpa >= 2.0) s = "3rd Class Honours"; else if (cgpa >= 1.7) s = "Pass"; else s = "No Award"; alert(s); } </script> </head> <body onload="init();"> <h1>N-Way Conditional</h1> </body> </html>
![Page 11: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/11.jpg)
11
Supplementary example #1
Note: if “()” is not given for (Number(age+1)), then it will show the age 281!!
![Page 12: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/12.jpg)
12
Supplementary example #2
Do not add ;
It means an empty-statement that the loop will repeat.
ie. the loop repeats do nothing instead of ‘alert(“Hello”);’
After the loop finishes repeating do nothing, then alert(“Hello”); will be done only one time, just like the alert statement is the subsequent step not related to the loop and will just run after the loop.
![Page 13: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/13.jpg)
13
For slide#12
![Page 14: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/14.jpg)
14
For slide#12
![Page 15: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/15.jpg)
15
For slide#14
![Page 16: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/16.jpg)
16
For slide#14
![Page 17: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/17.jpg)
17
For slide#16
![Page 18: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/18.jpg)
18
For slide#16
![Page 19: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/19.jpg)
19
Math.random()
Math.random()*6
Math.floor(Math.random()*6)
Math.floor(Math.random()*6)+1
![Page 20: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/20.jpg)
20
![Page 21: Review - CityUCS - CityU CShelena/misc/cs1102201920B/... · 2020-03-13 · Adding CSS: cursor . Inside a webpage, there is the document object (also the window object, element objects](https://reader033.vdocuments.us/reader033/viewer/2022060223/5f07dd1b7e708231d41f21c9/html5/thumbnails/21.jpg)
21
For slide#17
<!DOCTYPE html> <html> <head> <title>Javascript Array</title> <script> function init() { var lastday = [31,28,31,30,31,30,31,31,30,31,30,31]; for (i=0; i<12; i++) { document.getElementById("lastdaylist").innerHTML += (i+1) + "-" + lastday[i] + "<br/>"; } } </script> </head> <body onload="init();"> <h1>Javascript Array</h1> The last day of each month in 2019: <br/> <div id="lastdaylist" ></div> </body> </html>