HTML5 Level II Session III Chapter 15 -

HTML5 Level II Session III Chapter 15 -

HTML5 Level II Session III Chapter 15 - How to Use JavaScript and jQuery to Enhance Your Web Pages www.profburnett.com Class Outline Intro to JavaScript Object Technology Document Object Model (DOM) How to Use JavaScript to Enhance Your Web Pages JavaScript Validation Introduction to jQuery jQuery Frameworks 03/01/2020 Copyright Carl M. Burnett 2 How JavaScript fits into Web Architecture HTML Page Embedded JavaScript

Client Request to Web Server Cloud Server Response to Client with Embedded or External JavaScript File External JavaScript File Web Server Client Devices 03/01/2020 Copyright Carl M. Burnett 3 JavaScript for Current Date and Year

03/01/2020 Copyright Carl M. Burnett Example Example 4 Object Oriented Programming Concepts Class Objects Inheritance

Data Encapsulation Metadata Polymorphism Class Characteristics Class is Instantiated Class = Containers State Structure Behaviors Hierarchy Class = Structure 1. Glass Class = Behaviors 2. Plastic 1. Pour 3. Metal 2. Fill 3. Shake Class = Hierarchy

Access Class = Access 1. Private 2. Protected 3. Public Objects Data Structures Properties Methods Inheritance Object or Class is based on another Object Single Inheritance Multiple Inheritance Hierarchical Inheritance Multilevel Inheritance Hybrid Inheritance

Data Encapsulation Metadata Data about Data Record House No. Street Street Type City State Address 123 Post Avenue Westbury New York

Record Salutation First Name MI Last Name Suffix Person Ms. Sally M Smith III

Record Polymorphism Polymorphism lets methods react to system behaviors at runtime. At t y you? u b I n a C Where rner. o c e h t round a e r

o t et S he Targ How Mu ch Do Yo $12 u Cost? The Document Object Model (DOM) for a Web Page HTML Head Body Title section Objects

1. Properties 2. Methods 3. Inheritance 4. Data Encapsulation

h1

ul

Text

Text li

Text 03/01/2020 p Copyright Carl M. Burnett

  • li

  • Text 11 The JavaScript DOM Event Cycle Page Loaded Event Occurs 03/01/2020 Script

    Executes Copyright Carl M. Burnett DOM Modified Page Updated 12 How to Include JavaScript in a HTML Document Two attributes of the script element Attributes Description src Location and Name of External JavaScript File. type HTML5 (Omit) - otherwise - text/javascript

    03/01/2020 Copyright Carl M. Burnett 13 How to Include JavaScript in a HTML Document A script element in the head section that loads an external JavaScript file A script element that embeds JavaScript in the head section ... 03/01/2020 Copyright Carl M. Burnett

    Example Example 14 How to Include JavaScript in a HTML Document A script element that embeds JavaScript in the body

    ©

    How to use the noscript tag

    Opening a Popup Window The JavaScript event handler in the head section The HTML for the link that starts the event JavaScript book 03/01/2020 Copyright Carl M. Burnett 16 Opening a Popup Window The body of the page named newwindow.html

    height="500" alt="JavaScript and DOM Scripting"> Example Example 03/01/2020 Copyright Carl M. Burnett 17 Image Rollovers The script elements in the head section 03/01/2020 Copyright Carl M. Burnett 18 Image Rollovers HTML for the img elements that get rolled over

    HTML for the images, captions, and thumbnails

    03/01/2020 Copyright Carl M. Burnett

    20 Image Swaps HTML for the caption and image that get swapped

    SQL Server 2008 for developers

    Example Example 03/01/2020 Copyright Carl M. Burnett 21 Slide Shows The script elements for the JavaScript files The HTML for the slides and captions

  • The HTML for the caption and image area

    JavaScript and DOM Scripting

    The HTML for the tabs and tab contents

    The table of contents

    The descriptive text for this tab.

    About the author

    About the downloads

    03/01/2020 Copyright Carl M. Burnett

    24 CSS for Tabbed Data #tab_list { margin:0; padding: 3px 6px; border-bottom: 1px solid black; } #tab_list li { list-style: none; display: inline; } #tab_list li a { padding: 3px 1em; margin-left: 3px; text-decoration: none; font-weight: bold; background: #ccffff; border: 1px solid black; } #tab_list li a:hover { background: silver; border-color: black; }

    03/01/2020 #tab_list li a.active { background-color: white; border-bottom: 1px solid white; } #tab_contents div { padding: 5px 10px 10px; border: 1px solid black; border-top: 0; height: 100px; overflow:auto; } .hide { display: none; } Copyright Carl M. Burnett Example Example 25 JavaScript Validation Example HTML

    HTML CSS CSS In Opera Register RegisterJavaScript JavaScript Register RegisterJavaScript JavaScript Library Library HTML HTML 03/01/2020 Copyright Carl M. Burnett 26

    JavaScript Frameworks Programming Library Includes: support programs, compilers, code libraries, tool sets, and application programming interfaces (APIs) inversion of control default behavior extensibility non-modifiable framework code 03/01/2020 jQuery Midori MooTools Webix AngularJS Copyright Carl M. Burnett

    Comparisons of JavaScript Frameworks 27 Intro to jQuery The two jQuery libraries Files you need for jQuery applications jQuery (the core library) jQuery UI (User Interface) The jQuery JavaScript file The jQuery UI JavaScript file The jQuery UI stylesheet What jQuery offers Dozens of functions that make it easier to add JavaScript features to your web pages Functions that are tested for crossbrowser compatibility Two ways to include the jQuery files Use a Content Delivery Network (CDN) like Google, Microsoft, or jQuery.

    Download and deploy on your web server. jQuery 03/01/2020 Copyright Carl M. Burnett 28 How to include the jQuery files from a CDN Note - The href and src attributes should be coded on a single line.

    03/01/2020 Copyright Carl M. Burnett 29 Including jQuery files on your Web Site 03/01/2020 Copyright Carl M. Burnett 30 jQuery Syntax Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Examples:

    $(this).hide() - hides the current element. $("p").hide() - hides all

    elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". jQuery Selectors A type selector that selects all h1 elements $("h1") An id selector that selects the element with accordion as its id $("#accordion") A class selector that selects all elements in the fadein class $(".fadein") 03/01/2020 Copyright Carl M. Burnett 32 Session 3 Exercise 1 - Selectors Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

    Exercise 6 jQuery Events Examples: moving a mouse over an element selecting a radio button clicking on an element jQuery Events Mouse Events Keyboard Events Form Events click dblclick mousecenter mouseleave keypress keydown keyup submit

    change focus blur Document / Window Events load resize scroll unload jQuery Syntax For Event Methods $("p").click(); $("p").click(function(){ // action goes here!! }); jQuery Event Methods Click Event Double Click Event Focus Blur Hover Event Mouse Down Event Mouse Enter Event

    Mouse Leave Event Mouse Up Event On Multiple Event Session 3 Exercise 2 - Events Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 jQuery Effects Method Description animate() Runs a custom animation on the selected elements clearQueue() Removes all remaining queued functions from the selected elements delay()

    Sets a delay for all queued functions on the selected elements dequeue() Removes the next function from the queue, and then executes the function fadeIn() Fades in the selected elements fadeOut() Fades out the selected elements fadeTo() Fades in/out the selected elements to a given opacity fadeToggle() Toggles between the fadeIn() and fadeOut() methods jQuery Effects Method

    Description finish() Stops, removes and completes all queued animations for the selected elements hide() Hides the selected elements queue() Shows the queued functions on the selected elements show() Shows the selected elements slideDown() Slides-down (shows) the selected elements slideToggle()

    Toggles between the slideUp() and slideDown() methods slideUp() Slides-up (hides) the selected elements stop() Stops the currently running animation for the selected elements toggle() Toggles between the hide() and show() methods Session 3 Exercise 3 - Effects Exercise 1 Hide/Show Exercise 2 - Fade Exercise 3 - Slide Exercise 4 - Animate jQuery HTML Method Description

    addClass() Adds one or more class names to selected elements after() Inserts content after selected elements append() Inserts content at the end of selected elements appendTo() Inserts HTML elements at the end of selected elements attr() Sets or returns attributes/values of selected elements before() Inserts content before selected elements clone()

    Makes a copy of selected elements css() Sets or returns one or more style properties for selected elements detach() Removes selected elements (keeps data and events) jQuery HTML Method Description empty() Removes all child nodes and content from selected elements hasClass() Checks if any of the selected elements have a specified class name height()

    Sets or returns the height of selected elements html() Sets or returns the content of selected elements innerHeight() Returns the height of an element (includes padding, but not border) innerWidth() Returns the width of an element (includes padding, but not border) insertAfter() Inserts HTML elements after selected elements insertBefore() Inserts HTML elements before selected elements offset()

    Sets or returns the offset coordinates for selected elements (relative to the document) jQuery HTML Method Description offsetParent() Returns the first positioned parent element outerHeight() Returns the height of an element (includes padding and border) outerWidth() Returns the width of an element (includes padding and border) position() Returns the position (relative to the parent element) of an element prepend()

    Inserts content at the beginning of selected elements prependTo() Inserts HTML elements at the beginning of selected elements prop() Sets or returns properties/values of selected elements remove() Removes the selected elements (including data and events) removeAttr() Removes one or more attributes from selected elements jQuery HTML Method Description removeClass()

    Removes one or more classes from selected elements removeProp() Removes a property set by the prop() method replaceAll() Replaces selected elements with new HTML elements replaceWith() Replaces selected elements with new content scrollLeft() Sets or returns the horizontal scrollbar position of selected elements scrollTop() Sets or returns the vertical scrollbar position of selected elements text()

    Sets or returns the text content of selected elements toggleClass() Toggles between adding/removing one or more classes from selected elements unwrap() Removes the parent element of the selected elements jQuery HTML Method Description val() Sets or returns the value attribute of the selected elements (for form elements) width() Sets or returns the width of selected elements wrap()

    Wraps HTML element(s) around each selected element wrapAll() Wraps HTML element(s) around all selected elements wrapInner() Wraps HTML element(s) around the content of each selected element Session 3 Exercise 4 - HTML Methods Exercise 1 - Get Exercise 2 - Set Exercise 3 - Add Exercise 4 - Remove Exercise 5 - CSS Classes Exercise 6 - CSS Methods Exercise 7 - Dimensions jQuery Traversing Method Description add()

    Adds elements to the set of matched elements addBack() Adds the previous set of elements to the current set andSelf() Deprecated in version 1.8. An alias for addBack() children() Returns all direct children of the selected element closest() Returns the first ancestor of the selected element contents() Returns all direct children of the selected element (including text and comment nodes) each()

    Executes a function for each matched element end() Ends the most recent filtering operation in the current chain, and return the set of matched elements to its previous state jQuery Traversing Method Description eq() Returns an element with a specific index number of the selected elements filter() Reduce the set of matched elements to those that match the selector or pass the function's test find() Returns descendant elements of the selected element

    first() Returns the first element of the selected elements has() Returns all elements that have one or more elements inside of them is() Checks the set of matched elements against a selector/element/jQuery object, and return true if at least one of these elements matches the given arguments last() Returns the last element of the selected elements map() Passes each element in the matched set through a function, producing a new jQuery object containing the return values jQuery Traversing Method

    Description next() Returns the next sibling element of the selected element nextAll() Returns all next sibling elements of the selected element nextUntil() Returns all next sibling elements between two given arguments not() Remove elements from the set of matched elements offsetParent() Returns the first positioned parent element parent() Returns the direct parent element of the selected element

    parents() Returns all ancestor elements of the selected element parentsUntil() Returns all ancestor elements between two given arguments jQuery Traversing Method Description prev() Returns the previous sibling element of the selected element prevAll() Returns all previous sibling elements of the selected element prevUntil() Returns all previous sibling elements between two given arguments

    siblings() Returns all sibling elements of the selected element slice() Reduces the set of matched elements to a subset specified by a range of indices Session 3 Exercise 5 - Traversing Exercise 1 - Ancestors Exercise 2 - Descendants Exercise 3 - Siblings Exercise 4 - Filtering jQuery AJAX Method Description $.ajax() Performs an async AJAX request $.ajaxPrefilter()

    Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax() $.ajaxSetup() Sets the default values for future AJAX requests $.ajaxTransport() Creates an object that handles the actual transmission of Ajax data $.get() Loads data from a server using an AJAX HTTP GET request $.getJSON() Loads JSON-encoded data from a server using a HTTP GET request $.getScript() Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request $.param()

    Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests) jQuery AJAX Method Description $.post() Loads data from a server using an AJAX HTTP POST request ajaxComplete() Specifies a function to run when the AJAX request completes ajaxError() Specifies a function to run when the AJAX request completes with an error ajaxSend() Specifies a function to run before the AJAX request is sent

    ajaxStart() Specifies a function to run when the first AJAX request begins ajaxStop() Specifies a function to run when all AJAX requests have completed ajaxSuccess() Specifies a function to run when an AJAX request completes successfully load() Loads data from a server and puts the returned data into the selected element jQuery AJAX Method Description serialize() Encodes a set of form elements as a string for submission

    serializeArray() Encodes a set of form elements as an array of names and values jQuery Miscellaneous Methods Method Description data() Attaches data to, or gets data from, selected elements each() Execute a function for each matched element get() Get the DOM elements matched by the selector index() Search for a given element from among the matched elements

    $.noConflict() Release jQuery's control of the $ variable $.param() Create a serialized representation of an array or object (can be used as URL query string for AJAX requests) removeData() Removes a previously-stored piece of data size() Deprecated in version 1.8. Return the number of DOM elements matched by the jQuery selector toArray() Retrieve all the DOM elements contained in the jQuery set, as an array Student Exercise 6 Complete Exercise 15-1 and 15-2 on page 529 using Dreamweaver.

    Upload your HTML pages and CSS files to the live site to preview. 03/01/2020 Copyright Carl M. Burnett 57 Class Review Intro to JavaScript Object Technology Document Object Model (DOM) How to Use JavaScript to Enhance Your Web Pages JavaScript Validation Next Session 3 Chapter 16 - How to Use jQuery UI and jQuery Plugins to Enhance Your Web Pages 03/01/2020 Copyright Carl M. Burnett 58

    Recently Viewed Presentations

    • Why was there a revolution in Germany in 1918?

      Why was there a revolution in Germany in 1918?

      Why was there a revolution in Germany?. Write a PEEL paragraph to answer. this question. P: There was a revolution in Germany because people were becoming increasingly frustrated with the War.
    • Topic 1: Measurement and uncertainties 1.3  Vectors and

      Topic 1: Measurement and uncertainties 1.3 Vectors and

      Essential idea: Some quantities have direction and magnitude, others have magnitude only, and this understanding is the key to correct manipulation of quantities.This sub-topic will have broad applications across multiple fields within physics and other sciences. Nature of science: Models:...
    • Multi-packet FEC - IEEE Standards Association

      Multi-packet FEC - IEEE Standards Association

      Multi-packet FEC Date: 2007-11-13 ... NDS Ltd Core Network DSLAM VOD Servers DSL Modem Content flows from VOD servers to the home via the core network. This flow has to provide end-to-end QoS. Retransmissions outside the home disabled, to avoid...
    • Water Resources Engineering

      Water Resources Engineering

      Some basic concepts of statistics and probability. Statistics is the science of the collection, organization, and interpretation data. It deals with all aspects of this, including the planning of data collection in terms of the design of surveys and experiments...
    • Slayt 1 - Dr Ahmet DOBRUCALI

      Slayt 1 - Dr Ahmet DOBRUCALI

      The most common location of CEF is duodenum (Bouveret's syndrome) followed by the colon,stomach and jejunum. The most common site of gallstone impaction is in the terminal ileum or ileocecal valve. Many patients with gallstone ileus may have serious concomitant...
    • Mind from brain: physics & neuroscience

      Mind from brain: physics & neuroscience

      Aural imagery or . inner hearing. is … an important aspect of musical development. … connect the sound .. with a "feel" they know will produce that sound. The goal of music performance is the reproduction of the internal auditory...
    • งานนำเสนอ PowerPoint

      งานนำเสนอ PowerPoint

      Tutorial Group) 32. การระดมสมอง (Brain Storming) 33. การสรุปประเด็นสำคัญ / การนำเสนอผลของการสืบค้นที่ได้รับมอบหมาย ... Slide อบรม Viva Video โดย ...
    • TIA Overview - ITU

      TIA Overview - ITU

      TIA OVERVIEW Dr. Mark Epstein, Qualcomm Inc. Head of Delegation, TIA GSC-18 Meeting, 22-23 July 2014, Sophia Antipolis, France GSC-18, 22-23 July 2014, Sophia Antipolis * TELECOMMUNICATIONS INDUSTRY ASSOCIATION (TIA) A member-driven trade association and accredited standards developer, that ...