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 Form Validation HTML form validation can be done by JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted: JavaScript Example function validateForm() { var x = document.forms[“myForm”][“fname”].value; if (x == “”) { alert(“Name must be filled out”); return false; } } The function can be […]
Section Object The Section Object is new in HTML5. The Section object represents an HTML <section> element. Note: The <section> element is not supported in Internet Explorer 8 and earlier versions. Access a Section Object You can access a <section> element by using getElementById(): Example var x = document.getElementById(“mySection”); Try it Yourself » Create a Section Object […]
The Select object represents an HTML <select> element. Access a Select Object You can access a <select> element by using getElementById(): Example var x = document.getElementById(“mySelect”); Try it Yourself » Tip: You can also access a Select object by searching through the elements collection of a form. Create a Select Object You can create a <select> element by using […]
Textarea Object The Textarea object represents an HTML <textarea> element. Access a Textarea Object You can access a <textarea> element by using getElementById(): Example var x = document.getElementById(“myTextarea”); Try it Yourself » Tip: You can also access a <textarea> element by searching through the elements collection of a form. Create a Textarea Object You can create a <textarea> element […]
Del Object The Del object represents an HTML <del> element. Access a Del Object You can access a <del> element by using getElementById(): Example var x = document.getElementById(“myDel”); Try it Yourself » Create a Del Object You can create a <del> element by using the document.createElement() method: Example var x = document.createElement(“DEL”); Try it Yourself » Del […]
Method Reuse With the call() method, you can write a method that can be used on different objects. All Functions are Methods In JavaScript all functions are object methods. If a function is not a method of a JavaScript object, it is a function of the global object (see previous chapter). The example below creates an […]
The code inside a JavaScript function will execute when “something” invokes it. Invoking a JavaScript Function The code inside a function is not executed when the function is defined. The code inside a function is executed when the function is invoked. It is common to use the term “call a function” instead of “invoke a function“. It […]
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 […]
Array iteration methods operate on every array item. Array.forEach() The forEach() method Calls a function once for each array element. Example var txt = “”; var numbers = [4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value, index, array) { txt = txt + item + “<br>”; } Try it Yourself » Note that the function takes 3 arguments: The item value The item index […]
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() { […]
In JavaScript you cannot use these reserved words as variables, labels, or function names: abstract arguments await* boolean break byte case catch char class* const continue debugger default delete do double else enum* eval export* extends* false final finally float for function goto if implements import* in instanceof int interface let* long native new null […]
Avoid global variables, avoid new, avoid ==, avoid eval() Avoid Global Variables Minimize the use of global variables. This includes all data types, objects, and functions. Global variables and functions can be overwritten by other scripts. Use local variables instead, and learn how to use closures. Always Declare Local Variables All variables used in a function […]
“use strict”; Defines that JavaScript code should be executed in “strict mode”. The “use strict” Directive The “use strict” directive is new in JavaScript 1.8.5 (ECMAScript version 5). It is not a statement, but a literal expression, ignored by earlier versions of JavaScript. The purpose of “use strict” is to indicate that the code should be […]
Hoisting is JavaScript’s default behavior of moving declarations to the top. JavaScript Declarations are Hoisted In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared. Example 1 gives the same result as Example 2: Example 1 x = 5; // Assign 5 to x […]
