JavaScript in Action
In this chapter, you get your first opportunity to write JavaScript! This chapter introduces you to JavaScript properly. In addition, this chapter is a big hands-on chapter in which you really start to learn the fundamentals of JavaScript ... by example!
This chapter teaches you about the following:
Some of the fundamentals of JavaScript, such as syntax, layout, commenting code, and so on
Some of the terminology of JavaScript and also why it is known as an object-oriented language
How to practice reading and writing JavaScript on a Web page
How you can use JavaScript to create inputs and outputs
Exploring JavaScript Inputs and Outputs
Not only are JavaScript inputs and outputs great for being able to write JavaScript code that will communicate two-way with the user, but exploring this area of JavaScript is also a great place to begin your journey to proficiency!
Computing is all about inputs and outputs. Data goes in and data comes out. Without inputs and outputs, nothing would happen and nothing would get done. A word processor doesn't begin to do anything until it receives input from the user (usually in the form of characters generated by keystrokes), and this then leads to an output (it is outputted onto the screen and subsequently to paper or electronically).
Note - This chapter uses many small examples of JavaScript. I suggest you work through each example for yourself, actually typing out the code. The purpose of this is for you to get plenty of practice with JavaScript basics before moving on to more complex JavaScript examples.
Repetition is the key to JavaScript success.
Here, we are going to use JavaScript to control inputs and outputs in the form of various types of message boxes (guaranteed, if you've been surfing the Web for more than a few minutes, you've seen these message boxes before!).
Three types of message boxes can be conjured up using JavaScript. Figures 3.1, 3.3, and 3.5 show the Internet Explorer message boxes, whereas Figures 3.2, 3.4, and 3.6 show the message boxes of Netscape Navigator.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
Alert—This is for outputting information.
Figure 3.1
An alert box displayed by Internet Explorer.
Figure 3.2
An alert box displayed by Netscape Navigator.
Confirm—This outputs information and allows the user to input a choice in the form of a yes/no question.
Figure 3.3
A confirm box displayed by Internet Explorer.
Figure 3.4
A confirm box displayed by Netscape Navigator.
Prompt—This outputs some information and enables the user to type in a response to the output.
Figure 3.5
A prompt box displayed by Internet Explorer.
Figure 3.6
A prompt box displayed by Netscape Navigator.
Note - Why do the message boxes in Internet Explorer look so different from the message boxes in Netscape Navigator? This actually has nothing to do with JavaScript—they are different because the alert, confirm, and prompt windows are generated by the browser. These boxes are only triggered by JavaScript. Because of this, each browser adds its own uniqueness to the look.
alert(), confirm(), and prompt() are actually all methods of the browser's Window object.