JavaScript operators are used to assign values, compare values, perform arithmetic operations, and more. JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y = 5, the table below explains the arithmetic operators: Operator Description Example Result in y Result in x Try it + Addition x = y […]
Math Object The Math object allows you to perform mathematical tasks. Math is not a constructor. All properties/methods of Math can be called by using Math as an object, without creating it. Syntax var x = Math.PI; // Returns PI var y = Math.sqrt(16); // Returns the square root of 16 For a tutorial about the Math object, read […]
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 […]
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 […]
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 […]
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.”); […]
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 […]
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 […]
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 […]
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 […]
The HTML DOM allows JavaScript to change the style of HTML elements. Changing HTML Style To change the style of an HTML element, use this syntax: document.getElementById(id).style.property = new style The following example changes the style of a <p> element: Example <html> <body><p id=”p2″>Hello World!</p><script> document.getElementById(“p2”).style.color = “blue”; </script> <p>The paragraph above was changed by a script.</p> </body> </html> Try […]
The HTML DOM allows JavaScript to change the content of HTML elements. Changing the HTML Output Stream JavaScript can create dynamic HTML content: Date: Sun Oct 14 2018 14:15:06 GMT+0500 (Pakistan Standard Time) In JavaScript, document.write() can be used to write directly to the HTML output stream: Example <!DOCTYPE html> <html> <body><script> document.write(Date()); </script></body> </html> Try it […]
This page teaches you how to find and access HTML elements in an HTML page. Finding HTML Elements Often, with JavaScript, you want to manipulate HTML elements. To do so, you have to find the elements first. There are a couple of ways to do this: Finding HTML elements by id Finding HTML elements by […]
The HTML DOM document object is the owner of all other objects in your web page. The HTML DOM Document Object The document object represents your web page. If you want to access any element in an HTML page, you always start with accessing the document object. Below are some examples of how you can […]
HTML DOM methods are actions you can perform (on HTML Elements). HTML DOM properties are values (of HTML Elements) that you can set or change. The DOM Programming Interface The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of […]
With the HTML DOM, JavaScript can access and change all the elements of an HTML document. The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects: The HTML DOM Tree of Objects With the object model, JavaScript gets […]
JavaScript functions are defined with the function keyword. You can use a function declaration or a function expression. Function Declarations Earlier in this tutorial, you learned that functions are declared with the following syntax: function functionName(parameters) { code to be executed } Declared functions are not executed immediately. They are “saved for later use”, and will be executed later, when they are invoked (called upon). […]
Date Object The Date object is used to work with dates and times. Date objects are created with new Date(). There are four ways of instantiating a date: var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); For a tutorial about date and times, read our JavaScript Date Tutorial. Date Object Properties Property Description constructor Returns the function […]
A JavaScript function does not perform any checking on parameter values (arguments). Function Parameters and Arguments Earlier in this tutorial, you learned that functions can have parameters: functionName(parameter1, parameter2, parameter3) { code to be executed } Function parameters are the names listed in the function definition. Function arguments are the real values passed to (and received by) the function. Parameter Rules JavaScript function definitions […]
JavaScript variables can belong to the local or global scope. Global variables can be made local (private) with closures. Global Variables A function can access all variables defined inside the function, like this: Example function myFunction() { var a = 4; return a * a; } Try it Yourself » But a function can also access variables defined outside the function, like this: Example var a = 4; function myFunction() { […]
