JavaScript

This article is based on JavaScript, that can be said to be one of three basic web languages beside with HTML and CSS. In this article I’m going to tell basic info about JavaScript and how to use it.

Basic reasoning

So what is JavaScript? JavaScript is computer based language that has some logical means like any other computer language. Difference with programming languages like Python or Java, is that JavaScript is run is user computer via browser that interpret the language. This means that it can only affect to the browser based on data and it can’t overwrite the files in your local computer. It can’t also can’t read any files that aren’t refer to it via HTML-files.

But there are still much good sides about it. It enables to create interactive objects (like button that does something, show local time, write textfields, update and check user feeds in forms, create picture galleries, play music and video… ) that makes the coding language so special. It also very lightweight coding language and some of it methods are similar to other coding-languages.

All in all with HTML-, CSS-, and JavaScript as your languages, you are able to create massive amounts of code. And moreover there are countless ways to do things that is definitely major change since 90s.

My first print

Like any other programming language you might want to start with this, how do I print ” Hello world! ” -text to the page. Well here is the code for you to do that. I added some spesific information to header, but you are more interested in what is typed into the body part.

<!doctype html>
 <html>
   <head>
   <title>My First JavaScript prit</title>
   <meta charset="utf-8">
   <meta name="author" content="Tuomas Törmä">
   <meta name="description" content="First script">
   <meta name="Keywords" content="Tuomas, Törmä, first, script, tutorial">

   <meta http-equiv="refresh" content="300">
   </head>
   <body> 
     <p>
        <script type="text/javascript">
           document.write("Hello World"); //Prints line to <p>-tag
        </script>
     </p>
   </body>
 </html>

What can we learn about this code line that is in <script>-tags. Well first we can tell that there is a document. –which means to this document. Then write(“Hello World!”) –means that in this place, write this. specific line.

Usual the <script> is between head tags. In this case there are couple rules.

  1. You must tell to the browser where to get this information, if it is typed in different document. Basically you refer it:
    <script type=”text/javascript” src=”filename.js”></script>
  2. Usually you have to tell that something is going to happen when page loads like
    $(document).ready(function() { …..lines});
    window.onload = DoThis;
    window.addEventListener(‘load’, doFirstThis, false)

With these couple basics outcomes you are able to solve 50% of cases why the code doesn’t work. Here is example about these kind of situations. First is the basic HTML-file and then JavaScript-file.

<!doctype html>
 <html>
   <head>
     <title>My Second JavaScript prit</title>
     <meta charset="utf-8">
     <meta name="author" content="Tuomas Törmä">
     <meta name="description" content="First script">
     <meta name="Keywords" content="Tuomas, Törmä, second, script, tutorial">

     <meta http-equiv="refresh" content="300">
     <script type="text/javascript" src="secondscript.js"></script>
     <script type="text/javascript">
        window.onload = TypeThis;
        function TypeThis(){
        document.getElementById("Text2ComesHere").innerHTML="Here I come";
        };
     </script>
 </head>
 <body>
     <p id="TextComesHere"></p>
     <p id="Text2ComesHere"></p>
 </body>
 </html>

And the JS-file

function doFirstThis() {
   var ChangeText = document.getElementById("TextComesHere");
   ChangeText.innerHTML = "Hello World!";
};
  window.addEventListener('load', doFirstThis, false);

/*
OR with jquery
$(document).ready(function(){
 var ChangeText = document.getElementById("TextComesHere");
 ChangeText.innerHTML = "Hello World!";
};
});
*/

Conclusion

Using JavaScript is a great way to expand your code and your sites look and made your code richer. Learning to use JavaScript also makes easier to understand other programming languages. Newest browser also supports very greatly on JavaScript and more you undestand it, better are the results.
I just started a month ago and I’m quite satisfied using JavaScript. I recommend to learn it and if you are going to the web devoleper, thing is…. You need it.

Sources

  • Lectures at Haaga-Helia at autumn 2013, teacher Mirja Jaakkola, subject introduction to Hybermedia

Leave a comment