JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
Traditionally JavaScript was used inside web browsers such as Mozilla Firefox, Internet Explorer, Chrome, Opera, or Safari. The author would include some JavaScript code in the HTML page the user receives when she visits a web site. That JavaScript code would run in the browser (what we call “client side”, as opposed to running on the web server which is called “server side”).
In recent years people have started to put JavaScript code on the server as well. Probably the most well know environment to run JavaScript on the server is Node.js, but there are others.
We can distinguish 3 major parts of what we usually refer to as “JavaScript”.
You can either embed the JavaScript code directly inside the HTML file, or you can put a line in the HTML file that will include the external JavaScript file. In most cases the latter is recommended, but for our first examples, in order to make the whole thing work in a single file, we’ll embed the JavaScript code inside some HTML.
In order to do that we add the <script> opening and </script> closing tags. Between the two we write our JavaScript code.
The very first thing we need to learn is how to interact with the JavaScript code running in the browse. There are a number of way JavaScript can display text for the user (output). The most simple one is by using the alert function:
This will show a pop-up in the browser with the text. The alert() function is actually rarely used, but it is an easy way to show the use of JavaScript.
<script language=”javascript”>
alert(“Hello World”);
</script>
Most of the web browsers provide what is called a “JavaScript console”. It is an additional window which is normally not visible, where the browser can print out warnings and errors generated by the execution of the JavaScript code. (E.g. if there is a syntax error in the code.) The developer can also print information to this console using the console.log() call.
Once we know how to show output from JavaScript, let’s have a quick look at two ways to receive input. Probably neither of these is use a lot, but they can be used easily to play around with the basics.
prompt
The fist one is called prompt. It will show a pop-up window with the text provided as the first parameter and with a textbox the user can fill in. When the user presses OK, the value in the text box will be returned by the prompt() function. Then, in this example we use the document.write method to update the html with the text.
<script>
var name = prompt(“Your name:”, “”);
document.write(“Hello “, name);
</script>
The textbox will be pre-filled with the content of the second parameter. This can be very useful if we would like to ask the user to edit some value. We can pre-fill the box with the old value.
<script>
var name = prompt(“Please correct your e-mail address:”, “foo@bar.co”);
document.write(“Your e-mail address is “, name);
</script>
In either case, if the user presses cancel or hits the ESC the prompt() function will return null.
confirm
The other pop-up is not really an input method. It allows the developer to ask a Yes/No question. Calling the confirm() function will show a pop-up window with the provided texts and with two buttons. If the user presses OK the confirm() function will return true, if the user presses cancel or hits the ESC key, the function will return false.
Of course in order for this to make more sense you’ll have to understand what true and false really mean and what this if - else construct does. If you have programming background then you probably already understand the code, and even if you don’t have programming background you might figure out.
That code can basically be translated to the following English sentence:
If confirm returned true, print “Hello World”, otherwise print “OK, I won’t print it.”
<script>
if (confirm(“Shall I print Hello World?”)) {
document.write("Hello World");
} else {
document.write("OK, I won't print it.");
}
</script>