1. JAVASCRIPT QUIZ BOWL By: Joseph Lindo

2. Quiz Bowl Mechanics  Group w/ 5 maximum members  Question is presented at the board  Prepare piece of papers for the group’s answer  Corresponding score is given for the correct answer  Good luck  “May the best group wins”

3. Questions:  Javascript is a/an _______ language that will allow you to add real programming to your webpages.

4. Answer: Javascript is a/an scripting language that will allow you to add real programming to your webpages.

5. Questions:  What HTML tag is use to tell the browser what scripting language will be used?

6. Answer: 

7. Questions:  JavaScript code can be placed inside the tag. True or False

8. Answer: False

9. Questions:  JavaScript is case sensitive. True or False

10. Answer:  True

11. Questions:  What JavaScript function is use to write a string into your HTML document?

12. Answer:  document.write() 

13. Questions:  What is the purpose of the tags in color red?

14. Answer:  If a browser does not support JavaScript, it will not display our code in plain text to the user!

15. Questions:  Give the ways (symbols) of putting comment in JavaScript.

16. Answer:  //  /* */

17. Questions:  JavaScript statements requires semicolon True or False

18. Answer:  False

19. Question:  HTML tag attribute used to call an external JavaScript file.

20. Answer:  What is the extension filename for a JavaScript file?

21. Question:  What do you think is the advantage of calling an external JavaScript file?

22. Answer:  Application of OOP2 concept

23. Question:  What is the syntax in declaring variables in JavaScript?

24. Answer:  var

25. Question:  JavaScript variable names should not start with a numeral (0-9). True or False

26. Answer:  True

27. Question:  JavaScript has different datatypes. True or False

28. Answer:  False  Loose datatypes

29. Question:  Give the three types of operators in JavaScript.

30. Answer:  Arithmetic Operators  Relational Operators  Logical Operators

31. JAVASCRIPT QUIZ BOWL Part 2 By: Joseph Lindo

32. Questions:  What is the syntax for if else block in JavaScript?

33. Answer:  If ( ) { [Statement]* } else{ [Statement]* }

34. Instruction:  Select the best two JavaScript programmers of your group.  This time, it is a board work activity.

35. Problem:  Declare grade, cs and exam variables.  Grade is computed same in our university.  Display the ff. if the grade is: 95 – 99  Excellent 90 – 94  Very good 80 – 89  Good 75 – 79  Fair below 75  Failed

36. Questions:  What is the syntax for while block in JavaScript?

37. Answer:  while ( ) { [Statement]* }

38. Questions:  What is the syntax in creating function in JavaScript?

39. Answer:  function ([parameters]) { }

40. Questions:  Give one way on how to call function in JavaScript.

41. Answer:

42. Questions:  What is the JavaScript keyword used to get value from a function?

43. Answer:  return

44. Instruction:  Select the best Four JavaScript programmers of your group.  This time, it is an actual programming activity.

45. Problem:  Create an HTML code that has a single button labeled with “Print”.  Print button calls a JavaScript function that display your group name.  You have 2- 4 minutes to finish the activity.  Goodluck.

46. JAVASCRIPT QUIZ BOWL Part 3 By: Joseph Lindo

47. ehe  Joke lang...  Discussion mode

48. JavaScript Events Handler  Events  Something happened  Event Handlers  allow to run your bits of code when events occur  all the event handlers in JavaScript start with the word on, and each event handler deals with a certain type of event

49. JavaScript getElement  getElementById() function  getElementByName() function

50. Mouse Events  onclick  ondblclick  onmousemove  onmousedown  onmouseup  onmouseout  onselect

51. JS Window Object  Top level object in JavaScript  Has events also  Has methods also  alert

52. JS Window Object Events  Onload  window.onload=function(){ runsomefunction() }

53. JS Window Object Events  Onunload  Fires when the page is unloaded- process cannot be overruled at this point. Often used to run code cleanup routines.  window.onunload=function(){ runsomefunction() }

54. JS Window Object Methods  alert(“ “)  Displays an Alert dialog box with the desired message and OK button.

55. JS Window Object Methods  confirm(“ “)  Displays a Confirm dialog box with the specified message and OK and Cancel buttons. Returns either true or false  yourstate=window.confirm(“Exit?”) if (yourstate) { window.alert("Good!")}

56. JS Window Object Methods  find(string, [casesensitive], [backward])  Searches for the "string" within the page, and returns true or false, accordingly.

57. JS Window Object Methods  open(URL, [name], [features], [replace])  Opens a new browser window.  "Name" argument specifies a name that you can use in the target attribute of your tag.  "Features" specifies the windows properties  "Replace" is a Boolean argument that denotes whether the URL loaded into the new window should add to the window's history list.

58. JS Window Object Methods

59.  open(URL, [name], [features], [replaced])  window.open("http://www.dynamicdrive. com", "", "width=800px, height=600px, resizable")

60. JS Window Object Methods  prompt(msg, [input])  Displays a Prompt dialog box with a message.  Optional "input" argument allows you to specify the default input  This function returns the string the user has entered

61. JS Window Object Methods  prompt(msg, [input])  var yourname=window.prompt("please enter your name") alert(yourname)

62. JS Window Object Methods  resizeTo(x, y)  Resizes a window to the specified pixel values  window.resizeTo(screen.availWidth/2, screen.availHeight/2)

63. JS Window Object Methods  moveTo(x, y)  Moves a window to the specified coordinate values, in pixels.

64.  open(URL, [name], [features], [replaced]) optionexplanation toolbar = yes | noadd/remove browsers toolbar location = yes | noadd/remove browsers location field directories = yes | no add/remove browsers directories field status = yes | noadd/remove browsers status field menubar = yes | noadd/remove browsers menubar scrollbars = yes | noadd/remove browsers scrollbars resizeable = yes | noallow new window to be resizable width = valuewindow width in pixels height = valuewindow height in pixels JS Window Object Methods

65.  open(URL, [name], [features], [replaced]) JS Window Object Methods PageURL="http://www.mydomain.com/myfile.html"; WindowName="MyPopUpWindow"; settings= "toolbar=yes,location=yes,directories=yes,"+ "status=no,menubar=no,scrollbars=yes,"+ "resizable=yes,width=600,height=300"; MyNewWindow= window.open(PageURL,WindowName,settings);

66. JS Form Validation  Javascript is a strong tool for validating forms before sending the content.  The most obvious things to check for are whether an emailaddress has valid syntax, or if fields meant for values have text entered, etc.

67. JS Form Validation

68.  Techniques:  emailvalidation  will check to see if a value lives up to the general syntax of an email.  valuevalidation  will check to see if a value is within a certain interval.

69. JS Form Validation  Techniques:  digitvalidation  will check to see if a value consits of a certain number of digits.  emptyvalidation  will check to see if a field is empty or not.

70. JS Form Validation  The validation can take place as the visitor enters values, or all at once upon clicking the submit button after entering the values.  Each validation function can easily be customized to fit the needs of the fields they are checking.

71. JS Form Validation  Techniques Code:  emailvalidation(this,text)  valuevalidation(this,min,max,text,type)  digitvalidation(this,min,max,text,type)  emptyvalidation(this,text)

72. JS Form Validation  emailvalidation function emailvalidation(entered, alertbox){ with (entered){ apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); lastpos=value.length-1; if (apos 3 || lastpos-dotpos<2) { if (alertbox) {alert(alertbox);} return false;} else {return true;} } }

73. JS Form Validation  valuevalidation function valuevalidation(entered, min, max, alertbox, datatype){ with (entered){ checkvalue=parseFloat(value); if (datatype){ smalldatatype=datatype.toLowerCase(); if (smalldatatype.charAt(0)=="i") {checkvalue=parseInt(value)}; } if ((parseFloat(min)==min && checkvalue max) || value!=checkvalue) {if (alertbox!="") {alert(alertbox);} return false;} else {return true;} } }

74. JS Form Validation  digitvalidation function digitvalidation(entered, min, max, alertbox, datatype){ with (entered){ checkvalue=parseFloat(value); if (datatype){ smalldatatype=datatype.toLowerCase(); if (smalldatatype.charAt(0)=="i") { checkvalue=parseInt(value); if (value.indexOf(".")!=-1) {checkvalue=checkvalue+1}} } if ((parseFloat(min)==min && value.length max) || value!=checkvalue) {if (alertbox!="") {alert(alertbox);} return false;} else {return true;}} }

75. JS Form Validation  emptyvalidation function emptyvalidation(entered, alertbox){ with (entered){ if (value==null || value=="") {if (alertbox!="") {alert(alertbox);} return false;} else {return true;} } }

76. JS Form Validation  Using Validation:  onChange()  onSubmit()

77. JS Form Validation  onChange()

78. JS Form Validation  onSubmit()

79. JS Form Validation  onSubmit() function formvalidation(thisform){ with (thisform){ if (emailvalidation(Email,"Illegal E-mail")==false) {Email.focus(); return false;}; if (valuevalidation(Value,0,5,"Value MUST be in the range 0- 5")==false) {Value.focus(); return false;}; if (digitvalidation(Digits,3,4,"You MUST enter 3 or 4 integer digits","I")==false) {Digits.focus(); return false;}; if (emptyvalidation(Whatever,"The textfield is empty")==false) {Whatever.focus(); return false;}; } }

80. JS Browser Detection  it is useful to detect the visitor's browser type and version  the page will then automatically load the page the user should be presented with  Javascript is an ideal tool for this purpose

81. JS Browser Detection  browser detection is based on the navigator object  it is pretty simple to write a script that will read these variables and return the name and version of the current browser

82. JS Browser Detection

83. JAVASCRIPT -- END -- By: Joseph Lindo