1 / 48

JavaScript & jQuery

JavaScript & jQuery. Matic Jesenovec, Web d eveloper, member of EESTEC LC Ljubljana. Agenda. JavaScript Introduction Embeding and linking JS Comments Variables Datatypes Conditional statements Operators Loops Functions The DOM Event handlers. Agenda. Firebug jQuery

gates
Télécharger la présentation

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. JavaScript &jQuery EESTEC Online Seminar, March 2013 Matic Jesenovec, Web developer, member of EESTEC LC Ljubljana

  2. Agenda • JavaScript • Introduction • Embeding and linking JS • Comments • Variables • Datatypes • Conditional statements • Operators • Loops • Functions • The DOM • Event handlers EESTEC Online Seminar, March 2013

  3. Agenda • Firebug • jQuery • Selectors • Traversing • Attributes • Manipulation • CSS • Events • Effects • Ajax • jQuery plugins • Q&A EESTEC Online Seminar, March 2013

  4. Introduction THE scripting language of the Web Add functionality, communicate with the server, provide better UX Client side EESTEC Online Seminar, March 2013

  5. Embeding & linking JS in HTML files <script language="javascript" type= "text/javascript"> // some code</script> <script language="javascript" src="script.js"> EESTEC Online Seminar, March 2013

  6. Comments // one line comment /*multiplelines comment*/ EESTEC Online Seminar, March 2013

  7. Variables Locations where you store information var - local variable JS is loosely typed x = 3; s = "This is a string"; something = TRUE; EESTEC Online Seminar, March 2013

  8. Variables: Datatypes • String – "Something" • Number – 42 • Boolean – TRUE, FALSE • Object • Array – new Array(1, 2, 3); • Date – new Date(1990, 2, 6); • Null • Undefined EESTEC Online Seminar, March 2013

  9. Datatypes: Arrays There are 1 types of people in the world. Those who start counting at 0 and those who start counting at 1. vehicles = new Array("car", "truck", "van");vehicles[0]; // carvehicles[3] = "bicycle";vehicles[vehicles.length-1]; anotherArray = ["First", "Second", "Last"]; EESTEC Online Seminar, March 2013

  10. Conditional statements  x = 5; if(x == 10){alert("X equals 10");}else{alert("X doesn‘t equal 10");} EESTEC Online Seminar, March 2013

  11. Conditionals: Switch fruits = new Array("Banana", "Apple", "Strawberry"); for(fruit in fruits){ switch(fruit){ case "Banana": alert("Yellow!"); break; case "Strawberry ": alert("Red!"); break; default: alert("Unknown!"); } } EESTEC Online Seminar, March 2013

  12. Operators • +(Addition) • - (Subtraction) • * (Multiplication) • / (Division) • % (Modulus): • Example: 15 % 7 = 1 • ++(Increment) • Example: number++; • -- (Decrement) EESTEC Online Seminar, March 2013

  13. Operators: Comparison x == y x < y x > y x <= y x >= y x != y EESTEC Online Seminar, March 2013

  14. Operators: Logical • && (AND) • Example: if( x < y && a > b ) • || (OR) • Example: if( x < y ||a > b ) • ! (NOT) • Example: if ( !x ) EESTEC Online Seminar, March 2013

  15. Operators: Usefull tricks • x += y; // x = x + y • x -= y; // x = x - y • x = (y < 5) ? 10 : 15; • if y<5 then x = 10, else x = 15 EESTEC Online Seminar, March 2013

  16. Loops Performa repetitive action over and over until some condition is met EESTEC Online Seminar, March 2013

  17. Loops: For for (var i = 1;i < 10; i++) { alert(i);} EESTEC Online Seminar, March 2013

  18. Loops: While var i = 1; while (i< 10){ alert(i);i++;} EESTEC Online Seminar, March 2013

  19. Loops: Do-While vari = 1; do{document.writelin(i);i++;}while(i< 10) EESTEC Online Seminar, March 2013

  20. Loops: For-In var theUniverse = array("Mercury", "Venus", "Earth", "Mars"); for(var planet in theUniverse){ document.writelin(planet);} EESTEC Online Seminar, March 2013

  21. Functions Groupings of statements that you can type once and then use over and over again. function nameOfFunction(parameter1, parameter2){ code… return value;} EESTEC Online Seminar, March 2013

  22. Functions: Example function addThese(numberOne, numberTwo){vartotal = numberOne + numberTwo;return total;} firstNumber = 3;secondNumber = 2;addition = addThese(firstNumber, secondNumber); EESTEC Online Seminar, March 2013

  23. Built-in functions array.length string.charAt(index) string.indexOf(value) string.split(separator) string.length() string.toLowerCase() number.toString() date.getDay() Math.round(x) EESTEC Online Seminar, March 2013

  24. The Document Object Model DOM defines logical structure of HTML (XML) documents EESTEC Online Seminar, March 2013

  25. Event handlers onClick onMouseOver onMouseOut onUnload onLoad (only for <body> and <img>) <a href="http://eestec.net" onClick="alert('hello!')">EESTEC</a> EESTEC Online Seminar, March 2013

  26. BREAK10 minutes EESTEC Online Seminar, March 2013

  27. BREAK9 minutes EESTEC Online Seminar, March 2013

  28. BREAK8 minutes EESTEC Online Seminar, March 2013

  29. BREAK7 minutes EESTEC Online Seminar, March 2013

  30. BREAK6 minutes EESTEC Online Seminar, March 2013

  31. BREAK5 minutes EESTEC Online Seminar, March 2013

  32. BREAK4 minutes EESTEC Online Seminar, March 2013

  33. BREAK3 minutes EESTEC Online Seminar, March 2013

  34. BREAK2 minutes EESTEC Online Seminar, March 2013

  35. BREAK1 minute EESTEC Online Seminar, March 2013

  36. Firebug debugging Find all included JS files easily It shows errors Breakpoints Execute JS on the run console.log("text"); EESTEC Online Seminar, March 2013

  37. jQuery EESTEC Online Seminar, March 2013

  38. Introduction JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions. $(document).ready(function(){ // Your code here}); EESTEC Online Seminar, March 2013

  39. Selectors Matchinga set of elements in a document. * (all) .class #id :contains() :empty $(".myClass").css("color","red"); EESTEC Online Seminar, March 2013

  40. Traversing Help you select elements. children() each() first() parent() $("div").add("p"); $('li').each(function(index) { console.log(index + ': ' + $(this).text());}); EESTEC Online Seminar, March 2013

  41. Attributes Get and set DOM attributes of elements. addClass() attr() html() val() $("#button").removeClass("enabled").addClass("disabled"); EESTEC Online Seminar, March 2013

  42. Manipulation Manipulating the DOM. Changing attributes, setting style properties, modifying elements,... append() css() width() empty() $( this ).css( "width","+=200" ); EESTEC Online Seminar, March 2013

  43. CSS Get and set CSS-related properties of elements. css() position() addClass() hasClass() p = $("p:first");position = p.position(); EESTEC Online Seminar, March 2013

  44. Events Register behavior to take effect when the user interacts with the browser. bind(eventType [, eventData], handler(eventObject)) click(eventData], handler(eventObject)) keypress([eventData], handler(eventObject)) hover(handler(eventObject)) $('#clickMe').bind('click', function() { console.log ('User clicked me!'); }); EESTEC Online Seminar, March 2013

  45. Effects Techniquesfor adding animation to a web page animate(properties [, duration] [, easing] [, complete]) fadeIn([duration] [, callback]) hide() slideDown() $('#book').animate({opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { console.log('Animation complete.');}); EESTEC Online Seminar, March 2013

  46. Ajax Asynchronous JavaScript and XML $.ajax({ type: "POST", url: "script.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); }); EESTEC Online Seminar, March 2013

  47. jQuery plugins EESTEC Online Seminar, March 2013

  48. Thank You! EESTEC Online Seminar, March 2013

More Related