Online Seminar - JavaScript & JQuery

8/10/2019 Online Seminar - JavaScript & JQuery

http://slidepdf.com/reader/full/online-seminar-javascript-jquery 1/35

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

linescomment

*/



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;



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]; // carvehicles[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 doesn‘t 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: 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: 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;

}





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>







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

});





Traversing

• In addition to selectors, these methods help you selectelements.

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





CSS

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

elements.

• css()

• position()

• addClass()

• hasClass()

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







jQuery plugins

• jQuery UI

• Dragging

• Resizing

• Sorting

• Datepicker (calendar)• Progressbar

• ...



Thank You!

Documents

Online Seminar - JavaScript & JQuery