ECA 225 Applied Interactive Programming ECA 225 Applied Online Programming control structures, events, objects

ECA 225 Applied Interactive Programming Control Structures  Conditionals – allow scripts to make decisions  if  if/else  if/else/if  switch  Loops – executes same code a certain number of times  while  for  do/while  with

ECA 225 Applied Interactive Programming Conditionals: if statements  if if ( condition ) { statements if True } if (dogName == “Halle” ){ document.write( “You are a Golden Retriever” ); }

ECA 225 Applied Interactive Programming Conditionals: if statements cont …  if / else if ( condition ) { statements if True } else { statements if False } if(dogName = = “Halle” ){ document.write( “You are a Golden Retriever” ) ; } else{ document.write( “You are not my dog” ); }

ECA 225 Applied Interactive Programming Conditionals: if statements cont …  if / else if / else if ( condition ) { statements if first condition is True } else if (condition ) { statements if second condition is True } else { statements if False }

ECA 225 Applied Interactive Programming Conditionals: if statements cont …  if / else if / else if ( dogName = = “Halle” ){ document.write( “You are a Golden Retriever” ); } else if ( dogName = = “Marley” ){ document.write( “You are a Border Collie” ); } else if( dogName = = “Boo” ){ document.write( “You are a Monster” ); } else{ document.write( “You are not my dog” ); }

ECA 225 Applied Interactive Programming Conditional Conditional – takes place of if/else statement condition ? statements if True : statements if False age < 36 ? document.write( “You young pup!” ) : document.write( “You’re old!” );

ECA 225 Applied Interactive Programming Conditionals: switch switch( expression ) { case label1: statements; break; case label2: statements; break;... default: statements; }

ECA 225 Applied Interactive Programming Conditionals: switch cont … switch (dogName ) { case “Halle”: document.write( “ You are a Golden Retriever. ” ); break; case “Marley”: document.write( “ You are a Border Collie. ” ); break; case “Boo”: document.write( “ You are a Monster. ” ); break; default: document.write( “ You aren’t one of my dogs. ” ); } // end switch

ECA 225 Applied Interactive Programming Loops: while while( expression ) { statements } var x = 1; while( x <= 10 ){ document.write( x + “ ” ); x++; }

ECA 225 Applied Interactive Programming Loops: do…while do { statements } while ( condition ) var x = 1; do{ document.write( x + “ ” ); x++; } while( x <= 10 )

ECA 225 Applied Interactive Programming Loops: for for( initialize ; condition ; update ) { statements } for( x = 1; x <= 10; x++ ){ document.write( x + “ ” ); }

ECA 225 Applied Interactive Programming JavaScript Dialog Boxes  3 JavaScript methods to interact with user:  alert( )  used to alert the user with a message  takes one argument, the text which will appear in the alert box alert( “This is the message that will appear” );

ECA 225 Applied Interactive Programming JavaScript Dialog Boxes cont …  3 JavaScript methods to interact with user:  prompt( )  used to prompt the user for some information  takes two arguments, the prompt messaged, and a default response  returns the string typed in by the user var first_name = prompt( “Please enter your first name”, “” );

ECA 225 Applied Interactive Programming JavaScript Dialog Boxes cont …  3 JavaScript methods to interact with user:  confirm( )  asks the user to make a choice  takes one argument, the message which appears in the confirm box  returns a Boolean value var x = confirm( “Do you want to continue?” ); if( x ){ … }

ECA 225 Applied Interactive Programming Functions Functions are snippets of code that can be used over again in one script JavaScript has many built-in methods ( functions ) used to perform a specific task EG, Math.sqrt( ) takes a number and returns the square root // the following code calls the JavaScript method sqrt( ) var n = 49; document.write( Math.sqrt( n ) ); \\ prints the number 7

ECA 225 Applied Interactive Programming Functions cont … Programmers can define their own functions which perform specific tasks  declare using keyword function  follow by function name, using same rules for naming variables  parentheses after function name to hold arguments  curly brackets contain function statements  to call function, use the name followed by parentheses  return statement can be used to return a value  JavaScript has many built-in methods

ECA 225 Applied Interactive Programming Functions cont … simple functions // the following code calls the function alertUs( ) alertUs( ); function alertUs( ) { alert( “You have been alerted!” ); }

ECA 225 Applied Interactive Programming Functions cont … // the following code calls the function alertUs( ) var mess1 = “This is a message.”; alertUs( mess1 ); function alertUs( msg ) { alert( msg ); } functions taking one argument

ECA 225 Applied Interactive Programming Functions cont … var x = 3; var y = 6; var z = 11; document.write( “The answer is “ + mult( x, y ) ); // 18 document.write( “The answer is “ + mult( y, z ) ); // 66 // this function multiplies two numbers and returns the product function mult( a, b ) { c = a * b; return c; } // this is the end function mult( ) functions taking two arguments and returning a value

ECA 225 Applied Interactive Programming Events some kind of action performed by the user, such as clicking the mouse, rollover, submit a form Examples of events include:  click  mouseOver  mouseOut  submit

ECA 225 Applied Interactive Programming Events cont …  because JavaScript is client-side, user actions can be tracked  to capture the action, use commands called event handlers  an event handler is the name of the event with prefix on  using event handlers, we can associate a response with the user’s action

ECA 225 Applied Interactive Programming Events cont …  a function can be associated with an event handler function myTest( x ){ alert( x ); }

ECA 225 Applied Interactive Programming Events cont …  event handlers are case insensitive when used in HTML  event handlers are case sensitive when used in JavaScript  Other event handlers include  onMouseOver  onMouseOut  onClick  onSelect

ECA 225 Applied Interactive Programming Objects  everything in an HTML page is an individual object  each object has properties (characteristics that define the object) and methods (behaviors or actions) associated with it  some properties can be accessed and changed  most objects have properties and methods associated with them

ECA 225 Applied Interactive Programming Objects cont …  objects can contain other objects Window Document Image 1 Image 2 Form Link Text Box 1Text Box 2Text Area

ECA 225 Applied Interactive Programming Objects cont …  refer to objects by the name we give them Window Document img1 img2 myForm link1 firstNamelastNamecomments

ECA 225 Applied Interactive Programming Objects cont …  to refer to objects, properties, and methods use dot syntax  start at top-most object, usually window or document, including each object/property until we get to the one we want  EG, alert is a method of the window object  In general, we can omit the window object window.alert( “Hi “); ~~ or ~~ alert( “Hi” );

ECA 225 Applied Interactive Programming Objects cont …  to access what the user types into a form, we can use the value property function myTest( ){ var fName = document.myForm.first_name.value; alert( fName ); }

ECA 225 Applied Interactive Programming Objects cont …  using a function with the Form object function checkForm( ){ checkNames( fName = document.myForm.fName.value ); checkNames( lName = document.myForm.lName.value ); } function checkNames( nameInput ){ if( nameInput = = “” ){ document.write( “Please enter a value” ); return false; } First Name: Last Name:

ECA 225 Applied Interactive Programming Objects cont …  some of JavaScript’s objects  Array  Date  document  Form  Image  location  Math  String  window