![Using for loops - PL/SQL vs. JavaScript
48
Elements
accessed with ()
Elements
accessed with []](https://image.slidesharecdn.com/1-javascript-basics-200211151532/85/Introduction-to-JavaScript-for-APEX-Developers-Module-1-JavaScript-Basics-48-320.jpg)
Introduction to JavaScript for APEX Developers - Module 1: JavaScript Basics
- 2. Introduction to JavaScript for APEX Developers Module 1: JavaScript Basics 2
- 3. Why JavaScript? JavaScript Basics 1 2 3 4 5 Variables and data types Operators Conditionals and loops Objects and functions 3 6 Developer tools
- 5. 5 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 Kalman, co-creator of APEX
- 6. 6 Oracle Database Data Modeling SQL PL/SQL Server-side Client-side
- 9. 9 Oracle Database Data Modeling SQL PL/SQL Server-side Client-side HTML CSS JavaScript
- 10. Your goal is not to be the master…
- 11. 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…
- 12. 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!
- 13. Tips to avoid issues: § Be conservative in assumptions about APEX generated HTML § Stick to documented APEX APIs • https://apex.oracle.com/jsapi § Avoid deprecated APIs • Includes 3rd party libraries, such as jQuery
- 14. Languages at a glance PL/SQL § Designed to extend SQL § 3rd generation language • Based on Ada § Procedural/block structured JavaScript § Designed to program the web § 3rd generation language • Based on Scheme, C++/Java § Flexible/based on functions 14
- 15. JavaScript Basics 2 Variables and data types 15
- 16. Declaring variables in PL/SQL § 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) 16
- 17. Declaring variables in JavaScript § 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) 17
- 18. Common data types in PL/SQL § All SQL types § Plus many PL/SQL only types 18 Scalars NUMBER PLS_INTEGER CHAR VARCHAR2 BOOLEAN DATE TIMESTAMP TSWTZ TSWLTZ Large Objects CLOB BLOB Composites Records Collections Other NULL
- 19. Common data types in JavaScript 19 Primitive type Object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures Undefined Null String Number Boolean Object Array Date Function
- 20. Common data types in JavaScript 20 Primitive type Object https://www.youtube.com/watch?v=wPBjd-vb9eI Undefined Null String Number Boolean Date Function Uses IEEE 754 math .1 + .2 = 0.30000000000000004 Object Array
- 21. Two syntaxes for creating new objects § 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 21
- 23. Common operator types 23 Assignment Arithmetic Comparison Logical
- 24. Assignment operators 24 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
- 25. Using assignment operators - PL/SQL vs. JavaScript 25
- 26. Using assignment operators - PL/SQL vs. JavaScript 26
- 27. Arithmetic operators 27 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
- 28. Arithmetic operators 28 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 + is also the concatenation operator! 🤪
- 29. Using arithmetic operators - PL/SQL vs. JavaScript 29
- 30. Using arithmetic operators - PL/SQL vs. JavaScript 30
- 31. Comparison operators 31 PL/SQL JavaScript Equality = == Inequality != or <> != Strict equality (value and type) === Strict inequality (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
- 32. Using comparison operators - PL/SQL vs. JavaScript 32
- 33. Using comparison operators - PL/SQL vs. JavaScript 33
- 34. Using comparison operators - PL/SQL vs. JavaScript 34 https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/getting-started/ch2.md#equalish Favor === and !== to avoid implicit data conversions!
- 35. Logical operators 35 PL/SQL JavaScript And and && Or or || Not not ! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators
- 36. Using logical operators - PL/SQL vs. JavaScript 36
- 37. Using logical operators - PL/SQL vs. JavaScript 37
- 38. 38 Pop quiz! What is the value of total after running this script? A B C 13 '112.00' '10.00112.00'
- 39. JavaScript Basics 4 Conditionals and loops 39
- 40. Conditional logic overview 40 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
- 41. Using if-then-else - PL/SQL vs. JavaScript 41
- 42. Using if-then-else - PL/SQL vs. JavaScript 42
- 43. Truthy and falsy values in JavaScript § There are six falsy values in JavaScript • false, null, undefined, NaN, 0, and "" § Everything else is truthy! 43
- 44. Loops overview 44 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration 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
- 45. Using for loops - PL/SQL vs. JavaScript 45
- 46. Using for loops - PL/SQL vs. JavaScript 46
- 47. Using for loops - PL/SQL vs. JavaScript 47 1 based array index 0 based array index
- 48. Using for loops - PL/SQL vs. JavaScript 48 Elements accessed with () Elements accessed with []
- 49. JavaScript Basics 5 Objects and functions 49
- 50. Using “objects” - PL/SQL vs. JavaScript 50
- 51. Using “objects” - PL/SQL vs. JavaScript 51 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
- 52. Functions overview 52 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
- 53. Creating functions in JavaScript 53 Function statement
- 54. Creating functions in JavaScript 54 Function statement Function expression
- 55. Using functions - PL/SQL vs. JavaScript 55
- 56. Using functions - PL/SQL vs. JavaScript 56
- 57. Functions are 1st class in JavaScript § Functions are a lot like numbers, strings, etc. § Can be assigned to variables and passed around as parameters § Can be returned from other functions 57
- 58. JavaScript objects/functions in browsers 58 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
- 59. 59 Pop quiz! Which of the following will not throw an exception? A B C
- 60. JavaScript Basics 60 6 Developer tools
- 61. Developer tools for PL/SQL 61
- 62. Developer tools for JavaScript 62 https://developers.google.com/web/tools/chrome-devtools