Intro to JavaScript for APEX Developers

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

Copyright © 2020, Oracle and/or its affiliates6 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

Copyright © 2020, Oracle and/or its affiliates13 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

Copyright © 2020, Oracle and/or its affiliates15 • 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

Copyright © 2020, Oracle and/or its affiliates16 • 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

Copyright © 2020, Oracle and/or its affiliates17 • 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

Copyright © 2020, Oracle and/or its affiliates18 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

Copyright © 2020, Oracle and/or its affiliates19 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

Copyright © 2020, Oracle and/or its affiliates20 • 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

Copyright © 2020, Oracle and/or its affiliates24 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

Copyright © 2020, Oracle and/or its affiliates29 • 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

Copyright © 2020, Oracle and/or its affiliates30 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

Copyright © 2020, Oracle and/or its affiliates38 • 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?

Copyright © 2020, Oracle and/or its affiliates44 Thinking through Dynamic Actions Actions Dynamic Action ActionAction ConditionEvent False True Action Action Action Action Many actions can be configured to fire at page load too.

Copyright © 2020, Oracle and/or its affiliates46 • Disable Alternate Number field until the Phone Number is populated Example 1 • What’s the driver? • Is there a condition? • What are the true/false actions? • Relevant at page load too?

Copyright © 2020, Oracle and/or its affiliates47 • Disable Alternate Number field until the Phone Number is populated Example 1 Actions Dynamic Action Disable Alt. PhoneEnable Alt. Phone Value is nullPhone Num. changes False True + PL + PL

Copyright © 2020, Oracle and/or its affiliates49 • 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 Dynamic Actions with JavaScript hooks

Copyright © 2020, Oracle and/or its affiliates50 • 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

Copyright © 2020, Oracle and/or its affiliates51 • 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

Copyright © 2020, Oracle and/or its affiliates52 • 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

Copyright © 2020, Oracle and/or its affiliates54 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 affiliates56 • 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 affiliates59 • 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 affiliates61 • 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 affiliates62 • 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 affiliates64 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 affiliates65 • 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 affiliates67 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 affiliates68 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 affiliates69 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 affiliates70 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 affiliates71 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 affiliates72 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 affiliates73 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 affiliates74 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 affiliates75

Traversal Copyright © 2020, Oracle and/or its affiliates76 $("#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 affiliates77 $("#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 affiliates78 $("#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 affiliates79 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 affiliates80 $(".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 affiliates81 $(".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 affiliates82 $(".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 affiliates83 $("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 affiliates84 $("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 affiliates85 $("#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 affiliates86 $("#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 affiliates87 $("#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 affiliates88 $("#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>

• 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 - https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/index.html • APEX 19.1 - https://docs.oracle.com/en/database/oracle/application-express/19.1/aexjs/index.html • 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

Intro to JavaScript for APEX Developers

Intro to JavaScript for APEX Developers

More Related Content

What's hot

Similar to Intro to JavaScript for APEX Developers

Recently uploaded

In this document

Intro to JavaScript for APEX Developers