Script.aculo.us

Last updated

script.aculo.us
Scriptaculous logo.png
Developer(s) Thomas Fuchs
Final release
1.9.0 / December 23, 2010 (2010-12-23)
Repository OOjs UI icon edit-ltr-progressive.svg
Written in JavaScript
Type JavaScript library
License MIT License
Website script.aculo.us OOjs UI icon edit-ltr-progressive.svg

script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model (DOM).

Contents

It is most notably included with Ruby on Rails and Seaside, but also provided separately to work with other web frameworks and scripting languages.

script.aculo.us was extracted by Thomas Fuchs from his work on fluxiom, a web based digital asset management tool by the design company wollzelle. [1] It was first released to the public in June 2005.

Features

script.aculo.us extends the Prototype JavaScript Framework by adding visual effects, user interface controls, and utilities.

Visual effects

There are five core effects script.aculo.us offers: Opacity, Scale, MoveBy, Highlight, and Parallel. Through these effects there are over 16 additional effects using combinations of the core effects out of the box. Programmers can also extend existing and create new effects.

Enabling an effect is a matter of assigning an element with an ID name and one line of code for the effect. Below is an example for the Effect.Fade effect applied to a DOM element with an ID of 'message-box':

newEffect.Fade('message-box');

This will cause the target ID to fade in opacity and end by setting the CSS "display" property to "none".

Various other settings within the effect can be modified, such as the duration of the effect and the range of the effect:

newEffect.Fade('message-box',{duration:2.0,from:0.0,to:0.8});

This would fade the element, but stop when the effect is 80% complete (with an opacity of 20%).

Controls

Controls offers user interface elements including:

Builder

Builder allows creating DOM elements dynamically. Using the sample code below:

element=Builder.node('div',{id:'ghosttrain'},[Builder.node('div',{className:'controls',style:'font-size:11px'},[Builder.node('h1','Ghost Train'),"testtext",2,3,4,Builder.node('ul',[Builder.node('li',{className:'active',onclick:'test()'},'Record')])])]);

...creates the following (without whitespace):

<divid="ghosttrain"><divclass="controls"style="font-size:11px"><h1>Ghost Train</h1>     testtext234     <ul><liclass="active"onclick="test()">Record</li></ul></div></div>

Related Research Articles

Document Object Model Convention for representing and interacting with objects in HTML, XHTML and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Dynamic HTML, or DHTML, is a collection of technologies used together to create interactive and animated websites by using a combination of a static markup language, a client-side scripting language, a presentation definition language, and the Document Object Model (DOM). The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997. Today, references to unobtrusive JavaScript coding have replaced the usage of the term DHTML.

DOM events are actions that occurs as a result of the user action or as result of state change of the elements of a DOM tree. Client-side scripting languages like JavaScript, JScript, ECMAScript, VBScript, and Java can register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML, XHTML, XUL, and SVG documents.

In computing, a mouseover, mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers. For example, hovering over a hyperlink triggers the mouseover control element to display a URL on the status bar. Site designers can define their own mouseover events using JavaScript or Cascading Style Sheets.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

In HTML, span and div tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as p (paragraph), em (emphasis), and so on, accurately represent the semantics of the content, the additional use of span and div tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, span and div can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

In computer science and web development, XML Events is a W3C standard for handling events that occur in an XML document. These events are typically caused by users interacting with the web page using a device, such as a web browser on a personal computer or mobile phone.

The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson in February 2005 as part of the foundation for Ajax support in Ruby on Rails. It is implemented as a single file of JavaScript code, usually named prototype.js. Prototype is distributed standalone, but also as part of larger projects, such as Ruby on Rails, script.aculo.us and Rico. As of November 2015, according to one survey, Prototype is used by 2.2% of all websites.

YUI Library Software

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several core CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having 3 to 4 times more usage than any other JavaScript library.

MooTools is a lightweight, object-oriented JavaScript framework. It is released under the free, open-source MIT License.

Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages. Though the term is not formally defined, its basic principles are generally understood to include separation of functionality from a Web page's structure/content and presentation, and progressive enhancement to support user agents that may not support certain JavaScript functionality and users that have disabled JavaScript.

Lightbox (JavaScript) JavaScript library

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.

ItsNat Natural AJAX, is an open-source Java component-based Ajax framework.

Vaadin

Vaadin is an open-source platform for web application development. The Vaadin Platform includes a set of web components, a Java web framework, and a set of tools and application starters. Its flagship product, Vaadin Platform allows the implementation of HTML5 web user interfaces using the Java Programming Language.

jQuery UI is a collection of GUI widgets, animated visual effects, and themes implemented with jQuery, Cascading Style Sheets, and HTML. According to JavaScript analytics service, Libscore, jQuery UI is used on over 197,000 of the top one million websites, making it the second most popular JavaScript library. Notable users include Pinterest, PayPal, IMDb, The Huffington Post, and Netflix.

Google Apps Script cloud based scripting language for light-weight application development

Apps Script is a scripting platform developed by Google for light-weight application development in the G Suite platform. Google Apps Script was initially developed by Mike Harm as a side project whilst working as a developer on Google Sheets. Google Apps Script was first publicly announced in May 2009 when a beta testing program was announced by Jonathan Rochelle, then Product Manager, Google Docs. In August 2009 Google Apps Script was subsequently made available to all Google Apps Premier and Education Edition customers. It is based on JavaScript 1.6, but also includes some portions of 1.7 and 1.8 and a subset of the ECMAScript 5 API. Apps Script projects run server-side on Google's infrastructure. According to Google, Apps Script "provides easy ways to automate tasks across Google products and third party services." Apps Script is also the tool that powers the add-ons for Google Docs, Sheets and Slides.

React (web framework) JavaScript library for building user interfaces

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

Vue.js JavaScript framework

Vue.js is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru.

Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object. It is one way that events are handled in the browser. Events are actions done by the user such as a button click, changing a field etc. Event Handlers are used to perform methods according to the event that has occurred. For e.g.: The steps that need to be done once a button has been clicked or once the webpage completes loading etc.

References