Get updates

Scott Learn to Program with JavaScript: Instant Feedback

Last time, with part one of this Learn to Program with JavaScript series, I introduced some basic HTML with an interactive tutorial. As JavaScript works very nicely inside a web page, this gave us the foundation. Now it’s time to add actual JavaScript on top.

Just like other aspects of an HTML page, JavaScript goes into a specific tag. The <script> tag, to be precise. Try out the first example to see our own version of “hello world” in JavaScript:

Example 1:

Note that the opening tag has attributes, type=”text/javascript” language=”javascript”, before the >. Many HTML tags can use various attributes, and all attributes take this format, the name of the attribute, an equal sign, and the value in quotes. For now don’t worry too much about them, as long as you copy this same format everything should work out fine.

Between the opening tag <script> and the closing tag </script> lies our actual JavaScript code. In this example we have a single line of JavaScript:

alert('Hello from JavaScript!');

As soon as this code is loaded, the browser reads this line and immediately interprets it as a command. The alert command tells the browser to throw an alert (dialog box) displaying the data inside the parentheses. When the page loads, a dialog box immediately pops up with the text ‘Hello from JavaScript!’ (minus the single quotes), along with an OK button to dismiss the dialog.

Alerts are useful for giving direct and immediate feedback that is difficult to ignore. In fact it’s almost impossible to ignore as the user must click OK before it goes away and they are allowed to access the page again.

However, on a note about design, alerts are not very user-friendly, precisely for the reason above. I recommend them primarily as programming tools for simple debugging and not something to make heavy use of where end users will be have to deal with them.

What else are alerts good for? Well, aside from a simple line of text (also known as a string, as in a string of characters), alerts can display numbers and just about any other JavaScript value.

In this next example an alert displays the answer to a simple math problem:

Example 2:

Notice this time the code does not use single quotes around the numbers. If you change the code and add single quotes then it gets treated as straight text and not a math operation. Go ahead, try changing the line to look like this:

alert('2 + 3');

The resulting alert message should display 2 + 3, instead of what happened without the quotes when the numbers were added together and displayed as 5.

Now that you’ve made it this far, you have seen how simple it is to include JavaScript in a web page and have it run. These example sets of code can be copied to a text editor like Notepad, saved as .html files, and opened in your browser to run.

One Response to “Learn to Program with JavaScript: Instant Feedback”

  1. gaurav Says:

    i want a simple program in html using java scritpting (add,sub,mul,div)

Leave a Reply