JavaScript & jQuery

Matic Jesenovec,

Chairman of EESTEC LC Ljubljana & Web Developer at Abakus Plus 1

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

Comments

• // one line comment

• /* multiple lines comment */

4

EEST

EC S

um

mer

Sch

oo

l 20

12

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();

• something = TRUE; 5

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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"];

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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!");

}

}

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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)

EEST

EC S

um

mer

Sch

oo

l 20

12

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 EEST

EC S

um

mer

Sch

oo

l 20

12

13

Loops

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

14

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

15

Loops: While

• while (condition) { code… iterator }

var i = 1; while (i < 10) { document.writelin(i); i++; }

EEST

EC S

um

mer

Sch

oo

l 20

12

16

Loops: Do-While

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

var i = 1; do{ document.writelin(i); i++; } while(i < 10)

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

Functions: Example

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

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

25

jQuery

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

Selectors

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

• * (all)

• .class

• #id

• :contains()

• :empty

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

27

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

Attributes

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

• addClass()

• attr()

• hasClass()

• removeClass()

• html()

• val()

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

29

EEST

EC S

um

mer

Sch

oo

l 20

12

Manipulation

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

• append()

• css()

• remove()

• width()

• empty()

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

30

EEST

EC S

um

mer

Sch

oo

l 20

12

CSS

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

• css()

• position()

• addClass()

• hasClass()

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

31

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

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

EEST

EC S

um

mer

Sch

oo

l 20

12

jQuery plugins

• jQuery UI

• Dragging

• Resizing

• Sorting

• Datepicker (calendar)

• Progressbar

• ...

34

EEST

EC S

um

mer

Sch

oo

l 20

12

35

Thank You!

EEST

EC S

um

mer

Sch

oo

l 20

12