Nos estamos moviendo hacia el mundo salvaje y maravilloso de la programación JavaScript . Antes de empezar a intentar ser un ninja experto, primero debemos pasar algún tiempo en el dojo para perfeccionar nuestras técnicas. En otras palabras, no intentaremos correr antes de aprender a caminar. En este episodio, veremos la estructura del lenguaje JavaScript. ¡Saltemos de inmediato!

JavaScript está escrito en texto sin formato

Al igual que ya sabe al escribir HTML y CSS, JavaScript simplemente está escrito en texto plano. Esto sería JavaScript perfectamente válido en una página HTML:

estructura javascript

JavaScript es un lenguaje interpretado

Así es, amigos, se interpreta, no se compila. ¡Esto no lo hace menos un lenguaje de programación para disgusto de algunos de los ingenieros de código de máquina embebidos del mundo! A diferencia de un lenguaje como C, que debe hacer uso de un programa intermedio llamado compilador para transformar la sintaxis de alto nivel en código a nivel de máquina, JavaScript es simplemente interpretado por el motor JavaScript del navegador en tiempo de ejecución. Los motores de JavaScript de hoy en día son obras geniales, que permiten una ejecución extremadamente rápida y precisa de código JavaScript. Por lo tanto, no hay necesidad de preocuparse por la naturaleza interpretada de JavaScript.

JS distingue entre mayúsculas y minúsculas

Al trabajar con la tecnología, los desarrolladores web estamos expuestos a numerosos lenguajes y sintaxis diferentes. Algunos de los lenguajes que encontramos no distinguen entre mayúsculas y minúsculas, pero JavaScript distingue entre mayúsculas y minúsculas, así que asegúrese de tener esto en cuenta. Encontrará que las cosas se rompen y no funcionan con errores de casos simples. Por ejemplo alert ('Soy la víctima de JavaScript'); funciona bien, mientras que Alerta ('Soy la víctima de JavaScript'); fallará de manera espectacular. En realidad, no será tan espectacular, de hecho, lo único que te avisará de que algo salió mal es que no pasaría nada. Tal es la naturaleza de JavaScript, es un lenguaje complicado de depurar, pero más sobre eso en una lección posterior.

JavaScript se ejecuta en declaraciones

Al igual que otros lenguajes, JavaScript ejecuta una declaración a la vez. Una declaración es un grupo de componentes de lenguaje ejecutables terminados por punto y coma. Las declaraciones generalmente se ejecutan en orden de arriba hacia abajo. El orden de ejecución se puede cambiar mediante sentencias condicionales como if y switch, mediante un bucle de sentencias como while, for y do, y mediante sentencias disruptivas como break, return y throw. La ejecución de funciones también puede cambiar la naturaleza de arriba a abajo de la ejecución de instrucciones.

La naturaleza indulgente de JavaScript es una debilidad

JavaScript es un lenguaje poderoso y capaz. Tiene algunas deficiencias que en realidad estaban destinadas a ser características útiles cuando se concibió el lenguaje por primera vez. El más popular de todos ellos es la muy infame inserción de punto y coma. JavaScript incorpora la capacidad de detectar una sintaxis deficiente e insertar automáticamente los puntos y comas que faltan. Suena como una buena idea, ¿verdad? Incorrecto. Si te olvidas de insertar manualmente puntos y comas en la ubicación adecuada en tu código, Chuck Norris desatará una furia de patadas de kárate y golpes de monja azotándote. Bueno, tal vez eso no suceda, pero sus scripts estarán plagados de errores que casi no tendrá esperanzas de encontrar, así que asegúrese de insertar los puntos y comas para que todos, incluido usted, se sientan felices.

El espacio en blanco es semi insensible en JavaScript

¿Qué? ¿Qué diablos es semi insensible? Bueno, en su mayor parte, los espacios en blanco no importan en JavaScript. Es por eso que ve un uso tan generalizado de herramientas de minificación que toman el código de sintaxis JavaScript legible por humanos y eliminan casi todo el espacio en blanco, lo que lleva a una larga cadena de JavaScript que parece una extraña forma de jeroglíficos. Hay casos en los que los espacios en blanco sí importan. Por ejemplo:

El espacio entre var y chimmy es realmente necesario aquí para que el script funcione correctamente. O considere:

Los espacios en blanco contenidos dentro de una cadena tampoco se pueden eliminar.

Comentarios en JavaScript

Los comentarios de JavaScript funcionan igual que en la mayoría de los otros lenguajes basados ​​en C. Puede hacer uso de las conocidas técnicas de comentarios de varias líneas o de una sola línea. Como probablemente sepa, /* */ maneja los comentarios de varias líneas mientras //se puede usar línea por línea, o al final de una línea para agregar un comentario.

El orden de ejecución del código es importante
Como mencionamos anteriormente, cuando un navegador web comienza su interpretación de una página web, comienza en la parte superior y va línea por línea hacia abajo a través del DOM. Esto incluye HTML, CSS y JavaScript en la página. En nuestro primer pequeño fragmento de JavaScript, utilizamos el cuadro de alerta oh tan querido para que el visitante sepa que somos víctimas de JavaScript. Tenga en cuenta que el HTML se representa en segundo plano y la ejecución de la página se detuvo una vez que apareció el mensaje de alerta. El usuario debe hacer clic en Aceptar para finalizar el programa. Hagamos una pequeña modificación a esa página web. Simplemente moveremos nuestro guión del cuerpo a la parte del encabezado de la página. Veamos qué pasa.

estructura javascript 2

Tenga en cuenta que recibimos la misma alerta de JavaScript en esa página. Sin embargo, ¿notas algo diferente? Así es, si miras el fondo, todavía no se ha renderizado absolutamente ningún HTML, y estamos congelados en este estado hasta que hagamos clic en Aceptar. Esto muestra que el orden de ejecución es realmente importante. Este es un ejemplo demasiado simple, pero se sorprenderá a medida que avanza en su viaje de JavaScript cuando esté depurando problemas complicados y descubra que simplemente mover su código hacia arriba o hacia abajo en la jerarquía del DOM puede resolver su problema. Puede parecer trivial, pero marca la diferencia.

Dónde colocar JavaScript

  • Inline Puede colocar JavaScript directamente en la página HTML utilizando las etiquetas de secuencia de comandos. Esto es bueno para sitios muy pequeños y solo para pruebas. El enfoque en línea no se escala bien, conduce a una organización deficiente y a la duplicación de código.
  • Archivo externo Un mejor enfoque es colocar JavaScript en archivos separados y vincularlos desde la página HTML. De esta manera, se puede incluir un único script en miles de páginas HTML y solo tiene un lugar para editar su código JavaScript. Este enfoque también es mucho más fácil de mantener, escribir y depurar.

Uso de la etiqueta de script

En el pasado, teníamos que preocuparnos por especificar muchos atributos para la etiqueta del script. Con la aparición de HTML5 y los navegadores modernos, basta con incluir el atributo src.

¿Dónde debo colocar las etiquetas de script?

Las etiquetas de secuencia de comandos pueden ir a cualquier parte de la página, pero como práctica recomendada, muchos desarrolladores las colocarán justo antes de la etiqueta de cuerpo de cierre en la página HTML. Esto proporciona tiempos de carga más rápidos para su página web.

Conclusión

Esta fue una introducción muy suave de lo que está por venir. Ha sido útil repasar algunos de los puntos clave y la descripción general del idioma.