html for javascript web applications
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/1.jpg)
HTMLfor JavaScript
Web ApplicationsCS3550
Dr. Brian Durney
![Page 2: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/2.jpg)
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
![Page 3: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/3.jpg)
Kinds of HTML elements
Block› div, p, h1, ul, ol
Inline› span, a, b
List items› li
![Page 4: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/4.jpg)
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
![Page 5: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/5.jpg)
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>
![Page 6: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/6.jpg)
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>
![Page 7: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/7.jpg)
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>
![Page 8: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/8.jpg)
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 9: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/9.jpg)
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.
![Page 10: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/10.jpg)
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
![Page 11: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/11.jpg)
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>
![Page 12: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/12.jpg)
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>
![Page 13: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/13.jpg)
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>
![Page 14: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/14.jpg)
id attributes
Used to identify elements for use in HTML forms, CSS (styles), and JavaScript
![Page 15: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/15.jpg)
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>
![Page 16: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/16.jpg)
<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.
![Page 17: HTML for JavaScript Web Applications](https://reader033.vdocument.in/reader033/viewer/2022052401/56812ba1550346895d8fce24/html5/thumbnails/17.jpg)
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.