JavaScript and CSS inHTML5 Web Development

HTML5 Multimedia Developer’s GuideChapter Two

Where does HTML fit in?

HTML is basic web page languageDoes nothing much more than lay out items on the pageNo power to crunch numbers, process data, etc.Just structures the page

What does JavaScript do?

JavaScript adds the punchCan move an item on the pageCan perform sophisticated calculationsThrough conditional statements, can make decisions and branch out to specific code

How about CSS?Like HTML, CSS does not bring processing powerInstead, it makes the page look however you might imagine it shouldCSS3 is latest standard

However, cross-browser support is still developing, so you have to test in different browsers

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)

Controlling when JS runs

Two ways to control when JavaScript code runs:

Place the JavaScript in a function, and then call that functionPlace the JavaScript in your HTML precisely where you want it to run

Code Listing 2-2

We’re going to type in this code, and then test it

Results of 2-2

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

Code Listing 2-3

We’re going to type this code, and then test it

Results of 2-3

See the difference?Why was it different?

Loops & Conditional Tests

Looping allows us to repeat sections of codeConditional Tests allow us to interact with activities in the browser, and choose specific code to run

For Loops

A for loop repeats code as long as a specific condition existsfor (i=0; i<=10; i++) {

document.write(i + ‘<br>’);}

Switch StatementsA 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;

Code Listing 2-4

We’ll type this code and see what it does

External JavaScript

So far, we’ve put all our JavaScript inside our web page using <script> tagsYou 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>