HTML for JavaScript Web Applications
-
Upload
amethyst-reid -
Category
Documents
-
view
43 -
download
2
description
Transcript of HTML for JavaScript Web Applications
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.