Software para trabajar con javascript. ¿Cuál es el mejor editor de código HTML, PHP, CSS, JS? Condiciones y ciclos

Java Script It! Es un buen programa para crear buenos efectos en JavaScript. Con este programa, claramente hará su vida más fácil al crear sitios. Básicamente, está destinado a personas que son demasiado perezosas para escribir scripts ellos mismos o cualquier cosa en JavaScript. Por supuesto, fue diseñado pensando en los principiantes, aunque todavía necesita un conocimiento mínimo de HTML para trabajar con él.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación de secuencias de comandos orientado a objetos diseñado para crear páginas HTML activas. Por "activo" aquí nos referimos a páginas HTML que alojan todo tipo de elementos web que cambian dinámicamente, por ejemplo:

• Menús que se despliegan al pasar el mouse.
• Pequeñas imágenes animadas siguiendo el cursor o, por ejemplo, moviéndose a una determinada parte de la página al hacer clic en cualquier elemento.
• Bloques de información (por ejemplo, con breve descripción mercancías) con desplazamiento de tiempo automatizado y mucho más.

Aquellos. JavaScript le permite crear dichos elementos web que interactúan con el usuario de alguna manera, respondiendo al movimiento del cursor del mouse, pulsaciones de teclas, desplazamiento de la página en el navegador, etc. Los elementos web totalmente automatizados que realizan cualquier acción sin la intervención del usuario también deben agregarse a esta lista.

Como en cualquier otro lenguaje de programación, JavaScript contiene conceptos como variables, matrices, cálculos aritméticos lógicos, etc. etc. Aquellos. a ayuda de JavaScript puede realizar cálculos complejos, administrar grandes cantidades de datos y mucho más que permanece fuera de la vista del visitante del sitio.

El hecho de que JavaScript sea un lenguaje de programación orientado a objetos abre aún más posibilidades para el programador, pero este tema no se considerará aquí.

Aprender JavaScript a través de Java Script It!

Una de las principales razones de una popularidad tan alta de JavaScript entre los programadores web novatos es la posesión de este lenguaje de programación, el llamado "umbral de entrada bajo". Aquellos. El conocimiento básico del lenguaje de marcado HTML y CSS es suficiente para aprenderlo.

Java Script It! proporciona herramientas para insertar rápidamente códigos de una variedad de elementos web prefabricados escritos en JavaScript en una página HTML. Todos los artículos disponibles se dividen en 3 categorías:

1. Los applets son elementos que realizan alguna función independiente: un banner, texto animado, una imagen en movimiento, etc.
2. Scripts: aquí se presentan principalmente elementos web controlados por el usuario: formularios para ingresar texto por máscara (fechas, contraseñas, etc.), bloques que le permiten crear presentaciones de diapositivas con desplazamiento automático de imágenes, varios botones del sistema (por ejemplo, para abrir cuadros de diálogo para subir archivos al sitio).
3. Y DHTML: una variedad de elementos interactivos compuestos de marcado HTML, tablas en cascada CSS y scripts JavaScript (como menús desplegables o ventanas emergentes / formularios).

Cualquiera de los elementos disponibles tiene su propia configuración. Por simplicidad y conveniencia de ingresarlos / cambiarlos, se proporciona un formulario especial.

Insertar código JavaScript con Java Script It! Tiene este aspecto:

• El usuario crea un archivo en disco con la extensión HTM o HTML. También puede utilizar un archivo HTML listo para usar con algún código.
• A continuación, se selecciona uno de los elementos web disponibles, después de eso, se completa el formulario con su configuración (por ejemplo, dimensiones, nombres de elementos de menú, etc.).
• El código JavaScript generado se inserta en el archivo HTML en la posición deseada por el usuario (esto se hace en forma de configuración del elemento web).
• Hecho.

En Java Script It! complemento de navegador de Windows estándar integrado explorador de Internet, es decir. el resultado del trabajo se muestra inmediatamente después del final de la configuración del elemento web Puede ver el resultado en cualquier otro navegador, para lo cual es suficiente abrir el archivo HTML creado / editado en él.

Si abre en un navegador fuente Páginas HTML, puede ver y examinar el código JavaScript en sí. Aquí también puede editarlo cambiando diferentes significados a mano. Por lo tanto, el usuario podrá adquirir habilidades básicas de programación en JavaScript, es decir, cómo se inserta el código en un documento HTML, qué comandos se utilizan para establecer ciertas propiedades de un elemento web, etc.

Por supuesto, Java Script It! se puede utilizar para llenar páginas web con diferentes elementos activos, pero debido a la obsolescencia del programa, es más adecuado para familiarizarse con los conceptos básicos de la programación en JavaScript.

Este capítulo se centra en el lenguaje de secuencias de comandos JavaScript. Aprenderá qué es JavaScript y por qué es necesario.

Consideremos las características de crear dinámicas en la página, procesar formularios y trabajar con capas y estilos.
JavaScriptes un lenguaje de scripting orientado a objetos con una sintaxis ligeramente similar a la sintaxis de los lenguajes C, Perly Pitón... A pesar de que el idioma tiene un nombre similar al idioma programación Java, no tienen nada en común, excepto una parte del nombre.

Actualmente JavaScriptse utiliza principalmente para crear scripts incrustados en páginas web que le permiten controlar por completo tanto las páginas web en sí mismas, como los navegadores web en los que se abren estas páginas web. Entonces el idioma JavaScripten la mayoría de los casos, se utiliza para crear páginas web y aplicaciones web interactivas.

Internet se basa en la tecnología " servidor de cliente».
Los servidores son computadoras o programas que brindan algún tipo de servicio a los clientes, como un servidor web o un servidor de correo electrónico.
Los clientes son computadoras o programas que utilizan lo que ofrecen los servidores, como navegadores web o clientes de correo electrónico.

Guiones JavaScriptson pequeños programas que se ejecutan en la computadora de un usuario cuando se descargan de un servidor junto con páginas web.

Alcance de JavaScript

Desde sus inicios, JavaScript se ha utilizado para escribir varios scripts del lado del cliente. Se han utilizado ampliamente para tareas como validar la información ingresada por un usuario en un formulario antes de enviarlo a un servidor, o programar respuestas a las acciones del usuario para que las páginas web sean interactivas. Hoy en día, las aplicaciones web completas se crean utilizando JavaScript, algunas de ellas no son muy inferiores a sus "contrapartes" de escritorio. Buenos ejemplos tales aplicaciones web se pueden encontrar entre los servicios de Google, por ejemplo, Google Calendar, un organizador multifuncional en un navegador web y Documento de Google & Hoja de cálculo: texto y editor de hojas de cálculo, lo que le permite trabajar con documentos de Office directamente en la ventana del navegador web. El lenguaje de creación de contenido dinámico se utiliza para crear contenido dinámico de páginas web. páginas HTML HTML dinámico (HTML dinámico), cuya parte clave es nuevamente JavaScript.

JavaScript se utiliza no solo en Internet, sino también en programas como Adobe Dreamweaver, Adobe Acrobat Lector y Adobe Photoshop para ampliar sus capacidades, similar al uso del lenguaje Visual Basic en Microsoft Office.

Ahora veamos cómo crear scripts y cómo incrustarlos en un documento HTML.

Scripting

Analizaremos todas las etapas de la creación de un script JavaScript, desde la organización de un entorno de trabajo hasta la conexión del código a un documento HTML.

Para trabajar en scripts, casi cualquier editor de texto que le permita crear archivos de texto y guárdelos con la extensión htm o html. Por ejemplo, en el quirófano sistema de Windows Entre el estándar hay dos editores de texto adecuados: Bloc de notas y WordPad. También hay editores diseñados específicamente para crear páginas web, como Microsoft FrontPage y Adobe Dreamweaver (anteriormente conocido como Macromedia Dreamweaver). Estos editores le permiten crear páginas web utilizando herramientas visuales y luego cambiar al modo de visualización de código y realizar cambios no estándar, como agregar scripts. A diferencia de los convencionales editores de texto, estos editores destacan la sintaxis de HTML y JavaScript, lo cual es muy conveniente.

Además, en Internet puedes encontrar una gran cantidad de otros editores de texto que te permiten crear páginas web y resaltar la sintaxis de HTML y JavaScript. Estos editores también tienen muchas otras funciones útiles que simplifican enormemente el proceso de creación de páginas web y desarrollo de scripts. Muchos de estos editores son gratuitos o shareware, y es posible que encuentre uno de ellos de su agrado.

Creará scripts que manipularán páginas web, por lo que necesitará un navegador web de algún tipo para probar estos documentos. Tenga en cuenta que al probar su creación en un navegador web, no puede estar seguro de que funcione en otros. Por lo tanto, es recomendable consultar las páginas web en varios navegadores web, y cuanto más, mejor.

Los desarrolladores web deben considerar principalmente las peculiaridades del navegador web. Microsoft Internet Explorador. Por lo tanto, asegúrese de probar sus páginas web en este navegador web, que está disponible en todos los sistema operativo Windows.
Los navegadores web también son muy populares. Mozilla Firefox y Opera, que se esfuerzan por cumplir con los estándares tanto como sea posible. Mozilla Firefox se puede descargar desde http://www.mozilla.ru/ y Opera desde el sitio.

Consideremos depurar un programa (script) por separado. Cuando un script es grande, no es tan fácil de entender y la depuración, es decir, el proceso de encontrar y corregir errores, puede tomar la mayor parte del tiempo de desarrollo de todo el programa (o script). Para simplificar y acelerar la depuración, programas especialesllamado depuradores... Un depurador típico tiene características como recorrer un programa, detenerse en cada línea de código o en puntos de interrupción marcados previamente, y rastrear y cambiar los valores de cada variable mientras el programa se está ejecutando.

Hay muchos programas para depurar scripts JavaScript. Por ejemplo, Microsoft Script Debugger tiene todo lo que necesita para depurar correctamente los scripts de JavaScript. Se utiliza junto con el navegador web Microsoft Internet Explorer. Microsoft distribuye este ajustador de forma gratuita y puede descargarse del sitio web. Además, este depurador se distribuye junto con el editor de Microsoft FrontPage en programas de Microsoft Script Editor, que prácticamente no se diferencia de Microsoft Script Debugger.

También hay otros depuradores, por ejemplo, para el navegador web Mozilla Firefox, se crean como extensiones. En particular, el depurador FireBug se puede descargar del sitio y, si accede a esta página en el navegador web Mozilla Firefox, el depurador se instalará inmediatamente.

No cubriremos el proceso de depuración en este libro, ya que es un tema separado que requiere un estudio cuidadoso. No se requiere depuración para escribir scripts simples.

Incrustar scripts

Considere incrustar scripts en páginas web.
Los scripts están incrustados en un documento HTML de tres formas estándar:

texto como guión en cualquier idioma. El lenguaje de secuencias de comandos se especifica mediante el atributo de tipo. Por ejemplo, el siguiente código se utiliza para especificar el lenguaje JavaScript:

Este atributo se puede omitir, ya que el valor "texto / javascript" es el predeterminado.

Puede utilizar comentarios en su código de secuencia de comandos, texto que el intérprete de JavaScript ignora. Comentarios // y

Los comentarios también pueden ser de varias líneas, lo que facilita la depuración del script y le permite comentar la sección problemática del código. Los juegos de caracteres / * y * / se utilizan para este propósito, como, por ejemplo, en el siguiente código:

Los scripts pueden estar contenidos dentro de la propia página web, como se describió anteriormente, o en un archivo separado. Etiqueta

...

4. Guarde el archivo, por ejemplo llamado script1.html.
Después de crear una página web con un script, puede ver cómo se verá en un navegador web. Para asegurarse de que el script funcione como se espera, pruébelo en todos los navegadores web instalados en su computadora.
5. Inicie un navegador web y abra la página web generada en él.

Por lo tanto, si hizo todo correctamente, aparecerán diez mensajes "¡Hola mundo!" En la pantalla de su navegador web. (figura 2.3).

A la hora de desarrollar scripts, normalmente tienes abierto a la vez un editor de texto, en el que se crea la página web, y varios navegadores web, en los que se comprueba la funcionalidad de la página web generada. Después de realizar cambios en la secuencia de comandos, simplemente cambie a su navegador web y haga clic en el botón Actualizar.

Figura: 2.3. Tu primer script en un navegador web

Sintaxis de JavaScript y funciones básicas

Ahora vamos a explicar los elementos básicos del lenguaje JavaScript: variables, tipos de datos, expresiones, varios operadores, funciones, etc. Este conocimiento es básico, ya que sin él es imposible comprender el resto del material.

Trabajando con información

Cualquier programa o script trabaja con información, es decir, reciben algunos datos, los procesan de acuerdo con su algoritmo y luego, por regla general, devuelven algún resultado en forma de imagen, sonido, archivo, señal a otro programa, etc. .

Los scripts del cliente a menudo actúan como un búfer entre el usuario y el programa del servidor, realizando el preprocesamiento y la verificación de datos.

Los scripts de cliente pueden obtener información de las siguientes formas:

/ datos puestos en el script por el desarrollador (valores iniciales);
/ datos recibidos del usuario mediante formularios;
/ datos pasados \u200b\u200ba través de URL;
/ información recibida al manejar eventos, como mover el puntero del mouse, hacer clic o presionar teclas;
/ datos recibidos de otros sitios o transmitidos por un programa de servidor.

Considere la entrada / salida de información en JavaScript usando los siguientes tres métodos: alert (), prompt () y confirm (). Estos métodos generan varios cuadros de mensajes.

Método de alerta ()

El método alert () muestra un cuadro de diálogo de alerta con un mensaje apropiado. Después de leer el mensaje, el usuario debe hacer clic en el botón Aceptar para cerrar la ventana. El argumento de este método es una cadena.

En el caso más simple, el texto de advertencia citado se ingresa entre paréntesis (Listado 2.3).

Listado 2.3. Trabajando con una advertencia

La ventana de advertencia la genera el propio navegador, por lo que la apariencia de la ventana puede variar de un navegador a otro. En la Fig. 2.4 muestra la vista de la ventana generada usando el código presentado en el navegador Internet Explorer.

Figura: 2.4. Trabajando con una advertencia

Método Prompt ()

El método prompt () se usa para recuperar datos del usuario (Listado 2.4).

Listado 2.4. Trabajando con una consulta

Cuando se invoca, se muestra un cuadro de diálogo con un cuadro de texto. Este método puede contener dos argumentos. El primer argumento es el mensaje que se muestra en el cuadro de diálogo. El segundo argumento es el texto predeterminado que debería aparecer en el campo correspondiente. Además, este método devuelve un valor: el texto que ingresó el usuario.

Después de iniciar la página con el código anterior, aparecerá una solicitud (Fig. 2.5), seguida de una advertencia.

Figura: 2.5. Trabajando con una consulta

Este ejemplo usa una variable para demostrar cómo funciona el método prompt (), y el método alert () usa una expresión como argumento. Analizaremos estos conceptos a continuación.

En el método prompt (), puede omitir el segundo argumento, es decir, especificar solo una línea.

Confirmar () método

El método confirm () muestra un cuadro de diálogo de confirmación que contiene dos botones: Aceptar y Cancelar. El Listado 2.5 muestra el código para crear una ventana de confirmación, pero este script no resalta la diferencia entre los botones Aceptar y Cancelar.

Listado 2.5.Trabajar con confirmación

Al hacer clic en cualquiera de los botones, se cerrará el cuadro de diálogo (Fig. 2.6).

Figura: 2.6. Trabajar con confirmación

La secuencia de comandos puede reaccionar de manera diferente a los clics en los botones Aceptar y Cancelar.

Variables y tipos de datos

Al interpretar una secuencia de comandos, el navegador divide el código en caracteres, palabras o frases individuales que puede reconocer. Estos elementos se denominan tokens. En JavaScript, los tokens se dividen en cuatro tipos: identificadores, palabras clave, literales y operaciones.

Identificadores

Identificadoresson nombres que denotan variables, funciones y objetos. Algunos nombres no se pueden utilizar como identificadores porque tienen un significado especial. Los identificadores se forman utilizando combinaciones de diferentes caracteres con las siguientes restricciones:

/ todos los identificadores deben comenzar con una letra;
/ después de la primera letra, otros caracteres pueden ser letras y números;
Las letras / se consideran todas las letras mayúsculas y minúsculas del alfabeto latino: de la A a la Z y de la a a la z;
/ el carácter de subrayado (_) actúa como una letra y se usa a menudo en lugar de un espacio, que no se puede usar en identificadores;
/ El signo de dólar ($) actúa como una letra y se usa comúnmente en la generación automática de código.

SUGERENCIA
No debe usar identificadores que difieran solo en mayúsculas y minúsculas en el mismo script, como flagId y FlagID. Estos son varios identificadores que pueden causar errores sutiles.

Mesa 2.1 proporciona ejemplos de identificadores válidos y no válidos.

Permisible	Inválido
contar	2my
X	nuevo
X	mi
esta bien	esta bien

Cuadro 2.1. Ejemplos de identificadores de JavaScript

Tenga en cuenta que el nuevo identificador, aunque contiene caracteres legales, es una palabra clave y, por lo tanto, no puede actuar como un identificador definido por el usuario.

Palabras clave y palabras reservadas

Palabras clave son identificadores predefinidos que forman el núcleo del lenguaje JavaScript. Estas palabras tienen un significado especial y cumplen determinadas funciones. Las palabras clave no se pueden utilizar para identificadores personalizados. Mesa 2.2 es una lista de palabras clave de JavaScript.

descanso	demás	nuevo	tipo de
caso	finalmente	nulo	var
captura	por	regreso	vacío
Seguir	función	cambiar	mientras
defecto	si	esta	con
Eliminar	en	lanzar
hacer	en vez de	tratar

Cuadro 2.2. Palabras clave JavaScript

resumen	enumeración	En t	pequeño
booleano	exportar	interfaz	estático
byte	extiende	largo	súper
carbonizarse	final	nativo	sincronizado
clase	flotador	paquete	lanza
constante	ir	privado	transitorio
depurador	implementos	protegido	volátil
doble	importar	público

Cuadro 2.3. Palabras reservadas de JavaScript

Literales

Literalesson números o cadenas que se utilizan para representar valores en JavaScript. La información puede ser muy diversa, por lo que los significados vienen en diferentes formas. Los tipos de datos más simples en JavaScript se denominan tipos de datos básicos: números, cadenas y valores booleanos.

Hay dos tipos de números en JavaScript: enteros y números de coma flotante. Los valores enteros pueden ser positivos, como 1, 2, 3, negativos, como –1, –2, –3 y cero. Además, los valores enteros se pueden expresar en sistemas de notación decimal, octal o hexadecimal.

Los números decimales pueden incluir cualquier secuencia de dígitos del 0 al 9 que no comience con cero.

Los números octales pueden incluir cualquier secuencia de números del 0 al 7, que debe comenzar con cero.

Los números hexadecimales pueden incluir cualquier secuencia de números del 0 al 9 y letras de la aa la f, que deben comenzar con 0x.

Consideremos ejemplos de representación de números enteros en varios formatos (Tabla 2.4).

Formato decimal	Formato octal	Formato hexadecimal
45	055	0x2d
– 255	– 0377	- 0xff
10000000	046113200	0 × 989680
10	012	0XA

Cuadro 2.4. Ejemplos de enteros

Los números de coma flotante definen números decimales con una parte fraccionaria. Estos números se pueden expresar en notación normal o exponencial. En el último caso, el símbolo se utiliza para representar el orden mi o mi... La mantisa decimal y el orden pueden ser positivos o negativos. A continuación se muestran ejemplos de números de coma flotante.

1.4142135623730950488016887242097 -35.0 4567.0002 3.4e100 -5.456e-3 0.007

Los tipos de datos booleanos son compatibles con JavaScript, que solo puede tomar dos valores: verdadero (verdadero) y falso (falso). Los valores booleanos son necesarios para lidiar con condiciones que aprenderá más adelante en este capítulo.

¡ATENCIÓN!
Las palabras clave verdadero y falso deben ingresarse en minúsculas.

El tipo de datos más comúnmente utilizado en JavaScript es probablemente cadena. Líneaes un conjunto de caracteres (posiblemente vacío), entre comillas simples o dobles. Los dos tipos de comillas se utilizan porque la cadena puede contener algún tipo de comillas. Los siguientes son ejemplos de cadenas literales:

"Línea de texto" "Rusia!" "4567" "" "Sistemas operativos" Lewis Carroll "Alicia en el país de las maravillas" "

A veces, puede ser necesario indicarle a la computadora que utilice caracteres especiales como pestañas o avances de línea. Para incluir cualquier carácter Unicode en una cadena, debe ingresar su código después del carácter de servicio \\ u en la forma \\ uXXXX. Mesa 2.5 enumera los caracteres de control más utilizados.

Secuencia de control	Unicode	Descripción	Símbolo
\\ B	\\ u0008	Retroceso
\\ t	\\ u0009	Pestaña horizontal
\\ n	\\ u000A	Salto de línea (nueva línea)
\\ v	\\ u000B	Pestaña vertical
\\ f	\\ u000C	Feed de página
\\ r	\\ u000D	Retorno de carro
\»	\\ u0022	Cotización doble	»
\’	\\ u0027	Una frase	’
\\	\\ u005C	Barra invertida	\

Cuadro 2.5. Personajes de control

A menudo, los caracteres de control se utilizan para alinear datos (Listado 2.6).

Listado 2.6. Alineación de datos con caracteres de control

El cuadro de diálogo generado por el método alert () depende del navegador, por lo que la alineación es diferente en los diferentes navegadores. El código anterior está adaptado a Microsoft Internet Explorer (Fig. 2.7).

Figura: 2.7. Justificación con caracteres de control

Además de números, cadenas y valores booleanos, existen otros dos tipos de datos especiales: funciones y objetos. Las funciones pueden estar integradas, como alert (), o pueden ser creadas por el desarrollador. Además, las funciones pueden ser propiedad de un objeto (en este caso, se llaman métodos). Los objetos también pueden estar en línea (por ejemplo, un documento) o pueden ser creados por el programador. Null se considera un objeto.

Variables

Variablees un nombre asignado a la ubicación de la memoria de una computadora que almacena datos específicos mientras se ejecuta un script. Las variables facilitan al programador la manipulación de datos.

El nombre de la variable es un identificador, por lo que sigue las mismas reglas.

Antes de usar una variable, debes declararla, es decir, reservar espacio para almacenar datos. Para declarar una variable, debe especificar su identificador después de la palabra clave var. Puede declarar varias variables a la vez especificando sus nombres separados por comas:

Var myData1; var x, y, z; var k, msg1, msg2, IM;

En el proceso de declarar una variable, se puede inicializar, es decir, establecer un valor inicial para ella:

Var myStr \u003d "Hola"; var k \u003d 1000, x \u003d 12, y \u003d –5; var s \u003d 1.34e-5, msg11 \u003d "Error", Flag \u003d falso;

Hasta que la variable reciba un valor, no está definida, no está definida. Para determinar el tipo de una variable, puede usar la operación typeof, que devuelve una cadena con el tipo de la variable (Listado 2.7).

Listado 2.7. Tipos de datos

Tipos de datos

En el código anterior, usamos el método document.write () para mostrar información, lo que nos permite agregar una línea de texto directamente a la página (Fig. 2.8).

Figura: 2.8. Tipos de datos

Para mostrar el texto, los valores de las variables y su tipo, el argumento de este método es una expresión bastante compleja. Las expresiones se explicarán con más detalle a continuación.

Las variables por alcance se dividen en globales y locales. Una variable declarada dentro de una función es local y solo esa función tiene acceso a su valor. Las variables locales se crean y destruyen junto con la función correspondiente. Las variables globales se declaran fuera de las funciones. Estas variables permiten que las funciones intercambien datos.

Formaciónes una variable especial que le permite almacenar varios valores a la vez. Normalmente, estos valores están relacionados, como los nombres de los meses y los días de la semana. Las matrices pueden simplificar enormemente su código y, al utilizar bucles, reducir la complejidad de la creación de scripts.

Considere un ejemplo de declaración y configuración de valores para elementos de matriz (Listado 2.8).

Listado 2.8. Trabajando con una matriz

Tenga en cuenta que al declarar una matriz, el número de elementos se indica entre paréntesis, y cuando se hace referencia a un elemento, su índice se especifica entre corchetes. Además, la numeración de los elementos de la matriz en JavaScript se basa en cero, por lo que el primer elemento de la matriz serán las estrellas.

JavaScript hace posible mostrar todos los elementos de una matriz en lugar de enumerarlos uno a la vez. Para hacer esto, debe consultar la matriz en sí. El resultado será una cadena en la que todos los elementos de la matriz se enumeran separados por comas (Fig. 2.9).

Figura: 2.9. Mostrando todos los elementos de una matriz

Los valores de los elementos de la matriz se pueden establecer cuando se declara la matriz. En este caso, no necesita especificar el número de elementos en la matriz (Listado 2.9).

Listado 2.9. Inicialización de matriz

La dimensión de la matriz se puede omitir, ya que JavaScript no la requiere. La matriz se puede expandir a medida que se agregan datos. Además, puede declarar un elemento con un índice norte, que aumentará la longitud de la matriz a n + 1... Puede averiguar la longitud de una matriz usando la propiedad length (Listado 2.10).

Listado 2.10. Tamaño de la matriz

A pesar de que en realidad hay 6 elementos en la matriz, la longitud de la matriz es 100 (figura 2.10).

Figura: 2.10. Tamaño de la matriz

Expresiones

Expresionesson operandos combinados mediante operaciones. Los valores y las variables se utilizan normalmente como operandos, pero también se pueden utilizar otras expresiones. Por ejemplo, la expresión 4 + 6 suma dos valores, resultando en el valor 10. Y la expresión q \u003d 5 asigna a la variable q el valor 5. Si las manipulaciones se realizan con un valor, entonces la operación se llama unaria, y si sobre dos - binario... A continuación, veamos las operaciones de JavaScript.

Operaciones de cesión

Una de las operaciones que se utilizan con más frecuencia es la operación de asignación. En el caso más simple, esta operación asigna un valor a una variable:

Esta operación se puede utilizar simultáneamente para varias variables:

msg1 \u003d msg2 \u003d "Hola"

Otras operaciones de asignación son combinaciones de asignación y operaciones aritméticas o bit a bit (Tabla 2.6).

Cuadro 2.6. Operaciones de asignación combinadas

Operaciones aritmeticas

/ Suma - signo más (+). Por ejemplo, 5 + 7 \u003d 12.
/ La resta es un signo menos (-). Por ejemplo, 67 - 43 \u003d 24.
/ La multiplicación es un asterisco (*). Por ejemplo, 2 * 2 \u003d 4.
/ División: barra inclinada (/). Por ejemplo, 45/5 \u003d 9.
/ Resto de la división - porcentaje (%). Por ejemplo, 7% 5 \u003d 2.
/ Para trabajar con números se utilizan operaciones aritméticas.

En programación, las operaciones de aumentar o disminuir una variable en uno son muy comunes (operaciones de incremento y decremento). El incremento está indicado por la secuencia ++ y decremento - por la secuencia — ... Por ejemplo, yo ++ es una alternativa a la expresión yo \u003d yo + 1.

Hay formas de prefijo y sufijo de estas operaciones. En el caso de una operación de prefijo, primero se realiza un incremento o decremento y luego se evalúa la expresión:

i \u003d 4
++ i * 2 \u003d 10

Si se usa una operación de sufijo, primero se evalúa la expresión y luego se aumenta o disminuye la variable:

i \u003d 4
i ++ * 2 \u003d 8

El listado 2.11 demuestra cómo trabajar con operaciones aritméticas.

Listado 2.11... Operaciones aritmeticas

Operaciones aritmeticas

En este ejemplo, puede ver que las operaciones aritméticas obedecen a reglas matemáticas. Por ejemplo, la multiplicación tiene lugar antes que la suma (Figura 2.11).

Esto se hace mediante la prioridad de las operaciones, que se puede cambiar entre paréntesis.

Figura: 2.11. Operaciones aritmeticas

Operaciones de comparación

Los operadores de comparación se utilizan para hacer coincidir operandos. En estas operaciones, los operandos pueden ser no solo números, sino también cadenas, valores booleanos y objetos. Mesa 2.7 enumera todas las operaciones de comparación.

Cuadro 2.7. Operaciones de comparación

El listado 2.12 muestra el código que usa operaciones de comparación.

Listado 2.12... Operaciones de comparación

Operaciones de comparación

El código anterior compara variables i \u003d 5 y m2 \u003d "5"... Se consideran iguales, pero no idénticos (Figura 2.12).

Figura: 2.12. Operaciones de comparación

Operaciones con cadenas

Como se mencionó, las cadenas se pueden comparar. Alternativamente, se pueden concatenar mediante la operación de concatenación (+) , que hemos hecho más de una vez. Por ejemplo:

S1 \u003d "Hola"; S2 \u003d ","; S3 \u003d "¡Paz!"; S \u003d S1 + S2 + "" + S3;

Como resultado, la variable S contendrá la cadena "¡Hola mundo!"

Gracias a la conversión automática de tipos, puede combinar números y cadenas:

"año" + 2008 \u003d "año 2008"

Operaciones lógicas

Las operaciones booleanas le permiten combinar expresiones que devuelven valores booleanos. El lenguaje JavaScript admite tres operaciones lógicas.

Operación lógica AND (&&) devoluciones ciertosolo si ambos operandos son verdaderos. Por ejemplo, (12) .

Operación lógica OR (||) devoluciones ciertosi al menos un operando es verdadero. Por ejemplo, (22) .

Operación lógica NOT (!) es unario e invierte el valor booleano.

Operaciones condicionales

JavaScript tiene una operación ?: , que asigna un valor a una variable en función de la condición. Considere el siguiente ejemplo:

Signo de var \u003d (a\u003e \u003d 0)? "Positivo negativo";

El resultado de la expresión antes del signo de interrogación afecta el valor de la variable: si el valor es verdadero, se evalúa la expresión antes de los dos puntos, si es falso, se determina la expresión después de los dos puntos. En nuestro caso, si la variable a es mayor o igual que 0 , variable signotoma el valor "Positivo", de lo contrario, el valor "Negativo".

También existen operaciones en JavaScript (por ejemplo, bit a bit), que son bastante raras y son necesarias a la hora de resolver problemas específicos, por lo que no las consideraremos.

Condiciones y ciclos

Existen mecanismos de ramificación para cambiar el orden de ejecución del código en JavaScript. (si y cambiar declaraciones)permitiéndole seleccionar una de las acciones alternativas dependiendo de la condición. Para la ejecución repetida del código, se utilizan operadores de bucle (mientras, para y hacer)... Los bucles también son útiles para manipular matrices.

Si declaración

Operador sicontrola la secuencia de ejecución del comando. La sintaxis de este operador es la siguiente:

If (expresión booleana) (operadores)

La expresión booleana se evalúa primero, luego, si es igual cierto, los operadores se ejecutan; si es igual falso, se omiten las declaraciones y el guión continúa.

Veamos un ejemplo. Digamos la función f (x) se define como sigue:

X + 10, para x< 0 f(x)= x2 + 4, при 0 ≤ x ≤ 5 5 / x, при x > 5

Puede usar el código del Listado 2.13 para determinar el valor de esta función en un punto específico.

Listado 2.13... Un ejemplo de la declaración if

Si ... declaración else

A menudo es conveniente utilizar la forma completa de la declaración condicional. Con este operador, puede especificar las acciones que se realizarán si la expresión booleana es falso:

If (expresión booleana) (declaraciones1) else (declaraciones2)

Además, puedes combinar demáscon otro operador si... En este caso, puede considerar varias alternativas y ejecutar las declaraciones apropiadas:

If (expresión booleana1) (declaraciones1) else if (expresión booleana2) (declaraciones2) más (declaraciones3)

Reescribimos el script anterior para definir una función usando la instrucción if..else (Listado 2.14).

Listado 2.14... Un ejemplo del operador if..else

Como puede ver en este código, las llaves son opcionales si solo se ejecuta una instrucción. Sin embargo, le recomendamos que los utilice siempre para que su código sea más fácil de leer.

Declaración de cambio

La declaración de cambio compara un valor con muchos otros valores. Puede lograr el mismo efecto con varias instrucciones if, pero una instrucción switch le permite crear un código conciso y descriptivo:

Switch (expresión) (valor de caso1: declaraciones valor de caso2: declaraciones .. predeterminado: declaraciones)

Supongamos que desea crear un script que traduzca los nombres de los animales del inglés (Listado 2.15).

Listado 2.15.

Este código le permite traducir uno de los tres nombres de animales (Fig. 2.13).

Figura: 2.13. El resultado de la declaración de cambio

Observe la declaración de interrupción, que finaliza la ejecución de la declaración de cambio. De lo contrario, el resto del código se ejecutará en la declaración de cambio independientemente del valor de la variable.

La instrucción for se usa para crear un bucle. Este operador tiene la siguiente sintaxis:

For (expresión de inicialización; expresión de condición; expresión de bucle) (declaraciones)

Por lo general, se usa una expresión de inicialización para establecer el valor inicial del contador de bucle. La expresión de condición deja de ejecutar el ciclo cuando se evalúa como falso. Una expresión de bucle generalmente incrementa o disminuye un contador de bucle. Cualquiera de estas expresiones se puede omitir, pero se debe usar el punto y coma correspondiente.

El listado 2.16 muestra el código para encontrar el factorial de n! \u003d 1 ∙ 2 ∙ 3 \u200b\u200b∙ …… ∙ n usando el bucle for.

Listado 2.16. Encontrar factorial con la declaración for

Este código va desde 1 hasta x, pero por simplicidad, el valor ingresado no está validado. Con base en esto, puede, por ejemplo, obtener el valor de Infinity (infinito) para un valor grande de x.

La instrucción while es similar a la instrucción for, pero no inicializa ni incrementa el contador en su declaración. La sintaxis de esta declaración es la siguiente:

While (expresión de condición) (declaraciones)

Si la expresión de la condición en el ciclo while es falsa, las declaraciones nunca se ejecutarán.
El listado 2.17 muestra el código para encontrar el factorial usando un bucle while.

Listado 2.17. Encontrar factorial con la declaración while

Do .. while loop

La instrucción do.. while es casi idéntica a la instrucción while. Sin embargo, en esta declaración, la condición se verifica al final, por lo que garantiza que las declaraciones se ejecuten al menos una vez, independientemente de si la condición es verdadera:

Do (declaraciones) while (expresión de condición)

El listado 2.18 muestra el código para encontrar el factorial usando el bucle do.. while.

Listado 2.18. Encontrar el factorial con la instrucción do.. while

Para .. en bucle

El bucle for..in le permite ejecutar declaraciones para casi todas las propiedades de un objeto. La sintaxis de esta declaración es la siguiente:

Para (propiedad en objeto) (operadores)

Por ejemplo, usando este operador, puede incrementar todos los elementos en una matriz (Listado 2.19).

Listado 2.19. Usando el operador for..in

Como resultado de la ejecución de este código, todos los elementos del arreglo a aumentarán en 1 (Fig. 2.14).

Figura: 2.14. Incrementar elementos de matriz

Romper y continuar declaraciones

A veces, durante la ejecución de un bucle, es necesario interrumpir el bucle completo o una de sus iteraciones. Las declaraciones de interrupción y continuación sirven para este propósito. La instrucción break detiene completamente la ejecución del bucle y transfiere el control a las instrucciones que siguen al bucle. La instrucción continue interrumpe la ejecución actual del ciclo y avanza al siguiente paso del ciclo. La diferencia en cómo funcionan estos operadores se muestra en el Listado 2.20.

Listado 2.20. Usar declaraciones de ruptura de bucle

Este código le permite determinar el cociente de los números ingresados \u200b\u200bpor el usuario y los elementos de la matriz a. En este caso, entre los elementos de esta matriz puede haber ceros, entonces se debe ingresar un guión "-" en el elemento de la matriz con el resultado b. En este caso, puede ver el resultado de procesar el código en la Fig. 2.15.

Figura: 2.15. Usar declaraciones de ruptura de bucle

El código anterior también demuestra la capacidad de anidar un bucle dentro de otro. Puede salir del ciclo while solo cuando se ingresa cero (el valor predeterminado). Si ingresa otros números, el ciclo no terminará. El ciclo for a veces se interrumpe durante la ejecución si el elemento de la matriz a es cero (para evitar la división por cero).

Un editor de código es una herramienta útil para todos los programadores. Y cada uno elige por sí mismo: alguien aprecia la funcionalidad, la movilidad de alguien, para alguien lo principal es el diseño y la comodidad. A algunas personas incluso les gusta escribir código en el Bloc de notas, pero es como intentar construir una casa con un martillo.

JavaScript es un lenguaje poderoso y de mal humor. Por un lado, hay muchos marcos y bibliotecas, por el otro, no la sintaxis más simple y los peligros asociados con la "dinámica". Por lo tanto, es importante elegir un editor para trabajar con él. La elección correcta le proporcionará un código limpio, alta velocidad de desarrollo, errores mínimos y disfrute de su trabajo. Tomará mucho tiempo elegir uno de los cientos de editores existentes, así que hicimos parte del trabajo por usted. Aquí están los 5 primeros.

WebStorm

WebStorm de JetBrains es excelente en sus dos manifestaciones: como IDE, admite el trabajo con sistemas de control de versiones, le permite implementar código de forma remota como un editor, comodidades estándar, como resaltado de sintaxis, autocompletado, navegación.

Beneficios:

• LiveEdit: visualización de los cambios realizados en el código sin tener que guardarlo;
• interacción con frameworks como React, Angular, Meteor;
• más de cien pruebas integradas para detectar errores;
• integración con Mocha, Transportador, Jest, Karma para pruebas unitarias;
• depurador completo para depurar código en el lado del servidor y del cliente;
• navegación para trabajar simultáneamente con varios archivos;
• finalización de código, resaltado de sintaxis.

Desventajas:

• cuesta $ 129 durante el primer año de funcionamiento;
• la funcionalidad es redundante para los programadores principiantes.

Código de Visual Studio

Una bifurcación del IDE de Visual Studio centrada en trabajar con código. Es fácil de aprender, fácil de usar y funcional al mismo tiempo.

Beneficios:

• autocompletado contextual, tanto de sintaxis como de variables utilizadas, módulos, funciones, etc.;
• depurador con puntos de interrupción, pila de llamadas, consola interactiva;
• soporte para fragmentos y plantillas;
• integración con Git;
• interfaz conveniente y simple;
• editor gratuito.

Desventajas:

• pocos complementos.

Texto sublime

Un editor multiplataforma conveniente y probado en el tiempo con una interfaz personalizable y la capacidad de realizar acciones triviales usando teclas de acceso rápido.

Beneficios:

• teclas de acceso rápido;
• navegación a través del código en forma de minimapa;
• la capacidad de cambiar el tema visual;
• soporte para fragmentos;
• resaltado, finalización de variables y sintaxis;
• múltiples ediciones mediante el uso de punteros;
• construir soporte de sistemas;
• comprobar la sintaxis durante la entrada;
• autoguardado.

Desventajas:

• la versión completa cuesta $ 70;
• falta de un analizador de código para colocar enlaces.

Editor de átomos

Introducido en 2015, un editor de código Git que copia el diseño de Sublime Text y envuelto en Chromium.

Beneficios:

• más de 50 módulos abiertos;
• interfaz conveniente y agradable;
• libre;
• completar y resaltar el código;
• administrador de paquetes, de los cuales ya hay más de 3.5 mil;
• configuraciones flexibles para el editor, paquetes de complementos, temas de interfaz;
• edición y navegación mediante teclas de acceso rápido.

Desventajas:

• baja productividad;
• paquete vacío fuera de la caja.

Soportes

En 2014, Brackets asustó a los programadores con errores y deficiencias, pero ahora está devolviendo gradualmente la confianza con una nueva funcionalidad de alta calidad.

Beneficios:

• equipo rico listo para usar;
• modo de vista previa en vivo: vista previa de las ediciones en el navegador en tiempo real;
• gerente de empaquetación;
• mostrando imágenes y colores usados \u200b\u200ben el código;
• autocompletado y resaltado de sintaxis;
• analizador de código;
• libre.

Desventajas:

• estricto enfoque web y HTML + CSS + JavaScript;
• desarrollo lento;
• rendimiento lento debido a las funciones de vista previa.

Hoy en día javascript toma una posición de liderazgo cuando se trata del lado del cliente de productos de software y es utilizado por programadores profesionales y desarrolladores web de todo el mundo. javascript Es un poderoso lenguaje de programación con muchas funcionalidades y marcos avanzados como jQuery, YUI, SproutCore y Cappuccino. Pero tiene ciertos inconvenientes, por ejemplo, javascript funciona de manera diferente en diferentes navegadores y puede limitar el acceso al sitio web y la experiencia del usuario. Pero estos factores no deberían limitar las capacidades de este maravilloso lenguaje.

Para muchos programadores, trabajar con javascript Puede parecer un poco abrumador, pero tenemos una variedad de herramientas de desarrollo de JavaScript que no solo son fáciles de usar, sino que muestran excelentes resultados en minutos. Al tener conocimientos de javascript, puede realizar cualquier tarea: escribir documentación, editar, probar, depurar, etc.

Herramientas de documentación

jGrouseDoc es una herramienta que te permite generar documentación API a partir de comentarios en el código fuente (programa) y así documentar todos los conceptos, funciones, variables, clases, interfaces, espacios de nombres, etc. necesarios, dando como resultado un gran producto personalizado.

JSDoc Toolkit es una aplicación escrita con javascript para generar automáticamente formatos de plantilla y documentación HTML multilingüe a partir del código fuente de JavaScript comentado.

Herramientas de compresión

JSCompress es un compresor de JavaScript en línea que comprime archivos de JavaScript utilizando algoritmos de compresión como JSMin y Packer, y los archivos de JavaScript comprimidos son ideales para entornos de producción, ya que su tamaño se reduce entre un 30% y un 90%.

YUI Compressor es un minificador de JavaScript diseñado para obtener una relación de compresión más alta que la que pueden proporcionar otras herramientas. Desde la versión 2.0, YUI Compressor comprime archivos CSS usando un puerto basado en la expresión regular de Isaac Schluter.

javascript Compressor comprime y optimiza sus archivos javascript. Debido a esto, se cargan más rápido y, por lo tanto, reducen el uso de ancho de banda. Esto mantiene intactos los nombres de las funciones y las variables globales.

Scriptalizer es una herramienta en línea para minimizar sus scripts de Java y CSS, que le permite ahorrar espacio en el disco duro al reducir el tamaño de su código. También elimina espacios adicionales, tabulaciones y líneas en blanco, nuevas líneas y comentarios, y bloquea delimitadores.

Herramientas de formato

JSbeautifier es una herramienta en línea que reformatea y aplica sangrías a marcadores (de las palabras marcador y subprograma), fragmentos de código javascript descuidados y descomprime scripts, y desentraña fragmentos de scripts complejos. Simplemente pegue su código y haga clic en el botón Decorar.

Editores de IDE y kit de herramientas

Aptana Studio es un marco de desarrollo web de una empresa líder en su campo que combina potentes productos de software para trabajar con HTML, CSS y javascript. Aptana RadRails es un entorno de desarrollo completo para crear aplicaciones profesionales con extensiones de código enriquecidas en Ruby & Rails, javascript, CSS y HTML.

Spket IDE es un poderoso conjunto de herramientas para desarrollar en javascript y XML, así como para javascript, XUL / XBL y Yahoo Widget. Proporciona funciones como expansión de código, resaltado de sintaxis y plan de contenido.

Komodo Edit es un editor multilingüe de código abierto y gratuito para escribir código de calidad más fácilmente. Es compatible con PHP, Python, Ruby, Perl y Tcl, así como con javascript, CSS, HTML y lenguajes de plantilla como RHTML, Template-Toolkit, HTML-Smarty y Django.

Herramientas de depuración

Firebug es la herramienta de desarrollo web más poderosa utilizada para validar HTML y modificar el estilo y el diseño en tiempo real, analizar con precisión el uso y el rendimiento de la red. El solucionador de JavaScript se puede utilizar con cualquier navegador.

Blackbird es un proyecto de código abierto que ofrece una manera fácil de registrar mensajes en javascript y una atractiva consola para verlos y filtrarlos, minimizando o eliminando el uso de la función alert ().

Faux Console es un javascript que se puede insertar en un documento para obtener una consola de depuración básica en IE, y puede usar archivos YUI o el archivo console.log () para registrar información entre navegadores.

JS Bin es una aplicación web que ayuda a que javascript y fragmentos de código CSS se prueben en un contexto específico y modifiquen el código juntos. Le permite editar y probar JavaScript y HTML.

JSON es un formato de datos que está ganando popularidad en estos días y se usa ampliamente en muchos sitios Web 2.0 con AJAX. Muchos sitios que ofrecen API devuelven datos JSON. A menudo, los espacios en los datos JSON proporcionados se comprimen para reducir la cantidad de datos transferidos. Este sitio le proporciona una manera rápida y fácil de formatear su JSON para que pueda leerlo.

Eclipse Marketplace Client (MPC) es una interfaz de cliente enriquecida para explorar e instalar soluciones basadas en Eclipse. MPC proporciona una sólida integración de instalación entre el espacio de trabajo de Eclipse y Eclipse Marketplace, además de impresiones de soluciones de terceros.

Venkman es un depurador javascript para Mozilla basado en navegadores como Firefox 3.x, Netscape 7.x, Seamonkey 1.xy Mozilla Seamonkey 2.x. El Service Engineer también está disponible como paquete de expansión XPI.

JS.Class es un conjunto de herramientas para crear programas javascript orientados a objetos basados \u200b\u200ben Ruby. También ofrece un potente administrador de lotes que tiene como objetivo ayudarlo a descargar sus aplicaciones y admitir los principales navegadores web, incluidos Rhino, Node.Js y Narhwal.

Herramientas de prueba

Sugartest facilita la escritura de pruebas para javascript, se ejecuta sobre JsUnitTest como un DSL que tiene instalación, desinstalación, contenido anidado, sin dependencias, y funciona con una sintaxis simple pero expresiva.

jSLint toma la fuente javascript y escanea o marca problemas. Si encuentra un problema, muestra un mensaje que lo describe y también indica la ubicación donde no debería estar el problema sintáctico, y también verifica la selección de estilo y los programas estructurados.

Creado por John Resig y Jan Odvarko, FireUnit proporciona una API javascript simple para ejecutar una prueba simple de registro y verla en una nueva pestaña de Firebug.

JsUnit es un módulo que prueba el marco del lado del cliente de JavaScript, que actúa como un puerto de JUnit, y también incluye un marco para automatizar las pruebas en navegadores y computadoras que ejecutan diferentes sistemas operativos.

YUI Test es un marco de prueba para soluciones javascript basadas en navegador donde puede agregar fácilmente pruebas unitarias a soluciones javascript. YUI Test también proporciona detección avanzada de errores para aquellos métodos que mueven errores, pruebas asincrónicas para validar eventos, comunicación basada en Ajax y más.

JSpec es un marco de prueba muy pequeño pero muy poderoso que usa su propia gramática y preprocesador, e incluye muchas abreviaturas, sintaxis legible, compatibilidad con Async y Rhino, descripción anidada, comportamiento genérico, compatibilidad con accesorios, burla de Ajax y más.

JSLitmus es una herramienta liviana para crear problemas de prueba de JavaScript altamente especializados que funciona con todos los navegadores más populares. Es de código abierto, con licencia de estilo MIT, bucles de prueba receptivos, y también se puede alojar en páginas web o aplicaciones existentes.

El destacado Javascript Checker se utiliza para realizar un seguimiento de ;; elementos en una página web, y cuando encuentra un elemento HTML con eventos en línea, resalta esa área con un borde rojo y javascript: enlaces con un borde carmesí.

Otras herramientas útiles

PrettyPink es un dumper de variables javascript integrado en el navegador que le brinda la capacidad de imprimir cualquier tipo de objeto para verlo durante las sesiones de configuración en un formato de tabla. No requiere hojas de estilo o imágenes, puede manejar un número infinito de objetos anidados, protege contra referencias circulares / duplicadas y es totalmente compatible con JSLint.

Firediff es una extensión de Firebug para rastrear los cambios de DOM y CSS, es decir, monitorea los cambios, lo que brinda la oportunidad de comprender la funcionalidad de la aplicación, y también registra los cambios realizados y modifica la visualización de la página.

JS charts es un generador de gráficos javascript que le permite crear gráficos utilizando una variedad de plantillas, como gráficos de barras y gráficos de líneas simples.

PageSpeed \u200b\u200bes un complemento de Firefox / Firebug de código abierto que se utiliza para evaluar el rendimiento de las páginas web y proporcionar recomendaciones para mejorarlas. También acelera su sitio web, reduce el uso de ancho de banda y los costos de alojamiento.

Rockstar Web Profiler o Razor incluye tres componentes, a saber, RockStar Profiler Server para analizar las conexiones de red y el rendimiento del servidor, RockStar Profiler Probe para analizar el rendimiento del lado del cliente y RockStar Profiler Console, que proporciona información para analizar los datos de rendimiento recopilados.

El marco javascript móvil (para Safari) está reducido a menos de 8 KB, se refiere al laboratorio Sizzle en el iPhone, admite transiciones y animaciones CSS, está orientado a objetos y es fácilmente extensible.

php.js es un proyecto de código abierto para portar funciones PHP de alto nivel a plataformas javascript de bajo nivel, como navegadores web, extensiones de navegador, motores AIR y SSJS como V8, Rhino y SpiderMonkey.

JSSpec es una estructura javascript "BehaviorDrivenDevelopment" que muestra la diferencia entre los valores esperados y reales, muestra claramente la línea de daño, admite el soporte de ejecución condicional para IE 6 o IE 7, FireFox 2 y Safari 3.

MochaUI es una biblioteca de interfaz de usuario de aplicaciones web construida con javascript de Mootools que se utiliza en aplicaciones web, elementos web de escritorio, sitios web, widgets y cuadros de diálogo independientes.

Highlight.js destaca la sintaxis en código de muestra en blogs, foros y, en general, en cualquier página web. Encuentra automáticamente bloques de código, detecta el idioma y lo resalta.

Bibliotecas de utilidades y componentes para javascript

Uploadify es un complemento de jQuery que facilita la integración de múltiples cargas en su sitio y que requiere Flash o cualquier otro lenguaje de desarrollo interno. La implementación básica es bastante sencilla y ofrece una gran capacidad de modificación para usuarios avanzados.

Burst es un ejemplo de animación característica que utiliza tecnologías javascript y HTML5 y sin ningún uso de tecnología Flash. El archivo SVG se crea con Inkscape. Burst es sintácticamente similar a jQuery.

JSTestDriver crea una máquina de prueba de JavaScript que se puede integrar fácilmente en sistemas de compilación continua; le permite ejecutar pruebas rápidamente en diferentes navegadores para facilitar el desarrollo del estilo TDD y proporciona una ejecución rápida de pruebas, control de línea de comandos completamente controlado por DOM y más.

Booklaylet es un código contenedor de bookmarklet programado para cargar cualquier contenido de otra página dentro de una ventana abierta usando capas div e iframe. Funciona con los navegadores Firefox, Safari y Opera, pero no funciona con Internet Explorer.

javascriptools es una colección de componentes, funciones y clases de JavaScript en las que las funciones realizan operaciones básicas en objetos, cadenas, matrices de datos, campos de formulario, etc. La suite tiene una tabla dinámica que admite paginación, clasificación y edición de archivos y es totalmente personalizable con CSS.

liteAJAX es una prueba de concepto para clases AJAX ligeras.

JSPDF es una biblioteca para generar documentación PDF usando javascript y código abierto. Se puede utilizar en extensiones de Firefox, javascript del lado del servidor con datos de URL en algunos navegadores.

Narwhal es un entorno de desarrollo de JavaScript multiplataforma y de interpretación múltiple que crea marcos y aplicaciones de JavaScript como Nitro. Incluye administrador de paquetes, sistema de módulos y biblioteca estándar para múltiples intérpretes de JavaScript.

Bibliotecas JavaScript útiles y otras herramientas

Mantel es una forma fácil y discreta de agregar estilo y comportamiento a sus tablas de elementos html. Tiene la función de asignar nombres de clases pares / impares a cadenas alternativas, agrega nombres de clases para la posición del mouse sobre y fuera de un área específica.

Moousture es una biblioteca de movimientos de mouse solo en javascript con la capacidad y flexibilidad de colapsar para usted. La biblioteca está escrita en Mootools, que sigue los estándares orientados a objetos. Su objetivo es comenzar a trabajar en la estructura futura de los movimientos del mouse en cualquier navegador, incluidos los dispositivos móviles modernos.

jQuery Tools es una colección de los componentes de interfaz de usuario más importantes para sitios web modernos, donde todas las herramientas se pueden usar juntas para extender, configurar y eliminar. Es utilizado por los principales sitios web de todo el mundo.

Tipimage se utiliza para crear y manipular información sobre herramientas sobre imágenes, crear porciones cuadradas de imágenes y adjuntar una descripción a cada una, que se muestra como una nube de sugerencias. También admite el uso de una función de devolución de llamada personalizada.

qGallery es un pequeño programa de línea de comandos que procesa imágenes jpeg y específicamente cambia el nombre de archivos en algunas estructuras de carpetas para formar una galería HTML estática para publicaciones, genera automáticamente índices de imágenes para vistas previas, anotaciones para cada imagen, y se pueden agregar imágenes adicionales y HTML más adelante.

LivePipe UI es un conjunto de widgets y controles de alta calidad para aplicaciones WEB 2.0 que utilizan Prototype javascript Framework, donde cada control está bien probado, completamente abierto, documentado y reemplazado de manera flexible con una versión simplificada en navegadores sin JavaScript habilitado.

el teclado virtual javascript es un sistema reutilizable para agregar una interfaz de teclado gráfico para probar campos, campos de contraseña y campos de texto. También proporciona un fácil acceso a caracteres especiales.

El script de acciones de tabla discretas puede dibujar una tabla en franjas, admite mover el cursor sobre la barra de menú horizontal y vertical y efectos para mover el cursor sobre celdas individuales, puede trabajar con rowSpans y ColSpans, y también funciona rápidamente en Internet Explorer.

Glassbox es una interfaz de usuario javascript liviana que usa Prototype y Script.aculo.us para lograr algunos efectos. GlassBox le permite crear fácilmente marcos, esquemas de color y efectos brillantes "bajo" Flash.

Glimmer es una herramienta de diseño interactivo o aplicación de Windows que puede crear fácilmente animaciones e interacciones y otros efectos. También genera jQuery, XHTML y CSS.

Los marcadores se utilizan para realizar funciones útiles, el marcador le permite crear una URL desde javascript y agregarla a Favoritos. Ingrese su código javascript y Bookmarklets hará el resto.

el Javascript Regex Generator genera las expresiones correctas relativamente básicas, en las que solo tiene que ingresar datos para probar y marcar las partes que el Regex debe comparar. La versión beta de la herramienta le permite agregar siete grupos.

La tabla maestra de compatibilidad contiene enlaces a tablas individuales. También tiene pistas de compatibilidad de tablas que determinan si es totalmente compatible, si es difícil o si no es compatible en absoluto.

No es ningún secreto que en nuestro tiempo JavaScript se ha convertido en uno de los lenguajes de programación más populares. En los lejanos años 90, en la época del nacimiento del lenguaje, cuando se creó con el único propósito de sumar interactividad a las páginas web y mejorar la experiencia del usuario, quién hubiera pensado que alcanzaría cotas tan inéditas. Después de todo, ahora puedes hacer casi cualquier cosa al respecto. ¿Quieres escribir un sitio web: tanto backend como frontend en JavaScript? ¡de nada! ¿Quiere escribir una aplicación móvil en JavaScript? no hay problemas. Programe un microcontrolador, y ahí es donde JavaScript viene a su rescate.

Por supuesto, hay pequeñas desventajas en el enfoque de usar JavaScript en todas partes, pero si lo piensa, cuánto tiempo y esfuerzo se puede ahorrar aprendiendo un solo idioma, especialmente si la misma aplicación va a funcionar en diferentes plataformas. ¿Estás hablando de diferentes plataformas? Hmm ... Exactamente, diferentes plataformas, ahora JS puede permitirse aplicaciones de escritorio para Windows, Linux, Mac, ¿cómo lo preguntas? La respuesta es simple: conoce - NW.js.

Node.js Es una plataforma de software basada en el motor V8, que traduce nuestro script a código de máquina. Esta plataforma se creó en 2009 principalmente para trabajar con los sitios backend.

WebKit es un motor gratuito desarrollado por Apple. Anunciado por primera vez como parte de Safari en 2003
Entonces, el código escrito en JS para esta tecnología tendrá acceso tanto a los módulos Node.js como a la API del navegador estándar (respectivamente WebKit)

Comienzo rápido

Todo esto está bien, pero ¿por dónde empezar? Puede buscar y descargar el repositorio de código fuente en github. Aquí también puede encontrar enlaces de descarga directa para la plataforma en la que se llevará a cabo el desarrollo. Entre otras cosas, necesitamos node.js instalado.

Después de que se descargó e instaló el software necesario, escribió su aplicación en su JS favorito (lea cómo hacer esto a continuación) y localizó todo en una carpeta. La mitad de la batalla ha terminado, ahora queda la tarea más difícil y a largo plazo: empaquetar todo en un archivo y prepararlo para su distribución. Para simplificar, puede utilizar bibliotecas listas para usar, por ejemplo, nw-builder. Instalar la biblioteca no es difícil si ya ha trabajado con node.js. Como sabes, node.js incluye administrador de paquetes npmpara trabajar desde la línea de comandos. Para instalar cualquier biblioteca, debe ejecutar el comando:

\u003e npm install [libname] [opciones]
Tenga en cuenta que la biblioteca se puede instalar tanto local como globalmente, para la instalación local utilice la opción --save-dev, para el global -gramo... Por lo tanto, instalaremos nuestro recopilador para NW.js globalmente ejecutando el comando:

\u003e npm install nw-builder -g
Para construir nuestra aplicación, necesita ejecutar el comando (puede encontrar muchas opciones en la documentación):

\u003e nwbuild -p [nombre_plataforma] -o [ruta_a_carpeta_para_versión_compilación] [ruta_a_aplicación]
El nombre de la plataforma puede tener los siguientes valores: win32, win64, osx32, osx64, linux32, linux64.

Durante el desarrollo, no es necesario compilar la aplicación cada vez, simplemente puede ejecutarla como está y se abrirá en una ventana separada. Para hacer esto, debe ejecutar la aplicación nw.exe desde la línea de comando y pasar la ruta a la carpeta con su aplicación como parámetros. Además, si trabaja en Windows, puede simplemente arrastrar y soltar la carpeta con el código fuente de la aplicación a JS (tenga en cuenta que esta es la carpeta completa) en nw.exe.

¡Hola Mundo!

Ahora que sabe cómo ejecutar la aplicación, cómo juntarla en un archivo, escribamos algo. Tradicionalmente, la familiaridad con la nueva plataforma comienza con la escritura de una aplicación Hello, world.

Para esta aplicación, ni siquiera necesitamos JavaScript, solamente HTML... Crea una carpeta llamada Hola Mundo... Pon el archivo dentro index.html con el siguiente marcado:

Además, para cada aplicación en NW.js, se requiere un archivo, que debe llamarse package.json... Se tomará información para construir la aplicación. Creemos la versión más simple del archivo y colóquelo en la carpeta Hola Mundo... Asi que:

("nombre": "hola-mundo", "versión": "1.0.0", "descripción": "Primera aplicación", "principal": "index.html", "autor": "Desarrollador", "ventana ": (" barra de herramientas ": falso," ancho ": 500," alto ": 200))
El contenido del archivo se explica por sí mismo (tenga en cuenta que campos obligatorios solo principal y nombre). EN principal debe escribir un archivo con marcado, que será el punto de entrada a la aplicación. Sección ventana configura los parámetros de la ventana (en este caso, deshabilitamos la barra de herramientas y establecemos el tamaño de la ventana en 500x200).

Además, puede personalizar campos como (para obtener una lista completa de opciones, consulte la documentación):

• icono - especificar la ruta al icono (anular la estándar)
• posición - puede especificar la posición de la ventana al cargar ( nulo, centrar o ratón)
• min_width, min_height, anchura máxima, altura máxima - limitación del tamaño de la ventana
• redimensionable - un valor booleano que indica si el usuario puede cambiar el tamaño de la ventana
• pantalla completa - Habilitar el modo de pantalla completa
• quiosco - habilitar el modo quiosco
• transparente - haz la ventana transparente

Se crea la aplicación y puede ejecutarla. Después de comenzar (cómo hacer esto, consulte la sección anterior), debería recibir la siguiente ventana:

La aplicación está escrita, pero solo tiene un elemento div y no hay lógica en absoluto, pero ¿y si tenemos un marcado rico y una lógica compleja? El elemento del archivo de configuración viene al rescate. barra de herramientasque establecemos en falso. Para que las herramientas de depuración estén disponibles, debe establecer la barra de herramientas en verdadero... Habiendo hecho esto al iniciar la aplicación, obtendremos la siguiente ventana:

Después de hacer clic en el botón de la esquina superior derecha, se abrirá otra ventana en la que se mostrarán las conocidas herramientas de desarrollo:

Trabajar con controles nativos

NW.js le permite trabajar con controles nativos. Consideremos el trabajo con el ejemplo. menú... Para trabajar con controles de IU nativos en nw.js, debe usar el módulo nw.guique se puede conectar de la siguiente manera:

Var gui \u003d require ("nw.gui");
Plantilla general para usar controles:

Var element \u003d new gui.ElementName (opción);
Por lo tanto, para crear elementos de menú, puede utilizar la siguiente construcción:

Var menu \u003d new gui.Menu ();
Además, cualquier propiedad del objeto creado por nosotros se puede cambiar fácilmente utilizando construcciones JS estándar, por ejemplo:

Menu.title \u003d "(! LANG: Título nuevo"; !}
Se crea el menú, ahora debe completarlo, hay métodos para manipular elementos secundarios:

Menu.append (nuevo gui.MenuItem ((label: "Etiqueta del elemento del menú"))); menu.removeAt (0);
Además, para agregar elementos al menú de manera más flexible, puede utilizar el método insertar, en cuyos parámetros debe pasar Opción del menú y el número de posición donde insertarlo ( posición antes del primer elemento es 0).

Para acceder a los elementos creados, puede utilizar la propiedad artículos:

Menu.items.title \u003d "(! LANG: Nuevo título" !}
Tenga en cuenta que no puede crear elementos directamente:

Menu.items \u003d nuevo gui.MenuItem (); // EQUIVOCADO
Lo más importante al trabajar con controles nativos es recordar que cualquier error al trabajar con ellos puede provocar el bloqueo de toda la aplicación., por lo tanto, debe tener mucho cuidado y, si es posible, al eliminar elementos, también asigne el valor nulo a la variable. Por lo tanto para quitar el control, puede hacer lo siguiente:

Control.remove (); control \u003d nulo;
Para un trabajo más conveniente con los controles, se heredan de EventEmitter, por lo que la buena noticia es que podemos trabajar fácilmente con eventos, por ejemplo:

Menuitem.on ("clic", function () (// hacer algo útil));
Se ha creado el menú, pero si ejecuta la aplicación, no verá ningún menú. Para mostrar el menú, hay un método emergente, en cuyos parámetros es necesario pasar coordenadas para mostrar el menú.

Para demostrar las características principales del menú, agregue el siguiente script al proyecto creado previamente Hola Mundo:

Var gui \u003d require ("nw.gui"); var menu1 \u003d nuevo gui.Menu (); menu1.append (nuevo gui.MenuItem ((etiqueta: "Elemento 1"))); var subMenu1 \u003d nuevo gui.Menu (); subMenu1.append (nuevo gui.MenuItem ((etiqueta: "Elemento 2"))); menu1.append (nuevo gui.MenuItem ((label: "Submenu", submenu: subMenu1))); document.body.addEventListener ("contextmenu", function (ev) (ev.preventDefault (); menu1.popup (ev.x, ev.y); return false;));
Después de iniciar la aplicación, podemos ver el menú contextual creado para el cuerpo. De esta forma podemos definir un menú contextual para cualquier elemento.

Agregar etiquetas