Introduction to JavaScript - Tutorial 1 - JS Basics




Hello everyone, today we are going to make an introduction to the programming language of the Web, JavaScript.


Introduction to JavaScript - Tutorial 1 - JS Basics

JavaScript is a dynamic, lightweight, powerful, high-level, and an object-oriented programming language which offers great flexibility in our web designs. 

In order to write a JavaScript code, we do not need a development environment. Basically, writing the commands into a text file, saving it as a HTML file and opening it with a Web Browser would be sufficient to work on JavaScript. In this tutorial, we will be placing our JavaScript code into the body section of the following HTML file;


 <html>
 <head>

 </head>
 <body>
     <script language="javascript" type="text/javascript">
     <!-- JavaScript Code will be written here



     -->
     </script>

 <p align="center"><a href="https://soysal.tk">JavaScript Tutorial by soysal.tk</a></p>

 </body>
 </html> 


Let's start with some basic features of JavaScript. JS supports variables just like the other programming languages; however instead of defining the type of a variable in JS, we use var command to define a variable regardless of its type (int, string, etc.).

The following command line defines two different variables and prints them;



    var num = 4;
    var str = "I am a string!";

    document.write("The string is: " + str,"<br/>");
    document.write("The number is: " + num,"<br/>");


Output:



However, since the data type is unknown, depending on the mathematical operation (summation, multiplication, etc. ) JS acts different than most of the programming languages. The following example defines 4 different variables and some mathematical operations done with them;


    var num = 5;
    var num2 = 9;
    var str = "3";
    var str2 = "16";


    document.write("Summation: " + num + str,"<br/>");
    document.write("Multiplication: " + num * str,"<br/>");

    // Correct Summation and Multiplication
    document.write("Correct Summation: " + Number(num + Number(str)),"<br/>");
    document.write("Multiplication: " + num * Number(str),"<br/>");

    // Concatenation Operation = 9 + "16" = 916
    document.write("Concatenation: " + String(num2) + str2,"<br/>");
    

Output:



Fist of all, the reason that the first summation fails is because if we are doing a summation with a string and an integer, JS converts the integer to a string and concatenates them. On the other hand, when we are doing a multiplication, the string is converted to an integer and therefore both Multiplication operations gave the same results in the example above. In order to perform correct summation and concatenation Number( ) and String( ) functions should be used.

Now let's further look into some other useful functions of JS such as toFixed( ), parseInt( ) and typeof( ).


    var num3 = 3.98478532;

    document.write("toFixed Output: " + num3.toFixed(4),"<br/>");
    document.write("ParseInt Output: " + parseInt(num3),"<br/>");
    document.write("typeof Output: " + typeof(num3),"<br/>");


Output:

 
  •  toFixed(N)  function is used with float type variables and used to limit the decimal part to N digits.
  • parseInt(float)  function is used with float type variables and used to convert them into integers by removing the decimal part.
  • typeof(type)  function is used with any type of variable and used to print their data types.
In JavaScript, it is also essential to know how to do the comparison of some values. The following code prints boolean values (true, false) to indicate the results of the operations;


  document.write("Is 10 > 4 AND 6 < 9 : " + Boolean(10 > 4 && 6 < 9),"<br/>");
  document.write("Is 10 == 4 OR 4 != 4 : " + Boolean(10 == 4 || 4 != 4),"<br/>");
     

Output: 

     
  • == checks the two values and returns true if they are the same.
  • != checks the two values and returns true if they are not the same.
  • a < b checks the two values and returns true if b is greater than a.
  • a > b checks the two values and returns true if a is greater than b.
  • && is used to check more than one conditions and returns true if all of them are correct.
  •  || is used to check more than one conditions and returns true if any of them is correct.

Continue Reading Introduction to JavaScript Tutorial 2 - Arrays, Loops, Conditionals

Keywords: Tutorials, JavaScript, Programming, Introduction
Author:

Software Developer, Codemio Admin

Disqus Comments Loading..