Introduction

Web pages and websites have come a long way since their inception in the early 1990s (with the creation of HTML). Modern web applications such as Moodle now have far more in common with desktop applications than with the simple word processing documents they originally modeled.

One key weapon in the modern web application's armory is the subject of this book — JavaScript.

In essence, JavaScript is a programming language that runs in a user's web browser rather than on the web server. It allows programmers to manipulate the web page via what is called the Document Object Model (DOM). The DOM is a representation of the underlying HTML page, structured in a way to provide access to each and every element within the HTML page. Modern browsers now implement a standard version of the DOM, so it can be considered a cross-platform technology.

In recent years, there has been a significant uptake of the use of JavaScript frameworks. A JavaScript framework is a library of JavaScript code that makes a JavaScript programmer's life easier. Generally, they provide more efficient methods for performing the most common tasks in JavaScript, such as locating DOM elements or wiring up events to those elements. (An event is a function of an element. For example, an HTML input button element has a "click" event that is fired when the mouse is clicked while the pointer is over the button.) Additionally, they provide an abstraction of browser-specific quirks, making it very easy to write cross-platform code that works in the widest range of browsers.

One such JavaScript framework is the Yahoo! User Interface library (YUI). YUI is the framework of choice for Moodle 2.0, and is included with the standard Moodle 2.0 package. For this reason, a substantial number of techniques covered in the later chapters will be based on the YUI. In the final chapter, we will briefly explore some other popular JavaScript frameworks and libraries.

Perhaps more important than "how" to use JavaScript is the question of "when" to use it. It is vital to consider the target audience of your web applications and infer from this exactly how you will use JavaScript.

If you are building a web application that is to be widely used in a public setting, then you should aim to make it as accessible as possible to all types of users. With respect to JavaScript specifically, this means that the core functionality of your site should be available to those who, for whatever reason, cannot or will not use a browser that fully supports JavaScript (typical examples include a mobile device which has limited functionality, or a browser using automated text-to-speech or screen-reading software). These techniques form a part of what is known as "progressive enhancement".

In this first chapter, we will learn the basic techniques for integrating our JavaScript code with Moodle 2.0. We will learn several methods of including our JavaScript code in a Moodle page via .js files, and how to get the code to run. Lastly, we will look at some best practices and also how to make Moodle data and language strings available to our JavaScript code.