JavaScript                                                                 EESTEC Summer School 2012     &  jQueryMatic Je...
Introduction                                                                 EESTEC Summer School 2012• THE scripting lang...
Embeding & linking JS in HTML files                                                           EESTEC Summer School 2012• <...
Comments                        EESTEC Summer School 2012• // one line comment• /*  multiple  lines  comment  */          ...
Variables                                                                  EESTEC Summer School 2012•   Locations where yo...
Variables: Datatypes                                     EESTEC Summer School 2012•   String – "Something"•   Number – 42•...
Datatypes: Arrays                                                              EESTEC Summer School 2012• There are 1 type...
Conditional statements                                                                    EESTEC Summer School 2012• The a...
Conditionals: Switch                                                       EESTEC Summer School 2012fruits = new Array("Ba...
Operators                                                                  EESTEC Summer School 2012• + (Addition): Used t...
Operators: Comparison                                              EESTEC Summer School 2012•   x == y: x equals y•   x < ...
Operators: Logical                                                                      EESTEC Summer School 2012• && (AND...
Operators: Usefull tricks                                                                       EESTEC Summer School 2012•...
Loops                                                                   EESTEC Summer School 2012• Perform a repetitive ac...
Loops: For                                                                    EESTEC Summer School 2012• for (initial expr...
Loops: While                                EESTEC Summer School 2012• while (condition)  {       code…       iterator  }v...
Loops: Do-While                                EESTEC Summer School 2012• do {         code…  }  while (i < 10)var i = 1;d...
Loops: For-In                                                                EESTEC Summer School 2012• for (var objectVar...
Functions                                                                EESTEC Summer School 2012• Groupings of statement...
Functions: Example                                                  EESTEC Summer School 2012function addThese(numberOne, ...
Built-in functions                                       EESTEC Summer School 2012•   array.length•   string.charAt(index)...
The Document Object Model                                                                EESTEC Summer School 2012• DOM de...
Event handlers                                                                    EESTEC Summer School 2012• JavaScript co...
Firebug debugging                                                        EESTEC Summer School 2012•   www.getfirebug.com• ...
jQuery25     EESTEC Summer School 2012
Introduction                                                                  EESTEC Summer School 2012• jQuery is a JavaS...
Selectors                                                       EESTEC Summer School 2012• Used for matching a set of elem...
Traversing                                                            EESTEC Summer School 2012• In addition to selectors,...
Attributes                                                             EESTEC Summer School 2012• Methods, used to get and...
Manipulation                                                           EESTEC Summer School 2012• Methods for manipulating...
CSS                                                           EESTEC Summer School 2012• Methods, used to get and set CSS-...
Events                                                               EESTEC Summer School 2012• Methods, used to register ...
Effects                                                               EESTEC Summer School 2012• Techniques for adding ani...
jQuery plugins                              EESTEC Summer School 2012• jQuery UI  •   Dragging  •   Resizing  •   Sorting ...
Thank You!35     EESTEC Summer School 2012
Upcoming SlideShare
Loading in …5
×

EESTEC Summer School 2012 - java script & jquery - Matic Jesenovec

1,972 views

Published on

http://ts.eestec.it
EESTEC Summer School 2012 Web Development Class
Javascript & JQuery by Matic Jesenovec

1 Comment
1 Like
Statistics
Notes
  • A brief note on JavaScript and jQuary. It is understandable. I got an overall picture and gonna read more... Thanks to EESTEC Summer School.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,972
On SlideShare
0
From Embeds
0
Number of Embeds
144
Actions
Shares
0
Downloads
16
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

EESTEC Summer School 2012 - java script & jquery - Matic Jesenovec

  1. JavaScript EESTEC Summer School 2012 & jQueryMatic Jesenovec,Chairman of EESTEC LC Ljubljana & Web Developer at Abakus Plus 1
  2. Introduction EESTEC Summer School 2012• THE scripting language of the Web• It copies many names from Java, otherwise they are unrelated• Add functionality, validate forms, communicate with the server, provide better UX• Runs on client side• Web page should always be functional also without JS• Today you can sometimes also use HTML5 and CSS3 2
  3. Embeding & linking JS in HTML files EESTEC Summer School 2012• <script language="javascript" type= "text/javascript"> // some code </script>• <script language="javascript" src="script.js">• <noscript> This page looks way cooler with JavaScript </noscript> 3
  4. Comments EESTEC Summer School 2012• // one line comment• /* multiple lines comment */ 4
  5. Variables EESTEC Summer School 2012• Locations where you store information• The name of your variable can contain any letter or number• Within a function you can add var, to create local variable• You can change the value of a variable at anytime• JS is loosely typed – you don‘t need to tell which type of information you will assign to a variable • Exceptions: Array and Date• x = 3;• s = "This is a string";• emptyArray = new array(); 5• something = TRUE;
  6. Variables: Datatypes EESTEC Summer School 2012• String – "Something"• Number – 42• Boolean – TRUE, FALSE• Object • Array – new Array(1, 2, 3); • Date – new Date(1990, 2, 6); • ...• Null• Undefined 6
  7. Datatypes: Arrays EESTEC Summer School 2012• 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"]; 7
  8. Conditional statements EESTEC Summer School 2012• The ability to do one thing if something is true and do another thing if it is falsex = 5;if(x == 10){ document.writelin("X equals 10");}else{ document.writelin("X doesn‘t equal 10");} 8
  9. Conditionals: Switch EESTEC Summer School 2012fruits = new Array("Banana", "Apple", "Strawberry");for(fruit in fruits){ switch(fruit){ case "Banana ": document.writelin("Yellow!"); break; case "Strawberry ": document.writelin("Red!"); break; default: document.writelin("Unknown!"); } 9}
  10. Operators EESTEC Summer School 2012• + (Addition): Used to add numeric values or combine 2 strings of text• - (Subtraction): Used to subtract values• * (Multiplication): Used to multiply values• / (Division): Used to divide values• % (Modulus): Used to return the remainder of a division of two numbers. • Example: 15 % 7 = 1• ++ (Increment): Shorthand way to add one to a value. • Example: number++;• -- (Decrement): Shorthand way to subtract one from a value 10
  11. Operators: Comparison EESTEC Summer School 2012• x == y: x equals y• x < y: x is less than y• x > y: x is greater than y• x <= y: x is less than or equal to y• x >= y: x is greater than or equal to y• x != y: x is not equal to y 11
  12. Operators: Logical EESTEC Summer School 2012• && (AND): used to check if both values are true • Example: if ( x < y && a > b )• || (OR): used to check if at least one of the values is true• ! (NOT): used to check if values are not equal to the variable it is being used on • Example: if(!x) 12
  13. Operators: Usefull tricks EESTEC Summer School 2012• x += y; Adds x and y, then stores that value in the variable x• x -= y; Subtracts y from x, then stores that value in the variable x• x = (y < 5) ? 10 : 15; Shorthand way to test and then assign a value based on the test. • If y<5 then x = 10, else x = 15 13
  14. Loops EESTEC Summer School 2012• Perform a repetitive action over and over until some condition is met 14
  15. Loops: For EESTEC Summer School 2012• for (initial expression; condition to be met; edit the value of expression) { javascript code… }for (var i = 1; i < 10; i++){ document.writelin(i);} 15
  16. Loops: While EESTEC Summer School 2012• while (condition) { code… iterator }var i = 1;while (i < 10){ document.writelin(i); i++;} 16
  17. Loops: Do-While EESTEC Summer School 2012• do { code… } while (i < 10)var i = 1;do{ document.writelin(i); i++;}while(i < 10) 17
  18. Loops: For-In EESTEC Summer School 2012• for (var objectVariable in objectItself) { code… }var theUniverse = array("Mercury", "Venus", "Earth", "Mars");for(var planet in theUniverse){ document.writelin(planet);} 18
  19. Functions EESTEC Summer School 2012• Groupings of statements that you can type once and then use over and over again.• function nameOfFunction(parameter1, parameter2) { javascript code… return value; } 19
  20. Functions: Example EESTEC Summer School 2012function addThese(numberOne, numberTwo){ var total = numberOne + numberTwo; return total;}firstNumber = 3;secondNumber = 2;addition = addThese(firstNumber, secondNumber); 20
  21. Built-in functions EESTEC Summer School 2012• array.length• string.charAt(index)• string.indexOf(value)• string.split(separator)• string.substring(index1, index2)• string.length()• string.toLowerCase()• number.toString()• date.getDay()• Math.round(x) 21
  22. The Document Object Model EESTEC Summer School 2012• DOM defines logical structure of HTML (XML) documents• It enables you to build, modify, navigate and add or delete HTML elements and content• The DOM itself is language-independent 22
  23. Event handlers EESTEC Summer School 2012• JavaScript code that is not added inside the <script> tags, but rather, inside HTML tags.• They execute JS when something happens• onClick• onMouseOver• onMouseOut• onUnload• onLoad (only for <body> and <img>)<a href="http://eestec.net" onClick="alert(hello!)">EESTEC</a> 23
  24. Firebug debugging EESTEC Summer School 2012• www.getfirebug.com• Find all included JS files easily• It shows errors that accure during the execution• Set a breakpoint and pause execution at any point • Continue one line at a time • Observe variable values• Console to execute JS on the run• console.log(„text“); 24
  25. jQuery25 EESTEC Summer School 2012
  26. Introduction EESTEC Summer School 2012• jQuery is a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions.• Download it from jquery.com and include it in your web page• $(document).ready(function(){ // Your code here }); 26
  27. Selectors EESTEC Summer School 2012• Used for matching a set of elements in a document.• * (all)• .class• #id• :contains()• :empty$(".myClass").css("color","red"); 27
  28. Traversing EESTEC Summer School 2012• In addition to selectors, these methods help you select elements.• children()• each()• first()• parent()$("div").add("p");$(li).each(function(index) { console.log(index + : + $(this).text()); 28});
  29. Attributes EESTEC Summer School 2012• Methods, used to get and set DOM attributes of elements.• addClass()• attr()• hasClass()• removeClass()• html()• val()$("#button").removeClass("enabled").addClass("disabled"); 29
  30. Manipulation EESTEC Summer School 2012• Methods for manipulating the DOM. Changing attributes, setting style properties, modifying elements,...• append()• css()• remove()• width()• empty()$( this ).css( "width","+=200" ); 30
  31. CSS EESTEC Summer School 2012• Methods, used to get and set CSS-related properties of elements.• css()• position()• addClass()• hasClass()p = $("p:first");position = p.position(); 31
  32. Events EESTEC Summer School 2012• Methods, used to 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!); 32});
  33. Effects EESTEC Summer School 2012• Techniques for adding animation to a web page• animate(properties [, duration] [, easing] [, complete])• fadeIn() / fadeOut([duration] [, callback])• hide() / show()• slideDown()• toggle()$(#book).animate({ opacity: 0.25, left: +=50, height: toggle }, 5000, function() { console.log(Animation complete.); 33});
  34. jQuery plugins EESTEC Summer School 2012• jQuery UI • Dragging • Resizing • Sorting • Datepicker (calendar) • Progressbar • ... 34
  35. Thank You!35 EESTEC Summer School 2012

×