Your SlideShare is downloading. ×
JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

JavaScript

439
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
439
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WHAT WE RE GOING TO DO Pretest & Review of Javascript Basics Digging in – Event Handling HTML Forms Validation JS Libraries Testing/Debugging
  • 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. 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. 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. 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. <SCRIPT><SCRIPT LANGUAGE= JavaScript ><!-- start hiding code from old browsers>YourJavascriptCodeGoesHere// Stop Hiding code --></SCRIPT>
  • 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. 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. 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. 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. 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. 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. OBJECT HIERARCHYwindowlink anchor layer form applet image areahistory document location toolbartext radio button fileUpload selecttextareapasswordcheckbox resetsubmitoption
  • 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 toolbarwindow.document.link - an array containing all of the links inthe documentwindow.document.anchor - an array of all the anchor points inthe document
  • 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. A FEW EXAMPLES...window.location = http://www.yahoo.com 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. 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. OBJECT MODELdefaultValueformnametypevalue Red- gettable and settable=B l u r ()focus()handleEventSelect()Text ObjectHTML text tag
  • 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. EVENTSonAbortonBluronChangeonClickonErroronFocusonLoadonMouseOutonMouseOveronResetonSelectonSubmitonUnload
  • 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. TEXT BASED OBJECTStextpasswordtextareahidden
  • 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. 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. BUTTON OBJECTSbuttonsubmitresetcheckboxradio
  • 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. 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. 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. JS LIBRARIES jQuery YUI RGraph
  • 30. jQuery is a lightweight, open-sourceJavaScript library that simplifiesinteraction between HTML andJavaScript
  • 31. Create HTML elements on the flyvar  el  =  $( <div/> )  The Magic $() function
  • 32. Manipulate existing DOM elements$(window).width()  The Magic $() function
  • 33. Selects document elements$( div ).hide();  $( div ,  $( p )).hide();  The Magic $() function
  • 34. $(document).ready(function(){…});  Fired when the document is ready forprogramming.Better use the full syntax:$(function(){…});  The Magic $() function
  • 35. It may be used in case of conflict with otherframeworks.jQuery( div );  The full name of $() function is
  • 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. $( p ).html( <div>Hello  $!</div> );    //  escape  the  content  of  div.b  $( div.a ).text($( div.b ).html());  Getting and Setting Inner HTML Content
  • 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. 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. //  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. YUI IS AWESOME
  • 42. RGRAPHUses the HTML5 and creates these "HTML charts"inside the web browser using JavaScript.
  • 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. FIREBUG (F12)Console
  • 45. DOM InspectorFIREBUG (F12)
  • 46. FIREBUGBreakpoints
  • 47. SAFARI (CTRL +ALT + I)
  • 48. INTERNET EXPLORER 8 (F12)
  • 49. CHROME (CTRL + SHFT + J)