Javascript: Variables

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

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

button

In this example, we introduce a variable called new_string.

var new_string = "This is my second Javascript program"

We first assign a sentence to new_string, update the paragraph with id=”second” with new_string.

document.getElementById("second").innerHTML = new_string;

Javascript: Object Oriented Javascript Program

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

If you only just want to output a simple text in the browser.

<!DOCTYPE html>
<html>
 <body>
 <script>
   document.write("Hello World!");
 </script>
 </body>
</html>

button

Here it will just output a simple text using document.write().

Javascript is an Object Oriented programming language.

For this example, the document is an object and the write is the method used by the Object to write out the text to the screen.

We can also format the output using HTML h1.

<!DOCTYPE html>
<html>
<body>
<script>
 document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>

Try The Code

 

js_helllo

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: Alert

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

The JavaScript alert is a dialogue box that pops up from the browser.

<!DOCTYPE html>
<html>
<body>
<h3>Click to alert me.</h3>
<button onclick="myFunction()">Click Me</button>
<script>
 function myFunction() {
   alert("I pop up from the browser!");
 }
</script>
</body>
</html>

button

This alert function becomes handy when you want to check if a part of the code has been executed.

 

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.