jQuery and APEX Primer PDF
Preview jQuery and APEX Primer
jQuery & APEX Primer About Me Welcome [email protected] @sspendol 3 4 About Sumner Technologies Agenda • Originally Established 2005 • Intro to jQuery • Relaunched in 2015 • jQuery in APEX – Focused exclusively on Oracle APEX solutions • Summary • Provide wide range of APEX related Services – Architecture Design & Reviews – Security Reviews – Health Checks – Education • On-site, On-line, On-Demand • Custom & Mentoring – Oracle Database Cloud Consulting – Curators of APEX-SERT 5 6 jQuery Intro to jQuery • From jquery.com: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. 7 8 What does that mean? jQuery Simplification • “….fast, small, and feature-rich JavaScript library” • Without jQuery: – Write a lot less code to do the same thing – document.getElementById("example"); – Not worry about cross-browser issues • With jQuery: – Be able to do things that you could not write on your own – $("#example"); • “…HTML document traversal and manipulation, event handling, animation, and Ajax much simpler” – Select a page component and change its properties – Add animation effects for transitions – Communicate with a database asynchronously with ease 9 10 Using jQuery Using jQuery • jQuery is open source, so there is no license fee to use it • Bookmark and make use of the following sites: – Released under the MIT license – jQuery API Documentation • Which means you can do pretty much anything with it, as long as you leave the – http://api.jquery.com copyright header intact – You will refer to it quite a bit as you learn and use jQuery • APEX includes jQuery, so there is no reason to download – jQuery Learning Center and host it again, as it’s already there – https://learn.jquery.com • Otherwise, simply download and reference it from your HTML files – Step-by-Step exercises that help explain how to us jQuery • Or refer to it from a CDN, such as jQuery or Google 11 12 Simple Example Results • Consider the following HTML file, demo.html: • When we run demo.html, we see the following: <!DOCTYPE html> <html> jQuery <head> <title>jQuery Demo</title> <script src="jquery-2.2.0.min.js"></script> <script src="my.js"></script> </head> <body> Custom <p class="intro">Hello, World</p> </body> </html> 13 14 1) Simple HTML Example Ready Method • Open demo.html in your browser & inspect the page • You will want to be sure that the entire page has loaded before running jQuery – Notice the three files: – This ensures that all DOM elements are present • There is a built-in function for this: $(document).ready(function() { // your code here }); • Which can also be called like this: $(function() { // your code here }); 15 16 Results 2) Add a Function to my.js • If we add a simple function to my.js • Add a simple function to my.js $(function() { • Reload your page alert('hello'); }); • When we reload our page, we’ll get the following: 17 18 Selectors Element Selector • In jQuery, selectors allow developers to select and • Selects based on element name manipulate HTML elements – Will be applied to all elements that match – Used to "find" HTML elements based on: • Adding the following function to my.js will look for any • id and all <p> elements in the HTML and change the • classes background to orange • types – $("p").css("background", "orange"); • attributes • values of attributes <body> • All selectors in jQuery start with the dollar sign and <p class="intro">Hello, World</p> parentheses: $() </body> 19 20 3) Selectors Element Selector • Change the function in my.js so that it changes any <p> • An element selector will select all instances of an element element to have an orange background – So if we have three <p> elements, all of them will be selected <body> <p class="foo">Hello, World</p> <p class="fee">Goodbye, World</p> <p class="faa">So Long!</p> </body> 21 22 4) More Selectors id Selector • Change the source of demo.html so that it has three • Selects based on id <p> elements and reload the page – Will be applied to only the id that matches – $("#id"), where id is the actual id an an element – For example: – $("#1").css("background", "orange"); • An id should be unique within a page – But there is no mechanism that guarantees this – Best practice is to ensure that it remains unique 23 24 5) Using an ID Selector Class Selector • Change the source of both demo.html and my.js so • Another way to select elements is to use their class that it uses a more precise selector based on an ID, not an – Class is typically associated with CSS and used to change the look element & feel of elements – Alter my.js to select the other ID’s in the HTML – But can also be associated with an element or group of elements for the purpose of interacting with them – Or both – Quite flexible, as it can be used for: • A single class • Multiple classes • Classes only on specific elements 25 26 6) Using a Class Selector 7) Using a Class Selector • Change the source of my.js to select elements that have • Next, change the source of demo.html and introduce the class “foo” associated with them three <div> elements with the same classes as the three <p> elements – Alter my.js to select the other classes in the HTML source – Refresh the page and notice that all instances of the foo class are orange, regardless of the element type 27 28 Element and Class Selectors 8) Element and Class Selectors • It is possible to combine an element selector and a class • Change the class selector in my.js so that it only selects selector to get a more specific result <p> elements with the foo class • Consider our HTML now: – There are two elements with the foo class - a <p> and a <div> – Selecting the foo class will select them both • Which may not be the desired result – Use element.class in the select to narrow it down: – $("p.foo").css("background", "orange"); 29 30 Element Selector Revisited 9) Element Selectors • Not only can you augment element selectors with a class, • Change the source of my.js so that it selects the first <p> but you can use other selectors element and the last <div> element and highlights them in orange – $("p:first") – $("p:last") – $("p:empty") –Many others exist as well; see the API Documentation 31 32 Chaining 10) Chaining • jQuery can do more than thing at a time • Alter both the demo.html and my.js files so that any empty <p> element has its background color changed to – Called “chaining” orange and contains some text • Allows multiple methods to be performed on the same element – For example, we can select any <p> element that does not have any text and apply two properties to it: • Add text to the element • Change the background to orange $("p:empty") .text( "Was empty!" ) .css( "background", "orange" ); 33 34 Events Events: click • Changing properties when the page load is not all jQuery • Rather than automatically change colors, we can change our can do jQuery ready function to listen for when the user clicks on a specific selector – It can listen for events - such as hover, click, scroll, etc. - and then do something when the event occurs – In this case, any <p> element – See the jQuery API Documentation for a list of methods & • When the user clicks, we can then call a function handlers and how to invoke them $("p").click( function(){ $(this).css("background","orange") } ); 35 36 Remember this? Events with More Specific Selectors • In JavaScript, this is used to refer to the current object • We can apply more specific selectors to our jQuery code to only change the color of a <p> element if the class is • jQuery makes use of this, too foo: – $(this).property $("p.foo").click( function(){ $(this).css("background","orange") } ); 37 38 11) Events: click • Alter both the demo.html and my.js so that as any jQuery in APEX <p> element is clicked, the background will change to orange – Change my.js to only change the color if the class is foo 39 40
Description:The list of books you might like
