Why Javascript?

If you desing a web page you need...

... HTML to define the content and structure.
... CSS to control the appearance.
... Javascript to dynamically modify and/or generate the content and appearance of your web page and to allow advanced user interactions.
- (Even thoug HTML + CSS also provide these features to some extent)

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

The HTML DOM sets the standard for accessing and modifying a html document
It allows us to access the elements in the page via JavaScript semantics, namely:
- html elements as objects
- properties of html elements
- methods associated with html elements

Where to start?

JavaScript is included into a web page via the <script> tag.
Script tags are either placed within the <head> tag or the <body> tag
There are some differences in the behavior of your web page depending on where you place your script.

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.

Changing the content of an html object via the innerHTML property.
Writing new content into the document via document.write().
Showing an alert box via window.alert().
Writing into the browser console via console.log().

Basic Syntax

Javascript statements are ended with a ";"
(There is also automatic semicolon insertion, but you should not rely on it).
Line breaks within statements should happen behind operators.
Redundand white space is ignored.
Javascript is case sensitive.
Single line comments start with "//"
Multi line comments are enclosed by "/*" and "*/".
Code indentation is not necessary.

Variable Declaration

Variables are declared with the keyword var.
The data type is not given upon declaration.
Upon declaration, you can but do not have to assign a value to your variable.
If no value is assigned, the variable will have the value undefined.
The assignment operator is a simple "=" sign.

Data Types

JavaScript comprises a number of different data types:

Numbers. JavaScript has only one type of numbers, having floating point precision. E.g., there is no particular data type storing integers.
Booleans. "true" and "false" (no upper case!) are reserved keywords for this data type.
Strings. A series of characters. A string is written with either single or double quotes.
Arrays. Arrays in JavaScript can contain an arbitrary combination of data types, e.g. [1,2,"three"]. Acessing elements in arrays is zero-based in JavaScript.
Objects. Data structures that contain properties, methods, functions...

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 what is used in C++.

Operation	Syntax
Addition	x + y
Subtraction	x - y
Multiplication	x * y
Division	x / y
Modulo	x % y

Postfix Increment	x++
Postfix Decrement	x--
Prefix Increment	++x
Prefix Decrement	--x

Equal	x == y
Unequal	x != y
Greater than	x > y
Greater than or equal	x >= y
Less than	x < y
Less than or equal	x <= y

Logical and	x && y
Logical or	x \|\| y

Binary and	x & y
Binary or	x \| y
Binary xor	x ^ y
Binary not	x ~ y
Binary shift left	x << 2
Binary shift right	x >> 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

You can use the + to concatenate strings and numbers. The result will be a string.
The comparison operator also works with strings.

Functions

In contrast to C++, JavaScript syntax makes no difference between the declaration of a "function" (where something is returned) and a "method" (which only executes certain commands), except for the use of the return keyword.
Corresponding to the case of normal variable declaration, parameters passed to a function are also not required to have a specific data type.

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.

Objects in Javascript are containers for named values representing either properties or functions.
Despite being object oriented, there are no classes in JavaScript.

There are different ways to create new objects:

Define and create a single object using an "object literal"

Use new Object() to create an "empty" object and add properties and methods subsequently.

Declare an object constructor function, which can be used create multiple instances of the prototype object.

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.

Javascript for Interactive Web Applications