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 Web browser Firefox, Safari .html file .css file displays interprets image and audio files .js Prepare/edit files