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

Java Script It! - 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 flojas para escribir scripts y, en general, cualquier cosa en JavaScript. Por supuesto, cuando lo creó, se centró en los principiantes, aunque para trabajar con él todavía se necesita un conocimiento mínimo de HTML.

¿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 aparecen cuando pasas el mouse sobre el mouse.
• Pequeñas imágenes animadas que siguen el cursor o, por ejemplo, se mueven a una determinada parte de la página al hacer clic en cualquier elemento.
• Bloques de información (por ejemplo, con breve descripción bienes) con desplazamiento automático de tiempo y mucho más.

Aquellos. JavaScript le permite crear elementos web que interactúan de cualquier manera con el usuario, reaccionando a los movimientos del mouse, pulsaciones de teclas, desplazamiento de páginas en un navegador, etc. En la misma lista se deben agregar elementos web totalmente automatizados que realicen cualquier acción sin intervención del usuario.

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

Se abren aún más oportunidades para el programador por el hecho de que JavaScript es un lenguaje de programación orientado a objetos, pero este problema no se considerará aquí.

Aprendiendo JavaScript a través de Java Script It!

Una de las principales razones de una popularidad tan alta de JavaScript entre los programadores web principiantes es la posesión de este lenguaje de programación, el llamado "umbral de entrada baja". Aquellos. Para aprenderlo, el conocimiento básico de HTML y el lenguaje de marcado CSS son suficientes.

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

1. Applets: elementos que realizan alguna función independiente: banner, texto animado, imagen en movimiento, etc.
2. Scripts: básicamente, los elementos web controlados por el usuario se presentan aquí: 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 subir archivos al sitio).
3. Y DHTML es una variedad de elementos interactivos que consisten en marcado HTML, tablas CSS en cascada y scripts JavaScript (por ejemplo, menús desplegables o ventanas / formularios emergentes).

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

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

• El usuario crea un archivo .htm o html en el disco. También puede usar un archivo HTML listo para usar con algún código.
• Luego, seleccione uno de los elementos web disponibles, luego complete 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 para el usuario (esto se hace en forma de configuración de elementos web).
• Hecho.

En Java Script It! Complemento de navegador de Windows estándar incorporado Explorador de Internetes decir el resultado del trabajo se muestra inmediatamente después de finalizar 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 el código fuente de una página HTML en un navegador, puede ver y estudiar el código JavaScript en sí. Aquí puedes editarlo cambiando diferentes significados a mano. Por lo tanto, el usuario podrá obtener las habilidades básicas de programación de JavaScript, a saber, cómo se inserta el código en el documento HTML, qué comandos se utilizan para configurar ciertas propiedades del elemento web, etc.

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

Este capítulo trata sobre el lenguaje de script JavaScript. Aprenderá qué es JavaScript y por qué es necesario.

Considere las características de crear dinámicas en la página, procesar formularios y trabajar con capas y estilos.
Javascriptes un lenguaje de programación de secuencias de comandos orientado a objetos con una sintaxis ligeramente similar a la sintaxis C, Perly Pitón. Aunque el idioma tiene un nombre similar al idioma programación Java, no tienen nada en común excepto parte del nombre.

Actualmente Javascriptse utiliza principalmente para crear scripts incrustados en páginas web que permiten el control total de las páginas web y de los navegadores web en los que están abiertas estas páginas web. Así lenguaje Javascripten la mayoría de los casos se usa para crear páginas web interactivas y aplicaciones web.

Internet se basa en la tecnología " servidor de cliente».
Los servidores son computadoras o programas que brindan servicios 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.

Escenarios Javascript- estos son pequeños programas que se ejecutan en la computadora del usuario cuando se descargan del servidor junto con páginas web.

Alcance de JavaScript

Desde el comienzo de su desarrollo, el lenguaje JavaScript se ha utilizado para escribir varios scripts del lado del cliente. Se utilizaron ampliamente para resolver problemas como, por ejemplo, verificar la información ingresada por el usuario en el formulario antes de enviarla al servidor o programar respuestas a las acciones del usuario que hacen que las páginas web sean interactivas. Hoy, usando el lenguaje JavaScript, ya se están creando aplicaciones web completas, algunas de las cuales no son muy inferiores a sus "hermanos" 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 & Spreadsheet es un editor de texto y hojas de cálculo que le permite trabajar con documentos de Office directamente en una ventana del navegador web. Para crear contenido dinámico en páginas web, el lenguaje utilizado para crear páginas dinámicas es HTML Dynamic HTML, que nuevamente es una parte clave de JavaScript.

JavaScript se usa no solo en Internet, sino también en programas como, por ejemplo, Adobe Dreamweaver, Adobe Acrobat Lector y Adobe Photoshop para expandir sus capacidades, de manera 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 organizar un entorno de trabajo hasta conectar el código a un documento HTML.

Casi cualquier editor de texto es adecuado para trabajar en scripts, lo que le permite crear archivos de texto regulares y guardarlos con la extensión htm o html. Por ejemplo, en el quirófano sistema de Windows Entre los estándares 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). Dichos editores le permiten crear páginas web utilizando herramientas visuales, y luego cambiar al modo de visualización de código y realizar cambios personalizados, como agregar scripts. A diferencia de lo ordinario editores de texto, en dichos editores, se resalta la sintaxis de los lenguajes HTML y JavaScript, lo cual es muy conveniente.

Además, en Internet puede encontrar una gran cantidad de otros editores de texto que le permiten crear páginas web y resaltar la sintaxis de los idiomas HTML y JavaScript. Estos editores también tienen muchas otras características útiles que simplifican enormemente el proceso de creación de páginas web y desarrollo de scripts. Muchos de estos editores se distribuyen de forma gratuita o shareware, y es posible que le gusten algunos de ellos.

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

Los desarrolladores web tienen que tener en cuenta principalmente las características del navegador web. Internet de Microsoft Explorador Por lo tanto, sus páginas web deben probarse en este navegador web, que está disponible en cada sistema operativo Ventanas
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.

Considere depurar por separado un programa (script). Cuando el script es grande, no es tan fácil resolverlo y depurarlo, es decir, el proceso de encontrar y eliminar errores puede tomar la mayor parte del tiempo de desarrollo de todo el programa (o script). Para simplificar y acelerar la depuración creada programas especialesllamado depuradores. Un depurador típico tiene características tales como la ejecución paso a paso de un programa con una parada en cada línea de código o en puntos de interrupción previamente marcados para esto, así como el seguimiento y el cambio de los valores de cada variable directamente durante la ejecución del programa.

Hay muchos programas para depurar scripts de JavaScript. Por ejemplo, el 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 instalador de forma gratuita y se puede descargar desde el sitio. Además, este depurador se distribuye con editor de Microsoft FrontPage como parte de programas de Microsoft Script Editor, que prácticamente no es diferente del 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 desde el sitio, y si va a esta página en el navegador web Mozilla Firefox, el depurador se instalará de inmediato.

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

Incorporación de guiones

Considere incrustar scripts en páginas web.
Las secuencias de comandos se incrustan en un documento HTML de tres formas estándar:

texto como script en cualquier idioma. El lenguaje de script se especifica utilizando el atributo type. Por ejemplo, para indicar el lenguaje JavaScript, se utiliza el siguiente código:

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

Puede usar comentarios en el código del script, 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 parte problemática del código. Para este propósito, los conjuntos de caracteres / * y * / se utilizan, como, por ejemplo, en el siguiente código:

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

...

4. Guarde el archivo, por ejemplo, con el nombre 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 debería, verifíquelo en todos los navegadores web instalados en su computadora.
5. Inicie un navegador web y abra la página web creada en él.

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

Al desarrollar scripts, generalmente se abren simultáneamente el editor de texto en el que se crea la página web y varios navegadores web en los que se verifica el estado de la página web creada. Después de realizar cambios en el script, simplemente cambie a un navegador web y haga clic en el botón Actualizar.

Higo. 2.3. Tu primer script de navegador web

JavaScript Sintaxis y Essentials

Ahora explicaremos los elementos básicos del lenguaje JavaScript: variables, tipos de datos, expresiones, diversos operadores, funciones, etc. Este conocimiento es básico, ya que sin ellos es imposible entender el resto del material.

Trabajar con información

Cualquier programa o script funciona con información, es decir, reciben algunos datos, los procesan de acuerdo con su propio algoritmo y luego, como regla, devuelven un determinado 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, llevando a cabo el procesamiento preliminar y la verificación de datos.

Los escenarios de clientes pueden recibir información de las siguientes maneras:

/ datos incrustados en el script por el desarrollador (valores iniciales);
/ datos recibidos del usuario utilizando los formularios;
/ datos transmitidos a través de URL;
/ información obtenida al procesar eventos, por ejemplo, cuando mueve el puntero del mouse, hace clic o presiona una tecla;
/ datos recibidos de otros sitios o transmitidos por el programa del 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 mensaje.

Método de alerta ()

El método alert () muestra un cuadro de diálogo de advertencia con el mensaje correspondiente. 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 entre comillas se ingresa entre paréntesis (Listado 2.3).

Listado 2.3. Trabajar con advertencia

La ventana de advertencia es generada por el navegador, por lo que la apariencia de la ventana en diferentes navegadores puede variar. En la Fig. 2.4 muestra una ventana generada usando el código presentado en Internet Explorer.

Higo. 2.4. Trabajar con advertencia

Método Prompt ()

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

Listado 2.4. Trabajar con la solicitud

Cuando lo llama, aparece 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 debe 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, aparece una solicitud (Fig. 2.5), seguida de una advertencia.

Higo. 2.5. Trabajar con la solicitud

En este ejemplo, una variable se usa para demostrar el funcionamiento del método prompt (), y una expresión se usa como argumento en el método alert (). Analizaremos estos conceptos a continuación.

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

Método Confirm ()

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 la diferencia entre los botones Aceptar y Cancelar no se enfatiza en este escenario.

Listado 2.5.Trabajo de confirmación

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

Higo. 2.6. Trabajo de confirmación

El script puede responder de manera diferente a los clics en los botones Aceptar y Cancelar.

Variables y tipos de datos

Durante la interpretación del guión, el navegador divide el código en caracteres, palabras o frases separadas que puede reconocer. Estos elementos se llaman tokens. En JavaScript, los tokens se dividen en cuatro tipos: identificadores, palabras clave, literales y operaciones.

Identificadores

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

/ todos los identificadores deben comenzar con una letra;
/ después de la primera letra, los caracteres restantes pueden ser letras y números;
Las letras / son todas letras mayúsculas y minúsculas del alfabeto latino: de A a Z y de a a z;
/ el guión bajo (_) actúa como una letra y a menudo se usa en lugar de un espacio que no se puede usar en identificadores;
/ el símbolo del dólar ($) actúa como una letra y generalmente se usa al generar código automáticamente.

PROPINA
No use identificadores en un escenario que difiera solo en mayúsculas y minúsculas, como flagId y FlagID. Estos son varios identificadores que pueden causar errores sutiles.

En la mesa. 2.1 Se proporcionan ejemplos de identificadores válidos e inválidos.

Válido	Inválido
contar	2my
X	nuevo
X	my№
esta bien	esta bien

Tabla 2.1. Ejemplos de ID de JavaScript

Tenga en cuenta que el nuevo identificador, aunque contiene caracteres permitidos, es una de las palabras clave, por lo tanto, no puede actuar como un identificador de 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 realizan ciertas funciones. Las palabras clave no se pueden usar para identificadores de usuario. En la mesa. 2.2 es una lista de palabras clave de JavaScript.

rotura	más	nuevo	tipo de
caso	finalmente	nulo	var
captura	para	regreso	vacío
Seguir	función	cambiar	mientras
defecto	Si	esta	con
Eliminar	en	lanzar
hacer	en vez de	tratar

Tabla 2.2. Palabras clave de JavaScript

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

Tabla 2.3. Palabras reservadas de JavaScript

Literales

Literalesson números o cadenas que se usan para representar valores en JavaScript. La información puede ser muy diversa, por lo que los significados son de varios tipos. Los tipos de datos más simples en JavaScript se llaman tipos de datos básicos: números, cadenas y valores lógicos.

Los números de JavaScript son de dos tipos: enteros y números de punto flotante. Los valores enteros pueden ser positivos, por ejemplo 1, 2, 3, negativos, por ejemplo –1, –2, –3 e iguales a cero. Además, los valores enteros se pueden expresar en notación decimal, octal o hexadecimal.

Los números en formato decimal pueden incluir cualquier secuencia de dígitos del 0 al 9 que no comience desde cero.

Los números en formato octal pueden incluir cualquier secuencia de dígitos del 0 al 7, que necesariamente comienza desde cero.

Los números en formato hexadecimal pueden incluir cualquier secuencia de dígitos del 0 al 9 y letras de la a a la f, que deben comenzar con 0x.

Considere ejemplos de representación de enteros en varios formatos (tabla 2.4).

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

Tabla 2.4. Ejemplos enteros

Los números de coma flotante definen números decimales con una parte fraccionaria. Estos números se pueden expresar en la forma habitual o en notación exponencial. En este último caso, el símbolo se usa para representar el orden mi o mi. La mantisa decimal y el orden pueden ser positivos o negativos. Los siguientes son ejemplos de números de coma flotante.

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

JavaScript admite tipos de datos lógicos que solo pueden tomar dos valores: verdadero (verdadero) y falso (falso). Las cantidades lógicas (booleanas) son necesarias para lidiar con las condiciones que encontrará más adelante en este capítulo.

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

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

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

A veces puede ser necesario instruir a la computadora para que use caracteres especiales, como pestañas o saltos de línea. Para incluir cualquier carácter Unicode en la cadena, debe ingresar su código después del carácter de servicio \\ u en la forma \\ uXXXX. En la mesa. 2.5 proporciona los caracteres de control más utilizados.

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

Tabla 2.5. Personajes de control

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

Listado 2.6. Alinear datos con caracteres de control

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

Higo. 2.7. Alineación con caracteres de control

Además de los números, las cadenas y las cantidades lógicas, existen otros dos tipos especiales de datos: funciones y objetos. Las funciones pueden incorporarse, como alert (), o pueden ser creadas por el desarrollador. Además, las funciones pueden pertenecer a un objeto (en este caso se llaman métodos) Los objetos también se pueden incrustar (por ejemplo, documentos) o un programador puede crearlos. El valor nulo se considera un objeto.

Variables

Variable- Este es el nombre asignado a la celda de memoria de la computadora que almacena ciertos datos mientras se ejecuta el script. Las variables facilitan que un programador manipule datos.

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

Antes de usar una variable, debe declararla, es decir, reservar un lugar para almacenar datos. Para declarar una variable, la palabra clave var debe ir seguida de su identificador. Puede declarar varias variables a la vez especificando sus nombres con una coma:

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

En el proceso de declarar una variable, puede inicializarla, es decir, establecer el 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 una variable reciba un valor, está indefinido, indefinido. 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, utilizamos 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).

Higo. 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 de alcance se dividen en global y local. Una variable declarada dentro de una función es local, y solo esta 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. Dichas variables permiten que las funciones intercambien datos.

Formación- Esta es una variable especial que le permite almacenar múltiples valores a la vez. Por lo general, estos valores están relacionados, como los nombres de los meses y días de la semana. Las matrices pueden simplificar enormemente el código y, cuando se usan bucles, reducir la complejidad del desarrollo de una secuencia de comandos.

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

Listado 2.8. Trabajar con matriz

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

JavaScript hace posible mostrar todos los elementos de la matriz, en lugar de enumerarlos uno a la vez. Para hacer esto, recurra a la matriz en sí. El resultado es una cadena en la que todos los elementos de la matriz se enumeran con una coma (Fig. 2.9).

Higo. 2.9. Salida de todos los elementos de la matriz

Los valores de los elementos de la matriz se pueden especificar al declarar una 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 requiere esto. Una matriz se puede expandir a medida que se agregan datos. Además, puede declarar un artículo con un índice norteeso aumentará la longitud de la matriz a n + 1. Puede averiguar la longitud de la matriz utilizando la propiedad de longitud (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 de 100 (Fig. 2.10).

Higo. 2.10. Tamaño de la matriz

Expresiones

Expresionesson operandos combinados por operaciones. Por lo general, los valores y las variables actúan como operandos, pero también pueden aparecer otras expresiones. Por ejemplo, la expresión 4 + 6 suma dos valores, dando como resultado el valor 10. Y la expresión q \u003d 5 establece la variable q en 5. Si las manipulaciones se realizan con un valor, la operación se llama unaria, y si es más de dos binario. A continuación, considere las operaciones en JavaScript.

Asignación de transacciones

Una operación de uso común 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 usar simultáneamente para varias variables:

msg1 \u003d msg2 \u003d "Hola"

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

Tabla 2.6. Operaciones de asignación combinadas

Operaciones aritmeticas

/ La adición es un signo más (+). Por ejemplo, 5 + 7 \u003d 12.
/ Resta - signo menos (-). Por ejemplo, 67-43 \u003d 24.
/ Multiplicación - asterisco (*). Por ejemplo, 2 * 2 \u003d 4.
/ División es una barra oblicua (/). Por ejemplo, 45/5 \u003d 9.
/ El resto de la división es el porcentaje (%). Por ejemplo, 7% 5 \u003d 2.
/ Las operaciones aritméticas se utilizan para trabajar con números.

En programación, las operaciones de aumentar o disminuir una variable en una son muy comunes (operaciones de incremento y decremento). El incremento se indica mediante la secuencia. ++ y decremento por secuencia — . Por ejemplo, i ++ es una alternativa a la expresión i \u003d i + 1.

Distinga entre el prefijo y la forma de postfijo de estas operaciones. En el caso de una operación de prefijo, primero se realiza un incremento o decremento, y luego se calcula la expresión:

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

Si se utiliza una operación postfix, primero se calcula la expresión y luego se aumenta o disminuye la variable:

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

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

Listado 2.11. Operaciones aritmeticas

Operaciones aritmeticas

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

Esto se hace debido a la prioridad de las operaciones, que se pueden cambiar usando paréntesis.

Higo. 2.11. Operaciones aritmeticas

Operaciones de comparación

Las operaciones de comparación se utilizan para unir operandos. En estas operaciones, los operandos pueden ser no solo números, sino también cadenas, cantidades lógicas y objetos. En la mesa. 2.7 proporciona todas las operaciones de comparación.

Tabla 2.7. Operaciones de comparación

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

Listado 2.12. Operaciones de comparación

Operaciones de comparación

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

Higo. 2.12 Operaciones de comparación

Operaciones de cuerda

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

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

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

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

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

Operaciones lógicas

Las operaciones lógicas le permiten combinar expresiones que devuelven cantidades lógicas. JavaScript admite tres operaciones lógicas.

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

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

Operación lógica NO (!) es unario e invierte el valor de una cantidad lógica.

Operaciones condicionales

JavaScript tiene una operación ?: , que asigna el valor de una variable según la condición. Considere el siguiente ejemplo:

Signo 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, entonces se calcula la expresión antes de los dos puntos, si es falsa, entonces 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 firmartoma el valor "Positivo", de lo contrario, el valor "Negativo".

En JavaScript, también hay operaciones (por ejemplo, bit a bit), que son bastante raras y son necesarias para 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 (declaraciones if y switch)lo que le permite elegir una de las acciones alternativas según la condición. Para la ejecución repetida de código, se utilizan operadores de bucle. (mientras, para y hacer). Los bucles también son convenientes para manipular matrices.

Si la declaración

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

If (expresión booleana) (operadores)

La expresión lógica se calcula primero, luego si es igual a cierto, las declaraciones se ejecutan; si es igual falso, se omiten los operadores y el script continúa ejecutándose.

Considera un ejemplo. Digamos la función f (x) definido de la siguiente manera:

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

Puede usar el código en el 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 .. otra declaración

A menudo es conveniente usar la forma completa de una declaración condicional. Con este operador, puede especificar las acciones que se realizarán si la expresión lógica es igual a falso:

If (expresión booleana) (operadores1) más (operadores2)

Además, es posible combinar máscon otro operador si. En este caso, puede considerar varias opciones alternativas y ejecutar los operadores correspondientes:

If (expresión booleana1) (operadores1) más if (expresión booleana2) (operadores2) más (operadores3)

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

Listado 2.14. Un ejemplo de la declaración if..else

Como puede ver en este código, las llaves son opcionales si solo se ejecuta una instrucción. Sin embargo, se recomienda que siempre los use para simplificar la lectura del código.

Declaración de cambio

La instrucción switch compara un valor con muchos otros valores. El mismo efecto se puede lograr con la ayuda de varias declaraciones if, sin embargo, la declaración switch le permite crear un código corto y claro:

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

Suponga 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).

Higo. 2.13. El resultado de la declaración de cambio

Tenga en cuenta la declaración de interrupción, que termina la declaración de cambio. De lo contrario, el código restante se ejecutará en la instrucción switch, independientemente del valor de la variable.

La declaración for se usa para crear un bucle. Esta declaración tiene la siguiente sintaxis:

Para (expresión de inicialización; expresión de condición; expresión de bucle) (operadores)

Una expresión de inicialización generalmente sirve para establecer el valor inicial del contador de bucle. La expresión de condición termina el ciclo cuando se evalúa como falso. Una expresión de bucle normalmente aumenta o disminuye un contador de bucle. Se puede omitir cualquiera de estas expresiones, pero se debe poner 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 un factorial usando la declaración for

En este código, se organiza un ciclo de 1 a x, mientras que, por simplicidad, no se verifica la validez del valor ingresado. En base a esto, puede, por ejemplo, obtener el valor Infinito (infinito) con 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:

Mientras (expresión de condición) (operadores)

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

Listado 2.17. Encontrar un factorial usando una declaración while

Do .. while loop

La declaración do.. while es casi idéntica a la declaración while. Sin embargo, en esta declaración, la condición se verifica al final, por lo tanto, garantiza la ejecución de los operadores al menos una vez, independientemente de la verdad de la condición:

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 factorial usando el operador do.. while

Por .. en bucle

El bucle for..in le permite ejecutar sentencias 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 de 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 de la matriz a aumentarán en 1 (Fig. 2.14).

Higo. 2.14. Incrementar elementos de matriz

Romper y continuar declaraciones

A veces, durante la ejecución de un ciclo, se hace necesario interrumpir todo el ciclo o una de sus iteraciones. Las declaraciones de interrupción y continuación se utilizan para este propósito. La declaración de interrupción detiene completamente la ejecución del bucle y transfiere el control a las declaraciones que siguen al bucle. La instrucción continue interrumpe la ejecución del ciclo actual y continúa con el 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 salida de bucle

Este código le permite determinar el cociente del número y los elementos de la matriz ingresados \u200b\u200bpor el usuario. Además, entre los elementos de esta matriz puede haber ceros, entonces es necesario ingresar un guión "-" en el elemento de la matriz con el resultado b. El resultado del procesamiento del código en este caso se ve en la Fig. 2.15.

Higo. 2.15. Usar declaraciones de salida de bucle

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

El editor de código es una herramienta útil para todos los programadores. Y todo el mundo lo hace por sí mismo: alguien aprecia la funcionalidad, alguien la movilidad, para alguien lo principal es el diseño y la conveniencia. A alguien incluso le gusta escribir código en el Bloc de notas, pero es como tratar de construir una casa con un martillo.

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

Tormenta web

JetBrains WebStorm es hermoso en sus dos manifestaciones: como IDE, admite trabajar con sistemas de control de versiones, le permite implementar código de forma remota y, como editor, servicios estándar como resaltado de sintaxis, autocompletado, navegación.

Beneficios:

• LiveEdit: vea los cambios realizados en el código sin la necesidad de guardarlo;
• interacción con marcos, por ejemplo React, Angular, Meteor;
• más de cien pruebas integradas para detectar errores;
• integración con Mocha, Protractor, Jest, Karma para pruebas unitarias;
• depurador a gran escala para depurar código en el lado del servidor y del cliente;
• navegación para trabajo simultáneo con varios archivos;
• terminación de código, resaltado de sintaxis.

Desventajas

• cuesta $ 129 por el primer año de trabajo;
• para los codificadores principiantes, la funcionalidad es redundante.

Código visual de estudio

Rama IDE de Visual Studio destinada a trabajar con código. Es fácil de aprender, cómodo de usar y al mismo tiempo funcional.

Beneficios:

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

Desventajas

• pocos complementos

Texto sublime

Editor multiplataforma conveniente y probado en el tiempo, con una interfaz personalizable y la capacidad de realizar acciones triviales utilizando teclas de acceso rápido.

Beneficios:

• teclas de acceso rápido;
• código de navegación en forma de minimapa;
• la capacidad de cambiar el tema visual;
• soporte de fragmentos;
• resaltado, autocompletado de variables y sintaxis;
• edición múltiple mediante el uso de punteros;
• soporte del sistema de construcción;
• verificación de sintaxis derecha durante la entrada;
• guardado automático

Desventajas

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

Editor Atom

El editor de código de Git, que apareció en 2015, copia el diseño de Sublime Text y está envuelto en Chromium.

Beneficios:

• más de 50 módulos abiertos;
• interfaz conveniente y agradable;
• gratis;
• terminación de código y resaltado;
• administrador de paquetes, que ya es más de 3.5 mil;
• configuraciones flexibles para el editor, complementos, temas de interfaz;
• edición y navegación usando teclas de acceso rápido.

Desventajas

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

Soportes

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

Beneficios:

• equipo rico "fuera de la caja";
• modo de vista previa en vivo: una vista previa de ediciones en el navegador en tiempo real;
• gerente de empaquetación;
• mostrar en el código imágenes y colores utilizados;
• autocompletado y resaltado de sintaxis;
• analizador de código;
• gratis.

Desventajas

• orientación estricta a la web y HTML + CSS + JavaScript;
• desarrollo lento;
• rendimiento lento debido a las funciones de vista previa.

Hoy en día javascript Ocupa una posición de liderazgo cuando se trata del lado del cliente de los productos de software y es utilizado por programadores profesionales y desarrolladores web de todo el mundo. javascript Es un lenguaje de programación poderoso con muchas características e infraestructuras avanzadas como jQuery, YUI, SproutCore y Cappuccino. Pero tiene ciertos inconvenientes, por ejemplo, javascript en diferentes navegadores funciona de manera diferente y puede limitar el acceso al sitio web y su facilidad de uso. Pero estos factores no deberían limitar las posibilidades de este maravilloso lenguaje.

Para muchos programadores, trabajar con javascript Puede parecer un poco complicado, pero tenemos muchas herramientas para desarrolladores de JavaScript que no solo son fáciles de usar, sino que también muestran excelentes resultados en minutos. Al tener conocimiento de JavaScript, puede realizar cualquier tarea: escribir documentación, editar, probar, depurar, etc.

Herramientas de documentación

jGrouseDoc es una herramienta que le 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, lo que resulta en un excelente 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 comentado de JavaScript.

Herramientas de compresión

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

YUI Compressor es un reductor de JavaScript diseñado para obtener una relación de compresión más alta que la que pueden proporcionar otras herramientas. A partir de la versión 2.0, YUI Compressor comprime los archivos CSS utilizando 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. Debido a esto, los nombres de las funciones y las variables globales permanecen intactos.

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

Herramientas de formateo

JSbeautifier es una herramienta en línea que formatea y sangra los marcadores (de las palabras marcador y applet), "desordena" los fragmentos de código de JavaScript y descomprime los scripts, y también desentraña complejos fragmentos de scripts. Simplemente pegue su código y haga clic en el botón "Decorar".

Editores y kits de herramientas para el IDE

Aptana Studio es un entorno de trabajo 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 una amplia extensión de código Ruby & Rails, javascript, CSS y HTML.

El Spket IDE es un poderoso kit de herramientas de desarrollo para javascript y XML, así como javascript, XUL / XBL y Yahoo Widget. Proporciona características como extensión de código, resaltado de sintaxis y plan de contenido.

Komodo Edit es un editor gratuito de código abierto en varios idiomas para facilitar la escritura de código de calidad. Admite PHP, Python, Ruby, Perl y Tcl, así como 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 las modificaciones de estilo y diseño en tiempo real, para analizar con precisión el uso y el rendimiento de la red. El depurador de JavaScript se puede usar con cualquier navegador.

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

Faux Console es JavaScript que puede incrustar en un documento para obtener la consola de configuración básica en IE, y puede usar los archivos YUI o el archivo console.log () para registrar información entre los navegadores.

JS Bin es una aplicación web que ayuda a probar los fragmentos de código JavaScript y CSS en un contexto específico y construir 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 AJAX Web 2.0. Muchos sitios que ofrecen API devuelven datos en formato JSON. A menudo, en los datos proporcionados por JSON, los espacios se comprimen para reducir la cantidad de datos transferidos. Este sitio le proporciona una forma rápida y fácil de formatear JSON para que pueda leerlo.

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

Venkman es un instalador de JavaScript para Mozilla basado en navegadores como Firefox 3.x, Netscape 7.x, Seamonkey 1.xy Mozilla Seamonkey 2.x. El instalador también está disponible como paquete de extensión en formato 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 paquetes, cuyo propósito es ayudar a descargar sus aplicaciones y admitir todos 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 DSL, que tiene instalación, desinstalación, contenido incrustado, sin dependencias, y el trabajo se realiza mediante una sintaxis simple y al mismo tiempo expresiva.

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

Creado por John Resig y Jan Odvarko, FireUnit presenta una API de JavaScript simple para realizar una prueba simple para registrarlo y verlo en una nueva pestaña de Firebug.

JsUnit es un módulo que prueba la estructura del lado del cliente de javascript, que actúa como un puerto JUnit, y también incluye una plataforma para automatizar las pruebas en varios navegadores y computadoras que ejecutan varios sistemas operativos.

YUI Test es un entorno de prueba para soluciones javascript basadas en navegador en el que puede agregar fácilmente pruebas unitarias a soluciones javascript. La prueba YUI también proporciona una función avanzada de detección de errores para aquellos métodos que mueven errores, pruebas asincrónicas para verificar eventos, comunicaciones basadas en Ajax y más.

JSpec es un entorno de prueba muy pequeño pero muy poderoso que utiliza su propia gramática y preprocesador, e incluye muchas abreviaturas alfabéticas, sintaxis legible, soporte para Async y Rhino, una descripción anidada, un modo general de operación, soporte para accesorios, imitación de Ajax y mucho más. otro.

JSLitmus es una herramienta fácil para crear tareas de control de JavaScript altamente especializadas que funcionan con todos los navegadores más comunes. Tiene una licencia de código abierto, estilo MIT, ciclos de prueba adaptativos y también se puede colocar en páginas web o aplicaciones existentes.

El excelente JavaScript Checker se usa para rastrear elementos a ;; en la página web, y cuando encuentra un elemento HTML con eventos en línea, resalta esta sección con un borde rojo y javascript: los enlaces son carmesí.

Otras herramientas útiles

PrettyPink es un volcador variable de JavaScript integrado en el navegador que le permite imprimir objetos de cualquier tipo para verlos durante las sesiones de configuración en formato de tabla. No requiere hojas de estilo o imágenes, puede trabajar con un número infinito de objetos anidados, protege contra enlaces circulares / duplicados y es totalmente compatible con JSLint.

Firediff es una extensión para Firebug diseñada para rastrear cambios en el DOM y CSS, es decir, lleva a cabo el control de cambios, que brinda la oportunidad de comprender la funcionalidad de la aplicación, así como registrar los cambios realizados y ajustar 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 patrones, como gráficos de barras y gráficos de líneas simples.

PageSpeed \u200b\u200bes un complemento de código abierto para Firefox / Firebug que se utiliza para evaluar el rendimiento de las páginas web y obtener recomendaciones para mejorarlas. También acelera su sitio, reduce el uso de ancho de banda de línea 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 es información para analizar los datos de rendimiento recopilados.

La estructura javascript móvil (bajo Safari), en forma reducida, pesa menos de 8 Kb, accede al laboratorio de Sizzle en el iPhone, admite transiciones y animaciones CSS, está orientada 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, por ejemplo, navegadores web, extensiones de navegador, motores AIR y SSJS, por ejemplo, V8, Rhino y SpiderMonkey.

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

MochaUI es una biblioteca de interfaces de usuario en forma de una aplicación web construida sobre Mootools javascript utilizada en aplicaciones web, elementos web en el escritorio, sitios web, widgets y cuadros de diálogo separados.

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

Bibliotecas de utilidades y componentes para javascript

Uploadify es un complemento de jQuery que facilita la integración de múltiples descargas en su sitio web y que requiere Flash o cualquier otro lenguaje de desarrollo interno. La implementación básica es bastante simple y ofrece un enorme margen de modificación para usuarios avanzados.

Burst es un ejemplo de una animación característica que utiliza tecnologías JavaScript y HTML5 y sin ningún uso de la tecnología Flash. Se crea un archivo SVG 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 construcción continua; le permite ejecutar pruebas rápidamente en varios navegadores para facilitar el desarrollo de estilos TDD y proporciona una ejecución de prueba rápida, DOM totalmente controlado, control de línea de comando, etc.

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

javascriptools es un conjunto de componentes, funciones y clases de JavaScript en el que las funciones realizan operaciones básicas con objetos, cadenas, matrices de datos, campos de formulario, etc. El conjunto tiene una tabla dinámica que admite archivos de paginación, ordenándolos y editándolos, y es totalmente personalizable con CSS.

liteAJAX es una prueba del concepto de clases ligeras de AJAX.

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

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

Bibliotecas javascript útiles y otras herramientas

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

Moousture es una biblioteca de movimiento de mouse solo con JavaScript con la capacidad y flexibilidad de minimizar 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 modernos, donde todas las herramientas pueden usarse juntas, expandirse, configurarse y utilizarse. Es utilizado por grandes sitios en todo el mundo.

Tipimage se usa para crear y administrar información sobre herramientas sobre imágenes, crea partes cuadradas de imágenes y se adjunta a cada descripción, que se muestra como una nube de consejos. También admite el uso de una función especial de devolución de llamada.

qGallery es un pequeño programa de línea de comandos que procesa imágenes jpeg y especialmente renombra archivos en algunas estructuras de carpetas para formar una galería HTML estática para publicaciones, crea automáticamente índices de imágenes para vistas previas, comentarios para cada imagen e imágenes adicionales y HTML se puede agregar más tarde.

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

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

La secuencia de comandos de acciones de tabla discreta puede quitar la tabla, admite mover el cursor sobre la barra de menú horizontal y vertical y los efectos para mover el cursor sobre celdas individuales pueden funcionar con rowSpans y ColSpans, y también funciona rápidamente en Internet Explorer.

Glassbox es una interfaz de usuario de JavaScript liviana que utiliza Prototype y Script.aculo.us para lograr algunos efectos. GlassBox le permite construir fácilmente marcos brillantes brillantes, esquemas de color y efectos similares a Flash.

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

Bookmarklet se utiliza para realizar funciones útiles. Bookmarklet le permite crear URL desde JavaScript y agregarlo a sus Favoritos. Ingrese su código de JavaScript y Bookmarklets hará el resto.

el generador de JavaScript Regex genera el correcto en relación con las expresiones base, en el que solo debe ingresar datos para probar y marcar las partes que debe comparar el Regex. 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 claves para tablas de compatibilidad, que determinan si es totalmente compatible, con dificultad o no.

No es ningún secreto que hoy en día Javascript se ha convertido en uno de los lenguajes de programación más populares. En los lejanos años 90, en el momento de la aparición del lenguaje, cuando se creó con el único propósito de agregar interactividad a las páginas web y mejorar el proceso de interacción con el usuario, quien hubiera pensado que alcanzaría alturas tan sin precedentes. Después de todo, ahora puedes hacer casi cualquier cosa al respecto. ¿Desea escribir un sitio web: tanto un backend como un frontend en JavaScript? ¡de nada! ¿Quieres escribir una aplicación móvil en JavaScript? no hay problemas. Programe el microcontrolador y JavaScript lo ayudará.

Por supuesto, existen pequeñas desventajas en el enfoque de usar JavaScript en todas partes, pero si lo piensa, cuánto tiempo y esfuerzo se puede ahorrar al aprender un solo idioma, especialmente si la misma aplicación debería funcionar en diferentes plataformas. Habla diferentes plataformas? Hmm ... Exactamente, en diferentes plataformas, ¿ahora JS puede permitirse aplicaciones de escritorio para Windows, Linux, Mac, como usted pregunta? La respuesta es simple: cumplir - Nw.js.

Node.js - Una plataforma de software basada en el motor V8 que traduce nuestro script en código de máquina. Esta plataforma fue creada en 2009 principalmente para trabajar con los sitios de back-end.

Webkit - Un motor gratuito desarrollado por Apple. Se anunció por primera vez como parte de Safari en 2003.
Por lo tanto, el código escrito en JS para esta tecnología tendrá acceso tanto a los módulos Node.js como a una API de navegador estándar (respectivamente WebKit)

Comienzo rápido

Todo esto es ciertamente bueno, pero ¿por dónde empezar? En github, puede encontrar y descargar el repositorio de origen. Aquí también puede encontrar enlaces de descarga directa para la plataforma en la que se realizará el desarrollo. Entre otras cosas, necesitamos instalar node.js.

Después de que se haya descargado e instalado el software necesario, usted escribió su aplicación en su JS favorito (vea a continuación cómo hacerlo) y localizó todo en una carpeta. La mitad del trabajo está hecho, ahora queda lo más difícil y largo: empacar todo en un archivo y prepararse para la distribución. Para simplificar, puede usar bibliotecas preparadas, por ejemplo nw-builder. Instalar la biblioteca no será difícil si ya ha trabajado con node.js. Como sabes, node.js incluye administrador de paquetes npmque debes trabajar desde la línea de comandos. Para colocar cualquier biblioteca, debe ejecutar el comando:

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

\u003e npm install nw-builder -g
Para compilar nuestra aplicación, debe ejecutar el comando (con una gran cantidad de opciones, consulte la documentación):

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

Durante el desarrollo, no hay necesidad de construir la aplicación cada vez, solo puede iniciarla tal como está y se abrirá en una ventana separada. Para hacer esto, ejecute la aplicación nw.exe desde la línea de comando y pase la ruta a la carpeta con su aplicación como parámetros. Además, si está trabajando en Windows, simplemente puede arrastrar y soltar la carpeta con el código fuente de la aplicación en JS utilizando el método de arrastrar y soltar (tenga en cuenta que es la carpeta completa) en nw.exe.

¡Hola Mundo!

Ahora que sabe cómo ejecutar la aplicación, cómo ensamblarla en un solo archivo, escriba algo. Por tradición, la introducción a la nueva plataforma comienza con la redacción de la aplicación Hello, world.

Para esta aplicación, ni siquiera necesitamos Javascriptsolamente HTML. Crea una carpeta con el nombre Hola Mundo. Pon el archivo adentro index.html con el siguiente marcado:

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

("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 es claro sin explicación (tenga en cuenta que los campos obligatorios son solo principal y nombre) A principal necesita escribir un archivo de marcado, que será el punto de entrada a la aplicación. Sección ventana ajusta los parámetros de la ventana (en este caso, apagamos la barra de herramientas y establecemos el tamaño de la ventana en 500x200).

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

• icono - especifique la ruta al icono (anule el estándar)
• posición - puede especificar la posición de la ventana en el arranque ( nulo, centrar o ratón)
• min_width, min_height, anchura máxima, altura máxima - limitación de tamaño de ventana
• redimensionable - un valor lógico que indica si el usuario puede cambiar el tamaño de la ventana
• pantalla completa - Activar el modo de pantalla completa
• quiosco - habilitar el modo quiosco
• transparente - hacer la ventana transparente

La aplicación se crea y puedes ejecutarla. Después de comenzar (para ver cómo hacerlo, consulte la sección anterior), debería obtener la siguiente ventana:

La aplicación está escrita, pero solo hay un elemento div y no hay absolutamente ninguna lógica, pero ¿qué pasa si tenemos un marcado rico para elementos y lógica compleja? Un elemento del archivo de configuración nos ayuda barra de herramientasque ponemos a falso. Para que las herramientas de depuración estén disponibles, debe establecer la barra de herramientas en verdadero. Una vez hecho esto al iniciar la aplicación, obtenemos la siguiente ventana:

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

Trabaja con controles nativos

NW.js te permite trabajar con controles nativos. Considera 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:

Elemento Var \u003d new gui.ElementName (opción);
Por lo tanto, para crear elementos de menú, puede usar el siguiente diseño:

Menú Var \u003d nueva gui.Menu ();
Además, cualquier propiedad del objeto que creamos se puede cambiar fácilmente con construcciones JS estándar, por ejemplo, así:

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

Menu.append (new gui.MenuItem ((etiqueta: "Etiqueta del elemento de menú"))); menu.removeAt (0);
Además, para una adición más flexible de elementos al menú, puede usar el método insertarcuyos parámetros quieres pasar Opción del menú y número de posición donde insertarlo ( la posición antes del primer elemento corresponde a 0).

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

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

Menu.items \u003d new gui.MenuItem (); // INCORRECTO
Lo más importante cuando se trabaja con controles nativos es recordar que cualquier error al trabajar con ellos puede provocar el colapso de toda la aplicación, por lo tanto, es necesario ser extremadamente cuidadoso y siempre que sea posible al eliminar elementos, también establezca la variable en nulo. De este modo para quitar el control, puedes hacer lo siguiente:

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

Menuitem.on ("click", function () (// haz algo útil));
Se ha creado un 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 transferir las 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 new gui.Menu (); menu1.append (new gui.MenuItem ((etiqueta: "Elemento 1"))); var subMenu1 \u003d nueva gui.Menu (); subMenu1.append (new gui.MenuItem ((label: "Item 2"))); menu1.append (new gui.MenuItem ((etiqueta: "Submenú", submenú: 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. Por lo tanto, podemos definir un menú contextual para cualquier elemento.

Agregar etiquetas