JavaScript: How To?

Preview:

DESCRIPTION

JavaScript: How To?. B. Ramamurthy. Structure – Style -- Interaction. HTML provides structure CSS provides style Javascript (script) provides control for interaction and operations. Simple JS. My first JavaScript - PowerPoint PPT Presentation

Citation preview

B. RAMAMURTHY

JavaScript: How To?

Structure – Style -- Interaction

HTML provides structureCSS provides styleJavascript (script) provides control for

interaction and operations

Simple JS

<!DOCTYPE html><html><head> <title> My first JavaScript </title></head><body>

<h1> <script>document.write(“Hello, World!”);</script>

</h1></body></html>

JS functions

A function consists of function followed by the name of the function

The statement that make up the function go next within curly brackets

Example:function saySomething() {

alert(“ We are getting ready for the exam 1”);}

Moving JS to an external file

Similar to how we separated style elements in css file, behavioral elements can be moved to an external js file.

HTML with External File JS

<!DOCTYPE html><html><head> <title> My second JavaScript </title> <script src=“script2.js”></script></head><body>

<h1 id=“helloMessage”>

</h1></body></html>

JS file

window.onload = writeMessage; function writeMessage(){ document.getElementById(helloMessage).innerHTML = “Hello, World!”;

}

Basic Elements of a web page

.html file

.cssfile

image and

audio files

Web browserFirefox, Safari

webpage

Prepare/edit files

interprets displays

.js

Recommended