Introduction
JavaScript and
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
External JavaScript
Scripts can also be placed in external files:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag
External JavaScript Advantages
Placing scripts in external files has some advantages:
-
It separates HTML and code
-
It makes HTML and JavaScript easier to read and maintain
-
Cached JavaScript files can speed up page loads
JavaScript Keywords
| Keyword | Description |
|---|---|
| break | Terminates a switch or a loop |
| continue | Jumps out of a loop and starts at the top |
| debugger | Stops the execution of JavaScript, and calls (if available) the debugging function |
| do ... while | Executes a block of statements, and repeats the block, while a condition is true |
| for | Marks a block of statements to be executed, as long as a condition is true |
| function | Declares a function |
| if ... else | Marks a block of statements to be executed, depending on a condition |
| return | Exits a function |
| switch | Marks a block of statements to be executed, depending on different cases |
| try ... catch | Implements error handling to a block of statements |
| var | Declares a variable |
JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.
JavaScript Scope
ES2015 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope variables (and constants) in JavaScript.
Before ES2015, JavaScript had only two types of scope: Global Scope and Function Scope.
Global Scope
Variables declared Globally (outside any function) have Global Scope.
Function Scope
Variables declared Locally (inside a function) have Function Scope.
JavaScript Block Scope
Variables declared with the var keyword cannot have Block Scope.
Variables declared inside a block {} can be accessed from outside the block.
Before ES2015 JavaScript did not have Block Scope.
Variables declared with the let keyword can have Block Scope.
Variables declared inside a block {} cannot be accessed from outside the block:
JavaScript Operators
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic on numbers:
| Operator | Description |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| ** | Exponentiation ( |
| / | Division |
| % | Modulus (Division Remainder) |
| ++ | Increment |
| -- | Decrement |
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
| Operator | Example | Same As |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| **= | x **= y | x = x ** y |
The addition assignment operator (+=) adds a value to a variable.
Adding Strings and Numbers
Adding two numbers, will return the sum, but adding a number and a string will return a string:
JavaScript Comparison Operators
| Operator | Description |
|---|---|
| == | equal to |
| === | equal value and equal type |
| != | not equal |
| !== | not equal value or not equal type |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| ? | ternary operator |
JavaScript Logical Operators
| Operator | Description |
|---|---|
| && | logical and |
| || | logical or |
| ! | logical not |
JavaScript Functions
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas: (*parameter1, parameter2, ...*)
The code to be executed, by the function, is placed inside curly brackets: {}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments (the parameters) behave as local variables.
More about JavaScript