Javascript for Interactive Web Applications


Fabian Schubert

SoSe 2018

Institute for Theoretical Physics
Goethe University Frankfurt/Main

Why Javascript?

If you desing a web page you need...

An example

Plain HTML

HTML + CSS

HTML + CSS + Javascript

A fancier example

The HTML DOM

JavaScript can access and modify page elements via the HTML Document Object Model

https://www.w3schools.com/js/pic_htmltree.gif

Where to start?

Example: Remove the "//" in the script in the head tag and place them in front of the other JavaScript line.

Scripts can also be placed in external files and referenced:

Generating Output

JavaScript provides different methods to "print" something on the screen.

Basic Syntax

Variable Declaration

Data Types

JavaScript comprises a number of different data types: Data types of variables in JavaScript are dynamic. The type of data stored in a variable can be altered during execution.

Arithmetics

The syntax of Javascript operators is quite similar to those used in C++.
OperationSyntax
Additionx + y
Subtractionx - y
Multiplicationx * y
Divisionx / y
Modulox % y
Postfix Incrementx++
Postfix Decrementx--
Prefix Increment++x
Prefix Decrement--x
Equalx == y
Unequalx != y
Greater thanx > y
Greater than or equalx >= y
Less thanx < y
Less than or equalx <= y
Logical andx && y
Logical orx || y
Binary andx & y
Binary orx | y
Binary xorx ^ y
Binary notx ~ y
Binary shift leftx << 2
Binary shift rightx >> 2
Assignments
x = 2
x += 2
x -= 2
x *= 2
x /= 2
x %= 2
x <<= 2
x >>= 2
x &= y
x |= y
x ^= y

String Operators

Functions

JavaScript also supports recursive functions:

Control Structures

JavaScript knows most of the "standard" structures to control the flow in your program.

if:

switch:

for loop:

while loop:

do...while loop:

Objects

Even though we have seen that JavaScript knows different data types, in the end, everything can be treated as an object. However, declaring simple data as objects slows down execution speed.

There are different ways to create new objects:

Caution: Objects are addressed by reference, not by value: This is because they are mutable. In contrast, primitive datatypes are not mutable.

Additional properties or methods can be added to the constructor after the declaration via the prototype property.

Inheritance can be implemented via the call method.