Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

Intro to JavaScript for APEX Developers

Download to read offline

These are the slides from the Oracle APEX Office Hours session on 2020/06/04. Abstract: JavaScript continues to play an increasingly important role in each release of APEX. This is because APEX creates web apps, and it's JavaScript that programs the web. But for developers coming from a background in SQL and PL/SQL, JavaScript can be a little intimidating.

Luckily, APEX developers only need to know a little JavaScript to impact their applications significantly. In this session, attendees will learn how to write essential JavaScript code, add it to APEX apps, and work with jQuery and the DOM.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Intro to JavaScript for APEX Developers

  1. 1. Developer Advocate @ Oracle June 4, 2020 Dan McGhan for APEX Developers Intro to JavaScript
  2. 2. 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
  3. 3. Copyright © 2020, Oracle and/or its affiliates3 Part 1: JavaScript Basics
  4. 4. Copyright © 2020, Oracle and/or its affiliates4 5 4 3 2 1 Objects and functions Conditionals and loops Operators Variables and data types Why JavaScript? JavaScript Basics Developer tools6
  5. 5. Copyright © 2020, Oracle and/or its affiliates5 5 4 3 2 1 Objects and functions Conditionals and loops Operators Variables and data types Why JavaScript? JavaScript Basics Developer tools6
  6. 6. 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
  7. 7. Copyright © 2020, Oracle and/or its affiliates7 Server-side Client-side Oracle Database Data Modeling SQL PL/SQL
  8. 8. Copyright © 2020, Oracle and/or its affiliates8
  9. 9. Copyright © 2020, Oracle and/or its affiliates9
  10. 10. Copyright © 2020, Oracle and/or its affiliates10 Server-side Client-side Oracle Database Data Modeling SQL PL/SQL HTML CSS JavaScript
  11. 11. Copyright © 2020, Oracle and/or its affiliates11 Your goal is not to be the master…
  12. 12. Copyright © 2020, Oracle and/or its affiliates12 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!
  13. 13. 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
  14. 14. Copyright © 2020, Oracle and/or its affiliates14 5 4 3 2 1 Objects and functions Conditionals and loops Operators Variables and data types Why JavaScript? JavaScript Basics Developer tools6
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. Copyright © 2020, Oracle and/or its affiliates21 5 4 3 2 1 Objects and functions Conditionals and loops Operators Variables and data types Why JavaScript? JavaScript Basics Developer tools6
  22. 22. Copyright © 2020, Oracle and/or its affiliates22 Using “objects” - PL/SQL vs. JavaScript
  23. 23. Copyright © 2020, Oracle and/or its affiliates23 Using “objects” - PL/SQL vs. JavaScript https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
  24. 24. 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
  25. 25. Copyright © 2020, Oracle and/or its affiliates25 Creating functions in JavaScript Function statement
  26. 26. Copyright © 2020, Oracle and/or its affiliates26 Creating functions in JavaScript Function statement Function expression
  27. 27. Copyright © 2020, Oracle and/or its affiliates27 Using functions - PL/SQL vs. JavaScript
  28. 28. Copyright © 2020, Oracle and/or its affiliates28 Using functions - PL/SQL vs. JavaScript
  29. 29. 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
  30. 30. 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
  31. 31. Copyright © 2020, Oracle and/or its affiliates31 Pop quiz! Which of the following will not throw an exception? A B C
  32. 32. Copyright © 2020, Oracle and/or its affiliates32 5 4 3 2 1 Objects and functions Conditionals and loops Operators Variables and data types Why JavaScript? JavaScript Basics Developer tools6
  33. 33. Copyright © 2020, Oracle and/or its affiliates33 Developer tools for PL/SQL
  34. 34. Copyright © 2020, Oracle and/or its affiliates34 Developer tools for PL/SQL https://developers.google.com/web/tools/chrome-devtools
  35. 35. Copyright © 2020, Oracle and/or its affiliates35 Part 2: Adding JavaScript to APEX Apps
  36. 36. Copyright © 2020, Oracle and/or its affiliates36 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
  37. 37. Copyright © 2020, Oracle and/or its affiliates37 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
  38. 38. 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?
  39. 39. Copyright © 2020, Oracle and/or its affiliates39 Thinking through Dynamic Actions Action Event
  40. 40. Copyright © 2020, Oracle and/or its affiliates40 Thinking through Dynamic Actions Action Event Action Action
  41. 41. Copyright © 2020, Oracle and/or its affiliates41 Thinking through Dynamic Actions Actions Dynamic Action Action Event Action Action
  42. 42. Copyright © 2020, Oracle and/or its affiliates42 Thinking through Dynamic Actions Actions Dynamic Action ActionAction ConditionEvent False True
  43. 43. Copyright © 2020, Oracle and/or its affiliates43 Thinking through Dynamic Actions Actions Dynamic Action ActionAction ConditionEvent False True Action Action Action Action
  44. 44. 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.
  45. 45. Copyright © 2020, Oracle and/or its affiliates45 • Disable Alternate Number field until the Phone Number is populated Example 1
  46. 46. 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?
  47. 47. 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
  48. 48. Copyright © 2020, Oracle and/or its affiliates48 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Copyright © 2020, Oracle and/or its affiliates53 Part 3: Working with the DOM and jQuery
  54. 54. 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
  55. 55. Copyright © 2020, Oracle and/or its affiliates55 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
  56. 56. 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
  57. 57. Copyright © 2020, Oracle and/or its affiliates57 HTML document http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
  58. 58. Copyright © 2020, Oracle and/or its affiliates58 DOM Tree http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
  59. 59. 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! 😃 =
  60. 60. Copyright © 2020, Oracle and/or its affiliates60 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
  61. 61. 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
  62. 62. 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
  63. 63. Copyright © 2020, Oracle and/or its affiliates63 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
  64. 64. 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/
  65. 65. 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
  66. 66. Copyright © 2020, Oracle and/or its affiliates66 Example web page https://en.wikipedia.org/wiki/Paul_Ekman
  67. 67. 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>
  68. 68. 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>
  69. 69. 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>
  70. 70. 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>
  71. 71. 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>
  72. 72. 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>
  73. 73. 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>
  74. 74. 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/
  75. 75. 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
  76. 76. 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>
  77. 77. 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>
  78. 78. 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>
  79. 79. 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/
  80. 80. 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>
  81. 81. 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>
  82. 82. 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>
  83. 83. 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>
  84. 84. 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>
  85. 85. 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>
  86. 86. 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>
  87. 87. 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>
  88. 88. 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>
  89. 89. Copyright © 2020, Oracle and/or its affiliates89 Part 4: Next Steps
  90. 90. Copyright © 2020, Oracle and/or its affiliates90 https://asktom.oracle.com/pls/apex/asktom.search?oh=8561
  91. 91. Copyright © 2020, Oracle and/or its affiliates91 https://www.qualogy.com/discover-qualogy/news-blogs/news-blog/meet-the-oracle-masters-the-online-series
  92. 92. Copyright © 2020, Oracle and/or its affiliates92 https://bit.ly/intro2js4apex https://bit.ly/js-con-apex
  93. 93. • 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
  94. 94. • 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
  95. 95. • 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
  96. 96. • 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
  97. 97. • 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
  98. 98. Copyright © 2020, Oracle and/or its affiliates98 Part 5: Q & A
  99. 99. Copyright © 2020, Oracle and/or its affiliates99 Any questions? Follow me on Twitter twitter.com/dmcghan Join me here
  • PriscillaOkwaro

    Jun. 7, 2020

These are the slides from the Oracle APEX Office Hours session on 2020/06/04. Abstract: JavaScript continues to play an increasingly important role in each release of APEX. This is because APEX creates web apps, and it's JavaScript that programs the web. But for developers coming from a background in SQL and PL/SQL, JavaScript can be a little intimidating. Luckily, APEX developers only need to know a little JavaScript to impact their applications significantly. In this session, attendees will learn how to write essential JavaScript code, add it to APEX apps, and work with jQuery and the DOM.

Views

Total views

568

On Slideshare

0

From embeds

0

Number of embeds

98

Actions

Downloads

50

Shares

0

Comments

0

Likes

1

×