HTMLfor JavaScript

Web ApplicationsCS3550

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

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

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.

<div id="controlDiv"><div id=“msgDiv">Scanning for security reports...</div><div><span style="...">SECTOR I</span>...</div></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></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.

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

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

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