HTML for 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 Inline List items div, p, h1, ul, ol 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> A div element is used to hold the map image and the two lines of text beneath it.

A nested div holds two lines of text. <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> A nested div holds two lines of text.

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> ... Another div contains the message area and the sector buttons.

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

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

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