Download presentation
Presentation is loading. Please wait.
1
Chengyu Sun California State University, Los Angeles
CS5220 Advanced Topics in Web Programming Client-Side JavaScript and jQuery Chengyu Sun California State University, Los Angeles
2
Client-Side JavaScript
Example: j1.html Embed JavaScript in HTML using <script> Tag Link to external file or enclose code directly Can appear any number of times in both <head> and <body> HTML 5 no longer requires the type attribute Run inside a browser
3
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
4
Document Object Model (DOM)
Representing documents as objects so they can be processed more easily by a programming language
5
DOM Representation document <html> <head> <body>
<title> <h1> <p> “JavaScript Example” “JavaScript Example” “Some content.”
6
Manipulate a Document Find Elements Modify Elements Create Elements
7
Find Elements document.getElementById() document.getElementsByName()
document.getElementsByTagName()
8
Modify Elements ... HTMLElement properites and methods IE
innerHTML innerText insertAdjacentHTML() insertAdjacentText() Netscape/Mozilla Element-specific
9
... Modify Elements node setAttribute(), removeAttribute()
appendChild(), removeChild() insertBefore(), replaceChild()
10
Create Elements document createElement() createTextNode()
11
Example: Document Manipulation with JavaScript
Example: j2.1.html Problems with plain client-side JavaScript Verbose code for even simple tasks Browser compatibility
12
jQuery: Make Client-Side JavaScript Great Again
Hide browser incompatibility Greatly simplify/improve DOM operations, event handling, and asynchronous request and response Usage statistics -
13
Using jQuery Example: j2.2.html Usage jQuery wrapper Selectors
Elements Events and event handling DOM manipulation
14
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
15
Basic Selectors By id By tag name By CSS class By attribute $(“#foo”)
$(“div”) By CSS class $(“.foo”) By attribute $(“[name]”) $(“[name=‘joe’]”)
16
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/16595220/96/images/16/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] )")
17
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()
18
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>
19
Document Ready Event Triggered when the DOM hierarchy of the HTML document is fully constructed $( document ).ready( handler ) $().ready( handler ) (not recommended) $( handler )
20
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
21
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>");
22
Example: jQuery Basics
j3.html What program languages do you know? + - -
Similar presentations
