Introducción a Javascript
JavaScript fue creado inicialmente para “hacer que las páginas web estén vivas”.
Los programas en este idioma se llaman scripts. Se pueden escribir directamente en el HTML y ejecutarse automáticamente a medida que se carga la página.
Los scripts se proporcionan y ejecutan como un texto plano. No necesitan una preparación especial o una compilación para ejecutar.
En este aspecto, JavaScript es muy diferente de otro lenguaje llamado Java.
JavaScript es un lenguaje de programación que agrega interactividad a su sitio web (por ejemplo: juegos, respuestas cuando se presionan los botones o datos ingresados en formularios, estilo dinámico, animación). Este tutorial lo ayuda a comenzar con este lenguaje emocionante y le da una idea de lo que es posible.
Tu primer Script
El tutorial que estás leyendo trata sobre JavaScript plano, que es independiente de la plataforma. Más adelante, podrás aprender Node.JS y otras plataformas que lo utilizan.
Pero, necesitamos un entorno de trabajo para ejecutar nuestros scripts y, solo porque este tutorial está en línea, el navegador es una buena opción. Mantendremos la cantidad de comandos específicos del navegador (como alerta) a un mínimo, para que no dediques tiempo a ellos si planeas concentrarte en otro entorno como Node.JS.
Por otro lado, los detalles del navegador se explican en detalle en la siguiente parte del tutorial.
Entonces, primero, veamos cómo adjuntar un script a una página web. Para los entornos del lado del servidor, solo puede ejecutarlo con un comando como “node script.js” para Node.JS.
La etiqueta “script”
Los programas de JavaScript se pueden insertar en cualquier parte de un documento HTML con la ayuda de la etiqueta <script>.
Por ejemplo:
<! DOCTYPE HTML>
<html>
<body>
<p> Antes de la secuencia de comandos ... </p>
<script>
alert('¡Hola mundo!');
</script>
<p> ... Después de la secuencia de comandos. </p>
</body>
</html>
La etiqueta <script> contiene código JavaScript que se ejecuta automáticamente cuando el navegador cumple con la etiqueta.
Puedes correr tu código en un editores online como este para probar estos ejercicios.
El marcado moderno
La etiqueta <script> tiene algunos atributos que rara vez se usan en la actualidad, pero podemos encontrarlos en el código antiguo:
El atributo de tipo: <script type=…>
El antiguo estándar HTML4 requería que un script tuviera un tipo. Por lo general, era type = “text / javascript”. No se requiere más. Además, la norma moderna cambió totalmente el significado de este atributo. Ahora se puede utilizar para los módulos de Javascript. Pero ese es un tema avanzado, pero hablaremos sobre los módulos más adelante en otra parte del tutorial.
El atributo de language: <script language=…>
Este atributo estaba destinado a mostrar el idioma del script. A partir de ahora, este atributo no tiene sentido, el idioma es JavaScript por defecto. No hay necesidad de usarlo.
Comentarios antes y después de los scripts
En scripts realmente antiguos, uno puede encontrar comentarios dentro de <script>, como este:
<script type="text/javascript"><!-- ... //--></script>
Este truco no se utiliza en JavaScript moderno. Estos comentarios se utilizaron para ocultar el código JavaScript de los navegadores antiguos que no conocían una etiqueta <script>.
Dado que los navegadores nacidos en los últimos 15 años no tienen este problema, este tipo de comentario puede ayudarlo a identificar códigos realmente antiguos.
Scripts externos
Si tenemos un montón de código JavaScript, podemos ponerlo en un archivo separado.
El archivo de script se adjunta a HTML con el atributo src:
<script src="/path/to/script.js"></script>
Aquí /path/to/script.js es una ruta absoluta al archivo con el script (desde la raíz del sitio).
También es posible proporcionar una ruta relativa a la página actual. Por ejemplo, src = “script.js” significaría un archivo “script.js” en la carpeta actual.
También podemos dar una URL completa, por ejemplo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
Para adjuntar varios scripts, use múltiples etiquetas:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script>
Estructura de código
Lo primero que hay que estudiar son los componentes básicos del código.
Declaraciones
Las declaraciones son construcciones de sintaxis y comandos que realizan acciones.
Ya hemos visto una alerta de declaración (‘¡Hola, mundo!’), Que muestra el mensaje.
Podemos tener tantas declaraciones en el código como queramos. Otra declaración puede ser separada con un punto y coma.
Por ejemplo, aquí dividimos el mensaje en dos:
alert('Hola'); alert('Mundo');
Por lo general, cada declaración se escribe en una línea separada, por lo que el código se vuelve más legible:
alert('Hola');
alert('Mundo');
Punto y coma
Se puede omitir un punto y coma en la mayoría de los casos cuando existe un salto de línea.
Esto también funcionaría:
alert('Hola')
alert('mundo')
Aquí, JavaScript interpreta el salto de línea como un punto y coma “implícito”. Eso también se llama una inserción automática de punto y coma.
En la mayoría de los casos, una nueva línea implica un punto y coma. Pero “en la mayoría de los casos” no significa “siempre”!
Hay casos en que una nueva línea no significa un punto y coma, por ejemplo:
alert(3 + 1 + 2);
El código produce 6, es porque JavaScript no inserta punto y coma aquí. Es intuitivamente obvio que si la línea termina con un signo más “+”, entonces es una “expresión incompleta”, no se requiere punto y coma. Y en este caso eso funciona según lo previsto.
Pero hay situaciones en las que JavaScript “falla” al asumir un punto y coma donde realmente se necesita.
Los errores que ocurren en tales casos son bastante difíciles de encontrar y corregir.
Un ejemplo de un error
Si tiene curiosidad por ver un ejemplo concreto de tal error, consulte este código:
[1, 2].forEach(alert)
No hay necesidad de pensar en el significado de los corchetes [] y forEach todavía. Los estudiaremos más tarde, por ahora no importa. Solo recordemos el resultado: muestra 1, luego 2.
Ahora agreguemos una alerta antes del código y no la terminemos con un punto y coma:
alert("habrá un error")
[1, 2].forEach(alert)
Ahora, si lo ejecutamos, solo se muestra la primera alerta, ¡y luego tenemos un error!
Pero todo está bien de nuevo si agregamos un punto y coma después de la alerta:
alert("Todo bien ahora");
[1, 2].forEach(alert)
Ahora tenemos el mensaje “Todo bien ahora” y luego 1 y 2.
El error en la variante sin punto y coma se produce porque JavaScript no implica un punto y coma antes de los corchetes […].
Entonces, como el punto y coma no se inserta automáticamente, el código del primer ejemplo se trata como una sola declaración. Así es como lo ve el motor:
alert("Habrá un error")[1, 2].forEach (alert)
Pero deberían ser dos declaraciones separadas, no una sola. Tal fusión en este caso es simplemente errónea, de ahí el error. Hay otras situaciones cuando tal cosa sucede.
Se recomienda colocar un punto y coma entre las declaraciones, incluso si están separadas por líneas nuevas. Esta regla es ampliamente adoptada por la comunidad. Notemos una vez más que es posible omitir los puntos y comas la mayoría del tiempo. Pero es más seguro, especialmente para un principiante, usarlos.
Comentarios
A medida que pasa el tiempo, el programa se vuelve cada vez más complejo. Se hace necesario agregar comentarios que describan qué sucede y por qué.
Los comentarios se pueden poner en cualquier lugar del guión. No afectan la ejecución, porque el motor simplemente los ignora.
Los comentarios de una línea comienzan con dos caracteres de barra diagonal //.
El resto de la línea es un comentario. Puede ocupar una línea completa propia o seguir una declaración.
Como aquí:
// Este comentario ocupa una línea propia.
alert('Hola');
alert('Mundo'); // Este comentario sigue a la declaración.
Los comentarios de varias líneas comienzan con una barra diagonal y un asterisco /* y terminan con un asterisco y una barra diagonal */.
/* Un ejemplo con dos mensajes.
Este es un comentario multilínea.
*/
alert('Hola');
alert('Mundo');
El contenido de los comentarios se ignora, por lo que si colocamos el código dentro de / * … * / no se ejecutará.
A veces resulta útil deshabilitar temporalmente una parte del código:
/* Comentando el código
alert('Hola');
*/
alert('Mundo');
Written by Tutor
Related View More
Procesamiento Básico de Datos con Python
Cómo elegir el stack de software adecuado para tu producto
Cómo crear un chatbot básico con Python
Crear un plugin para WordPress en PHP
Principios de Scripting en Bash
Herencia en Python – Simple, Múltiple y Multinivel
Clases y Objectos en Python
Tipos de Variables en Python