diff options
Diffstat (limited to 'javascript.html.markdown')
| -rw-r--r-- | javascript.html.markdown | 267 |
1 files changed, 183 insertions, 84 deletions
diff --git a/javascript.html.markdown b/javascript.html.markdown index aabd5e43..e7066291 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -16,13 +16,14 @@ JavaScript isn't just limited to web browsers, though: Node.js, a project that provides a standalone runtime for Google Chrome's V8 JavaScript engine, is becoming more and more popular. -Feedback would be highly appreciated! You can reach me at -[@adambrenecki](https://twitter.com/adambrenecki), or -[adam@brenecki.id.au](mailto:adam@brenecki.id.au). +JavaScript has a C-like syntax, so if you've used languages like C or Java, +a lot of the basic syntax will already be familiar. Despite this, and despite +the similarity in name, JavaScript's object model is significantly different to +Java's. ```js -// Comments are like C. Single-line comments start with two slashes, -/* and multiline comments start with slash-star +// Single-line comments start with two slashes. +/* Multiline comments start with slash-star, and end with star-slash */ // Statements can be terminated by ; @@ -40,7 +41,7 @@ doStuff() // JavaScript has one number type (which is a 64-bit IEEE 754 double). // Doubles have a 52-bit mantissa, which is enough to store integers -// up to about 9✕10¹⁵ precisely. +// up to about 9✕10¹⁵ precisely. 3; // = 3 1.5; // = 1.5 @@ -54,6 +55,11 @@ doStuff() // Including uneven division. 5 / 2; // = 2.5 +// And modulo division. +10 % 2; // = 0 +30 % 4; // = 2 +18.5 % 7; // = 4.5 + // Bitwise operations also work; when you perform a bitwise operation your float // is converted to a signed int *up to* 32 bits. 1 << 2; // = 4 @@ -64,7 +70,7 @@ doStuff() // There are three special not-a-real-number values: Infinity; // result of e.g. 1/0 -Infinity; // result of e.g. -1/0 -NaN; // result of e.g. 0/0 +NaN; // result of e.g. 0/0, stands for 'Not a Number' // There's also a boolean type. true; @@ -95,6 +101,10 @@ false; // Strings are concatenated with + "Hello " + "world!"; // = "Hello world!" +// ... which works with more than just strings +"1, 2, " + 3; // = "1, 2, 3" +"Hello " + ["world", "!"]; // = "Hello world,!" + // and are compared with < and > "a" < "b"; // = true @@ -104,25 +114,25 @@ null == undefined; // = true // ...unless you use === "5" === 5; // = false -null === undefined; // = false +null === undefined; // = false // ...which can result in some weird behaviour... 13 + !0; // 14 "13" + !0; // '13true' -// You can access characters in a string with charAt +// You can access characters in a string with `charAt` "This is a string".charAt(0); // = 'T' -// ...or use substring to get larger pieces +// ...or use `substring` to get larger pieces. "Hello world".substring(0, 5); // = "Hello" -// length is a property, so don't use () +// `length` is a property, so don't use (). "Hello".length; // = 5 -// There's also null and undefined -null; // used to indicate a deliberate non-value +// There's also `null` and `undefined`. +null; // used to indicate a deliberate non-value undefined; // used to indicate a value is not currently present (although - // undefined is actually a value itself) + // `undefined` is actually a value itself) // false, null, undefined, NaN, 0 and "" are falsy; everything else is truthy. // Note that 0 is falsy and "0" is truthy, even though 0 == "0". @@ -130,11 +140,12 @@ undefined; // used to indicate a value is not currently present (although /////////////////////////////////// // 2. Variables, Arrays and Objects -// Variables are declared with the var keyword. JavaScript is dynamically typed, -// so you don't need to specify type. Assignment uses a single = character. +// Variables are declared with the `var` keyword. JavaScript is dynamically +// typed, so you don't need to specify type. Assignment uses a single `=` +// character. var someVar = 5; -// if you leave the var keyword off, you won't get an error... +// If you leave the var keyword off, you won't get an error... someOtherVar = 10; // ...but your variable will be created in the global scope, not in the scope @@ -143,6 +154,10 @@ someOtherVar = 10; // Variables declared without being assigned to are set to undefined. var someThirdVar; // = undefined +// If you want to declare a couple of variables, then you could use a comma +// separator +var someFourthVar = 2, someFifthVar = 4; + // There's shorthand for performing math operations on variables: someVar += 5; // equivalent to someVar = someVar + 5; someVar is 10 now someVar *= 10; // now someVar is 100 @@ -165,7 +180,25 @@ myArray.length; // = 4 // Add/Modify at specific index myArray[3] = "Hello"; -// JavaScript's objects are equivalent to 'dictionaries' or 'maps' in other +// Add and remove element from front or back end of an array +myArray.unshift(3); // Add as the first element +someVar = myArray.shift(); // Remove first element and return it +myArray.push(3); // Add as the last element +someVar = myArray.pop(); // Remove last element and return it + +// Join all elements of an array with semicolon +var myArray0 = [32,false,"js",12,56,90]; +myArray0.join(";") // = "32;false;js;12;56;90" + +// Get subarray of elements from index 1 (include) to 4 (exclude) +myArray0.slice(1,4); // = [false,"js",12] + +// Remove 4 elements starting from index 2, and insert there strings +// "hi","wr" and "ld"; return removed subarray +myArray0.splice(2,4,"hi","wr","ld"); // = ["js",12,56,90] +// myArray0 === [32,false,"hi","wr","ld"] + +// JavaScript's objects are equivalent to "dictionaries" or "maps" in other // languages: an unordered collection of key-value pairs. var myObj = {key1: "Hello", key2: "World"}; @@ -188,9 +221,7 @@ myObj.myFourthKey; // = undefined /////////////////////////////////// // 3. Logic and Control Structures -// The syntax for this section is almost identical to Java's. - -// The if structure works as you'd expect. +// The `if` structure works as you'd expect. var count = 1; if (count == 3){ // evaluated if count is 3 @@ -200,23 +231,41 @@ if (count == 3){ // evaluated if it's not either 3 or 4 } -// As does while. +// As does `while`. while (true){ // An infinite loop! } // Do-while loops are like while loops, except they always run at least once. -var input +var input; do { input = getInput(); -} while (!isValid(input)) +} while (!isValid(input)); -// the for loop is the same as C and Java: -// initialisation; continue condition; iteration. +// The `for` loop is the same as C and Java: +// initialization; continue condition; iteration. for (var i = 0; i < 5; i++){ // will run 5 times } +// Breaking out of labeled loops is similar to Java +outer: +for (var i = 0; i < 10; i++) { + for (var j = 0; j < 10; j++) { + if (i == 5 && j ==5) { + break outer; + // breaks out of outer loop instead of only the inner one + } + } +} + +// The for/in statement allows iteration over properties of an object. +var description = ""; +var person = {fname:"Paul", lname:"Ken", age:18}; +for (var x in person){ + description += person[x] + " "; +} // description = 'Paul Ken 18 ' + // && is logical and, || is logical or if (house.size == "big" && house.colour == "blue"){ house.contains = "bear"; @@ -228,10 +277,9 @@ if (colour == "red" || colour == "blue"){ // && and || "short circuit", which is useful for setting default values. var name = otherName || "default"; - -// switch statement checks for equality with === -// use 'break' after each case -// or the cases after the correct one will be executed too. +// The `switch` statement checks for equality with `===`. +// Use 'break' after each case +// or the cases after the correct one will be executed too. grade = 'B'; switch (grade) { case 'A': @@ -252,21 +300,18 @@ switch (grade) { /////////////////////////////////// // 4. Functions, Scope and Closures -// JavaScript functions are declared with the function keyword. +// JavaScript functions are declared with the `function` keyword. function myFunction(thing){ return thing.toUpperCase(); } myFunction("foo"); // = "FOO" // Note that the value to be returned must start on the same line as the -// 'return' keyword, otherwise you'll always return 'undefined' due to +// `return` keyword, otherwise you'll always return `undefined` due to // automatic semicolon insertion. Watch out for this when using Allman style. -function myFunction() -{ +function myFunction(){ return // <- semicolon automatically inserted here - { - thisIsAn: 'object literal' - } + {thisIsAn: 'object literal'}; } myFunction(); // = undefined @@ -280,6 +325,12 @@ setTimeout(myFunction, 5000); // Note: setTimeout isn't part of the JS language, but is provided by browsers // and Node.js. +// Another function provided by browsers is setInterval +function myFunction(){ + // this code will be called every 5 seconds +} +setInterval(myFunction, 5000); + // Function objects don't even have to be declared with a name - you can write // an anonymous function definition directly into the arguments of another. setTimeout(function(){ @@ -298,8 +349,8 @@ i; // = 5 - not undefined as you'd expect in a block-scoped language // scope. (function(){ var temporary = 5; - // We can access the global scope by assiging to the 'global object', which - // in a web browser is always 'window'. The global object may have a + // We can access the global scope by assigning to the "global object", which + // in a web browser is always `window`. The global object may have a // different name in non-browser environments such as Node.js. window.permanent = 10; })(); @@ -312,7 +363,7 @@ permanent; // = 10 function sayHelloInFiveSeconds(name){ var prompt = "Hello, " + name + "!"; // Inner functions are put in the local scope by default, as if they were - // declared with 'var'. + // declared with `var`. function inner(){ alert(prompt); } @@ -320,7 +371,7 @@ function sayHelloInFiveSeconds(name){ // setTimeout is asynchronous, so the sayHelloInFiveSeconds function will // exit immediately, and setTimeout will call inner afterwards. However, // because inner is "closed over" sayHelloInFiveSeconds, inner still has - // access to the 'prompt' variable when it is finally called. + // access to the `prompt` variable when it is finally called. } sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s @@ -336,7 +387,7 @@ var myObj = { myObj.myFunc(); // = "Hello world!" // When functions attached to an object are called, they can access the object -// they're attached to using the this keyword. +// they're attached to using the `this` keyword. myObj = { myString: "Hello world!", myFunc: function(){ @@ -352,60 +403,65 @@ var myFunc = myObj.myFunc; myFunc(); // = undefined // Inversely, a function can be assigned to the object and gain access to it -// through this, even if it wasn't attached when it was defined. +// through `this`, even if it wasn't attached when it was defined. var myOtherFunc = function(){ return this.myString.toUpperCase(); -} +}; myObj.myOtherFunc = myOtherFunc; myObj.myOtherFunc(); // = "HELLO WORLD!" // We can also specify a context for a function to execute in when we invoke it -// using 'call' or 'apply'. +// using `call` or `apply`. var anotherFunc = function(s){ return this.myString + s; -} +}; anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!" -// The 'apply' function is nearly identical, but takes an array for an argument list. +// The `apply` function is nearly identical, but takes an array for an argument +// list. anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!" -// This is useful when working with a function that accepts a sequence of arguments -// and you want to pass an array. +// This is useful when working with a function that accepts a sequence of +// arguments and you want to pass an array. Math.min(42, 6, 27); // = 6 Math.min([42, 6, 27]); // = NaN (uh-oh!) Math.min.apply(Math, [42, 6, 27]); // = 6 -// But, 'call' and 'apply' are only temporary. When we want it to stick, we can use -// bind. +// But, `call` and `apply` are only temporary. When we want it to stick, we can +// use `bind`. var boundFunc = anotherFunc.bind(myObj); boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!" -// Bind can also be used to partially apply (curry) a function. +// `bind` can also be used to partially apply (curry) a function. -var product = function(a, b){ return a * b; } +var product = function(a, b){ return a * b; }; var doubler = product.bind(this, 2); doubler(8); // = 16 -// When you call a function with the new keyword, a new object is created, and -// made available to the function via the this keyword. Functions designed to be +// When you call a function with the `new` keyword, a new object is created, and +// made available to the function via the `this` keyword. Functions designed to be // called like that are called constructors. var MyConstructor = function(){ this.myNumber = 5; -} +}; myNewObj = new MyConstructor(); // = {myNumber: 5} myNewObj.myNumber; // = 5 +// Unlike most other popular object-oriented languages, JavaScript has no +// concept of 'instances' created from 'class' blueprints; instead, JavaScript +// combines instantiation and inheritance into a single concept: a 'prototype'. + // Every JavaScript object has a 'prototype'. When you go to access a property // on an object that doesn't exist on the actual object, the interpreter will // look at its prototype. // Some JS implementations let you access an object's prototype on the magic -// property __proto__. While this is useful for explaining prototypes it's not +// property `__proto__`. While this is useful for explaining prototypes it's not // part of the standard; we'll get to standard ways of using prototypes later. var myObj = { myString: "Hello world!" @@ -413,7 +469,7 @@ var myObj = { var myPrototype = { meaningOfLife: 42, myFunc: function(){ - return this.myString.toLowerCase() + return this.myString.toLowerCase(); } }; @@ -436,7 +492,27 @@ myObj.myBoolean; // = true myPrototype.meaningOfLife = 43; myObj.meaningOfLife; // = 43 -// We mentioned that __proto__ was non-standard, and there's no standard way to +// The for/in statement allows iteration over properties of an object, +// walking up the prototype chain until it sees a null prototype. +for (var x in myObj){ + console.log(myObj[x]); +} +///prints: +// Hello world! +// 43 +// [Function: myFunc] + +// To only consider properties attached to the object itself +// and not its prototypes, use the `hasOwnProperty()` check. +for (var x in myObj){ + if (myObj.hasOwnProperty(x)){ + console.log(myObj[x]); + } +} +///prints: +// Hello world! + +// We mentioned that `__proto__` was non-standard, and there's no standard way to // change the prototype of an existing object. However, there are two ways to // create a new object with a given prototype. @@ -457,7 +533,7 @@ MyConstructor.prototype = { }; var myNewObj2 = new MyConstructor(); myNewObj2.getMyNumber(); // = 5 -myNewObj2.myNumber = 6 +myNewObj2.myNumber = 6; myNewObj2.getMyNumber(); // = 6 // Built-in types like strings and numbers also have constructors that create @@ -473,15 +549,16 @@ myNumber === myNumberObj; // = false if (0){ // This code won't execute, because 0 is falsy. } -if (Number(0)){ - // This code *will* execute, because Number(0) is truthy. +if (new Number(0)){ + // This code will execute, because wrapped numbers are objects, and objects + // are always truthy. } // However, the wrapper objects and the regular builtins share a prototype, so // you can actually add functionality to a string, for instance. String.prototype.firstCharacter = function(){ return this.charAt(0); -} +}; "abc".firstCharacter(); // = "a" // This fact is often used in "polyfilling", which is implementing newer @@ -497,34 +574,56 @@ if (Object.create === undefined){ // don't overwrite it if it exists Constructor.prototype = proto; // then use it to create a new, appropriately-prototyped object return new Constructor(); - } + }; } ``` ## Further Reading -The [Mozilla Developer -Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) provides -excellent documentation for JavaScript as it's used in browsers. Plus, it's a -wiki, so as you learn more you can help others out by sharing your own -knowledge. +The [Mozilla Developer Network][1] provides excellent documentation for +JavaScript as it's used in browsers. Plus, it's a wiki, so as you learn more you +can help others out by sharing your own knowledge. + +MDN's [A re-introduction to JavaScript][2] covers much of the concepts covered +here in more detail. This guide has quite deliberately only covered the +JavaScript language itself; if you want to learn more about how to use +JavaScript in web pages, start by learning about the [Document Object Model][3]. + +[Learn Javascript by Example and with Challenges][4] is a variant of this +reference with built-in challenges. + +[JavaScript Garden][5] is an in-depth guide of all the counter-intuitive parts +of the language. + +[JavaScript: The Definitive Guide][6] is a classic guide and reference book. + +[Eloquent Javascript][8] by Marijn Haverbeke is an excellent JS book/ebook with +attached terminal + +[Eloquent Javascript - The Annotated Version][9] by Gordon Zhu is also a great +derivative of Eloquent Javascript with extra explanations and clarifications for +some of the more complicated examples. + +[Javascript: The Right Way][10] is a guide intended to introduce new developers +to JavaScript and help experienced developers learn more about its best practices. -MDN's [A re-introduction to -JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) -covers much of the concepts covered here in more detail. This guide has quite -deliberately only covered the JavaScript language itself; if you want to learn -more about how to use JavaScript in web pages, start by learning about the -[Document Object -Model](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core) +[Javascript:Info][11] is a modern javascript tutorial covering the basics (core language and working with a browser) +as well as advanced topics with concise explanations. -[Learn Javascript by Example and with Challenges](http://www.learneroo.com/modules/64/nodes/350) is a variant of this reference with built-in challenges. -[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) is an in-depth -guide of all the counter-intuitive parts of the language. +In addition to direct contributors to this article, some content is adapted from +Louie Dinh's Python tutorial on this site, and the [JS Tutorial][7] on the +Mozilla Developer Network. -[JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527/) is a classic guide / reference book. -In addition to direct contributors to this article, some content is adapted -from Louie Dinh's Python tutorial on this site, and the [JS -Tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) -on the Mozilla Developer Network. +[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript +[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript +[3]: https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core +[4]: http://www.learneroo.com/modules/64/nodes/350 +[5]: http://bonsaiden.github.io/JavaScript-Garden/ +[6]: http://www.amazon.com/gp/product/0596805527/ +[7]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript +[8]: http://eloquentjavascript.net/ +[9]: http://watchandcode.com/courses/eloquent-javascript-the-annotated-version +[10]: http://jstherightway.org/ +[11]: https://javascript.info/ |