Consider for the sake of this discussion the following very simple webpage:
<!DOCTYPE html>
<html>
<head>
<title>hello, world</title>
</head>
<body>
hello, world
</body>
</html>
As the indentation in our code has suggested, there is a hierarchy to HTML. We can represent this simple webpage with the following tree:
main function. Unlike PHP, however, JavaScript is executed clientside, not serverside. The browser itself downloads and executes the JavaScript code on a webpage. This has meaningful implications for intellectual property since it's hard to protect your JavaScript source code from being seen by others.Conditions, Boolean expressions, switch statements, and loops are the same in JavaScript as they are in C and PHP. Variables have a slightly different syntax:
var s = "hello, world";
var lest you accidentally declare your variable to be global.Arrays in JavaScript are syntactically similar to arrays in PHP:
var numbers = [4, 8, 15, 16, 23, 42];
Associative arrays don't really exist in JavaScript. Instead, JavaScript has objects:
var student =
{
id: 1,
house: "Winthrop House",
name: "Zamyla Chan"
};
One special type of loop in JavaScript mimics the foreach syntax of PHP:
for (var i in array)
{
// do this with array[i]
}
i.To include JavaScript in a webpage, we use the <script> tag, as in blink.html:
<!--
blink.html
Flashes a greeting.
Computer Science 50
David J. Malan
-->
<!DOCTYPE html>
<html>
<head>
<script>
// toggles visibility of greeting
function blink()
{
var div = document.getElementById('greeting');
if (div.style.visibility == "hidden")
{
div.style.visibility = "visible";
}
else
{
div.style.visibility = "hidden";
}
}
// blink every 500ms
window.setInterval(blink, 500);
</script>
<style>
#greeting
{
font-size: 96pt;
margin: 240px;
text-align: center;
}
</style>
<title>blink</title>
</head>
<body>
<div id="greeting">
hello, world
</div>
</body>
</html>
blink.html, we resurrect the <blink> tag which was deprecated from HTML. Ignoring the <script> tag for now, we see that our HTML consists of almost nothing but a <div> with the id set to "greeting." Inside of the <script> tag, we define a function named blink. blink starts by grabbing the <div> which has id set to "greeting" using the aptly name getElementById method of the document object. It turns out that in JavaScript, there is a special global variable called document. In addition to data about the webpage, this variable has functions associated with it, one of which retrieves HTML elements according to their unique id attributes. Functions within an object we'll call methods.div variable containing a <div> element, we can change its CSS on the fly by accessing the style attribute of the object. This style attribute itself has a visibility attribute, which we know because we read the documentation. In this function, we toggle the visibility between "visible" and "hidden."window. Whereas document encapsulates the webpage, window encapsulates the whole browser window. window has a method named setInterval which will cause a function to be called regularly. In this case, we pass a pointer to the blink function to setInterval so that it will be called every 500 milliseconds. Note that to pass a pointer to the blink function, we write it as blink not blink(). The latter would actually call the function and pass its return value to setInterval.blink.html is massive hideous "hello, world" message. If we inspect this element using Chrome Developer Tools, we can see that its CSS style is actually changing every half second.If you take a look at form0.html, you can see that it's a very basic HTML form. When you click Register, you get a simple dump of the data you entered. However, there's no validation done on your inputs. In form1.html, we add a bit of JavaScript which prevents the user from submitting the form if he or she hasn't filled out all the fields:
<!--
form1.html
A form with client-side validation.
David J. Malan
malan@harvard.edu
-->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// onready
$(document).ready(function() {
// onsubmit
$('#registration').submit(function() {
// validate email
if ($('#registration input[name=email]').val() == '')
{
alert('You must provide your email address!');
return false;
}
// validate password
else if ($('#registration input[name=password]').val() == '')
{
alert('You must provide a password!');
return false;
}
// validate confirmation
else if ($('#registration input[name=password]').val() != $('#registration input[name=confirmation]').val())
{
alert('Passwords do not match!');
return false;
}
// validate agreement
else if (!$('#registration input[name=agreement]').is(':checked'))
{
alert('You must agree to the terms and conditions!');
return false;
}
// valid!
return true;
});
});
</script>
<title>form1</title>
</head>
<body>
<form action="dump.php" method="get" id="registration">
Email: <input name="email" type="text"/>
<br/>
Password: <input name="password" type="password"/>
<br/>
Password (again): <input name="confirmation" type="password"/>
<br/>
I agree to the terms and conditions: <input name="agreement" type="checkbox"/>
<br/><br/>
<input type="submit" value="Register"/>
</form>
</body>
</html>
<script> tag here actually includes some JavaScript from a library called jQuery. Much like the CS50 Library provided a convenience layer on top of C, jQuery provides a convenience layer on top of JavaScript. In jQuery, there's a special global function named $. When you pass to this function the document object, it returns to you a special version of that object with several additional methods. One such method is named ready, which takes as input a function that should be automatically called whenever the webpage has finished loading. The function we pass to ready in the above is an anonymous function, a function that has no name. Anonymous functions are useful when we only need to call a function once.$ jQuery function. The $ function can also retrieve HTML elements by their id attribute, just as getElementById did. Because the element with id of "registration" happens to be a form, it has a submit method (thanks for jQuery) which takes as input a function that should be called when the form is submitted. Here again we pass an anonymous function.<input> with name of "email" within the HTML element with id of "registration." Once we have this HTML element, we call its val method to get its value. If this value is the empty string, then the user has inputted nothing for the e-mail field. In a similar fashion, we go on to check that the first password field is not empty and that the first password field and the second password field have the same value. Finally, we verify that the checkbox has been checked.onsubmit event, there are a number of other browser events that you can use to trigger actions. Gmail, for example, most likely uses the onkeydown and onkeyup events to implement keyboard shortcuts. We've only just scratched the surface of what JavaScript is capable of!