Writing Your First Javascript Program - Quick Start
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>First Javascript Program</title>
<style>
#touchTarget{
background-color: #990000;
color: white;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function () {
document.getElementById('touchTarget').addEventListener('click', respond);
}
function respond(e) {
//alert("You clicked me!");
document.getElementById('touchTarget').style.display = "none";
}
</script>
</head>
<body>
<div id="touchTarget"><h1>Touch me!</h1></div>
</body>
</html>
Top
Index
Where to Put Javascript Code
Javascript is about interaction while HTML is about structure
inline Javascript is a bad practice
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>The quick brown fox jumped over the lazy dogs</h1>
<button onclick="alert('Thanks for clicking');">Click Me</button>
</body>
</html>
can put Javascript between script tags
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById('myButton').addEventListener('click', respond);
}
function respond(e) {
alert('thanks for clicking');
}
</script>
</head>
<body>
<h1>The quick brown fox jumped over the lazy dogs</h1>
<button id="myButton">Click Me</button>
</body>
</html>
recommended : can put script in separate file
window.onload = function () {
document.getElementById('myButton').addEventListener('click', respond);
}
function respond(e) {
alert('thanks for clicking');
}
HTML using separate js file
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="where.js"></script>
</head>
<body>
<h1>The quick brown fox jumped over the lazy dogs</h1>
<button id="myButton">Click Me</button>
</body>
</html>
The window.onload Function
the code below does not work because the getElementById function runs before the
button is drawn
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>window.onload function</title>
<script>
document.getElementById('myButton').addEventListener('click', respond);
function respond(e) {
alert("Hi! You pressed me");
}
</script>
</head>
<body>
<button id="myButton">PressMe</button>
</body>
</html>
the code below does work because the getElementById runs after the button is drawn
co-mingling the interaction and structure is not a preferred way of doing things
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>window.onload function</title>
<script>
function respond(e) {
alert("Hi! You pressed me");
}
</script>
</head>
<body>
<button id="myButton">PressMe</button>
<script>
document.getElementById('myButton').addEventListener('click', respond);
</script>
</body>
</html>
using the window.onload function avoids both the race condition and the co-mingling
of interaction and structure
the anonymous function isn't called until after the page is drawn
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>window.onload function</title>
<script>
window.onload = function () {
document.getElementById('myButton').addEventListener('click', respond);
}
function respond(e) {
alert("Hi! You pressed me");
}
</script>
</head>
<body>
<button id="myButton">PressMe</button>
</body>
</html>
window is an object within the DOM
using Chrome as a browser F12 will open developer tools
the console tab will display what the code below writes
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Console</title>
<script>
var clicks = 0;
window.onload = function () {
console.log("window.onload ... run");
document.getElementById('myButton').addEventListener('click', respond);
}
function respond(e) {
clicks++;
console.log("button clicked " + clicks + " times");
}
</script>
</head>
<body>
<button id="myButton">Press Me</button>
</body>
</html>
use Javascript to replace or append content
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Output to the Browser</title>
<script>
var clicks = 0;
window.onload = function () {
document.getElementById('myButton').addEventListener('click', respond);
}
function respond(e) {
document.getElementById('one').innerHTML = "<h1>Hello World!</h1>";
document.getElementById('two').innerHTML += " : Javascript course";
}
</script>
</head>
<body>
<div id="one">This is div 'one'</div>
<div id="two">This is div 'two'</div>
<button id="myButton">Click Me</button>
</body>
</html>
Understanding getElementById()
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>getElementById</title>
<script>
window.onload = function () {
document.getElementById('content').addEventListener('click', respond);
document.getElementById('one').addEventListener('click', respondOne);
document.getElementById('two').addEventListener('click', respondTwo);
}
function respond(e) {
console.log("content div was clicked");
document.getElementById('content').style.color = "yellow";
}
function respondOne(e) {
console.log("p one was clicked");
document.getElementById('one').style.color = "blue";
}
function respondTwo(e) {
console.log("p two was clicked");
document.getElementById('two').style.color = "red";
}
</script>
</head>
<body>
<div id="content">
Hello World!
<p id="one">This is sentence one.</p>
<p id="two">This is sentence two.</p>
</div>
</body>
</html>
Top
Index