JavaScript Basic Statements

1. Introduction

2. Generating output

        There are certain times that you need to generate output based on your JavaScript code. For example, you convert the value of temperature from Celsius to Fahrenheit and let the user see the result. There are several ways you can use to generate output from your code.

2.1. Output to browser's console

          In debugging your codes, it is better to use the console.log() method. In this method, the output is not directly viewed in the browser. Instead, you need to right-click your browser and select “Inspect” or “Inspect Element” in some browser. This will open the developer tools Click the “Console” tab. In that tab, you will be able to check on your output. Take note that this tab will also display the errors that your code might encounter.

Sample Code:

Output:

2.2. Output in the Alert Dialog Boxes

          You can display your output into an alert box. In order to do it, you need to use the alert() method.

Sample Code:

          The code above will result in an alert dialog box that will appear twice. The first alert box will display the text “Hello World!” while the second one will display “30”.

          Some developers might write the keyword window.alert() in implementing this output statement. However, specifying the window keyword is optional. In JavaScript, the window object is a global scope object. With this, variables, properties, and methods are part of the window object by default.

          Take note that when you want to display line breaks in a popup box or alert dialog box, use a backslash followed by the character n (\n).

2.3. Output to the Browser Window

          The most convenient output statement to use when testing your code is the document.write().  The output is displayed in the current document.

Sample Code:

          If the method document.write() is used after the page has been loaded, it will overwrite all the existing content in that document. If you try the sample code below, you will notice that it displays the content of h1 and p. It also has a button with a label “Click me”. Once you click the button, it refreshes the page and overwrites its display with the text “Hello World!”.

Sample Code:

2.4. Inserting Output Inside an HTML Element

          You can display your output using an HTML element. In order to do this, you must first select the HTML element. Accessing the HTML element requires you to use the method, document.getElementById(id). The id attribute will define which HTML element is used to display your output. Inserting the output will need the .innerHTML property. Here is the code to properly use this output statement:

This can also be written in a shorter form:

Take note that this method is case sensitive. Thus, make sure that the correct case for each keyword is used.

Sample Code:

          In the example given above, the “Hello World!” is displayed within the element p with id=”greet”. Basically, the .innerHTML replaces the existing content of the element. This method is used to write a dynamic html on the html document. It is usually used in registration forms, comment forms and links where you can create html form when a user clicks on a button.

          The location of the <script> is also important. If the <script> is placed before the selected element to be used, there will be no effect on the page. That is because the element that the script is trying to get has not been rendered on the browser, hence, the error would be, the object does not exist yet.

3. Getting Input

Using a Prompt Box

          There are some web pages that would require you to input a value first before entering their page. They are using prompt boxes for that. When this popup box appears, the user needs to click either “OK” or “Cancel” in order to proceed. Once, the user clicks “OK”, it returns the value which the user had entered. On the other hand, if it is cancelled, it returns null. The prompt() method can be used with or without the window keyword.

Sample Code:

          In the sample code above, notice that there are two parameters of the prompt() method. The first one is for the text to be displayed while the second one is the default value of the text box. The values taken from the prompt() method are stored as strings. Thus, in order to convert strings to an integer value, we use the method parseInt(). Without the parseInt() method, the result of the sum would be the concatenation of x and y instead of the sum of x and y.

Note: Other JS functions that convert strings to numeric data type are parseFloat() and Number(). Try to experiment with these two functions to see their differences.

3.1. Using a Confirm Box

          A confirm box is usually used when a user wants to check or approve something. Confirm box will pop up in the user’s browser and allow them to select between “OK” or “Cancel” in order to continue. If an “OK” is selected, the box will return true while if “Cancel” is selected, it will return false.

          In the sample code given, a button is created. This button will perform a certain action once clicked. As you can see in the script, a function is added. This function will be executed with the button being clicked. Inside the function, a conditional statement (if-else) is added. The condition in the if statement requires the user to press a button from the confirm box. If the user presses the ‘OK’ button, the condition will return true and execute whatever is inside the if statement. However, if ‘Cancel’ is pressed, the condition is false and will execute the code inside the else statement. More details on how this conditional statement works will be discussed in the succeeding topic.

4. Summary and References

In summary,

References