1. JavaScript and CSS in
HTML5 Web Development
HTML5 Multimedia Developer’s Guide
Chapter Two

2. Where does HTML fit in?
HTML is basic web page language
Does nothing much more than lay out
items on the page
No power to crunch numbers, process
data, etc.
Just structures the page

3. What does JavaScript do?
JavaScript adds the punch
Can move an item on the page
Can perform sophisticated
calculations
Through conditional statements, can
make decisions and branch out to
specific code

4. How about CSS?
Like HTML, CSS does not bring
processing power
Instead, it makes the page look however
you might imagine it should
CSS3 is latest standard
However, cross-browser support is still
developing, so you have to test in
different browsers

5. How does JavaScript run?
When page is served, activity is “First come,
first served”
Browser renders top-to-bottom, left-to-
right
When JS is in-line, it is run as the browser
encounters it. (This could be good or bad)

6. Controlling when JS runs
Two ways to control when JavaScript code
runs:
Place the JavaScript in a function, and
then call that function
Place the JavaScript in your HTML
precisely where you want it to run

7. Code Listing 2-2
We’re going to type in this code, and then
test it

8. Results of 2-2
Why doesn’t “This is the content of div 1”
appear blue and bold?
How could we fix this?

9. Code Listing 2-3
We’re going to type this code, and then test
it

10. Results of 2-3
See the difference?
Why was it different?

11. Loops & Conditional Tests
Looping allows us to repeat sections of code
Conditional Tests allow us to interact with
activities in the browser, and choose specific
code to run

12. For Loops
A for loop repeats code as long as a specific
condition exists
for (i=0; i<=10; i++) {
document.write(i + ‘<br>’);
}

13. Switch Statements
A Switch statement tests an expression that has
specific values. Code is executed depending on
which value is returned.
var d= new Date();
switch (d.getDay().toString()) {
case “0”:
document.write(‘<br><br>Today is Sunday’);
break;

14. Code Listing 2-4
We’ll type this code and see what it does

15. External JavaScript
So far, we’ve put all our JavaScript inside our web
page using <script> tags
You can also put your JavaScript in an external file,
and link to it from the web page
This is useful if the same JavaScript file is used
by more than 1 web page
<script src=”js/common.js”></script>