CS5220 Advanced Topics in Web Programming JavaScript and jQuery Chengyu Sun California State University, Los Angeles
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
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
About JavaScript Originally developed by Netscape Standardized as ECMAScript Influenced by Java and various scripting languages Web Server Client-side Core Server-side Browser
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: https://trends.builtwith.com/javascript/javascript-library
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
Document Object Model (DOM) Representing documents as objects so they can be processed more easily by a programming language
DOM Representation document <html> <head> <body> <title> <h1> <p> “JavaScript Example” “JavaScript Example” “Some content.”
DOM Operations Find elements Read/write elements Create/remove elements Restructure elements
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
Elements of a Programming Language Comments Literals Variables and Types Operators and expressions Statements Functions Classes and Objects Packages
Elements of JavaScript Comments Literals Variables and Types Operators and expressions Statements Functions Classes and Objects Packages
Comments Single-line comment: // Block comment: /* */
Literals Boolean: true, false Number: 123, 4.56 String: “hello”, ‘world’ Special: undefined, null Object literal
Object Literal … { make: ‘Honda’, model: ‘Civic’, year: 2001, owner: { name: ‘Chengyu’ } };
… Object Literal JSON (JavaScript Object Notation) { ‘make’: ‘Honda’, ‘model’: ‘Civic’, ‘year’: 2001, ‘owner’: { ‘name’: ‘Chengyu’ } }; JSON (JavaScript Object Notation)
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
Operators All Java operators, e.g. +, -, =, && … Strict equality/inequality: ===, !== === true if same type and same value Remove object property: delete Check object property: in
Normal Equality == 100 == ‘100’ true == 1 true == ‘1’ undefined == null
Statements All Java statement, e.g. if, for, while, switch … Semicolon is optional but highly recommended
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)
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
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
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 []
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
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
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
Basic Selectors By id By tag name By CSS class By attribute $(“#foo”) $(“div”) By CSS class $(“.foo”) By attribute $(“[name]”) $(“[name=‘joe’]”)
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]”)
Other Selectors and Filters Form selectors By field type :checked :selected Hierarchy selectors Filters
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()
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>
Document Ready Event Triggered when the DOM hierarchy of the HTML document is fully constructed $( document ).ready( handler ) $().ready( handler ) (not recommended) $( handler )
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
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>");
Examples j2.html j3.html jQuery selectors Document manipulation Batch element processing
Readings Speaking JavaScript by Axel Rauschmayer jQuery API Documentation - http://api.jquery.com/