HTML for JavaScript Web Applications

HTMLfor JavaScript Web Applications CS3550 Dr. Brian Durney

Example web app • This presentation refers to the game Rigel Station: Security Alert as a sample web application. • You can find the game at: http://universe.tc.uvu.edu/Game/RSSA/index.html

Kinds of HTML elements • Block • div, p, h1, ul, ol • Inline • span, a, b • List items • li

div elements • Block elements • Often used to organize a web page • Can contain other block elements: paragraphs, headings, lists, and nested divs • Can be used to easily apply formatting to multiple elements

<div id="mapDiv"> <img id="mapImg" src="sectorMap450.png"> <br> <div style="font-size: 140%"> Security rating: <span id="scoreSpan"> 0 </span> <br> Time: <span id="timeSpan"> 0:00 </span> </div> </div> A div element is used to hold the map image and the two lines of text beneath it.

<div id="mapDiv"> <img id="mapImg" src="sectorMap450.png"> <br> <div style="font-size: 140%"> Security rating: <span id="scoreSpan"> 0 </span> <br> Time: <span id="timeSpan"> 0:00 </span> </div> </div> A nested div holds two lines of text.

<div id="controlDiv"> <div id=“msgDiv"> Scanning for security reports... </div> <div> <span style="..."> SECTOR I </span> ... </div> </div> Another div contains the message area and the sector buttons.

<div id="controlDiv"> <div id=“msgDiv"> Scanning for security reports... </div> <div> <span style="..."> SECTOR I </span> ... </div> </div> Two other divs are nested inside the right-hand side div.

Page organization • Using a table instead of divs would make it much more difficult to achieve the desired layout. • Tables are less flexible than divs and should only be used when a grid layout is appropriate.

span elements • Inline elements • Used to apply a style to part of a text element • Also used to make part of an HTML text element accessible to JavaScript

<div id="mapDiv"> <img id="mapImg" src="sectorMap450.png"> <br> <div style="font-size: 140%"> Security rating: <span id="scoreSpan"> 0 </span> <br> Time: <span id="timeSpan"> 0:00 </span> </div> </div> These two span elements are used to display the score and the time.

<div id="mapDiv"> <img id="mapImg" src="sectorMap450.png"> <br> <div style="font-size: 140%"> Security rating: <span id="scoreSpan"> 0 </span> <br> Time: <span id="timeSpan"> 0:00 </span> </div> </div> When the game starts, the score (“security rating”) is 0 and the time is 0:00.

<div id="mapDiv"> <img id="mapImg" src="sectorMap450.png"> <br> <div style="font-size: 140%"> Security rating: <span id="scoreSpan"> 0 </span> <br> Time: <span id="timeSpan"> 0:00 </span> </div> </div> As the game progresses, JavaScript code updates the values of the score and the time.

id attributes • Used to identify elements for use in HTML forms, CSS (styles), and JavaScript

<div id="mapDiv"> <img id="mapImg" src="sectorMap450.png"> <br> <div style="font-size: 140%"> Security rating: <span id="scoreSpan"> 0 </span> <br> Time: <span id="timeSpan"> 0:00 </span> </div> </div> Note the id attributes in the spans for the score and the time.

<div id="mapDiv"> <img id="mapImg" src="sectorMap450.png"> <br> <div style="font-size: 140%"> Security rating: <span id="scoreSpan"> 0 </span> <br> Time: <span id="timeSpan"> 0:00 </span> </div> </div> These id attributes allow JavaScript code to easily access these span elements.

Summary • Divs are block elements used to organize a page and allow easy formatting of multiple elements. • Spans are inline elements. • Adding id attributes makes it easier to access divs, spans, and other HTML elements from JavaScript.

HTML for JavaScript Web Applications