CycleBlob: A WebGL Lightcycle Game - HTML5 Games Most Wanted - page 175

Working with this setup is similarly simple. You write the HTML and JavaScript using the editor, save them
to your project folder, and double-click the HTML file to open it in the browser to see if it works.
This setup is sufficient for the first few attempts at tinkering with web applications, but pretty soon, it
becomes evident that it is not an ideal environment.
The problem with local disk files
When you double-click an HTML file on a local disk, the browser treats it differently than a page
downloaded from a real web server. The page may not be able to refer to other files unless they are in a
specific folder structure; JavaScript code may not be able to perform AJAX requests; and features may be
disabled or enabled according to various security considerations. The exact differences depend on the
browser, but common to all browsers is that to a certain extent, working with local disk files is inherently
different from working with a real web server. The indication that you are working with a local file is that the
address bar says something like file:///C:/webgl/myapp.html , instead of a regular web address. In
order to simulate real working conditions for our web application, we will need an actual web server.
WampServer ( www.wampserver.com/en ) is a very convenient package for Windows. It can be downloaded
for free. The simple installer creates a fully-configured web development environment, ready for use. To
see it work, do the following:
After installation, make sure the Wamp service is running. You can see its status icon in the
notification area of the taskbar. The icon should be green.
Go to the folder where Wamp is installed (say C:\wamp ) and go to the sub-folder called www .
Create a new folder for your work called myapp (for example). Copy your HTML and JS files to this
folder and make sure that the main HTML file is called index.html .
Now open the browser and direct it to http://localhost/myapp . If everything is working as it
should, you will see your application page.
What happens behind the scenes is that WampServer opens a port 80 (TCP port for HTTP protocol)
locally on your computer. When you direct the browser to go to the address localhost , it tries to access
your computer as if it were a web server. WampServer then sends him the files found under the folder www .
By de fault, WampServer only enables a local browser to access the content under www . The po rt is not
opened on any outbound interface, so no one other than you can access this page.
“Wamp” is an acronym for Windows, Apache, MySQL, PHP. It is a play on the common “LAMP” acronym
(Linux, Apache, MySQL, PHP) that describes the common internet web server setup.
Debugging JavaScript
Modern browsers almost invariably contain some facilities for debugging JavaScript code.
The basic JavaScript console gives basic indications of errors that may have occurred or
warnings about unexpected behavior. The console also allows immediate access to the
JavaScript interpreter command line for evaluating short snippets.