JavaScript 101 - Introduction
Intro
What is JavaScript? JavaScript is an object oriented prototype based scripting language that is a dialect of ECMAScript. Other dialects of ECMAScript include ActionScript and JSscript. JavaScript, originally called Live Script, was developed to fill the gaps in the HTML. In the mid 90’s several scripting languages were developed to address the issue of HTML content being static. At the time Pearl was the backbone of the internet. CGI scripting was the only option. If you are reading this I am going to assume you didn’t have to suffer through the dark days of CGI scripting (Lucky you).
JavaScript’s evolution has been very much tied to the evolution of HTML. HTML was/is a briliant way for sharing content over the web. It was originally created by Tim Berners-Lee of CERN to share technical/scientific articles over the internet. HTML has greatly changed in the last 20 something years and as JavaScript was designed to solve some of HTML’s deficiencies so it too has changed.
JavaScript isn’t JAVA script
Quite contrary to it’s name, JavaScript is not related to the JAVA programming language. JAVA and JavaScript both have common ancestry in the C family of languages. That, and they share “Java” in their names, are about the only thing they have in common (Well not really, but close). JavaScript was developed by Brendan Eich while working at Netscape. Netscape chose to call it “JavaScript” for purly marketing reasons. At the time Sun Microsystems had recently developed the JAVA programming language which was “in fashion” at the time, and Netscape wanted to ride the wave of JAVA’s hype.
Interpreted vs Compiled Languages
Computers do not understand high level languages like JavaScript, PHP, C, etc. directly. They have to be translated into machine code. The process of translation is called compiling. Interpreted languages, or scripting languages, are compiled every time the program is run, while compiled languages are compiled once at build time. Generally speaking, compiled languages have much better performance.
The Interpreter
Up until relatively recent the only readily available JavaScript interpreters were in web browsers or development tools for web browsing. The node.js project, and others like it, brought JavaScript out of the browser and into fully capable applications of their own. I will be going into more details on node.js later, so for now the examples to follow are going to be done in the browser.
There are three basic ways to execute JavaScript code in a browser. The first is inside of <script>
</script>
tags, the second is to include a separate JavaScript file <script src="/js/main.js">
</script>
, the third is directly in the console. The console is a very powerful tool, but
it is not very good for writing good apps because you cannot save your work (save well and save often!).
Generally for everything but the smallest of projects, you would include your javascript files in your html page.
Hello World
Keeping with tradition lets create our first program, the infamous “Hello World.” You will need a basic text editor (NOT MsWord, Pages, Lotus Notes, GoogleDocs or any word processor), Notepad on windows, TextEdit on mac, and if your are running LINUX you ought to know what a text editor is, pick your favorite. Now, from your project directory, create a js directory and two files: index.html and main.js like the following.
./ |_ js/ | |_ main.js |_ index.html
js/main.js
//Console Vanilla JavaScript
document.write('Hello World');
index.html
<!-- Browser Vanilla JavaScript -->
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
Now that you have those created the files, open the index.html in the web browser. You should see “Hello World” displayed in your browser. Congratulations you have written your first javascript program.