Getting Started with JavaScript

for APEX Developers

Dan McGhan
Developer Advocate
October 29, 2019

2
 Dan McGhan

About
Developer Advocate @ Oracle
Focus on JavaScript and APEX

Contact
[email protected]
@dmcghan

3
Agenda

1 JavaScript Basics
2 Adding JavaScript to APEX Apps
3 Working with jQuery and the DOM

4
 Part 1: JavaScript Basics

5
Part 1: JavaScript Basics

1 Why JavaScript?
2 Variables and data types
3 Operators
4 Conditionals and loops
5 Objects and functions
6 Developer tools

6
Part 1: JavaScript Basics

1 Why JavaScript?

7
 “ If you're looking for a great APEX
developer, you're really looking for
a full-stack developer.
Joel Kalman, co-creator of APEX

https://joelkallman.blogspot.com/2017/10/a-great-apex-developer-isa-full-stack.html
8
 Server-side Client-side

Oracle Database

Data Modeling

SQL

PL/SQL

9
10
11
 Server-side Client-side

Oracle Database HTML

Data Modeling CSS

SQL JavaScript

PL/SQL

12
It often takes just a few lines of JavaScript
to deliver functionality not available out-of-the-box

13
It often takes just a few lines of JavaScript
to deliver functionality not available out-of-the-box

Your goal is not to be the master…

14
It often takes just a few lines of JavaScript
to deliver functionality not available out-of-the-box

Your goal is not to be the master…

Just learn enough to be dangerous! 🤓

15
 Custom JavaScript code may break
when upgrading APEX. This often
results from small changes to the
HTML generated by APEX and may
require minor adjustments to fix.
You have been warned!

16
 Tips to avoid issues:
 Be conservative in assumptions about APEX generated markup
 Stick to documented APEX APIs
• https://apex.oracle.com/jsapi
 Avoid deprecated APIs
• Includes 3rd party libraries, such as jQuery

17
Languages at a glance

PL/SQL JavaScript
 Designed to extend SQL  Designed to program the web
 3rd generation language  3rd generation language
• Based on Ada • Based on Scheme, C++/Java
 Procedural/block structured  Flexible/based on functions

18
Part 1: JavaScript Basics

2 Variables and data types

19
Declaring variables in PL/SQL

 Done in the declaration section of a block

 Scope works by blocks
• Nested blocks see parent scope
 Strongly typed: specify name and data type
• Data type will not change
 Can specify constants
 Not case sensitive (by default)

20
Declaring variables in JavaScript

 Declaration can be done anywhere

• Best practice is to declare at top of function
 Use var to declare a variable in a function
• let and const aren’t well supported in IE 11
 Weakly typed: variables don’t have types
• Values have types
 Case sensitive

21
Common data types in PL/SQL

Scalars
 All SQL types
NUMBER PLS_INTEGER CHAR
• Too many to list here
VARCHAR2 BOOLEAN DATE
 Plus many PL/SQL only types
TIMESTAMP TSWTZ TSWLTZ
• Too many to list here
 Cover just about everything! Large Objects
CLOB BLOB BFILE
Composites
Records Collections
Other
NULL

22
Common data types in JavaScript

Primitive type Object

Undefined Null Object Date

String Number Boolean Array Function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
23
Common data types in JavaScript

Primitive type Object

Undefined Null Object Date

String Number Boolean Array Function

Uses IEEE 754 math

.1 + .2 = 0.30000000000000004

https://www.youtube.com/watch?v=wPBjd-vb9eI
24
Two syntaxes for creating new objects

 Object literal
• Simpler than a constructor function
• Supported by all primitives and some objects
• Date not supported
 Constructor function
• Uses new keyword with constructor function
• Use when object literal not available

25
Part 1: JavaScript Basics

3 Operators

26
Common operator types

Assignment Arithmetic Comparison Logical

27
 Assignment operators overview

PL/SQL JavaScript
Simple assignment := =
Add and assign +=
Subtract and assign -=
Multiply and assign *=
Divide and assign /=
Modulus and assign %=

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
28
Using the PL/SQL assignment operator

29
JavaScript assignment operators

30
Arithmetic operators overview

PL/SQL JavaScript
Addition + +
Subtraction - -
Multiplication * *
Division / /
Modulus mod(m, n) %
Increment ++
Decrement --

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
31
Arithmetic operators overview

PL/SQL JavaScript
Addition + +
Subtraction - -
Multiplication * *
+ is also the concatenation operator! 🤪
Division / /
Modulus mod(m, n) %
Increment ++
Decrement --

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
32
Using PL/SQL arithmetic operators

33
Using JavaScript arithmetic operators

34
 Comparison operators overview

PL/SQL JavaScript
Equal to = ==
Equal to value and type ===
Not equal to != or <> !=
Not equal to value or type !==
Greater than > >
Less than < <
Greater than or equal to >= >=
Less than or equal to <= <=

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
35
Using PL/SQL comparison operators

36
Using JavaScript comparison operators

37
Using JavaScript comparison operators

Favor === and !== to avoid

implicit data conversions!

38 https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/getting-started/ch2.md#equalish
Logical operators overview

PL/SQL JavaScript
And and &&
Or or ||
Not not !

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators
39
Using PL/SQL logical operators

40
Using JavaScript logical operators

41
Part 1: JavaScript Basics

4 Conditionals and loops

42
Conditional logic overview

PL/SQL JavaScript
If-then-else Yes Yes
Case Yes No
Switch No Yes
Ternary operator No Yes

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals
43
Using PL/SQL if-then-else & case statements

If-then-else

44
Using PL/SQL if-then-else & case statements

If-then-else Case

45
Using JavaScript if-then-else & switch statements

If-then-else

46
Using JavaScript if-then-else & switch statements

If-then-else Switch

47
Using JavaScript if-then-else & switch statements

If-then-else Switch

Be careful with
“fall through”

48
Using JavaScript’s ternary operator

49
Truthy and falsy values in JavaScript

 There are six falsy values in JavaScript

• false, null, undefined, NaN, 0, and ""
 Everything else is truthy

50
Loops overview

PL/SQL JavaScript
Loop Yes No
For loop Yes Yes
Cursor for loop Yes No
While loop Yes Yes
Do while loop No Yes
For in loop Yes Yes
For of loop No Yes
Loop labels Yes Yes
Continue Yes Yes

51 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
Basic for loop comparison

PL/SQL

52
Basic for loop comparison

PL/SQL JavaScript

53
Part 1: JavaScript Basics

5 Objects and functions

54
Basic “object” comparison

PL/SQL

55 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
Basic “object” comparison

PL/SQL JavaScript

56 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
Functions overview

PL/SQL JavaScript
Functions Yes (must return a value) Yes (optionally return a value)
Procedures Yes (do not return a value) No (use a function with no return value)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
57
Basic function comparison

PL/SQL

58
Basic function comparison

PL/SQL JavaScript

59
Using functions in JavaScript

 Functions are used for scoping

• Work done outside of functions is in the “global” scope
• Primitives are passed by value and every thing else by reference
 Functions in JavaScript are highly flexible
• Type and number of variables, as well as the return type, can vary
 Functions are 1st class
• Means they are a lot like numbers, strings, etc.
• Can be assigned to variables and passed around as parameters

60
Creating functions in JavaScript

Function statement

61
Creating functions in JavaScript

Function statement Function expression

62
JavaScript objects/functions in browsers

Object Description
window THE “global” object. Represents the browser window. (think SYS schema)
document API to the document/web page. We’ll cover this later.
console API for debug output. (think dbms_output)
Math Provides many mathematical properties and functions.
JSON Object that provides tools for working with JSON, e.g. JSON.parse & JSON.stringify.
setTimeout Function to schedule work for the future (think dbms_scheduler)
setInterval Function to schedule recurring work (think dbms_scheduler)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference#Global_Objects
63
 Pop quiz!
Which of the following will not throw an exception?

A B C

64
Part 1: JavaScript Basics

6 Developer tools

65
Developer tools for PL/SQL

66
Developer tools for JavaScript

67 https://developers.google.com/web/tools/chrome-devtools
 Part 2: Adding JavaScript to APEX Apps

68
Part 2: Adding JavaScript to APEX Apps

1 Dynamic Actions
2 Dynamic Actions with JavaScript snippets
3 Page and component level attributes
4 External files

69
Part 2: Adding JavaScript to APEX Apps

1 Dynamic Actions

70
What are Dynamic Actions?

 A declarative way to add dynamic behaviors to a page

• Configure attributes to specify what happens and when
• APEX generates the JavaScript or you can supply your own
 Two parts
• When: the event, such as ‘click’ or ‘change’
• Actions: the response, such as ‘hide’ or ‘show’

71
Thinking through Dynamic Actions

Event

Action

72
Thinking through Dynamic Actions

Event

Action

Action

Action

73
Thinking through Dynamic Actions

When Event

Action

Actions Action

Action

74
Thinking through Dynamic Actions

When Event Condition

False True

Actions Action Action

75
Thinking through Dynamic Actions

When Event Condition

False True
Action Action

Actions Action Action

Action Action

76
Thinking through Dynamic Actions

When Event Condition

False True
Action Action

Many actions can be

Actions configured to fire at Action Action
page load too.

Action Action

77
Example

 Disable Alternate Phone field until the Phone Number is populated

78
Example

 Disable Alternate Phone field until the Phone Number is populated

• What’s the driver?

• Is there a condition?
• What are the true/false actions?
• Relevant at page load too?

79
Example

 Disable Alternate Phone field until the Phone Number is populated

When Phone Num. changes Value is null

False True

Actions Enable Alt. Phone Disable Alt. Phone

80
Example

 Disable Alternate Phone field until the Phone Number is populated

When Phone Num. changes Value is null

False True

Actions Enable Alt. Phone Disable Alt. Phone

+ PL + PL

81
Part 2: Adding JavaScript to APEX Apps

2 Dynamic Actions with JavaScript snippets

82
Dynamic Actions with JavaScript snippets

 Dynamic Actions can’t cover everything

• Hooks are provided to extend capabilities
• Requires basic knowledge of JavaScript to use
 Probably the sweet spot for most APEX developers

83
When: Event and Selection Type

 Custom Event option accepts any event name

 jQuery Selector provides a flexible means of selecting elements

84
When: Client-side Condition

 Declarative conditions only work with the triggering element

 The JavaScript Expression option provides full access to the DOM
• Must resolve to true or false
• See the “help” for additional options

85
Actions: Execute JavaScript

 Declarative options are great for common interactions

• Hide/show, enable/disable, refresh, etc.
 Execute JavaScript can do anything not available out of the box

86
Part 2: Adding JavaScript to APEX Apps

3 Page and component level attributes

87
Page level attributes

 Dynamic Actions may not work for every situation

• The when/actions structure can be a little rigid
• Hand written JavaScript code may be a better solution
 Page level attributes for JavaScript are the next step
• Provide a consistent place to put JavaScript code
 Relatively few APEX developers will need to do this

88
Using page level attributes

 Function and Global Variable Declaration

• Code here is in the global scope
• Before DOM load and component initialization
 Execute when Page Loads
• Code here is in a function scope
• After DOM load and component initialization

89
Part 2: Adding JavaScript to APEX Apps

4 External files

90
External files

 External files have several advantages over page level attributes

• Faster page loads via browser caching and optional minification
• Better organization; easier to reuse code between pages
 Very few APEX developers will ever need to do this
• Consider plug-ins instead when possible

91
Using external files on a page

 Files can be placed in various locations

• Most convenient: App/Workspace images
• Most performant: File server (Apache, Nginx, etc.)

92
Using external files throughout an app

 Heavily reused code can be made available on all pages

93
See the JS doc for additional info on adding JavaScript to APEX

94 https://apex.oracle.com/jsapi
 Part 3: Working with jQuery and the DOM

95
Part 3: Working with jQuery and the DOM

1 Understanding the DOM

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

96
Part 3: Working with jQuery and the DOM

1 Understanding the DOM

97
HTML vs. DOM

 Hypertext Markup Language (HTML)

• Markup language that browsers understand to render web pages
 Document Object Model (DOM)
• Object representation of the HTML document (DOM tree)
• API for manipulating the memory structure

98
HTML document

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

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
100
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 exposed as window.document in browsers

Endless
Web
JS + APIs = Possibilities!
😃

https://www.w3.org/TR/?tag=webapi
101
Part 3: Working with jQuery and the DOM

2 What is jQuery?

102
DOM problems

 Early DOM specifications were not so good

• APIs were tedious
• Browsers were inconsistent
 jQuery solved the problem

103
jQuery

 jQuery is a DOM manipulation library

 First released in 2006
• DOM APIs were still very bad
• Different browsers did things differently
 jQuery provided simple APIs that worked on all browsers
• Will be in APEX for the foreseeable future
• For native DOM APIs, check out http://youmightnotneedjquery.com/

104
Using jQuery

 Step 1: Include the library in the web page

• Already included with APEX
• Adds a function named $ to the page (also apex.jQuery in APEX)
 Step 2: Select something
• jQuery returns jQuery objects (a wrapper around elements)
 Step 3: Do something with what you selected
• DOM manipulation, traversal, events, effects, etc.

105
Part 3: Working with jQuery and the DOM

3 Selecting, traversing, and manipulating the DOM

106
Basic selectors

Description Syntax Example

Class Selector '.class' $('.boring')
Element Selector 'element' $('ul')
ID Selector '#id' $('#message')
Multiple Selector 'sel1, sel2, selN' $('.fun, #message')

http://api.jquery.com/category/selectors/
107
DOM elements vs. jQuery objects

 DOM APIs return DOM elements

 jQuery APIs return jQuery objects
• Wrappers over DOM elements
• Access provided if needed
 Each has it’s own set of methods
• jQuery methods are chainable

108
Example web page

https://en.wikipedia.org/wiki/Paul_Ekman
109
Selection

<div class="question-wrapper">
ID <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>
Class <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>
Element </ul>
</div>
<input type="text" name="feeling">
<input type="button" value="Submit">
</div>

110
Selection
$("#question")

<div class="question-wrapper">
ID <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>
Class <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>
Element </ul>
</div>
<input type="text" name="feeling">
<input type="button" value="Submit">
</div>

111
Selection
$("#emotions-list")

<div class="question-wrapper">
ID <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>
Class <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>
Element </ul>
</div>
<input type="text" name="feeling">
<input type="button" value="Submit">
</div>

112
Selection
$(".positive")

<div class="question-wrapper">
ID <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>
Class <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>
Element </ul>
</div>
<input type="text" name="feeling">
<input type="button" value="Submit">
</div>

113
Selection
$(".negative")

<div class="question-wrapper">
ID <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>
Class <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>
Element </ul>
</div>
<input type="text" name="feeling">
<input type="button" value="Submit">
</div>

114
Selection
$("div")

<div class="question-wrapper">
ID <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>
Class <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>
Element </ul>
</div>
<input type="text" name="feeling">
<input type="button" value="Submit">
</div>

115
Selection
$("input")

<div class="question-wrapper">
ID <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>
Class <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>
Element </ul>
</div>
<input type="text" name="feeling">
<input type="button" value="Submit">
</div>

116
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/
117
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>

118
Traversal
$("#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>

119
Traversal
$("#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>

120
Traversal
$("#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>

121
Simple DOM manipulation

Description Example functions Example

Add/remove classes addClass, removeClass, $('li.done')
toggleClass .removeClass('done')
.addClass('pending');
Modify attributes attr, removeAttr, prop, $('input’)
removeProp, val .attr('disabled', 'disabled');
DOM insertion html, text, append, $('ul')
prepend .append('<li>Hello</li>');
DOM removal remove, empty $('ul').empty();
Change CSS styles css $('h1').css('color', 'red');

http://api.jquery.com/category/manipulation/
122
Manipulation

$(".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>

123
Manipulation

$(".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>

124
Manipulation

$(".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>

125
Manipulation

$("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>

126
Manipulation

$("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>
127
Manipulation

$("#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>

128
Manipulation

$("#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>

129
Manipulation

$("#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>

130
Manipulation

$("#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>
131
Part 3: Working with jQuery and the DOM

4 Events overview

132
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

133
APEX Browser Events

DOM/Element Keyboard Mouse/Trackpad Finger/Pointer

134
 DOM/Element events

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

APEX Name Event Name Fires 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

https://docs.oracle.com/en/database/oracle/application-express/19.1/htmdb/managing-dynamic-actions.html
136
 Mouse/Trackpad events

APEX Name Event Name Fires 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

https://docs.oracle.com/en/database/oracle/application-express/19.1/htmdb/managing-dynamic-actions.html
137
 Finger/Pointer events

APEX Name Event Name Fires when…

Name
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

https://docs.oracle.com/en/database/oracle/application-express/19.1/htmdb/managing-dynamic-actions.html
138
Part 3: Working with jQuery and the DOM

5 Creating event listeners

139
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

<input id="input-test" type="input" name="input">

<script>
$('#input-test').on('change', function(event) {
console.log(event);
});
</script>

https://api.jquery.com/on/
140
Functions are “first-class” in JavaScript

 Note that an anonymous function is being passed to on()

<input id="input-test" type="input" name="input">

<script>
$('#input-test').on('change', function(event) {
console.log(event);
});
</script>

141
Functions are “first-class” in JavaScript

 Could also be a named function

<input id="input-test" type="input" name="input">

<script>
function handleChange(event) {
console.log(event);
}

$('#input-test').on('change', handleChange);
</script>

142
 Pop quiz!
What’s the difference between the two event bindings?

A B

143
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

$(window).on('load', function(event) { $(function() {

console.log('window load'); console.log('DOM load');
}); });

https://api.jquery.com/ready/#ready-handler
144
Event dispatching and DOM event flow

https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
145
Event delegation with on()

 on() accepts an optional selector for event delegation

• More efficient than many individual bindings; works if elements replaced

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

146
Event delegation with on()

 on() accepts an optional selector for event delegation

• More efficient than many individual bindings; works if elements replaced

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

147
Event delegation with on()

 on() accepts an optional selector for event delegation

• More efficient than many individual bindings; works if elements replaced

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

1 JavaScript Basics
2 Adding JavaScript to APEX Apps
3 Working with jQuery and the DOM

149
Next steps…

 Keep an eye out for my JavaScript trainings

• Introduction to JavaScript for APEX Developers
• Intermediate JavaScript for APEX Developers
• Individual modules for more advanced topics (Interactive Grids, Charts, UT, etc.)
 In the mean time, check out this free, 134 part course for beginners
• https://www.freecodecamp.org/news/learn-javascript-full-course/

150