1 / 48

JavaScript JQuery

JavaScript JQuery. JavaScript. Resources. Resources:. JavaScript  Guide - MDC Doc Center developer. mozilla .org /en/ JavaScript /Guide Mozilla JavaScript Scripting Resources www.mozilla.org/ js / scripting. Introduction. Introduction to JavaScript NOT Java

marlon
Download Presentation

JavaScript JQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScriptJQuery JavaScript Resources

  2. Resources: JavaScript Guide - MDC Doc Center developer.mozilla.org/en/JavaScript/Guide MozillaJavaScriptScripting Resources www.mozilla.org/js/scripting

  3. Introduction • Introduction to JavaScript • NOT Java • JavaScript was developed by Netscape • Java was developed by Sun • Designed to ‘plug a gap’ in the techniques • available for creating web-pages • Client-side dynamic content • Interpretedlanguage JavaScript

  4. JavaScriptvs JAVA Historically… • Complementary – JavaScript • Cannot draw, multi-thread, network or do I/O • Java • Cannot interact with Browser or control content JavaScript

  5. JavaScriptvs JAVA • JavaScript is becoming what Java was • originally intended to be • Java Applets weremeant to be lightweight • downloadable programs run within the browser for cross-platform compatibility • JAVAwas slow, inefficient • JAVA had many implementations • JavaScript is actually lightweight • accomplish most of what Applets do with a • fraction of the resources JavaScript

  6. JavaScriptVersions JavaScript 1.5 was introduced back in 1999, so no worries. JavaScriptisderivedfrom a standard calledECMAScript. In most browsersJavaScript = JavaScript. However, insomebrowseritis not true… e.g. Microsoft Internet Explorer -> JScript. JavaScript

  7. JavaScripttoday... • What is it used for today? • Handling User Interaction • Doing calculations • Checking for accuracy and appropriateness of data informs • Doing calculations/manipulations of forms input data • Search a small databased embedded in the downloaded page • Save data as cookie so it is there upon visiting the page • Generating Dynamic HTML documents • Examples • Bookmarklets • Google Maps • Google Suggest JavaScript

  8. Want more… ? • GrooveShark.com • GoogleCalendar • Aviary.com • www.alexbuga.com • … JavaScript

  9. Embedding scripts in HTML <scripttype="text/javascript"> // Write a headingdocument.write("<h1>This is a heading</h1>"); // Writetwoparagraphs:document.write("<p>Thisis a paragraph.</p>");document.write("<p>Thisisanotherparagraph.</p>"); </script> <scripttype="text/javascript" src="script.js"></script> JavaScript LanguageSyntax

  10. Variables and Literals • Declaration • Explicit: var i = 12; // no ‘var’ indeclaration • Implicit: i = 12; • VariableScope • Global • Declaredoutsidefunctions • Any variableimplicitlydefined • Local • Explicitdeclarationsinsidefunctions JavaScript LanguageSyntax

  11. Variables and Literals Dynamic Typing - Variables can hold any valid type: Number … varmyInt = 7; Boolean … varmyBool = true; Function … [Discussed Later] Object … [Discussed Later] Array … varmyArr = new Array(); String … varmyString = “abc”; Can hold values of different types JavaScript LanguageSyntax

  12. ArithmeticOperators JavaScript LanguageSyntax

  13. AssignmentOperators JavaScript LanguageSyntax

  14. ControlFlow • ‘if’ statement if ( boolean statement ) { … } else { … } • ‘switch’ statement switch ( myVar ) { case 1: // if myVar is equal to 1 this is executed break; case default: // if none of the cases above are satisfied OR if no ‘break’ statement are used in the cases above,this will be executed } JavaScript LanguageSyntax

  15. ControlFlow Checkinthedocumentation: • while, and do-while loops, for loops • break and continue keywords JavaScript

  16. Functions Call a function the same way You would in C myFunc(arg1, arg2, …); Declare a function using the ‘function’keyword No return type, nor typing of arguments function add(numOne, numTwo) { return numOne + numTwo; } JavaScript

  17. Output The DOM document objects allows printing directly into the browser page • window object is implied Writing in text or HTML with script – No line-break document.write(“I am <B>BOLD</B>”); – With line-break document.writeln(“I am <U>underlined</U>”); JavaScript

  18. A littlemoreadvanced… <scripttype="text/javascript">vartxt="";functionmessage(){try  {adddlert("Welcomeguest!");  }catch(err)  {txt="There was an error on thispage.\n\n";txt+="Click OK to continueviewingthispage,\n";txt+="orCancel to return to thehomepage.\n\n";if(!confirm(txt))    {document.location.href="http://www.w3schools.com/";    }  }} </script> JavaScript

  19. Objects • Not a fullblown OO language, but objectoriented • Youcandefine your own objects • Youcanmake your own variable types. Lookingagainatthepreviousslide… JavaScript

  20. DeclaringObjects functionLecture(myTime,myPlace, mySubject) { this.time = myTime; this.place = myPlace; this.subject = mySubject; } varlect = newLecture(„08:00”,“Here”, „JS”); JavaScript

  21. WorkingwithObjects • Accessing object’s properties • document.writeln(‘Subject: ‘ + lect.subject); • Objects and Associative Arrays are in fact two interfaces to the same data structure so…: • document.writeln(‘Subject: ‘ + lect[“subject”]); JavaScript

  22. InheritanceinJavaScript • No built-in inheritance • Runtime Inheritance: Clone objects and add extra properties JavaScript

  23. Global Properties and Functions JavaScript

  24. Built-inObjects (some) • Number, Boolean, String • Primitive types are automatically converted to Objects when assigned to variables varstr = “abc”; //var is a String object! • String has some helpful properties/functions: • length • toUpperCase • substring • link • Date • No properties, but contains a bunch of methods for getting, setting and manipulating dates. • Math • Calculate PI, find the SIN or COS of an angle, etc. JavaScript

  25. DOM and JS • Browser – Built-in Objects • window.location • href represents a complete URL. • hostname represents the concatenation host:port. • window.location.href=“http://www.google.com”; • window.history • length reflects the number of entries in the history list • history.go(-1) • history.back() JavaScript

  26. DOM and JS • Window • alert("message") • window.close() • confirm("message") • focus() • open("URLname","Windowname",["options"]) • height, weight, alwaysRaised, location, menubar open(“http://google.com”, “Google”,“toolbar=no,alwaysRaised=yes”); JavaScript

  27. HTML Objects Hierarchy JavaScript

  28. JavaScript

  29. jQuery lightweightJavascriptframework JavaScript

  30. jQ, HTML, DOM JavaScript

  31. jQuery • Veryeasy and powerfulprogramming • Attempts to be cross-browser • Easier to support for multipleplatforms • Implementsdocument.ready() handlers • Full DOM support • Eventpropagationmanipulation • Nice UI  JavaScript

  32. jQ, HTML, DOM (FireBug) JavaScript

  33. Basic UsageExamples • Adding a class • $("a").addClass("test"); Note: HTML allows multiple classes to be added to an element. ( <span class="class1 class2 class3"> ) • Removing a class • $("a").removeClass("test"); • Hide and show • $(this).hide(); • $(this).show("slow"); • Selectors: # > . JavaScript

  34. jQueryselectors :animated :enabled :even :first-child :has() :hidden :button, :input, :image, etc… and more…. JavaScript

  35. jQuerytraversing .add() .children() .each() .first() .is() .next() … JavaScript

  36. AJAX handlers <div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div> $('.log').ajaxComplete(function() { $(this).text('Triggered ajaxComplete handler.'); }); $('.trigger').click(function() { $('.result').load('ajax/test.html'); }); JavaScript

  37. Eventpropagation (bubbling) To stop bubbling one canuseevent.stopPropagation(); JavaScript

  38. Callback and Functions • Posibility to definefunctionsinline, e.g. $(„a”).click(function() { $(this).css(‘border’,’1px solid black’); }); JavaScript

  39. Callback and Functions • A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.  $.get('myhtmlpage.html', myCallBack); JavaScript

  40. Callback and Functions • Whatis we want to pass arguments to a callbackfunction? WRONG: $.get('myhtmlpage.html', myCallBack(param1, param2)); This will not work because it callsthefunctionand then passes the returnvalue as the second parameter to $.get() JavaScript

  41. Callback and Functions • Whatis we want to pass arguments to a callbackfunction? $.get('myhtmlpage.html', function(){ myCallBack(param1, param2); }); JavaScript

  42. $.get('myhtmlpage.html', myCallBack); jQuery UI JavaScript

  43. jQuery Form Validation • Simplestmethodis to usejQplugin( e.g. jquery.validate.js) • Includejquery.js and jquery.validate.jsinthehead • Run validate(); on the form object JavaScript

  44. JavaScript

  45. jQuery Form Validation <form id="commentForm”> <p> <label for="cname">Name</label> <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> </p> <script> $(document).ready( function(){ $("#commentForm").validate(); }); </script> Addingmorerules: $("#myinput").rules("add", { minlength: 2 }); JavaScript

  46. jQuery Form Validation $("#myinput").rules("add", { required: true, minlength: 2, messages: { required: "Required input", minlength: jQuery.format("Atleast {0} characters are necessary") } }); JavaScript

  47. jQuery Form Validation $("#myform").validate({ rules: { emailField: { required: true, email: true } } }); JavaScript

  48. ThankYou Questions? JavaScript

More Related