online seminar - javascript & jquery
TRANSCRIPT
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
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 2/35
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
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 3/35
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>
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 4/35
Comments
• // one line comment
• /*
multiple
linescomment
*/
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 5/35
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;
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 6/35
Variables: Datatypes
• String – "Something"
• Number – 42
• Boolean – TRUE, FALSE
• Object
• Array – new Array(1, 2, 3);
• Date – new Date(1990, 2, 6);
• ...
• Null
• Undefined
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 7/35
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"];
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 8/35
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/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 9/35
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!");
}
}
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 10/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 11/35
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
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 12/35
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)
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 13/35
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
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 14/35
Loops
• Perform a repetitive action over and over until some condition
is met
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 15/35
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);
}
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 16/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 17/35
Loops: Do-While
• do {
code…
}
while (i < 10)
var i = 1;
do{
document.writelin(i);
i++;
}
while(i < 10)
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 18/35
Loops: For-In
• for (var objectVariable in objectItself)
{
code…
}
var theUniverse = array("Mercury", "Venus", "Earth", "Mars");
for(var planet in theUniverse)
{
document.writelin(planet);
}
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 19/35
Functions
• Groupings of statements that you can type once and then use
over and over again.
• function nameOfFunction(parameter1, parameter2)
{code…
return value;
}
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 20/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 21/35
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)
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 22/35
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
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 23/35
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>
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 24/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 25/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 26/35
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
});
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 27/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 28/35
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());
});
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 29/35
Attributes
• Methods, used to get and set DOM attributes of elements.
• addClass()
• attr()
• hasClass()
• removeClass()
• html()
• val()
$("#button").removeClass("enabled").addClass("disabled");
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 30/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 31/35
CSS
• Methods, used to get and set CSS-related properties of
elements.
• css()
• position()
• addClass()
• hasClass()
p = $("p:first");position = p.position();
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 32/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 33/35
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 34/35
jQuery plugins
• jQuery UI
• Dragging
• Resizing
• Sorting
• Datepicker (calendar)• Progressbar
• ...
8/10/2019 Online Seminar - JavaScript & JQuery
http://slidepdf.com/reader/full/online-seminar-javascript-jquery 35/35
Thank You!