Web Development Tips for PL/SQL Programmers

How Does a PL/SQL Programmer Get Started with Web Development?

Learn FireFox’s Firebug or Chrome’s developer tool, HTML, CSS, DOM, AJAX, and JavaScript

Are you an expert server side software developer who needs to migrate to a browser based environment like Oracle Application Express (APEX)? Then this free tutorial is for you; it will help you to “break the back” on the somewhat steep learning curve that is required when you start learning how to effectively use client side browser tools like FireFox’s Firebug and Chrome’s developer tool. APEX expert and author Patrick Cimolini leads you, step by step, from a simple “hello world” web page to some real-world APEX pages; showing you along the way how to use the browser tools to inspect, test, and debug your HTML, CSS, DOM, AJAX, and JavaScript code.

The tutorial introduces the audience to the important browser development tools that are required in order to take advantage of the web’s browser based environment. Students are shown how to analyse and debug a web page by using the development tools that are built into the FireFox and Chrome browsers. The webinar starts with a simple “hello world” web page and then progresses, step by step, into real-world APEX pages where HTML, CSS, DOM, AJAX, and Javascript must be inspected, tested, and debugged. We’ll de-mystify the web tools and help you achieve a level of comfort and confidence when working with the client side web tools.

This free training is segmented into several separate lessons:

  1. Introduction & Agenda (2:11)
  2. Languages and Tools You Should learn (4:03)
  3. Demonstration: Use Google Chrome Inspect Element to Learn from the Experts (3:41)
  4. Using Hello World to Learn Chrome’s Inspect Element Tool (4:39)
  5. Adding CSS to Hello World (The Class and ID Selectors) (2:47)
  6. Demonstration: Adding CSS (5:56)
  7. A Word About Webkit (1:58)
  8. Introduction to and Debugging JavaScript (2:43)
  9. Demonstration: Debugging JavaScript (5:37) (click on video below)
  10. Inspecting AJAX Network Traffic (7:33)
  11. Oracle APEX Example: Borrowing HTML Elements from Existing Pages (8:41)
  12. CSS in APEX (1:37)

Date: Dec 17, 2013

For more Web Development Training see out HTML5, CSS3 and JavaScript class.

NOTE: Some corporate firewalls will not allow videos hosted by YouTube.


Demonstration: Debugging JavaScript

Web Developer Primer for PL/SQL 


9. Demo Debugging JavaScript


>> Patrick:  Drag it in. There we go. Here are our two inputs – our numerator with 84 and our denominator with 2. Here is “And the answer is” – that’s where the answer is going to go and here’s the button. So when I click we get the answer which is 42. 


Now if you put a zero in here and click the button, of course you’re going to get infinity which is a bad thing, which indicates there’s perhaps a bug in code here. 




So, let’s right-click. Let’s go inspect element. 




We’re not interested in the elements tab anymore because we want to look at the source code of the JavaScript. So we come over to the “Sources” tab here. Let’s click on that and here you go. We’ve got the source code to look at here. Here’s our function divide by numbers. 


Over here on the left, you can see that one of the line numbers is highlighted for us by default and that indicates there is that breakpoint. I’m sure you’re all familiar with breakpoints. You just single-click on the line number and you can set multiple breakpoints if you like, but we’ll just keep it here as 1. 




Over here on the right – at the top here are the usual suspects for a debugger. It’s a little sign here that says that you can jump through to the end of you script. You can single step, you could step into a function, you can step out of a function. We don’t need to really talk about those things. You’re all familiar with the concepts. We just want to show you where they are, where you can find them. 


Let’s click on the button here and see what happens. Here we go. Our live area at the top is greyed out and our code here now has stopped at our first breakpoint. And if we hover over the numerator you can see that it is undefined. 




Now if I single step through this code, one at a time – here we go – we fired all of these statements. I see that the numerator now has got the value of 84, the denominator is 0 which is bad. A bug we have to fix. The result is what’s on the screen, this infinity business. That is JavaScript debugging. 




I’ve just used simple scalar variables here just to illustrate this point. One thing that you’ll find as PL/SQL programmers when you come into this environment that will be just a little bit confusing is that JavaScript is an object-oriented language, and so when you do have objects mixed in here, your debugging will be just a little bit more onerous and you’ll have to do a little more research on that. It requires a deeper dive into the JavaScript language. 




Now let’s go on here. I mentioned that I’d show you how to debug JavaScript and most of you PL/SQL programmers are very familiar with the concept of debugging from your experience with things like SQL developer and TOAD that will allow you to inspect your PL/SQL code and allow you to set breakpoints and then single step through your code and inspect the individual values of your variables, kind of where your sins are in your code. And of course, JavaScripts, these tools have exactly the same concept. I’m sorry, I don’t have to dwell on that too much. The trick here is A, you need to know that it does exist which I’m just telling you now and then you have to figure out where to find it. 


I’ve got a little example here so we can see it in action. A very simple theme – I could build a function called dividemembers. It just takes a numerator and a denominator, that’s the division, and pops the result into a variable called vResult and then displays that on the page. 




Then you have some HTML down here and you can see up here that when I get the value of the numerator into the variable, there’s a little piece of syntax. Here is it says, “Get element by ID,” and of course the ID is a numerator and you can see I’ve got an input down here with this ID trick here so that the ID is numerator. That shows you how this ID business is used to tie the JavaScript to the HTML – very important concept here. 


And then we got two inputs, one for numerator and one for denominator. Here I actually put the result into a paragraph tag and it too has an ID of result. It’s a paragraph on the page and we’ll change this “And the answer is…” to whatever the result is from the division. 


Of course, to fire this function we got a button to find and that button has an on-click event defined for it, and that on-click event happens to be the name of our JavaScript function. That’s how the JavaScript function gets fired when we press the button.

Copyright 2017

Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!