HTML and CSS Reference
In-Depth Information
UI controls
In this objective, you review how to interact with webpages in the browser using code. Web
browsers include a powerful environment in which you can control the behavior of webpages.
And some new HTML5 elements provide improved interactivity for end users.
You also review how to modify the document object model dynamically, using JavaScript.
You review how to implement video and audio in webpages and how to control them pro-
grammatically. Finally, you review how to render graphics dynamically or allow users to draw
their own graphics.
This objective covers how to:
■
Add or modify HTML elements
■
Implement media controls
■
Implement graphics with HTML5 canvas and SVG
The ability to modify an HTML document at run time is very powerful. So far you've seen how
to create your webpages, lay them out elegantly, and render them for users. In many cases,
you should modify the layout of your webpages at run time depending on what your users
do. This is where you can take advantage of the power of JavaScript. JavaScript provides the
toolkit you need to write code that interacts with webpage elements after they are already
rendered into the browser. Before you can start to modify the webpage, you need to know
how to access or reference the elements so you can manipulate them.
Document Object Model
The Document Object Model (DOM) is a representation of the structure of your HTML page
that you can interact with programmatically. As demonstrated earlier, an HTML page is a
hierarchy. The browser produces an outline based on the HTML hierarchy presented to it and
displays this in the browser to the user. Behind the scenes, unknown to the user, the browser
constructs a DOM. The DOM's application programming interface (API) is exposed as objects
with properties and methods, enabling you to write JavaScript code to interact with the HTML
elements rendered to the page.
This notion is very powerful. You can add new elements to the page that didn't even ex-
ist in your original HTML page. You can modify elements to change their behavior, layout,
Search WWH ::
Custom Search