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

JavaScript

EESTEC Summer School 2012
&
jQuery
Matic Jesenovec,
Chairman of EESTEC LC Ljubljana & Web Developer at Abakus Plus
1

Introduction

• 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

Embeding & linking JS in HTML files

• <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

Comments

• // one line comment

• /*
multiple
lines
comment
*/

4

Variables

• 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;

Variables: Datatypes

• String – "Something"
• Number – 42
• Boolean – TRUE, FALSE
• Object
• Array – new Array(1, 2, 3);
• Date – new Date(1990, 2, 6);
• ...

• Null
• Undefined
6

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] // car
vehicles[3] = "bicycle";
vehicles[vehicles.length-1]

anotherArray= ["First", "Second", "Last"];

7

Conditional statements

• 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

Conditionals: Switch

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
}

Operators

• + (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

Operators: Comparison

• 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

Operators: Logical

• && (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

Operators: Usefull tricks

• 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

Loops

• Perform a repetitive action over and over until some condition
is met

14

Loops: For

• 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

Loops: While

• while (condition)
{
code…
iterator
}

var i = 1;
while (i < 10)
{
i++;
}
16

Loops: Do-While

• do {
code…
}
while (i < 10)

var i = 1;
do{
i++;
}
while(i < 10)
17

Loops: For-In

• for (var objectVariable in objectItself)
{
code…
}

var theUniverse = array("Mercury", "Venus", "Earth", "Mars");
for(var planet in theUniverse)
{
document.writelin(planet);
}

18

Functions

• Groupings of statements that you can type once and then use
over and over again.

• function nameOfFunction(parameter1, parameter2)
{
javascript code…
return value;
}

19

Functions: Example

function addThese(numberOne, numberTwo)
{
var total = numberOne + numberTwo;
return total;
}

firstNumber = 3;
secondNumber = 2;
addition = addThese(firstNumber, secondNumber);

20

Built-in functions

• 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

The Document Object Model

• 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

Event handlers

• 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

Firebug debugging

• 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

jQuery

25


Introduction

• 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

Selectors

• Used for matching a set of elements in a document.

• * (all)
• .class
• #id
• :contains()
• :empty

$(".myClass").css("color","red");

27

Traversing

• 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
});

Attributes

• Methods, used to get and set DOM attributes of elements.

• addClass()
• attr()
• hasClass()
• removeClass()
• html()
• val()

$("#button").removeClass("enabled").addClass("disabled");
29

Manipulation

• Methods for manipulating the DOM. Changing attributes,
setting style properties, modifying elements,...

• append()
• css()
• remove()
• width()
• empty()

$( this ).css( "width","+=200" );
30

CSS

• Methods, used to get and set CSS-related properties of
elements.

• css()
• position()
• addClass()
• hasClass()

p = $("p:first");
position = p.position();
31

Events

• 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
});

Effects

• 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
});

jQuery plugins

• jQuery UI
• Dragging
• Resizing
• Sorting
• Datepicker (calendar)
• Progressbar
• ...

34

Thank You!

35


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

Recommended

Recommended

More Related Content

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

Similar to EESTEC Summer School 2012 - java script & jquery - Matic Jesenovec (20)

More from EESTEC LC Trieste

More from EESTEC LC Trieste (20)

Recently uploaded

Recently uploaded (20)

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