# JavaScript/Print version

The current, editable version of this book is available in Wikibooks, the open-content textbooks collection, at
https://en.wikibooks.org/wiki/JavaScript

# Introduction

JS is a programming language that implements the international standard ECMAScript. It is based on the following concepts.

### Dynamic data types

JS knows some primitive data types (Number, String, Boolean, BigInt, Symbol, Undefined, Null) and diverse derivates of the data type object (Array, Date, Error, Function, RegExp). If a variable exists, its type is clearly defined. But the type can be changed at any time by assigning a value of a different type to the variable, e.g.: the code fragment let x; x = 'Some text'; x = 2; x = [10, 11, 12]; is perfectly correct. It will not create a compile-time or run-time error. Only the type of the variable x changes from Undefined to String to Number and lastly to Object/Array.
(Note: JSON is a text-based data format, not a data type. As such, it’s language-independent. It uses the JavaScript object syntax.)

### Functional programming

Functions are first-class citizens similar to variables. They can be assigned to variables, passed as arguments to other functions, or returned from functions. The code fragment function sayHello {return 'Good morning'};let x = sayHello; console.log(x); creates a function sayHello, assigns it to the variable x, and executes it by calling x.

### Object-orientated programming

JS supports object-oriented programming and inheritance through prototypes. A prototype is an object which can be cloned and extended. Doing so, a prototype chain arises. This differs from other OO-languages, e.g. Java, which uses classes for object-oriented features like inheritance. Nevertheless, at the syntactical level, classes are available in JS. But this is only 'syntactical sugar'. Under the hood, JS uses the prototype mechanism.

### C-like syntax

The JS syntax is very similar to that of C, Java, or other members of the C-family. But we must always consider that the concepts and runtime behavior are distinctly different.

### Relation to Java

JS has no relation to Java aside from having a C-like syntax. To avoid possible confusion, we would like to highlight some distinctions between JS and Java clearly.
In the beginning, Netscape developed JavaScript, and Sun Microsystems developed Java. Java includes classes and object instances, whereas JavaScript uses prototypes. In Java, variables must be declared before usage, which is unnecessary (but not recommended) in JS.
In Java, variables have an immutable static type (int or String, for example) that remains the same during the complete lifespan of a running program. In JS they also have a type (Number or String, for example), but this type can change during the lifespan of a running program. The type is detected from the environment. Therefore it's not necessary and not possible to define the type explicitly.

### JS engines

JS can run on the client-side as well as on the server-side. First versions of JS have run in Browsers that acted as mere interpreters. Today, the language is handled by just-in-time compilers (JIT). They parse the script, create an Abstract Syntax Tree (AST), optimize the tree, generate a JIT-specific bytecode out of the AST, generate hardware-specific machine code out of the bytecode, and bring the machine code to execution. Such just-in-time compilers exist not only in Browsers. They can also be part of other applications, e.g.: node.js which is written mainly in C++.
Widely used JS engines are:
* V8 from Google: Google Chrome, Electron, Chromium, node.js
* SpiderMonkey from Mozilla, Firefox
* JavaScriptCore from Apple, Safari
* ActionScript from Adobe, Flash

## References

* ↑ MDN: Data Types
* ↑ MDN: Details on Data Types

# First program

Here is a single JavaScript statement, which creates a pop-up dialog saying "Hello World!":
For the browser to execute the statement, it must be placed inside a HTML <script> element. This element describes which part of the HTML code contains executable code. It will be described in further detail later.
The <script> element should then be nested inside the <head> element of an HTML document. Assuming the page is viewed in a browser that has JavaScript enabled, the browser will execute (carry out) the statement as the page is loading.
This basic 'Hello World' program can then be used as a starting point for any new program that you need to create.

## Exercises

1. Copy and paste the basic program into a file, and save it on your hard disk as 'exercise_1-1.html'. You can run it in different ways:
* By going to the file with a file manager and opening it using a web browser.
* By starting your browser and then opening the file from the menu.
* By starting your browser and then specify the URL to 'exercise_1-1.html' with the file protocol. Please note that a) there are 3 slashes after 'file:' and b) replace 'temp' with the name of your directory.
** Windows: file:///C:/temp/exercise_1-1.html (it's Windows syntax, nevertheless use slash instead of backslash)
** Linux: file:///temp/exercise_1-1.html
What happens?
2. Save the above file as 'exercise_1-2.html'. Replace the double quotes in the line alert("Hello World!"); with single quotes, so it reads alert('Hello World!'); and save the result. If you open this file in the browser, what happens?

# Placing the code

The language JavasScript was originally introduced to run in browsers and handle the dynamic aspects of user interfaces, e.g., validation of user input, modifications of page content (DOM) or appearance of the user interface (CSS), or any event handling. This implies that an interconnection point from HTML to JS must exist. The HTML element <script> plays this role. It is a regular HTML element, and its content is JS.
The <script> element may appear almost anywhere within the HTML file, within <head> as well as in <body>. There are only a few criteria for choosing an optimal place; see below.

## Internal vs. external JavaScript

The <script> element either contains JS code directly, or it points to an external file resp. URL containing the JS code through its src attribute. The first variant is called Internal JavaScript or Inline JavaScript, the second External JavaScript.
In the case of Internal JavaScript the <script> element looks like:
Internal scripting has the advantage that both your HTML and your JS are in one file, which is convenient for quick development. This is commonly used for temporarily testing out some ideas, and in situations where the script code is small or specific to that one page.
For the External JavaScript the <script> element looks like:

### Separate Files for Javascript Code

Having your JS in a separate file is recommended for larger programs, especially for such which are used on multiple pages. Furthermore, such splits support the pattern of Separation of Concerns: One specialist works on HTML, and another on JS. Also, it supports the division of the page's content (HTML) from its behavior (JS).
Overall, using External scripting is considered a best practice for software development.

### Remote Code Injection vs. Local Library

With the example
you can inject remotely maintained code from the server https://example.com in your local web project. Remote code updates may break your local project or unwanted code features may be injected into your web project. On the other hand, centralized maintained and updated libraries serve your project due to bugfixes that are automatically updated in your project when the library is fetched again from the remote server.

### Minified vs. Non-Minified Code

Minified Javascript code compresses the source code e.g. by shorting comprehensive variables like vImage into a single character variable a. This reduces significantly the size of the library and therefore reduces network traffic and response time until the web page is ready. For development and learning it might be helpful to have the uncompressed libraries locally available.

## External JavaScript

For more detailed information you can refer to MDN.

### The src attribute

Adding src="myScript.js" to the opening script tag means that the JS code will be located in a file called myScript.js in the same directory as the HTML file. If the JS file is located somewhere else, you must change the src attribute to that path. For example, if it is located in a subdirectory called js, it reads src="js/myScript.js".

### The type attribute

JS is not the only scripting language for Web development, but JS is the most common one on client-side (PHP runs on server-side). Therefore it's considered the default script type for HTML5. The formal notation for the type is: type="text/javascript". Older HTML versions know a lot of other script types. Nowadays, all of them are graded as legacy. Some examples are: application/javascript, text/javascript1.5, text/jscript, or text/livescript.
In HTML5, the spec says that - if you use JS - the type attribute should be omitted from the script element, for Internal Scripting as well as for External Scripting.

### The async and defer attributes

Old browsers use only one or two threads to read and parse HTML, JS, CSS, ... . This may lead to a bad user experience (UX) because of the latency time when loading HTML, JS, CSS, images, ... sequentially one after the next. When the page loads for the first time, the user may have the impression of a slow system.
Current browsers can execute many tasks in parallel. To initiate this parallel execution with regards to JS loading and execution, the <script> element can be extended with the two attributes async and defer.
The attribute async leads to asynchronous script loading (in parallel with other tasks), and execution as soon as it is available.
defer acts similar. It differs from async in that the execution is deferred until the page is fully parsed.

## Location of <script> elements

The script element may appear almost anywhere within the HTML file. But there are, however, some best practices for speeding up a website. Some people suggest to locate it just before the closing </body> tag. This speeds up downloading, and also allows for direct manipulation of the Document Object Model (DOM) while it is rendered. But a similar behavior is initiated by the above-described async and defer attributes.

## The <noscript> element

It may happen that people have deactivated JS in their browsers for security or other reasons. Or, they use very old browsers which are not able to run JS at all. To inform users in such cases about the situation, there is the <noscript> element. It contains text that will be shown in the browser. The text shall explain that no JS code will be executed.

## JavaScript in XHTML files

XHTML uses a stricter syntax than HTML. This leads to small differences.
First, for Internal JavaScript it's necessary that the scripts are introduced and finished with the two additional lines shown in the following example.
Second, for External JavaScript the type attribute is required.

## Reference

* ↑ MDN: The script element
* ↑ WHATWG: The type attribute
* ↑ Yahoo: Best practices for speeding up your website

# Other Script Types

The script element will work in most browsers, because JavaScript is currently the default scripting language of the world wide web. In HTML5, the current spec says that developers should omit the type attribute from script tags, although previously it was recommended to specify what type of script you are using in case the default scripting language changes.
Instead of specifying the scripting language individually in the script element itself, you may also use a meta tag in the head of the document to specify a default scripting language for the entire page.
While the text/javascript was formally obsoleted in April 2006 by RFC 4329 in favour of application/javascript, it is still preferable to continue using text/javascript due to HTML validators' and Internet Explorer web browsers' inability to understand application/javascript

## References

* ↑ https://html.spec.whatwg.org/dev/scripting.html#attr-script-type
* ↑ RFC 4329: Scripting Media Types
* ↑ "application/javascript" and "application/ecmasscript" media types not recognized.

# Syntax examples

These are simple examples of JavaScript syntax.
Variables in JavaScript can be defined using either the var, let or const keywords. Variables defined without keywords will be defined at the global scope.
Note the comments in the examples above, all of which were preceded with two forward slashes.
There is no built-in input/output functionality in JavaScript, instead it is provided by the run-time environment. The ECMAScript specification in edition 5.1 mentions that "there are no provisions in this specification for input of external data or output of computed results". However, most runtime environments have a console object that can be used to print output. Here is a minimalist "Hello, World!" program in JavaScript in a runtime environment with a console object:
In HTML documents, a program like this is required for an output:
A simple recursive function to calculate the factorial of a natural number:
An anonymous function (or lambda):
This example shows that, in JavaScript, function closures capture their non-local variables by reference.
Arrow functions were first introduced in 6th Edition – ECMAScript 2015. They shorten the syntax for writing functions in JavaScript. Arrow functions are anonymous, so a variable is needed to refer to them in order to invoke them after their creation, unless surrounded by parenthesis and executed immediately.
Example of arrow function:
In JavaScript, objects can be created as instances of a class.
Object class example:
In JavaScript, objects can be instantiated directly from a function.
Object functional example:
Variadic function demonstration (arguments is a special variable):
Immediately-invoked function expressions are often used to create closures. Closures allow gathering properties and methods in a namespace and making some of them private:
Generator objects (in the form of generator functions) provide a function which can be called, exited, and re-entered while maintaining internal context (statefulness).
JavaScript can export and import from modules:
Export example:
Import example:

### More advanced example

This sample code displays various JavaScript features.
The following output should be displayed in the browser window.

## References

* ↑ "var – JavaScript". The Mozilla Developer Network. Archived from the original on December 23, 2012. Retrieved December 22, 2012.
* ↑ "let". MDN web docs. Mozilla. Archived from the original on May 28, 2019. Retrieved June 27, 2018.
* ↑ "const". MDN web docs. Mozilla. Archived from the original on June 28, 2018. Retrieved June 27, 2018.
* ↑ "ECMAScript Language Specification – ECMA-262 Edition 5.1". Ecma International. Archived from the original on November 26, 2012. Retrieved December 22, 2012.
* ↑ "console". Mozilla Developer Network. Mozilla. Archived from the original on February 28, 2013. Retrieved April 6, 2013.
* ↑ "arguments". Mozilla Developer Network. Mozilla. Archived from the original on April 13, 2013. Retrieved April 6, 2013.
* ↑ "function* - JavaScript | MDN". developer.mozilla.org. Retrieved 2022-09-27.
* ↑ "JavaScript modules". MDN Web Docs. Mozilla. Archived from the original on 17 July 2022. Retrieved 28 July 2022.

# Lexical structure
## Summary

* All elements of the language are case-sensitive, e.g.: const x = 0; const X = 0; defines two different variables; CONST x = 0; leads to a syntax error.
* Single line comments are introduced by //. Multi-line comments are surrounded with /* */.
* Semicolons for ending a statement are optional - with few exceptions.
* The first character of a variable name cannot be a number: const 1x = 0; leads to a syntax error.

## Case Sensitivity

JavaScript is case-sensitive. This means that all keywords, variable names, and function names must be written consistently. If you create a function Hello it is different from the function HELLO, hello, or hEllo. Or, the statement IF (x > 0) { } leads to a syntax error because the keyword if is defined in lower-case.

## Whitespaces

Whitespace includes spaces, tabs, and line breaks. If there is a sequence of multiple whitespaces, JavaScript reduces them to a single whitespace, e.g: ' ' -> ' ', '\n\t' -> '\n'. This single remaining whitespace delimits the language elements like keywords and variable names, ... from each other. The resulting source code is hard to read for people but (a little) easier to parse by the browser. The main advantage is the smaller size of the code which must be transferred between server and client.
The following script is an example with very little whitespace.
The following is the same script with a typical amount of whitespace.
The following is the same script with a typical amount of whitespace.
The following is the same script with a lot of whitespaces.

## Comments

Comments are parts of the source code that will - per definition - not be executed.
They allow you to leave notes in your code to help other people understand it. They also allow you to comment out code that you want to hide from the parser but you don't want to delete.

### Single-line comments

A double slash // turns all of the following text on the same line into a comment that will not be processed by the JavaScript interpreter.

### Multi-line comments

Multi-line comments start with /* and end with the reverse */. Multi-line comments don't nest.
Here is an example of how to use the different types of commenting techniques.

## Semicolons

In many programming languages, semicolons are required at the end of each code statement. In JavaScript, the use of semicolons is optional, as a new line indicates the end of the statement (with some exceptions). This is called automatic semicolon insertion.
But the exceptions can be quite surprising. Automatic semicolon insertion can create hard to debug problems.
The above code is not interpreted as two statements. Because of the parentheses on the second line, JavaScript interprets the above as if it were
when instead, you may have meant it to be interpreted as
Even though semicolons are optional, it's preferable to end statements with a semicolon to prevent any misunderstandings from taking place.

## Literals

A literal is a hard-coded value. Literals provide a means of expressing specific values in your script. For example, to the right of the equals sign:
There are several types of literals available. The most common are the string literals, but there are also numeric literals, booleans, undefined, null, regex literals, array literals, and object literals.
Examples of an object, a boolean, and a string literal:
Details of these different types are covered in Variables and Types.

## Identifiers

An identifier is a name for a piece of data, such as a variable, array, or function. There are rules:
* Letters, dollar signs, underscores, and numbers are allowed in identifiers.
* The first character cannot be a number.
Examples of valid identifiers:
* u
* $hello
* _Hello
* hello90
1A2B3C is an invalid identifier, as it starts with a number.
An example of 'identifiers' are variable names. They obey such rules.
* Uppercase and lowercase letters, underscores, and dollar signs can be used.
* Numbers are allowed after the first character.
* Non-latin characters like "á" can be used in variable names as long as they have the Unicode properties "ID_Start" or "ID_Continue" for the start or rest of the name respectively. Special characters are not allowed.
* Variable names are case sensitive: different case means a different name.
* A variable may not be a reserved word.

## Exercises

    ... are available on another page (click here).

## Notes

* ↑ Technically vertical tab, zero-width non-breaking space, and any Unicode character with the "Space Separator" category also count as whitespace.

## References

* ↑ ECMAScript Language Specification, Chapter 12.2 - White Space
* ↑ Khan Academy
* ↑ ECMA-262 ECMAScript Language Specification, Chapter 12.9 - Automatic Semicolon Insertion
* ↑ ECMAScript Language Specification, the IdentifierName production

# Automatic semicolon insertion

Automatic Semicolon Insertion (ASI)
In languages of the C-family, the semicolon denotes the end of a statement. Unlike other C-like languages, JavaScript doesn't enforce that. Instead, the semicolon is optional, and the interpreter adds missing semicolons - mostly at the end of a line - to terminate statements. Doing so, it takes complex rules into account. This may conflict with the intended purpose.
If you write your code without semicolons at the end of statements you must take care of problematic situations. Here are some rules-of-thumb to avoid problems. But there are many more rules.
* The expression after one of the keywords return, throw, or yield must be on the same line as the keyword itself.
* The label identifier after break or continue must be on the same line as the keyword.
* If a line starts with one of (, [, `, +, -, or /, end the previous line with a semicolon. Examples
| Entered code .. | .. interpreted as | intended code |
| return 2a + 1 | return; 2a + 1; | return 2*a + 1; |
| function getObject { return { // some lines } } | function getObject { return; { // some lines }; } | function getObject { return { // some lines }; } |
| i ++ | i; ++; | i++; |
In the first case, the programmer intended 2*a + 1 to be returned; instead, the code returned undefined. Similarly, in the second case, the programmer intended to return the lines enclosed by the braces, but the code returned undefined. Due to this oddity in JavaScript, it is considered a best practice never to have lines break within a statement and never have the opening brace on a separate line.

## See also

* MDN reference
* ECMA reference
* Whitespaces & semicolons in JavaScript

# Reserved words

In JavaScript, some tokens (words) have a special semantic (meaning). Therefore they cannot be used as names of variables, functions, classes, etc. Some of them are generally reserved words; others are reserved only in a special context; others are reserved for possible future usage without having a special functionality nowadays; others have been defined in outdated ECMAScript versions of the years 1997 - 99.
The list of such special words as of 2022 follows. For some of the words, we offer further information.
* abstract
* await
* boolean
* break
* byte
* case
* catch
* char
* class
* const
* continue
* debugger
* default
* delete
* do
* double
* else
* enum
* export
* extends
* false
* final
* finally
* float
* for
* function
* goto
* if
* implements
* import
* in
* instanceof
* int
* interface
* let
* long
* native
* new
* null
* package
* private
* protected
* public
* return
* short
* static
* super
* switch
* synchronized
* this
* throw
* throws
* transient
* true
* try
* typeof
* var
* void
* volatile
* while
* with
* yield
Furthermore, there are predefined methods like forEach, predefined modules like Math, or predefined objects like BigInt whose names should be avoided also.

## References

* ↑ ECMA: Keywords
* ↑ MDN: Keywords

# Variables and types
## Purpose

Computer languages need to use variables. Why this? In most cases, programs don't solve single problems like the very concrete question: What is the circumference of a circle with a radius of 5 cm? Such a concrete question can be solved without using variables: alert (2 * 5 * 3.14); Instead, most questions are more general: What is the circumference of a circle with an arbitrary radius? You don't want to write a program for a radius of 5 cm, another program for a radius of 6 cm, another one for a radius of 7 cm, and so on. You want to write a single program that computes the circumference for all possible radii. The program needs input (from a user, from another program, from a database, ...) that tells him for which value it shall run. let r = prompt("How big is the radius of your circle?"); alert (2 * r * 3.14);, or even better: let r = prompt("How big is the radius of your circle?"); alert (2 * r * Math.PI);.
Those two examples are flexible. They ask the user for the desired radius, store the given value in a variable with the name r, and compute the circumference using this variable. The variable r is introduced by the keyword let. And there is a second variable. The module Math has predefined a variable PI with the keyword const: const PI = 3.141592653589793;.
In JavaScript, variables can be used similarly to variables in mathematical formulas. During runtime, the values of variables are stored in the main memory of the computer (RAM), from where they can be used at a later moment in the lifetime of the program. You can imagine a variable as a small box where you deposit some value and take it out whenever you need it.
Variables are a cornerstone in the transition from individual problem solving to a strategy, respectively an algorithm.

## Declaration and initialization

If you want to use a variable, we recommend declaring them explicitly. This is not mandatory but has strong benefits.
In many cases, the declaration is accompanied by an initialization, e.g. let x = 0;. The declaration is let x;, and the initialization is x = 0;. But it's also possible to omit the initialization part: let x; which causes the value of the variable to be undefined.

### Keyword let

The keyword let introduces a variable whose value may be changed multiple times.

### Keyword const

The keyword const introduces a variable that must be initialized immediately. Moreover, this very first value can never be changed. That helps the JavaScript engine to optimize the code for better performance. Use const as often as possible.
When you work with objects, e.g., with arrays, in combination with the keyword const, it's the same: you cannot assign another value (object, array, number, or whatever) to the variable. Nevertheless, its elements can be changed.
In some cases const variables are written in uppercase, e.g., PI. This is a convention and not mandatory.

### Keyword var

At first glance, var is identical to let. But the range where such variables are known is different from the variables declared by var; see chapter Scope below.

### Omitting the declaration

You can assign a value to a variable without declaring the variable previously. "JavaScript used to allow assigning to undeclared variables, which creates an undeclared global variable. This is an error in strict mode and should be avoided altogether." In other words: The variable goes to global scope, see below. As long as you don't have good reasons you should avoid using the global scope because its usage tends to create unwanted side effects.
Sometimes such situations occur by accident. If there is a typing error in the source code, JavaScript uses two different variables: the original one and a new one with the wrongly typed name - even if you use one of the keywords let, const, or var.
You can instruct JavaScript to search for such typos by inserting the command "use strict"; as the first line of your scripts.

## Data types

Programmers who are familiar with (strict) typed languages like Java may miss in the above chapter the possibility of defining the type of variables. JavaScript knows many different data types. But their handling and behavior is very different from that in Java. In the next chapter you will learn about that.

## Scope

A scope is a range of consecutive JavaScript statements with a clearly defined start and end. JavaScript knows four types of scopes: block, function, module, and global scope. Depending on the kind of declaration and the location of the declaration, variables are within such scopes. They are 'visible' respectively 'accessible' only within their scope. If you try to access them from outside, an error will occur.

### Block scope

A pair of curly brackets creates a block. Variables declared within a block by let or const are bound to this block and cannot be accessed outside.
The variable x is declared inside a block (in this simple example, the block consists of only two lines.) It is not accessible behind the end of the block, which is the closing curly bracket } in the else line. The same applies to the case that the variable x is declared with const instead of let.
Be careful with the keyword var; its semantics is different! First, var is not block-scoped. Second, it leads to a technique called hoisting, which has been used in JavaScript since its first days. Hoisting changes the semantics of different declarations 'under the hood'. Concerning var, it splits declaration and initialization into two separate statements and shifts the declaration part to the top of the current scope. Hence the variable is declared but not initialized if you use it before the line where it is declared in the source.
The script
is changed to:
On the other hand, the keyword let keeps the declaration in the line where it is written.
There are more differences. Here is a version of the first example of this chapter replacing let by var:
We recommend avoiding var completely because of two reasons:
* JavaScript's hoisting technique is not easy to understand.
* Other members of the C-family languages don't know it.
Instead of using var, use the keyword let.

### Function scope

A function creates its own scope. Variables declared in the function's scope cannot be accessed from outside.
The function scope is sometimes called the local scope because this was the name in older ECMAScript versions.
See also: Closures works the other way round - access of outer variables inside the function.

### Module scope

It is possible to divide huge scripts into multiple files and let the functions and variables communicate with each other. Each file creates its own scope, the module scope. The chapter JavaScript/Modules explains more about that.

### Global scope

Variables or functions are in global scope if they are declared at the top level of a script (outside of all blocks and functions).
x is declared at the top level, hence it is in the global scope and can be used everywhere. But in the next example the declaration of x is wrapped by { }. Hence it is no longer in global scope.
Hint: The use of the global scope isn't considered good practice. It tends to create unwanted side effects. Instead, try to modularize your code and let the parts communicate via interfaces.

## Exercises

    ... are available on another page (click here).

## See also

* Closures

## References

* ↑ MDN: Variable declarations

# Numbers

Primitive types use a fixed format; some can contain only a limited number of certain values. In contrast, objects are more complex, especially including methods and properties.
With the exception of null and undefined, primitive types have a corresponding object wrapper with data type specific methods. Therefore you will find on this page descriptions of some methods.

## String

String is a datatype to hold text of arbitrary length. String variables are created by assigning a string literal to them. String literals can be enclosed in " " or ' '.
If your string literal contains a " or ', you can use the other one as the outer delimiter, or you escape them with a \ .
If your string literal is computed out of some fixed text plus some dynamic parts, you can use the template literal technique. Here, the literal is enclosed in backticks ` ` and contains variables and expressions.
The + operator concatenates two strings, e.g. alert("Hello " + "world!");. Additionally, there are a lot of methods for strings.
Hint: JavaScript doesn't have something like a 'character' or 'byte' data type.

## Properties and methods for strings

We show some methods which are often used. For a complete list, please refer to MDN.

### length

length is a property, not a method. Hence there are no parenthesizes. It returns the length of the string as a whole number.

### includes(searchText)

The method returns true if the string contains a specified string, otherwise it returns false.

### concat(text)

The method returns a string where 'text' is appended to the original string.

### indexOf(searchText)

The method returns the position of the first occurrence of 'searchText', starting with 0. If 'searchText' cannot be found, -1 is returned. The method acts case sensitive.

### search(regularExpression)

The method compares the string with a regular expression (=pattern), returning the index of the first match in the string. It is similar to indexOf, but much more powerful. E.g.: it can be made case insensitive by replacing the quotation marks in "hello" with forward slashes and an i at the end.

### lastIndexOf(searchText)

The method returns the position of the last occurrence of 'searchText'. If 'searchText' cannot be found, -1 is returned. The method acts case sensitive.

### replace(text, newtext)

The method returns a string where 'text' is replaced by 'NewText' on the original string. Only the first occurrence is replaced. The method acts case sensitive.
As you can see, the replace method only returns the new content and does not modify the origin string in 'foo'.

### slice(start [, end])

The method returns a substring beginning at the 'start' position.
When the 'end' is provided, they are extracted up to, but not including the end position.
slice allows extracting text referenced from the end of the string by using negative indexing.
Unlike substring, the slice method never swaps the 'start' and 'end' positions. If the 'start' is after the 'end', slice will attempt to extract the content as presented, but will most likely provide unexpected results.

### substr(start [, number of characters])

The method is deprecated. Use substring or slice instead.

### substring(start [, end])

The method extracts a substring starting at the 'start' position.
When the 'end' is provided, they are extracted up to, but not including the end position.
substring always works from left to right. If the 'start' position is larger than the 'end' position, substring will swap the values; although sometimes useful, this is not always what you want; different behavior is provided by slice.

### toLowerCase

The method returns the current string in lower case.

### toUpperCase

The method returns the current string in upper case.

## Number

Number is one of the two numeric types (the other one is BigInt). Number stores integer values as well as floating point values in a unified 64-bit format defined by IEEE 754. That means, that JavaScript doesn't have different data types for integers and float like some other languages.
The possible range for such values is approximate -10$^{300}$ to +10$^{300}$ with different precision depending on the distance to 0.
In the range from -(2$^{53}$ − 1) to +2$^{53}$ − 1 there is no uncertainness for integer operations. 2$^{53}$ = 9,007,199,254,740,992 which is a little smaller than 10$^{16}$.
For Number the usual arithmetic operators ('power' is ** and 'modulo' is %), comparison operators (<, >, ...), and bitwise operators are available.
In opposite to some other languages, the division of two whole numbers can result in a number with decimal places, e.g. alert(1/3);.

## Properties and methods for numbers

Working with numbers is supported by many properties and methods. Internally, they are implemented at different areas:
* The built-in object Math provides properties that represent common mathematical constants like π or e. Syntax: Math.xyz (no parenthesis)
* The build-in object Math provides common mathematical functions like sin or log. Syntax: Math.xyz (with parenthesis)
* The object Number provides properties that characterize the implementation of the data type number, like MAX_VALUE or NEGATIVE_INFINITY. Syntax: Number.xyz (no parenthesis)
* The object Number provides static methods that check the relation between numbers and other data types, e.g., isInteger or parseFloat. Syntax: Number.xyz (with parenthesis)
* The object Number provides instance methods that act on concrete number values or variables, e.g., toExponential or toFixed. Syntax: value.xyz (with parenthesis)
We show some properties and methods which are often used. For a complete list, please refer to MDN Math and MDN Numbers.

### Properties

Most commonly used constants:
* Math.E Returns the constant e.
* Math.PI Returns the constant pi.
* Math.LN10 Returns the natural logarithm of 10.
* Math.LN2 Returns the natural logarithm of 2.
* Math.SQRT2 Returns the square root of 2.

### Math.ceil(number)

Returns the smallest integer greater than the number passed as an argument.

### Math.floor(number)

Returns the greatest integer less than the number passed as an argument.

### Math.round(number)

Returns the closest integer to the number passed as an argument.

### Math.max(number_1, number_2)

Returns the higher number from the two numbers passed as arguments.

### Math.min(number_1, number_2)

Returns the lower number from the two numbers passed as arguments.

### Math.random

Generates a pseudo-random number between 0 and 1.

### Number.parseFloat(string)

The two methods parseInt and parseFloat convert strings into numbers. They scan the given string from left to right. When they recognize a character distinct from 0 - 9, they finish scanning and return the converted numbers read so far (parseFloat accepts the decimal point). If the first character is distinct from 0 - 9, they return Math.NaN, meaning Not a Number.
Hint: It's not necessary to specify 'Number.' in the source code.

## BigInt

BigInt is a data type that represents integers of arbitrary length. Hence, it's a variable-length format (conceptually) delimited only by the available RAM.
BigInts are created either by adding a 'n' to the end of an integer literal or by using the BigInt function.
BigInt supports the arithmetic operators + - * / **, comparison operators, and most of the bitwise operators.

## Boolean

Boolean variables can contain one of two possible values, true or false. JavaScript represents false by either a Boolean false, the number 0, NaN, an empty string, or the built-in types undefined or null. Any other values are treated as true.

## Undefined

Variables that have just been declared but not initialized with any value have the data type undefined.

## Null

In JavaScript, null is marked as one of the primitive values, because its behavior is seemingly primitive. However, when using the typeof operator, it returns "object". This is considered a bug, but one which cannot be fixed because it will break too many scripts.

## Symbol

Symbol represents a unique identifier. Symbols may have a descriptor that is given as a string to its constructor.
Symbols are used as keys in objects (embedded in [ ]) to guarantee uniqueness.

## See also

ECMAScript definitions on data types

## Exercises

    ... are available on another page (click here).

## References

* ↑ MDN: Null

# Strings

Primitive types use a fixed format; some can contain only a limited number of certain values. In contrast, objects are more complex, especially including methods and properties.
With the exception of null and undefined, primitive types have a corresponding object wrapper with data type specific methods. Therefore you will find on this page descriptions of some methods.

## String

String is a datatype to hold text of arbitrary length. String variables are created by assigning a string literal to them. String literals can be enclosed in " " or ' '.
If your string literal contains a " or ', you can use the other one as the outer delimiter, or you escape them with a \ .
If your string literal is computed out of some fixed text plus some dynamic parts, you can use the template literal technique. Here, the literal is enclosed in backticks ` ` and contains variables and expressions.
The + operator concatenates two strings, e.g. alert("Hello " + "world!");. Additionally, there are a lot of methods for strings.
Hint: JavaScript doesn't have something like a 'character' or 'byte' data type.

## Properties and methods for strings

We show some methods which are often used. For a complete list, please refer to MDN.

### length

length is a property, not a method. Hence there are no parenthesizes. It returns the length of the string as a whole number.

### includes(searchText)

The method returns true if the string contains a specified string, otherwise it returns false.

### concat(text)

The method returns a string where 'text' is appended to the original string.

### indexOf(searchText)

The method returns the position of the first occurrence of 'searchText', starting with 0. If 'searchText' cannot be found, -1 is returned. The method acts case sensitive.

### search(regularExpression)

The method compares the string with a regular expression (=pattern), returning the index of the first match in the string. It is similar to indexOf, but much more powerful. E.g.: it can be made case insensitive by replacing the quotation marks in "hello" with forward slashes and an i at the end.

### lastIndexOf(searchText)

The method returns the position of the last occurrence of 'searchText'. If 'searchText' cannot be found, -1 is returned. The method acts case sensitive.

### replace(text, newtext)

The method returns a string where 'text' is replaced by 'NewText' on the original string. Only the first occurrence is replaced. The method acts case sensitive.
As you can see, the replace method only returns the new content and does not modify the origin string in 'foo'.

### slice(start [, end])

The method returns a substring beginning at the 'start' position.
When the 'end' is provided, they are extracted up to, but not including the end position.
slice allows extracting text referenced from the end of the string by using negative indexing.
Unlike substring, the slice method never swaps the 'start' and 'end' positions. If the 'start' is after the 'end', slice will attempt to extract the content as presented, but will most likely provide unexpected results.

### substr(start [, number of characters])

The method is deprecated. Use substring or slice instead.

### substring(start [, end])

The method extracts a substring starting at the 'start' position.
When the 'end' is provided, they are extracted up to, but not including the end position.
substring always works from left to right. If the 'start' position is larger than the 'end' position, substring will swap the values; although sometimes useful, this is not always what you want; different behavior is provided by slice.

### toLowerCase

The method returns the current string in lower case.

### toUpperCase

The method returns the current string in upper case.

## Number

Number is one of the two numeric types (the other one is BigInt). Number stores integer values as well as floating point values in a unified 64-bit format defined by IEEE 754. That means, that JavaScript doesn't have different data types for integers and float like some other languages.
The possible range for such values is approximate -10$^{300}$ to +10$^{300}$ with different precision depending on the distance to 0.
In the range from -(2$^{53}$ − 1) to +2$^{53}$ − 1 there is no uncertainness for integer operations. 2$^{53}$ = 9,007,199,254,740,992 which is a little smaller than 10$^{16}$.
For Number the usual arithmetic operators ('power' is ** and 'modulo' is %), comparison operators (<, >, ...), and bitwise operators are available.
In opposite to some other languages, the division of two whole numbers can result in a number with decimal places, e.g. alert(1/3);.

## Properties and methods for numbers

Working with numbers is supported by many properties and methods. Internally, they are implemented at different areas:
* The built-in object Math provides properties that represent common mathematical constants like π or e. Syntax: Math.xyz (no parenthesis)
* The build-in object Math provides common mathematical functions like sin or log. Syntax: Math.xyz (with parenthesis)
* The object Number provides properties that characterize the implementation of the data type number, like MAX_VALUE or NEGATIVE_INFINITY. Syntax: Number.xyz (no parenthesis)
* The object Number provides static methods that check the relation between numbers and other data types, e.g., isInteger or parseFloat. Syntax: Number.xyz (with parenthesis)
* The object Number provides instance methods that act on concrete number values or variables, e.g., toExponential or toFixed. Syntax: value.xyz (with parenthesis)
We show some properties and methods which are often used. For a complete list, please refer to MDN Math and MDN Numbers.

### Properties

Most commonly used constants:
* Math.E Returns the constant e.
* Math.PI Returns the constant pi.
* Math.LN10 Returns the natural logarithm of 10.
* Math.LN2 Returns the natural logarithm of 2.
* Math.SQRT2 Returns the square root of 2.

### Math.ceil(number)

Returns the smallest integer greater than the number passed as an argument.

### Math.floor(number)

Returns the greatest integer less than the number passed as an argument.

### Math.round(number)

Returns the closest integer to the number passed as an argument.

### Math.max(number_1, number_2)

Returns the higher number from the two numbers passed as arguments.

### Math.min(number_1, number_2)

Returns the lower number from the two numbers passed as arguments.

### Math.random

Generates a pseudo-random number between 0 and 1.

### Number.parseFloat(string)

The two methods parseInt and parseFloat convert strings into numbers. They scan the given string from left to right. When they recognize a character distinct from 0 - 9, they finish scanning and return the converted numbers read so far (parseFloat accepts the decimal point). If the first character is distinct from 0 - 9, they return Math.NaN, meaning Not a Number.
Hint: It's not necessary to specify 'Number.' in the source code.

## BigInt

BigInt is a data type that represents integers of arbitrary length. Hence, it's a variable-length format (conceptually) delimited only by the available RAM.
BigInts are created either by adding a 'n' to the end of an integer literal or by using the BigInt function.
BigInt supports the arithmetic operators + - * / **, comparison operators, and most of the bitwise operators.

## Boolean

Boolean variables can contain one of two possible values, true or false. JavaScript represents false by either a Boolean false, the number 0, NaN, an empty string, or the built-in types undefined or null. Any other values are treated as true.

## Undefined

Variables that have just been declared but not initialized with any value have the data type undefined.

## Null

In JavaScript, null is marked as one of the primitive values, because its behavior is seemingly primitive. However, when using the typeof operator, it returns "object". This is considered a bug, but one which cannot be fixed because it will break too many scripts.

## Symbol

Symbol represents a unique identifier. Symbols may have a descriptor that is given as a string to its constructor.
Symbols are used as keys in objects (embedded in [ ]) to guarantee uniqueness.

## See also

ECMAScript definitions on data types

## Exercises

    ... are available on another page (click here).

## References

* ↑ MDN: Null

# Dates

In JavaScript, a Date is an object. Hence it must be explicitly created with the new operator.
Date contains a value that represents the number of milliseconds that have elapsed since January 1, 1970 UTC. It's worth mentioning what it does not contain: There is no information about a timezone within the object. Nevertheless, you can convert it to an appropriate string of any arbitrary time zone. Other methods can select parts like the month or the day of the week, or you can use the number for any computation, and more.

### Constructor

The default constructor creates the Date object as of the current point in time of your computer.
You can pass parameters to the constructor to generate a certain Date object.

### Methods

Some often used methods of Date are:
Static methods
* Date.now: Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC calibrated (plus/minus some hours) to the timezone of your computer.
* Date.UTC(<parameters>): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.
* Date.parse(text): Parsing of strings with Date.parse is strongly discouraged due to browser differences and inconsistencies.
Instance methods
* toISOString: Returns a string in ISO 8601 format.
* getFullYear: Returns the full 4-digit year.
* getMonth: Returns the current month. [0 - 11]
* getDate: Returns the day of the month. [1 - 31]
* getDay: Returns the day of the week. [0 - 6]. Sunday is 0, with the other days of the week taking the next value.
* getHours: Returns hours [0 - 23] based on a 24-hour clock.
* getMinutes: Returns minutes. [0 - 59]
* getSeconds: Returns seconds. [0 - 59]
* getTime: Returns the time in milliseconds since January 1, 1970.
* valueOf: Returns the time in milliseconds since January 1, 1970. Equivalent to getTime.
* getTimezoneOffset: Returns the difference in minutes between UTC and local time.
* setFullYear(year): Stores the full 4-digit year within the Date object.
* setMonth(month, day): Sets the month, and optionally the day within the month. '0' is January, ...

### 'As Integer'

The Date can be returned as an integer by the method valueOf or by prefixing the constructor with a + sign, e.g., to use it for "seeding" a PRNG (Pseudo Random Number Generator) or to perform calculations.

### Timezones

The Date object purely contains a whole number (Integer). It does not know anything about timezones. As long as you don't specify timezones in any form, you work in your local timezone.
But sometimes it's necessary to consider timezones.

### New API: Temporal

The object Date has some inconsistencies and shortcomings, especially: weak timezone support, no support for non-Gregorian calendars, missing calendar functions, and more. Possibly they will be fixed in a new Temporal API in one of the subsequent JavaScript versions.

### Exercises

    ... are available on another page (click here).

# Arrays

In JavaScript, an array is an object where you can store a set of values under a single variable name. So far, it's the same as in many other languages. But there are distinctions.
* It's not necessary that the values are of the same data type. You can put everything you want in an array and worry about the data type later. (But there are also typed arrays where all values have the same data type.)
* When you create an array, you do not need to declare a size - but you can. Arrays grow automatically. This makes arrays very convenient to use, but not well-suited for applications in numerical analysis.
* Because arrays are objects, they have methods and properties you can invoke at will. For example, the .length property indicates how many elements are currently in the array. If you add more elements to the array, the value of the .length gets larger.
* The element-counting starts at 0, which means, for instance, that the 5th element is located with [4].
(Hint: When using arrays, you should always use the bracket notation with non-negative integers, e.g., arr[3] = 42;. Technically, it's also possible to use the dot notation, but this leads - at least for beginners - to unexpected behavior.)

## Create an array

First, as with all objects, there is a constructor.
Next, the JavaScript syntax supports square brackets when creating or working with arrays.
You can predefine the size of an array when declaring it.

## Access an array element

Array elements are accessed for reading or writing with the usual bracket notation.
When you access an element above the array's actual length, the size of the array will grow, and the new element will be created.

## Varying data types

You can store values of different data types within an array.

## Nested arrays

As shown before, an array element may be an array (which itself may contain elements of type array (which itself may contain ...)). This can occur during runtime or during initialization. To access the lower levels directly, you must specify as many bracket pairs as necessary to reach this level.
... and a little more complex

## Properties and methods
### length

length is a property of each array (it's not a method). It represents the number of elements in that array.
Please notice that array indices are zero-based. Therefore the array's length is huger than the last index.

### concat

The concat method returns the combination of two or more arrays. To use it, first, you need two or more arrays to combine.
Then, make a third array and set its value to arr1.concat(arr2).
Note that in this example, the new arr3 array contains the contents of both the arr1 array and the arr2 array.

### join and split

The join method returns a single string that contains all of the elements of an array — separated by a specified delimiter. If the delimiter is not specified, it is set to a comma.
There is also a split method that performs the opposite of join: it operates on a string, divides him into elements based on the specified delimiter, and returns an array that contains those elements. (Hint: split is a method of the data type string, not of array.)
To use join, first make an array.
Then, make a new variable and assign it to abc.join.
You can also use a dedicated delimiter.
Convert it back into an array with the string's split method.

### push

The push method adds one or more elements to the end of an array and returns the array's new length.

### pop

The pop method removes the last element of an array and returns the element.
push and pop work at the end of an array; they reverse their respective effects.

### unshift

The unshift method adds one or more new elements to the beginning of an array and returns the array's new length. It works by 'unshifting' every old element from its old index $i$ to $i+1$, adds the new element to index $0$, and adopts the array's length property. It is comparable with push but works at the beginning of the array.

### shift

The shift method removes the first element of an array and returns the removed element. It works by 'shifting' every old element from its old index $i$ to $i-1$, adopts the array's length property, and returns the old first element. It is comparable with pop but works at the beginning of the array.
unshift and shift work at the beginning of an array; they reverse their respective effects.

## Exercises

    ... are available on another page (click here).

## See also

* MDN: Arrays

# Regular expressions
## Overview

JavaScript implements regular expressions (regex for short) when searching for matches within a string. As with other scripting languages, this allows searching beyond a simple letter-by-letter match, and can even be used to parse strings in a certain format.
Unlike strings, regular expressions are delimited by the slash (/) character, and may have some options appended.
Regular expressions most commonly appear in conjunction with the string.match and string.replace methods.
At a glance, by example:

## Compatibility

JavaScript's set of regular expressions follows the extended set. While copying a Regex pattern from JavaScript to another location may work as expected, some older programs may not function as expected.
* In the search term, \1 is used to back reference a matched group, as in other implementations.
* In the replacement string, $1 is substituted with a matched group in the search, instead of \1.
** Example: "abbc".replace(/(.)\1/g, "$1") => "abc"
* | is magic, \| is literal
* ( is magic, \( is literal
* The syntaxes (?=...), (?!...), (?<=...), and (?<!...) are not available.

## Examples

* Matching
** string = "Hello world!".match(/world/);
** stringArray = "Hello world!".match(/l/g); // Matched strings are returned in a string array
** "abc".match(/a(b)c/)[1] => "b" // Matched subgroup is the second member (having the index "1") of the resulting array
* Replacement
** string = string.replace(/expression without quotation marks/g, "replacement");
** string = string.replace(/escape the slash in this\/way/g, "replacement");
** string = string.replace( ... ).replace ( ... ). replace( ... );
* Test
** if (string.match(/regexp without quotation marks/)) {

## Modifiers

Single-letter modifiers:
| g | Global. The list of matches is returned in an array. |
| i | Case-insensitive search |
| m | Multiline. If the operand string has multiple lines, ^ and $ match the beginning and end of each line within the string, instead of matching the beginning and end of the whole string only: "a\nb\nc".replace(/^b$/g,"d") === "a\nb\nc" "a\nb\nc".replace(/^b$/gm,"d") === "a\nd\nc" |

## Operators

| Operator | Effect |
| \b | Matches boundary of a word. |
| \w | Matches an alphanumeric character, including "_". |
| \W | Negation of \w. |
| \s | Matches a whitespace character (space, tab, newline, formfeed) |
| \S | Negation of \s. |
| \d | Matches a digit. |
| \D | Negation of \d. |

## Function call

For complex operations, a function can process the matched substrings. In the following code, we are capitalizing all the words. It can't be done by a simple replacement, as each letter to capitalize is a different character:
The function is called for each substring. Here is the signature of the function:
* The first parameter is the substring that matches the pattern.
* The next parameters are the captures in the substrings. There are as many parameters as there are captures.
* The next parameter is the index of the beginning of the substring starting from the beginning of the text.
* The last parameter is a remainder of the entire text.
* The return value will be put in the text instead of the matching substring.

## See also

* Regular Expressions - a Wikibook dedicated to regular expressions.
* Perl Regular Expressions Reference - a chapter devoted to regular expressions in a book about the Perl programming language.

## External links

* JavaScript RegExp Object Reference at W3schools.com
* JavaScript RexExp Tester at regular-expressions.info
* Regular Expressions in Javascript at mozilla.org
* JavaScript RegExp Object at mozilla.org

# Operators
## String concatenation

The + operator acts in two different ways depending on the type of its two operands. If one or both of them are strings, it acts as a string concatenator. If both are numeric, it acts as an arithmetic addition.
An example of string concatenation is "one " + "world" resulting in "one world". If one of the two operands isn't a string, it is implicitly converted to a string before the + operation takes place.

## Arithmetic operators

JavaScript has the arithmetic operators +, -, *, /, % (remainder), and ** (exponentiation). These operators work the way you learned in mathematics. Multiplication and division will be calculated before addition and subtraction. If you want to change such precedence, you can use parenthesizes.
Hint: In opposite to some other languages, the division operation may result in a floating point number - it's not always a pure integer.
Some mathematical operations, such as dividing by zero, cause the returned variable to be one of the error values - for example, infinity, or NaN (Not a number).
The return value of the remainder operator maintains the sign of the first operand.
The + and - operators also have unary versions, where they operate only on one variable. When used in this fashion, + returns the number representation of the object, while - returns its negative counterpart.
As noted above, + is also used as the string concatenation operator: If any of its arguments is a string or is otherwise not a number, all arguments are converted to strings and concatenated together. All other arithmetic operators works the other way round: They attempt to convert their arguments into numbers before evaluating.

## Bitwise operators

There are seven bitwise operators: &, |, ^, ~, >>, <<, and >>>.
These operators convert their operands to integers (truncating any floating point towards 0), and perform the specified bitwise operation on them. The logical bitwise operators, &, |, and ^, perform the and, or, and xor on each individual bit and provides the return value. The ~ (not operator) inverts all bits within an integer, and usually appears in combination with the logical bitwise operators.
Two bit shift operators, >>, <<, move the bits in one direction that has a similar effect to multiplying or dividing by a power of two. The final bit-shift operator, >>>, operates the same way, but does not preserve the sign bit when shifting.
These operators are kept for parity with the related programming languages, but are unlikely to be used in most JavaScript programs.

## Assignment operators

The assignment operator = assigns a value to a variable. Primitive types, such as strings and numbers, are assigned directly. However, function and object names are just pointers to the respective function or object. In this case, the assignment operator only changes the reference to the object rather than the object itself. For example, after the following code is executed, "0, 1, 0" will be alerted, even though array_A was passed to the alert, but array_B was changed. This is because they are two references to the same object.
Similarly, after the next code snippet is executed, x is a pointer to an empty array.
If the result of any of the above-shown arithmetic or bitwise operators shall be assigned to its first operand, you can use a shorter syntax. Combine the operator, e.g., +, directly with the assignment operator = resulting in +=. As an example x = x + 5 can be abbreviated as x += 5.
The abbreviated operator/assignment syntax reads:
| Arithmetic | Logical | Shift |
For example, a common usage for += in a for loop:

## Increment operators

Increment and decrement operators are a particular form of arithmetic operators: ++ and --. a++ increments a and returns the old value of a. ++a increments a and returns the new value of a. The decrement operator acts similarly but reduces the variable instead.
As an example, the next operations all perform the same task:

### Pre and post-increment operators

Increment operators may be written before or after a variable. The position decides whether they are pre-increment or post-increment operators, respectively. That affects the operation.
Due to the possibly confusing nature of pre and post-increment behavior, code can be easier to read if you avoid increment operators.

## Comparison operators

Comparison operators determine whether their two operands meet the given condition. They return true or false.
Concerning the 'equal' and 'not-equal' operators, you must take care. == is different from ===. The first one tries to adapt the data type of the two types to each other and then compares the values. The second one compares the types as well as their values and returns only true if type and value are identical: 3 == "0003" is true and 3 === "3" is false.
| Op. | Returns | Notes |
| == | true, if the two operands are equal | May change an operand's type (e.g. a string as an integer). |
| === | true, if the two operands are strictly equal | Does not change operands' types. Returns true if they are the same type and value. |
| != | true, if the two operands are not equal | May change an operand's type (e.g. a string as an integer). |
| !== | true, if the two operands are not strictly equal | Does not change the operands' types. Returns true if they differ in type or value. |
| > | true, if the first operand is greater than the second one | |
| >= | true, if the first operand is greater than or equal to the second one | |
| < | true, if the first operand is less than the second one | |
| <= | true, if the first operand is less than or equal to the second one | |
We recommend using the strict versions (=== and !==) because the simple versions may lead to strange and non-intuitive situations, such as:
... although you might want:

## Logical operators

The logical operators are and, or, and not — written as &&, ||, and !. The first two take two boolean operands each. The third takes one and returns its logical negation.
Operands are boolean values or expressions that evaluate to a boolean value.
&& and || are short circuit operators: if the result is guaranteed after the evaluation of the first operand, it skips the evaluation of the second operand. Due to this, the && operator is also known as the guard operator, and the || operator is known as the default operator.
The ! operator determines the inverse of the given boolean value: true becomes false and false becomes true.
Note: JavaScript represents false by either a Boolean false, the number 0, NaN, an empty string, or the built-in types undefined or null. Any other value is treated as true.
Concerning the precedence of the three operators, ! is evaluated first, followed by &&, and lastly ||.
More details on the relationship between precedence and short-circuiting are explained at MDN

## Other operators

The ? : operator (also called the "ternary" operator) is an abbreviation of the if statement. First, it evaluates the part before the question mark. Then, if true, the part between the question mark and the colon is evaluated and returned, else the part behind the colon.
However, be careful when using it. Even though you can replace verbose and complex if/then/else chains with ternary operators, it may not be a good idea to do so. You can replace
with
The above example is a poor coding style/practice. When other people edit or maintain your code, (which could very possibly be you,) it becomes much more difficult to understand and work with the code.
Instead, it is better to make the code more understandable. Some of the excessive conditional nesting can be removed from the above example.

### delete

delete obj.x unbinds property x from object obj.
The delete keyword deletes a property from an object. It deletes both the value of the property and the property itself. After deletion, the property cannot be used before it is added back again. The delete operator is designed to be used on object properties. It has no effect on variables or functions.

### new

new cl creates a new object of type cl. The cl operand must be a constructor function.

### instanceof

o instanceof c tests whether o is an object created by the constructor c.

### typeof

typeof x returns a string describing the type of x. Following values may be returned.
| Type | returns |
| boolean | "boolean" |
| number | "number" |
| string | "string" |
| function | "function" |
| undefined | "undefined" |
| null | "object" |
| others (array, ...) | "object" |

## Exercises

    ... are available on another page (click here).

## See also

* MDN: Operators

# Control structures

Most programming languages are composed of 'bricks' like tokens (keywords, variables, operators, ...), expressions like myArray.length + 1, statements (delimited by ;), blocks {...}, functions, and modules. At first glance, the execution of the program follows the sequence of statements, top down. But in nearly all cases, it is necessary that the program does not run in the strict order of the written statements. Instead, some parts must run only if certain conditions apply, and others will be omitted and run under different conditions. Or, it may become necessary that some parts are executed repetitively. Other parts may run in parallel and get synchronized later. Or, a function of a different module must compute a value before the next statement can be executed.
In this hierarchy of 'language bricks' the term block is essential for the understanding of the program flow. In JavaScript, a block is a sequence of zero or more statements (or smaller blocks) that are surrounded by braces { // zero or more statements }. The language constructions we discuss here invoke or repeat blocks.

## if / else

The if / else statement (yes, it's a single statement, even though it contains other statements in its blocks) invokes the execution of one of two blocks depending on the evaluation of a condition. The evaluation returns a boolean value. If it is true, the first block is executed; if it is false, the second block is executed. The respectively other block is skipped over.
The else part is optional, i.e. it's possible to use if without the else part and its block.
An example:
If one of the two blocks contains exactly ONE statement, the braces can be omitted. But for the clearness of the code, we recommend the use of a unified syntax with braces.
In many cases, the situation demands more complex decisions than a simple true/false alternative. For example, you may want to know whether a number is negative, zero, or positive. In such cases, a solution might look like this:
You can shorten this code a bit without losing clarity. Because the first else block contains only a single statement - namely the second if - you can omit its braces and combine the first else and the second if within one line.
This is a clear and often-used programming style. It's used in situations where you have a manageable number of choices or where you have to make decisions with multiple variables.

## switch

If the number of decisions grows significantly, the code gets clearer if you use the switch statement instead of a long list of else if conditions.
The switch statement evaluates an expression and steers the flow of statements based on the comparison of its result with the labels behind the keyword case.
If the result of the evaluation matches one of the labels, JavaScript executes the following statements up to the next break or the end of the entire switch. If none of the labels match, execution continues at the default label, or - if none is present - skips the switch statement entirely.
Labels are literals or expressions; e.g., case (2 + 1).toString: is possible.
As soon as a break statement is reached, the execution of the switch gets terminated. Normally it appears at the end of each case to prevent execution of the code of the following cases. But it can be omitted if you intentionally want to execute them in addition to the current ones. In the following example, the same code will run for i equal to 1, 2, or 3.
Because the expression to be evaluated as well as the labels can be complex expressions, it's possible to build very flexible constructions.
The continue keyword does not apply to the switch statement.

## try / catch / finally

If there is a possibility that a runtime error might occur, you can 'catch' that error and perform meaningful actions to handle the situation. E.g., a network connection or a database might no longer be available; a user input leads to a division by zero; ... .
If one of the statements in the critical block raises a runtime error, the execution of its remaining statements is omitted. Instead, the execution invokes the catch block. Lastly, the finally block is executed.
Please note that the finally block is executed in all cases, regardless of whether a runtime error occurs or not. That even applies if the critical or the catch block executes a return statement.

## throw

In the above example, the JavaScript engine throws an exception by itself. In other situations, the JavaScript engine acts in one way or another, but you may want to see it treated differently. E.g., in the case of a division by zero, the engine doesn't throw an error; it assigns Infinity to the result and jumps to the following statement. If you want a different behavior, you can create and throw exceptions by your own program.
If an exception occurs - generated by the JavaScript engine or by your program - and is not caught by a catch block, the script terminates or - if it is a function - it returns control to the calling function. The error handling may be implemented there or in one of the functions which have been called it.

## Exercises

    ... are available on another page (click here).

## Loops

Loops and iterations are other cases where the sequential flow of statements is manipulated by surrounding language constructs. This is described on the next page.

## See also

* MDN: Control program flow and error handling

# Loops

JavaScript supports the repetitive execution of code blocks via the keywords for and while. Similar behavior is offered by the forEach method of data type Array (and similar data types).

## for (;;)

The syntax of the for statement is: for (<initial expression>; <condition>; <final expression>) { <block> }. It is executed based on the following rules:
* The initial expression is executed - exactly once for the complete for statement. Usually, it declares and initiates one or more variables - often numbers with integer values. Sometimes the declaration of the variables is made above the for statement.
* The condition is evaluated. If it returns true, step 3 follows. If it returnsfalse, the for statement terminates.
* The code block is executed.
* The final expression is executed. Usually, it increments or decrements a variable that is part of the condition.
* The loop repeats at step 2.
An example: Show the series of even numbers multiplied by itself (power 2); show the sum over the numbers from 0 to 10.

### Optional syntax parts

The initial expression, the condition, and the final expression are optional. If you omit one or more of them, your script shall perform other useful statements to control the loop. Some examples:

### Nesting

for loops can be nested. You can use a second (or 'inner') loop within the block of the first (or 'outer') loop.
This nesting of loops is also possible in all the below constructs.

## continue / break

Sometimes only parts or the block shall run. This can be realized by one or more if / else statements. If it's appropriate, such conditional statements can be shortened by the keyword continue. If continue is reached, the rest of the block is skipped, and the above step 4 final expression is executed.
This example is very simple. It skips the lower part of the block for the case where i equals to 5. Of course, it can be expressed differently. A more realistic example would be a loop over the result of a database search which skips parts of a complex handling of rows with a specific status.
The break keyword is similar but more rigid than the continue keyword. It skips not only the rest of the block but also terminates the complete loop.
A realistic scenario is a loop over the result of a database search where the connection to the database is broken in the middle of the loop.
You can use continue and break in all forms of the here-discussed variants of loops.

## do while

The syntax of the statement is: do { <block> } while (<condition>). It is executed based on the following rules:
* The block is executed. Because this is the very first step, the block is executed at least 1 time. This is helpful if you want to be sure that something happens under all circumstances.
* The condition is evaluated. If it returns true, step 1 is invoked again. If it returnsfalse, the loop terminates. Please notice that there is no specific part where you can manipulate a variable that is checked in the condition. This must be done somewhere in the block among the other statements.

## while

The syntax of while (<condition>) { <block> } is very similar to the previous do { <block> } while (<condition>). The only difference is that the condition is checked before and not after the block.

## for (x in Object)

This language construct is intended to iterate over the properties of an object. Its syntax is: for (<variable> in <object>) { <block> }. The variable receives the key of all properties - one after the next - of the object. For each of them, the block is executed once.
Arrays are specialized objects. Hence it is possible to use the for..in on arrays. The keys for arrays are integers starting with 0 - and that is precisely what is extracted from the array.
Arrays also accept non-numeric keys, e.g., myArray["four"] = "cuatro";. The for..in loop handles such non-numeric keys - in opposite to the below for..of loop, and in opposite to the traditional for loop at the top of this page.
See also: MDN: for..in

## for (x of Array)

This language construct is intended to iterate over an array. Its syntax is: for (<variable> of <iterable object>) { <block> }. The variable receives all values - one after the next - of the array. For each of them, the block is executed once.
This definition sounds similar to the above definition of the for..in. But there are significant differences:
* It returns the values, not the keys resp. index of the array.
* It works only on all iterable objects (Array, Map, Set, ...). The data type 'object' is not iterable.
* It works only on such keys which are numeric. Non-numerical keys resp. index are silently ignored.
See also: MDN: for..of

## for..in vs. for..of

The differences between the two language constructs are summarized in an example.

## Object.entries method

If you are looking for a loop that processes both keys and values of an object, there is a more straightforward method than the above-shown combination of the for..in with myObj[key]. The data type Object offers the entries method that returns an array. Each element of this array contains an array with two values: the property key and the property value. In other words: the return value of the entries method is a two-dimensional array. And - as usual with arrays - you should use it in combination with for..of.
Hint: The Object.entries as well as the following Array.forEach methods are no 'core' language elements like keywords or the for..in or for..of language constructs. They are methods of the Object respectively Array data type.

## Array.forEach method

The data type Array offers the method forEach. It loops over the elements of the array, returning one element after the next. The interesting point is that it takes a function as its argument. This makes the difference to the divers for and while loops. Such functions are often called callback function.
The method invocation is very easy: myArray.forEach(myFunction). The - possibly - confusing part is that function calls can be abbreviated in various ways.
The first example shows the function call explicitly. It defines the function myFunction which also takes a single argument. When myFunction is called by forEach, the next array element is inserted as the argument to myFunction.
The following examples show some abbreviations of the function invocation syntax.
It depends on your preference, which syntax you use.
In many cases, the called function performs side effects like logging. To calculate values over all array elements, it is necessary to use the technique of closures. In the following example, the variable sum is not defined in the outer context, not in the anonymous function.
All in all, the following rules apply to the forAll method:
* The method can be used for iterable objects like Array, Map, Set. The data type Object is not iterable.
* The method only iterates over such elements which have a numerical key - what is the usual case for arrays.
See also:
    MDN: forEach
    MDN: Iterative methods

## Exercises

    ... are available on another page (click here).

## See also

* MDN: Loops and iterations

# Functions

A function is a block of code that solves a dedicated problem and returns the solution to the calling statement. The function exists in its own context. Hence, functions divide massive programs into smaller 'bricks' which structure the software as well as the software development process.
JavaScript supports the software development paradigm functional programming. Functions are a data type derived from Object; they can be bound to variables, passed as arguments, and returned from other functions, just as any other data type.

## Declaration

Functions can be constructed in three main ways. The first version can be abbreviated further; see below.
The conventional way:
Construction via a variable and an expression:
Construction via the new operator (this version is a little cumbersome):

## Invocation

For the declaration of functions, we have seen 3 variants. For their invocation, there are also 3 variants. The declarations and invocations are independent of each other and you can arbitrarily combine them.
The conventional invocation variant uses the function name followed by parenthesis ( ). Within the parenthesis, there are the function's arguments, if any exist.
If the script runs in a browser, there are two more possibilities. They use the window object that is provided by the browser.
Hint: If you use the function name without the parenthesis, you will receive the function itself (the script), not any result of an invocation.

### Hoisting

Functions are subject to 'hoisting'. This mechanism transfers the declaration of a function automatically to the top of its scope. As a consequence, you can call a function from an upper place in the source code than its declaration.

## Immediately Invoked Function

So far, we have seen the two separate steps declaration and invocation. There is also a syntax variant that allows the combination of both. It is characterized by using parenthesis around the function declaration followed by to invoke that declaration.
This syntax is known as a Immediately Invoked Function Expression (IIEF).

## Arguments

When functions are called, the parameters from the declaration phase are replaced by the arguments of the call. In the above declarations, we used the variable name p as a parameter name. When calling the function, we mostly used the literal "Go" as the argument. At runtime, it replaces all occurrences of p in the function. The above examples demonstarte this technique.

### Call-by-value

Such substitutions are done 'by value' and not 'by reference'. A copy of the argument's original value is passed to the function. If this copied value is changed within the function, the original value outside of the function is not changed.
For objects (all non-primitive data types), this 'call-by-value' has a - possibly - astonishing effect. If the function modifies a property of the object, this change is also seen outside.
When the example runs, it shows that after the invocation of duplication, the changes made by the function are visible not only in the return value. Also, the properties of the original object x have changed. Why this; is it different from the behavior concerning primitive data types? No.
The function receives a copy of the reference to the object. Hence, within the function, the same object is referenced. The object itself exists only one time, but there are two (identical) references to the object. It does not make a difference whether the object's properties are modified by one reference or the other.
Another consequence is - and this may be intuitively the same as with primitive data types (?) - that the modification of the reference itself, e.g., by the creation of a new object, will not be visible in the outer routine. The reference to the new object is stored in the copy of the original reference. Now we have not only two references (with different values) but also two objects.
Note 1: The naming of this argument-passing technique is not used consistently across different languages. Sometimes it is called 'call-by-sharing'. Wikipedia gives an overview.
Note 2: The described consequences of JavaScript's argument-passing are comparable with the consequences of using the keyword const, which declares a variable to be a constant. Such variables cannot be changed. Nevertheless, if they refer to an object, the object's properties can be changed.

### Default values

If a function is invoked with fewer arguments than it contains parameters, the surplus parameters keep undefined. But you can define default values for this case by assigning a value within the function's signature. The missing parameters will get those as their default values.

### Variable number of arguments

For some functions, it is 'normal' that they get involved with different numbers of arguments. For example, think of a function that shows names. firstName and familyName must be given in any case, but it's also possible that an academicTitle or a titleOfNobility must be shown. JavaScript offers different possibilities to handle such situations.

#### Individual checks

The 'normal' parameters, as well as the additional parameters, can be checked to determine whether they contain a value or not.
Every single parameter that may not be given must be individually checked.

#### The 'rest' parameter

If the handling of the optional parameters is structurally identical, the code can be simplified by using the rest operator syntax - mostly in combination with a loop. The syntax of the feature consists of three dots in the function's signature - like in the spread syntax.
How does it work? As part of the function invocation, the JavaScript engine combines the given optional arguments into a single array. (Please note that the calling script does not use an array.) This array is given to the function as the last parameter.
The third and all following arguments of the call are collected into a single array that is available in the function as the last parameter. This allows the use of a loop and simplifies the function's source code.

#### The 'arguments' keyword

In accordance with other members of the C-family of programming languages, JavaScript offers the keyword arguments within functions. It is an Array-like object that contains all given arguments of a function call. You can loop over it or use its length property.
Its functionality is comparable with the above rest syntax. The main difference is that arguments contains all arguments, whereas the rest syntax affects not necessarily all arguments.

## Return

The purpose of a function is to provide a solution of a dedicated problem. This solution is given back to the calling program by the return statement.
Its syntax is return <expression>, where <expression> is optional.
A function runs until it reaches such a return statement (, or an uncatched exception occurs, or behind the last statement). The <expression> may be a simple variable of any data type like return 5, or a complex expression like return myString.length, or is omitted entirely: return.
If there is no <expression> within the return statement, or if no return statement is reached at all, undefined is returned.

## Arrow functions (=>)

Arrow functions are a compact alternative to the above-shown conventional function syntax. They abbreviate some language elements, omit others, and have only a few semantic distinctions in comparison to the original syntax.
They are always anonymous but can be assigned to a variable.
Here is one more example using an array. The forEach method loops over the array and produces one array-element after the next. This is put to the arrow function's single argument e. The arrow function shows e together with a short text.
Other programming languages offer the concept of arrow functions under terms like anonymous functions or lambda expressions.

## Recursive Invokations

Functions can call other functions. In real applications, this is often the case.
A particular situation occurs when they call themselves. This is called a recursive invokation. Of course, this implies the danger of infinite loops. You must change something in the arguments to avoid this hurdle.
Typically the need for such recursive calls arises when an application handles tree structures like bill of materials, a DOM tree, or genealogy information. Here we present the simple to implement mathematical problem of factorial computation.
The factorial is the product of all positive integers less than or equal to a certain number $n$, written as $n!$ . For example, $4!=4\times 3\times 2\times 1=24$ . It can be solved by a loop from $1$ to $n$, but there is also a recursive solution. The factorial of $n$ is the already computed factorial of $(n-1)$ multiplied with $n$, or in formulas: $n!=(n-1)!\times n$ . This thought leads to the correspondent recursive construction of the function:
As long as $n$ is greater than $0$, the script calls factorial again, but time with $n-1$ as the argument. Therefore the arguments converge to $0$. When $0$ is reached, this is the first time the factorial function is not called again. It returns the value of $1$. This number is multiplied by the next higher number from the previous invocation of factorial. The result of the multiplication is returned to the previous invocation of factorial, ... .

## Exercises

    ... are available on another page (click here).

## See also

* MDN: Functions
* MDN: Rest parameter

# Anonymous functions

A function is a block of code that solves a dedicated problem and returns the solution to the calling statement. The function exists in its own context. Hence, functions divide massive programs into smaller 'bricks' which structure the software as well as the software development process.
JavaScript supports the software development paradigm functional programming. Functions are a data type derived from Object; they can be bound to variables, passed as arguments, and returned from other functions, just as any other data type.

## Declaration

Functions can be constructed in three main ways. The first version can be abbreviated further; see below.
The conventional way:
Construction via a variable and an expression:
Construction via the new operator (this version is a little cumbersome):

## Invocation

For the declaration of functions, we have seen 3 variants. For their invocation, there are also 3 variants. The declarations and invocations are independent of each other and you can arbitrarily combine them.
The conventional invocation variant uses the function name followed by parenthesis ( ). Within the parenthesis, there are the function's arguments, if any exist.
If the script runs in a browser, there are two more possibilities. They use the window object that is provided by the browser.
Hint: If you use the function name without the parenthesis, you will receive the function itself (the script), not any result of an invocation.

### Hoisting

Functions are subject to 'hoisting'. This mechanism transfers the declaration of a function automatically to the top of its scope. As a consequence, you can call a function from an upper place in the source code than its declaration.

## Immediately Invoked Function

So far, we have seen the two separate steps declaration and invocation. There is also a syntax variant that allows the combination of both. It is characterized by using parenthesis around the function declaration followed by to invoke that declaration.
This syntax is known as a Immediately Invoked Function Expression (IIEF).

## Arguments

When functions are called, the parameters from the declaration phase are replaced by the arguments of the call. In the above declarations, we used the variable name p as a parameter name. When calling the function, we mostly used the literal "Go" as the argument. At runtime, it replaces all occurrences of p in the function. The above examples demonstarte this technique.

### Call-by-value

Such substitutions are done 'by value' and not 'by reference'. A copy of the argument's original value is passed to the function. If this copied value is changed within the function, the original value outside of the function is not changed.
For objects (all non-primitive data types), this 'call-by-value' has a - possibly - astonishing effect. If the function modifies a property of the object, this change is also seen outside.
When the example runs, it shows that after the invocation of duplication, the changes made by the function are visible not only in the return value. Also, the properties of the original object x have changed. Why this; is it different from the behavior concerning primitive data types? No.
The function receives a copy of the reference to the object. Hence, within the function, the same object is referenced. The object itself exists only one time, but there are two (identical) references to the object. It does not make a difference whether the object's properties are modified by one reference or the other.
Another consequence is - and this may be intuitively the same as with primitive data types (?) - that the modification of the reference itself, e.g., by the creation of a new object, will not be visible in the outer routine. The reference to the new object is stored in the copy of the original reference. Now we have not only two references (with different values) but also two objects.
Note 1: The naming of this argument-passing technique is not used consistently across different languages. Sometimes it is called 'call-by-sharing'. Wikipedia gives an overview.
Note 2: The described consequences of JavaScript's argument-passing are comparable with the consequences of using the keyword const, which declares a variable to be a constant. Such variables cannot be changed. Nevertheless, if they refer to an object, the object's properties can be changed.

### Default values

If a function is invoked with fewer arguments than it contains parameters, the surplus parameters keep undefined. But you can define default values for this case by assigning a value within the function's signature. The missing parameters will get those as their default values.

### Variable number of arguments

For some functions, it is 'normal' that they get involved with different numbers of arguments. For example, think of a function that shows names. firstName and familyName must be given in any case, but it's also possible that an academicTitle or a titleOfNobility must be shown. JavaScript offers different possibilities to handle such situations.

#### Individual checks

The 'normal' parameters, as well as the additional parameters, can be checked to determine whether they contain a value or not.
Every single parameter that may not be given must be individually checked.

#### The 'rest' parameter

If the handling of the optional parameters is structurally identical, the code can be simplified by using the rest operator syntax - mostly in combination with a loop. The syntax of the feature consists of three dots in the function's signature - like in the spread syntax.
How does it work? As part of the function invocation, the JavaScript engine combines the given optional arguments into a single array. (Please note that the calling script does not use an array.) This array is given to the function as the last parameter.
The third and all following arguments of the call are collected into a single array that is available in the function as the last parameter. This allows the use of a loop and simplifies the function's source code.

#### The 'arguments' keyword

In accordance with other members of the C-family of programming languages, JavaScript offers the keyword arguments within functions. It is an Array-like object that contains all given arguments of a function call. You can loop over it or use its length property.
Its functionality is comparable with the above rest syntax. The main difference is that arguments contains all arguments, whereas the rest syntax affects not necessarily all arguments.

## Return

The purpose of a function is to provide a solution of a dedicated problem. This solution is given back to the calling program by the return statement.
Its syntax is return <expression>, where <expression> is optional.
A function runs until it reaches such a return statement (, or an uncatched exception occurs, or behind the last statement). The <expression> may be a simple variable of any data type like return 5, or a complex expression like return myString.length, or is omitted entirely: return.
If there is no <expression> within the return statement, or if no return statement is reached at all, undefined is returned.

## Arrow functions (=>)

Arrow functions are a compact alternative to the above-shown conventional function syntax. They abbreviate some language elements, omit others, and have only a few semantic distinctions in comparison to the original syntax.
They are always anonymous but can be assigned to a variable.
Here is one more example using an array. The forEach method loops over the array and produces one array-element after the next. This is put to the arrow function's single argument e. The arrow function shows e together with a short text.
Other programming languages offer the concept of arrow functions under terms like anonymous functions or lambda expressions.

## Recursive Invokations

Functions can call other functions. In real applications, this is often the case.
A particular situation occurs when they call themselves. This is called a recursive invokation. Of course, this implies the danger of infinite loops. You must change something in the arguments to avoid this hurdle.
Typically the need for such recursive calls arises when an application handles tree structures like bill of materials, a DOM tree, or genealogy information. Here we present the simple to implement mathematical problem of factorial computation.
The factorial is the product of all positive integers less than or equal to a certain number $n$, written as $n!$ . For example, $4!=4\times 3\times 2\times 1=24$ . It can be solved by a loop from $1$ to $n$, but there is also a recursive solution. The factorial of $n$ is the already computed factorial of $(n-1)$ multiplied with $n$, or in formulas: $n!=(n-1)!\times n$ . This thought leads to the correspondent recursive construction of the function:
As long as $n$ is greater than $0$, the script calls factorial again, but time with $n-1$ as the argument. Therefore the arguments converge to $0$. When $0$ is reached, this is the first time the factorial function is not called again. It returns the value of $1$. This number is multiplied by the next higher number from the previous invocation of factorial. The result of the multiplication is returned to the previous invocation of factorial, ... .

## Exercises

    ... are available on another page (click here).

## See also

* MDN: Functions
* MDN: Rest parameter

# Object-based programming

Object-oriented programming (OOP) is a software design paradigm that first arose in the 1960s and gained popularity in the 1990s. It strives for modularization, reusability, encapsulation and hiding of state (data) and behavior (functions), design in a hierarchy of generalization, inheritance, and more.
It allows the components to be as modular as possible. In particular, when a new object type is created, it is expected that it should work without problems when placed in a different environment or new programming project. The benefits of this approach are a shorter development time and easier debugging because you're re-using program code that has already been proven. This 'black box' approach means that data goes into the object and other data comes out of the object, but what goes on inside isn't something you need to concern yourself with.
Over time different techniques have been developed to implement OOP. The most popular ones are the class-based and the prototype-based approach.

## Class-based OOP

Classes are a blueprint that defines all aspects - state as well as behavior - of a group of structurally identical objects. The blueprint is called the class, and the objects instances of that class. Popular members of the C-family languages, especially Java, C++, and C#, implement OOP with this class-based approach.

## Prototype-based OOP

In the prototype-based approach, every object stores its state and behavior. In addition, it has a prototype (or null if it is on top of the hierarchy). Such a prototype is a pointer to another, more general object. All properties of the referenced object are also available in the referencing object. Classes explicitly don't exist in the prototype-based approach.

## OOP in JavaScript "Two jackets for one body"

One of JavaScript's cornerstones is the provision of objects in accordance with the rules of the prototype-based OOP. Objects consist of properties that are key/value pairs holding data as well as methods. One of those properties is always the prototype property '__proto__'. It points to the 'parent' object and, by this, realizes the relationship.
If a requested property is missed on any object, the JavaScript engine searches it in the 'parent' object, 'grandparent' object, and so on. This is called the prototype chain.
All of that applies to user-defined objects and system-defined objects like Arrays or Date in the same way.
Since EcmaScript 2015 (ES6), the syntax offers keywords like class or extends, which are used in class-based approaches. Even though such keywords have been introduced, the fundaments of JavaScript haven't changed: Those keywords lead to prototypes in the same way as before. They are syntactical sugar and get compiled to the conventional prototype technique.
In summary, the syntax of JavaScript offers two ways to express object-oriented features like inheritance in the source code: the 'classical' and the 'class' style. Despite the different syntax, the implementation techniques differ only slightly.

### The classical syntax

Since its first days, JavaScript has defined the parent/child relation of objects with the 'prototype' mechanism. If not explicitly notated in the source code, this happens automatically. The classical syntax exposes it quite well.
To define a parent/child relation of two objects explicitly, you should use the method setPrototypeOf to set the prototype of an object to a dedicated other object. After the method has run, all properties - inclusive functions - of the parent object are known to the child.
The 'adult' object contains the 'familyName' and a function 'showFamily'. In the first step, they are not known in the object 'child'. After setPrototypeOf was running, they are known because the 'child's prototype no longer points to the default 'Object' but to 'adult'.
The next script demonstrates the prototype chain. It starts with the user-defined variables myArray and theObject. myArray is an array with three elements. The assignment operation in line 6 sets theObject to the same array. A loop shows the prototype of theObject and assigns the next higher level of the prototype chain to it. The loop finishes when the top level of the hierarchy is reached. In this case, the prototype is null.
As you know, properties are key/value pairs. Hence it is possible to directly use the value of the 'prototype' property to identify and manipulate prototypes. Interestingly the key's name isn't 'prototype' but '__proto__'. This is shown in line 11. Nevertheless, we recommend ignoring this technique and using API methods for prototype manipulations, such as Object.getPrototypeOf, Object.setPrototypeOf, and Object.create instead.

### The 'class' syntax

The script defines two classes, Adult and Child with some internal properties, one of them being a method. The keyword extends combines the two classes hierarchically. Afterward, in line 21, an instance is created with the keyword new.
The property familyName and the method showFamily are defined in the Adult class. But they are also known in the Child class.
Please note again that this class-based inheritance in JavaScript is implemented on top of the prototype-based classical approach.

## See also

* MDN: OOP in JavaScript
* More Details

# Objects

In JavaScript, an Object is a collection of properties; properties are key-value pairs. The keys are Strings or Symbols. Values can be of any data type - including functions (in this case, they are called methods).
Objects look like associative arrays implemented as hashtables. But in practice, JavaScript engines might have implemented them in other ways to achieve optimal performance.
Please consider that JavaScript objects are not identical to JSON. JSON is a format for a textual representation ('serialization' / 'de-serialization') of objects, which can also be done in other languages or in a pure text editor.

## Create an object

The JavaScript syntax supports different ways to create objects.
'Literal notation' using curly braces { }
Constructor The new Object constructor creates a new object.
Object.create The Object.create method creates a new object from an existing object.

## Read a property

Each property consists of a key-value pair. To read a property's values, you can use its key in one of two syntactical ways, dot notation or bracket notation.
What if you don't know the keys? To get a list of all existing keys, use the method Object.keys. It returns an array whose elements are strings. Those strings may be used in a loop to access the values. Because you need such loops in many cases, JavaScript offers a special language element for that situation. The for .. in loop selects the keys and loops over all properties.
Analog to the Object.keys method there are the two methods Object.values and Object.entries to get the values respectively the properties (key and value). In the latter case, you get an array of arrays (with two elements each).

## Add or modify a property

You can use the dot notation as well as the bracket notation to add or modify properties. There is no difference in the syntax between the above read operations and the write operations.
In the above example, the variable 'person' is created with the keyword const. So it's not possible to assign a new value to it, but it's possible to manipulate its properties. When manipulating properties, the original object keeps unchanged.

## Delete a property

The delete operator removes the complete property from an object - the key as well as the value. This is different from the case where someone stores null or undefined in the value.
Again, you can use the dot notation as well as the bracket notation.

## Merge objects

JavaScript offers a 'spread syntax' (3 dots). It expands an Object to its properties (key-value pairs) or an array to its elements. This can be helpful when you want to merge multiple objects into a single one.

## Functions/methods as part of an object

The value part of a property may contain the body of a function; see here. In this case, the function is called a method.

## Exercises

    ... are available on another page (click here).

# Constructors and prototypes
## Constructor

The new operator creates a new object based on a constructor and a prototype.
The constructor is a function matching the name of the object, and, when called by the new operator, has the keyword this assigned to the newly created instance of the object. The constructor can then assign any initial variables as required.
The constructor can accept parameters - however, it is not possible to overload the constructors by having multiple functions with a different number of parameters.
(The 'new' statement is the most common way to create a new JavaScript object from a constructor function, but a few JavaScript programmers sometimes use alternative techniques. )

## Prototypes

A prototype for an object is the set of auto-created fields and methods. It cannot operate by itself, and relies on an existing constructor.
When the object is created, the fields initialized in the prototype are copied to the newly created object.
Since the prototype of an object behaves as an object, you can use this to create inheritance.

## Dynamically extending objects

Objects within JavaScript are fully dynamic, and fields within an object can instantly be created if they do not already exist. If, for example, you discover that you now need to keep track of the thickness in the coin example, you can simply add the new field to the prototype.
Changing the prototype of an object allows existing instances of the object to gain access to that change.
When a property value has been assigned on a new object, that property takes precedence over the prototype property from its ancestor. If you delete the property from the new object, the chain of inheritance takes you back to the property from the parent object.
To demonstrate, an Animal constructor is used to create an object, a dog called Spot. After that creation, the constructor has a gender property added to it. That gender property is also accessible from the object for Spot.
The gender property can be updated, and if the gender property is deleted from the dog object, it will retrieve the desired property from its ancestor instead, the Animal constructor.

## References

* ↑ Greg Tatum. "Killing JavaScript's this". Examples of JavaScript supporting many alternatives to traditional object-oriented programming. One section "typical object-oriented JavaScript".
* ↑ Douglas Crockford. "Crockford on JavaScript -- Act III: Function the Ultimate" pdf "Crockford on JavaScript -- Act III: Function the Ultimate" video. Describes several different ways to make object constructors in JavaScript.

# Inheritance
## instanceof operator

The instanceof operator determines whether an object was instantiated as a child of another object, returning true if this was the case. instanceof is a binary infix operator whose left operand is an object and whose right operand is an object type. It returns true, if the left operand is of the type specified by the right operand. It differs from the .constructor property in that it "walks up the prototype chain". If object a is of type b, and b is an extension of c, then a instanceof b and a instanceof c both return true, whereas a.constructor === b returns true, while a.constructor === c returns false.

## Inheritance by prototypes

The prototype of an object can be used to create fields and methods for an object. This prototype can be used for inheritance by assigning a new instance of the superclass to the prototype.

## References

* ↑ Matthew Batchelder. "Object Oriented JavaScript" describes one way to implement inheritance in JavaScript.

# Access control
## Access Control

JavaScript does not provide a direct means to control access to internal variables, however, it is possible to restrict access to some variables.
By default, variables within an object are public and can be modified anywhere in the code. As such, any programmer that uses the code in the future may change the internal state of the object unexpectedly, which has the potential for problems. While the easiest protection against this is to properly document your code (e.g. comments showing how to use the object), there are cases where you want to block direct access to a variable.
To declare and use a variable as private, there are two steps required:
* Declare a new variable within the constructor using the var statement.
* Create an anonymous function within the constructor, and assign it as a method for an object.
The example below shows a private field being used:
var privateNumber is normally a local variable that only exists within the function. As you can see, it is accessed in this.getPrivateNumber, which is an anonymous function, attempting to access it directly would result in an error. Since this anonymous function is declared in the constructor, it can use and modify the local variables declared in function MyObject, and keeps a reference to the variable even when the function returns. The anonymous function is bound to an instance of the object, and creating a new MyObject will create a new anonymous function that refers to the new privateNumber.

# Closures

A Closure is a technique where a function is bundled (enclosed) with its surrounding variables, the lexical environment. Typically, Closures are implemented in functional programming languages like JavaScript where they support Currying.

## Lexical environment

First, we show the access of a function to its lexical environment. This alone is not a Closure.
The function incrementByCertainValue increments its parameter by the value of the variable certainValue. Because incrementByCertainValue as well as certainValue are defined within the same block, the function has access to the variable. Whenever the function is called, it reads the variable and uses it to compute its return value.

## Closure

To extend the above example to a Closure, we have to combine an (inner) function with access to variables of its lexical environment - typically another function -, and save this state by returning this inner function.
The (outer) function incrementByCertainValue
    contains a parameter param,
    defines an (inner) function add that takes another parameter certainValue,
    in addition to its parameter, the (inner) function has access - as usual - to its lexical environment where param is defined
    returns the (inner) function.
So far, there are exclusively declarations and no running code.
When the variable incrementByFive is declared in line 12, it is initialized with the return value of the function incrementByCertainValue(5). This is the crucial point where code runs and the Closure technique acts. Within incrementByCertainValue the 5 is known as the parameter/variable param. Next, the function add is created using param from its lexical environment. This function add accepts one parameter that must be given from the calling routine later on. The return statement of incrementByCertainValue delivers this function add that has bound the value '5' into its body. Please note that the function name add is arbitrary and not seen outside of incrementByCertainValue.
When incrementByCertainValue is called a second time with the argument '6', the '6' is bound to a separate, second function.

## Exercises

    ... are available on another page (click here).

## See also

* MDN: Closures
* Wiki: Closures
* Currying in JavaScript (German).

# Debugging
## JavaScript Debuggers
### Firebug

* Firebug is a powerful extension for Firefox that has many development and debugging tools including JavaScript debugger and profiler.

### Venkman JavaScript Debugger

* Venkman JavaScript Debugger (for Mozilla based browsers such as Netscape 7.x, Firefox/Phoenix/Firebird and Mozilla Suite 1.x)
* Introduction to Venkman
* Using Breakpoints in Venkman

### Internet Explorer debugging

* Microsoft Script Debugger (for Internet Explorer) The script debugger is from the Windows 98 and NT era. It has been succeeded by the Developer Toolbar
* Internet Explorer Developer Toolbar
* Microsofts Visual Web Developer Express is Microsofts free version of the Visual Studio IDE. It comes with a JS debugger. For a quick summary of its capabilities see
* Internet Explorer 8 has a firebug-like Web development tool by default (no add-on) which can be accessed by pressing F12. The Web development tool also provides the ability to switch between the IE8 and IE7 rendering engines.

### Safari debugging

Safari includes a powerful set of tools that make it easy to debug, tweak, and optimize a website for peak performance and compatibility. To access them, turn on the Develop menu in Safari preferences. These include Web Inspector, Error Console, disabling functions, and other developer features. The Web Inspector gives you quick and easy access to the richest set of development tools ever included in a browser. From viewing the structure of a page to debugging JavaScript to optimizing performance, the Web Inspector presents its tools in a clean window designed to make developing web applications more efficient. To activate it, choose Show Web Inspector from the Develop menu. The Scripts pane features the powerful JavaScript Debugger in Safari. To use it, choose the Scripts pane in the Web Inspector and click Enable Debugging. The debugger cycles through your page’s JavaScript, stopping when it encounters exceptions or erroneous syntax. The Scripts pane also lets you pause the JavaScript, set breakpoints, and evaluate local variables.

### JTF: JavaScript Unit Testing Farm

* JTF is a collaborative website that enables you to create test cases that will be tested by all browsers. It's the best way to do TDD and to be sure that your code will work well on all browsers.

### jsUnit

* jsUnit

### built-in debugging tools

Some people prefer to send debugging messages to a "debugging console" rather than use the alert function. Following is a brief list of popular browsers and how to access their respective consoles/debugging tools.
* Firefox: Ctrl+Shift+K opens an error console.
* Opera (9.5+): Tools >> Advanced >> Developer Tools opens Dragonfly.
* Chrome: Ctrl+Shift+J opens chrome's "Developer Tools" window, focused on the "console" tab.
* Internet Explorer: F12 opens a firebug-like Web development tool that has various features including the ability to switch between the IE8 and IE7 rendering engines.
* Safari: Cmd+Alt+C opens the WebKit inspector for Safari.

## Common Mistakes

* Carefully read your code for typos.
* Be sure that every "(" is closed by a ")" and every "{" is closed by a "}".
* Trailing commas in Array and Object declarations will throw an error in Microsoft Internet Explorer but not in Gecko-based browsers such as Firefox.
* Remember that JavaScript is case sensitive. Look for case related errors.
* Don't use Reserved Words as variable names, function names or loop labels.
* Escape quotes in strings with a "\" or the JavaScript interpreter will think a new string is being started, i.e:
    alert('He's eating food'); should be
    alert('He\'s eating food'); or
    alert("He's eating food");
* When converting strings to numbers using the parseInt function, remember that "08" and "09" (e.g. in datetimes) indicate an octal number, because of the prefix zero. Using parseInt using a radix of 10 prevents wrong conversion. var n = parseInt('09',10);
* Remember that JavaScript is platform independent, but is not browser independent. Because there are no properly enforced standards, there are functions, properties and even objects that may be available in one browser, but not available in another, e.g. Mozilla / Gecko Arrays have an indexOf function; Microsoft Internet Explorer does not.

## Debugging Methods

Debugging in JavaScript doesn't differ very much from debugging in most other programming languages. See the article at Computer Programming Principles/Maintaining/Debugging.

### Following Variables as a Script is Running

The most basic way to inspect variables while running is a simple alert call. However some development environments allow you to step through your code, inspecting variables as you go. These kind of environments may allow you to change variables while the program is paused.

## Browser Bugs

Sometimes the browser is buggy, not your script. This means you must find a workaround.
Browser bug reports

## browser-dependent code

Some advanced features of JavaScript don't work in some browsers.
Too often our first reaction is: Detect which browser the user is using, then do something the cool way if the user's browser is one of the ones that support it. Otherwise skip it.
Instead of using a "browser detect", a much better approach is to write "object detection" JavaScript to detect if the user's browser supports the particular object (method, array or property) we want to use.
To find out if a method, property, or other object exists, and run code if it does, we write code like this:

## Further reading

* "JavaScript Debugging" by Ben Bucksch

## References

* ↑ "Safari - The best way to see the sites" (HTML). Apple. Retrieved 2015-03-09.

# Optimization
## JavaScript optimization
### Optimization Techniques

* High Level Optimization
** Algorithmic Optimization (Mathematical Analysis)
** Simplification
* Low Level Optimization
** Loop Unrolling
** Strength Reduction
** Duff's Device
** Clean Loops
* External Tools & Libraries for speeding/optimizing/compressing JavaScript code

## Common Mistakes and Misconceptions
### String concatenation

Strings in JavaScript are immutable objects. This means that once you create a string object, to modify it, another string object must theoretically be created.
Now, suppose you want to perform a ROT-13 on all the characters in a long string. Supposing you have a rot13 function, the obvious way to do this might be:
Especially in older browsers like Internet Explorer 6, this will be very slow. This is because, at each iteration, the entire string must be copied before the new letter is appended.
One way to make this script faster might be to create an array of characters, then join it:
Internet Explorer 6 will run this code faster. However, since the original code is so obvious and easy to write, most modern browsers have improved the handling of such concatenations. On some browsers the original code may be faster than this code.
A second way to improve the speed of this code is to break up the string being written to. For instance, if this is normal text, a space might make a good separator:
This way the bulk of the new string is copied much less often, because individual characters are added to a smaller temporary string.
A third way to really improve the speed in a for loop, is to move the [array].length statement outside the condition statement. In face, every occurrence, the [array].length will be re-calculate For a two occurrences loop, the result will not be visible, but (for example) in a five thousand occurrence loop, you'll see the difference. It can be explained with a simple calculation :
"x = 0" is evaluated only one time, so it's only one operation.
"x < myArray.length" is evaluated 5000 times, so it is 10,000 operations (myArray.length is an operation and compare myArray.length with x, is another operation).
"x++" is evaluated 5000 times, so it's 5000 operations.
There is a total of 15 001 operation.
"x = 0" is evaluated only one time, so it's only one operation.
"l = myArray.length" is evaluated only one time, so it's only one operation.
"x < l" is evaluated 5000 times, so it is 5000 operations (l with x, is one operation).
"x++" is evaluated 5000 times, so it's 5000 operations.
There is a total of 10002 operation.
So, in order to optimize your for loop, you need to make code like this :

# Strict Mode
## The strict mode

Strict mode can be enabled by placing '"use strict";' at the beginning of a script, before other statements:
It can also be enabled for a single function only:
Strict mode ensures the following:
* New variables need to be declared with "var"; "var" is no longer optional.
* Attempts to write to non-writable variables throw an error rather than silently doing nothing.
* Attempts to delete undeletable properties throw an error rather than silently doing nothing.
* Octal numerals are disallowed.
* Etc.
Strict mode is available since JavaScript 1.8.5, i.e. ECMAScript version 5.

## External links

* Strict mode, developer.mozilla.org
* JavaScript Use Strict, w3schools.com
* Strict Mode (JavaScript), msdn.microsoft.com

# Shell

You can play around with JavaScript in one of multiple shells, in interactive batch mode. This means that you can enter JavaScript one line at a time and have it immediately executed; and if you enter a statement that returns a value without assigning the value anywhere, the value is displayed.
For a list of shells, see the mozilla.org list referenced from Enternal links.
Keywords: REPL.

## Standalone

Mozilla Firefox uses SpiderMonkey JavaScript engine, which is available as a standalone interactive shell for multiple platforms. You can download it from:
* https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/
** Look for jsshell-*.zip
Unzip the file, and run "js" from the command line. A prompt appears:
You can enter statements, one at a time:
Multi-line function definitions can be entered one line at a time, pressing enter after each line.
To run JavaScript snippets that use alert function--since they are intended for web browsers, you can define your own alert function:

## From browser

You can have an interactive mode, entering JavaScript one line at a time and have it immediately executed, directly from your web browser.
In many versions of Firefox, press Control + Shift + K to get a web console window. At the bottom of the console window, there is a separate one-line field into which you can enter JavaScript lines and have them run by pressing Enter. Even multi-line function definitions can be entered, but not by pressing Enter but rather Shift + Enter and pressing Enter only after the whole definition was entered.

## External links

* Introduction to the JavaScript shell, developer.mozilla.org
* JavaScript shells, developer.mozilla.org
* JavaScript Engine Speeds, ejohn.org
* JavaScript interactive shell with completion, stackoverflow.com

# Introduction to the Document Object Model (DOM)

HTML pages are internally implemented by a tree that contains the HTML elements (and CSS styles) as its nodes. This tree is called Document-Object Model, or DOM. JavaScript has full access to the DOM. It can navigate through the tree, modify the tree and nodes, ranging from simply adding new nodes to rearranging several areas on the page.
A hint about the terminology: Because of its closeness to XML, HTML uses the term element; and because of its structure as a tree, DOM uses the term node.

## Nodes

When loading into the browser, the HTML document is broken down into a tree of nodes. For example, take a look at the following HTML snippet:
Through DOM, JavaScript sees this snippet as four nodes.
* The div, from its start tag through its end tag, is one node. This div happens to have a property assigned inside its start tag. This property is named "id" and has the value "exampleDiv".
    The three other nodes in this example are inside the div. They are called child nodes of the div, because the div contains them. Conversely, the div is their parent node.
* The first child of the div is a text node, with the value "This is an". Text nodes contain only text; they never contain tags, which is why the tree stops here.
* The br tag is another node.
* The rest of the text is another text node.
Since the text nodes and the br tag all share the same parent, they are said to be sibling nodes.

## Accessing nodes

You can access nodes of the DOM tree by various methods. One of them is getElementById.
When clicking on the button, the function go is called. It accesses the element with the id 'p2' and shows its content.

## Accessing content

If you want to get access to the content of a node, you can use different properties of different classes: Node.textContent, HTMLElement.innerText, or Element.innerHTML. But they are not equal; please consider the differences. To keep our examples clear and easy, we use Element.innerHTML whenever possible because it is very close to the HTML source code.

## Changing content

After accessing a node, you can change its content by assigning a new value to its content.
When clicking on the button, the function go is called. Again, it accesses the element with the id 'p2' and changes its content.

## Modifying the tree structure

JavaScript can manipulate the structure of the DOM tree.
When clicking on the button, the function go is called. It accesses the elements 'body' and 'p2', then, it moves the 'p' element to the end of the 'body'.

## See also

* MDN DOM

# Runtime document manipulation

HTML pages are internally implemented by a tree that contains the HTML elements (and CSS styles) as its nodes. This tree is called Document-Object Model, or DOM. JavaScript has full access to the DOM. It can navigate through the tree, modify the tree and nodes, ranging from simply adding new nodes to rearranging several areas on the page.
A hint about the terminology: Because of its closeness to XML, HTML uses the term element; and because of its structure as a tree, DOM uses the term node.

## Nodes

When loading into the browser, the HTML document is broken down into a tree of nodes. For example, take a look at the following HTML snippet:
Through DOM, JavaScript sees this snippet as four nodes.
* The div, from its start tag through its end tag, is one node. This div happens to have a property assigned inside its start tag. This property is named "id" and has the value "exampleDiv".
    The three other nodes in this example are inside the div. They are called child nodes of the div, because the div contains them. Conversely, the div is their parent node.
* The first child of the div is a text node, with the value "This is an". Text nodes contain only text; they never contain tags, which is why the tree stops here.
* The br tag is another node.
* The rest of the text is another text node.
Since the text nodes and the br tag all share the same parent, they are said to be sibling nodes.

## Accessing nodes

You can access nodes of the DOM tree by various methods. One of them is getElementById.
When clicking on the button, the function go is called. It accesses the element with the id 'p2' and shows its content.

## Accessing content

If you want to get access to the content of a node, you can use different properties of different classes: Node.textContent, HTMLElement.innerText, or Element.innerHTML. But they are not equal; please consider the differences. To keep our examples clear and easy, we use Element.innerHTML whenever possible because it is very close to the HTML source code.

## Changing content

After accessing a node, you can change its content by assigning a new value to its content.
When clicking on the button, the function go is called. Again, it accesses the element with the id 'p2' and changes its content.

## Modifying the tree structure

JavaScript can manipulate the structure of the DOM tree.
When clicking on the button, the function go is called. It accesses the elements 'body' and 'p2', then, it moves the 'p' element to the end of the 'body'.

## See also

* MDN DOM

# Finding elements

To work with nodes of the DOM tree, you need to locate them directly or navigate to them beginning at a starting point. DOM's Document interface serves as an entry point into the web page's content. It offers a rich set of properties and methods to reach particular nodes. The methods return single nodes or an array of nodes.
Clicking on the button invokes the function show. The examples should be included there.

## Using ID

An easy-to-use, fast, and exact method to locate an individual element is to mark the element with the id property in the HTML, e.g., <p id="p2">, and use this id as the parameter to getElementById. The following code snippet will locate the element and displays its content.
The getElementById method returns one single element (the first with this id if the id is not unique).
That is also true if the element is not a text node but a node with child nodes. The return value is a single element with all its child elements included.

## Using tag name

Another way to find elements on an HTML page is the getElementsByTagName method. It accepts a tag name, e.g., 'h1', 'div', or 'p', and returns all such elements in an array.
Here, we use the method to retrieve an array of all 'div' elements.

## Using class name

Next, elements can be located by an associated CSS class selector. Class selectors can have a complex syntax. Here, we use only the simple form of class names.
The example retrieves all elements that use the CSS class text - what is done by the 3 paragraphs of the first div. Please note, that the other paragraphs are not retrieved.

## Using a query selector

The shown locating methods use specialized semantics to locate elements. But there is also a general method that combines all of that - plus more.
Query selectors use a complex syntax consisting of HTML element ids, HTML element names, HTML attributes, CSS classes, positions, and more. They locate single elements or a list of elements. To retrieve the first element which satisfies the selector, use the querySelector method. If you want to retrieve all matching elements, use querySelectorAll.

## Navigating the DOM tree

You can navigate in the DOM tree in the direction from the root to the leaves. This is done by locating an element and using this node as the new root for the following navigation steps.

## See also

* DOM methods

## Exercises

    ... are available on another page (click here).

# Adding elements

DOM's Document interface offers - among other things - functions that create new elements, including their attributes and content, and joins them together or into an existing DOM.
createElement creates an element. createAttribute creates an attribute that can be assigned to this new or an already existing element. setAttribute creates an attribute and links it to an existing element. appendChild integrate an element into another.

## Creating elements

Now, the element and its content are created. But until here, they are not part of a DOM. They exist only in the memory of the JavaScript engine.
To integrate them into the page, we retrieve the body or any other element of an existing page and append the new element as its last element.
All in all, the HTML plus JavaScript looks like this:
The original page does not contain a paragraph. But after you click on the button, the paragraph is integrated into the page and is visible. Btw: You can click more than once on the button. What will happen?

## Creating attributes

Attributes are created with either the createAttribute or the setAttribute function. The first of the two acts like the above shown createElement function. It creates the new attribute only in memory without a connection to other elements. Because setAttribute integrates the new attribute directly into an element, we use this variant.
The example uses the a element with its href attribute.
Now, the element, a single attribute, and the element's content are created. Again, we integrate them into the page as we have done above.
All in all, the HTML plus JavaScript looks like this:
The original page does not contain a link. But after you click on the button, the link to the IANA example page is integrated into the page and is usable.

### Alternative syntax

One of the previous pages has explained how to change attributes with a different syntax.
Just use the element plus its attribute name and assign the attribute value to it. If you change the previous example to this syntax, you will reach the same behavior of adding the link.

## Join the puzzles pieces

The shown functions create elements and attributes. Such new objects can be joined together to create huger parts - of course in a nested way. And they can be joined to an already existing HTML page, respectively, the DOM tree.

## 'Misusing' innerHTML

The content of an element can be changed by assigning a new value to its property innerHTML. If this new value contains the string representation of an HTML fragment, the assignment creates child nodes within the element. That's possible but not the intended way of using innerHTML.
.. leads to ..
The JavaScript fragment inserts two more paragraphs, but not behind the first one. They exist within the first one.

## write

The antiquated function document.write was able to insert new elements into an HTML page. Its usage is strongly discouraged nowadays.

## See also

* MDN Create Element
* MDN Set Attribute
* MDN Append Child

## Exercises

    ... are available on another page (click here).

# Changing elements

On this page, we show how to change two different things of an HTML element, respectively, DOM node.
* Its content (there is only one - or none)
* Any of its attributes (there may be many)
Please take note of this distinction between content and attributes.

## Example page

We use the following example HTML page to demonstrate the possibilities.
Clicking on the button invokes the function show. The examples should be included there.

## Change the content

We use the example of a paragraph p. To change its content, the text, just assign the new value to its innerHTML.
Or, to do the same with a different HTML element, we change the SVG graphic.
Because the new text is HTML code, you can 'misuse' this approach to add child nodes.
The script inserts two more paragraphs, but not behind the first one. They are within the first one.

## Change an attribute

In general, the syntax to change attributes is as follows:
The HTML element a knows a href attribute: <a id="refToSomewhere" href="https://www.example.com">...</a>. This href attribute can be changed:
First, the element is located. Second, the function assigns a new value to its attribute 'href' (and to the innerHTML).
The following example changes the src attribute of img element and the value attribute of button element

### setAttribute

The modification of attributes can also be done via the function setAttribute.

## See also

* MDN setAttribute

## Exercises

    ... are available on another page (click here).

# Removing elements

HTML pages and DOM objects are hierarchically structured. Every element and attribute belongs to exactly one parent. To delete an element or attribute, first, you must locate the parent element. The remove operation can be done on this object.

## Remove elements

Elements are removed with the removeChild function. To delete the <p> element from the <div> element in the following example
the JavaScript code is ...
... and the remaining HTML structure will be

### Children of children

If an element is removed, all of its children are removed as well. By this, you can remove huge parts of the DOM with one command if they have a common root. E.g., remove a complete list:
The JavaScript fragment removes the <ul> element as well as all <li> elements.

### parentNode

To remove an element, you need to know its parent element. If you can locate only the child, but for some reason, not the parent, the child's property parentNode shows you the way.

## Remove attributes

Attributes are removed with the removeAttribute function. To delete the href attribute from the <a> element in the following example
the JavaScript code is:
The element itself, including the text of the link, keeps alive, but you cannot navigate anymore.

## See also

* MDN Remove Child
* MDN Remove Attribute

# Changing element styles

As you have seen in previous chapters, the attributes of an element can be modified by JavaScript. Two attributes, the class and style, influences the visual representation of an element. They contain CSS code.
The class attribute identifies a CSS class that is created in the style element of HTML. The style attribute defines CSS rules inline (locally).
To modify them, handle them like any other attribute. They do not have special rules or exceptions.

## An example

We use the above HTML file; only the JavaScript function is changed. When the button is clicked, the function assigns the CSS class 'divClassRed' to 'div_1' and it changes the inline 'style' attribute of 'div_2' to a different value.
The 'style' attribute stores the CSS properties like 'color' or 'padding' in its own properties. This correlates with the general JavaScript object rules. Therefore the following syntax is equivalent to the previous div_2.setAttribute call.

## Properties of 'style'

In CSS, some properties are defined with a hyphen in their name, e.g., 'background-color' or 'font-size'. When you use them in JavaScript in the syntax of a property of style, the names change slightly. The character after the hyphen must be written in upper-case, and the hyphen disappears: 'style.backgroundColor' or 'style.fontSize'. This is called camel-case.
All other places where such names appear in CSS do not change. Especially the shown syntax with hyphens inside the HTML <style> element, as well as the use in the form of an inline definition, keeps unchanged.

## Exercises

    ... are available on another page (click here).

## See also

* MDN: CSS basics

# Event handling

Applications with a user interface - and other application types - are predominantly driven by events. Here we focus on DOM events. They originate (or fire) from specific actions or situations in a browser or a native app, e.g., a user clicks with the mouse, types a keyboard key, or works on a touch screen; a visual object is 'dragged & dropped', 'copied & pasted', or resized; the HTML page is loaded or shall be unloaded; the browser or a visual object gets or loses the focus; and much more. It's also possible that the application creates events programmatically (dispatch).
An event is related to its originating object and with a JavaScript statement; that is, in most cases, a call to a function that is denoted as the event handler. The JavaScript part is invoked after the event arises. Common actions are communication with a server, validation of user input, or modification of DOM or graphics.

## Create and invoke events
### Embedded in HTML

A short example shows how events are defined in an HTML page, fire, and execute. This syntax version is denoted as inline JavaScript.
When a user clicks on one of the buttons, the browser reads the button's attribute onclick, creates a JavaScript object that contains all properties of the event, and executes the JavaScript statement(s). Mostly, the JavaScript part is a call to a function. That function is denoted the event handler. It receives the JavaScript object as its first parameter. Only in very simple cases, the complete JavaScript script is inlined.
Of course, the called function must exist somewhere. Some standard functions like alert are predefined and provided by the browser. Your self-written functions exist within the HTML tag <script>, or the tag refers to a file or URL where they exist.
Hint: Embedding event definitions directly into HTML is called inline JavaScript. It's the earliest method of registering event handlers, but it tends to make the source hard to read for non-trivial applications. Therefore it can be seen as being a less desirable technique than other unobtrusive techniques; see next chapter. The use of inline JavaScript can be considered to be similar in nature to that of using inline CSS, where HTML is styled by putting CSS in style attributes.
Nevertheless, the Wikibook on hand will use inline JavaScript often in its demonstration pages because the syntax is short and the concept is easy to understand.

### Programmatically in JavaScript

JavaScript knows two ways to register an event handler for an HTML element. First, the event handler function can be directly assigned to the element's properties onxxx (onclick, onkeydown, onload, onfocus, ...). Their name starts with 'on' and ends with the value of the event type. Second, the function addEventListener registers the event type and the event handler.
The onclick event handler 'register' of button 'button_1' is registered with the above inline JavaScript syntax. When the page loads, only this event handler is known. Clicks to the paragraph 'p1' don't trigger any action because it does not have any event handler so far. But when the button gets pressed, the handler of button 'button_1' registers the second event handler, the function 'showMessage'. Now, after a click on the paragraph, the alert "A click-event to the paragraph..." occurs.
The registration is done in line 10 p1.onclick = showMessage. The noticeable difference to the inline JavaScript is that there are no parenthesizes. The inline JavaScript calls the function showMessage and hence needs to use parenthesizes. The function register does NOT call showMessage. It uses only its name for the registration process.
The alternative to assigning the function to the paragraph's 'onclick' property is the use of the function addEventListener. It acts on the element 'p1' and takes two parameters. The first one is the event type (click, keydown, ...). Such event types correlate with the onxxx names in that they miss the first two characters 'on'. The second parameter is the name of the function that acts as the event handler.
You can test the example by commenting out either line 10 or line 12. Line 12 with the addEventListener function is the preferred version.

## Event types

Different kinds of events exist depending on the kind of the originating element. The complete list of event types is incredibly huge (MDN) (W3schools). We show some important types and examples.
| Name | Description |
| blur | An input element loses focus |
| change | An element gets modified |
| click | An element gets clicked |
| dblclick | An element gets double-clicked |
| error | An error occurred loading an element |
| focus | An input element received focus |
| keydown | A key was pressed when an element had focus |
| keyup | A key was released when the element had focus |
| load | An element was loaded |
| mouseenter | The mouse pointer was moved into the element |
| mousemove | The mouse pointer moves while inside the element |
| mousedown | The mouse button was pressed on the element |
| mouseup | The mouse button was released on the element |
| mouseleave | The mouse pointer was moved out of the element |
| reset | The form's reset button was clicked |
| resize | The containing window or frame was resized |
| select | Some text within the element was selected |
| submit | A form is being submitted |
| unload | The content is being unloaded (e.g., window being closed) |
The following example demonstrates some different event types.
When the page is loaded, the onload event of the body is fired. Please notice that here the 'on' prefix is necessary because it's the inline JavaScript syntax (line 23). The called function registerAllEvents locates diverse HTML elements and registers event handlers of different types (lines 8 - 13). Often you will register different functions, but to keep things easy, we register in this example the same function handleAllEvents to all elements. This function reports the event type and the originating HTML element.

## Event properties

The event is always passed to the event handler as its first parameter in the form of a JavaScript object. JavaScript objects consist of properties; properties are key/value pairs. In all cases, one of the keys is 'type'. It contains the event's type; some of its possible values are shown in the above table. Depending on the event type, a lot of other properties are available.
Here are some examples of more or less important properties.
| Name | Description |
| button | Returns which mouse button was clicked |
| clientX | Returns the horizontal coordinate of the mouse pointer within the local coordinates: scrolled-out parts don't count |
| clientY | Returns the vertical coordinate of the mouse pointer within the local coordinates: scrolled-out parts don't count |
| code | Returns a textual representation of the pressed key, e.g., "ShiftLeft" or "KeyE" |
| key | Returns the value of the pressed key, e.g., "E" |
| offsetX | Returns the horizontal coordinate of the mouse pointer within the target DOM element |
| offsetY | Returns the vertical coordinate of the mouse pointer within the target DOM element |
| pageX | Returns the horizontal coordinate of the mouse pointer within the page coordinates - including scrolled-out parts |
| pageY | Returns the vertical coordinate of the mouse pointer within the page coordinates - including scrolled-out parts |
| screenX | Returns the horizontal coordinate of the mouse pointer within the complete monitor coordinates |
| screenY | Returns the vertical coordinate of the mouse pointer within the complete monitor coordinates |
| target | Returns the element that triggered the event |
| timeStamp | Returns the number of milliseconds between element creation and event creation |
| type | Returns the type of the element that triggered the event |
| x | An alias for clientX |
| y | An alias for clientY |
An example of accessing a property is given in the following script.
A mouse-move event is registered for the body. Whenever the mouse moves across the body, the event is triggered. The event handler reads the x/y properties out of the JavaScript object and shows them in the title of the browser's active tab.

## removeEventListener

Similar to addEventListener the function removeEventListener removes an event listener from an element.

## Synthetic events

The system offers the above-shown rich set of event types. Additionally, you can create your own events and trigger them from your application.
First, you create a function with one parameter, the event handler. Next, you register this event handler for an element. So far, everything is the same as with predefined event types.
Now you can trigger this event in any part of your application. To do so, you create a new event of precisely the chosen type and fire it with a call to dispatchEvent.
For test purposes, we bind this functionality to the button. The complete page now looks like this:
At the beginning, the button listens to click events, and 'p1' listens to events of type 'click' as well as of type 'syntheticEvent'. When the button is clicked, his event handler 'triggerEvent' creates a new event of type 'syntheticEvent' and fires it on 'p1' (what is the primary purpose of this example). The event handler showMessage shows a message without 'p1' being clicked. In other words: The event on 'p1' occurs without a click on 'p1'.
Possibly you need in the event handler some data from the calling function, e.g., the text of an error-message, the data of an HTTP response, ... . You can pass such data by using the CustonEvent and its property 'detail':
Access the data in the event handle:

## (A)synchronous behaviour

Most events are handled synchronously, e.g., 'click', 'key', or 'mouse'. But there are a few exceptions that are handled asynchronously, e.g., 'load' . 'Synchronous' means that the sequence of invocations is the same as the sequence of their creations. Clicking on Button A, B, and then C leads to the invocation of A's, B's, and then C's event handler in exactly this sequence. In contrast, 'asynchronous' events can lead to the invocation of the correlated handlers in an arbitrary sequence.
You must distinguish this question, the invocation of event handlers, from the implementation of their bodies. Every implementation may act strictly sequential or may contain asynchronous calls - it depends on your intention. Typical asynchronous calls are HTTP requests or database queries. Of course, they can be part of the handler of a click event.

## Exercises

    ... are available on another page (click here).

## See also

* MDN: Event handlers introduction
* MDN: Event reference and types
* W3Schools: Events
* W3Schools: EventListener

# W3C event handlers

| Attribute | Trigger |
| onabort | Loading of image was interrupted |
| onblur | Element loses focus |
| onchange | Element gets modified |
| onclick | Element gets clicked |
| ondblclick | Element gets double clicked |
| onerror | An error occurred loading an element |
| onfocus | An element received focus |
| onkeydown | A key was pressed when an element has focus |
| onkeypress | A keystroke was received by the element |
| onkeyup | A key was released when the element has focus |
| onload | An element was loaded |
| onmousedown | The mouse button was pressed on the element |
| onmousemove | The mouse pointer moves while inside the element |
| onmouseout | The mouse pointer was moved outside the element |
| onmouseover | The mouse pointer was moved onto the element |
| onmouseup | The mouse button was released on the element. |
| onreset | The form's reset button was clicked |
| onresize | The containing window or frame was resized |
| onselect | Text within the element was selected |
| onsubmit | A form is being submitted |
| onunload | The content is being unloaded (e.g. window being closed) |

# Working with the mouse
## Further reading

* JavaScript Events
* offsetX Property
* CSS Object Model: Extensions to the mouseevent Interface
* Creating an HTML5 Canvas Painting Application
* DOM Events Portability: Not that Hard

# Forms

Many users are familiar with filling out forms on a web page and then hitting the "submit" button. There are at least two ways JavaScript can improve this process:
* JavaScript can be used to check the data before it is sent to the server.
** JavaScript can pre-validate the data, to catch common errors and suggest improvements immediately while the user is filling out the form, before the user clicks the "submit" button.
** JavaScript can take text typed into a text area and pre-render it in a separate area of the page, so people can see how it will be rendered and formatted before clicking the "preview" button.
** JavaScript can give a live wordcount or character count of text typed into a text area.
* Sometimes a web site does a "online" calculation involving only a small amount of data and returns the result to the user. In this case, JavaScript can intercept the "submit" button, do the entire calculation locally in the browser. The user gets the results more or less immediately, rather than waiting for the data he typed in to be sent to the server, waiting for the server to get around to processing that data, and waiting for the data to come back from the server.
Many people recommend keeping all the content accessible to people with disabilities and to people who have JavaScript turned off. One way to do that is to start with standard HTML forms, and then add unobtrusive JavaScript to improve the user experience to people who have JavaScript turned on. The system should degrade gracefully, keeping all the content available (and validating user data, if necessary), whether or not any or all of the JavaScript runs successfully.

## Further reading

* JavaScript/Working With Files mentions one use of HTML forms
* HyperText Markup Language/Forms explains how to write "plain" forms without JavaScript.

## References

* ↑ "How can I display the HTML content of a Text Area within a div as HTML content and not text?"
* ↑ Andrey Fedoseev. "jQuery plugin to add realtime preview panel to text areas, similar to StackOverflow edit interface"
* ↑ Guillaume DE LA RUE. "A Markdown live editor in JS".
* ↑ Sacha Schmid. JavaScript word count
* ↑ Drew Schrauf. "JavaScript Wordcount That Works".
* ↑ "JavaScript word-count for any given DOM element"
* ↑ Jake Rocheleau. "Building a Live Text area Character Count Limit with CSS3 and jQuery"

# Images
## Introduction

Images can be available in the DOM (Document Object Model) of the browser in mainly to ways:
* in an img tag
* in a canvas tag

### Image Tag

The img is used for images that you might want
* to scale in size,
* change the alignment (left, right, center) of the image on page,
* extract the image size (width and height) of loaded image and display the size in the text
with Javascript.

### Canvas Tag

The canvas tag provides (as you might already assume by the name) options to
* modify loaded images on the pixel level (e.g. exchange a red pixel on the canvas by a blue pixel),
* mark specific areas on the image and annotate the image with
** text (e.g. add the name of the building on the image),
** geometric objects (e.g. mark a person with a circle or add an arrow in the image, ...
** merge two source images in one image with a canvas.

## Workflow

Workflow with images has the following main steps:
* (S1) Assignment: to work in Javascript with an image/canvas it is necessary to have a variable in Javascript to work with the image/canvas.
* (S2) Processing: to select in Javascript the available methods to handle/process images in img or canvas tag
* (S3) Load/Save (locally): if images are modified on a canvas the result must be provided and converted, so that they result can be submitted to a server or stored locally on a client for further use
For the workflow mentioned above, we will use the image processing workflows as examples.
* get information about an image with Javacript.
* load one image into a canvas and add annotation of text or geometric elements like lines, circles and boxes to the image and export the modified image again,
* load two images and merge them together in a canvas.
As example images we will use the creative commons images of
* the Golden Gate Bridge in San Francisco and
* the Brandenburg Gate in Berlin.

## Assignment

For an assignment of an image variable it is recommended to use a unique meaningful identfier (id) for the image or canvas, with which you can access the information about the inage or modify the image in the canvas later. This is a standard procedure using document.getElementById(pID) call with the respective identifier pID.
In the previous example we assume that you have a file index.html and the image Golden_Gate_Bridge_as_seen_from_Battery_East.jpg in one directory.

### Adding an Image to HTML Page

The image is added to the HTML as usual with the img tag.
The important aspect to mention is, that all images have a unique ID in the DOM of your HTML page. So having more images in one page you have to assign a new identifier to each image.
To make the Javascript code more readable and maintainable you might want to assign meaning identifiers to image. As an example we change the identifier of the second image to a meaningful name.
A prefix img... might be used for the identifier imgBrandenburgGate that indicates the id refers to an image and not in a canvas. Now we add also a canvas to the HTML code. The canvas has a specific a specific width and size. Due to the fact that the canvas is empty we must specific the size of the canvas with width and height attribute that you can use with images as well.

### Assigning the Image Variable

The following Javascript code assigns the img object in the DOM of the HTML page to the variable var4image.
Especially in more complex code you might want to use meaningful variable names in your Javascript code as well, similar to the identifiers in the DOM. We use meaningful names for the second image and the canvas.

### Error Handling for Image Assignment

Keep in mind that an image with identifier might not exist in the DOM tree and then the image variable is null. This might be handled with a getImage4Id(pID) function.
Once the function is defined you can replace the document.getElementById(...) by an getImage4Id(...).
You might want to use the function getImage4Id(...) in multiple HTML projects so we assume to aggregate all the function that we want to reuse in a Javascript file imagehandlers.js stored in a subdirectory "js/.

## Processing

For the processing we assume you have a folder LearnJavacript/ on your computer with the subdirectories img/, js/ and css/.
* the subdirectory img/ contains all the images that we use in the examples for images processing,
* the subdirectory js/ contains Javascript code that we use e.g. in multiple examples for images processing,
* the subdirectory css/ contains style sheet file the define the layout of the canvas or the image that we alter we Javascript according to the learning task.

### Images and Canvas Tags

For the reduction of the code length we rename and shorten the image names given from Wiki Commons for both example images about Golden Gate Bridge and the Brandenburg Gate. So move both examples to the img/ subdirectory of the folder LearnJavacript/ folder and name them
* ggbridge.jpg for the Golden Gate Bridge and
* bbgate.jpg for the Brandenburg Gate.
So we change the code fragments mentioned above for the image definition as follows

### Javascript Function to merge Images

As you might assume from the image sizes, we want combine both images next to each other on the canvas "canvImageAnnotation" and have 13 pixel height empty space on the canvas below the Golden Gate Bridge. The width of the canvas "canvas1" is 640 pixel and the height was chosen as maximum of both heights of both source images.

### Button to Execute Image Merge

Now we assign the function mergeImage to an onclick event of a button.

## Load/Save

In the next step an image from the local filesystem should be loaded into the browser locally (not on a remote server - see AppLSAC). The following steps are included and applied to a HTML canvas because the user should be able to annotate the image e.g. with a red circle to mark or highlight a specific area on the image:
* Create a HTML page imagehandler.html with header and body
* create Javascript file js/imageloadsave.js in a js subfolder, that contains the used Javascript libraries,
* add file button to HTML page imagehandler.html, that creates a file dialog for the user to select and load an image from the local hard disk,
* assign an event handler to the file button, that checks if the loaded file is an image,
* resize a canvas to 90% of window width and calculate the height of the canvas according to aspect ratio of the image.
* modify the image and paint a red circle on the loaded image,
* save the image to PNG, JPG, SVG to the download folder (see AppLSAC/Save).

# Cookies
## Intoduction

Cookies are used to store small amount of date in the browser, e.g. used to identify the user or settings or preferences of the user,

# LocalStorage
## Introduction

Localstorage is an option to store JSON in localstorage of the browser. This could be used to store a language setting (e.g. from english language to german language in the user profile) and when the user revisits the page the setting of pages are restored according to previous selection of the user (e.g. the selection of the language),

## Activities

* Compare the approach for the language selection of the user interface with JavaScript/Cookies that can be used for the same purpose.
* Analyze simple WebApp of Javascript BubbleBreaker by bobak7 and identify how the highscores are stored and loaded from the Local Storage.

# Design Mode

Design Mode in JavaScript is a hidden and powerful feature of the browser's document object that allows you to make any webpage directly editable in real-time. When enabled, it essentially turns the entire webpage into a live text editor where you can click on elements (like text or images) and modify them directly.
Here’s how you can use and experiment with document.designMode:

### How to Enable Design Mode

You can enable Design Mode with just one line of JavaScript:
When this is activated, you can:
* Edit text directly on the webpage.
* Move elements around in some browsers.
To turn it off, set it back to "off":

### Steps to Try It in Your Browser Console

* Open any website in your browser.
* Right-click on the page and select Inspect (or press Ctrl+Shift+I / Cmd+Shift+I).
* Go to the Console tab.
* Type the following command and press Enter:
* Click anywhere on the webpage and start editing the text!

### What You Can Do in Design Mode

* Edit Text:
** Click on any text and type directly to edit it.
* Remove Content:
** Highlight text or elements and press Backspace or Delete to remove them.
* Add Content:
** Place your cursor in a text container and start typing.
* Style Elements:
** Though you can’t directly apply styles through Design Mode, you can combine it with document.execCommand to add bold, italics, etc.

### A More Interactive Example

You can create a button to toggle Design Mode on and off:
Save this as an .html file and open it in a browser. Click the button to toggle Design Mode!

### Notes and Limitations

* Temporary Changes:
** Changes made using Design Mode are not saved permanently. If you reload the page, your edits will disappear.
* Not All Elements Are Editable:
** Some elements like <button> or custom components might not behave as expected.
* Browsers May Vary:
** Most modern browsers support Design Mode, but behavior might differ slightly.

# Bookmarklets

Bookmarklets are one line scripts stored in the URL field of a bookmark. Bookmarklets have been around for a long time so they will work in older browsers.

## JavaScript URI scheme

You should be familiar with URL that start with schemes like http and ftp, e.g. http://en.wikibooks.org/. There is also the JavaScript scheme, which is used to start every bookmarklet.

## Example uses
### Media controls

The values in these examples can be adapted as desired. One may replace video with audio where applicable, meaning where an <audio> tag is embedded.

#### Loop the video

Can be switched off using 0 or false.

#### Mute audio

Unmute using 0 or false.

#### Ask for playback speed

parseFloat is necessary to prevent setting the value to zero if the dialogue window is closed without user input.

#### Ask for playback position in percentage (0 to 100)
## Using multiple lines of code

Since you cannot have line breaks in bookmarklets you must use a semicolon at the end of each code statement instead.

## The JavaScript Protocol in Links

The JavaScript protocol can be used in links. This may be considered bad practice, as it prevents access for or confuses users who have disabled JavaScript. See Best Practices.

## Examples

A large quantity of links may be found on bookmarklets.com, which show a variety of features that can be performed within JavaScript.

# XMLHttpRequest

This is a guide and reference to the XMLHttpRequest object, a key component to know in Ajax programming.

## Example

Here is a brief example of a Web page that uses XMLHttpRequest. We'll get into the details and ways to work-around various things that can go wrong later.

## Object reference
### Methods
#### abort

    Cancels the current request.

#### getAllResponseHeaders

    Returns the complete set of HTTP headers as a string.

#### getResponseHeader(headerName)

    Returns the value of the specified HTTP header.

#### open(method, URL, async, userName, password)

    Specifies the method, URL, and other optional attributes of a request.
   * The method parameter can have a value of GET, POST, HEAD, PUT, DELETE, or a variety of other HTTP methods listed in the W3C specification.
   * The URL parameter may be either a relative or complete URL.
   * The async parameter specifies whether the request should be handled asynchronously or not – true means that script processing carries on after the send method, without waiting for a response, and false means that the script waits for a response before continuing script processing.

#### send(content)

    Sends the request. content can be a string or reference to a document.

#### setRequestHeader(label, value)

    Adds a label/value pair to the HTTP header to be sent.

### Properties
#### onreadystatechange

    Specifies a reference to an event handler for an event that fires at every state change

#### readyState

    Returns the state of the object as follows:
   * 0 = uninitialized – open has not yet been called.
   * 1 = open – send has not yet been called.
   * 2 = sent – send has been called, headers and status are available.
   * 3 = receiving – Downloading, responseText holds partial data
   * 4 = loaded – Finished.

#### responseText

    Returns the response as a string.

#### responseXML

    Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.

#### responseBody

    Returns the response as a binary encoded string. This property is not part of the native XMLHttpRequest wrapper. For this property to be available, the XHR object must be created with an ActiveX component. A JScript example: if (typeof ActiveXObject !== "undefined") { xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); xmlhttp.open("GET", "#", false); xmlhttp.send(null); alert(xmlhttp.responseBody); } else { alert("This browser does not support Microsoft ActiveXObjects.") }

#### status

    Returns the HTTP status code as a number (e.g. 404 for "Not Found" and 200 for "OK"). Some network-related status codes (e.g. 408 for "Request Timeout") cause errors to be thrown in Firefox if the status fields are accessed. If the server does not respond (properly), IE returns a WinInet Error Code (e.g 12029 for "cannot connect").

#### statusText

    Returns the status as a string (e.g. "Not Found" or "OK").

## Bugs and inconsistencies

Dealing with bugs and inconsistencies in XMLHttpRequest implementations:

### Caching

Most of the implementations also realize HTTP caching. Internet Explorer and Firefox do, but there is a difference in how and when the cached data is revalidated. Firefox revalidates the cached response every time the page is refreshed, issuing an "If-Modified-Since" header with value set to the value of the "Last-Modified" header of the cached response.
Internet Explorer does so only if the cached response is expired (i.e., after the date of received "Expires" header). This raises some issues, since a bug exists in Internet Explorer, where the cached response is never refreshed.
It is possible to unify the caching behavior on the client. The following script illustrates an example approach:
In Internet Explorer, if the response is returned from the cache without revalidation, the "Date" header is an empty string. The workaround is achieved by checking the "Date" response header and issuing another request if needed. In case a second request is needed, the actual HTTP request is not made twice, as the first call would not produce an actual HTTP request.
The reference to the cached request is preserved, because if the response code/status of the second call is "304 Not Modified", the response body becomes an empty string ("") and then it is needed to go back to the cached object. A way to save memory and expenses of second object creation is to preserve just the needed response data and reuse the XMLHttpRequest object.
The above script relies on the assumption that the "Date" header is always issued by the server, which should be true for most server configurations. Also, it illustrates a synchronous communication between the server and the client. In case of asynchronous communication, the check should be made during the callback.
This problem is often overcome by employing techniques preventing the caching at all. Using these techniques indiscriminately can result in poor performance and waste of network bandwidth.
If script executes operation that has side effects (e.g. adding a comment, marking message as read) which requires that request always reaches the end server, it should use POST method instead.

#### Workaround

Internet Explorer will also cache dynamic pages and this is a problem because the URL of the page may not change but the content will (for example a news feed). A workaround for this situation can be achieved by adding a unique time stamp or random number, or possibly both, typically using the Date object and/or Math.random.
For simple document request the query string delimiter '?' can be used, or for existing queries a final sub-query can be added after a final '&' – to append the unique query term to the existing query. The downside is that each such request will fill up the cache with useless (never reused) content that could otherwise be used for other cached content (more useful data will be purged from cache to make room for these one-time responses).
A better workaround can be achieved by adding meta tags to dynamic pages in order to make them no-cachable:

### Reusing XMLHttpRequest Object in IE

In IE, if the open method is called after setting the onreadystatechange callback, there will be a problem when trying to reuse the XHR object. To be able to reuse the XHR object properly, use the open method first and set onreadystatechange later. This happens because IE resets the object implicitly in the open method if the status is 'completed'. For more explanation of reuse: Reusing XMLHttpRequest Object in IE. The downside to calling the open method after setting the callback is a loss of cross-browser support for readystates. See the quirksmode article.

## Links

* Ajax
* Programming Ajax
* Starting A Website/Server-Side Services#How to do ajax with jQuery
* XMLHttpRequest

## Further reading

* Using XMLHttpRequest at the Mozilla Developer Network

# Handling HTML

Handling HTML returned from AJAX is surprisingly difficult. Since XMLHttpRequest was designed to work with well-formed XML, attempting to parse an HTML page with the responseXML property almost invariably produces an XML parse error. The responseText property contains the HTML source, of course, and one can attempt to parse this with regular string functions or regular expressions. However, the XMLHttpRequest object does not provide an easy way to parse returned HTML with DOM operations.

## Using the browser's HTML parser

One way to parsing HTML returned from AJAX is to add the entire page as a child of the current document in the browser. Simply create a new node and place the returned HTML text in the new node's innerHTML property, as shown below:
The HTML document is parsed automatically, and can then be searched, navigated, and manipulated with DOM operations.

# Handling JSON
## Native JSON
### Modern JSON Handling

Handling JSON may require adding a supporting library, which creates the global JSON object. This object is present natively only in new browsers (e.g. FF 3.5, IE8). Such a library can be found here:

### Old way

In old browsers you could use the following syntax, but this raises issues of security, such as XSS.

## JSONP

Given browser restrictions on cross-domain Ajax (allowed only by configuration in some earlier browsers, by non-standard means in IE8, and with server headers in HTML5), one way to circumvent such restrictions (while still requiring some server-side script coordination) is for sites to insert an HTML script tag dynamically into their code, whereby the cross-domain script they target (typically) supplies JSON, but wrapped inside a function call (the function name being supplied according to the value of a "callback" parameter supplied by the requestor) or some other executable code.
In PHP, one might serve such JSONP in as simple a fashion as this:
jQuery and other frameworks have their own means of generating JSONP requests, but we'll use the following custom code.
Note: It is important to bear in mind that the following code should not be used, if the targeted site or the data supplied by the target site, may come from a non-trustworthy source, since it is possible for such scripts to run with the privileges of the using site (e.g., to read user cookies and pass them on to another site) and thereby execute a Cross-site scripting attack.

## More information

* Using native JSON in Firefox
* Using native JSON in IE8
* Web Application Security Guide/XML, JSON and general API security

# Handling XML
## Simple function to open an XML file

This function first tries for Microsoft Internet Explorer, then for Firefox and others:

## Usage

Now you can do any DOM operations on oNodes.
XML modifications can't be saved in JavaScript, as this is clientside…

# Working with files

With pure HTML4 and pure JavaScript, there's really only one thing you can do with the users files:
The server sends a Web page that includes a form something like this:
and then, the browser allows the user to select one file, and the browser uploads it -- without any JavaScript on the client being able to see any of that data or cancel the transmission or even show a progress bar.
If you want JavaScript to know anything about the file before it is transmitted (for example, to immediately cancel the transmission of a large file rather than wait an hour for the file to be transmitted, then tell the user "File too large"; or to show a progress bar), you'll have to use something other than pure JavaScript on pure HTML4.
Some popular options are:
* use a modern Web browser that supports the HTML5 File API.
* use Flash (perhaps a tiny flash utility like Gmail uses to draw a little progress bar)
* use a Java applet
* use an ActiveX control

## References

* ↑ RFC 1867, RFC 2388
* ↑ Getting upload file size before upload
* ↑ Is it possible to use Ajax to do file upload?
* ↑ File API: W3C Last Call Working Draft 12 September 2013
* ↑ Reading files in JavaScript using the File APIs

# JScript in Microsoft WSH

Using just a file with the ".js" extension in Windows, it's possible to run JScript code. Of course within this environment many of the commonly known HTML, DOM and DHTML elements are not available. Instead, you have access to a different set of default tools, for system administrative tasks.
This topic is covered better at Windows Programming/Windows Script Host, from a non-JScript-specific perspective.

# Index
## A

* Adding Elements
* Arrays
* Associative Arrays

## B

* Best Practices
* Bookmarklets

## C

* Changing Elements
* Code Structuring

## D

* DHTML
* DOM
* Debugging

## E

* Event Handling

## F

* Finding Elements
* First Program
* Functions and Objects
* Further Reading

## H

* Hello World

## I

* Introduction
* Introduction to the Document Object Model
* Iteration

## L

* Lexical Structure
* Links

## M

* Message

## N

* Numbers

## O

* Operators
* Optimization

## R

* Regular Expressions
* Removing Elements
* Reserved Words

## S

* Strings
* Substring
* The SCRIPT Tag

## T

* Time
* Types

## U

* Useful Software Tools

## V

* Variables

# Links

Featured weblinks:
* JavaScript portal at developer.mozilla.org
* JavaScript Reference at developer.mozilla.org
* JavaScript Guide at developer.mozilla.org
* Gecko DOM Reference at developer.mozilla.org
* JavaScript Reference at msdn.microsoft.com
* Wikipedia:JavaScript
* Wikipedia:ECMAScript
* Wikipedia:JavaScript engine
* Wikiversity: Topic:JavaScript
* Wikiversity: Advanced JavaScript
* JavaScript Tutorial at w3schools.com
* JavaScript Reference at w3schools.com
* About: Focus on JavaScript from Stephen Chapman at javascript.about.com
* ecmascript.org
* ecma-international.org
* http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
Discussion forums, bulletin boards:
* HTML, CSS and JavaScript at coderanch.com
* JavaScript Workshop forums at jsworkshop.com
* Forum: Client-side technologies at webxpertz.net
More Web sites:
* JavaScript tutorials at webreference.com
* Videos from w:Douglas Crockford on JavaScript
* JavaScript at epanorama.net
* JavaScript Tutorials at pickatutorial.com
* JavaScript Essentials at techotopia.com - An online JavaScript book designed to provide Web developers with everything they need to know to create rich, interactive and dynamic Web pages using JavaScript.
* JavaScript Tutorials at yourhtmlsource.com
* www.quirksmode.org - over 150 useful pages for CSS and Javascript tips & cross-browser compatibility matrices.
* Wiki: I wanna Learn JavaScript at c2.com - A list of links to Web resources on JavaScript
* Unobtrusive JavaScript at onlinetools.org - a guide on how to write JavaScript so that your site degrades gracefully (i.e., if the browser does not support or has turned off JavaScript, your site is still usable).

# Bookmarklets

Bookmarklets are one line scripts stored in the URL field of a bookmark. Bookmarklets have been around for a long time so they will work in older browsers.

## JavaScript URI scheme

You should be familiar with URL that start with schemes like http and ftp, e.g. http://en.wikibooks.org/. There is also the JavaScript scheme, which is used to start every bookmarklet.

## Example uses
### Media controls

The values in these examples can be adapted as desired. One may replace video with audio where applicable, meaning where an <audio> tag is embedded.

#### Loop the video

Can be switched off using 0 or false.

#### Mute audio

Unmute using 0 or false.

#### Ask for playback speed

parseFloat is necessary to prevent setting the value to zero if the dialogue window is closed without user input.

#### Ask for playback position in percentage (0 to 100)
## Using multiple lines of code

Since you cannot have line breaks in bookmarklets you must use a semicolon at the end of each code statement instead.

## The JavaScript Protocol in Links

The JavaScript protocol can be used in links. This may be considered bad practice, as it prevents access for or confuses users who have disabled JavaScript. See Best Practices.

## Examples

A large quantity of links may be found on bookmarklets.com, which show a variety of features that can be performed within JavaScript.

# Useful software tools

A list of useful tools for JS programmers.

### Editors / IDEs

* Adobe Brackets: Another browser-based editor by Adobe
* Codelobster: A handy code editor with special support for all popular frameworks.
* Eclipse: The Eclipse IDE includes an editor and debugger for JS
* Notepad++: A great tool for editing any kind of code. It includes syntax highlighting for many programming languages.
* Programmers' Notepad: A general tool for programming many languages.
* Scripted: An open-source browser-based editor by Spring Source
* Sublime Text: One of the most used editors for HTML/CSS/JS editing
* Web Storm or IntelliJ IDEA: both IDEs include an editor and debugger for JS, IDEA also includes a Java development platform

### Engines and other tools

* JSLint: static code analysis for JS
* jq - " 'jq' is like sed for JSON data "
* List of ECMAScript engines

# History of JavaScript

JavaScript was originally developed by Brendan Eich of Netscape Communications Corporation under the name Mocha, then LiveScript, and finally renamed to JavaScript. The change of name from LiveScript to JavaScript roughly coincided with Netscape adding support for Java technology in its Netscape Navigator web browser. JavaScript was first introduced and deployed in the Netscape browser version 2.0B3 in December of 1995. When JavaScript was added to Internet Explorer, it had to be officially called "JScript", because Netscape owns the name "JavaScript". The choice of name proved to be a source of much confusion.
As of 2006, the latest version of the language is JavaScript 1.7, which corresponds to ECMA-262 Edition 3 like JavaScript 1.5, except for Array extras, Array and String generics, and pythonic generators and array comprehensions. ECMAScript, in simple terms, is a standardized version of JavaScript. The ECMA-357 standard specifies E4X (ECMAscript For XML), a language extension dealing with XML.

### Versions of JavaScript

JavaScript :
| Version | Support |
| 1.0 | Netscape 2.0 |
| 1.1 | Netscape 3.0 |
| 1.2 | Netscape 4.0-4.05 |
| 1.3 | Netscape 4.06-4.7x |
| 1.4 | Netscape server products |
| 1.5 | Netscape 6.0 |
JScript :
| Version | Support |
| 1.0 | Internet Explorer 3.0 |
| 2.0 | |
| 3.0 | Internet Explorer 4.0 |
| 4.0 | |
| 5.0 | Internet Explorer 5.0 |
| 5.1 | Internet Explorer 5.01 |
| 5.5 | Internet Explorer 5.5, 6.0 |
ECMAScript :
* Version
* v1
* v2
* v3

### ECMAScript

ECMAScript, also known as ISO standard 16262, is a standardization based on JavaScript by ECMA International, first written in 1996. It defines a dynamically-typed language (derived from C) very loosely based on Java and other C-like languages. It supports some object-oriented features through prototype-based objects and pseudo-classes.
All ECMAScript code should work in all major browsers that support JavaScript, but not necessarily vice versa, as there are many proprietary extensions by Netscape, Microsoft (IE), and Opera.
The latest version is ECMA-262 Edition 3, based on version 1.5 of JavaScript, and the specification is publicly available.

# Best practices

This chapter will describe current JavaScript community standards and best practices that every programmer should know.

## document.write

This is deprecated. Use innerHTML or DOM manipulation methods instead.
In XHTML, document.write does not work, but you can achieve the same effects with DOM manipulation methods.

## JavaScript protocol

Try to avoid links that exist solely for executing JavaScript code.
Instead consider:
Users with JavaScript enabled will be provided with the JavaScript-embellished version of content (perhaps using DHTML), whereas those without will be redirected to a XHTML page that provides it statically. This is more accessible than having an <a> element lacking a normal href attribute value. First, it uses proper language semantics. Second, it provides access to your content for users without JavaScript. Third, it detects whether the function execution succeeded and redirects JS-enabled readers too in case of a failure.
The onclick expression evaluates to a Boolean value. If the function succeeds to perform the desired effect and returns true, the onclick will return a failure and hyperlink not execute. When the function fails for whatever reason, the false, null or undefined value will evaluate to true and not prevent the link from being executed. Alternatively, if you do not wish to provide a static equivalent, you may embed the onclick attribute within an element with less demanding semantics:
Thus no user agent will be confused upon reading a reduced <a> element.

## Email validation

Many people use JavaScript functions to immediately catch the most common sorts of errors in form entry. For example, some web forms ask people to enter the same thing twice. Other web forms ask people to enter an email address. Then they do a quick check to see if what was entered looks at least vaguely like an email address:
Unfortunately, some other "email validation" JavaScript functions reject perfectly valid email addresses. For example, some incorrectly reject valid addresses that include "+" signs.
The original email address syntax (RFC 821) did allow "+" signs. RFC 822, published in the same month (August 1982), also allowed them. The current version of the syntax is given in RFC2821/RFC2822. Section 3 of RFC3696 gives useful examples of unusual valid email addresses.
After validation, many JavaScript programmers encode the email address using encodeURIComponent to work-around certain client-side languages that can't seem to handle plus signs properly.
The complexity of the quoting rules used for email addresses makes it impractical to test the local-part of an address or a domain literal completely. Given that there isn't necessarily a real mailbox corresponding to a valid local-part how much extra download time is worth spending on a complex validation script?

### Examples valid according to RFC2822

* me@example.com
* a.nonymous@example.com
* name+tag@example.com
* a.name+tag@example.com
* me.example@com
* "spaces must be quoted"@example.com
* !#$%&'*+-/=.?^_`{|}~@[1.0.0.127]
* !#$%&'*+-/=.?^_`{|}~@[IPv6:0123:4567:89AB:CDEF:0123:4567:89AB:CDEF]
* me(this is a comment)@example.com – comments are discouraged but not prohibited by RFC2822.

### Examples invalid according to RFC2822s

* me@
* @example.com
* me.@example.com
* .me@example.com
* me@example..com
* me\@example.com
* spaces\ must\ be\ within\ quotes\ even\ when\ escaped@example.com
* a\@mustbeinquotes@example.com

### Test page

COMMENT: This code has been incorrectly designed to reject certain emails that are actually valid. If changes to valid and invalid emails are accepted, the following code should also be reviewed.
The following test page can be used to test an email validation function. Save the three files in the same directory and then open validEmail.htm in a web browser.
validEmail.js
validEmail.css
validEmail.htm

## use strict

Many JavaScript programmers recommend enabling ECMAScript 5's strict mode by putting the exact statement "use strict"; before any other statements:

## For further reading

JavaScript best practices:
* Coding Cookbook/Validate Email Address
* "Six JavaScript features we do not need any longer" by Christian Heilmann.
* source code for Apple's recommended JavaScript validation functions: checkEmail, etc.
* JavaScript form validation - doing it right
* "FORM submission and the ENTER key?" discusses forms that submit when you press Enter; forms that don't submit when you press Enter; and how to make a form work the other way.
* "JavaScript Best Practices" by Matt Kruse
* "Comparing E-mail Address Validating Regular Expressions" has a list of valid and invalid email addresses and a variety of regular expressions and how well each one works on that list.

### Best practices in other languages

* Computer programming/Standards and Best Practices

## References

* ↑ Jan Wolter. "JavaScript Madness: Query String Parsing" 2011.
* ↑ PHP bug #39078: Plus sign in URL arg received as space.
* ↑ Nicholas C. Zakas. "It’s time to start using JavaScript strict mode". 2012.
* ↑ "What does “use strict” do in JavaScript, and what is the reasoning behind it?"
* ↑ Mozilla Developer Network: "Strict mode".

# Generators

The term generator denotes a technique to generate a sequence of 'anything': numbers, strings, rows of database queries, elements of an array, nodes of a DOM tree, ...
It's used to avoid any memory overloading, by splitting the data in small chunks.
To use them, you must define a generator function first. Such functions are notated with an asterisk * directly behind the keyword function, e.g., function* myGenerator{...}.
When called, the function will not run instantly. It only runs just before the first occurrence of a yield statement and returns a 'Generator object'. This 'Generator object' offers a next method. Calling next again and again returns the sequence elements one after the next. The elements arise by each yield that is reached within the generator function.

## Examples

* The script generates a sequence of 4 integers.
* Every next call returns not only a value; there is also a boolean done. Hence you can call the generator in loops.
* Generation out of an array, a database request, or a tree traversal.
* Creation of the infinite sequence of all even numbers.

## Parameters

The generator function may receive parameters. In this example, the 'pageSize' defines the number of array elements to be returned.

## References

* ↑ MDN: Generator function

# Contributors

Those who are going to contribute please sign your name by adding four tildas (~~~~).
* cuckooman4 04:26, 20 December 2007 (UTC) -- Might make some contributions
* Cparker (talk) 18:26, 17 March 2008 (UTC) --
* Extremecircuitz 20:55, 29 September 2007 (UTC) -- Adding a page here and there
* Jaymac407 (talk) 20:35, 21 July 2008 (UTC) -- Hopefully going to do extensive changes.
* Jesdisciple (talk) 08:37, 11 May 2010 (UTC) -- Looking into a restructuring of the chapter order to be more newbie-friendly.
* Pmw57 (talk) 10:28, 21 February 2009 (UTC) -- Am performing extensive updates
* Pranakhan 16:39, 6 November 2007 (UTC) -- Slowly reworking and adding content to this book
* Sae1962 (discuss • contribs) 06:06, 10 March 2015 (UTC) -- Reworking & extending content of this book