Web Page: JavaScript Tutorial
Web Page: JavaScript Syntax
604
Understanding the Basics
of JavaScript
JavaScript is one of the more popular programming languages on the Web. It is an “object-oriented” language, applying actions (such as functions) to objects (such as images, paragraphs, and forms).
Example 1: In this case, “document” (the HTML page) is the object, and “write()” is the action.
<html>
<body>
<script>
document.write("<p>My name is Courtney Stoddard.</p>");
</script>
</body>
</html>
Example 2: JavaScript often uses variables to assign values to a statement.
<html>
<head>
<script>
var firstName="Courtney";
var lastName="Stoddard";
</script>
</head>
<body>
<script>
document.write("<p>My name is "+firstName+" "+lastName+".</p>");
</script>
</body>
</html>
Save each of the above code examples as HTML files and open them with your web browser. The output is the same: My name is Courtney Stoddard.
Example 3: Variables are most useful when the person viewing the page can set the value, using a form. Here, the onClick action calls the popUpName(); function, which inserts the current values of firstName and lastName into an alert() message.
<html>
<head>
<script>
function popUpName() {
var firstName=document.nameForm.myFirstName.value;
var lastName=document.nameForm.myLastName.value;
alert("My name is "+firstName+" "+lastName+".");
}
</script>
</head>
<body>
<form name="nameForm">
<p>First name: <input type="text" name="myFirstName"></p>
<p>Last name: <input type="text" name="myLastName"></p>
<p><input type="submit" onClick="popUpName();">
</form>
</body>
</html>
605
JavaScript Syntax
Viewing the sample code on the previous page, you’ll notice a few important features of JavaScript syntax:
- <script> </script> tags surround JavaScript code in most cases. (Like CSS, a few JavaScript statements can be included inline.) Generally, JavaScript is placed in the page head (to load into the browser before the page displays).
- A semicolon signals the end of a JavaScript declaration.
- Identifiers are functions, variables, and label names (e.g., popUpName(), firstName, and myFirstName on the previous page).
- New functions and variables must be specifically declared and defined. (Some functions, such as write() and alert() are prebuilt into JavaScript.)
- Case sensitivity means that myName and myname and MyName are all different entities. Common practice is to begin with a lowercase letter and capitalize the first letter of embedded words (e.g., myLastName).
- Curly braces {} surround the content of new functions.
- Straight quotation marks indicate text “strings.” These may be single (ˈ) or double (").
- Some keywords (such as if, else, true, and false) are reserved for special use.
- Many operators have predefined roles in JavaScript. (On the previous page, + is used to “concatenate,” or link together, strings and variables. A . can also concatenate, while a + can add numbers, a – subtract them, a / divide them, a * multiply them, and so on.)
Common Uses of JavaScript
The main purpose of client-side JavaScript is to reduce the number of times a browser must connect to a server. This reduces Web traffic while improving the user’s experience. JavaScript is also commonly used to complete the following actions:
- Deliver specific formatting. JavaScript is often employed to read your browser and computer and choose the most suitable format, such as for a smartphone.
- Check form elements, ensuring that nothing essential is left blank, making calculations, and so on.
- Swap images in menus, buttons, and games. If you point your mouse cursor at an image, and that image changes, chances are JavaScript did the work.
- Autocomplete search boxes, making suggestions for keywords as you type.
Your Turn Starting with the code at the bottom of page 604, create a page with an alert message that includes both name and age. You’ll need to add a third <input> tag to the form, declare a third variable to read it, and add new text in the function’s alert box.