Skip to content

Style and typography fixes, and code style adherence in the JavaScript 101 section. #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions page/javascript-101.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
title : JavaScript 101
level: beginner
source: http://jqfundamentals.com/legacy
attribution:
attribution:
- jQuery Fundamentals
customFields:
-
key: "icon"
value: "pencil"
---

##Introduction
## Introduction

So you want to unlock the power of jQuery to make the web a better place? Awesome, but there are a few things you should know about JavaScript first.

Introduced at the dawn of the web, [JavaScript](http://en.wikipedia.org/wiki/JavaScript) is a powerful and expressive language that runs inside the browser in conjunction with HTML and CSS. Based on an open standard called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), JavaScript has quickly become the "programming language of the web". All the power of jQuery is accessed via JavaScript, so needless to say, it's an important language to learn. Having a basic knowledge of JavaScript will go a long way in understanding, structuring and debugging your code.
Expand Down
69 changes: 35 additions & 34 deletions page/javascript-101/arrays.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,39 @@
title: Arrays
level: beginner
source: http://jqfundamentals.com/legacy
attribution:
attribution:
- jQuery Fundamentals
---
Arrays are zero-indexed, ordered lists of values. They are a handy way to store a set of related items of the same type (such as strings), though in reality, an array can include multiple types of items, including other arrays.

To create an array, either use the object constructor or the literal declaration, by assigning the variable a list of values after the declaration.

```
// A simple array with constructor
var myArray1 = new Array( "hello", "world" );
// literal declaration, the preferred way
var myArray2 = [ "hello", "world" ];
// A simple array with constructor.
var myArray1 = new Array( "hello", "world" );
// Literal declaration, the preferred way.
var myArray2 = [ "hello", "world" ];
```

The literal declaration is generally preferred. See the [Google Coding Guidelines](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Array_and_Object_literals) for more information.

If the values are unknown, it is also possible to declare an empty Array, and add elements either through functions or through accessing by index:
If the values are unknown, it is also possible to declare an empty array, and add elements either through functions or through accessing by index:

```
// Creating empty arrays and adding values
var myArray = [];

// adds "hello" on index 0
myArray.push("hello");
myArray.push( "hello" );

// adds "world" on index 1
myArray.push("world");
myArray.push( "world" );

// adds "!" on index 2
myArray[ 2 ] = "!";
```

'push' is a function that adds an element on the end of the array and expands the array respectively. You also can directly add items by index. Missing indices will be filled with 'undefined'.
`.push()` is a function that adds an element on the end of the array and expands the array respectively. You also can directly add items by index. Missing indices will be filled with `undefined`.

```
// Leaving indices
Expand All @@ -47,7 +47,7 @@ myArray[ 3 ] = "!";
console.log( myArray ); // [ "hello", "world", undefined, "!" ];
```

If the size of the array is unknown, 'push' is far more safe. You can both access and assign values to array items with the index.
If the size of the array is unknown, `.push()` is far more safe. You can both access and assign values to array items with the index.

```
// Accessing array items by index
Expand All @@ -58,7 +58,7 @@ console.log( myArray[2] ); // "!"

## Array Methods and Properties

### `.length`
### .length

The `.length` property is used to determine the amount of items in an array.

Expand All @@ -76,7 +76,7 @@ You will need the `.length` property for looping through an array:
var myArray = [ "hello", "world", "!" ];

for ( var i = 0; i < myArray.length; i = i + 1 ) {
console.log( myArray[i] );
console.log( myArray[i] );
}
```

Expand All @@ -87,13 +87,13 @@ Except when using `for`/`in` loops:
var myArray = [ "hello", "world", "!" ];

for ( var i in myArray ) {
console.log( myArray[ i ] );
console.log( myArray[ i ] );
}
```

### `.concat`
### .concat()

Concatenate two or more arrays with `.concat`:
Concatenate two or more arrays with `.concat()`:

```
// Concatenating Arrays
Expand All @@ -104,9 +104,9 @@ var myOtherArray = [ 5, 6, 7 ];
var wholeArray = myArray.concat( myOtherArray );
```

### `.join`
### .join()

`.join` creates a string representation of an array by joining all of its elements using a separator string. If no separator is supplied (e.g. `.join` is called without arguments) the array will be joined using a comma:
`.join()` creates a string representation of an array by joining all of its elements using a separator string. If no separator is supplied (e.g. `.join()` is called without arguments) the array will be joined using a comma:

```
// Joining elements
Expand All @@ -124,9 +124,9 @@ console.log( myArray.join("") ); // "helloworld!"

```

### `.pop`
### .pop()

`.pop` removes the last element of an array. It is the opposite method of `.push`:
`.pop()` removes the last element of an array. It is the opposite method of `.push()`:

```
// pushing and popping
Expand All @@ -138,7 +138,7 @@ myArray.push( 7 ); // [ 0 , 2 , 7 ]
myArray.pop(); // [ 0 , 2 ]
```

### `.reverse`
### .reverse()

As the name suggests, the elements of the array are in reverse order after calling this method:

Expand All @@ -150,9 +150,9 @@ var myArray = [ "world" , "hello" ];
myArray.reverse();
```

### `.shift`
### .shift()

Removes the first element of an array. With `.push` and `.shift`, you can recreate the method of a [queue](http://en.wikipedia.org/wiki/Queue_(data_structure)):
Removes the first element of an array. With `.push()` and `.shift()`, you can recreate the method of a [queue](http://en.wikipedia.org/wiki/Queue_(data_structure)):

```
// queue with shift() and push()
Expand All @@ -164,7 +164,7 @@ myArray.push( 7 ); // [ 0 , 2 , 7 ]
myArray.shift(); // [ 2 , 7 ]
```

### `.slice`
### .slice()

Extracts a part of the array and returns that part in a new array. This method takes one parameter, which is the starting index:

Expand All @@ -177,9 +177,9 @@ console.log( myArray ); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]
console.log( newArray ); // [ 4, 5, 6, 7, 8 ]
```

### `.splice`
### .splice()

Removes a certain amount of elements and adds new ones at the given index. It takes at least 3 parameters:
Removes a certain amount of elements and adds new ones at the given index. It takes at least three parameters:

```
// splice method
Expand All @@ -200,7 +200,7 @@ myArray.splice( 1, 2, 1, 2, 3, 4 );
console.log( myArray ); // [ 0, 1, 2, 3, 4, 5 ]
```

### `.sort`
### .sort()

Sorts an array. It takes one parameter, which is a comparing function. If this function is not given, the array is sorted ascending:

Expand All @@ -214,7 +214,7 @@ myArray.sort(); // 1, 3, 4, 6
```
// sorting with comparing function
function descending( a, b ) {
return b - a;
return b - a;
}

var myArray = [ 3, 4, 6, 1 ];
Expand All @@ -224,7 +224,7 @@ myArray.sort( descending ); // [ 6, 4, 3, 1 ]

The return value of descending (for this example) is important. If the return value is less than zero, the index of a is before b, and if it is greater than zero it's vice-versa. If the return value is zero, the elements index is equal.

### `.unshift`
### .unshift()

Inserts an element at the first position of the array:

Expand All @@ -237,29 +237,30 @@ myArray.unshift( 2 ); // [ 2 , 0 ]
myArray.unshift( 7 ); // [ 7 , 2 , 0 ]
```

### `.forEach`
### .forEach()

In modern browsers it is possible to traverse through arrays with a `.forEach` method, where you pass a function that is called for each element in the array.
In modern browsers it is possible to traverse through arrays with a `.forEach()` method, where you pass a function that is called for each element in the array.

The function takes up to three arguments:

* *Element* - The element itself.
* *Index* - The index of this element in the array.
* *Array* - The array itself.

All of these are optional, but you will need at least the 'element' parameter in most cases.
All of these are optional, but you will need at least the "Element" parameter in most cases.

```
// native forEach
function printElement( elem ) {
console.log( elem );
console.log( elem );
}

function printElementAndIndex( elem, index ) {
console.log( "Index " + index + ": " + elem );
console.log( "Index " + index + ": " + elem );
}

function negateElement( elem, index, array ) {
array[ index ] = -elem;
array[ index ] = -elem;
}

myArray = [ 1, 2, 3, 4, 5 ];
Expand Down
Loading