Introduction to JavaScript for APEX Developers - Module 3: Working with the DOM and jQuery

Introduction to JavaScript for APEX Developers
Module 3: Working with the DOM and jQuery
2

Understanding the DOM
Agenda
1
2
3
4
5
What is jQuery?
Selecting, traversing, and manipulating the DOM
Events overview
Creating event listeners
3

Understanding the DOM
Agenda
1
4

HTML vs. DOM
§ 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
5

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

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

The DOM in JavaScript
§ 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
8
JS + Web
APIs
Endless
Possibilities!
😃
=
https://www.w3.org/TR/?tag=webapi

DOM problems
§ Early DOM APIs were not so good
• Very difficult to use
• Browsers were inconsistent
§ jQuery solved the problem
10

jQuery
§ jQuery is a DOM manipulation library
• 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
11

Using jQuery
§ 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.
12

Agenda
3 Selecting, traversing, and manipulating the DOM
13

Basic selectors
14
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 elements vs. jQuery objects
§ 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
15

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

Selection
17
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
18
ID
Class
Element
$("#question")
</ul>
</div>
</div>

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

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

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

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

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

Simple traversing
24
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
25
$("#question")
</ul>
</div>
</div>

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

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

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

Simple DOM manipulation
29
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
30
$(".neutral")
</ul>
</div>
</div>

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

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

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

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

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

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

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

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

What are events?
§ 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 component events
40

APEX Browser Events
41
DOM/Element Keyboard Mouse/Trackpad Finger/Pointer

DOM/Element events
42
APEX Name Event Name Fires 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
https://docs.oracle.com/en/database/oracle/application-express/19.1/htmdb/managing-dynamic-actions.html

Keyboard events
43
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

Mouse/Trackpad events
44
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

Finger/Pointer events
45
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

Agenda
5 Creating event listeners
46

Binding with on()
§ 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
47
<input id="input-test" type="input" name="input">
<script>
$('#input-test').on('change', function() {
console.log('it changed!');
});
</script>
https://api.jquery.com/on/

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

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

Event handler context
§ 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)
50
<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>

Window load vs. DOM content load
§ 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
51
$(window).on('load', function() {
console.log('window load');
});
$(function() {
console.log('DOM load');
});
https://api.jquery.com/ready/#ready-handler

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

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

Event delegation with on()
§ on() accepts an optional selector for event delegation
• More efficient than many individual bindings; works if elements replaced
54
$('.report-button').on('click', function() {
console.log('direct binding');
});

55
});

56
});
$('#report').on('click', '.report-button', function() {
console.log('delegated binding');
});

Event delegation with Dynamic Actions
§ 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)
57

Introduction to JavaScript for APEX Developers - Module 3: Working with the DOM and jQuery

Introduction to JavaScript for APEX Developers - Module 3: Working with the DOM and jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to JavaScript for APEX Developers - Module 3: Working with the DOM and jQuery

Similar to Introduction to JavaScript for APEX Developers - Module 3: Working with the DOM and jQuery (20)

More from Daniel McGhan

More from Daniel McGhan (9)

Recently uploaded

Recently uploaded (20)

Introduction to JavaScript for APEX Developers - Module 3: Working with the DOM and jQuery