What is JavaScript?
JavaScript is an object-oriented programming language. It was first designed in 1995 and has been kept up-to-date ever since, most recently using the ECMAScript 2017 standard. The language was designed for use in Internet browsers. However, JavaScript is now also used outside of Internet sites. Despite the similarity in individual aspects: JavaScript and the equally widespread programming language Java must be clearly distinguished from one another.
JavaScript is one of the interpreter languages. That means: JavaScript programs are translated and executed line by line. The language offers many elements that are known from other programming languages, such as loops for quick repetition of program parts, branches for different handling of different situations and functions for breaking down a program into clear components. In addition, with the help of objects and the Document Object Model (DOM) you have access to all elements of your Internet pages so that you can change them dynamically.
What do I do with JavaScript?
The programs are made available to users together with HTML code within Internet pages. They are executed on the user’s browser and can dynamically change the content of a website. This happens either immediately after loading the website or after the occurrence of an event, for example the user pressing a button. JavaScript enables complex applications to be designed with a single user interface.
JavaScript was designed to provide the user with additional options and help that he does not have with HTML alone.
You should not use these options to restrict the user in any way. For example, he will be annoyed if he is directed to a website while surfing that prevents him from going back to the previous page because the developer of the page has deleted the list of pages visited so far with the help of JavaScript. After this experience he will take care not to visit this website again.
Forms play an important role in connection with JavaScript. On the one hand, they are used to transmit data to a web server. Before sending, your content can be checked for validity by JavaScript. This avoids unnecessary network traffic. On the other hand, forms enable interaction with the user, similar to what he is used to from other applications on his computer. He can make entries and trigger processing. The program then gives him a result.
What can’t JavaScript do?
JavaScript cannot turn itself on. Unfortunately, there will always be individual users who have deactivated JavaScript in their browser for reasons of caution. However, the proportion of Internet pages that these users can then no longer properly view is quite high. But you can at least see whether JavaScript is activated or not and react accordingly.
JavaScript cannot save anything on the web server (without additions). JavaScript programs run in the user’s browser and not on the web server from which they are loaded. It is therefore not possible, for example, to save data on the web server.
JavaScript can only save a small amount of data on the user’s device. It cannot cause any damage there. Access to the user’s data on his hard drive is only possible to a limited extent, in a restricted area and with the consent of the user.
Browser and mobile browser
Internet pages with JavaScript are received by different browsers under different operating systems on different end devices and implemented for the user.
Some JavaScript instructions can possibly be formulated more compactly for certain browsers. However, I recommend always using the standard formulation so that the instructions are suitable for as many browsers as possible.
The proportion of mobile devices with the mobile browsers tailored for them is growing all the time. Mobile devices offer some additional options, such as receivers or sensors for location data, position and acceleration of the mobile device. The data thus determined can be further processed by JavaScript.
An example program
An example of JavaScript follows in this section. If you have no programming experience yet, this example is intended to illustrate a typical application: The evaluation of user entries in a form (see Figure 1) without additional network traffic. If you already have knowledge of another programming language, you will find many familiar elements in the code and the short comments, but also JavaScript-specific elements. Of course, this demo example is not yet suitable for a thorough learning of JavaScript. At this point I refer to my book at Rheinwerk-Verlag.
It’s about an investment that a bank offers its customers. In the lower area of the page, the user can see the various conditions of the bank. He enters an amount that he would like to invest. He also states the desired duration. After clicking the Calculate button, the program checks the input values and delivers the amount at the end of the term.
Figure 1: “geldanlage.htm” file, with form and JavaScript program
The code of the file “geldanlage.htm” follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>JavaScript Beispielprogramm</title>
<!– Einbettung von CSS-Styles –>
<style>
body {font-family:Verdana; font-size:11pt;
background-color:#f0f0f0}
td {font-family:Verdana; font-size:11pt;
background-color:#d0d0d0;
text-align:right; padding:4px}
</style>
<!– Einbettung von JavaScript –>
<script>
// Ergebnis berechnen und ausgeben
function berechnen()
{
// Übernahme der Werte aus dem Formular über die IDs
var betrag = document.getElementById(“idBetrag”).value;
var laufzeit = document.getElementById(“idLaufzeit”).value;
// Weitere benötigte Variablen
var zinssatz, ergebnis;
// Kontrolle der Eingabe mithilfe von verknüpften
// Bedingungen und Prüffunktionen
if(betrag == “” || isNaN(betrag)
|| laufzeit == “” || isNaN(laufzeit))
{
alert(“Bitte gültige Zahlen eintragen”);
return;
}
// Zinssatz aus Laufzeit ermitteln
if (laufzeit<3) zinssatz = 2;
else if (laufzeit<6) zinssatz = 2.5;
else if (laufzeit<10) zinssatz = 3;
else zinssatz = 3.5;
// Ergebnis berechnen, mithilfe von mathematischen Funktionen
ergebnis = betrag * Math.pow(1 + zinssatz/100, laufzeit);
// Ausgabe von Werten im vorhandenen Dokument
document.getElementById(“idErgebnis”).firstChild.nodeValue =
“Sie erhalten ” + ergebnis.toFixed(2) + ” Euro”;
}
// Ereignisbehandlung für unterschiedliche Umgebungen
function meinHandler(id, ereignis, funktion)
{
if(window.addEventListener)
document.getElementById(id)
.addEventListener(ereignis, funktion, false);
else if(window.attachEvent)
document.getElementById(id)
.attachEvent(“on” + ereignis, funktion);
}
</script>
</head>
<body>
<!– Formular für die Benutzereingabe –>
<form>
<p>Tragen Sie bitte den Betrag und die Laufzeit ein.</p>
<!– IDs zur Identifizierung von Elementen der Internetseite –>
<p><input id=”idBetrag” size=”15″ value=”2000″> Betrag in Euro (*)</p>
<p><input id=”idLaufzeit” size=”15″ value=”5″> Laufzeit in Jahren (*)</p>
<p><input id=”idBerechnen” type=”button” value=”Berechnen”></p>
<p id=”idErgebnis”> </p>
<p>(*) = Pflichtfeld</p>
</form>
<!– Tabelle mit Konditionen –>
<table>
<tr><td><b>Laufzeit</b></td><td><b>Zinssatz</b></td></tr>
<tr><td>< 3 Jahre</td><td class=”pro”>2.0%</td></tr>
<tr><td>< 6 Jahre</td><td class=”pro”>2.5%</td></tr>
<tr><td>< 10 Jahre</td><td class=”pro”>3.0%</td></tr>
<tr><td>>= 10 Jahre</td><td class=”pro”>3.5%</td></tr>
</table>
<!– Verbindung zwischen Ereignis und Code –>
<script>
meinHandler(“idBerechnen”, “click”, berechnen );
</script>
</body>
</html>
