Introduction to Accessing the Values of a Web Page
Getting or Selection an HTML Element
Getting an Element
To create a webpage, the primary language you use is HTML. It is made of various tags such as <body>, <p>, <td>, <li>, etc.
Getting the HTML Contents of an Element
Most, but not all, HTML elements get or request some value (text, number, etc) from the visitor. In this case, the user may have to type text in a text box or make a selection from an object. To get the text that an element holds, you can use the following formula:
expression = document.element-access.innerHTML;
The expression can be a variable in which you will store the value. It can also be a type of expression that will receive the value. The document. and .innerHTML; expressions are required (in later lessons, we will find out what they actually are). the element-access specifies the way you access an HTML element. We will explore this aspect in later sections.
Setting the HTML Contents of an Element
Many, but not all, HTML elements may display some value (number, text, etc) in a webpage. To provide a value to an element in a webpage, you can use the following formula:
document.element-access.innerHTML = expression;
Setting the Text Contents of an Element
The alternative to .innerHTML is .textContent. The formula to follow is:
document.element-access.textContent = expression;
Accessing the Body of a Webpage
To access the <body> tag of a webpage, type document.body. This is followed by the .innerHTML that we saw earlier. For example, to display a value in a webpage. You can assign a value to that expression. Here is an example:
document.body.innerHTML = "Absence of evidence is not evidence of absence.";
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Aphorism</title> </head> <body> <script src="Scripts/Exercise.js"></script> </body> </html>
Selecting an Element by Querying
expression = document.querySelector(selection);
As seen previously, the expression can be a variable to store a value or some type of expression that will receive the value. The document.querySelector() is required. In the parentheses of document.querySelector(), you will provide a way to select an element.
Techniques of Selecting an HTML Element
Selecting an Element by its Tag
To select some elements in a webpage using a tag name, pass the tag name in the prentheses of document.querySelector(). The tag name must be included in single or double-quotes. You can assign the expression to a variable. Here is an example:
var paragraph = document.querySelector("p");
You can then apply .innerHTML to the variable and possibly assign a value. Here is an example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Aphorism</title> </head> <body> <h1>Social Science Studies</h1> <h2>Aphorism</h2> <p>This concept can be applied in:</p> <ul> <li>Law Studies</li> <li>Anthropolgy</li> <li>Data Analysis</li> </ul> <p>Conclusion</p> <script> var paragraph = document.querySelector("p"); paragraph.innerHTML = "Absence of evidence is not evidence of absence."; </script> </body> </html>
The Value of a Web Control
In this case, start with document. and and and with .value. Between them, enter the name you had given to the form and the name of the desired control with a period between them. An example would be document.EmploymentApplication.firstName.value. You can then assign that expression to a variable. Here are examples:
<!DOCTYPE html> <html> <head> <title>Exercise</title> </head> <body> <form name="EmploymentApplication"> <table> <tr> <td>First Name:</td> <td><input type="text" name="firstName" /></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" /></td> </tr> </table> </form> <script> var fName = document.EmploymentApplication.firstName.value; var lName = document.EmploymentApplication.lastName.value; </script> </body> </html>
Introduction to HTML Events
An event is something that occurs to an object on a webpage. An example is that a user moves the mouse on a piece of text, clicks something on the screen, or types with the keyboard. The object on which the event occurs is said to fire the event.
HTML supports various type of events. Some events can be fired by any HTML tag and some events are made for some particular tags or some specific situations. Each event has a name.
One of the ways you use an event is to apply it to the desired tag in your webpage. The event is applied by adding its attribute to the tag. To specify what will happen when the object fires the event, you must assign something to the attribute. This would be done as follows:
<!DOCTYPE html> <html> <head> <title>Exercise</title> </head> <body> <form name="EmploymentApplication"> <p><input type="button" name="btnCreateName" value="Create Full Name" someEvent="" /></p> </form> </body> </html>
The Click Event
When a user clicks an object, such as a piece of text, a section of a web, or a button, the item fires an event named onclick. To use it, add it as attribute to the desired tag.
Practical Learning: Ending the Lesson
|Previous||Copyright © 2001-2019, FunctionX||Next|