Hello and welcome to HTML Scripting.

After watching this video, you will be able to describe

how scripting is enabled in browsers. Scripting is enabled for a browser context, when the
conditions shown on the slide are true. Scripting is used to provide a more interactive user
experience when browsing websites. Since scripting can be turned off, the recommendation is
to use scripting but not to rely on it. HTML5 also defines a text or html-sandboxed media type
for documents. This attribute can be used when hosting untrusted content. The sandboxed
browsing context can be set at the page level or specified as an attribute on any tag that
contains an embedded object. If you are running a page with an embedded object without the
sandbox attribute, you are implicitly giving a third-party vendor permission to run scripts with the
same permissions that you have for the page. Granting the embedded object the same
permissions as the rest of your page is one way that you can inadvertently allow advertisements
to occur in your application. To prevent granting implicit permission to embedded objects, use
the sandbox attribute on any tag that contains an embedded object. Each HTML document that
is loaded into a browser page becomes a Document object. The Document object provides
access to all HTML elements in a page and can be accessed from within a script. The DOM tree
accessors are HTML document APIs that provide access to all the HTML elements on a page.
The property to access is prefixed by the word document. For example, document.head returns
the first head element that is a child of the html element, if there is one, otherwise null. The
function document.images returns an HTMLCollection of the image elements in the document.
The function document.scripts returns an HTMLCollection of the script elements in the
document. Here are some common HTML DOM tree methods: The document.getElementBy Id
(„id‟) function has one required parameter which is the id of the element you want to access. The
id is specified as an attribute on one of the elements that is coded elsewhere on the page. The
document.getElementsByTagName(„tag‟) function has one required parameter which is the tag
name of the element you want to access. This function returns a node list of all the elements
with the tag that matches the required parameter. This is a fragment of HTML with JavaScript
code that uses the document API. When submit is clicked inside the page that is running in a
web browser, the textChecker function begins. The document.getElementById(„textField1‟)
retrieves the contents of what was typed into the input field that has the id of textField1 and
places this content into a variable. The JavaScript logic then tests whether any data was typed
into the field, and an alert dialog is displayed with the result. A similar function will be used later
in Exercise 1. Here is the output from running the code on the previous page that uses the
document API. The user types “Test” in the input field and clicks Submit. The result is seen in
an alert dialog box on the same page. In this video, you learned: Scripting is used to provide a
more interactive user experience when browsing websites. Since scripting can be turned off, the
recommendation is to use scripting but not to rely on it. Scripting is enabled when certain
browser conditions are met. HTML5 sandboxes enable you to manage iframe mash-ups; web
pages that pull content from more than one site. HTML documents loaded into a browser page
become Document objects, which you can access through scripts.