HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)
19 - Building Interactive Applications
HTML5 and CSS3 are awesome for creating beautiful websites.
However, today’s users want an interactive Web experience.
Interactivity allows a user to take an action and receive a response.
Implementing interactivity requires a programming language, such as JavaScript.
JavaScript is a loosely-typed scripting language that is interpreted by a browser. It changes how elements in an HTML document act and respond to user input.
We create scripts with JavaScript. Scripts are step-by-step instructions that tell a browser how to respond to events, such as a user clicking a button. The file extension for a script is .js .
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>My First JavaScript</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.
</button>
<p id="demo"></p>
</body>
</html>
If the JavaScript program doesn’t display, you need to enable JavaScript in your Web browser’s preference settings. In Internet Explorer 9, for example, select Tools > Internet options. In the Internet Options dialog box, click the Security tab. Click the Custom level or Default level button, whichever is available. In the Security Settings dialog box, scroll down to the Scripting. Click the Enable radio button under Active scripting, and then click OK twice to close the dialog boxes. Try opening the file again in your Web browser to run the JavaScript program.
What JavaScript can do
1. JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript":
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
JavaScript accepts both double and single quotes!
2. JavaScript Can Change HTML Attributes
This example changes an HTML image by changing the src (source) attribute of an <img> tag:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
3. JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
4. JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
5. JavaScript Can Show HTML Elements
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
We can connect JavaScript to HTML documents in a couple of ways:
- Embedding it with the <script> tag
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
- Linking a separate JavaScript file to the HTML document
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="myScript.js"></script>
</head>
<body>
</body>
</html>