with "Visual QuickStart Guide javascript and Ajax for the Web, Sixth Edition"
Chapter 2. Start Me Up!
Scripts can be put in one of two places on an HTML page: between the <head> and </head> tags (called a header script), or between the <body> and </body> tags (a body script).
<script language="javascript" type="text/javascript">
document.write("Hello, world!");
</script>
internal scripts
external script, a separate file that just contains javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My second script</title>
<script language="javascript" type="text/javascript" src="script02.js">
</script>
</head>
<body bgcolor="#FFFFFF">
<h1 id="helloMessage">
</h1>
</body>
</html>
script02.js:
window.onload = writeMessage;
// Do this when page finishes loading
/*
a function shown with parentheses means that the function is being called, right then and there. When it's without parentheses, (as it is here) we're assigning it to the event handler, to be run later when that event happens.
*/
function writeMessage() {
document.getElementById("helloMessage"). innerHTML = "Hello, world!";
}
<noscript>
<noscript>
<h2>This page requires javascript.</h2>
</noscript>
On non-javascript browsers, a message appears saying that this page requires javascript.
confirm() & alert()
if (confirm("Are you sure you want to do that?")) {
alert("You said yes");
}
else {
alert("You said no");
}
condition
(condition) ? truePart : falsePart;
like:
myNewVariable = (condition) ?
truevalue : falsevalue;
or
if (condition) {
truePart;
}
else {
falsePart;
}
prompt()
var ans = prompt("Are you sure you want to do that?","");
if (ans) {
alert("You said " + ans);
}
else {
alert("You refused to answer");
}
If a variable is created inside a function, other functions don't have access to it, as it's local to that function. If it's created outside any function, it's global, and everything has access to it.
redirect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our site</title>
<script src="script07.js" type="text/javascript" language="javascript">
</script>
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">
<a href="htmlpage.html" id="redirect"> Welcome to our site… c'mon in!</a>
</h2>
</body>
</html>
window.onload = initAll;
function initAll() {
document.getElementById("redirect"). onclick = initRedirect;
}
function initRedirect() {
window.location = "jspage.html";
return false; //The return false says to stop processing the user's click, so the href page doesn't get loaded.
}
On first glance, we might think that we could just set the onclick handler globallythat is, as the page is loadingbut we can't. There's a chance, particularly for a large and complex page, that the browser will not yet have come across that redirect id, and if that happens, javascript won't be able to assign the onclick handler. Instead, we have to wait until the page has completed loading, and that's done via onload.
action after the user clicks a link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our site</title>
<script src="script08.js" type="text/javascript" language="javascript">
</script>
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">
Hey, check out <a href="http://www.pixel.mu/" id="redirect">my cat's Web site</a>.
</h2>
</body>
</html>
window.onload = initAll;
function initAll() {
document.getElementById("redirect"). onclick = initRedirect;
}
function initRedirect() {
alert("We are not responsible for the content of pages outside our site");
window.location = this; //THIS!!!
/*The javascript keyword this allows the script to pass a value to a function, solely based on the context where the keyword is used.*/
return false;
}
document.referrer
A referrer page is the page that the user was viewing before the current page, or, in other words, the page the user came from.
function writeMessage() {
if (document.referrer != "") {
document.getElementById("referrerMsg"). innerHTML = "I hope you like this page
better than " + document.referrer;
}
}
Unobtrusive scripting: An approach to scripting Web pages using javascript, in which the behavior of the Web page is kept separate from its content, that is, the HTML is in one file, and the javascript is in another. Additionally, the term "unobtrusive scripting" is used when code is written such that visitors without javascript (or with less-capable browsers) get all the functionality of a site, just with a less-rich user experience.
And finally, this being the real world, we also know that sometimes the simplest way to hammer in a nail is to grab a rock and pound the nail into the wall. This, for instance, is why we used innerHTML back in Script 2.3, even though it's not part of the W3C DOM.
