JavaScript: Why Should I Care?

Copyright © 2019, Oracle and/or its affiliates. All rights reserved. |
Why should I care?
Dan McGhan
Developer Advocate @Oracle
May 9, 2019

You are some of
the most valuable people
in your company!

https://apex.oracle.com/quotes

“The speed and concurrency offered by
APEX have been exceptionally valuable.”
Eric Brandenburg
“Almost all of the front-‐end applications of our core
insurance system are now based on Oracle APEX, which
has enabled us to not only replace legacy systems but also
significantly enhance required business functionality.”
Filip Ujević
“One application in particular, our Actionable
Intelligence faculty portal, has been critical to
the University’s award-winning success in
improving our student retention and success
rates, but that’s not all we’ve done with APEX.”
Arthur Rinberger
“A database programmer with very limited
exposure to web-based programming languages can
produce significant output as an APEX developer.”
Scott von Kamecke
“Oracle APEX enables us to develop and
deploy secure, responsive web solutions in
a timeframe which would not be possible
with an alternative development tool.”
Gemma Wood
“Oracle Application Express is a quick, powerful, and
mature development tool that allowed us to improve
our productivity level.”
Georges-Martin Caron
“At Essilor, using Oracle Application Express
(APEX), we developed our first mobile
application more quickly and at a lower price
than on one of the smartphones’ own platform.”
Hervé Lasserre
“There is no complex middleware and
infrastructure to deploy, so coupled with the
benefit that APEX is a no- cost feature of the
Oracle Database, APEX helps keep our total cost
of ownership as low as possible.”
Paul Cowley
“Oracle APEX is a key success factor because it
provides an excellent fit to our approach, and in
our opinion there is currently no toolset which
can compete to match our requirements.”
Dirk Böning-Corterier
“We were able to focus on creating new and
modifying existing solutions for our customers
without any concerns of how some third party
components will work within their
environments.”
Enes Hukic
“Not only by being able to use the newest
technology and modern tools, but also going
live in short project timeframes.”
Bektas Pala
“We can in fact shorten the initial project time
by an estimated 2 weeks. As such, the retailer
can reopen the shop earlier and boost revenue.”
Jochen Foss
“Overall, we have saved the company a lot of
time and money by using APEX to cut-through
the normal development lifecycle and to help us
to be compliant with our use of customer data.”
Jagdev Panesar

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
“

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

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

Copyright © 2019, Oracle and/or its affiliates. All rights reserved. | 13
2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
2018
A History JavaScript in APEX
2019

https://docs.oracle.com/cd/B31034_01/appdev.1016/b14303/build_app.htm

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
2.x htmldb_Get
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
2.x htmldb_Get
Interactive Reports (IR)
3.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
2.x htmldb_Get
3.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
2.x htmldb_Get
apex namespace introduced
JavaScript compressed by default
3.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
4.0
Dynamic Actions2.x htmldb_Get
3.2
3.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
4.0
Dynamic Actions
jQuery & other libs included
Page level attributes for JavaScript added
Tree View
Cascading LOVs
Plug-ins
2.x htmldb_Get
3.2
3.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
4.0
Dynamic Actions
Tree View
Cascading LOVs
Plug-ins
2.x htmldb_Get
4.1
3.2
jQuery Mobile
HTML5 & responsive design
4.2
3.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
4.0
Dynamic Actions
Tree View
Cascading LOVs
Plug-ins
2.x htmldb_Get
5.0
Page Designer
Modal Dialogs
Theme Roller
FullCalendar
4.1
3.2
jQuery Mobile
4.2
3.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
4.0
Dynamic Actions
Tree View
Cascading LOVs
Plug-ins
2.x htmldb_Get
5.0
Page Designer
Modal Dialogs
Theme Roller
FullCalendar
4.1
3.2
jQuery Mobile
4.2
3.1
Interactive Grid
JET Charts
5.1
2018
2019

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
4.0
Dynamic Actions
Tree View
Cascading LOVs
Plug-ins
2.x htmldb_Get
5.0
Page Designer
Modal Dialogs
Theme Roller
FullCalendar
4.1
3.2
jQuery Mobile
4.2
3.1
Interactive Grid
JET Charts
5.1
2018
2019
18.x Additional JET Charts
JET based auto-complete

2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
1.6
Incorporating
JavaScript is
documented
3.0
4.0
Dynamic Actions
Tree View
Cascading LOVs
Plug-ins
2.x htmldb_Get
5.0
Page Designer
Modal Dialogs
Theme Roller
FullCalendar
4.1
3.2
jQuery Mobile
4.2
3.1
Interactive Grid
JET Charts
5.1
2018
2019
18.x Additional JET Charts
JET based auto-complete
19.x
JavaScript API doc overhaul
Simplified modal regions
*New Popup LOV
*Filter Reports

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…

Your goal is not to be the master…
Just know enough to be dangerous!

How much do you need to
know to be dangerous?

Functions
Variables
Conditionals
Loops
JavaScript

Functions
Variables
Conditionals
Loops
JavaScript
Traversing
Manipulation
Events
Ajax
DOM/jQuery

Functions
Variables
Conditionals
Loops
JavaScript APEX APIs
apex
apex.item
apex.region
Traversing
Manipulation
Events
Ajax
DOM/jQuery
apex.server

1 Dynamic Action
2 lines of JavaScript
Solution:

1 Dynamic Action
Solution:
($("td[headers='LINK']").length==1)
apex.navigation.redirect($("td[headers='LINK'] a").attr("href"));

Conditional Expression

$("td[headers='LINK']").length==1

$ = jQuery

$ = jQuery
jQuery is a function

$ = jQuery
functions are invoked with parentheses

$ = jQuery
functions are invoked with parentheses
a string is passed as a parameter

<html lang="en">
<head>
<script src="/i/libraries/jquery/3.3.1/jquery-3.3.1.js"></script>
</head>
<body>
<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>
</body>
</html>

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

Basic Selectors
ID Class Element

$("#question")
Basic Selectors
</ul>
</div>
</div>
ID
Class
Element

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

$(".positive")
Basic Selectors
</ul>
</div>
</div>
ID
Class
Element

$(".negative")
Basic Selectors
</ul>
</div>
</div>
ID
Class
Element

$("div")
Basic Selectors
</ul>
</div>
</div>
ID
Class
Element

$("input")
Basic Selectors
</ul>
</div>
</div>
ID
Class
Element

Hierarchical Selectors
Child Descendant

$(".question-wrapper")
</ul>
</div>
</div>
Child
Descendant

$(".question-wrapper > div")
</ul>
</div>
</div>
Child
Descendant

$(".question-wrapper div")
</ul>
</div>
</div>
Child
Descendant

Other Selectors
Form Content Attribute

$(":button")
Other Selectors
</ul>
</div>
</div>
Form
Content
Attribute

$(":contains(are)")
Other Selectors
</ul>
</div>
</div>
Form
Content
Attribute
Plus:
• html
• body

$("[type]")
Other Selectors
</ul>
</div>
</div>
Form
Content
Attribute

$("[type='text']")
Other Selectors
</ul>
</div>
</div>
Form
Content
Attribute

$("input[type='text']")
Other Selectors
</ul>
</div>
</div>
Form
Content
Attribute

But how did they know
to use that selector?

the object returned is a wrapper for the selected elements

‘length’ provides a count of the elements

the condition is checking for a single row
‘length’ provides a count of the elements

1 Dynamic Action
Solution:
😅

Execute JavaScript

Execute JavaScript
apex is a namespace

Execute JavaScript
apex is a namespace
navigation is a namespace

Execute JavaScript
apex is a namespace
navigation is a namespace
redirect is a function, you already know what it does

Execute JavaScript
this is an attribute and hierarchical selector combined

Execute JavaScript
it selects an anchor element within a table data element

Execute JavaScript
it selects an anchor element within a table data element
attr is a jQuery method

Basic Methods
Traversal Attribute Manipulation

Basic Methods
Traversal
Attribute
Manipulation
$("#question")
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$("#question").parent()
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$("#question").parent().find("li")
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$("#question").parent().find("li").eq(2)
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$(".neutral")
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$(".neutral").addClass("positive")
<li class="neutral positive">Surprised</li>
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$(".neutral").addClass("positive").removeClass("neutral")
<li class="positive">Surprised</li>
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$("input[type='text']")
</ul>
</div>
</div>

Basic Methods
Traversal
Attribute
Manipulation
$("input[type='text’]").attr("disabled", "disabled")
</ul>
</div>
<input type="text" name="feeling"
disabled="disabled">
</div>

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

Basic Methods
Traversal
Attribute
Manipulation
$("#emotions-list")
</ul>
</div>
</div>

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

But how did they know
to use that selector and
target that attribute?

But how often are just
a few lines of code
really that useful?

https://rimblas.com/blog/2019/02/add-a-reset-button-to-your-interactive-reports/
5 lines of JavaScript code

https://explorer.co.uk/calling-plsql-from-javascript/
https://explorer.co.uk/calling-plsql-from-javascript/
31 lines of JavaScript code

JavaScript is Weird

JavaScript is Weird
It was weird from the start…

Is it accurate?
Is it correct?

1 + 2 = ?
In JavaScript…

1 + 2 = 3
In JavaScript…

1 + 2 = 3
0.1 + 0.2 = ?
In JavaScript…

1 + 2 = 3
0.1 + 0.2 = 0.30000000000000004
In JavaScript…

1 + 2 = 3
0.1 + 0.2 = 0.30000000000000004
1.1 + 2.2 = ?
In JavaScript…

1 + 2 = 3
0.1 + 0.2 = 0.30000000000000004
1.1 + 2.2 = 3.3000000000000003
In JavaScript…

1 === 1 // true
Also, in JavaScript…

1 === 1 // true
'string' === 'string' // true

1 === 1 // true
[1, 2, 3] === [1, 2, 3] // false

1 === 1 // true
[1, 2, 3] === [1, 2, 3] // false
{name: 'value'} === {name: 'value'} // false

IIFE

Immediately Invoked Function Expression

(function() {
var message = 'hello world';
console.log(message);
})();
IIFE

(function() {
}());
IIFE

To understand the IIFE
one must understand functions

create function get_answer
return number
is
l_answer number := 42;
begin
return l_answer;
end;
PL/SQL

return number
is
begin
return l_answer;
end;
function getAnswer() {
var answer = 42;
return answer;
}
PL/SQL JavaScript

return number
is
begin
declare
l_other number;
begin
l_other = l_answer * 42;
end;
return l_answer;
end;
var answer = 42;
return answer;
}
PL/SQL JavaScript

return number
is
begin
declare
l_other number;
begin
l_other = l_answer * 42;
end;
return l_answer;
end;
var answer = 42;
function childFunction() {
var other = answer * 42;
}
return answer;
}
PL/SQL JavaScript

<html>
<head>
<title>Simple web page</title>
<script>
(function() {
})();
</script>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Webpage

<html>
<head>
<script>
(function() {
})();
</script>
</head>
<body>
</body>
</html>
Webpage

<html>
<head>
<script>
(function() {
})();
</script>
</head>
<body>
</body>
</html>
Webpage
Global
Global
Function

<html>
<head>
<script>
function initMyProgram() {
}
initMyProgram();
</script>
</head>
<body>
</body>
</html>
Webpage

<html>
<head>
<script>
function() {
}
initMyProgram();
</script>
</head>
<body>
</body>
</html>
Webpage

<html>
<head>
<script>
function() {
}
</script>
</head>
<body>
</body>
</html>
Webpage

<html>
<head>
<script>
(function() {
});
</script>
</head>
<body>
</body>
</html>
Webpage

So now you know what an IIFE is!

So now you know what an IIFE is!
🤯

JavaScript has come
a long way since
it’s humble beginnings…

2019 Stack Overflow Developer Survey
https://insights.stackoverflow.com/survey/2019#technology

RedMonk Q119 Language Rankings
http://sogrady-media.redmonk.com/sogrady/files/2019/03/lang.rank_.119.png

So yeah…

So yeah…
JavaScript is Weird

But JavaScript is also…
Powerful
Flexible
Highly In-demand

Most importantly, you need
to learn JavaScript to become
a great APEX developer.

If you were to give an APEX developer two recommendations
for getting starting with JavaScript, what would they be?

Peter Raganitsch
Read up on
jQuery
Learn about
APEX JS APIs

Jorge Rimblas
I would direct
them to my JS/CSS
talk for PL/SQL
developers 😁

John Scott
The thing that helped me best
with getting started was a
good Editor Plugin which
helps with Intellisense, Auto-
complete, Formatting, etc...
Also JSFiddle for
quick prototyping,
looking at other
peoples samples, etc

Christoph Ruepprich
I have had good success with
Pluralsight’s Node.js course
And my favorite JS guru on
YouTube: FunFunFunction

Adrian Png
Websites - MDN web docs (for reference)
Books - JavaScript: The Definitive Guide (still waiting for the 7th edition)
Other than that... Web
page inspection tools are
great for learning. :-)

John Snyders
One thing I would highly
recommend is JavaScript the Good
Parts by Douglas Crockford
Also his web site

John Brock “JB”
Choose a sample app topic
that interests you (movie
database, car details, etc),
and try to build that same
sample app in multiple
different
frameworks/toolkits/libraries
as you learn.
Learn "JavaScript" not jQuery
first. Understand what it
means to manipulate the
DOM structure using real
JavaScript before you use a
shortcut like jQuery. It will
serve you better down the
road to know what is going on
behind the scenes.

John Brock “JB”
Even at your earliest stages
of writing code, add
comments about what you
are trying to with a section of
code. Ex. what a function is
supposed to do and return.
As you learn more and return
to these samples, you may
want to refactor those areas
with things that you know
more about.
Know your audience. From a
client perspective, what
browsers are you going to
have to support. If there are
any older versions, it will
limit what you can and can't
do with more modern JS
practices. Ex. IE11 doesn't
support arrow functions.

John Brock “JB”
Even at your earliest stages
of writing code, add
comments about what you
are trying to with a section of
code. Ex. what a function is
supposed to do and return.
As you learn more and return
to these samples, you may
want to refactor those areas
with things that you know
more about.
Know your audience. From a
client perspective, what
browsers are you going to
have to support. If there are
any older versions, it will
limit what you can and can't
do with more modern JS
practices. Ex. IE11 doesn't
support arrow functions.
I think that's enough. :-)

Vincent Morneau
So here's my 2 cents

Vincent Morneau
Follow web tech leaders
that blog about complicated
stuff, in a simple way.
• David Walsh
• Addy Osmani
• Jake Archibald
• Paul Irish

Vincent Morneau
• David Walsh
• Addy Osmani
• Jake Archibald
• Paul Irish
Embrace ES6, as it will
inevitably make it to all
browsers. In most cases, it
simplifies the code.

Vincent Morneau
• David Walsh
• Addy Osmani
• Jake Archibald
• Paul Irish
READ CODE from
popular Open
Source projects

Vincent Morneau
• David Walsh
• Addy Osmani
• Jake Archibald
• Paul Irish
READ CODE from
popular Open
Source projects
FORK repos and
play around

Vincent Morneau
Final thoughts: there is no escaping JS. As a a large scale app grows, requirements
will grow too and you can't do everything in PL/SQL. Don't be the average dev :)

GemmaWood

Ready to learn more?

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

Books
• You Don’t Know JS
– https://github.com/getify/You-Dont-Know-JS
• JavaScript: The Definitive Guide
– http://a.co/6cJjHci
• JavaScript the Good Parts
– http://a.co/dx74PuS

jQuery
• 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/

APEX JavaScript APIs
• APEX 19.1
– https://docs.oracle.com/en/database/oracle/application-
express/19.1/aexjs/index.html
• APEX 18.1
– https://docs.oracle.com/database/apex-18.1/AEXJS/index.html
• APEX 5.2
– https://docs.oracle.com/database/apex-5.1/AEAPI/JavaScript-APIs.htm#AEAPI266
• APEX 5.1
– https://docs.oracle.com/database/apex-5.1/AEAPI/JavaScript-APIs.htm#AEAPI266

Developer Tools & Fiddles
• Chrome Developer Tools
– https://developers.google.com/web/tools/chrome-devtools/
• JSFiddle
– https://jsfiddle.net/
• CodePen
– http://codepen.io/
• JS Bin
– http://jsbin.com

Editors & plug-ins
• VS Code
– https://code.visualstudio.com/
– https://code.visualstudio.com/docs/nodejs/extensions
• Atom
– https://atom.io/
– https://atom.io/packages
• NetBeans
– https://netbeans.org/
– http://plugins.netbeans.org/

YouTube
• Fun Fun Function
– https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q
• What the heck is the event loop anyway
– https://www.youtube.com/watch?v=8aGhZQkoFbQ

Web Leaders on Twitter
• David Walsh
– https://twitter.com/davidwalshblog
• Addy Osmani
– https://twitter.com/addyosmani
• Jake Archibald
– https://twitter.com/jaffathecake
• Paul Irish
– https://twitter.com/paul_irish

Other
• Free, 134 part course for beginners
– https://www.freecodecamp.org/news/learn-javascript-full-course/
• Weekly newsletter on JavaScript
– https://javascriptweekly.com/
• 30 Seconds of Code
– https://30secondsofcode.org/
• Jorge’s talk on JavaScript and CSS for PL/SQL developers
– http://slides.com/rimblas/javascript-and-css-for-plsql-developers
• Mozilla Developer Network (see “Tutorials” on the left)
– https://developer.mozilla.org/en-US/docs/Web/JavaScript

JavaScript: Why Should I Care?

More Related Content

What's hot (20)

Similar to JavaScript: Why Should I Care? (20)

Recently uploaded (20)

JavaScript: Why Should I Care?

Editor's Notes