JavaScript support#

• Since JavaScript is effectively the only complete language for writing web clients, a great deal of effort has been put into support material for it.
• Libraries provide sets of standard functions implemented using browser-independent and established methods.
• Frameworks provide alternative ways of assembling and preprocessing JavaScript code to build code with complex standard functionality.
• JavaScript supersets provide actual language extensions to JavaScript which are converted to standard JavaScript by another program before being placed in web pages
• Languages compiling to JavaScript allow web scripts to be written in entirely different languages

jQuery#

• One of the first and best-known JavaScript libraries
• Some of the functions jQuery provides have been added to JavaScript/ECMAscript itself in later versions. jQuery’s versions are still usable, as they will call the built-in version on browsers that support it, or use the old jQuery version on those that don’t

jQuery#

• The primary function of jQuery is to simplify the process of writing code to update the content of web pages via the DOM.
• The main functions it provides are:
  • The ability to use CSS selectors easily to select parts of the page to change (this was added to JavaScript later via querySelectorAll)
  • The ability to change all matching parts of a web page in similar ways without writing a loop or higher order call every time
  • Easy function-based adjustment of attributes and conversion of values to attribute types

CSS selectors (recap)#

See lecture 4 for DOM element relation terminology. See https://www.w3schools.com/cssref/css_selectors.asp for full reference.

jQuery DOM updates#

• jQuery provides a function named $ (to shorten code that uses it) which, called with a CSS selector, returns an object representing all elements that match that selector.
• You can then call the methods of this object to read or update attributes or contents of the element(s) in question.
• If the selector matches more than one element, then:
  • Update methods affect all elements matched. There is no need to write a loop.
  • Read methods return the data for the first element matched. Depending on how your page is organized, this may be the same for all elements, but jQuery does not check this.

1
for (let x of document.getElementsByTagName("p")) {
2
    x.style.color = "red";
3
}
4

5
// document.querySelectorAll("#id")
6
// document.getElementById("id")

1
$("p").css("color","red")
2

3
// $("#id")

Methods on jQuery objects#

• .attr(…) manipulates DOM attributes (IDs, names, links, enabled/disabled, etc..).
• .prop(…) manipulates DOM properties. These are distinguished from attributes by whether or not their standard representations are in the HTML or not.
  • Eg, form input values like the value of a text box, or the checked status of a checkbox, should be accessed with prop(). Although they can appear in the HTML, those are only initial values; the real values can be changed by the user and then no longer tie directly to the HTML file.
• .css(…) manipulates CSS attributes (color, width, height, position, etc..)
• .data(…) allows arbitrary data to be stored about elements in jQuery. (This is not the same as the HTML5 data- attributes.

• Certain frequently used values, or ones harder to work with, have their own special functions.
• .val(): value of form field (as property).
• .height(), .innerHeight(), .outerHeight(), .width(), innerWidth(), .outerWidth(): access width or height values allowing for changes caused by computation, and as pixel sizes as integers (when accessed directly in CSS they are strings that contain unit indicators)
• .position(), .offset(): access both x and y position values as dicts with two elements, already converted to pixel sizes as integers. .position() returns relative to the containing elements. .offset() returns relative to the entire document.

Manipulating jQuery events#

• You can add an event handler to an object in jQuery by calling the method .on eg, $("button").on("click",x => window.alert("Click! "));
• There are also a large number of convenience methods for commonly used events, eg .click(), .change(), .focus()…
• Unlike setting the onClick attribute, this adds an event handler. Previous event handlers are not removed. This allows different parts of your script to “stack” event handlers on elements.
• If you want to remove event handlers, use the corresponding method .off().

The ready event#

• When using jQuery, if you want code to run as soon as the page is loaded, you should use jQuery’s ready event handler which has a custom syntax.

1
$(x => { …. });

• jQuery will run your code as soon as the DOM and page are fully loaded and jQuery is set up. If this happens so quickly that it has already occurred by the time the $() command runs, it will run it immediately

Removing elements#

• .detach() removes the set of elements from the page, but keeps their data around so they can be reinserted.
• .remove() removes the set of elements from the page and erases their data.
• .empty() removes all descendants of all elements in the set.
• .unwrap() removes the immediate parents of all elements in the set, replacing them with the elements themselves.

Inserting elements#

• .append() and .prepend() insert new content inside the target elements, before or after the existing content.
• .after() and .before() insert new content after or before the target element(s), inside their parent elements.
• .wrap() encloses each target element in a new element. .wrapAll() creates a new element with the smallest scope that can cover all target elements.
• You can create new elements to pass as parameters to these functions using the createElement DOM function as before, or by passing a string of HTML to jQuery: eg, $("<p>New Paragraph</p>")

Animation#

• jQuery includes some support for simple animations.
• These should not be used frivolously, but can be very useful for making it clear to the user how a web page is changing.
• For example, if a new item is added at the top of a list, it is much clearer to the user if they see the other items slide down first.
• Like AJAX, jQuery animations are asynchronous. The methods return instantly and your script can continue running while the animation is taking place.
  • Each animation method can accept a dictionary of specific settings for that method, or a standard set of two parameters: a duration (how long the animation should take in milliseconds -higher is slower) and a completion function (to be called when the animation is finished - not mandatory).
• If multiple animation methods are called on a single object, they form a queue and occur in order.

jQuery and AJAX#

• jQuery also includes a global helper function for making AJAX calls.

1
function menuLoaded(response, status) {
2
  …
3
}
4
$.ajax({
5
    url: "menuserver?pageid="+menuid,
6
    method: "GET",
7
    timeout: 500,
8
    complete: menuLoaded
9
});

JavaScript Frameworks#

• JavaScript frameworks are extensions to JavaScript that change how your JavaScript code is executed.
• Typically, code written using a JavaScript framework will need to be either:
  • Run using a custom tool;
  • Compiled into regular JavaScript and web pages before being deployed on a web server.
• The Node.js framework allows JavaScript to be used as an interpreted language, like Python, to write ordinary desktop programs rather than web pages. It is not used for web development but it is important to know about it, because most compilers used to generate pages from web frameworks are written using it.

• One of the biggest difficulties with writing JavaScript programs is that when data changes, you have to manually restructure the web page to represent the updated data.
• For example, if a page contains a list of options and you want to add a new option, you have to manually
  • Find the part of the DOM holding the list
  • Create a new element to hold the new option
  • Insert it at an appropriate place in the DOM
  • Hook up appropriate event handlers to it
• jQuery can help, but you still have to do these tasks.
• This is a classic issue addressed by web based JavaScript Frameworks.

• You have seen the template language that can be used when outputting a web page from Flask.
• In Flask, maintaining a template is fairly simple, because the server’s task ends after the template is used to generate HTML. If the template is generated again later, it will be on a separate web request and can be done from scratch.
• On the client, however, the user is constantly interacting with the page. A client template must be dynamic and reactive:
  • It must be able to provide interaction with the user in the same way a regular web page could;
  • It must be able to update when the variables used in the template are changed, rather than being calculated again from scratch.

ReactJS#

• The ReactJS framework is a JavaScript-centric framework for reactive templates.
• Instead of writing HTML for interactive areas of the page, you define JavaScript functions that return the HTML.
• ReactJS uses a special syntax called JSX to allow this. JSX must be compiled to regular JavaScript using a tool included with ReactJS.

1
return items.map((item) => (
2
  <li> {item.name} </li>
3
));

• Each interactive part of the page is represented by an instance of a class you define.
  • This allows you to have several parts with similar interactions but different data by instantiating the class twice.
• The class contains a state dictionary, and must define a render() method which returns the HTML for that part of the page, based on the state.
• Whenever the state of an instances is changed, ReactJS automatically calls the render() method and updates the appropriate part of the page to reflect the new HTML it returns.

Angular#

• The Angular framework functions in a similar way, but presents dynamic templates by modifying HTML files instead of returning them from JavaScript.
• This can be harder to work with and requires more work by the framework, but has the advantage that the templates are similar to those used in Jinja and other server side template languages.

1
<div *ngFor="let item of items">
2
    <li>
3
        <p>{{ item.text }}</p>
4
        <button (click)="share()">
5
        Share
6
        </button>
7
    </li>
8
</div>

Vue#

• Vue or Vue.js works in a similar way to Angular, except that rather than being pre-processed, templates are stored inside regular HTML files.
• Vue loads the HTML file to the client and then processes it on the client to create the template data structures it needs.
• This saves a conversion step in development and can make templates easier to integrate with other software, but puts more load on the client.

JavaScript Frameworks#

• Covering JavaScript frameworks in detail is beyond the scope of the module, but all can be downloaded and used freely.
• Most also provide basic online development tools to allow you to experiment with them.
• The frameworks and libraries presented here are not the only ones available, just some of the most popular ones.