Chapter 4. Diving a Bit Deeper

In most of the JavaScript programs, which we learned so far, the lines of code were executed in the same order in which they appeared in the program. Each code was executed only once. Thus, the code did not include tests to determine if the conditions were true or false or we did not perform any logical statements.

In this chapter, you are going to learn some logical programming. You will learn about the following topics:

  • Loops
  • If statement
  • Switch case

You already know how to embed JavaScript codes on an HTML document. Before starting this chapter, you will learn a few HTML tags and JavaScript methods. These methods and tags will be used throughout the book.

Note

In object-oriented programming, we don't directly perform any operations on the data from outside an object; we ask an object to perform the operation by passing one or multiple parameters. This task is called an object's method.

JavaScript methods

In the previous chapters, you learned how to print something using document.write(). Now, you will learn something more.

We will check the methods on both console and HTML document, as follows:

  • To show an alert or a pop-up box using JavaScript, we use the following method:
    alert("Hello World");

    Type this on the console and press Enter, you will see a pop-up box saying Hello World:

    JavaScript methods

    You can write your code to show a pop-up box similar to the following on an HTML document:

    <html>
  <head>
    <title>Alert</title>
  </head>
  <body>
    <script type="text/javascript">
      alert("Hello World");

    </script>
  </body>
</html>

    The output will be as follows:

    JavaScript methods
  • If you want to take information from users, you need to use a prompt box to do this. Consider the following for example:
    • You want to take input of the username and print it on the main web page.
    • You can do this using the window.prompt() method.
    • The structure of window.prompt() is similar to the following:
      window.prompt("What is your name?"); // You can type anything between the inverted commas.
    • Now, you need to store the information on a variable. You already know how to do this from the previous chapters. Type the following and press Enter:
      var name = window.prompt("what is your name?");
    • After running this code on console, you will be asked to input something on a textbox. After typing your information, you need to press the OK button. Your information is now stored in the name variable:
      JavaScript methods
    • If you want to print the variable on your web page, you can use the document.write(); method, as follows:
      document.write("Hello "+name+"!");
    • The output of these steps can been seen in the following screenshot:
      JavaScript methods
    • The codes on an HTML document will be as shown in the following:
      <html>
  <head>
    <title>Prompt</title>
  </head>
  <body>
    <script type="text/javascript">
      var name = window.prompt("What is your name?");
      document.write("Hello "+name+"!"); 
    </script>
  </body>
</html>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.189.177