Lesson 02: Introduction to 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:

JavaScript File: Exercise.js

document.body.innerHTML = "Absence of evidence is not evidence of absence.";

Webpage: Exercise.htm

<!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

To select an element from a webpage, JavaScript provides the following formula:

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

To programmatically recognize a webpage, the JavaScript launguage provides an object named document. This object holds a list of all the items on the webpage. When you create a webpage, you may need a webform to interact with your visitors, in which case you would position some webcontrols on that form. As mentioned in the first lesson, you can give a name to each control. There are various ways you can access each control from your JavaScript code. One way is to use the following formula:

document.form-name.control-name.value

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

Overview

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

Close your programming environment


Previous	Copyright © 2001-2019, FunctionX	Next