The object-oriented programming language JavaScript is
a cross-platform language. It is a translucent and compact
language. JavaScript can be attached to the objects of its
environment inside a host environment (for instance, a web browser)
to offer it programmatic control.
A standard library of objects, such as Array, Date, and Math,
as well as a basic set of language components, such as operators,
control structures, and statements, are included in JavaScript.
By extending Core JavaScript with additional objects, it can be
used for a variety of applications, such as:
Client-side JavaScript adds to the fundamental language by providing
objects for controlling a browser's Document Object Model (DOM).
Client-side extensions, for example, allow a programme to add
items on an HTML form and react appropriately to user actions
like mouse clicks, form input, and page navigation.
Server-side JavaScript extends the basic language by providing
objects required for server-side JavaScript execution. Server-side
extensions, for example, allow an application to interface with a
database, give information constancy through one programme
invocation to the next, or conduct file operations on a server.
What you should already know
This guide assumes you have the following basic background:
A general understanding of the Internet and the World Wide Web
(WWW).
Good working knowledge of HyperText Markup Language (HTML).
Some programming experience. If you are new to programming, try
one of the tutorials linked on the main page about JavaScript.
JavaScript and Java
In some aspects, JavaScript and Java are similar, yet vastly
distinct in others. JavaScript is similar to Java, except it lacks
Java's static typing and rigors type checking. JavaScript was
renamed from LiveScript to JavaScript because it follows most
Java expression syntax, naming conventions, and basic control-flow
features.
JavaScript offers a runtime system based on a small number
of data types representing numeric, Boolean, and textual values,
as opposed to Java's compile-time system of classes defined via
declarations. Instead of the more usual class-based object model,
JavaScript uses a prototype-based object model. The prototype-based
architecture allows for dynamic inheritance, which means that what
is inherited for specific objects can change. JavaScript also offers
functions that don't require any extra declarations. Functions can
be object attributes that run as weakly typed methods.
In comparison to Java, JavaScript is a fairly free-form language.
All variables, classes, and methods do not need to be declared.
You don't have to worry about whether your methods are public,
private, or protected, and you don't have to worry about implementing
interfaces. The kinds of variables, arguments, and function return types are not
specified explicitly.
Hello world
To get started with writing JavaScript, open the Scratchpad and write
your first "Hello world" JavaScript code:
Declare a function that outputs "Hello! How are you?" when it is called:
function myFunction() {
alert("Hello!\nHow are you?");
}
Click the button to watch it unfold on your
browser!
Variables
You use variables as symbolic names for values in your application.
The names of variables, called identifiers, conform to certain rules.
A JavaScript identifier must start with a letter, underscore (_), or
dollar sign ($); subsequent characters can also be digits (0-9).
Because JavaScript is case sensitive, letters include the characters
"A" through "Z" (uppercase) and the characters "a" through "z"
(lowercase).
You can use ISO 8859-1 or Unicode letters such as å and ü in
identifiers. You can also use the Unicode escape sequences as
characters in identifiers. Some examples of legal names are
Number_hits, temp99, and _name.
Declaring variables
You can declare a variable in three ways:
With the keyword var. For example, var x = 42. This
syntax can be used to declare both local and global variables.
By simply assigning it a value. For example,
x = 42. This always declares a global variable. It
generates a strict JavaScript warning. You shouldn't use this
variant.
With the keyword let. For example, let y = 13. This
syntax can be used to declare a block scope local variable. See
Variable scope below.
Variable scope
It's considered a global variable when you declare a variable
outside of any function, because it's accessible to any other
code in the current page. A variable declared within a function
is referred to as a local variable since it is only accessible
within that function.
A variable declared within a block is local to the function
(or global scope) that the block resides within before ECMAScript
2015; instead, a variable declared within a block is local to the
function (or global scope) that the block resides within before
ECMAScript 2015. Because the scope of x is the function (or global context)
within which x is declared, rather than the block, which in this
case is an if statement, the following code will log 5.
if (true) { var x = 5; } console.log(x); // 5
This behavior changes, when using the let declaration introduced in
ECMAScript 2015.
if (true) { let y = 5; } console.log(y); // ReferenceError: y is
not defined
Global variables
Global variables are actually global object characteristics.
Because the global object in web pages is window, you can use the
window variable syntax to set and access global variables.
As a result, by specifying the window or frame name, you can access
global variables declared in one window or frame from another
window or frame. For example, if a document declares a variable
called phoneNumber, you can refer to it from an iframe as parent.phoneNumber.
Constants
The const keyword can be used to construct a read-only, named
constant. A constant identifier must begin with a letter,
underscore, or dollar sign and can contain alphabetic, numeric, or
underscore characters, just like a variable identifier.
const PI = 3.14;
While the script is executing, a constant's value cannot be changed
by assignment or re-declared. It must be given a value to begin with.
Constants follow the same rules as let block scope variables in
terms of scope. The identifier is considered to represent a
variable if the const keyword is absent.
You cannot declare a constant with the same name as a function or
variable in the same scope. For example:
// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS
WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;
//statements }
However, object attributes are not protected, so the following
statement is executed without problems.
const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =
"otherValue";Data types
The latest ECMAScript standard defines seven data types:
Six data types that are primitives:
Boolean. true and false.
null. A special keyword denoting a null value. Because
JavaScript is case-sensitive, null is not the same as Null,
NULL, or any other variant.
undefined. A top-level property whose value is undefined.
Number. 42 or 3.14159.
String. "Howdy"
Symbol (new in ECMAScript 2015). A data type whose instances
are unique and immutable.
and Object
Despite the fact that these data types are insignificant,
they allow you to execute valuable activities with your apps.
The language's other core features are objects and functions.
Objects can be thought of as named containers for values, and
functions can be thought of as operations that your programme can execute.
if...else statement
Use the if statement to execute a statement if a logical condition is
true. Use the optional else clause to execute a statement if the
condition is false. An if statement looks as follows:
if (condition) { statement_1; } else { statement_2; }
condition can be any expression that evaluates to true or false. See
Boolean for an explanation of what evaluates to true and false. If
condition evaluates to true, statement_1 is executed; otherwise,
statement_2 is executed. statement_1 and statement_2 can be any
statement, including further nested if statements.
You may also compound the statements using else if to have multiple
conditions tested in sequence, as follows:
if (condition_1) { statement_1; } else if (condition_2) {
statement_2; } else if (condition_n) { statement_n; } else {
statement_last; }
In the case of multiple conditions only the first logical condition
which evaluates to true will be executed. To execute multiple
statements, group them within a block statement ({ ... }) . In
general, it's good practice to always use block statements, especially
when nesting if statements:
if (condition) { statement_1_runs_if_condition_is_true;
statement_2_runs_if_condition_is_true; } else {
statement_3_runs_if_condition_is_false;
statement_4_runs_if_condition_is_false; }
It is advisable to not use simple assignments in a conditional
expression, because the assignment can be confused with equality when
glancing over the code. For example, do not use the following code:
if (x = y) { /* statements here */ } If you need to use
an assignment in a conditional expression, a common practice is to put
additional parentheses around the assignment. For example:
if ((x = y)) { /* statements here */ }while statement
While statements are executed as long as a particular condition
evaluates to true, they are called while statements.
The following is an example of a while statement:
while (condition) statement If the condition becomes
false, statement within the loop stops executing and control passes to
the statement following the loop.
The precondition evaluation executes before the loop's statements
are performed. The expression is implemented and the criteria is
evaluated anew if the criterion returns true. When the criterion
returns false, execution is terminated and control is handed to the
while statement.
To execute multiple statements, use a block statement ({ ... }) to
group those statements.
Example:
The following while loop iterates as long as n is less than three:
var n = 0; var x = 0; while (n < 3) { n++; x += n; }
With each iteration, the loop increments n and adds that value to x.
Therefore, x and n take on the following values:
After the first pass: n = 1 and x = 1
After the second pass: n = 2 and x = 3
After the third pass: n = 3 and x = 6
After completing the third pass, the condition n < 3 is no longer
true, so the loop terminates.
Function declarations
A function definition (also called a function declaration, or function
statement) consists of the function keyword, followed by:
The name of the function.
A list of arguments to the function, enclosed in parentheses and
separated by commas.
The JavaScript statements that define the function, enclosed in
curly brackets, { }.
For example, the following code defines a simple function named
square:
function square(number) { return number * number; }
The square function has only one argument, which is called number.
The function is made up of only one statement: return the function's
argument (that is, number) multiplied by itself. The value returned by
the function is specified by the return statement.
return number * number;
Primitive parameters (like a number) are supplied to functions by
value; the value is passed to the function, but if the function
changes the parameter's value, the modification is not mirrored
globally or in the calling function.