JavaScript JSON Reference
JSON (JavaScript Object Notation) JSON is a format for storing and transporting data. JSON is text, and text can be transported anywhere, and read by any programming language. JavaScript Objects can be converted into JSON, and JSON can be converted back into JavaScript Objects. This way we can work with the data as JavaScript objects, with no complicated […]
JavaScript Global Reference
The JavaScript global properties and functions can be used with all the built-in JavaScript objects. JavaScript Global Properties Property Description Infinity A numeric value that represents positive/negative infinity NaN The NaN property represents “Not-a-Number” value. This property indicates that a value is not a legal number. The NaN property is the same as the Number.Nan […]
JavaScript Error Reference
Error Object The Error object provides error information when an error occurs. Example In this example we have written “alert” as “adddlert” to deliberately produce an error. Return the error name and a description of the error: try { adddlert(“Welcome”); } catch(err) { document.getElementById(“demo”).innerHTML = err.name + “<br>” + err.message; } Try it Yourself » For a tutorial about JavaScript […]
JavaScript Boolean Reference
JavaScript Booleans JavaScript booleans can have one of two values: true or false. The Boolean() Function You can use the Boolean() function to find out if an expression is true: Example Boolean(10 > 9) // returns true Try it Yourself » Or even easier: Example (10 > 9) // also returns true 10 > 9 // also returns true Try it Yourself » For […]
JavaScript Array Reference
Array Object The Array object is used to store multiple values in a single variable: var cars = [“Saab”, “Volvo”, “BMW”]; Array indexes are zero-based: The first element in the array is 0, the second is 1, and so on. For a tutorial about Arrays, read our JavaScript Array Tutorial. Array Properties Property Description constructor Returns the function that […]
HTML DOM Bold Object
Bold Object The Bold object represents an HTML <b> element. Access a Bold Object You can access a <b> element by using getElementById(): Example var x = document.getElementById(“myB”); Try it Yourself » Create a Bold Object You can create a <b> element by using the document.createElement() method: Example var x = document.createElement(“B”); Try it Yourself » Standard […]
HTML DOM Audio Object
Audio Object The Audio Object is new in HTML5. The Audio object represents an HTML <audio> element. Note: The <audio> element is not supported in Internet Explorer 8 and earlier versions. Access an Audio Object You can access an <audio> element by using getElementById(): Example var x = document.getElementById(“myAudio”); Try it Yourself » Create an Audio Object […]
The HTML DOM Element Object
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element. Properties and Methods The following properties and methods can be used on all HTML elements: Property / Method Description accessKey Sets or returns the accesskey attribute of an element addEventListener() Attaches an event handler to the […]
HTML DOM Anchor Object
Anchor Object The Anchor object represents an HTML <a> element. Access an Anchor Object You can access an <a> element by using getElementById(): Example var x = document.getElementById(“myAnchor”); Try it Yourself » Create an Anchor Object You can create an <a> element by using the document.createElement() method: Example var x = document.createElement(“A”); Try it Yourself » Anchor […]
HTML DOM Style Object
Style object The Style object represents an individual style statement. Style Object Properties The “CSS” column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3). Property Description CSS alignContent Sets or returns the alignment between the lines inside a flexible container when the items do not use all available space 3 […]
JavaScript HTML DOM Node Lists
The HTML DOM NodeList Object A NodeList object is a list (collection) of nodes extracted from a document. A NodeList object is almost the same as an HTMLCollection object. Some (older) browsers return a NodeList object instead of an HTMLCollection for methods like getElementsByClassName(). All browsers return a NodeList object for the property childNodes. Most browsers return a NodeList […]
JavaScript HTML DOM Collections
The HTMLCollection Object The getElementsByTagName() method returns an HTMLCollection object. An HTMLCollection object is an array-like list (collection) of HTML elements. The following code selects all <p> elements in a document: Example var x = document.getElementsByTagName(“p”); The elements in the collection can be accessed by an index number. To access the second <p> element you can write: y […]
JavaScript HTML DOM Elements (Nodes)
Adding and Removing Nodes (HTML Elements) Creating New HTML Elements (Nodes) To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element. Example <div id=”div1″> <p id=”p1″>This is a paragraph.</p> <p id=”p2″>This is another paragraph.</p> </div><script> var para = document.createElement(“p”); var node = document.createTextNode(“This is new.”); […]
JavaScript HTML DOM Navigation
With the HTML DOM, you can navigate the node tree using node relationships. DOM Nodes According to the W3C HTML DOM standard, everything in an HTML document is a node: The entire document is a document node Every HTML element is an element node The text inside HTML elements are text nodes Every HTML attribute […]
JavaScript HTML DOM EventListener
The addEventListener() method Example Add an event listener that fires when a user clicks a button: document.getElementById(“myBtn”).addEventListener(“click”, displayDate); Try it Yourself » The addEventListener() method attaches an event handler to the specified element. The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to […]
JavaScript HTML DOM Events
HTML DOM allows JavaScript to react to HTML events: Reacting to Events A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick=JavaScript Examples of HTML events: When a […]
JavaScript HTML DOM Animation
Learn to create HTML animations using JavaScript. A Basic Web Page To demonstrate how to create HTML animations with JavaScript, we will use a simple web page: Example <!DOCTYPE html> <html> <body><h1>My First JavaScript Animation</h1><div id=”animation”>My animation will go here</div></body> </html> Try it Yourself » Create an Animation Container All animations should be relative to a container […]