Javascript: A loosely typed language

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

JavaScript is a loosely typed language, which means you do not declare the data types of variables explicitly.

In many cases JavaScript performs conversions automatically when they are needed.

You can use var to define string or integer, which are commonly used in Javascript.

<!DOCTYPE html>
<html>
 <head>
 <title>Variables</title>
 <script>
   function updateFunction()
   {
     var new_str = "I am a new string";
     var new_int = 15;

     document.getElementsByTagName("h4")[0].innerHTML=new_str;
     document.getElementsByTagName("p")[0].innerHTML=new_int;
    }
  </script>

 </head>
 <body>
  <h4>I am a string</h4>
  <p>I will be an integer</p>
 <br>
 <button onclick="updateFunction()">Click Me</button>
 </body>
</html>

button

The script above illustrates some important concepts about Javascript.

First, we can see that a variable can accept either a string or an integer. For a string, we need to use “” but not for integer.

In designing a web site using Javascript, it is always about accessing the DOM and updating it. In this case, we are accessing the <h4> and <p> tags and change the content inside the 2 tags.

We change them using

     document.getElementsByTagName("h4")[0].innerHTML=new_str;
     document.getElementsByTagName("p")[0].innerHTML=new_int;

Notice the [0] in both statements, these are related to array variables and will be explained in the later posts.

Javascript: A simple form

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

A simple textbox input form.

<!DOCTYPE html>
<html>
<head>
    <title>Test input</title>
    <script>
        function submitForm(form) {
            var text_input = form.inputbox.value;
            document.getElementById("text_id").innerHTML=text_input;
        }
    </script>
</head>
<body>
<form>Enter something in the box: <br><br>
    <input type="text" name="inputbox" value=""><P>
        <input type="button" name="button" value="Click" onClick="submitForm(this.form)">
</form>
<p id="text_id">You typed</p>
</body>
</html>
Take note of how the text you typed into the text box is passed into variable text_input.
var text_input = form.inputbox.value;

Javascript: A good editor is needed

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

Many Javascript related sites will tell you that you only need a notepad to write Javascript.

However, if you are new to coding Javascript or learning any other programming language, I would like to suggest that you invest in a good Javascript editor.

The main reason is that as a new developer, you will need an editor that supports Intellisense.

Intellisense is a context-aware code completion feature in the editor that speeds up the process of coding applications.

I have been using WebStorm Javascript editor and you can download a copy of it and try it out for a month.

webstorm

 

Javascript: Functions

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

Functions are blocks of code that together achieve a more complex task, and are not executed until you call upon them.

We have already made use of functions in our earlier examples.  The example below will pass 2 variables into a function.

<!DOCTYPE html>
<html>
<head>
 <title>Function</title>
 <script>
 function updateFunction(x, y) {
   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</p>
 <br>
 <button onclick="updateFunction(8,10)">Click Me</button>
 </body>
</html>

button

The x, y variables are passed into the updateFunction function.  Try changing 8, 10 into different integers and run the above program again.

Javascript: Mouse event

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

Mouse event is probably the most common event used in Javascript or web programming.

<!DOCTYPE html>
<html>
<head>
    <script>
        function mouseOver() {
            document.getElementsByClassName("lineClass")[0].style.color = "#C0D9FE";
            document.getElementsByClassName("lineClass")[1].style.color = "#C0D9FE";
            document.getElementsByClassName("lineClass")[2].style.color = "#C0D9FE";
        }
        function mouseOut() {
            document.getElementsByClassName("lineClass")[0].style.color = "silver";
            document.getElementsByClassName("lineClass")[1].style.color = "silver";
            document.getElementsByClassName("lineClass")[2].style.color = "silver";
        }
    </script>
</head>
<body>
<div class="lineClass">This is line 1</div>
<div class="lineClass">This is line 2</div>
<div class="lineClass">This is line 3</div>
<h1 onmouseover="mouseOver();" onmouseout="mouseOut();">Mouse over this text</h1>

</body>
</html>

JS Fiddle

We have bind 2 events to a single h1 element.  When the mouse is over the line, mouseOver function is called changing the lineClass related lines to a different color.

Look at how lineClass has turned the 3 div lines into an array with 3 items in the array.  They are accessed with [0], [1] and [2].

You can also pass the lineClass into a variable.  This will make the code look cleaner.

<!DOCTYPE html>
<html>
<head>
    <script>
        function mouseOver() {
            var lineC = document.getElementsByClassName("lineClass")
            lineC[0].style.color = "#C0D9FE";
            lineC[1].style.color = "#C0D9FE";
            lineC[2].style.color = "#C0D9FE";
        }
        function mouseOut() {
            var lineC = document.getElementsByClassName("lineClass")
            lineC[0].style.color = "red";
            lineC[1].style.color = "red";
            lineC[2].style.color = "red";
        }
    </script>
</head>
<body>
<div class="lineClass">This is line 1</div>
<div class="lineClass">This is line 2</div>
<div class="lineClass">This is line 3</div>
<h1 onmouseover="mouseOver();" onmouseout="mouseOut();">Mouse over this text</h1>

</body>
</html>

JS Fiddle – simplified

In the above simplified JS Fiddle, I have passed the lineClass into a variable lineC as shown in line 2 below.

function mouseOver() {
    var lineC = document.getElementsByClassName("lineClass")
    lineC[0].style.color = "#C0D9FE";
    lineC[1].style.color = "#C0D9FE";
    lineC[2].style.color = "#C0D9FE";
}