Antes de ler este livro, gostaria de agradecer à equipe técnica do Taobao pela tradução deste JavaScript Core e Flanagan por escrever este livro. Obrigado por seu compartilhamento altruísta, e apenas esta nota é dedicada ao seu trabalho duro.
1: núcleo de linguagem JavaScript
Após este capítulo, nos concentraremos principalmente no básico do JavaScript. Capítulo 2 Vamos explicar os comentários, semicolons e conjuntos de caracteres unicode de JavaScript; O capítulo 3 será mais interessante, explicando principalmente as variáveis e as atribuições de JavaScript
Aqui estão alguns códigos de exemplo para ilustrar o conteúdo principal dos dois primeiros capítulos.
A cópia do código é a seguinte:
<script type = "text/javascript">
// O conteúdo após a barra dupla pertence ao comentário
// Leia os comentários aqui com cuidado, ele explicará o código JavaScript
// variável é um nome simbólico que representa o valor
// As variáveis são declaradas através da palavra -chave var
var x; // Declare uma variável x
// O valor pode ser atribuído à variável através de símbolos
x = 0; // O valor da variável x agora é 0
x // Obtenha seu valor pelo nome da variável.
// javascript suporta vários tipos de dados
x = 1; //Número
x = 0,01; // Inteiros e números reais compartilham um tipo de dados
x = "Hello World"; // Construa uma sequência de texto em citações duplas
x = 'Hello World'; // Citações únicas também formam seqüências de caracteres.
x = true; // booleano
x = false; // Outro valor booleano
x = nulo; // null é um valor especial. Significando vazio
x = indefinido; // indefinido e nulo são muito semelhantes
</script>
No JavaScript, os tipos mais importantes são objetos e matrizes. O capítulo 6 apresenta objetos e o capítulo 7 apresenta matrizes. Objetos e matrizes são tão importantes no JavaScript. Tanto que eles podem ser vistos em todos os lugares deste livro.
A cópia do código é a seguinte:
<script type = "text/javascript">
// O tipo mais importante em JavaScript é o objeto
// Objeto é uma coleção de pares de nome/valor ou uma coleção de valores de string para valores mapeados.
var book = {// Objetos estão fechados em aparelhos encaracolados
Tópico: "JavaScript", // O valor do atributo "tópico" é JavaScript
gordura: verdadeiro // o valor da propriedade gordura é verdadeira
}; // Os aparelhos encaracolados na extremidade direita.
// Access Propriedades do objeto através de "". ou "[]".
book.topic // => "JavaScript"
livro ["gordo"] // => verdadeira maneira de obter atributos,
book.author = "ahthw"; // Crie um novo atributo por atribuição
book.content = {}; // {} é um objeto vazio. Não tem atributos
// javascript também suporta matrizes (listas indexadas por matrizes)
var prima = [2, 3, 5, 7]; // tem uma combinação de 4 valores, o limite é desenhado por "[" ""] "
Prima [0] // => 2: O primeiro objeto da matriz, o índice é 0
prima.length // => 4, o número de elementos na matriz
primos [prime.length-1] // => 7: o último elemento na matriz
primos [4] = 9; // Adicione novos elementos por atribuição
Prima [4] = 11; // Alterar elementos existentes por atribuição
var em vazio = []; // Matriz vazia, com 0 elementos
vazio.length // =>: 0
// Matrizes e objetos podem conter outra matriz ou objeto.
var point = [// Matriz com dois elementos
{x: 0, y: 0}, // cada elemento é um objeto
{x: 1, y: 1}
];
var dados = {// um objeto que contém dois atributos
Trial1: [[1,2], [3,4]], // Cada objeto é uma matriz
Trial2: [[2,3], [4,5]] // Os elementos da matriz também são matrizes
};
</script>
A sintaxe do código acima que define elementos de matriz através de colchetes e define o relacionamento de mapeamento entre os nomes dos atributos do objeto e os valores de atributo através de colchetes encaracolados. O capítulo 4 é introduzido especificamente. Expressões são uma frase em JavaScript. Essa frase pode ser calculada para obter um valor e referenciar o valor dos atributos do objeto ou elementos de matriz através de "," e "[]" para formar uma expressão.
O método de escrita de expressão mais comum em JavaScript são operadores como o seguinte código (Oprator)
A cópia do código é a seguinte:
// O operador como operador gera um novo valor
// o operador aritmético mais comum
3+2 // => 5 Adição
3-2 // => subtração
3*2 // => múltiplo
3/2 // => Divisão
ponto [1] .x -pons [0] .x // => operações complexas também podem funcionar como de costume
"3"+"2" // => 32. Você pode concluir operações de adição ou splicing de string.
// javascript define alguns operadores aritméticos como abreviação
var count = 0; // Defina uma variável
contagem ++; // Aumente em 1
contar--; // decremento em 1
contagem += 2; // O incremento automático 2 é o mesmo que "count = count + 2;"
contagem *= 3 // multiplique 3. Da mesma maneira que "count = count *3;" está escrito
contagem // => 6: o nome da variável em si também é uma expressão
// O operador de relacionamento de igualdade é usado para determinar se os dois valores são iguais ou não
// desigual, maior que, menor que o resultado da operação do operador é verdadeiro ou falso
var x = 2, y = 3; // o sinal igual aqui significa atribuição, não relativamente igual
x == y; // => false igual
x! = y; // => true
x <y; // => Verdadeiro: Menos que
x <= y; // true é menor ou igual a
x> y; // falso maior que
x> = y; // falso maior ou igual a
"dois" == "três"; // Falso duas cordas não são iguais
"dois"> "três"; // true o índice de "tw" no alfabeto é maior que "th"
false == (x> y); // ture false = false;
// operadores lógicos são mesclados ou inversos de valores booleanos
(x == 2) && (y == 3); // => true, ambas as comparações são verdadeiras. && é "e"
(x> 3) || (y <3); // => Falso Nenhuma comparação é verdadeira. || significa "ou"
! (x == y); // => Verdadeiro! Indica pesquisa inversa
Se a "frase" em JavaScript for uma expressão, toda a frase será chamada de declaração, que será explicada em detalhes no Capítulo 5.
No código acima, as linhas que terminam com um ponto de vírgula são todas as declarações. De maneira difícil, a expressão calcula apenas um valor (ou o valor que ele contém não está preocupado), mas eles alteram o estado em execução do programa. No exposto, declarações de declaração variável e declarações de atribuição foram vistas. Outro tipo de afirmação é a "estrutura de controle", como julgamento condicional e loop. Depois de apresentar a função, fornecemos código de exemplo relevante.
As funções são trechos de código JavaScript com nomes e parâmetros que podem ser definidos e usados várias vezes por vez. O capítulo 8 explicará formalmente as funções em detalhes. Como objetos e matrizes, as funções são mencionadas em muitos lugares deste livro, então aqui estão algum código de exemplo simples.
A cópia do código é a seguinte:
// A função é um segmento de código JavaScript com parâmetros de tratamento, que podem ser transferidos várias vezes
função plus1 (x) {// Defina uma função chamada Plus1 com o parâmetro x
retornar x + 1; // retorna um valor 1 maior que o passado.
} // O bloco de código da função é a peça embrulhada em aparelhos encaracolados
Plus1 (y) //
var square = função (x) {// função é um valor que pode ser atribuído a uma variável
retornar x*x; // Calcule o valor da função
}; // o ponto de vírgula indica o final da declaração de atribuição
quadrado (mais1 (y)); // Uma duas funções em uma expressão
Quando a função e o objeto são escritos juntos, a função é programada com um "método" (método)
A cópia do código é a seguinte:
// Quando uma função é atribuída ao atributo de um objeto, nós o chamamos
// "Método", todos os objetos JavaScript contêm métodos
var a = []; // Crie uma matriz vazia
a.push (1,2,3); // Adicione objetos ao método da matriz ao push ()
a. reverse (); // reversão de dados
// document.write (a)
// podemos definir o método de sub- , a palavra -chave "this" é o método de definição
Referência ao objeto de //, o exemplo aqui está a matriz contendo informações de posição de dois pontos mencionadas acima.
pontos.dist = function () {// define um método para calcular a distância entre dois pontos
var p1 = this [0]; // Obtenha a referência à matriz atual através desta palavra -chave
var p2 = this [1]; // e obtenha os dois primeiros elementos da matriz chamada
var a = p2.x- p1.y; // Distância no eixo de coordenadas x
var b = p2.y - p1.y; // distância no eixo de coordenada y
retornar math.sqrt (a * a + "nós chamamos de" + b * b); // Teorema de Pitágoros
}; //Math.sqrt () calcula a raiz quadrada
Points.dist () // => Encontre a distância entre dois pontos
Agora, dê alguns exemplos de declarações de controle. Aqui, a função de exemplo contém as declarações de controle JavaScript mais comuns no corpo.
A cópia do código é a seguinte:
// Aqui a declaração JavaScript usa esta sintaxe para incluir julgamento condicional e loop
// a sintaxe semelhante ao java c ++ e outros idiomas é usada
função abs (x) {// encontre a função de valor absoluto
if (x> = 0) {// se
retornar x; // se verdadeiro, execute este código
} else {// False Execute
retornar -x;
}
}
função factprrial (n) {// calculando o fatorial
var produto var = 1; // atribui um valor de 1 ao produto
While (n> 1) {// loop para executar o conteúdo {} quando a expressão do valor () é verdadeira
produto *= n; // Produto = Produto * Abreviação
n--; // n = método de escrita n-1
} // o loop termina
produto de retorno; // Retornar produto
}
FACTPRIAL (4) // => 24 1*4*3*2 Document.Write (FACTPrial (4))
função fatorial2 (n) {// Outra maneira de escrever um loop
var i, produto = 1; //
para (i = 2; i <= n; i ++) // Aumente i de 2 para n
produto *= i; // Corpo de loop, quando há apenas uma frase de código no corpo do loop, omita {}
produto de retorno; // calcular e devolver o bom fatorial;
}
fatorial2 (5) //document.write(Factory2(5)) => 120: 1*2*3*4*5
O JavaScript é uma linguagem de programação orientada a objetos, mas é muito diferente dos objetos de página tradicionais. O capítulo 9 explicará o JavaScript orientado a objetos em detalhes. Este capítulo terá muito código de amostra, que é o capítulo mais longo deste livro.
Aqui está um exemplo simples, este código mostra como definir uma classe em JavaScript para representar pontos na geometria das faces 2D. O objeto instanciado nesta classe possui um método chamado r () para calcular a distância da mudança de pontos para origem.
A cópia do código é a seguinte:
// Defina um construtor para inicializar um novo objeto de ponto
ponto de função (x, y) {// Os construtores geralmente começam com letras maiúsculas
this.x = x; // a palavra -chave refere -se à instância inicializada
this.y = y; // Parâmetros da função de armazenamento como atributos de um objeto
}
// Crie uma instância usando a nova palavra -chave e construtor
var p = novo ponto (1, 1); // Pontos 1, 1 em geometria plana,
// atribui valor através do objeto de protótipo do construtor
// para definir métodos para objetos pontuais
Point.prototype.r = function () {
Retornar Math.Sqrt (// Retornar a raiz quadrada de x quadrado + y quadrado
this.x * this.x + // refere -se ao objeto que transporta este método
this.y * this.y);
};
// Objeto de instância de Point P (e todos os objetos de instância de ponto) herda o método r ()
pr () // => 1.4142135623730951 /document.write (pr ())
O capítulo 9 é a essência da primeira parte . Os capítulos subsequentes foram esporadicamente estendidos, o que nos levará ao fim de nossa exploração de JavaScript.
O capítulo 10 fala principalmente sobre padrões de correspondência de texto realizados por expressões regulares.
CAPÍTULO 11 O principal subconjunto e superconjunto do idioma do JavaScript de gesso .
Antes de inserir o conteúdo do JavaScript no cliente, capítulo 12, apresentamos apenas dois ambientes de execução de JavaScript fora da web.
2. Javascript do cliente
Existem muitas referências cruzadas para os pontos de conhecimento do conteúdo na parte central da linguagem JavaScript, e o senso de conhecimento não é claro. A orquestração de conteúdo do JavaScript no lado do cliente mudou muito. De acordo com este capítulo, você pode usar o JavaScript em um navegador da web. (Mas se você quiser aprender JavaScript lendo este livro, não pode simplesmente se concentrar na segunda parte) O capítulo 13 é a primeira parte da segunda parte, que introduz como fazer o JavaScript executar em um navegador da web. O capítulo 14 explica a tecnologia de script de navegador da web e abrange uma importante função global do cliente JavaScipt.
Por exemplo:
A cópia do código é a seguinte:
função moveon () {
// Faça uma pergunta através da caixa de diálogo
var resposta = confirm ("você está pronto?");
// Clique em OK e o navegador carregará uma nova página
if (resposta) window.Location = "http://www.baidu.com";
}
// execute esta função após 1 minuto (60000 milissegundos)
setTimeout (Moveon, 300);
O capítulo 15 dirá como o JavaScript pode manipular o estilo HTML para definir o método de conteúdo de exibição . O conteúdo do capítulo 15 será mais pragmático. Através de scripts, ele mostrará como selecionar elementos específicos da página da web, como definir atributos para elementos HTML, se o conteúdo do elemento for modificado e como adicionar novos nós ao documento
A função de exemplo a seguir mostra se você encontra e modificar o conteúdo básico do artigo
A cópia do código é a seguinte:
// Uma informação especificada no documento e a árvore da área está sobre as informações de depuração
// Se este elemento não existir no documento, crie um
Função Debug (msg) {
// Encontre a parte de depuração do documento visualizando o atributo de identificação do elemento HTML
var log = document.getElementById ("debugLog");
// Se o elemento não existir, crie um
if (! log) {
log = document.createElement ("div"); // Crie um novo elemento div
log.id = "debugLog"; // atribui valor ao ID de cada elemento
log.innerhtml = "<h1> log </h1>"; // Personalize o conteúdo inicial
document.body.appendChild (log); // Adicione -o ao final do documento
}
// inclua a mensagem em <pre> e adicione -a ao log
var pre = document.createElement ("pré"; // Crie o elemento pré
var text = document.createElement (msg); // inclui msg em um nó de texto
pre.appendChild (texto); // Adicione texto ao pré
log.appendChild (pre); // pré add ao log
}
O capítulo 16 falará sobre como usar o JavaScript para operar elementos , que geralmente usa os atributos de estilo e classe do elemento.
A cópia do código é a seguinte:
function hide (e, reflow) {// manipula elementos e oculte elementos e através de jvascript
if (reflow) {// se o segundo parâmetro for verdadeiro
e.style.display = "nenhum" // ocultar este elemento, e o espaço que ele ocupa também é vendido
} outro {
e.style.visibility = "Hidden"; // Ocultar e, mantendo o espaço que leva
}
}
função destaque (e) {// Destaque e definindo CSS
if (! E.ClassName) E.ClassName = "Highcss";
outro
e.className += "Highcss";
}
O estilo de conteúdo e CSS dos elementos podem ser controlados através do JavaScript, e o comportamento do documento também pode ser definido através de manipuladores de eventos. O manuseio de eventos é uma função JavaScript registrada no centro do navegador. Quando ocorre um evento específico, o navegador pode chamar essa função.
Geralmente, os tipos de eventos em que focamos são os cliques de mouse e os eventos de teclado (os smartphones são vários eventos de toque). Ou quando o navegador concluir o carregamento do documento, um evento de pessoa será acionado quando o usuário alterar o tamanho da janela ou quando o usuário inserir dados no formulário.
O capítulo 17 descreverá em detalhes como definir, registrar os manipuladores de tempo e como o navegador os chama quando ocorrem os eventos.
A maneira mais fácil de personalizar os manipuladores de eventos é vincular um retorno de chamada ao atributo prefixado pelo HTML. Ao escrever alguns testes de programa simples, a maneira mais prática é vincular um retorno de chamada ao manipulador "OnClick". Supondo que as funções de debug () e hide () acima sejam salvas nos arquivos Debug.js e Hide.js acima, você pode simplesmente especificar um manipulador de eventos para o atributo onclick. do seguinte modo
A cópia do código é a seguinte:
<script type = "text/javascript">
// Uma informação especificada no documento e a árvore da área está sobre as informações de depuração
// Se este elemento não existir no documento, crie um
Função Debug (msg) {
// Encontre a parte de depuração do documento visualizando o atributo de identificação do elemento HTML
var log = document.getElementById ("debugLog");
// Se o elemento não existir, crie um
if (! log) {
log = document.createElement ("div"); // Crie um novo elemento div
log.id = "debugLog"; // atribui valor ao ID de cada elemento
log.innerhtml = "<h1> log </h1>"; // Personalize o conteúdo inicial
document.body.appendChild (log); // Adicione -o ao final do documento
}
// inclua a mensagem em <pre> e adicione -a ao log
var pre = document.createElement ("pré"; // Crie o elemento pré
var text = document.createElement (msg); // inclui msg em um nó de texto
pre.appendChild (texto); // Adicione texto ao pré
log.appendChild (pre); // pré add ao log
}
function hide (e, reflow) {// manipula elementos e oculte elementos e através de jvascript
if (reflow) {// se o segundo parâmetro for verdadeiro
e.style.display = "nenhum" // ocultar este elemento, e o espaço que ele ocupa também é vendido
} outro {
e.style.visibility = "Hidden"; // Ocultar e, mantendo o espaço que leva
}
}
função destaque (e) {// Destaque e definindo CSS
if (! E.ClassName) E.ClassName = "Highcss";
outro
e.className += "Highcss";
}
</script>
olá
<button onclick = "hide (this, true); debug ('hide Button 1');"> hide1 </botão>
<button onclick = "hide (this); debug ('hide Button 2');"> hide2 </butotn>
O seguinte cliente JavaScript usa eventos, o que oferece um evento muito importante: o evento "Load" registra um evento para lidar com o Chenxing. Os colegas também mostram uma maneira mais avançada de registrar manipuladores de eventos "clique"
A cópia do código é a seguinte:
<script type = "text/javascript">
// O evento "carregamento" só pode ser disparado depois que o documento é carregado
// Se você geralmente precisar esperar que o evento de carga ocorra antes de executar o código JavaScript
window.onload = function () {
// Encontre todas as tags IMG no documento
var imagens = document.getElementsByTagName ("img");
// transfira por imagens e adicione um manipulador ao evento de clique de cada nó
// Esconda a imagem ao clicar nela
for (var i = 0; i <imagens.length; i ++) {
var iMge = imagens [i];
if (imge.addeventListener) // Outra maneira de registrar o manipulador de tempo
imge.addeventListener ("clique", ocultar, false);
else // compatível com operações anteriores do IE8
imge.attachevent ("OnClick", ocultar);
}
// Esta é a função de processamento de eventos registrados acima
função hide (evnet) {
event.target.style.visibility = "Hidden";
}
};
</script>
O capítulo 15-17 informa como usar o JavaScript para controlar o conteúdo, o estilo e o comportamento das páginas da Web (processamento de eventos). Este capítulo discute a API um pouco complicada e possui baixa compatibilidade do navegador até agora. É por isso que muitos programadores JavaScript optam por usar a "biblioteca" ou "estrutura" para simplificar seu trabalho de codificação. O mais popular é o jQuery. O capítulo 19 apresenta a biblioteca jQuery
A cópia do código é a seguinte:
Função Debug (msg) {
var log = $ ("#debuglog");
if (log.length == 0) {
log = $ ("<div id = 'debugLog'> <h1> debuglog </h1> </div>");
log.appendto (document.body);
}
document.write (log)
log.append ($ ("<pre/>"). text (msg));
};
Os quatro capítulos da segunda parte que mencionamos são discutidos em torno das páginas da web. Os quatro capítulos subsequentes se concentrarão na loja e se voltarão para os aplicativos da Web. Esses conteúdos não são discutidos como escrever e manipular conteúdo. Estilos e scripts prósperos usam navegadores da web para renderizar documentos; Em vez disso, explique como usar os navegadores da Web como uma plataforma de aplicativos. E descreve as APIs para apoiar aplicativos da Web de clientes mais complexos e refinados e navegadores modernos.
O capítulo 18 explica como usar o JavaScript para iniciar solicitações HTTP.
O capítulo 20 descreve o mecanismo de armazenamento de dados e a manutenção do estado da sessão dos aplicativos do cliente . O capítulo 21 abrange a nova geração de APIs de aplicativos/gráficos de armazenamento de rede acionados pelo HTML5. Eles são baseados no desenvolvimento do navegador que suporta novas APIs. Zhejiang é o seu momento mais emocionante como programador JavaScript. Não há muito código de amostra nos últimos 4 capítulos. O exemplo a seguir usa essas novas APIs.