DM
Uploaded byDaniel McGhan
PDF, PPTX752 views

Module 3: Working with the DOM and jQuery

The document is a module for apex developers that introduces JavaScript, specifically focusing on working with the Document Object Model (DOM) and jQuery. It explains how to create event listeners, select and manipulate elements within the DOM using jQuery, and emphasizes the advantages of using jQuery for cross-browser compatibility. The document also provides examples of selecting elements, traversing the DOM, and performing basic DOM manipulations.

Technology◦
In this document
Powered by AI

Overview of working with the DOM and jQuery, including event listeners and DOM manipulation.

Definition of HTML and DOM, their differences, and the role of DOM in JavaScript and web APIs.

Issues faced with early DOM APIs and how jQuery simplified DOM manipulation in browsers.

Basic selectors in jQuery, the difference between DOM elements and jQuery objects, and their methods.

Compilation of examples illustrating jQuery selectors and methods for traversing the DOM tree.

Methods for manipulating DOM elements using jQuery, including adding classes, modifying attributes, and updating content.

Explanation of events in APEX and their various related events triggered by user actions.

How to bind events using on() method in jQuery, including event delegation and context of event handlers.

Embed presentation

Download as PDF, PPTX
Module 3: Working with the DOM and jQuery Introduction to JavaScript for APEX Developers
Copyright © 2020, Oracle and/or its affiliates2 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
Copyright © 2020, Oracle and/or its affiliates3 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
Copyright © 2020, Oracle and/or its affiliates4 • Hypertext Markup Language (HTML) - Markup language that browsers understand to render web pages • Document Object Model (DOM) - In memory object representation of the HTML document (DOM tree) - API for working with and manipulating the memory structure HTML vs. DOM
Copyright © 2020, Oracle and/or its affiliates5 HTML document http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
Copyright © 2020, Oracle and/or its affiliates6 DOM Tree http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
Copyright © 2020, Oracle and/or its affiliates7 • The DOM is not a part of JavaScript (the language) • The DOM is one of many “Web APIs” - Web APIs make JavaScript useful in a browser - The DOM API is made available via window.document in browsers The DOM in JavaScript JS + Web APIs Endless Possibilities! 😃 =
Copyright © 2020, Oracle and/or its affiliates8 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
Copyright © 2020, Oracle and/or its affiliates9 • Early DOM APIs were not so good - Very difficult to use - Browsers were inconsistent • jQuery solved the problem - First released in 2006, when the DOM APIs were still a mess - jQuery provided simple APIs that worked on all major browsers • Today, the DOM APIs are improving - Check out http://youmightnotneedjquery.com - However, jQuery will be in APEX for the foreseeable future DOM problems
Copyright © 2020, Oracle and/or its affiliates10 • Step 1: Include the library in the web page - Already included with APEX - Adds a function named jQuery in the global scope - The shortcut $ is more common (also apex.jQuery in APEX) • Step 2: Select something - You invoke the jQuery function passing in a “selector” or “query” - jQuery returns a jQuery object (wraps selected elements) • Step 3: Do something with what you selected - DOM manipulation, traversal, events, effects, etc. Using jQuery
Copyright © 2020, Oracle and/or its affiliates11 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
Copyright © 2020, Oracle and/or its affiliates12 Basic selectors Description Syntax Example ID Selector '#id' $('#message') Class Selector '.class' $('.boring') Element Selector 'element' $('ul') Multiple Selector 'sel1, sel2, selN' $('.fun, #message') http://api.jquery.com/category/selectors/
Copyright © 2020, Oracle and/or its affiliates13 • DOM APIs return DOM elements • jQuery APIs return a jQuery object - Wraps the DOM elements selected • jQuery objects have their own methods - Often still easier to use than DOM APIs - jQuery methods are often chainable • Access to elements is provided if needed - Use [] or get DOM elements vs. jQuery objects
Copyright © 2020, Oracle and/or its affiliates14 Example web page https://en.wikipedia.org/wiki/Paul_Ekman
Copyright © 2020, Oracle and/or its affiliates15 Example web page HTML ID Class Element <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates16 Selection ID Class Element $("#question") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates17 Selection ID Class Element $("#emotions-list") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates18 Selection Element ID Class $(".positive") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates19 Selection Element ID Class $(".negative") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates20 Selection ID Class Element $("div") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates21 Selection ID Class Element $("input") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates22 Simple traversing Description Example functions Example Parents parent, parents, closest $('li.done').parent(); Children children, find $('ul').find('li'); Siblings siblings, next, prev $('li.pending').next(); Filtering eq, filter, first, last $('li').eq(1); http://api.jquery.com/category/traversing/
Traversal $("#question") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div> Copyright © 2020, Oracle and/or its affiliates23
Traversal Copyright © 2020, Oracle and/or its affiliates24 $("#question").parent() <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Traversal Copyright © 2020, Oracle and/or its affiliates25 $("#question").parent().find("li") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Traversal Copyright © 2020, Oracle and/or its affiliates26 $("#question").parent().find("li").eq(2) <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates27 Simple DOM manipulation Description Example functions Example Add/remove classes addClass, removeClass, toggleClass $('li.done') .removeClass('done') .addClass('pending'); Modify attributes attr, removeAttr, prop, removeProp, val $('input') .attr('disabled', 'disabled'); DOM insertion html, text, append, prepend $('ul') .append('<li>Hello</li>'); DOM removal remove, empty $('ul').empty(); Change CSS styles css $('h1').css('color', 'red'); http://api.jquery.com/category/manipulation/
Manipulation Copyright © 2020, Oracle and/or its affiliates28 $(".neutral") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates29 $(".neutral").addClass("positive") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral positive">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates30 $(".neutral").addClass("positive").removeClass("neutral") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="positive">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates31 $("input[type='text']") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="positive">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates32 $("input[type='text']").attr("disabled", "disabled") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="positive">Surprised</li> </ul> </div> <input type="text" name="feeling" disabled="disabled"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates33 $("#question") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates34 $("#question").text("How do you feel?") <div class="question-wrapper"> <div><h1 id="question">How do you feel?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates35 $("#emotions-list") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Manipulation Copyright © 2020, Oracle and/or its affiliates36 $("#emotions-list").append('<li class="positive">Amusement</li>') <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> <li class="positive">Amusement</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
Copyright © 2020, Oracle and/or its affiliates37 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
Copyright © 2020, Oracle and/or its affiliates38 • Events are like triggers in the database - Allow code to respond to user actions • Browsers automatically trigger many events • It’s possible to trigger custom events - APEX makes use of this for framework and component events What are events?
Copyright © 2020, Oracle and/or its affiliates39 Events in APEX Browser Events Framework Events Component Events https://docs.oracle.com/en/database/oracle/application-express/19.2/htmdb/managing-dynamic-actions.html
Copyright © 2020, Oracle and/or its affiliates40 Events in APEX Browser Events - generic - Framework Events Component Events DA Name Event Name Triggered when… Change change a control loses focus and its value has been modified since gaining focus Get Focus focus the element receives focus Lose Focus blur the element receives focus Page Load ready the page loads Page Unload unload a page is unloaded Resource Load load the appropriate resource(s) has loaded Resize resize the browser window is resized Scroll scroll a scrollable element is scrolled Select select a user selects some text in a text field
Copyright © 2020, Oracle and/or its affiliates41 Events in APEX Browser Events - keyboard - Framework Events Component Events DA Name Event Name Triggered when… Key Down keydown a key on the keyboard is pressed Key Press keypress a key on the keyboard is pressed resulting in text being entered Key Release keyup a key on the keyboard is released
Copyright © 2020, Oracle and/or its affiliates42 Events in APEX Browser Events - mouse/trackpad - Framework Events Component Events DA Name Event Name Triggered when… Click click the pointing device button is clicked over the element Double Click dblclick the pointing device button is double clicked over the element Mouse Button Press mousedown the pointing device button is pressed over the element Mouse Button Release mouseup the pointing device button is released over the element Mouse Enter mouseenter the pointing device is moved into the element (once) Mouse Leave mouseleave the pointing device is moved away from the element (once) Mouse Move mousemove the pointing device is moved while it is over the element
Copyright © 2020, Oracle and/or its affiliates43 Events in APEX Browser Events - finger/pointer - Framework Events Component Events DA Name Event Name Triggered when… Tap apextap the pointer is doing a small tap/click Double Tap apexdoubletap the pointer is doing a double tap/click Press apexpress the pointer is down for greater than 250ms Swipe apexswipe the pointer is moving fast in a horizontal direction Pan apexpan the pointer is down, then moved in a horizontal direction
Copyright © 2020, Oracle and/or its affiliates44 Events in APEX Browser Events Framework Events Component Events DA Name Event Name Triggered… After Refresh apexafterrefresh after the triggering element has been refreshed Before Page Submit apexbeforepagesubmit before a page is submitted Before Refresh apexbeforerefresh before the triggering element has been refreshed Dialog Closed apexafterclosedialog after an APEX dialog is closed • See the Universal Theme app for more events (Reference > JavaScript Events) - https://apex.oracle.com/ut - Examples: theme42ready, theme42layoutchanged • See the JS API doc on the apex namespace for more events - https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.html - Examples: apexreadyend, apexwindowresized
Copyright © 2020, Oracle and/or its affiliates45 Events in APEX Browser Events Framework Events DA Name Event Name Triggered… Mode Change modechange* when edit mode is changed Page Change gridpagechange when there is a pagination event Report Change reportchange* when the current report is changed Row Initialization apexbeginrecordedit when a model row/record is about to be edited Save save* after the Interactive Grid data has been saved Selection Change selectionchange* when the selection state changes View Change viewchange* when the view changes Component Events - Interactive Grid - * Prepend with: interactivegrid • See the JS API doc on the interactiveGrid widget for more events - https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/interactiveGrid.html - Examples: reportsettingschange, viewmodelcreate
Copyright © 2020, Oracle and/or its affiliates46 Events in APEX Browser Events Framework Events DA Name Event Name Date selected [Calendar] apexcalendardateselect Event selected [Calendar] apexcalendareventselect View changed [Calendar] apexcalendarviewchange Facets Change [Faceted Search] facetschange Selection Change [Tree] treeviewselectionchange Update [Text Field with autocomplete] ojupdate markdownified [Markdown Editor] markdownified Change Order [Shuttle] shuttlechangeorder Component Events - Everything Else - • See related widgets in JS API doc for more events • Installing plug-ins may add additional Component Events
Copyright © 2020, Oracle and/or its affiliates47 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
Copyright © 2020, Oracle and/or its affiliates48 • on() allows you to bind a function to an event on an element - The callback will be passed an event object with info about the event Binding with on() <input id="input-test" type="input" name="input"> <script> $('#input-test').on('change', function() { console.log('it changed!'); }); </script> https://api.jquery.com/on/
Copyright © 2020, Oracle and/or its affiliates49 • Note that an anonymous function is being passed to on() Functions are “first-class” in JavaScript <input id="input-test" type="input" name="input"> <script> $('#input-test').on('change', function() { console.log('it changed!'); }); </script>
Copyright © 2020, Oracle and/or its affiliates50 • Could also be a named function Functions are “first-class” in JavaScript <input id="input-test" type="input" name="input"> <script> function handleChange() { console.log('it changed!'); } $('#input-test').on('change', handleChange); </script>
Copyright © 2020, Oracle and/or its affiliates51 • Context about the event is often needed for the event handler to do its work • Event handlers are passed the event object • The keyword this will be set to the DOM element that triggered the event - Can convert to a jQuery object by selecting it: $(this) Event handler context <input id="input-test" type="input" name="input"> <script> $('#input-test').on('change', function(event) { console.log(event); // Event object console.log(this); // DOM element with id of 'input-test' $(this).hide(); // DOM element converted to jQuery object }); </script>
Copyright © 2020, Oracle and/or its affiliates52 • Developers often want to execute JavaScript ASAP • The window’s load event waits for all resources to load - Includes window frames, objects, and images • jQuery can wait for only the DOM tree to load - Often much faster; helps reduce flicker Window load vs. DOM content load $(window).on('load', function() { console.log('window load'); }); $(function() { console.log('DOM load'); }); https://api.jquery.com/ready/#ready-handler
Copyright © 2020, Oracle and/or its affiliates53 Pop quiz! Which of these event bindings is correct? A B
Copyright © 2020, Oracle and/or its affiliates54 Event dispatching and DOM event flow https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
Copyright © 2020, Oracle and/or its affiliates55 • on() accepts an optional selector for event delegation - More efficient than many individual bindings; works if elements replaced Event delegation with on() $('.report-button').on('click', function() { console.log('direct binding'); });
Copyright © 2020, Oracle and/or its affiliates56 • on() accepts an optional selector for event delegation - More efficient than many individual bindings; works if elements replaced Event delegation with on() $('.report-button').on('click', function() { console.log('direct binding'); });
Copyright © 2020, Oracle and/or its affiliates57 • on() accepts an optional selector for event delegation - More efficient than many individual bindings; works if elements replaced Event delegation with on() $('.report-button').on('click', function() { console.log('direct binding'); }); $('#report').on('click', '.report-button', function() { console.log('delegated binding'); });
Copyright © 2020, Oracle and/or its affiliates58 • Dynamic Actions support event delegation too • Look under the Dynamic Action’s Advanced settings - Set Event Scope to Dynamic - Static Container is optional (defaults to the document) Event delegation with Dynamic Actions Action Event
Module 3: Working with the DOM and jQuery

More Related Content

PDF
Module 1: JavaScript Basics
byDaniel McGhan
 
PDF
Module 2: Adding JavaScript to APEX Apps
byDaniel McGhan
 
PPT
Oracle Forms Introduction
bySekhar Byna
 
PPTX
jQuery
byJay Poojara
 
PPTX
Introduction to React JS for beginners
byVarun Raj
 
PDF
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
byEdureka!
 
PDF
Why Vue.js?
byJonathan Goode
 
PDF
JSON WEB TOKEN
byKnoldus Inc.
 
Module 1: JavaScript Basics
byDaniel McGhan
 
Module 2: Adding JavaScript to APEX Apps
byDaniel McGhan
 
Oracle Forms Introduction
bySekhar Byna
 
jQuery
byJay Poojara
 
Introduction to React JS for beginners
byVarun Raj
 
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
byEdureka!
 
Why Vue.js?
byJonathan Goode
 
JSON WEB TOKEN
byKnoldus Inc.
 

What's hot

PDF
Intro to JavaScript for APEX Developers
byDaniel McGhan
 
PPTX
Reactjs
byNeha Sharma
 
PPTX
Rest API Security
byStormpath
 
ODP
OAuth2 - Introduction
byKnoldus Inc.
 
PPTX
Redis Streams
byRedis Labs
 
PDF
From Java 11 to 17 and beyond.pdf
byJosé Paumard
 
PPTX
AEM and Sling
byLo Ki
 
PDF
An introduction to React.js
byEmanuele DelBono
 
PPTX
Sql server
byFajar Baskoro
 
PPTX
XQuery
byRaji Ghawi
 
PDF
React for Beginners
byDerek Willian Stavis
 
PPTX
Intro to React
byEric Westfall
 
PPTX
Json
bySteve Fort
 
PDF
Web Components
byNikolaus Graf
 
PPTX
Domain Driven Design 101
byRichard Dingwall
 
PDF
Oracle LOB Internals and Performance Tuning
byTanel Poder
 
PDF
JSON Web Tokens
byIvan Rosolen
 
PDF
The New JavaScript: ES6
byRob Eisenberg
 
PPTX
Spring @Transactional Explained
byVictor Rentea
 
PPT
Cursores explicitos
bymarvinarevalo83
 
Intro to JavaScript for APEX Developers
byDaniel McGhan
 
Reactjs
byNeha Sharma
 
Rest API Security
byStormpath
 
OAuth2 - Introduction
byKnoldus Inc.
 
Redis Streams
byRedis Labs
 
From Java 11 to 17 and beyond.pdf
byJosé Paumard
 
AEM and Sling
byLo Ki
 
An introduction to React.js
byEmanuele DelBono
 
Sql server
byFajar Baskoro
 
XQuery
byRaji Ghawi
 
React for Beginners
byDerek Willian Stavis
 
Intro to React
byEric Westfall
 
Json
bySteve Fort
 
Web Components
byNikolaus Graf
 
Domain Driven Design 101
byRichard Dingwall
 
Oracle LOB Internals and Performance Tuning
byTanel Poder
 
JSON Web Tokens
byIvan Rosolen
 
The New JavaScript: ES6
byRob Eisenberg
 
Spring @Transactional Explained
byVictor Rentea
 
Cursores explicitos
bymarvinarevalo83
 

Similar to Module 3: Working with the DOM and jQuery

PPT
Jquery
byGirish Srivastava
 
PPT
JQuery introduction
byNexThoughts Technologies
 
PDF
jQuery in 15 minutes
bySimon Willison
 
PPTX
Web Development Introduction to jQuery
byLaurence Svekis ✔
 
PPT
J query presentation
bysawarkar17
 
PPT
jQuery Introductions and Advanced iquery
byMuhammad439928
 
PDF
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...
byDaniel McGhan
 
PPTX
Upstate CSCI 450 jQuery
byDanWooster1
 
PPTX
Starting with jQuery
byAnil Kumar
 
PPT
JS Libraries and jQuery Overview
byAleksandr Motsjonov
 
PPTX
Jquery fundamentals
bySalvatore Fazio
 
PPT
J query presentation
byakanksha17
 
PDF
jQuery Features to Avoid
bydmethvin
 
PPT
jQuery Introduction/ jquery basic concept
byMuhammadJameel83
 
PDF
Intro to jQuery @ Startup Institute
byRafael Gonzaque
 
PPTX
Web technologies-course 11.pptx
byStefan Oprea
 
PPTX
Jqueryppt (1)
byAndreaSmile06
 
PPTX
J Query The Write Less Do More Javascript Library
byrsnarayanan
 
PDF
Introduction to jQuery
byNagaraju Sangam
 
PPT
J query introduction
bySMS_VietNam
 
Jquery
byGirish Srivastava
 
JQuery introduction
byNexThoughts Technologies
 
jQuery in 15 minutes
bySimon Willison
 
Web Development Introduction to jQuery
byLaurence Svekis ✔
 
J query presentation
bysawarkar17
 
jQuery Introductions and Advanced iquery
byMuhammad439928
 
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...
byDaniel McGhan
 
Upstate CSCI 450 jQuery
byDanWooster1
 
Starting with jQuery
byAnil Kumar
 
JS Libraries and jQuery Overview
byAleksandr Motsjonov
 
Jquery fundamentals
bySalvatore Fazio
 
J query presentation
byakanksha17
 
jQuery Features to Avoid
bydmethvin
 
jQuery Introduction/ jquery basic concept
byMuhammadJameel83
 
Intro to jQuery @ Startup Institute
byRafael Gonzaque
 
Web technologies-course 11.pptx
byStefan Oprea
 
Jqueryppt (1)
byAndreaSmile06
 
J Query The Write Less Do More Javascript Library
byrsnarayanan
 
Introduction to jQuery
byNagaraju Sangam
 
J query introduction
bySMS_VietNam
 

More from Daniel McGhan

PDF
JSON and Oracle Database: A Brave New World
byDaniel McGhan
 
PPTX
Dynamic Actions, the Hard Parts
byDaniel McGhan
 
PPTX
JavaScript: Why Should I Care?
byDaniel McGhan
 
PDF
Introduction to JavaScript for APEX Developers - Module 1: JavaScript Basics
byDaniel McGhan
 
PDF
Introduction to JavaScript for APEX Developers - Module 2: Adding JavaScript ...
byDaniel McGhan
 
PPTX
Intro to GraphQL for Database Developers
byDaniel McGhan
 
JSON and Oracle Database: A Brave New World
byDaniel McGhan
 
Dynamic Actions, the Hard Parts
byDaniel McGhan
 
JavaScript: Why Should I Care?
byDaniel McGhan
 
Introduction to JavaScript for APEX Developers - Module 1: JavaScript Basics
byDaniel McGhan
 
Introduction to JavaScript for APEX Developers - Module 2: Adding JavaScript ...
byDaniel McGhan
 
Intro to GraphQL for Database Developers
byDaniel McGhan
 

Recently uploaded

PDF
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
byWintari Yasmin
 
PDF
Oracle MySQL HeatWave - Complete - Version 3
byLuca Bonesini
 
PPTX
The power of Slack and MuleSoft | Bangalore MuleSoft Meetup #60
byshyamraj55
 
PDF
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
PDF
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
PDF
Oracle MySQL HeatWave - Short - Version 3
byLuca Bonesini
 
PDF
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
PDF
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
PPTX
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
PDF
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
PDF
So You Want to Work at Google | DevFest Seattle 2025
byMargaret Maynard-Reid
 
PDF
Lets Build a Serverless Function with Kiro
byChris Bingham
 
PDF
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
PDF
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
PPTX
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
PDF
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
PPTX
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
PDF
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
PDF
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations
bySharpEagle Technology
 
PPTX
Connecting the unconnectable: Exploring LoRaWAN for IoT
byasasiraarthur
 
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
byWintari Yasmin
 
Oracle MySQL HeatWave - Complete - Version 3
byLuca Bonesini
 
The power of Slack and MuleSoft | Bangalore MuleSoft Meetup #60
byshyamraj55
 
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
Oracle MySQL HeatWave - Short - Version 3
byLuca Bonesini
 
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
So You Want to Work at Google | DevFest Seattle 2025
byMargaret Maynard-Reid
 
Lets Build a Serverless Function with Kiro
byChris Bingham
 
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations
bySharpEagle Technology
 
Connecting the unconnectable: Exploring LoRaWAN for IoT
byasasiraarthur
 

Module 3: Working with the DOM and jQuery

  • 1.
    Module 3: Workingwith the DOM and jQuery Introduction to JavaScript for APEX Developers
  • 2.
    Copyright © 2020,Oracle and/or its affiliates2 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
  • 3.
    Copyright © 2020,Oracle and/or its affiliates3 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
  • 4.
    Copyright © 2020,Oracle and/or its affiliates4 • Hypertext Markup Language (HTML) - Markup language that browsers understand to render web pages • Document Object Model (DOM) - In memory object representation of the HTML document (DOM tree) - API for working with and manipulating the memory structure HTML vs. DOM
  • 5.
    Copyright © 2020,Oracle and/or its affiliates5 HTML document http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
  • 6.
    Copyright © 2020,Oracle and/or its affiliates6 DOM Tree http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
  • 7.
    Copyright © 2020,Oracle and/or its affiliates7 • The DOM is not a part of JavaScript (the language) • The DOM is one of many “Web APIs” - Web APIs make JavaScript useful in a browser - The DOM API is made available via window.document in browsers The DOM in JavaScript JS + Web APIs Endless Possibilities! 😃 =
  • 8.
    Copyright © 2020,Oracle and/or its affiliates8 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
  • 9.
    Copyright © 2020,Oracle and/or its affiliates9 • Early DOM APIs were not so good - Very difficult to use - Browsers were inconsistent • jQuery solved the problem - First released in 2006, when the DOM APIs were still a mess - jQuery provided simple APIs that worked on all major browsers • Today, the DOM APIs are improving - Check out http://youmightnotneedjquery.com - However, jQuery will be in APEX for the foreseeable future DOM problems
  • 10.
    Copyright © 2020,Oracle and/or its affiliates10 • Step 1: Include the library in the web page - Already included with APEX - Adds a function named jQuery in the global scope - The shortcut $ is more common (also apex.jQuery in APEX) • Step 2: Select something - You invoke the jQuery function passing in a “selector” or “query” - jQuery returns a jQuery object (wraps selected elements) • Step 3: Do something with what you selected - DOM manipulation, traversal, events, effects, etc. Using jQuery
  • 11.
    Copyright © 2020,Oracle and/or its affiliates11 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
  • 12.
    Copyright © 2020,Oracle and/or its affiliates12 Basic selectors Description Syntax Example ID Selector '#id' $('#message') Class Selector '.class' $('.boring') Element Selector 'element' $('ul') Multiple Selector 'sel1, sel2, selN' $('.fun, #message') http://api.jquery.com/category/selectors/
  • 13.
    Copyright © 2020,Oracle and/or its affiliates13 • DOM APIs return DOM elements • jQuery APIs return a jQuery object - Wraps the DOM elements selected • jQuery objects have their own methods - Often still easier to use than DOM APIs - jQuery methods are often chainable • Access to elements is provided if needed - Use [] or get DOM elements vs. jQuery objects
  • 14.
    Copyright © 2020,Oracle and/or its affiliates14 Example web page https://en.wikipedia.org/wiki/Paul_Ekman
  • 15.
    Copyright © 2020,Oracle and/or its affiliates15 Example web page HTML ID Class Element <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 16.
    Copyright © 2020,Oracle and/or its affiliates16 Selection ID Class Element $("#question") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 17.
    Copyright © 2020,Oracle and/or its affiliates17 Selection ID Class Element $("#emotions-list") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 18.
    Copyright © 2020,Oracle and/or its affiliates18 Selection Element ID Class $(".positive") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 19.
    Copyright © 2020,Oracle and/or its affiliates19 Selection Element ID Class $(".negative") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 20.
    Copyright © 2020,Oracle and/or its affiliates20 Selection ID Class Element $("div") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 21.
    Copyright © 2020,Oracle and/or its affiliates21 Selection ID Class Element $("input") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 22.
    Copyright © 2020,Oracle and/or its affiliates22 Simple traversing Description Example functions Example Parents parent, parents, closest $('li.done').parent(); Children children, find $('ul').find('li'); Siblings siblings, next, prev $('li.pending').next(); Filtering eq, filter, first, last $('li').eq(1); http://api.jquery.com/category/traversing/
  • 23.
    Traversal $("#question") <div class="question-wrapper"> <div><h1 id="question">Howare you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div> Copyright © 2020, Oracle and/or its affiliates23
  • 24.
    Traversal Copyright © 2020,Oracle and/or its affiliates24 $("#question").parent() <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 25.
    Traversal Copyright © 2020,Oracle and/or its affiliates25 $("#question").parent().find("li") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 26.
    Traversal Copyright © 2020,Oracle and/or its affiliates26 $("#question").parent().find("li").eq(2) <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 27.
    Copyright © 2020,Oracle and/or its affiliates27 Simple DOM manipulation Description Example functions Example Add/remove classes addClass, removeClass, toggleClass $('li.done') .removeClass('done') .addClass('pending'); Modify attributes attr, removeAttr, prop, removeProp, val $('input') .attr('disabled', 'disabled'); DOM insertion html, text, append, prepend $('ul') .append('<li>Hello</li>'); DOM removal remove, empty $('ul').empty(); Change CSS styles css $('h1').css('color', 'red'); http://api.jquery.com/category/manipulation/
  • 28.
    Manipulation Copyright © 2020,Oracle and/or its affiliates28 $(".neutral") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 29.
    Manipulation Copyright © 2020,Oracle and/or its affiliates29 $(".neutral").addClass("positive") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral positive">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 30.
    Manipulation Copyright © 2020,Oracle and/or its affiliates30 $(".neutral").addClass("positive").removeClass("neutral") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="positive">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 31.
    Manipulation Copyright © 2020,Oracle and/or its affiliates31 $("input[type='text']") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="positive">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 32.
    Manipulation Copyright © 2020,Oracle and/or its affiliates32 $("input[type='text']").attr("disabled", "disabled") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="positive">Surprised</li> </ul> </div> <input type="text" name="feeling" disabled="disabled"> <input type="button" value="Submit"> </div>
  • 33.
    Manipulation Copyright © 2020,Oracle and/or its affiliates33 $("#question") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 34.
    Manipulation Copyright © 2020,Oracle and/or its affiliates34 $("#question").text("How do you feel?") <div class="question-wrapper"> <div><h1 id="question">How do you feel?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 35.
    Manipulation Copyright © 2020,Oracle and/or its affiliates35 $("#emotions-list") <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 36.
    Manipulation Copyright © 2020,Oracle and/or its affiliates36 $("#emotions-list").append('<li class="positive">Amusement</li>') <div class="question-wrapper"> <div><h1 id="question">How are you feeling?</h1> <div>Here are the six basic emotions:</div> <ul id="emotions-list"> <li class="positive">Happy</li> <li class="negative">Sad</li> <li class="negative">Fearful</li> <li class="negative">Disgusted</li> <li class="negative">Angry</li> <li class="neutral">Surprised</li> <li class="positive">Amusement</li> </ul> </div> <input type="text" name="feeling"> <input type="button" value="Submit"> </div>
  • 37.
    Copyright © 2020,Oracle and/or its affiliates37 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
  • 38.
    Copyright © 2020,Oracle and/or its affiliates38 • Events are like triggers in the database - Allow code to respond to user actions • Browsers automatically trigger many events • It’s possible to trigger custom events - APEX makes use of this for framework and component events What are events?
  • 39.
    Copyright © 2020,Oracle and/or its affiliates39 Events in APEX Browser Events Framework Events Component Events https://docs.oracle.com/en/database/oracle/application-express/19.2/htmdb/managing-dynamic-actions.html
  • 40.
    Copyright © 2020,Oracle and/or its affiliates40 Events in APEX Browser Events - generic - Framework Events Component Events DA Name Event Name Triggered when… Change change a control loses focus and its value has been modified since gaining focus Get Focus focus the element receives focus Lose Focus blur the element receives focus Page Load ready the page loads Page Unload unload a page is unloaded Resource Load load the appropriate resource(s) has loaded Resize resize the browser window is resized Scroll scroll a scrollable element is scrolled Select select a user selects some text in a text field
  • 41.
    Copyright © 2020,Oracle and/or its affiliates41 Events in APEX Browser Events - keyboard - Framework Events Component Events DA Name Event Name Triggered when… Key Down keydown a key on the keyboard is pressed Key Press keypress a key on the keyboard is pressed resulting in text being entered Key Release keyup a key on the keyboard is released
  • 42.
    Copyright © 2020,Oracle and/or its affiliates42 Events in APEX Browser Events - mouse/trackpad - Framework Events Component Events DA Name Event Name Triggered when… Click click the pointing device button is clicked over the element Double Click dblclick the pointing device button is double clicked over the element Mouse Button Press mousedown the pointing device button is pressed over the element Mouse Button Release mouseup the pointing device button is released over the element Mouse Enter mouseenter the pointing device is moved into the element (once) Mouse Leave mouseleave the pointing device is moved away from the element (once) Mouse Move mousemove the pointing device is moved while it is over the element
  • 43.
    Copyright © 2020,Oracle and/or its affiliates43 Events in APEX Browser Events - finger/pointer - Framework Events Component Events DA Name Event Name Triggered when… Tap apextap the pointer is doing a small tap/click Double Tap apexdoubletap the pointer is doing a double tap/click Press apexpress the pointer is down for greater than 250ms Swipe apexswipe the pointer is moving fast in a horizontal direction Pan apexpan the pointer is down, then moved in a horizontal direction
  • 44.
    Copyright © 2020,Oracle and/or its affiliates44 Events in APEX Browser Events Framework Events Component Events DA Name Event Name Triggered… After Refresh apexafterrefresh after the triggering element has been refreshed Before Page Submit apexbeforepagesubmit before a page is submitted Before Refresh apexbeforerefresh before the triggering element has been refreshed Dialog Closed apexafterclosedialog after an APEX dialog is closed • See the Universal Theme app for more events (Reference > JavaScript Events) - https://apex.oracle.com/ut - Examples: theme42ready, theme42layoutchanged • See the JS API doc on the apex namespace for more events - https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.html - Examples: apexreadyend, apexwindowresized
  • 45.
    Copyright © 2020,Oracle and/or its affiliates45 Events in APEX Browser Events Framework Events DA Name Event Name Triggered… Mode Change modechange* when edit mode is changed Page Change gridpagechange when there is a pagination event Report Change reportchange* when the current report is changed Row Initialization apexbeginrecordedit when a model row/record is about to be edited Save save* after the Interactive Grid data has been saved Selection Change selectionchange* when the selection state changes View Change viewchange* when the view changes Component Events - Interactive Grid - * Prepend with: interactivegrid • See the JS API doc on the interactiveGrid widget for more events - https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/interactiveGrid.html - Examples: reportsettingschange, viewmodelcreate
  • 46.
    Copyright © 2020,Oracle and/or its affiliates46 Events in APEX Browser Events Framework Events DA Name Event Name Date selected [Calendar] apexcalendardateselect Event selected [Calendar] apexcalendareventselect View changed [Calendar] apexcalendarviewchange Facets Change [Faceted Search] facetschange Selection Change [Tree] treeviewselectionchange Update [Text Field with autocomplete] ojupdate markdownified [Markdown Editor] markdownified Change Order [Shuttle] shuttlechangeorder Component Events - Everything Else - • See related widgets in JS API doc for more events • Installing plug-ins may add additional Component Events
  • 47.
    Copyright © 2020,Oracle and/or its affiliates47 5 4 3 2 1 Creating event listeners Events overview Selecting, traversing, and manipulating the DOM What is jQuery? Understanding the DOM Working with the DOM and jQuery
  • 48.
    Copyright © 2020,Oracle and/or its affiliates48 • on() allows you to bind a function to an event on an element - The callback will be passed an event object with info about the event Binding with on() <input id="input-test" type="input" name="input"> <script> $('#input-test').on('change', function() { console.log('it changed!'); }); </script> https://api.jquery.com/on/
  • 49.
    Copyright © 2020,Oracle and/or its affiliates49 • Note that an anonymous function is being passed to on() Functions are “first-class” in JavaScript <input id="input-test" type="input" name="input"> <script> $('#input-test').on('change', function() { console.log('it changed!'); }); </script>
  • 50.
    Copyright © 2020,Oracle and/or its affiliates50 • Could also be a named function Functions are “first-class” in JavaScript <input id="input-test" type="input" name="input"> <script> function handleChange() { console.log('it changed!'); } $('#input-test').on('change', handleChange); </script>
  • 51.
    Copyright © 2020,Oracle and/or its affiliates51 • Context about the event is often needed for the event handler to do its work • Event handlers are passed the event object • The keyword this will be set to the DOM element that triggered the event - Can convert to a jQuery object by selecting it: $(this) Event handler context <input id="input-test" type="input" name="input"> <script> $('#input-test').on('change', function(event) { console.log(event); // Event object console.log(this); // DOM element with id of 'input-test' $(this).hide(); // DOM element converted to jQuery object }); </script>
  • 52.
    Copyright © 2020,Oracle and/or its affiliates52 • Developers often want to execute JavaScript ASAP • The window’s load event waits for all resources to load - Includes window frames, objects, and images • jQuery can wait for only the DOM tree to load - Often much faster; helps reduce flicker Window load vs. DOM content load $(window).on('load', function() { console.log('window load'); }); $(function() { console.log('DOM load'); }); https://api.jquery.com/ready/#ready-handler
  • 53.
    Copyright © 2020,Oracle and/or its affiliates53 Pop quiz! Which of these event bindings is correct? A B
  • 54.
    Copyright © 2020,Oracle and/or its affiliates54 Event dispatching and DOM event flow https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
  • 55.
    Copyright © 2020,Oracle and/or its affiliates55 • on() accepts an optional selector for event delegation - More efficient than many individual bindings; works if elements replaced Event delegation with on() $('.report-button').on('click', function() { console.log('direct binding'); });
  • 56.
    Copyright © 2020,Oracle and/or its affiliates56 • on() accepts an optional selector for event delegation - More efficient than many individual bindings; works if elements replaced Event delegation with on() $('.report-button').on('click', function() { console.log('direct binding'); });
  • 57.
    Copyright © 2020,Oracle and/or its affiliates57 • on() accepts an optional selector for event delegation - More efficient than many individual bindings; works if elements replaced Event delegation with on() $('.report-button').on('click', function() { console.log('direct binding'); }); $('#report').on('click', '.report-button', function() { console.log('delegated binding'); });
  • 58.
    Copyright © 2020,Oracle and/or its affiliates58 • Dynamic Actions support event delegation too • Look under the Dynamic Action’s Advanced settings - Set Event Scope to Dynamic - Static Container is optional (defaults to the document) Event delegation with Dynamic Actions Action Event