Module 3: Working with the DOM and jQuery

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

5
4
3
2
1
Events overview
What is jQuery?

• 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

HTML document
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork

DOM Tree
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork

• 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!
😃
=

5
4
3
2
1
Events overview
What is jQuery?

• 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

• 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

5
4
3
2
1
Events overview
What is jQuery?

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/

• 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

Example web page
https://en.wikipedia.org/wiki/Paul_Ekman

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>

Selection
ID
Class
Element
$("#question")
</ul>
</div>
</div>

Selection
ID
Class
Element
$("#emotions-list")
</ul>
</div>
</div>

Selection
Element
ID
Class
$(".positive")
</ul>
</div>
</div>

Selection
Element
ID
Class
$(".negative")
</ul>
</div>
</div>

Selection
ID
Class
Element
$("div")
</ul>
</div>
</div>

Selection
ID
Class
Element
$("input")
</ul>
</div>
</div>

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")
</ul>
</div>
</div>

Traversal
$("#question").parent()
</ul>
</div>
</div>

Traversal
$("#question").parent().find("li")
</ul>
</div>
</div>

Traversal
$("#question").parent().find("li").eq(2)
</ul>
</div>
</div>

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
$(".neutral")
</ul>
</div>
</div>

Manipulation
$(".neutral").addClass("positive")
<li class="neutral positive">Surprised</li>
</ul>
</div>
</div>

Manipulation
$(".neutral").addClass("positive").removeClass("neutral")
<li class="positive">Surprised</li>
</ul>
</div>
</div>

Manipulation
$("input[type='text']")
</ul>
</div>
</div>

Manipulation
$("input[type='text']").attr("disabled", "disabled")
</ul>
</div>
<input type="text" name="feeling"
disabled="disabled">
</div>

Manipulation
$("#question")
</ul>
</div>
</div>

Manipulation
$("#question").text("How do you feel?")
<div><h1 id="question">How do you feel?</h1>
</ul>
</div>
</div>

Manipulation
$("#emotions-list")
</ul>
</div>
</div>

Manipulation
$("#emotions-list").append('<li class="positive">Amusement</li>')
<li class="positive">Amusement</li>
</ul>
</div>
</div>

5
4
3
2
1
Events overview
What is jQuery?

• 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?

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

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

Events in APEX
Browser Events
- keyboard - Framework Events Component Events
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

Events in APEX
Browser Events
- mouse/trackpad - Framework Events Component Events
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

Events in APEX
Browser Events
- finger/pointer - Framework Events Component Events
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

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

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

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

5
4
3
2
1
Events overview
What is jQuery?

• 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/

• Note that an anonymous function is being passed to on()
Functions are “first-class” in JavaScript
<script>
$('#input-test').on('change', function() {
});
</script>

• Could also be a named function
Functions are “first-class” in JavaScript
<script>
function handleChange() {
}
$('#input-test').on('change', handleChange);
</script>

• 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
<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>

• 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

Pop quiz!
Which of these event bindings is correct?
A B

Event dispatching and DOM event flow
https://www.w3.org/TR/DOM-Level-3-Events/#event-flow

• 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');
});

• 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

Module 3: Working with the DOM and jQuery

More Related Content

What's hot (20)

Similar to Module 3: Working with the DOM and jQuery (20)

More from Daniel McGhan (7)

Recently uploaded (20)

Module 3: Working with the DOM and jQuery