JS Documentation

46 |

Introduction

47 |

48 |

49 | JavaScript is a cross-platform, object-oriented scripting language. It 50 | is a small and lightweight language. Inside a host environment (for 51 | example, a web browser), JavaScript can be connected to the objects of 52 | its environment to provide programmatic control over them. 53 |

54 | 55 |

56 | JavaScript contains a standard library of objects, such as Array, Date, 57 | and Math, and a core set of language elements such as operators, control 58 | structures, and statements. Core JavaScript can be extended for a 59 | variety of purposes by supplementing it with additional objects; for 60 | example: 61 |

62 |

64 | Client-side JavaScript extends the core language by supplying objects 65 | to control a browser and its Document Object Model (DOM). For example, 66 | client-side extensions allow an application to place elements on an 67 | HTML form and respond to user events such as mouse clicks, form input, 68 | and page navigation. 69 |
71 | Server-side JavaScript extends the core language by supplying objects 72 | relevant to running JavaScript on a server. For example, server-side 73 | extensions allow an application to communicate with a database, 74 | provide continuity of information from one invocation to another of 75 | the application, or perform file manipulations on a server. 76 |

78 |

79 |

81 |

What you should already know

82 |

83 |

This guide assumes you have the following basic background:

84 | 85 |

87 | A general understanding of the Internet and the World Wide Web (WWW). 88 |
Good working knowledge of HyperText Markup Language (HTML).
91 | Some programming experience. If you are new to programming, try one of 92 | the tutorials linked on the main page about JavaScript. 93 |

95 |

96 |

98 |

JavaScript and Java

99 |

100 |

101 | JavaScript and Java are similar in some ways but fundamentally different 102 | in some others. The JavaScript language resembles Java but does not have 103 | Java's static typing and strong type checking. JavaScript follows most 104 | Java expression syntax, naming conventions and basic control-flow 105 | constructs which was the reason why it was renamed from LiveScript to 106 | JavaScript. 107 |

108 | 109 |

110 | In contrast to Java's compile-time system of classes built by 111 | declarations, JavaScript supports a runtime system based on a small 112 | number of data types representing numeric, Boolean, and string values. 113 | JavaScript has a prototype-based object model instead of the more common 114 | class-based object model. The prototype-based model provides dynamic 115 | inheritance; that is, what is inherited can vary for individual objects. 116 | JavaScript also supports functions without any special declarative 117 | requirements. Functions can be properties of objects, executing as 118 | loosely typed methods. 119 |

120 |

121 | JavaScript is a very free-form language compared to Java. You do not 122 | have to declare all variables, classes, and methods. You do not have to 123 | be concerned with whether methods are public, private, or protected, and 124 | you do not have to implement interfaces. Variables, parameters, and 125 | function return types are not explicitly typed. 126 |

127 |

128 |

130 |

Hello world

131 |

132 | To get started with writing JavaScript, open the Scratchpad and write your 133 | first "Hello world" JavaScript code: 134 |

function greetMe(yourName) { alert("Hello " + yourName); }
136 |           greetMe("World");
137 |

138 | 139 | Select the code in the pad and hit Ctrl+R to watch it unfold in your 140 | browser! 141 |

142 |

144 |

Variables

145 |

146 | You use variables as symbolic names for values in your application. The 147 | names of variables, called identifiers, conform to certain rules. 148 |

149 |

150 | A JavaScript identifier must start with a letter, underscore (_), or 151 | dollar sign ($); subsequent characters can also be digits (0-9). Because 152 | JavaScript is case sensitive, letters include the characters "A" through 153 | "Z" (uppercase) and the characters "a" through "z" (lowercase). 154 |

155 |

156 | You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. 157 | You can also use the Unicode escape sequences as characters in 158 | identifiers. Some examples of legal names are Number_hits, temp99, and 159 | _name. 160 |

161 |

163 |

Declaring variables

164 |

165 | You can declare a variable in three ways: 166 |

167 | With the keyword var. For example, var x = 42. This syntax 168 | can be used to declare both local and global variables. 169 |

170 |

171 | By simply assigning it a value. For example, x = 42. This 172 | always declares a global variable. It generates a strict JavaScript 173 | warning. You shouldn't use this variant. 174 |

175 |

176 | With the keyword let. For example, let y = 13. This syntax 177 | can be used to declare a block scope local variable. See Variable scope 178 | below. 179 |

180 |

181 |

183 |

Variable scope

184 |

185 |

186 | When you declare a variable outside of any function, it is called a 187 | global variable, because it is available to any other code in the 188 | current document. When you declare a variable within a function, it is 189 | called a local variable, because it is available only within that 190 | function. 191 |

192 | 193 |

194 | JavaScript before ECMAScript 2015 does not have block statement scope; 195 | rather, a variable declared within a block is local to the function (or 196 | global scope) that the block resides within. For example the following 197 | code will log 5, because the scope of x is the function (or global 198 | context) within which x is declared, not the block, which in this case 199 | is an if statement. 200 |

201 | if (true) { var x = 5; } console.log(x); // 5 202 |

203 | This behavior changes, when using the let declaration introduced in 204 | ECMAScript 2015. 205 |

206 | 207 |

if (true) { let y = 5; } console.log(y); // ReferenceError: y is not
209 |           defined

211 |

212 |

214 |

Global variables

215 |

216 |

217 | Global variables are in fact properties of the global object. In web 218 | pages the global object is window, so you can set and access global 219 | variables using the window.variable syntax. 220 |

221 | 222 |

223 | Consequently, you can access global variables declared in one window or 224 | frame from another window or frame by specifying the window or frame 225 | name. For example, if a variable called phoneNumber is declared in a 226 | document, you can refer to this variable from an iframe as 227 | parent.phoneNumber. 228 |

229 |

230 |

232 |

Constants

233 |

234 |

235 | You can create a read-only, named constant with the const keyword. The 236 | syntax of a constant identifier is the same as for a variable 237 | identifier: it must start with a letter, underscore or dollar sign and 238 | can contain alphabetic, numeric, or underscore characters. 239 |

240 | 241 | const PI = 3.14; 242 |

243 | A constant cannot change value through assignment or be re-declared 244 | while the script is running. It has to be initialized to a value. 245 |

246 | 247 |

248 | The scope rules for constants are the same as those for let block scope 249 | variables. If the const keyword is omitted, the identifier is assumed to 250 | represent a variable. 251 |

252 | 253 |

254 | You cannot declare a constant with the same name as a function or 255 | variable in the same scope. For example: 256 |

257 | 258 |

// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS WILL
260 |           CAUSE AN ERROR ALSO function f() { const g = 5; var g; //statements
261 |           }

263 | However, object attributes are not protected, so the following statement 264 | is executed without problems. 265 | const MY_OBJECT = {"key": "value"}; MY_OBJECT.key = "otherValue"; 268 |

269 |

271 |

Data types

272 |

273 |

The latest ECMAScript standard defines seven data types:

274 |

276 |
Six data types that are primitives:
277 |
- Boolean. true and false.
- 280 | null. A special keyword denoting a null value. Because JavaScript 281 | is case-sensitive, null is not the same as Null, NULL, or any 282 | other variant. 283 |
- undefined. A top-level property whose value is undefined.
- Number. 42 or 3.14159.
- String. "Howdy"
- 288 | Symbol (new in ECMAScript 2015). A data type whose instances are 289 | unique and immutable. 290 |
292 |
and Object

296 | Although these data types are a relatively small amount, they enable you 297 | to perform useful functions with your applications. Objects and functions 298 | are the other fundamental elements in the language. You can think of 299 | objects as named containers for values, and functions as procedures that 300 | your application can perform. 301 |

302 |

304 |

if...else statement

305 |

306 | Use the if statement to execute a statement if a logical condition is 307 | true. Use the optional else clause to execute a statement if the condition 308 | is false. An if statement looks as follows: 309 | 310 | if (condition) { statement_1; } else { statement_2; } 311 | condition can be any expression that evaluates to true or false. See 312 | Boolean for an explanation of what evaluates to true and false. If 313 | condition evaluates to true, statement_1 is executed; otherwise, 314 | statement_2 is executed. statement_1 and statement_2 can be any statement, 315 | including further nested if statements. 316 |

317 | You may also compound the statements using else if to have multiple 318 | conditions tested in sequence, as follows: 319 |

320 |

if (condition_1) { statement_1; } else if (condition_2) { statement_2;
322 |           } else if (condition_n) { statement_n; } else { statement_last; }
323 |

324 | In the case of multiple conditions only the first logical condition which 325 | evaluates to true will be executed. To execute multiple statements, group 326 | them within a block statement ({ ... }) . In general, it's good practice 327 | to always use block statements, especially when nesting if statements: 328 | 329 |

if (condition) { statement_1_runs_if_condition_is_true;
331 |           statement_2_runs_if_condition_is_true; } else {
332 |           statement_3_runs_if_condition_is_false;
333 |           statement_4_runs_if_condition_is_false; }

335 | It is advisable to not use simple assignments in a conditional expression, 336 | because the assignment can be confused with equality when glancing over 337 | the code. For example, do not use the following code: 338 | if (x = y) { /* statements here */ } If you need to use an 339 | assignment in a conditional expression, a common practice is to put 340 | additional parentheses around the assignment. For example: 341 | 342 | if ((x = y)) { /* statements here */ } 343 |

344 |

346 |

while statement

347 |

356 | The condition test occurs before statement in the loop is executed. If 357 | the condition returns true, statement is executed and the condition is 358 | tested again. If the condition returns false, execution stops and 359 | control is passed to the statement following while. 360 |

361 | 362 |

363 | To execute multiple statements, use a block statement ({ ... }) to group 364 | those statements. 365 |

366 | 367 | Example: 368 | 369 |

The following while loop iterates as long as n is less than three:

370 | 371 | var n = 0; var x = 0; while (n < 3) { n++; x += n; } 372 |

373 | With each iteration, the loop increments n and adds that value to x. 374 | Therefore, x and n take on the following values: 375 |

376 | 377 |

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

382 |

383 | After completing the third pass, the condition n < 3 is no longer 384 | true, so the loop terminates. 385 |

386 |

387 |

389 |

Function declarations

390 |

391 | A function definition (also called a function declaration, or function 392 | statement) consists of the function keyword, followed by: 393 | 394 |

The name of the function.
397 | A list of arguments to the function, enclosed in parentheses and 398 | separated by commas. 399 |
401 | The JavaScript statements that define the function, enclosed in curly 402 | brackets, { }. 403 |

405 |

406 | For example, the following code defines a simple function named square: 407 |

408 | 409 | function square(number) { return number * number; } 410 |

411 | The function square takes one argument, called number. The function 412 | consists of one statement that says to return the argument of the 413 | function (that is, number) multiplied by itself. The return statement 414 | specifies the value returned by the function. 415 |

416 | return number * number; 417 |

418 | Primitive parameters (such as a number) are passed to functions by 419 | value; the value is passed to the function, but if the function changes 420 | the value of the parameter, this change is not reflected globally or in 421 | the calling function. 422 |

423 |

424 |

426 |

Reference

427 |

428 |

430 | All the documentation in this page is taken from 431 | MDN 436 |

438 |

439 |