JavaScript (JS) é uma linguagem de programação de computador dinâmica.

Instalação e configuração

Ferramentas de desenvolvimento do Google .

JavaScript 101

Incluir seu example.js em uma página HTML (geralmente colocado logo antes de </body> garantirá que os elementos sejam definidos quando o script for executado):

<script src="/path/to/example.js"></script>

As variáveis podem ser definidas usando várias instruções var ou em uma única instrução var combinada. O valor de uma variável declarada sem um valor é indefinido.
Os tipos em JavaScript se enquadram em duas categorias:
- Primitivo:
- Corda
- Número
- boleano
- nulo
- Indefinido
Tipos nulos são valores que representam a ausência de um valor, semelhante a muitas outras linguagens de programação. Os tipos indefinidos representam um estado em que nenhum valor foi atribuído.

Objetos:

// Creating an object with the constructor:
var person1 = new Object;

person1.firstName = "John";
person1.lastName = "Doe";

alert( person1.firstName + " " + person1.lastName );

// Creating an object with the object literal syntax:
var person2 = {
    firstName: "Jane",
    lastName: "Doe"
};

alert( person2.firstName + " " + person2.lastName );

Array

// Creating an array with the constructor:
var foo = new Array;

// Creating an array with the array literal syntax:
var bar = [];

If / Else

var foo = true;
var bar = false;

if ( bar ) {
    // This code will never run.
    console.log( "hello!" );
}

if ( bar ) {

    // This code won't run.

} else {

    if ( foo ) {
        // This code will run.
    } else {
        // This code would run if foo and bar were both false.
    }

}

Interruptor

switch ( foo ) {

    case "bar":
        alert( "the value was bar -- yay!" );
        break;

    case "baz":
        alert( "boo baz :(" );
        break;

    default:
        alert( "everything else is just ok" );

}

para

for ( var i = 0; i < 5; i++ ) {
    // Logs "try 0", "try 1", ..., "try 4".
    console.log( "try " + i );
}

enquanto

var i = 0;
while ( i < 100 ) {
    // This block will be executed 100 times.
    console.log( "Currently at " + i );
    i++; // Increment i
}

var i = -1;
while ( ++i < 100 ) {
    // This block will be executed 100 times.
    console.log( "Currently at " + i );
}

fazer enquanto

do {
    // Even though the condition evaluates to false
    // this loop's body will still execute once.
    alert( "Hi there!" );

} while ( false );

Operador Ternário

// Set foo to 1 if bar is true; otherwise, set foo to 0:
var foo = bar ? 1 : 0;

Arrays

.comprimento

var myArray = [ "hello", "world", "!" ];

for ( var i = 0; i < myArray.length; i = i + 1 ) {

    console.log( myArray[ i ] );

}

.concat ()

var myArray = [ 2, 3, 4 ];
var myOtherArray = [ 5, 6, 7 ];
var wholeArray = myArray.concat( myOtherArray );

.Junte-se()

 // Joining elements

var myArray = [ "hello", "world", "!" ];

// The default separator is a comma.
console.log( myArray.join() );     // "hello,world,!"

// Any string can be used as separator...
console.log( myArray.join( " " ) );  // "hello world !";
console.log( myArray.join( "!!" ) ); // "hello!!world!!!";

// ...including an empty one.
console.log( myArray.join( "" ) );

.pop () e .push ()

Remova ou adicione o último elemento.

.reverter()

var myArray = [ "world" , "hello" ];
myArray.reverse(); // [ "hello", "world" ]

.mudança()

var myArray = [];

myArray.push( 0 ); // [ 0 ]
myArray.push( 2 ); // [ 0 , 2 ]
myArray.push( 7 ); // [ 0 , 2 , 7 ]
myArray.shift();   // [ 2 , 7 ]

.fatia()

Extrai uma parte da matriz e retorna essa parte em uma nova matriz. Este método usa um parâmetro, que é o índice inicial.

Remove uma certa quantidade de elementos e adiciona novos no índice fornecido. Leva pelo menos três parâmetros:

Índice – o índice inicial.
Comprimento – o número de elementos a serem removidos.
Valores – os valores a serem inseridos na posição do índice.
var meuArray = [0, 7, 8, 5];
meuArray.splice (1, 2, 1, 2, 3, 4);

console.log( myArray ); // [ 0, 1, 2, 3, 4, 5 ]

.ordenar()

Classifica uma matriz. Leva um parâmetro, que é uma função de comparação. Se esta função não for fornecida, a matriz será classificada de forma ascendente.

// Sorting with comparing function.

function descending( a, b ) {
    return b - a;
}

var myArray = [ 3, 4, 6, 1 ];

myArray.sort( descending ); // [ 6, 4, 3, 1 ]

.unshift ()

Insere um elemento na primeira posição da matriz.

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

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

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

myArray = [ 1, 2, 3, 4, 5 ];

// Prints all elements to the consolez
myArray.forEach( printElement );

// Prints "Index 0: 1", "Index 1: 2", "Index 2: 3", ...
myArray.forEach( printElementAndIndex );

// myArray is now [ -1, -2, -3, -4, -5 ]
myArray.forEach( negateElement );

Cordas

Strings são um primitivo e um objeto em JavaScript.

Alguns métodos:

comprimento
charAt ()
índice de()
substring ()
Dividido()
toLowerCase
substituir
fatia
lastIndexOf
concat
aparar
toUpperCase

Objetos

Quase tudo em JavaScript é um objeto – arrays, funções, números, até mesmo strings – e todos eles têm propriedades e métodos.

var myObject = {
    sayHello: function() {
        console.log( "hello" );
    },
    myName: "Rebecca"
};

myObject.sayHello(); // "hello"

console.log( myObject.myName ); // "Rebecca"

A chave pode ser qualquer identificador válido:

var myObject = {
    validIdentifier: 123,
    "some string": 456,
    99999: 789
};

Funções

Pode ser criado de várias maneiras:

// Named function expression.
var foo = function() {     ----> function expression (load later)
    // Do something.
};

function foo() {        ----> function declaration (load first)
    // Do something.
}

Se você declarar uma variável local e se esquecer de usar a palavra-chave var, essa variável se tornará global automaticamente.

Imediatamente – Expressão de função invocada:

(function() {
    var foo = "Hello world";
})();
console.log( foo ); // undefined!

Eventos

JavaScript permite executar código quando eventos são detectados.

Exemplo de código para alterar uma imagem de origem:

windows.onload = init;
function init(){
    var img = docuemnt.GetEventById("example");
    img.src = "example.jpg"

Métodos para eventos:

clique
redimensionar
Toque
pausa
carga
descarregar
dragstart
solta
mousemove
mousedown
pressione o botão
mouseout
touchstart
toque final

Fecho

O fechamento é uma das principais propriedades do JavaScript.

Exemplo de fechamento para balcão. Normalmente teríamos o código:

 var count = 0;
 function counter(){
     count += 1;
     return count
}
console.log(counter());     --> print 1
console.log(counter());     --> print 2

No entanto, em JS podemos encerrar nosso contador dentro de um ambiente. Isso é útil para códigos grandes, com múltiplas colaborações, por exemplo, onde podemos usar variáveis de contagem mais de uma vez:

function makeCounter(){
    var count = 0;
    function counter(){
      count += 1;
      return count;
    }
    return counter;   ----> closure holds count!
}

Protótipos

function dog(name, color){
    this.name = name;
    this.color = color;
}

dog.prototype.species = "canine"
dog.prototype.bark = function{
}

jQuery

Verificação de tipo com jQuery:

// Checking the type of an arbitrary value.

var myValue = [ 1, 2, 3 ];

// Using JavaScript's typeof operator to test for primitive types:
typeof myValue === "string"; // false
typeof myValue === "number"; // false
typeof myValue === "undefined"; // false
typeof myValue === "boolean"; // false

// Using strict equality operator to check for null:
myValue === null; // false

// Using jQuery's methods to check for non-primitive types:
jQuery.isFunction( myValue ); // false
jQuery.isPlainObject( myValue ); // false
jQuery.isArray( myValue ); // true