Download presentation
Presentation is loading. Please wait.
1
CS5220 Advanced Topics in Web Programming JavaScript and jQuery
Chengyu Sun California State University, Los Angeles
2
Web Development Server-Side Client-Side C, Perl Java C#, VB JavaScript
PHP Ruby Python JavaScript ColdFusion … JavaScript Applet JavaFX Flex/Flash Silverlight HTTP Browser What do Applet, JavaFX, Flex/Flash and Silverlight have in common? Application Server
3
Why Client-Side? Improve user experience Reduce server workload
Interactive Responsive Reduce server workload Handle input events Implement as much functionality on the client-side as possible Hide the inevitable communication overhead from the user
4
About JavaScript Originally developed by Netscape
Standardized as ECMAScript Influenced by Java and various scripting languages Web Server Client-side Core Server-side Browser
5
jQuery: Make Client-Side JavaScript Great Again
Hide browser incompatibility Greatly simplify/improve event handling, DOM operations, and asynchronous request and response The market share of jQuery:
6
Processing an HTML Document
<html> <head><title>JavaScript Example</title></head> <body> <h1>JavaScript Example</h1> <p>Some content.</p> </body> </html> As a text file – very difficult As an object
7
Document Object Model (DOM)
Representing documents as objects so they can be processed more easily by a programming language
8
DOM Representation document <html> <head> <body>
<title> <h1> <p> “JavaScript Example” “JavaScript Example” “Some content.”
9
DOM Operations Find elements Read/write elements
Create/remove elements Restructure elements
10
Example: Client-Side JavaScript
j1.html Use JavaScript in a web page: <script> Basic syntax and grammar Similarities and differences comparing to Java Event handling Locate, read, and write elements
11
Elements of a Programming Language
Comments Literals Variables and Types Operators and expressions Statements Functions Classes and Objects Packages
12
Elements of JavaScript
Comments Literals Variables and Types Operators and expressions Statements Functions Classes and Objects Packages
13
Comments Single-line comment: // Block comment: /* */
14
Literals Boolean: true, false Number: 123, 4.56
String: “hello”, ‘world’ Special: undefined, null Object literal
15
Object Literal … { make: ‘Honda’, model: ‘Civic’, year: 2001, owner: {
name: ‘Chengyu’ } };
16
… Object Literal JSON (JavaScript Object Notation) { ‘make’: ‘Honda’,
‘model’: ‘Civic’, ‘year’: 2001, ‘owner’: { ‘name’: ‘Chengyu’ } }; JSON (JavaScript Object Notation)
17
Variables and Types JavaScript variables are dynamically typed
var x; // declare a variable x x = 10; // now x is a number x = ‘abc’;// now x is a string y = 20; // created a property y in the global object JavaScript variables are dynamically typed Always use var to declare a variable
18
Operators All Java operators, e.g. +, -, =, && …
Strict equality/inequality: ===, !== === true if same type and same value Remove object property: delete Check object property: in
19
Normal Equality == 100 == ‘100’ true == 1 true == ‘1’
undefined == null
20
Statements All Java statement, e.g. if, for, while, switch …
Semicolon is optional but highly recommended
21
Functions as First-class Citizens
In JavaScript, functions are considered objects like other object types Assigned to variables Assigned as a property of an object Passed as a parameter Returned as a function result Function literals (i.e. functions without names)
22
Function Examples function foo() { Regular function alert('foo');
} bar = function() { alert('bar'); setTimeout( bar, 5000 ); setTimeout( function() { alert(‘foobar’);}, 5000 ) Regular function declaration Function literal Function assignment Function as parameter Function literal as parameter
23
Function Arguments function add(x,y) { return x+y; } add(10,20); add(‘10’,’20’); add(10); add(10,20,30); A special variable arguments hold all the arguments to a function
24
Object Object properties can be added and removed dynamically
var car = new Object(); car.make = ‘Honda’; car.model = ‘Civic’; car[‘year’] = 2001; Object properties can be added and removed dynamically Object properties can be accessed using . or []
25
Array An array may have “holes” (i.e. undefined elements)
var arr = [‘x’, ‘y’, 10]; arr[100] = 20; var size = arr.length; arr.b = ‘hello’; arr[‘c’] = ‘world’; An array may have “holes” (i.e. undefined elements) An array has properties
26
Array Iteration var arr = [‘x’, ‘y’, 10]; arr.forEach(function(e){ console.log(e); }); See Chapter 18 of Speaking JavaScript for more about forEach() and other array functions
![Array Iteration var arr = [‘x’, ‘y’, 10]; arr.forEach(function(e){ console.log(e); });](http://slideplayer.com/slide/13212912/79/images/26/Array+Iteration+var+arr+%3D+%5B%E2%80%98x%E2%80%99%2C+%E2%80%98y%E2%80%99%2C+10%5D%3B+arr.forEach%28function%28e%29%7B+console.log%28e%29%3B+%7D%29%3B.jpg "See Chapter 18 of Speaking JavaScript for more about forEach() and other array functions.")
27
jQuery Wrapper jQuery() or $()
Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string. $( "input[name='firstName']" ) $( "#who" ) $( "#t1" ) Selector
28
Basic Selectors By id By tag name By CSS class By attribute $(“#foo”)
$(“div”) By CSS class $(“.foo”) By attribute $(“[name]”) $(“[name=‘joe’]”)
29
Combine Selectors Select all the <div> elements with CSS class foo and an attribute bar $(“div.foo[bar]”) Select all the <div> elements, and all the elements with CSS class foo, and all the elements with an attribute bar $(“div,.foo,[bar]”)
![Combine Selectors Select all the <div> elements with CSS class foo and an attribute bar. $( div.foo[bar] )](http://slideplayer.com/slide/13212912/79/images/29/Combine+Selectors+Select+all+the+%3Cdiv%3E+elements+with+CSS+class+foo+and+an+attribute+bar.+%24%28+div.foo%5Bbar%5D+%29.jpg "Select all the <div> elements, and all the elements with CSS class foo, and all the elements with an attribute bar. $( div,.foo,[bar] )")
30
Other Selectors and Filters
Form selectors By field type :checked :selected Hierarchy selectors Filters
31
What Can We Do With An Element
Get and set html() attr() prop() val() Manipulate CSS addClass() removeClass() toggleClass() hasClass() Property tagName <input name=“username” value=“cysun” /> Attribute name val()
32
Typical Event and Event Handling in jQuery
Event Handler $("#click").click( function(){ }); Unobtrusive JavaScript: separate style, behavior, and structure. <button id="click“ onclick="display();"> Click Me</button>
33
Document Ready Event Triggered when the DOM hierarchy of the HTML document is fully constructed $( document ).ready( handler ) $().ready( handler ) (not recommended) $( handler )
34
Other Events Mouse events Keyboard events Form events Browser events
.click() .dbclick() … Keyboard events .keyup() .keydown() .keypress() Form events .change() .submit() … Browser events .resize() Document events
35
DOM Manipulation Insertion Removal Replacement Around (i.e. parent)
Inside (i.e. children) Outside (i.e. sibling) Removal Replacement Example: $("#t1").append("<tr><td>John</td><td>Doe</td></tr>");
36
Examples j2.html j3.html jQuery selectors Document manipulation
Batch element processing
37
Readings Speaking JavaScript by Axel Rauschmayer
jQuery API Documentation -
Similar presentations
