Lic.

Alejandro Licon Programación WEB

JavaScript Elemental II

Objetivos
Tener un poco de experiencia escribiendo JavaScript, y conseguir al menos un entendimiento
básico de lo que supone escribir un programa en JavaScript.

Introducción Teórica

Prerrequisitos: Conocimiento básico de computación, HTML, CSS y qué es JavaScript.

Ahora que has aprendido algo acerca de la teoría de JavaScript y de lo que puedes hacer con
él, vamos a darte un curso rápido sobre las características básicas de JavaScript con un
tutorial completamente práctico. Aquí construirás paso a paso un juego sencillo de "Adivina el
número".

No esperes entender todo el código inmediatamente — por ahora sólo queremos presentarte
los conceptos de alto nivel, y darte una idea de cómo funciona JavaScript (y otros lenguajes de
programación). ¡Más adelante vas a volver ver estas características con mucho más detalle!

Nota: Muchas de las características que vas a ver en JavaScript son las mismas en otros
lenguajes de programación — funciones, bucles, etc. La sintaxis del código es diferente,
pero los conceptos siguen siendo básicamente los mismos.

Pensando como un programador

Una de las cosas más difíciles de aprender en programación no es la sintaxis que necesitas
aprender sino cómo aplicarla para resolver problemas del mundo real. Debes empezar a
pensar como programador — esto generalmente implica buscar descripciones de qué necesita
hacer tu programa, determinar qué características de código necesitas para alcanzar esas
cosas y cómo hacer que funcionen juntas.

1
Lic. Alejandro Licon Programación WEB

Ésto implica una combinación de trabajo duro, experiencia con la sintáxis de programación, y
práctica - más un poquito de creatividad. Mientras más programes, más habilidoso serás
haciéndolo. No te podemos prometer que vas a desarrollar un "cerebro de programador" en cinco
minutos, pero, a lo largo de este curso, te vamos a dar muchas oportunidades de practicar el
pensar como un programador.

Teniendo ésto presente, veamos el ejemplo que vamos a construir y revisemos el proceso
general de seccionarlo y vivirlo en tareas tangibles.

El elemento HTML Script (<script>)

Se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML
o XHTML.
Los scripts sin atributo async o defer, así como las secuencias de comandos en línea, son
interpretados y ejecutados inmediatamente, antes de que el navegador continúe procesando la
página.

Content categories Metadata content, Flow content, Phrasing content.

Contenido permitido Script dinámico tal como text/javascript.

Omision de etiquetas None, both the starting and ending tag are mandatory.

Elementos padre Cualquier elemento que acepte metadata content, o cualquier elemento
permitidos que acepte phrasing content.

Interfaz DOM HTMLScriptElement

Atributos
Este elemento contiene los atributos globales.
async HTML5
Establece este atributo booleano para indicar al navegador, si es posible, ejecutar el código
asincrónicamente. Esto no afecta a los scripts escritos dentro de la etiqueta (es decir a aquellos
que no tienen el atributo src).
Ver Browser compatibility para notas acerca de compatibilidad. Ver tambien Scripts asincrónicos
para asm.js.
integrity
Contiene información de metadatos que es usada por el user agent del navegador para verificar
el recurso captado fue entregado libre de manipulación inesperada. Ver Subresource Integrity.
src
Este atributo especifica la URI del script externo; este puede ser usado como alternativa a scripts
embebidos directamente en el documento. Si el script tiene el atributo src, no debería tener código
dentro de la etiqueta.

type
Este atributo identifica el lenguaje de scripting en que está escrito el código embebido dentro de
la etiqueta script, o referenciada utilizando el atributo src. Los valores posibles están especificados
como un MIME type (tipo MIME).
Algunos ejemplos de tipos MIME que pueden ser utilizados
son: text/javascript, text/ecmascript, application/javascript,
y application/ecmascript. Si el atributo se encuentra ausente, el valor por defecto será un script
JavaScript.

2
Lic. Alejandro Licon Programación WEB

Si el tipo MIME especificado no es un tipo JavaScript, el contenido embebido dentro de la etiqueta

script es tratado como un bloque de datos que no será procesado por el navegador.

Si el tipo especificado es module, el código es tratado como un módulo JavaScript . Ver ES6 in
Depth: Modules.
Nota: en Firefox puedes usar características avanzadas tales como let statements y otras
características de la última versión de JS, usando type=application/javascript;version=1.8 . Ten
cuidado!, esto no es una característica estándar, es decir, probablemente genere conflictos con
otros navegadores, en particular aquellos basados en Chromium.
text
Este atributo actúa como el atributo textContent, establece el texto contenido del elemento. Pero a
diferencia de textContent, este atributo se evalúa como ejecutable luego de ser insertado como
nodo en el DOM.
language
Este atributo actúa como el atributo type, identifica el tipo de lenguaje que se utiliza. A diferencia
del atributo type, los posibles valores de este atributo nunca fueron estandarizados. El
atributo type debe ser utilizado en lugar de language.
defer
Este atributo establece si el script debe ser ejecutado luego de que el documento entero sea
analizado. Dado que esta función aún no fue implementada por todos los navegadores relevantes,
los autores no deberían asumir que el script realmente será ejecutado luego de la carga y analisis
del documento. Desde Gecko 1.9.2 el atributo defer es ignorado en los scripts que no tienen el
atributo src. Sin embargo, en Gecko 1.9.1 incluso se difieren los scripts escritos dentro de la
etiqueta.

crossorigin
Elementos normales script pasan información mínima al window.onerror para scripts que no
pasan las revisiones del estándar CORS. Para permitir registrar errores en los sitios que usan
dominios separados para recursos estáticos, usar este atributo.