JavaScript: How To?

JavaScript: How To? B. Ramamurthy

Structure – Style -- Interaction HTML provides structure CSS provides style Javascript (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 webpage Web browser Firefox, Safari .css file .html file displays interprets image and audio files .js Prepare/edit files

JavaScript: How To?