Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. WHAT WE RE GOING TO DO Pretest & Review of Javascript Basics Digging in – Event Handling HTML Forms Validation JS Libraries Testing/Debugging
  2. 2. WHAT IS JAVASCRIPTObject based (not object oriented) programminglanguage very limited object creation a set of pre-defined objects associated with HTML document structure many HTML tags constitute JS Objects Browser functionality provides a limited API to Browser functionality
  3. 3. JAVASCRIPT…JAVA ?There is no relationship other than the fact that Java and JavaScriptresemble each other (and C++) syntacticallyJavaScript is pretty much the de-facto standard for client-side scripting
  4. 4. WHAT CAN IT BE USED FORSome pretty amazing things…. Text animation graphic animation simple browser based application HTML forms submission client-side forms data validation (relieving the server of this task) web site navigation
  5. 5. PUTTING JAVASCRIPT INTO YOUR HTMLin an external file collect commonly used functions together into external functionlibraries on the server added benefit of privacy from all but the most curious usersin-line with your HTMLas an expression for an HTML tag attributewithin some HTML tags as Event Handlers
  6. 6. <SCRIPT><SCRIPT LANGUAGE= JavaScript ><!-- start hiding code from old browsers>YourJavascriptCodeGoesHere// Stop Hiding code --></SCRIPT>
  7. 7. PROGRAMMING FUNDAMENTALSValue Types String Sample Number 2.52 , 5 , .5 Boolean true, false Null null Object - all properties and methods belonging to the object or array Function - a function definition
  8. 8. VARIABLESNaming start with alpha followed by alphameric (and _)Creating use the var keyword var myName definition and initialization can be combined var myName = Dick
  9. 9. ARRAYSOne dimensional arrays var myarray = new Array( ) //empty array var myarray1 = new Array(10) // 10 elements var myarray2 = new Array(2,4,6) // 3 elements initialized to 2, 4,and 6 respectively0 based - myarray[0] is first element
  10. 10. USER DEFINED OBJECTSImplemented as associative arrays var point = new Object() // empty object point.x = 5 ; point.y = 3; // no longer empty var newpoint = {x:4 , y:5} // object literal form var anotherpoint = new Object( ) anotherpoint = newpoint //object assignment
  11. 11. USER DEFINED FUNCTIONSFunction definition: function sum(x,y) { return x + y; }Function Constructor var sum = Function( x , y , return x + y; )Function literal format (Javascript 1.2) var sum = Function(x,y) {return x + y;}a function assigned to a property of an object is called a method of theobjectwithin the body of a function arguments[] contains an array of thearguements
  12. 12. BUILT-IN FUNCTIONSMany commonly used functions are built into the language for: string manipulations math operations built-in object methods parsing dynamic expression evaluation
  13. 13. OBJECT HIERARCHYwindowlink anchor layer form applet image areahistory document location toolbartext radio button fileUpload selecttextareapasswordcheckbox resetsubmitoption
  14. 14. OBJECTSwindow - the current browser windowwindow.history - the Netscape history listwindow.document - the html document currently in thebrowser client areawindow.location - the browser location fieldwindow.toolbar - the browser - an array containing all of the links inthe documentwindow.document.anchor - an array of all the anchor points inthe document
  15. 15. OBJECTS (MORE…)Window.document.layer - a named document layerwindow.document.applet - a named java applet areawindow.document.image- a named image tagwindow.document.area - a named areawindow.document.form - a named form or the defaultformect, ect
  16. 16. A FEW EXAMPLES...window.location = will take you to the specified URL (like a goto)window.history.back() back( ) is a method on history will be like clicking the back button in Nav 3 in Nav 4 will take you back to prev windowwindow.history.goto(1) takes you back to first URL in history array
  17. 17. THE OBJECT MODELIt is very important to understand the object modeleach object has its own properties, some of which are read onlysome of which you can be set directly by assignment (as location)each object also has a set of behaviors called methods
  18. 18. OBJECT MODELdefaultValueformnametypevalue Red- gettable and settable=B l u r ()focus()handleEventSelect()Text ObjectHTML text tag
  19. 19. OBJECT EVENT HANDLERSMost of the objects that make up the Document ObjectModel respond to asynchronous, user generated eventsthrough predefined event handlers that handle the eventand transfer control to a user provided event handlingfunctionEach object has particular events that they will respond tothe way you specify an event handler is by adding anadditional attribute to the HTML tag that specifies theevent and the particular handler<input name=bt1 type=button value=ok onClick= abc( ); > if the button is click the function abc( ) will be run
  20. 20. EVENTSonAbortonBluronChangeonClickonErroronFocusonLoadonMouseOutonMouseOveronResetonSelectonSubmitonUnload
  21. 21. THE FORM OBJECTTag : <form name = n method = get|post action=URL>Properties: action - action attribute of tag elements[ ] - creeated from like named form elements encoding - ENCTYPE attribute of tag length - length of an elements array method - method attribute of tag name - name attribute of tag target - target attribute of tag, where to display response pageMethods handleEvent( ) reset( ) - reset all elements to initial value submit( ) - submit to server for processing (like submit button)
  22. 22. TEXT BASED OBJECTStextpasswordtextareahidden
  23. 23. PROPERTIES AND METHODS Tag: <input name=name type=fieldtype ….> Properties: defaultValue - value attribute of tag form - form that this field is an element of name - name attribute of tag type - type attribute of tag (text, password, textarea, hidden) value - user entered value or value attribute of tag Methods: blur( ) * - unselects any selected text focus( ) * - readies the field for user input handleEvent( ) * select( ) * - selects the text in the field* doesn t apply to hidden fields
  24. 24. ADDITIONAL EVENTSonKeyDown =  as soon as the key is depresses  allows filtering of key strokes before the character is displayedonKeyUp =  as soon as key is releasedonKeyUp = signals the end of a key down and a key up sequence
  25. 25. BUTTON OBJECTSbuttonsubmitresetcheckboxradio
  26. 26. CHECKBOX OBJECTProperties:  checked - true if checked, false otherwise; setting doesn t cause a click  defaultChecked - true if CHECKED attribute is present, false otherwise  name - name attribute of the tag  type - type attribute of the tag  value - value attribute of the tagMethods:  click( ) -  handleEvent( ) -Additional events  onMouseDown =  onMouseUp =
  27. 27. RADIO OBJECTone of n choicesProperties:  checked - true if checked, false otherwise; setting doesn t cause a click  defaultChecked - true if CHECKED attribute is present, false otherwise  name - name attribute of the tag  type - type attribute of the tag  value - value attribute of the tagMethods:  click( ) -  handleEvent( ) -Additional events  onMouseDown =  onMouseUp =
  28. 28. SELECT OBJECTProperties:  length - number of option elements  option[ ] - element array of the options tags  name - name attribute of the tag  selectedIndex - index of selected option  options[i].defaultSelected -  options[i].index  options[I].selectedMethods:  blur( ) -  focus() -  handleEvent( ) -
  29. 29. JS LIBRARIES jQuery YUI RGraph
  30. 30. jQuery is a lightweight, open-sourceJavaScript library that simplifiesinteraction between HTML andJavaScript
  31. 31. Create HTML elements on the flyvar  el  =  $( <div/> )  The Magic $() function
  32. 32. Manipulate existing DOM elements$(window).width()  The Magic $() function
  33. 33. Selects document elements$( div ).hide();  $( div ,  $( p )).hide();  The Magic $() function
  34. 34. $(document).ready(function(){…});  Fired when the document is ready forprogramming.Better use the full syntax:$(function(){…});  The Magic $() function
  35. 35. It may be used in case of conflict with otherframeworks.jQuery( div );  The full name of $() function is
  36. 36. var  foo  =  jQuery.noConflict();  //  now  foo()  is  the  jQuery  main  function  foo( div ).hide();  Avoid $() conflict with otherframeworks//  remove  the  conflicting  $  and  jQuery  var  foo  =  jQuery.noConflict(true);  
  37. 37. $( p ).html( <div>Hello  $!</div> );    //  escape  the  content  of  div.b  $( div.a ).text($( div.b ).html());  Getting and Setting Inner HTML Content
  38. 38. //  get  the  value  of  the  checked  checkbox  $( input:checkbox:checked ).val();  Getting and Setting Values//  set  the  value  of  the  textbox  $( :text[name= txt ] ).val( Hello );  //  select  or  check  lists  or  checkboxes  $( #lst ).val([ NY , IL , NS ]);  
  39. 39. Handling CSS Classes//  add  and  remove  class  $( p ).removeClass( blue ).addClass( red );  //  add  if  absent,  remove  otherwise  $( div ).toggleClass( main );  //  test  for  class  existance    if  ($( div ).hasClass( main ))  {  //…  }  
  40. 40. //  just  show  $( div ).show();  //  reveal  slowly,  slow=600ms  $( div ).show( slow );  //  hide  fast,  fast=200ms  $( div ).hide( fast );  //  hide  or  show  in  100ms  $( div ).toggle(100);  Showing or Hiding Element
  41. 41. YUI IS AWESOME
  42. 42. RGRAPHUses the HTML5 and creates these "HTML charts"inside the web browser using JavaScript.
  43. 43. We ve come in from the wilderness. Back in earlier dayswe had to walk both directions, uphill in the snow.console.log( rocks )
  44. 44. FIREBUG (F12)Console
  45. 45. DOM InspectorFIREBUG (F12)
  46. 46. FIREBUGBreakpoints
  47. 47. SAFARI (CTRL +ALT + I)
  48. 48. INTERNET EXPLORER 8 (F12)
  49. 49. CHROME (CTRL + SHFT + J)