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

1. JavaScript
EESTEC Summer School 2012
&
jQuery
Matic 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] // car
vehicles[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 false
x = 5;
if(x == 10)
{
document.writelin("X equals 10");
}
else
{
document.writelin("X doesn‘t equal 10");
}
8

9. Conditionals: Switch
EESTEC Summer School 2012
fruits = 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 2012
function 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. jQuery
25
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