JAVASCRIPT QUIZ BOWL By: Joseph Lindo

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”

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

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

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

Answer: 

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

Answer: False

Questions:  JavaScript is case sensitive. True or False

Answer:  True

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

Answer:  document.write() 

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

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

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

Answer:  //  /* */

Questions:  JavaScript statements requires semicolon True or False

Answer:  False

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

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

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

Answer:  Application of OOP2 concept

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

Answer:  var

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

Answer:  True

Question:  JavaScript has different datatypes. True or False

Answer:  False  Loose datatypes

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

Answer:  Arithmetic Operators  Relational Operators  Logical Operators

JAVASCRIPT QUIZ BOWL Part 2 By: Joseph Lindo

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

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

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

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

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

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

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

Answer:  function ([parameters]) { }

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

Answer:

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

Answer:  return

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

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.

JAVASCRIPT QUIZ BOWL Part 3 By: Joseph Lindo

ehe  Joke lang...  Discussion mode

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

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

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

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

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

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() }

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

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!")}

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

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.

JS Window Object Methods

 open(URL, [name], [features], [replaced])  window.open(" com", "", "width=800px, height=600px, resizable")

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

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

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

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

 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

 open(URL, [name], [features], [replaced]) JS Window Object Methods PageURL=" 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);

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 address has valid syntax, or if fields meant for values have text entered, etc.

JS Form Validation

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

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.

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.

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

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

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;} } }

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;}} }

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

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

JS Form Validation  onChange()

JS Form Validation  onSubmit()

JS Form Validation  onSubmit() function formvalidation(thisform){ with (thisform){ if ( validation( ,"Illegal ")==false) { .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;}; } }

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

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

JS Browser Detection

JAVASCRIPT -- END -- By: Joseph Lindo