Guía de JavaScript, Parte 1: primer programa, características del lenguaje, estándares

Recientemente realizamos una encuesta sobre la viabilidad de traducir esta guía de JavaScript. Al final resultó que, alrededor del 90% de los que votaron reaccionaron positivamente a esta idea. Por lo tanto, hoy publicamos la primera parte de la traducción.



Esta guía, según el autor, está diseñada para aquellos que ya están un poco familiarizados con JavaScript y desean ordenar sus conocimientos y también aprender algo nuevo sobre el lenguaje. Decidimos ampliar un poco la audiencia de este material, para incluir a aquellos que no saben absolutamente nada sobre JS, y comenzar escribiendo varias versiones de "¡Hola, mundo!".

→ Parte 1: primer programa, características del lenguaje, estándares
→ Parte 2: estilo de código y estructura del programa
→ Parte 3: variables, tipos de datos, expresiones, objetos.
→ Parte 4: funciones
→ Parte 5: matrices y bucles
→ Parte 6: excepciones, punto y coma, literales comodín
→ Parte 7: modo estricto, esta palabra clave, eventos, módulos, cálculos matemáticos
→ Parte 8: Descripción general de las características de ES6
→ Parte 9: Descripción general de los estándares ES7, ES8 y ES9

Hola mundo

El programa, que tradicionalmente se llama " ¡Hola, mundo! "Es muy simple. Muestra en alguna parte la frase "¡Hola, mundo!", U otra similar, por medio de cierto idioma.

JavaScript es un lenguaje donde los programas se pueden ejecutar en diferentes entornos. En nuestro caso, estamos hablando de navegadores y la plataforma de servidor Node.js. Si hasta ahora no ha escrito una sola línea de código en JS y está leyendo este texto en un navegador, en una computadora de escritorio, significa que está literalmente en segundos desde su primer programa JavaScript.

Para escribirlo, si usa Google Chrome, abra el menú del navegador y seleccione el comando > . La ventana del navegador se dividirá en dos partes. En uno de ellos se verá una página, en otro se abrirá un panel con herramientas para desarrolladores que contiene varios marcadores. Estamos interesados ​​en la pestaña Console . Haz clic en él No preste atención a lo que ya puede estar presente en la consola (puede usar la combinación de Ctrl + L para borrarlo). Ahora estamos interesados ​​en invitar a la consola. Aquí es donde puede ingresar el código JavaScript que se ejecuta presionando la tecla Enter . Ingresemos lo siguiente en la consola:

 console.log("Hello, world!") 

Este texto se puede ingresar desde el teclado, puede copiarlo y pegarlo en la consola. El resultado será el mismo, pero si está aprendiendo a programar, se recomienda que ingrese los textos de los programas usted mismo y no los copie.

Después de que el texto del programa esté en la consola, presione Enter .

Si todo se hace correctamente, aparecerá el texto Hello, world! debajo de esta línea Hello, world! . No prestes atención a todo lo demás.


El primer programa en la consola del navegador es mostrar un mensaje en la consola.

Otra opción de navegador "¡Hola, mundo!" consiste en mostrar un cuadro de mensaje. Se hace así:

 alert("Hello, world!") 

Aquí está el resultado de ejecutar este programa.


Mostrar un mensaje en una ventana

Tenga en cuenta que la barra de herramientas del desarrollador ahora se encuentra en la parte inferior de la pantalla. Puede cambiar su ubicación utilizando el menú con tres puntos en su título y seleccionando el icono apropiado. Allí también puede encontrar un botón para cerrar este panel.

Las herramientas para desarrolladores, incluida la consola, también están disponibles en otros navegadores. La consola es buena porque siempre está a mano cuando usa el navegador.

Hay otras formas de ejecutar código JS en un navegador. Entonces, si hablamos sobre el uso normal de los programas JavaScript, se cargan en el navegador para garantizar el funcionamiento de las páginas web. Como regla general, el código se ejecuta como archivos separados con la extensión .js , que están conectados a páginas web, pero el código del programa también se puede incluir directamente en el código de la página. Todo esto se hace usando la <script> . Cuando el navegador detecta dicho código, lo ejecuta. Los detalles de la etiqueta del script se pueden ver en w3school.com. En particular, considere un ejemplo que muestra cómo usar una página web usando JavaScript usando este recurso. Este ejemplo también se puede iniciar utilizando los recursos de este recurso (busque el botón Try it Yourself ), pero lo haremos de manera un poco diferente. Es decir, crearemos un nuevo archivo en algún editor de texto (por ejemplo, en VS Code o Notepad ++ ), al que llamaremos hello.html , y le agregaremos el siguiente código:

 <!DOCTYPE html> <html> <body>   <p id="hello"></p>   <script>     document.getElementById("hello").innerHTML = "Hello, world!";   </script> </body> </html> 

Aquí estamos más interesados ​​en la línea document.getElementById("hello").innerHTML = "Hello, world!"; , que es un código JS. Este código se incluye en las etiquetas de apertura y cierre de <script> . Encuentra un elemento HTML con un identificador de hello en el documento y cambia su propiedad innerHTML (es decir, el código HTML contenido en este elemento) a Hello, world! . Si abre el archivo hello.html en un navegador, se mostrará el texto especificado en él.


Salida de JavaScript al elemento HTML

Como ya se mencionó, los ejemplos proporcionados en w3school.com se pueden probar allí mismo. Existen entornos en línea especializados para el desarrollo web y, en particular, para ejecutar código JS. Entre ellos, por ejemplo, codepen.io , jsfiddle.net , jsbin.com .

Aquí, por ejemplo, se parece a nuestro ejemplo, recreado por medio de CodePen.


El campo HTML contiene código que describe el elemento HTML, el campo JS contiene código JavaScript y el resultado se muestra en la parte inferior de la página.

Dijimos anteriormente que los programas JavaScript se pueden ejecutar en varias plataformas, una de las cuales es el entorno del servidor Node.js. Si va a aprender JavaScript, centrándose específicamente en el desarrollo del lado del servidor, probablemente debería ejecutar los ejemplos usando Node.js. Tenga en cuenta que, de manera simplificada, y sin tener en cuenta el soporte particular de las características específicas del lenguaje utilizadas por las versiones de Node.js y el navegador, el mismo código funcionará en Node.js y en el navegador, utilizando los mecanismos básicos del idioma. Es decir, por ejemplo, el comando console.log("Hello, world!") Funcionará tanto allí como allí. Los programas que utilizan mecanismos específicos del navegador no funcionarán en Node.js (lo mismo ocurre con el intento de ejecutar programas diseñados para Node.js en un navegador).

Para lanzar nuestro "¡Hola, mundo!" en el entorno Node.js, instale Node.js descargando el paquete de distribución apropiado desde aquí . Ahora cree el archivo hello.js y coloque el siguiente código:

 console.log('Hello, World!'); 

Usando la línea de comando, iremos a la carpeta en la que está almacenado este archivo y ejecutaremos el siguiente comando:

 node hello.js 

Aquí está el resultado de su implementación:


Mensaje impreso por Node.js

Por cierto, es posible que hayas notado (y muy probablemente notado si escribiste el código tú mismo) que algunos de los ejemplos anteriores usan un punto y coma al final de las líneas, y otros no. En algunos, el texto que queremos mostrar en la consola o como mensaje está rodeado de comillas dobles y, en algunos, simples. Quizás ahora se pregunte por qué es así y cómo, si diferentes versiones del código funcionan sin errores, escriba este código correctamente. Si responde esta pregunta sin entrar en detalles y sin tener en cuenta algunos detalles pequeños, entonces podemos decir que ambas opciones para usar comillas y punto y coma son aceptables, y que funcionan de la misma manera. La elección de una opción particular depende del estilo de escritura del código al que se adhiere el programador y de las necesidades de una determinada parte del programa. Además, con estos ejemplos simples, puede sentir una de las características características de JavaScript, que es que el lenguaje le da al programador cierta libertad.

Ahora, después de conocer a JavaScript por primera vez, le ofrecemos hablar más sobre este idioma.

Descripción general de JavaScript

JavaScript es uno de los lenguajes de programación más populares del mundo. Creado, hace más de 20 años, ha avanzado mucho en su desarrollo. JavaScript fue concebido como un lenguaje de script para navegadores. Al principio, tenía capacidades mucho más modestas que ahora. Se utilizaba principalmente para crear animaciones simples, como menús desplegables, lo sabían como parte de la tecnología Dynamic HTML (DHTML, HTML dinámico).

Con el tiempo, crecieron las necesidades del entorno web, en particular, aparecieron nuevas API, y JavaScript, para apoyar el desarrollo web, era necesario mantenerse al día con otras tecnologías.

Hoy en día, JS se usa no solo en los navegadores tradicionales, sino también más allá. En particular, estamos hablando de la plataforma de servidor Node.js, sobre las posibilidades de usar JavaScript en el desarrollo de aplicaciones integradas y móviles, sobre la resolución de una amplia gama de tareas para las que JavaScript no se usaba antes.

Características clave de JavaScript

JavaScript es un lenguaje que tiene las siguientes características:

• Alto nivel Le brinda al programador abstracciones que le permiten no prestar atención a las características del hardware en el que se ejecutan los programas JavaScript. El lenguaje gestiona automáticamente la memoria utilizando el recolector de basura. Como resultado, un desarrollador puede concentrarse en resolver sus tareas sin distraerse con mecanismos de bajo nivel (aunque, debe tenerse en cuenta, esto no elimina la necesidad de un uso racional de la memoria). El lenguaje ofrece herramientas potentes y convenientes para trabajar con datos de varios tipos.
• Dinámica A diferencia de los lenguajes de programación estáticos, los lenguajes dinámicos pueden, durante la ejecución del programa, realizar acciones que los lenguajes estáticos realizan durante la compilación del programa. Este enfoque tiene sus pros y sus contras, pero pone a disposición del desarrollador características tan poderosas como tipeo dinámico, enlace tardío, reflexión, programación funcional, cambio de objetos durante la ejecución del programa, cierre y mucho más.
• Escrito dinámicamente. Los tipos de variables de desarrollo JS son opcionales. En la misma variable, por ejemplo, primero puede escribir una cadena y luego un número entero.
• Débilmente escrito. A diferencia de los lenguajes con tipeo fuerte, los lenguajes con tipeo débil no obligan al programador, por ejemplo, a usar objetos de ciertos tipos en ciertas situaciones, realizando, si es necesario, conversiones de tipo implícitas. Esto proporciona más flexibilidad, pero los programas JS no son seguros para escribir, lo que hace que las tareas de verificación de tipo sean más complicadas (TypeScript y Flow están destinados a resolver este problema).
• Interpretado Se cree ampliamente que JavaScript es un lenguaje de programación interpretado, lo que significa que los programas escritos en él no necesitan compilarse antes de ejecutarse. JS en este sentido se opone a lenguajes como C, Java, Go. En la práctica, los navegadores, para mejorar el rendimiento del programa, compilan el código JS antes de ejecutarlo. Este paso, sin embargo, es transparente para el programador; no requiere esfuerzos adicionales de su parte.
• Multiparadigma. JavaScript no impone al desarrollador el uso de ningún paradigma de programación en particular, a diferencia de, por ejemplo, Java (programación orientada a objetos) o C (programación imperativa). Puede escribir programas JS utilizando un paradigma orientado a objetos, en particular, utilizando prototipos y clases que aparecieron en el estándar ES6. Los programas en JS también se pueden escribir en un estilo funcional, debido al hecho de que las funciones aquí son objetos de primera clase. JavaScript permite el estilo imperativo utilizado en C.

Sí, por cierto, debe tenerse en cuenta que JavaScript y Java no tienen nada en común. Estos son idiomas completamente diferentes.

JavaScript y estándares

ECMAScript, o ES, es el nombre del estándar que guía a los desarrolladores de motores JavaScript, es decir, aquellos entornos donde se ejecutan los programas JS. Diversos estándares introducen nuevas características en el lenguaje, y hablan de que a menudo se menciona el nombre de los estándares en forma abreviada, por ejemplo, ES6. ES6 es lo mismo que ES2015, solo en el primer caso el número significa el número de versión del estándar (6), y en el segundo - el año de adopción del estándar (2015).

Dio la casualidad de que en el mundo de la programación web durante mucho tiempo el estándar ES3, adoptado en 1999, era relevante. La cuarta versión del estándar no existe (intentaron agregarle muchas características nuevas y nunca la aceptaron). En 2009, se adoptó el estándar ES5, que fue una gran actualización del idioma, el primero en 10 años. Después de eso, en 2011, se adoptó el estándar ES5.1, también tenía muchas cosas nuevas. El estándar ES6 adoptado en 2015 también se ha vuelto muy significativo en términos de innovación. A partir de 2015, se adoptan nuevas versiones de la norma cada año.

La última versión de la norma en el momento de la publicación de este material es ES9 , adoptada en junio de 2018.

Resumen

Hoy escribimos "¡Hola, mundo!" en JavaScript, examinó las principales características del lenguaje y habló sobre su estandarización. La próxima vez hablaremos sobre el estilo de los textos de JavaScript y la estructura léxica de los programas.

Estimados lectores! Si, antes de leer este material, no estaba familiarizado con JavaScript, díganos si logró ejecutar "¡Hola, mundo!".