JavaScript TutorialOverviewBefore You StartThis tutorial assumes:
Line numbers are referenced in this tutorial. To enable line numbering in the editor tabs, click View Line Numbers in the View menu. JavaScript Tutorial ScenarioThis tutorial examines an HTML page that uses the Yahoo! User Interface Library and some additional JavaScript to create a special right-click context menu for an image map. In this tutorial, you will:
Opening the Tutorial ProjectOpening this tutorial from the Start Page gives
you the option to open the associated project. Otherwise, click
Open|Project in the File menu and
select Overview of the Tutorial FilesThe JavaScript tutorial project contains the following:
Opening the City PickerOn the Projects tab, double-click jsdemo.html to open it in the Editor Pane. In the View menu, click Preview in Browser ('Ctrl'+'K', 'Ctrl'+'V'). If Firefox is not set as your default browser in Komodo's Web Browser preferences, use the file URL in your browser's address bar to locate the file and open it in Firefox. Try the application. Right-clicking over a country in the map brings up a country-specific context menu instead of Firefox's default context menu. Selecting a city from the menu adds that city under the appropriate country heading in the table to the right and removes it from the menu. Reloading the page resets the page to the initial view. The context menu for Mexico is intentionally broken so that we can find the problem with the debugger later in this tutorial and fix it. Analyzing the JavaScript programLook over jsdemo.html. Other than some inline CSS style for the YUI context menu, it's all HTML. The JavaScript that makes the page work is sourced from external .js files. The one we'll be working with is context-menu.js. Open it from the tutorial project. The first thing we notice is the
Debugging the Page Komodo IDE onlyIf you have not already done so, configure the JavaScript Debugger. Starting the DebuggerIn Firefox refresh the City Picker page, click the Connect to Komodo Debugger button, and move your mouse pointer over the image map. If the debugger is configured correctly, the file event-min.js should open in a Komodo tab. Though you haven't set any breakpoints in this file, the debugger stops at the first line of JavaScript executed by the browser (in this case a YUI event handler). This gives you the opportunity to set breakpoints in the file if you want to, or step through the code with the Step In button. To leave this event handler and start debugging context-menu.js, click the Go/Continue Debugging button in the main or debugging toolbar. Select the context-menu.js editor tab. Set a breakpoint on line 62 of context-menu.js by clicking in the empty left margin. Breakpoints are displayed as an orange-red octagonal icon in the breakpoint margin. Right-click over Mexico in the City Picker map.
Viewing and Changing VariablesAs soon as the browser registers a right-click over Mexico on the image map, the debugger should stop on line 62 of context-menu.js. A yellow arrow icon indicating the current breakpoint will appear in the margin at that line. One of the most useful things the debugger does is keep track of
variables in the code. In the locals tab in the
Output pane we can see a list of all variables in the
current scope (i.e. variables in the You may have noticed earlier that the context menu for Mexico is broken. The variables list in the locals tab can help us find out why. The We can modify this variable within the debugger while the it is in
a break state. Double click on That solved the problem for this debugging session only. We need to
find out where that typo came from. Since the only appearance of the
country's name in context-menu.js is spelled correctly on
line 7, we can assume there's a problem in jsdemo.html. Since
Adding LinksThe cities are added to the country lists by manpulating the
DOM. These are plain
text Wikipedia has a fairly simple URL syntax for topic names, and it has information on all of the cities in our lists, so we could easily use it for our link targets. Lines 43 to 45 in context-menu.js handle creating the list elements and inserting the city name: var newItem = document.createElement("LI"); newItem.appendChild(document.createTextNode(cityName)); targetList.appendChild(newItem); Insert the following after line 43 to create an
var newLink = document.createElement('A'); Wikipedia articles can be accessed by adding the subject name
to the end of the base URL. To set the newLink.setAttribute('href', 'http://en.wikipedia.org/wiki/' + cityName) To insert this link in the list, modify the subsequent two lines to
use newLink.appendChild(document.createTextNode(cityName)); targetList.appendChild(newLink); Save the file and reload the page. Selected cities will now appear as Wikipedia links. More JavaScript ResourcesTutorials and Reference Sites
|