JavaScript Fundamentals and Library Integration (YUI/Moodle)

TL;DR

You'll learn core JavaScript concepts, how they work in a web browser, and how Moodle uses the YUI library to build interactive features. We'll cover important Moodle-specific JS patterns, like AMD modules and the YUI sandbox, to help you extend Moodle's functionality.

1. The Mental Model

Think of JavaScript as the "verb" of a webpage, making things happen. Moodle uses a specific set of tools, primarily the YUI library, to organize this "verb" into reusable and safe pieces, especially for adding new features.

2. The Core Material

What is JavaScript?

Photo by Markus Spiske on Pexels

JavaScript is a programming language that makes webpages interactive. It runs directly in your web browser. When you click a button, see a slideshow, or get an instant message, JavaScript is usually behind it. It works alongside HTML (the page's structure) and CSS (the page's style) to create dynamic experiences.

Browser Environment

Photo by Pixabay on Pexels

When your browser loads a webpage, it creates a global object called window. This window object contains everything related to the current page: the HTML document (window.document), timers (setTimeout, setInterval), and even your custom JavaScript variables and functions.

Here's a simple example you can try in your browser's developer console (usually F12):

// Accessing an element by its ID
const myElement = document.getElementById('some-id');
if (myElement) {
    myElement.textContent = 'Hello from JS!';
    myElement.style.color = 'blue';
} else {
    console.warn('Element with ID "some-id" not found.');
}

// A simple function
function greet(name) {
    alert('Hello, ' + name + '!');
}

// Calling the function
greet('Learner');

Introducing YUI (Yahoo User Interface)

Photo by Matheus Bertelli on Pexels

Moodle historically used the YUI library extensively. While modern JavaScript development has moved to other libraries, YUI is still fundamental to Moodle's core structure and many older plugins. YUI provided a robust set of tools for DOM manipulation, event handling, AJAX, and more, cross-browser compatibility.

YUI Sandbox

Photo by Nikolay Ekimov on Pexels

One key YUI concept Moodle uses is the "sandbox." This prevents conflicts between different JavaScript code on the same page. Imagine two separate sections of code, each using a common variable name like data. Without sandboxing, they'd overwrite each other. YUI modules run in their own isolated environment.

AMD (Asynchronous Module Definition) in Moodle

Moodle uses AMD for loading JavaScript modules. This means Moodle loads JS code only when it's needed, improving page load times. AMD modules are defined using define() and loaded using require(). This helps organize code into manageable, reusable chunks.

Here's how a typical Moodle AMD module looks:

// Define a new module named 'moodle-mod_mymodule-mycomponent'
define(['jquery', 'core/log'], function($, log) {

    // This is the object that our module will return.
    var COMPONENT = {
        init: function() {
            // This function runs when the module is initialized.
            log.debug('My Moodle component initialized!');

            // Example: Add a click handler to an element with class 'my-button'
            $('.my-button').on('click', function() {
                alert('Button clicked!');
            });
        },

        // You can add other functions or properties here
        sayHello: function(name) {
            log.info('Hello from my component, ' + name + '!');
        }
    };

    // Return the component object.
    return COMPONENT;
});

To call this module from another Moodle JS file (e.g., init.js for a specific page), you'd use require():

require(['moodle-mod_mymodule-mycomponent'], function(myComponent) {
    myComponent.init(); // Initialize our component
    myComponent.sayHello('Student'); // Call another function
});

This module structure is crucial for writing clean, maintainable, and Moodle-compatible JavaScript.

Moodle JavaScript Loading Process

graph TD
    A["User requests Moodle page"] --> B["Moodle renders HTML"]
    B --> C["Browser downloads HTML, CSS, JS"]
    C --> D{"<br/>Browser sees require_js() calls <br/> in Moodle output"}
    D --> E["AMD Loader starts"]
    E --> F["Loads specific 'core/first' module"]
    F --> G{"Loads AMD modules<br/> (e.g., 'moodle-mod_mymodule-mycomponent')<br/> and their dependencies (e.g., 'jquery', 'core/log')"}
    G --> H["Modules' init() functions run (if defined)"]
    H --> I["Page is interactive"]

3. Worked Example

Let's say you want to add a simple "Click Me!" button to a Moodle page, and when clicked, it changes its own text and logs a message.

First, in your Moodle plugin (e.g., mod/mymodule), you'd create a JavaScript file, let's call it amd/src/button_interaction.js:

define(['jquery', 'core/log'], function($, log) {
    var buttonInteraction = {
        init: function() {
            // Find the button by its ID within the current page's context
            $('#my-moodle-button').on('click', function() {
                var $this = $(this); // Cache the jQuery object for efficiency
                log.info('Moodle button clicked!');
                $this.text('You clicked me!'); // Change button text
                $this.prop('disabled', true); // Disable the button after click
            });
        }
    };
    return buttonInteraction;
});

Next, in your Moodle plugin's PHP code (e.g., in renderer.php or view.php for a specific page), you'd tell Moodle to load this JavaScript module and initialize it.

```php