JavaScript
&
jQuery
Matic Jesenovec,
Web developer, member of EESTEC LC Ljubljana
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
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>
Comments
// one line comment
/*
multiple
lines
comment
*/
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 dont 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;
Variables: Datatypes
String "Something"
Number 42
Boolean TRUE, FALSE
Object
Array new Array(1, 2, 3);
Date new Date(1990, 2, 6);
...
Null
Undefined
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"];
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 doesnt equal 10");
}
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!");
}
}
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
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
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)
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
Loops
Perform a repetitive action over and over until some condition
is met
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);
}
Loops: While
while (condition)
{
code
iterator
}
var i = 1;
while (i < 10)
{
document.writelin(i);
i++;
}
Loops: Do-While
do {
code
}
while (i < 10)
var i = 1;
do{
document.writelin(i);
i++;
}
while(i < 10)
Loops: For-In
for (var objectVariable in objectItself)
{
code
}
var theUniverse = array("Mercury", "Venus", "Earth", "Mars");
for(var planet in theUniverse)
{
document.writelin(planet);
}
Functions
Groupings of statements that you can type once and then use
over and over again.
function nameOfFunction(parameter1, parameter2)
{
code
return value;
}
Functions: Example
function addThese(numberOne, numberTwo)
{
var total = numberOne + numberTwo;
return total;
}
firstNumber = 3;
secondNumber = 2;
addition = addThese(firstNumber, secondNumber);
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)
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
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>
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");
jQuery
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
});
Selectors
Used for matching a set of elements in a document.
* (all)
.class
#id
:contains()
:empty
$(".myClass").css("color","red");
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());
});
Attributes
Methods, used to get and set DOM attributes of elements.
addClass()
attr()
hasClass()
removeClass()
html()
val()
$("#button").removeClass("enabled").addClass("disabled");
Manipulation
Methods for manipulating the DOM. Changing attributes,
setting style properties, modifying elements,...
append()
css()
remove()
width()
empty()
$( this ).css( "width","+=200" );
CSS
Methods, used to get and set CSS-related properties of
elements.
css()
position()
addClass()
hasClass()
p = $("p:first");
position = p.position();
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!');
});
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.');
});
jQuery plugins
jQuery UI
Dragging
Resizing
Sorting
Datepicker (calendar)
Progressbar
...
Thank You!
