JavaScript Basics for APEX Developers

Developer Advocate @ Oracle
June 4, 2020
Dan McGhan
for APEX Developers
Intro to JavaScript

Copyright © 2020, Oracle and/or its affiliates2
3
2
1
Working with the DOM and jQuery
Adding JavaScript to APEX Apps
JavaScript Basics
Agenda
Next Steps
Q & A
4
5

Part 1: JavaScript Basics

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

5
4
3
2
1
Operators
Why JavaScript?
JavaScript Basics
Developer tools6

If you're looking for a great APEX
developer, you're really looking for
a full-stack developer.
https://joelkallman.blogspot.com/2017/10/a-great-apex-developer-isa-full-stack.html
“
Joel Kallman, co-creator of APEX

Server-side Client-side
Oracle Database
Data Modeling
SQL
PL/SQL

Server-side Client-side
Oracle Database
Data Modeling
SQL
PL/SQL
HTML
CSS
JavaScript

Your goal is not to be the master…

Your goal is not to be the master…
It often takes just a few lines of JavaScript
to deliver functionality not available out-of-the-box!

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

5
4
3
2
1
Operators
Why JavaScript?
JavaScript Basics
Developer tools6

• Scope works by blocks
- Nested blocks see outer scope
• Declaration done in the declaration section
• Strongly typed: specify name and data type
- Data type will not change
• Not case sensitive (by default)
Declaring variables in PL/SQL

• Scope works by functions
- Outside of functions = global scope
- Nested blocks see outer scope
• 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 (always)
Declaring variables in JavaScript

• All SQL types
• Plus many PL/SQL only types
Common data types in PL/SQL
Scalars
NUMBER PLS_INTEGER CHAR
VARCHAR2 BOOLEAN DATE
TIMESTAMP TSWTZ TSWLTZ
Large Objects
CLOB BLOB
Composites
Records Collections
Other
NULL

Common data types in JavaScript
Primitive type Object
Undefined Null
String Number Boolean
Object
Array
Date
Function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

Common data types in JavaScript
Primitive type Object
Undefined Null
String Number Boolean
Object
Array
Date
Function
https://www.youtube.com/watch?v=wPBjd-vb9eI
Uses IEEE 754 math
.1 + .2 = 0.30000000000000004

• Literal
- Simpler than a constructor function
- Supported by all primitives and basic objects
- Date not supported
• Constructor function
- Uses new keyword with constructor function
- Use when object literal not available
Two syntaxes for creating new objects

5
4
3
2
1
Operators
Why JavaScript?
JavaScript Basics
Developer tools6

Using “objects” - PL/SQL vs. JavaScript

Using “objects” - PL/SQL vs. JavaScript
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 (does not return a value) No (use a function with no return value)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

Creating functions in JavaScript
Function statement

Creating functions in JavaScript
Function statement Function expression

Using functions - PL/SQL vs. JavaScript

• Functions are a lot like other data types (numbers, strings, etc.)
• Can be assigned to variables and passed around as parameters
• Can be returned from other functions
Functions are 1st class in JavaScript

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

Pop quiz!
Which of the following will not throw an exception?
A B C

5
4
3
2
1
Operators
Why JavaScript?
JavaScript Basics
Developer tools6

Developer tools for PL/SQL

Developer tools for PL/SQL
https://developers.google.com/web/tools/chrome-devtools

Part 2: Adding JavaScript to APEX Apps

4
3
2
1
Static files
Page and component level attributes
Dynamic Actions with JavaScript hooks
Dynamic Actions

4
3
2
1
Static files
Dynamic Actions

• A declarative way to add dynamic behaviors to a page
- Configure attributes to specify what happens and when
- APEX generates the JavaScript and adds it to the page
• Two parts
- Dynamic Action: the event and related component
- Actions: the response, such as ‘hide’ or ‘show’
What are Dynamic Actions?

Thinking through Dynamic Actions
Action
Event

Action
Event
Action
Action

Actions
Dynamic Action
Action
Event
Action
Action

Actions
Dynamic Action
ActionAction
ConditionEvent
False True

Actions
Dynamic Action
ActionAction
ConditionEvent
False True
Action
Action
Action
Action

Actions
Dynamic Action
ActionAction
ConditionEvent
False True
Action
Action
Action
Action
Many actions can
be configured to fire
at page load too.

• Disable Alternate Number field until the Phone Number is populated
Example 1

Example 1
• What’s the driver?
• Is there a condition?
• What are the true/false actions?
• Relevant at page load too?

Example 1
Actions
Dynamic Action
Disable Alt. PhoneEnable Alt. Phone
Value is nullPhone Num. changes
False True
+ PL + PL

4
3
2
1
Static files
Dynamic Actions

• 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

• Custom Event option accepts any event name
• jQuery Selector provides a flexible means of selecting elements
Dynamic Action: Event and Selection Type
Action
Dynamic Action

• Declarative conditions only work with one item’s value
• The JavaScript Expression option provides full access to the DOM
- Must resolve to true or false
- See the “help” for additional options
Dynamic Action: Client-side Condition
Action
Dynamic Action

• Declarative options are great for common interactions
- Hide/show, enable/disable, refresh, etc.
• Execute JavaScript can do anything not available out of the box
Action: Execute JavaScript
Action
Dynamic Action

Part 3: Working with the DOM and jQuery

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

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>

Part 4: Next Steps

https://asktom.oracle.com/pls/apex/asktom.search?oh=8561

https://www.qualogy.com/discover-qualogy/news-blogs/news-blog/meet-the-oracle-masters-the-online-series

https://bit.ly/intro2js4apex https://bit.ly/js-con-apex

• Current
- https://apex.oracle.com/jsapi
• APEX 20.1
- https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/index.html
• APEX 19.2
• APEX 19.1
• APEX 18.2
- https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/toc.html
• APEX 18.1
- https://docs.oracle.com/database/apex-18.1/AEXJS/index.html
• APEX 5.1
- https://docs.oracle.com/database/apex-5.1/AEAPI/JavaScript-APIs.htm#AEAPI266
APEX JavaScript APIs

• JavaScript Path
- https://www.pluralsight.com/paths/javascript
• JavaScript Fundamentals for ES6
- https://www.pluralsight.com/courses/javascript-fundamentals-es6
• Rapid ES6 Training
- https://www.pluralsight.com/courses/rapid-es6-training
Pluralsight Paths and Courses on JavaScript

• JavaScript for impatient programmers (HTML version is free)
- https://exploringjs.com/impatient-js/
• You Don’t Know JS (Github book, free)
- https://github.com/getify/You-Dont-Know-JS
• Eloquent JavaScript
- https://www.amazon.com/dp/1593279507
• HTML, CSS, and JavaScript All in One
- https://www.amazon.com/dp/0672338084
Books on JavaScript

• Online Tutorial: Code Academy
- https://www.codecademy.com/learn/learn-jquery
• Book: A Smarter Way to Learn jQuery
- http://a.co/e9Jzxnx
• API Doc
- http://api.jquery.com/
jQuery specific resources

• Fun Fun Function
- https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q
• Lean JavaScript – Full Course for Beginners
- https://www.youtube.com/watch?v=PkZNo7MFNFg
JavaScript content on YouTube

Part 5: Q & A

Any questions?
Follow me on Twitter
twitter.com/dmcghan
Join me here

JavaScript Basics for APEX Developers

JavaScript Basics for APEX Developers

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à JavaScript Basics for APEX Developers

Similaire à JavaScript Basics for APEX Developers (20)

Dernier

Dernier (20)

JavaScript Basics for APEX Developers