review - cityucs - cityu cshelena/misc/cs1102201920b/... · 2020-03-13 · adding css: cursor ....
TRANSCRIPT
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>
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"/>
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>
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>
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>
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>
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>
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>
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>
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>
11
Supplementary example #1
Note: if “()” is not given for (Number(age+1)), then it will show the age 281!!
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.
13
For slide#12
14
For slide#12
15
For slide#14
16
For slide#14
17
For slide#16
18
For slide#16
19
Math.random()
Math.random()*6
Math.floor(Math.random()*6)
Math.floor(Math.random()*6)+1
20
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>