Your SlideShare is downloading. ×
EESTEC Summer School 2012 - java script & jquery - Matic Jesenovec
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

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

1,497

Published on

http://ts.eestec.it …

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,497
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
1
Likes
1
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. 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

×