This article aims to give an introduction to simple and not extremely formal scripting language which have been established as one of the foundations of the entire web application. You’ve probably heard this name, but have no idea what it is or you may have used it but have no basic idea about this. Then this article is made for you to understand how it works and how to make your first script in this language.
Firstly, the term JavaScript has nothing to do with the Java programming language, this is a big confusion made by the web development community, especially for those who never worked with technology, but let’s not worry about the name and let’s understand the basics and get our hands a little dirty by coding.
The JavaScript language is Client Side language , ie, it is executed on the user’s computer. This scripting language is interpreted by the browser command by command. Its content is maintained intact and no files are produced through this process , i.e no .class like in Java or .obj like in c are produced. The table below gives a clear demarcation between scripting,programming and markup language:
| Scripting Language | Programming Language | Markup Language |
|---|---|---|
| As mentioned before, it’s interpreted line by line by an interpreter, and remains as it is, no change occurs | It’s human readable language, machines don’t understand it, hence it’s compiled to binary code “0s and 1s” so it can be understood by machines and run. | Consider that you want to organize your document, so all what you need to do it to markup it. Exactly that’s why markup languages do, it’s designed to transform raw text into structured documents by adding descriptive tags to the text. |
| Ex: Javascript, php,perl, python | C,C++,Java,C# | HTML, XML, XHTML |
When we access a web page, we have a sequence of events, or rather a flow of communication between our computer and the server where the page, see figure 1.
Figure 1: Example of communication between the user’s computer and the Web server
The figure gives us an idea of what happens when we type the address www.javabeat.net, for example. Let me explain:
- You type the address into your browser www.javabeat.net, it will be communicated to the server about this page and asking relevant files to be sent;
- The server will interpret this request and will return the requested page in text format, containing the HTML and JavaScript code that is embedded on this page;
- Your computer receives this code, interprets it, and if necessary, requests pictures, media files and more that are being referenced in the HTML received.
The fact that your computer receives and interprets some code already explains what it is Client Side language. When we work with Web applications, we have two kinds of programming language, which are: Client Side and Server Side. JavaScript is a language of type Client which interprets and generates the results in the user’s computer. Have you ever stopped to think how many different types of operating systems, browsers, and hardware connections are there? Yes, it causes serious problems because not all browsers interpret JavaScript in the same way.
The JavaScript language depends on the user’s computer to function properly. It is interpreted by the browser, or browser, that our user is using.
What is JavaScript anyway?
JavaScript can interact with virtually all elements of an HTML page, working with variables, generate results, change the appearance of elements and better, without the need to reload the page. There are entire applications made using only JavaScript, and I can say that these applications will become increasingly common with the passage of time and the evolution of the language.
Why use JavaScript?
The following is some reasons why javascript is used:
- Can dynamically generate HTML elements in runtime
- Can read and change contents of HTML elements
- Can Handle Events
- Is used for Client side validation
- Can detect visitor browser and settings
- Can create cookies
- Can directly access files on the web server
- Can directly access files on the user’s system
Javascript can be written
- implicitly :Means that it can be written in one of two places in the web page.
- In Head Section: which will be loaded before the rest of the document and if it’s written in a function it will be loaded upon request.
- In Body section: which will be loaded in it’s turn on the page .
You can write any number of scripts inside the page, code is written between tag
- Explicitly: Means that code will be written in separate file and linked to the desired page. Code is written in separate file with .js extension and is included in the head of the web page example :
<script src=”myfile.js”/>
Hands-on With JavaScript!
Have you read any article on JavaScript or any other programming language? Then you must know that it is almost a tradition to begin anything giving a “Hello World” or the famous “Hello World”. So let’s make our own “Hello World”. To start, we do not need to install any specific program. You can start with a Notepad or any text editor for that matter. There are also specific tools for coding JavaScript, but our focus is just to understand how it works and create a simple script. Open your text editor and enter the following code:
Listing 1: Source code of the example constructed
<html>
<head>
<title> Article 01 - Hello World </title>
<script language="javascript" type="text/javascript">
alert ('Hello World!');
</script>
</head>
<body>
</body>
</html>
Save this file as index.html and open in any of your browser, result would be as in the figure 2 below:
Figure 2: Output
You can see a message (Hello World!) pops up. Few point about Javascript:
- JavaScript is case-sensitive;
- Use “;” after each statement
- take care of opening and closing of TAG <script>.
Well, let me explain the source code of our above example.
- Note that our JavaScript code is within the tags “<head> </ head>”. This is important since this code is executed before anything is shown on screen, but during the course we will see that this can be different;
- All that is within tags “<script> </ script>” is our JavaScript code, in our case statement its the alert (“Hello World”);
- For the sake of browser compatibility, use the properties language = “javascript” and type=”text/javascript”
- Our sample is limited to calling the function “alert ()” JavaScript, this is one of the simplest functions that JavaScript owns and is responsible for calling an alert window on page useful when we need to pass a message to the user;
Summary
This article is not intended to turn anyone into a professional programmer, but aims to give an overview of how JavaScript works as well as demonstrate that you can build a simple practical example without large computational resources.
Spring MVC Annotations