Javascript: Events

This entry is part 25 of 27 in the series Javascript Tutorial

In web development terms, an event is something that triggers a specific action in the browser.

Usually, an event occurs when a user loads a page, clicks on a button or performs some other task with the mouse or keyboard.

We have used events in some of our earlier examples.

In this JS fiddle example, a function myFunction is called when a button is clicked.  The event here is onclick in which an action occurs when a button is clicked.

Javascript: Basic HTML tags

This entry is part 7 of 27 in the series Javascript Tutorial

If you create a new html file using webstorm editor, it will create a file with the following template:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

The <!DOCTYEPE html> declaration here will let the browser know that you are using HTML 5.

For now, let’s get familiar with the following basic HTML tags.

HTML tagDescription
<p>for paragraph
<h>for heading, eg. <h1>
<div>division
<br>line break
<span>spanning

A HTML example outputs can be viewed in this fiddle.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Basic HTML Tags</title>
</head>
<body>
<h1>I am heading 1</h1>

<h2>I am heading 2</h2>

<p>I am a paragraph</p>

<div>
    <span>I am spanning within a division</span>
</div>
</body>
</html>
Try The Code

Javascript: Processing radio buttons using for loop

This entry is part 22 of 27 in the series Javascript Tutorial

In the earlier example, we have used many if else loops to process the radio buttons.

A more elegant way is to use for loop.

<!DOCTYPE html>
<html>
<head>
    <title>Form with radio buttons</title>
    <script>
        function submitForm(form) {

            var item;
            var i;
            var length;

            var radio_button = document.getElementsByName('radio_button');

            length = radio_button.length;

            for (i = 0; i < length; i++) {
                if (radio_button[i].checked) {
                    item = radio_button[i].value;
                    document.getElementById("buy_id").innerHTML = item;
                }
            }
        }
    </script>
</head>
<body>
<form>
    <p>What would you like to buy this year?</p>
    <input type="radio" name="radio_button" value="iPad" checked="checked">iPad<br>
    <input type="radio" name="radio_button" value="Camera">Camera<br>
    <input type="radio" name="radio_button" value="iPhone">iPhone<br>
    <input type="radio" name="radio_button" value="Car">Car<br>
    <input type="radio" name="radio_button" value="House">House<br>
    <input type="radio" name="radio_button" value="Aeroplane">Aeroplane<br>
    <input type="button" value="Submit" onclick="submitForm(this.form)">
</form>
<p>What I have bought</p>

<h3 id="buy_id"></h3>
</body>
</html>

 

The codes used in this example are a lot shorter and the number of lines needed in this for loop is almost equivalent to one if loop in the earlier example.

 

Javascript: First example explanations

This entry is part 5 of 27 in the series Javascript Tutorial

<!DOCTYPE html>
<html>
 <body>
 <h1>First JavaScript Program</h1>
 <p>Click the button to change the sentence</p>
 <p id="first">First Program</p>
 <button type="button" onclick="myFunction()">Try it</button>
 <script>
       function myFunction() {
       document.getElementById("first").innerHTML = "This is my first 
                Javascript program";
 }
 </script>
 </body>
</html>

button

In this example, we first look at this line:

<p id="first">First Program</p>

<p> is a HTML element denoting paragraph and it is using id=”first” to identify this paragraph.

To change the text “First Program” in this paragraph, let’s look at this:

 <script>
       function myFunction() {
       document.getElementById("first").innerHTML = "This is my first 
                Javascript program";
 }
 </script>

The

document.getElementById("first").innerHTML = "This is my first 
                Javascript program";

will change the text inside the paragraph to the new text.

 

Javacript: Integer variables

This entry is part 12 of 27 in the series Javascript Tutorial

Now that we know how to manipulate the DOM or change the contents inside HTML elements, let’s use it to illustrate integer variables.

<!DOCTYPE html>
<html>
<head>
 <title>Integer variables</title>
 <script>
   function updateFunction() {
    var x = 10;
    var y = 15
    var z = x + y;
    document.getElementById("int1").innerHTML = x;
    document.getElementById("int2").innerHTML = y;
    document.getElementById("int3").innerHTML = z;
 }
 </script>
</head>
 <body>
   <p id="int1">Integer x</p>
   <p id="int2">Integer y</p>
   <p id="int3">Integer z = x + y</p>
   <br>
  <button onclick="updateFunction()">Click Me</button>
 </body>
</html>

button

When you declare var x = 10, it immediately knows that x is an integer.  In Javascript, we do not have to declare int x = 10.

Notice also how we change the <p> elements using the 3 ids to identify the 3 variables.

JS Fiddle.