DEV Community

Cover image for JavaScript Overview
Arman
Arman

Posted on

JavaScript Overview

What is JavaScript?

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
example

Javascript History

JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time.
The language was initially called LiveScript and was later renamed JavaScript. There are many programmers who think that JavaScript and Java are the same. In fact, JavaScript and Java are very much unrelated. Java is a very complex programming language whereas JavaScript is only a scripting language. The syntax of JavaScript is mostly influenced by the programming language C.

How to Run JavaScript?

Being a scripting language, JavaScript cannot run on its own. In fact, the browser is responsible for running JavaScript code. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it is up to the browser to execute it. The main advantage of JavaScript is that all modern web browsers support JavaScript. So, you do not have to worry about whether your site visitor uses Internet Explorer, Google Chrome, Firefox or any other browser. JavaScript will be supported. Also, JavaScript runs on any operating system including Windows, Linux or Mac. Thus, JavaScript overcomes the main disadvantages of VBScript (Now deprecated) which is limited to just IE and Windows.

Tools You Need

To start with, you need a text editor to write your code and a browser to display the web pages you develop. You can use a text editor of your choice including Notepad++, Visual Studio Code, Sublime Text, Atom or any other text editor you are comfortable with. You can use any web browser including Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.

A Simple JavaScript Program

You should place all your JavaScript code within tags (<script> and ) if you are keeping your JavaScript code within the HTML document itself. This helps your browser distinguish your JavaScript code from the rest of the code. As there are other client-side scripting languages (Example: VBScript), it is highly recommended that you specify the scripting language you use. We have to use the type attribute within the <script> tag and set its value to text or javascript like this

<script type="text/javascript>
Enter fullscreen mode Exit fullscreen mode

Hello World Example:

<html>
<head>
    <title>My First JavaScript code!!!</title>
    <script type="text/javascript">
        alert("Hello World!");
    </script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Note: type="text/javascript" is not necessary in HTML5. Following code will work.

<html>
<head>
    <title>My First JavaScript code!!!</title>
    <script>
        alert("Hello World!");
    </script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Assign a Value to the Variable

You can assign a value to the variable either while declaring the variable or after declaring the variable.

var name = "John";
Enter fullscreen mode Exit fullscreen mode

OR

var name;

name = "John";
Enter fullscreen mode Exit fullscreen mode

Naming Variables

<html>
<head>
<title>Variables!!!</title>
<script type="text/javascript">
var one = 22;
var two = 3;
var add = one + two;
var minus = one - two;
var multiply = one * two;
var divide = one/two;
    document.write("First No: = " + one + "<br />Second No: = " + two + " <br />");
    document.write(one + " + " + two + " = " + add + "<br/>");
    document.write(one + " - " + two + " = " + minus + "<br/>");
    document.write(one + " * " + two + " = " + multiply + "<br/>");
    document.write(one + " / " + two + " = " + divide + "<br/>");
</script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

JavaScript Array Methods

The Array object has many properties and methods which help developers to handle arrays easily and efficiently. You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().

length property --> If you want to know the number of elements in an array, you can use the length property.
prototype property --> If you want to add new properties and methods, you can use the prototype property.
reverse method --> You can reverse the order of items in an array using a reverse method.
sort method --> You can sort the items in an array using sort method.
pop method --> You can remove the last item of an array using a pop method.
shift method --> You can remove the first item of an array using shift method.
push method --> You can add a value as the last item of the array.

<html>
<head>
    <title>Arrays!!!</title>
    <script type="text/javascript">
        var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
        Array.prototype.displayItems=function(){
            for (i=0;i<this.length;i++){
                document.write(this[i] + "<br />");
            }
        }   
        document.write("students array<br />");
        students.displayItems();
        document.write("<br />The number of items in students array is " + students.length + "<br />");
        document.write("<br />The SORTED students array<br />");
        students.sort();
        students.displayItems();
        document.write("<br />The REVERSED students array<br />");
        students.reverse();
        students.displayItems();
        document.write("<br />THE students array after REMOVING the LAST item<br />");
        students.pop();
        students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
        students.displayItems();
    </script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)