Get up to 80 % extra points for free! More info:

Lesson 1 - Introduction to JavaScript

Welcome to the first lesson of the web application development in JavaScript course. This lesson will be more of an introduction. We'll explain what JavaScript is good for, where it's currently being used, and what the difference is between websites and web applications. Later on, we'll also look into the entire creation process for web applications in JavaScript.

JavaScript

Back when I was still in school and I first had a lecture about JavaScript, our professor used the term "Misunderstood programming language" when referring to it. I liked this term so much that I'm gonna use it here too. Most people don't actually know what JavaScript is or they're wrong for some reason. The JavaScript language has been used on web in recent years and is becoming more and more popular. It's an integral part of modern websites. Let's briefly cover the language's history. This way, we'll know why it was created and what it's meant to be used for.

JavaScript logo - JavaScript Basic Constructs

A short history of JavaScript

The creation of the language was closely associated with the Sun company, the Java language was created here in 1992. Its goal of Java is to make portable applications between multiple systems and even different architectures. The new multiplatform language also has a friendly syntax similar to the C language (so-called C-like syntax) and should contain things that C++ does not have (i.e. garbage collector).

Then, in 1995, Bill Gates from Microsoft says his famous words: "The Internet? We're not interested". Microsoft had Windows and thought that the incipient medium, Internet, wasn't good business for the company. Sun saw potential in the concept of the website. However, the browsers at the time were only able to display static HTML content. They weren't able to insert interactive elements of any kind. Sun started to push JavaApplets for browsers, which allowed them to insert Java applications, running on the client side, into web pages. The Netscape browser tried to solve the missing interactive parts of websites differently, they created the LiveScript language and integrated it directly to the browser. LiveScript is basically Java (syntax-wise), Scheme (functional paradigma, more information below) and Self (prototype programming), all joined together. Java + Scheme + Self = LiveScript. The language itself was designed and programmed in only 3 weeks! Sun wanted to name the new language JavaScript. The name was simply a business move and was meant to symbolize a sort of simplier version of Java. However, in fact, it's a totally new language, which only takes a small part of Java syntax and not its philosophy. The name is really confusing - JavaScript was not and is not and never will be Java, and it doesn't even have much to do with it.

In the year of 1996, Microsoft finally opened its eyes and implemented JavaScript in its Internet Explorer under the name JScript. JavaScript continually expanded, and in the year 1998, it was standardized as ECMAScript. The path to language standardization was kind of a pain. However, the creators finally got the language standardized at a European company because neither W3C nor ISO wanted to approve it. The implementation of the language in browsers had been a problem for a long time since everyone had their own way of doing it. Now, the situation got much better. Not just due to removing of differences, but also due to the creation of JavaScript frameworks which offered a unified interface and solution for the differences in browsers on their own. The massive expansion of JavaScript was attributed to the Google company, which used a technology called AJAX, which is based on JavaScript, in Gmail. The technology had been available for a while. However, Google was the first who used it on a serious project. Since AJAX is kind of a complicated thing, we'll get to it at the end of this course. Simply put, it allows us to load new parts of a website without having to refresh the page. You've certainly seen this feature on modern websites. You'll often see a spinner in places where new content is being loaded. For example, Facebook uses it to add new posts automatically without having to refresh the page.

Usage of JavaScript

It's important to realize that JavaScript runs on the client side. Therefore, all the applications are run on the user's browser. This is a huge difference from server-side languages like PHP. Using JavaScript, we can change the content of the website in the user's device. This way, we're able to make dynamic menus, different types of dropdowns, and a lot of containers which might save some space on the page when they're closed and will open when the user clicks on them. This functionality is very useful and makes pages look much cleaner. JavaScript is also great for text formatting. With it, we're able to insert smileys into a message or even format text like in Microsoft Word. When you see an editor of some sort on a webpage, its 90% likely that it was made with JavaScript. It's also used for time pickers, date pickers, and website effects (like snow animations for Christmas).

Since sending a form to the server and waiting for its answer is slow, JavaScript is also used to validate web forms. Therefore, when you write an e-mail incorrectly, the webpage will tell you before sending it to the server so you don't have to reload the page. However, we must realize that because the JavaScript is running at the client, the user may turn it off or rewrite it. Therefore, we cannot trust this validation and we must still validate the e-mail on the server side. Nevertheless, the comfort and efficiency without the unnecessary delays which JavaScript provides are still great. The same applies with the JavaScript menus, which should be able to be displayed even with JavaScript turned off. It doesn't matter that it wouldn't be as pretty since 99% of people have JavaScript turned on and some browsers don't even allow to turn it off. In other words, the main problem is that Google indexing bots wouldn't see the menu since they don't use JavaScript. This might even mean that they wouldn't be able to click through it to access the rest of the website. The aforementioned frameworks and libraries (i.e. jQuery or Angular), provide so-called widgets, pre-made miniapplications, where you just setup what you want to be there and the rest is left to the framework even with JavaScript turned off.

Currently, even games are being made with JavaScript and the Flash platform is now practically extruded. Since the arrival of HTML5, which offers us a hardware accelerated canvas with the support of SVG, we're able to draw very fast vector graphics using JavaScript. You may be familiar with the game AngryBirds for the Chrome Browser, yup it's written in JavaScript :)

Even desktop applications we know and love (i.e. Office) are being rewritten in JavaScript. Mainly because JavaScript applications are fully multiplatform and run on every single device with an internet browser installed. This includes PCs, tablets, phones, and even watches. The operating system doesn't matter either, you just write the application once and it runs everywhere. Most users might not even notice that the application runs through the browser. This is obviously cheap and convenient. Universal applications like this are made using projects like PhoneGap. The future of the JavaScript is full of potential.

Language structure

The following description will be a bit technical. If you're interested in this sort of topic, feel free to read the Object Oriented Programming article, or don't worry about it and ignore the following paragraph (it isn't all that important) :)

JavaScript is an interpreted language, so it's complied at run-time and executed according to its source code. The syntax is C-like and the language is dynamically typed. In fact, it only contains one numeric type which is number, string for text, boolean for true/false values and Object for anything else. The language is object oriented but there's a huge difference in the design. Objects are the same as a dictionary, i.e. a sort of general container. JavaScript uses a so-called functional paradigma, which allows us to store a function into a common variable. This apparently simple property allows us to pass the functions in the parameter of another function (the so-called callback) or even use the function as a constructor for an object. Object oriented programming here seems to take an entirely new form. Prototype inheritance also works here, so objects can be parents of other objects. When I first noticed this, it seemed totally perfect to me. I like that it's much more than standard OOP based on classes. However, I also understand that it's something new and people don't welcome change, so here we have yet another problem with JavaScript - the functional paradigm. The language is now being used more and more and its time is just about to come.

Note. JavaScript is so interesting in regards to its design that it's even being used on servers. We call it server-side JavaScript, which competes with languages like PHP. For any candidates who are interested, feel free to read up on Node.JS.

The previous paragraphs are based on a lecture by Tomáš Holas from the Unicorn College, which was really awesome.

Web page × web application

Probably everyone of you have seen a webpage as well as a web application. However, do you know what the difference is between them? Webpages are mostly used to inform and usually don't use JavaScript. If we look at them (without considering the server part), even the page content is static. On the other hand, web applications are more similar to desktop applications, they just run inside of the web browser and use its benefits. Therefore, they're mostly entirely dynamic. As you may have guessed, an example of a web page is ICT.social (most of the content is static). As for web applications, some nice examples are Microsoft Office 365 or Google Docs. These office packages are similar to the classic desktop ones and they're able to do (if it doesn't interfere with the corporate policy) just about the same. However, if you look e.g. at the forums here at ICT.social, they aren't static so they can be considered a web application.

OpenSource?

JavaScript has a one fatal problem. The problem is that the source code is on the client side, so anyone can view it, save it, or rewrite it. This is pretty much like OpenSource code, where everyone can download the source code for free, modify it as they please, and republish it. However, if you don't like this or it does not fit your application, you don't have to throw everything away. One option is to obfuscate the code, but we won't get into this until later on. Just keep in mind that it can be done.

ECMAscript

JavaScript is simply another name for ESCMAscript. Therefore, when we learn JavaScript, we learn in fact ECMAscript. ECMAscript is standardized. Nowadays, the differences between browsers in their implementation are few, so usually a single code works for all browsers. However, historically, this has always been a problem.

In the next lesson, Getting started with JavaScript - First scripts, we'll cover the basics of the language and write our first couple of scripts.


 

All articles in this section
JavaScript Basic Constructs
Skip article
(not recommended)
Getting started with JavaScript - First scripts
Article has been written for you by David Capka Hartinger
Avatar
User rating:
6 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities