Animations:
Animation is a series of images displayed fast enough to be perceived as a movement. As far as user interfaces are concerned, animations are used to dynamically modify the appearance of the content and respond to the user’s actions. Animations can be added through the CSS or JavaScript functions (Wiley 2013).
In order to create a JavaScript animation, one has to declare a function, which will affect a given element. When combined with methods like “setTimeout()” and recursion, animation can run indefinitely, as it will automatically execute itself (Wiley 2013). Besides of that, “requestAnimationFrame()” method can be used to improve the animation’s management (it will group animations together and execute them simultaneously) (JavaScript.info n.d.).
Responding to user’s behaviour can make the website much more interesting and appealing. JavaScript is able to trigger the animation when specified event occurs. Keywords like “onclick”, “onmouseover”, “onchange”, etc. are used to specify actions performed when element is clicked, pointer is moved above the object or given item’s state changes.
Graphics:
JavaScript can be used to both insert images into the website’s body and draw shapes using <canvas> (Wiley 2013). In the first case, one has to create a script which will create a new element (“createElement(“element”)”), add necessary attributes (like “src”) and finally append the newly created object as a child of another element(<body>, <div> or any other container). In order to do this, “appendChild()” method has to be used (Wiley 2013).
As far as the <canvas> is concerned, JavaScript is used to create objects and paths, which will be displayed in the <canvas>. First, canvas object must be created. Syntax is similar to “var cvs = document.getElementById(“canvas”).getContext(“2d”);”. Then paths, arcs or shapes can be drawn (images can be included as well). Moreover, fill() method can be used to specify the shape’s colour or “globalCompositeOperation()” can modify the effect of overlapping images (or other elements) (Wiley 2013).
Transferring Data:
JavaScript is often considered to be client-side-only programming language. It means that it cannot access the resources stored on the remote sever. However, JavaScript can do it as well. One of the most common way of doing so, includes utilizing the “XMLHttpRequest” API. In order to establish the communication, it creates an “XMLHttpRequest” object, declares the HTTP method used to contact the server, gets a response and sends the data. “XMLHttpRequest” API requires a dynamic web server to operate (Wiley 2013).
Exchange of complex objects with the web server can be simplified when the JSON (JavaScript Object Notation) is applied. When data is retrieved, it has to be parsed into an JS object (“JSON.parse(response)”) and converted into a string before it is send to the server (“JSON.stringify()”).
Files:
JavaScript “file” object can be used to perform different operations on the files even before they are uploaded to the server. Objects properties like size or name can be used to test if the file’s type corresponds to requirements and fits in the server’s uploaded files size limits.
Application Cache:
AppCache is a memory space used to store files belonging to a particular website in local memory. These files can be used to display the website even if connection to the internet is unavailable and reduce the time needed to load the website. Files stored on the local hard drive are listed in the cache manifest (“.appcache” file). In order to support the AppCache, the web server must be configured with the correct MIME type (“text/cache-manifest”) (Wiley 2013).
Form Validation:
JavaScript allows for input fields to be validated in real time. By using events like “onkeyup”, “onchange”, etc. JS code can be executed as soon as changes to the input fields are made. Because of that, it can seamlessly validate the value entered by the user and modify it if needed. For instance, if entered data has to follow a given pattern, JS can remove all characters not matching the rules as soon as they are entered (Wiley 2013).
Cookies:
Cookies are text files used by the web browsers to store information about the user on the local drive. They are updated when user performs actions and browses the website. JavaScript treats cookies like a standard variable, thus it can both create cookies and retrieve their content. In order to set the cookie “document.cookie” object has to be called (syntax can resemble something like “document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";”) (Wiley 2013).
Local Storage:
Cookies were designed when technology able to store small pieces of data was required. They met the original requirements, however, as the time passed, they turned out to be insecure, difficult to use and slow when overloaded with larger amount of information. Because of that, HTML5 introduced a new solution – web storage API.
Web storage provides access to two objects: “localSrorage” (lasting till the browser’s memory is emptied) and “sessionStorage” (available till the moment when the browser’s tab is closed). They can be accessed through syntax similar to “localStorage.setItem("lastname", "Smith");” (Wiley 2013).