Antes de leer este libro, me gustaría agradecer al equipo técnico de Taobao por la traducción de este núcleo de JavaScript y Flanagan por escribir este libro. Gracias por su intercambio desinteresado, y solo esta nota está dedicada a su arduo trabajo.
1: JavaScript Language Core
Después de este capítulo, nos centraremos principalmente en los conceptos básicos de JavaScript. Capítulo 2 Explicaremos los comentarios, semicolones y conjuntos de caracteres Unicode de JavaScript; El Capítulo 3 será más interesante, principalmente explicando las variables y las tareas de JavaScript
Aquí hay algunos códigos de ejemplo para ilustrar el contenido clave de los dos primeros capítulos.
La copia del código es la siguiente:
<script type = "text/javaScript">
// El contenido después del doble corte pertenece al comentario
// Lea los comentarios aquí con cuidado, explicará el código JavaScript
// La variable es un nombre simbólico que representa el valor
// Las variables se declaran a través de la palabra clave var
var x; // declarar una variable x
// El valor se puede asignar a la variable a través de símbolos
x = 0; // El valor de la variable x es ahora 0
x // Obtenga su valor por nombre de variable.
// JavaScript admite múltiples tipos de datos
x = 1; //Número
x = 0.01; // Integers y números reales comparten un tipo de datos
x = "hola mundo"; // construye una cadena de texto en cotizaciones dobles
x = 'Hola mundo'; // Las citas individuales también forman cadenas.
x = verdadero; // booleano
x = falso; // otro valor booleano
x = nulo; // nulo es un valor especial. Significado vacío
x = indefinido; // indefinido y nulo son muy similares
</script>
En JavaScript, los tipos más importantes son objetos y matrices. El Capítulo 6 presenta objetos y el Capítulo 7 presenta matrices. Los objetos y las matrices son muy importantes en JavaScript. Tanto es así que se pueden ver en todas partes en este libro.
La copia del código es la siguiente:
<script type = "text/javaScript">
// El tipo más importante en JavaScript es el objeto
// El objeto es una colección de pares de nombre/valor, o una colección de valores de cadena a valores asignados.
VAR Book = {// Los objetos están encerrados en aparatos ortopédicos rizados
Tema: "JavaScript", // El valor del atributo "tema" es JavaScript
grasa: verdadero // El valor de la propiedad es cierto
}; // Los aparatos ortopédicos en el extremo derecho.
// Acceda a las propiedades del objeto a través de "." o "[]".
book.topic // => "JavaScript"
libro ["grasa"] // => verdadera otra forma de obtener atributos,
book.author = "ahthw"; // Crear un nuevo atributo por asignación
book.content = {}; // {} es un objeto vacío. No tiene atributos
// JavaScript también admite matrices (listas indexadas por matrices)
Var Primes = [2, 3, 5, 7]; // tiene una combinación de 4 valores, el límite es dibujado por "[" "]"
Primes [0] // => 2: El primer objeto de la matriz, el índice es 0
primes.length // => 4, el número de elementos en la matriz
primos [primos.length-1] // => 7: El último elemento en la matriz
Primes [4] = 9; // Agregar nuevos elementos por asignación
primos [4] = 11; // Cambiar los elementos existentes por asignación
var vacía = []; // matriz vacía, con 0 elementos
vacía.length // =>: 0
// Las matrices y los objetos pueden contener otra matriz u objeto.
Var Point = [// matriz con dos elementos
{x: 0, y: 0}, // Cada elemento es un objeto
{x: 1, y: 1}
];
var data = {// Un objeto que contiene dos atributos
Trial1: [[1,2], [3,4]], // Cada objeto es una matriz
Trial2: [[2,3], [4,5]] // Los elementos de la matriz también son matrices
};
</script>
La sintaxis del código anterior que define los elementos de matriz a través de los soportes cuadrados y define la relación de mapeo entre los nombres de los atributos del objeto y los valores de atributos a través de corchetes. El Capítulo 4 se introduce específicamente. Las expresiones son una frase en JavaScript. Esta frase se puede calcular para obtener un valor y hacer referencia al valor de los atributos del objeto o los elementos de la matriz a través de "y" [] "para formar una expresión.
El método de escritura de expresión más común en JavaScript son los operadores como el siguiente código (Oprator)
La copia del código es la siguiente:
// operador como operador genera un nuevo valor
// El operador aritmético más común
3+2 // => 5 Adición
3-2 // => resta
3*2 // => múltiples
3/2 // => división
punto [1] .x -point [0] .x // => Las operaciones complejas también pueden funcionar como de costumbre
"3"+"2" // => 32. Puede completar las operaciones de adición o el empalme de cadena.
// JavaScript define algunos operadores aritméticos como abreviatura
Var Count = 0; // Defina una variable
contar ++; // aumentar por 1
contar--; // disminución por 1
recuento += 2; // El auto-incremento 2 es lo mismo que "Count = Count + 2;"
recuento *= 3 // multiplicar 3. De la misma manera que "Count = Count *3;" está escrito
count // => 6: el nombre de la variable en sí también es una expresión
// El operador de relación de igualdad se usa para determinar si los dos valores son iguales o no
// desigual, mayor que, menor que el resultado de la operación del operador es verdadero o falso
var x = 2, y = 3; // El signo igual aquí significa asignación, no relativamente igual
x == y; // => Falso igual
¡incógnita! = y; // => verdadero
x <y; // => verdadero: menos que
x <= y; // Verdadero es menor o igual a
x> y; // falso mayor que
x> = y; // falso mayor o igual a
"Dos" == "tres"; // falsas dos cadenas no son iguales
"Two"> "Three"; // Verdadero El índice de "TW" en el alfabeto es mayor que "th"
falso == (x> y); // ture falso = falso;
// Los operadores lógicos se fusionan o se inversos de los valores booleanos
(x == 2) && (y == 3); // => Verdadero ambas comparaciones son verdaderas. && es "y"
(x> 3) || (y <3); // => Falso ninguno de la comparación es verdadera. || significa "o"
! (x == y); // => Verdadero! Indica búsqueda inversa
Si la "frase" en JavaScript es una expresión, entonces la oración completa se llama una declaración, que se explicará en detalle en el Capítulo 5.
En el código anterior, las líneas que terminan con un punto y coma son todas declaraciones. De manera aproximada, la expresión solo calcula un valor (o no se trata el valor que contiene) pero cambian el estado en ejecución del programa. En lo anterior, se han visto declaraciones de declaración variable y declaraciones de asignación. Otro tipo de declaración es la "estructura de control", como el juicio y el bucle condicional. Después de introducir la función, damos un código de ejemplo relevante.
Las funciones son fragmentos de código JavaScript con nombres y parámetros que se pueden definir y usar varias veces a la vez. El Capítulo 8 explicará formalmente las funciones en detalle. Al igual que los objetos y las matrices, las funciones se mencionan en muchos lugares en este libro, por lo que aquí hay un código de ejemplo simple.
La copia del código es la siguiente:
// La función es un segmento de código JavaScript con parámetros de tratamiento, que se pueden transferir varias veces
función plus1 (x) {// Defina una función llamada Plus1 con el parámetro x
return x + 1; // devuelve un valor que es 1 más grande que el pasado.
} // El bloque de código de la función es la parte envuelta en aparatos ortopédicos
más1 (y) //
var cuadro = function (x) {// La función es un valor que se puede asignar a una variable
return x*x; // Calcular el valor de la función
}; // El punto y coma indica el final de la declaración de asignación
cuadrado (más1 (y)); // una dos funciones en una expresión
Cuando la función y el objeto se escriben juntos, la función está programada con un "método" (método)
La copia del código es la siguiente:
// Cuando se asigna una función al atributo de un objeto, lo llamamos
// "Método", todos los objetos JavaScript contienen métodos
var a = []; // crear una matriz vacía
a.push (1,2,3); // Agregar objetos a la matriz al método push ()
A.Reverse (); // Reversión de datos
// document.write (a)
// podemos definir el método de sub- , la palabra clave "esto" es el método de definición
Referencia al objeto de //, el ejemplo aquí es la matriz que contiene información de posición de dos puntos mencionada anteriormente.
puntos.dist = function () {// Defina un método para calcular la distancia entre dos puntos
var p1 = this [0]; // Obtenga la referencia a la matriz actual a través de esta palabra clave
var p2 = this [1]; // y obtenga los dos primeros elementos de la matriz llamada
var a = p2.x- p1.y; // Distancia en el eje de coordenadas x
var b = p2.y - p1.y; // Distancia en el eje de coordenadas y
return math.sqrt (a * a + "lo llamamos" + b * b); // Teorema de Pitágoras
}; //Math.sqrt () calcula la raíz cuadrada
Points.dist () // => Encuentre la distancia entre dos puntos
Ahora, da algunos ejemplos de declaraciones de control. Aquí la función de ejemplo contiene las declaraciones de control de JavaScript más comunes en el cuerpo.
La copia del código es la siguiente:
// Aquí la instrucción JavaScript usa esta sintaxis para incluir el juicio y el bucle condicional
// Se usa la sintaxis similar a Java C ++ y otros idiomas
Función ABS (x) {// Encuentra la función de valor absoluto
if (x> = 0) {// if
regresar x; // Si es cierto, ejecute este código
} else {// false ejecutar
return -x;
}
}
función FACTPRIAL (n) {// Calculando el factorial
Producto var = 1; // asignar un valor de 1 al producto
While (n> 1) {// bucle para ejecutar {} contenido cuando el valor expresión () es verdadero
producto *= n; // producto = producto * abreviatura
norte--; // N = Método de escritura N-1
} // El bucle termina
producto de devolución; // Producto de devolución
}
FactPrial (4) // => 24 1*4*3*2 Document.Write (FactPrial (4))
función Factorial2 (n) {// Otra forma de escribir un bucle
var i, producto = 1; //
para (i = 2; i <= n; i ++) // aumenta i de 2 a n
producto *= i; // Cuerpo de bucle, cuando solo hay una oración de código en el cuerpo del bucle, omitir {}
producto de devolución; // Calcule y devuelve el buen factorial;
}
Factorial2 (5) //document.write(factorial2(5)) => 120: 1*2*3*4*5
JavaScript es un lenguaje de programación orientado a objetos, pero es muy diferente de los objetos de página tradicionales. El Capítulo 9 explicará el JavaScript orientado a objetos en detalle. Este capítulo tendrá mucho código de muestra, que es el capítulo más largo de este libro.
Aquí hay un ejemplo simple, este código muestra cómo definir una clase en JavaScript para representar puntos en geometría de caras 2D. El objeto instanciado en esta clase tiene un método llamado R () para calcular la distancia desde los puntos cambiantes hasta el origen.
La copia del código es la siguiente:
// Defina un constructor para inicializar un nuevo objeto de punto
punto de función (x, y) {// Los constructores generalmente comienzan con letras mayúsculas
this.x = x; // La palabra clave esto se refiere a la instancia inicializada
this.y = y; // Parámetros de la función de almacenamiento como atributos de un objeto
}
// Crear una instancia utilizando la nueva palabra clave y constructor
var p = nuevo punto (1, 1); // Puntos 1, 1 en geometría plana,
// Asignar valor a través del objeto prototipo de constructor
// para definir métodos para objetos puntuales
Point.prototype.r = function () {
return Math.sqrt (// Devuelve la raíz cuadrada de x cuadrado + y cuadrado
this.x * this.x + // Esto se refiere al objeto que transporta este método
this.y * this.y);
};
// Objeto de instancia de punto P (y todos los objetos de instancia de punto) hereda el método r ()
pr () // => 1.4142135623730951 /document.write (pr ())
El Capítulo 9 es la esencia de la primera parte . Los capítulos posteriores se han extendido esporádicamente, lo que nos llevará al final de nuestra exploración de JavaScript.
El Capítulo 10 habla principalmente de patrones de coincidencia de texto realizados por expresiones regulares.
Capítulo 11 El subconjunto del núcleo del idioma principal y el superconjunto de Gypsum JavaScript .
Antes de ingresar el contenido de JavaScript en el cliente, el Capítulo 12 solo presentamos dos entornos de ejecución de JavaScript fuera de la web.
2. Cliente JavaScript
Hay muchas referencias cruzadas en los puntos de conocimiento del contenido en la parte central del lenguaje JavaScript, y el sentido del conocimiento no está claro. La orquestación de contenido de JavaScript en el lado del cliente ha cambiado mucho. Según este capítulo, puede usar JavaScript en un navegador web. (Pero si desea aprender JavaScript leyendo este libro, no puede concentrarse en la segunda parte) El Capítulo 13 es la primera parte de la segunda parte, que presenta cómo hacer que JavaScript se ejecute en un navegador web. El Capítulo 14 explica la tecnología de secuencias de comandos del navegador web y cubre una función global importante del cliente Javascipt.
Por ejemplo:
La copia del código es la siguiente:
function MoveOn () {
// hacer una pregunta a través del cuadro de diálogo
Var respuesta = confirmar ("¿Estás listo?");
// Haga clic en Aceptar y el navegador cargará una nueva página
if (respuesta) window.location = "http://www.baidu.com";
}
// Ejecutar esta función después de 1 minuto (60000 milisegundos)
setTimeOut (Moveon, 300);
El Capítulo 15 le dirá cómo JavaScript puede manipular el estilo HTML para definir el método de visualización de contenido . El contenido del Capítulo 15 será más pragmático. A través de los scripts, mostrará cómo seleccionar elementos específicos de la página web, cómo establecer atributos para elementos HTML, si el contenido del elemento se modifica y cómo agregar nuevos nodos al documento
La siguiente función de ejemplo muestra si encuentra y modifica el contenido básico del artículo
La copia del código es la siguiente:
// Una información específica en el documento y el Área del Área está sobre la información de depuración
// Si este elemento no existe en el documento, cree un
function debug (msg) {
// Encuentra la parte de depuración del documento viendo el atributo de identificación del elemento HTML
var log = document.getElementById ("debuglog");
// Si el elemento no existe, cree un
if (! log) {
log = document.createElement ("div"); // Crear un nuevo elemento Div
log.id = "debuglog"; // Asignar valor a la ID de cada elemento
log.innerhtml = "<h1> log de depuración </h1>"; // Personalizar el contenido inicial
document.body.appendChild (log); // Agregarlo al final del documento
}
// Incluya el mensaje en <pre> y agrégalo al registro
var pre = document.createElement ("pre"); // Crear pre elemento
var text = document.createElement (msg); // Incluye MSG en un nodo de texto
pre.appendChild (texto); // Agregar texto a pre
log.appendChild (pre); // pre agregar al registro
}
El Capítulo 16 hablará sobre cómo usar JavaScript para operar elementos , que generalmente usan los atributos de estilo y clase del elemento.
La copia del código es la siguiente:
Function Hide (E, Reflow) {// manipular elementos y ocultar elementos e a través de jvascript
if (reflow) {// Si el segundo parámetro es verdadero
e.style.display = "Ninguno" // Oculta este elemento, y el espacio que ocupa también se vende
} demás {
E.Style.visibility = "Hidden"; // esconder e, retener el espacio que toma
}
}
resaltado de función (e) {// resaltar E configurando CSS
if (! e.classname) e.classname = "highcss";
demás
e.classname += "highcss";
}
El contenido y el estilo de elementos CSS se pueden controlar a través de JavaScript, y el comportamiento del documento también se puede definir a través de los controladores de eventos. El manejo de eventos es una función JavaScript registrada en el centro del navegador. Cuando ocurre un evento específico, el navegador puede llamar a esta función.
Por lo general, los tipos de eventos en los que nos centramos son los clics del mouse y los eventos de teclado (los teléfonos inteligentes son varios eventos táctiles). O cuando el navegador complete la carga del documento, se activará un evento de persona cuando el usuario cambie el tamaño de la ventana o cuando el usuario ingrese datos en el formulario.
El Capítulo 17 describirá en detalle cómo definir, registrar los controladores de tiempo y cómo los llaman el navegador cuando ocurran los eventos.
La forma más fácil de personalizar los controladores de eventos es unir una devolución de llamada al atributo prefijo por HTML. Al escribir algunas pruebas de programa simples, la forma más práctica es unir una devolución de llamada al controlador "OnClick". Suponiendo que las funciones de Debug () y Hide () anteriores se guardan en los archivos debug.js y hide.js anteriores, simplemente puede especificar un controlador de eventos para el atributo OnClick. como sigue
La copia del código es la siguiente:
<script type = "text/javaScript">
// Una información específica en el documento y el Área del Área está sobre la información de depuración
// Si este elemento no existe en el documento, cree un
function debug (msg) {
// Encuentra la parte de depuración del documento viendo el atributo de identificación del elemento HTML
var log = document.getElementById ("debuglog");
// Si el elemento no existe, cree un
if (! log) {
log = document.createElement ("div"); // Crear un nuevo elemento Div
log.id = "debuglog"; // Asignar valor a la ID de cada elemento
log.innerhtml = "<h1> log de depuración </h1>"; // Personalizar el contenido inicial
document.body.appendChild (log); // Agregarlo al final del documento
}
// Incluya el mensaje en <pre> y agrégalo al registro
var pre = document.createElement ("pre"); // Crear pre elemento
var text = document.createElement (msg); // Incluye MSG en un nodo de texto
pre.appendChild (texto); // Agregar texto a pre
log.appendChild (pre); // pre agregar al registro
}
Function Hide (E, Reflow) {// manipular elementos y ocultar elementos e a través de jvascript
if (reflow) {// Si el segundo parámetro es verdadero
e.style.display = "Ninguno" // Oculta este elemento, y el espacio que ocupa también se vende
} demás {
E.Style.visibility = "Hidden"; // esconder e, retener el espacio que toma
}
}
resaltado de función (e) {// resaltar E configurando CSS
if (! e.classname) e.classname = "highcss";
demás
e.classname += "highcss";
}
</script>
Hola
<Button onClick = "Hide (this, true); debug ('Hide Button 1');"> Hide1 </boton>
<Button onClick = "Hide (this); Debug ('Hide Button 2');"> Hide2 </ butotn>
El siguiente cliente JavaScript utiliza eventos, que ofrece un evento muy importante: el evento "Load" registra un evento para manejar el chenxing. Los colegas también muestran una forma más avanzada de registrar manejadores de eventos "Haga clic"
La copia del código es la siguiente:
<script type = "text/javaScript">
// El evento de "carga" solo se puede disparar después de cargar el documento
// Si generalmente necesita esperar a que ocurra el evento de carga antes de poder ejecutar el código JavaScript
window.onload = function () {
// Encuentra todas las etiquetas IMG en el documento
var las imágenes = document.getElementsBytagName ("img");
// transferir a través de imágenes y agregar un controlador al evento de clic de cada nodo
// Ocultar la imagen al hacer clic en ella
para (var i = 0; i <images.length; i ++) {
var imge = imágenes [i];
if (imge.addeventListener) // Otra forma de registrar el controlador de tiempo
imge.addeventListener ("Haga clic", Ocultar, falso);
else // compatible con operaciones anteriores de IE8
imge.attachevent ("onclick", escondite);
}
// Esta es la función de procesamiento de eventos registrada anterior
function hide (evnet) {
event.target.style.visibility = "Hidden";
}
};
</script>
El Capítulo 15-17 dice cómo usar JavaScript para controlar el contenido, el estilo y el comportamiento de las páginas web (procesamiento de eventos). Este capítulo discute la API un poco complicado, y hasta ahora tiene una mala compatibilidad del navegador. Es por eso que muchos programadores de JavaScript eligen usar "biblioteca" o "marco" para simplificar su trabajo de codificación. El más popular es jQuery. El capítulo 19 presenta la biblioteca jQuery
La copia del código es la siguiente:
function debug (msg) {
var log = $ ("#debuglog");
if (log.length == 0) {
log = $ ("<div id = 'debuglog'> <h1> debuglog </h1> </div>");
log.appendto (document.body);
}
document.write (registro)
log.append ($ ("<pre/>"). Text (msg));
};
Los cuatro capítulos de la segunda parte que mencionamos se discuten en las páginas web. Los cuatro capítulos posteriores se centrarán en la tienda y recurrirán a aplicaciones web. Estos contenidos no se discuten cómo escribir y manipular contenido. Estilos y scripts prósperos usan navegadores web para representar documentos; En su lugar, explique cómo usar navegadores web como plataforma de aplicación. Y describe API para admitir aplicaciones web de clientes más complejas y refinadas y navegadores modernos.
El Capítulo 18 explica cómo usar JavaScript para iniciar solicitudes HTTP.
El Capítulo 20 describe el mecanismo de almacenamiento de datos y el mantenimiento del estado de la sesión de las aplicaciones del cliente . El Capítulo 21 cubre la nueva generación de API de aplicaciones/gráficos de almacenamiento de red impulsados por HTML5. Estos se basan en el desarrollo del navegador que admite nuevas API. Zhejiang es tu momento más emocionante como programador de JavaScript. No hay mucho código de muestra en los últimos 4 capítulos. El siguiente ejemplo usa estas nuevas API.