Javascript: Global variables

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

The scope containing all of a program is called global scope.

This is the scope you are in when entering a script.  When you define a variable here, the variable can be accessed by all functions.

Inside the global scope, you can create a nested scope by defining a function.

<!DOCTYPE html>
<html>
<head>
    <title>Global Variables</title>
    
    <script>
        var global_str = 'I am a global string';

        function updateFunction() {
            var local_str = 'I am a local string';
            document.getElementsByTagName('p')[0].innerHTML = local_str;
        }
    </script>

</head>
<body>
<p>I am a string</p>
<button onclick='updateFunction()'>Click Me</button>
<br>
<script>
    document.write(global_str);
</script>
</body>
</html>

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.