learnxinyminutes-docs/javascript.html.markdown

435 lines
14 KiB
Markdown
Raw Normal View History

2013-06-29 10:14:10 +00:00
---
language: javascript
2013-09-03 04:33:53 +00:00
contributors:
- ["Adam Brenecki", "http://adam.brenecki.id.au"]
filename: javascript.js
2013-06-29 10:14:10 +00:00
---
Javascript was created by Netscape's Brendan Eich in 1995. It was originally
2013-06-30 08:03:10 +00:00
intended as a simpler scripting language for websites, complimenting the use of
Java for more complex web applications, but its tight integration with Web pages
and built-in support in browsers has caused it to become far more common than
Java in web frontends.
2013-06-29 10:14:10 +00:00
2013-07-04 10:19:35 +00:00
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.
2013-06-29 10:14:10 +00:00
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).
2013-07-04 16:24:21 +00:00
```js
2013-06-29 10:14:10 +00:00
// Comments are like C. Single-line comments start with two slashes,
/* and multiline comments start with slash-star
and end with star-slash */
// Statements can be terminated by ;
doStuff();
// ... but they don't have to be, as semicolons are automatically inserted
// wherever there's a newline, except in certain cases.
doStuff()
// So that we don't have to worry about those certain cases (for now), we'll
// leave them on.
2013-06-29 10:14:10 +00:00
2013-07-04 16:24:21 +00:00
///////////////////////////////////
// 1. Numbers, Strings and Operators
2013-06-29 10:14:10 +00:00
2013-07-04 10:19:35 +00:00
// Javascript has one number type (which is a 64-bit IEEE 754 double).
3; // = 3
1.5; // = 1.5
2013-06-29 10:14:10 +00:00
// All the basic arithmetic works as you'd expect.
1 + 1; // = 2
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7
2013-06-29 10:14:10 +00:00
// Including uneven division.
5 / 2; // = 2.5
2013-06-29 10:14:10 +00:00
2013-07-03 05:51:03 +00:00
// 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
2013-07-03 05:51:03 +00:00
2013-07-04 10:19:35 +00:00
// Precedence is enforced with parentheses.
(1 + 3) * 2; // = 8
2013-06-29 10:14:10 +00:00
// 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
2013-06-29 10:14:10 +00:00
// There's also a boolean type.
true;
false;
2013-06-29 10:14:10 +00:00
// Strings are created with ' or ".
'abc';
"Hello, world";
2013-06-29 10:14:10 +00:00
// Negation uses the ! symbol
!true; // = false
!false; // = true
2013-06-29 10:14:10 +00:00
// Equality is ==
1 == 1; // = true
2 == 1; // = false
2013-06-29 10:14:10 +00:00
// Inequality is !=
1 != 1; // = false
2 != 1; // = true
2013-06-29 10:14:10 +00:00
// More comparisons
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true
2013-06-29 10:14:10 +00:00
// Strings are concatenated with +
"Hello " + "world!"; // = "Hello world!"
2013-06-29 10:14:10 +00:00
// and are compared with < and >
"a" < "b"; // = true
2013-06-29 10:14:10 +00:00
// Type coercion is performed for comparisons...
"5" == 5; // = true
2013-06-29 10:14:10 +00:00
// ...unless you use ===
"5" === 5; // = false
2013-06-29 10:14:10 +00:00
// You can access characters in a string with charAt
"This is a string".charAt(0);
2013-06-29 10:14:10 +00:00
// 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)
// false, null, undefined, NaN, 0 and "" are falsy, and everything else is truthy.
// Note that 0 is falsy and "0" is truthy, even though 0 == "0".
2013-06-29 10:14:10 +00:00
2013-07-04 16:24:21 +00:00
///////////////////////////////////
// 2. Variables, Arrays and Objects
2013-06-29 10:14:10 +00:00
// 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;
2013-06-29 10:14:10 +00:00
// if you leave the var keyword off, you won't get an error...
someOtherVar = 10;
2013-06-29 10:14:10 +00:00
// ...but your variable will be created in the global scope, not in the scope
// you defined it in.
// Variables declared without being assigned to are set to undefined.
var someThirdVar; // = undefined
2013-06-29 10:14:10 +00:00
2013-06-30 09:27:40 +00:00
// 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
2013-06-30 09:27:40 +00:00
// and an even-shorter-hand for adding or subtracting 1
someVar++; // now someVar is 101
someVar--; // back to 100
2013-06-30 09:27:40 +00:00
// Arrays are ordered lists of values, of any type.
var myArray = ["Hello", 45, true];
2013-06-30 09:27:40 +00:00
// Their members can be accessed using the square-brackets subscript syntax.
// Array indices start at zero.
myArray[1]; // = 45
// 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"};
// Keys are strings, but quotes aren't required if they're a valid
// JavaScript identifier. Values can be any type.
var myObj = {myKey: "myValue", "my other key": 4};
2013-06-30 09:27:40 +00:00
// Object attributes can also be accessed using the subscript syntax,
myObj["my other key"]; // = 4
// ... or using the dot syntax, provided the key is a valid identifier.
myObj.myKey; // = "myValue"
// Objects are mutable; values can be changed and new keys added.
myObj.myThirdKey = true;
2013-06-29 10:14:10 +00:00
// If you try to access a value that's not yet set, you'll get undefined.
myObj.myFourthKey; // = undefined
2013-07-04 16:24:21 +00:00
///////////////////////////////////
// 3. Logic and Control Structures
2013-06-30 09:27:40 +00:00
// The if structure works as you'd expect.
var count = 1;
2013-06-30 09:27:40 +00:00
if (count == 3){
// evaluated if count is 3
} else if (count == 4) {
// evaluated if count is 4
} else {
2013-07-03 05:51:03 +00:00
// evaluated if it's not either 3 or 4
2013-06-30 09:27:40 +00:00
}
// As does while.
while (true) {
// An infinite loop!
}
// Do-while loops are like while loops, except they always run at least once.
var input
do {
input = getInput();
2013-06-30 09:27:40 +00:00
} while (!isValid(input))
2013-08-14 07:51:44 +00:00
// the for loop is the same as C and Java:
2013-07-03 05:51:03 +00:00
// initialisation; continue condition; iteration.
2013-06-30 09:27:40 +00:00
for (var i = 0; i < 5; i++){
// will run 5 times
}
// && is logical and, || is logical or
if (house.size == "big" && house.colour == "blue"){
house.contains = "bear";
2013-06-30 09:27:40 +00:00
}
if (colour == "red" || colour == "blue"){
// colour is either red or blue
}
2013-07-03 05:51:03 +00:00
// && and || "short circuit", which is useful for setting default values.
var name = otherName || "default";
2013-06-30 09:27:40 +00:00
2013-07-04 16:24:21 +00:00
///////////////////////////////////
// 4. Functions, Scope and Closures
// JavaScript functions are declared with the function keyword.
function myFunction(thing){
return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"
// JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for
// example, when supplying an event handler:
function myFunction(){
// this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000);
2013-09-13 10:51:14 +00:00
// Note: setTimeout isn't part of the JS language, but is provided by browsers
// and Node.js.
// 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(){
// this code will be called in 5 seconds' time
}, 5000);
// JavaScript has function scope; functions get their own scope but other blocks
// do not.
if (true){
var i = 5;
}
i; // = 5 - not undefined as you'd expect in a block-scoped language
// This has led to a common pattern of "immediately-executing anonymous
// functions", which prevent temporary variables from leaking into the global
// scope.
2013-08-05 13:22:53 +00:00
(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
// different name in non-browser environments such as Node.js.
window.permanent = 10;
})();
temporary; // raises ReferenceError
permanent; // = 10
// One of JavaScript's most powerful features is closures. If a function is
// defined inside another function, the inner function has access to all the
2013-08-14 07:51:44 +00:00
// outer function's variables, even after the outer function exits.
function sayHelloInFiveSeconds(name){
var prompt = "Hello, " + name + "!";
function inner(){
alert(prompt);
}
setTimeout(inner, 5000);
2013-08-14 07:51:44 +00:00
// 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.
}
sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s
2013-07-04 16:24:21 +00:00
///////////////////////////////////
// 5. More about Objects; Constructors and Prototypes
// Objects can contain functions.
var myObj = {
myFunc: function(){
return "Hello world!";
}
};
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.
myObj = {
myString: "Hello world!",
myFunc: function(){
return this.myString;
}
};
myObj.myFunc(); // = "Hello world!"
// What this is set to has to do with how the function is called, not where
// it's defined. So, our function doesn't work if it isn't called in the
// context of the object.
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.
var myOtherFunc = function(){
return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"
// When you call a function with the new keyword, a new object is created, and
// made available to the function via this. Functions designed to be called
// like this are called constructors.
var MyConstructor = function(){
this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5
// 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
// part of the standard; we'll get to standard ways of using prototypes later.
var myObj = {
myString: "Hello world!",
};
var myPrototype = {
meaningOfLife: 42,
myFunc: function(){
return this.myString.toLowerCase()
}
};
myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42
// This works for functions, too.
myObj.myFunc(); // = "hello world!"
// Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on.
myPrototype.__proto__ = {
myBoolean: true
};
myObj.myBoolean; // = true
// There's no copying involved here; each object stores a reference to its
// prototype. This means we can alter the prototype and our changes will be
// reflected everywhere.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43
2013-07-03 05:51:03 +00:00
// We mentioned that __proto__ was non-standard, and there's no standard way to
2013-08-19 22:19:48 +00:00
// change the prototype of an existing object. However, there are two ways to
2013-07-03 05:51:03 +00:00
// create a new object with a given prototype.
// The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43
2013-07-03 05:51:03 +00:00
// The second way, which works anywhere, has to do with constructors.
// Constructors have a property called prototype. This is *not* the prototype of
// the constructor function itself; instead, it's the prototype that new objects
// are given when they're created with that constructor and the new keyword.
MyConstructor.prototype = {
myNumber: 5,
2013-07-03 05:51:03 +00:00
getMyNumber: function(){
2013-09-20 09:47:10 +00:00
return this.myNumber;
2013-07-03 05:51:03 +00:00
}
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6
2013-07-03 05:51:03 +00:00
// Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true
2013-07-03 05:51:03 +00:00
// Except, they aren't exactly equivalent.
typeof(myNumber); // = 'number'
typeof(myNumberObj); // = 'object'
myNumber === myNumberObj; // = false
2013-07-03 05:51:03 +00:00
if (0){
// This code won't execute, because 0 is falsy.
}
if (Number(0)){
// This code *will* execute, because Number(0) is truthy.
}
2013-07-03 05:51:03 +00:00
// 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"
2013-07-03 05:51:03 +00:00
// This fact is often used in "polyfilling", which is implementing newer
// features of JavaScript in an older subset of JavaScript, so that they can be
// used in older environments such as outdated browsers.
// For instance, we mentioned that Object.create isn't yet available in all
2013-07-03 05:51:03 +00:00
// implementations, but we can still use it with this polyfill:
if (Object.create === undefined){ // don't overwrite it if it exists
Object.create = function(proto){
// make a temporary constructor with the right prototype
var Constructor = function(){};
Constructor.prototype = proto;
2013-07-03 05:51:03 +00:00
// then use it to create a new, appropriately-prototyped object
return new Constructor();
}
}
2013-06-29 10:14:10 +00:00
```
2013-06-30 08:03:10 +00:00
## 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.
2013-06-30 09:27:40 +00:00
2013-07-04 10:19:35 +00:00
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)
2013-07-15 00:06:33 +00:00
[Javascript Garden](http://bonsaiden.github.io/JavaScript-Garden/) is an in-depth
guide of all the counter-intuitive parts of the language.
2013-06-30 09:27:40 +00:00
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.