Bienvenido al curso de JavaScript para principiantes de MDN. precio mantenimiento pagina web este primer artículo vamos a conocer JavaScript desde un nivel muy general, contestando las preguntas ¿Qué es? y ¿Qué hace?, con el propósito de que te sientas a gusto al emplear JavaScript.
JavaScript es un lenguaje de programación que te deja efectuar actividades complejas en una página web — cada vez más una página web hace más cosas que sólo mostrar información estática — como mostrar actualizaciones de contenido en el instante, interactuar con mapas, animaciones gráficas 2D/3D etc. — puedes estar seguro que JavaScript está implicado. Es la tercera capa del pastel de los estándares en las tecnologías para la página web, 2 de las que son (y), hablaremos de ellas más adelante con más detalle en otra una parte de nuestra Área de Aprendizaje.
Las 3 capas se complementan una con la otra. Vamos a agregar un simple texto a la etiqueta como un ejemplo. Podemos utilizar HTML para dar estructura y propósito:
Agregamos CSS para hacer que se vea agradable:
y finalmente añadimos JavaScript para implementar comportamiento dinámico:
Da clic en el texto para poder ver qué sucede (también puedes hallar la demostración en GitHub) ve elo!
JavaScript puede hacer muchas cosas más - Vamos a explorar con más detalles.
El núcleo de JavaScript consiste en características comunes de programación que te dejan hacer cosas como:
Hay algo aun más emocionante, no obstante es la funcionalidad construida sobre el núcleo del lenguaje de JavaScript. Llamada
Interfaz de programación en aplicaciones -
Application Programming Interfaces(
API's) proveyendo superpoderes para utilizar en tú código JavaScript.
Los APIS son inserciones de líneas, aun bloques gigantes de código listos para emplear que dejan a un desarrollador incorporarlo a programas que de cualquier otra forma podría ser difícil o bien aun imposible de finalizar. Así como las herramientas para edificar una casa, es exactamente lo mismo para las cosas de programación – Es mucho más fácil tomar los paneles que ya estén cortados y atornillarlos para hacer un estante de libros, en tanto que es más trabajoso diseñarlo por ti mismo, ir y hallar la madera correcta, cortarla del tamaño adecuado y lijarla, buscar los tornillos del tamaño adecuado y acoplarla para hacer un anaquel de libros.
Generalmente los API's se dividen en 2 categorías:
Los Navegadores APIs (Browser APIs)son construidos dentro de tu buscador web, y son capaces de exponer información desde la cercanía en base al ambiente de tu computador, o bien hacer cosas complejas. Por ejemplo:
Nota: Muchos de los tutoriales anteriores no funcionan en motores de búsqueda viejos – cuando practicamos, es buena idea utilizar un navegador actualizado, como Firefox, Chrome, Edge u Opera para hacer marchar el código, estima que necesitarás usar elen más detalle cuando llegues a la una parte de entregar tu código desarrollado (Código real que clientes del servicio reales usaran).
APIs de Terceras personas,por determinado no son construidos dentro del navegador, y en general tienes que conseguir su código y también información de alguna una parte de la Web, por ejemplo:
Nota: Estas APIs son avanzadas, y en consecuencia en este módulo no serán explicadas, puedes hallar mucha más información sobre esto en nuestro.
¡Hay aun muchas más APIs! sin embargo, no te emociones muy rápido. Ya que no tendrás la capacidad de construir en tan sólo 24 horas de estar estudiando JavaScript el siguiente Fb, Instagram o Google Maps – Hay muchos conceptos básicos aún por ver. Y es por eso que estás aquí – ¡Así que sigamos adelante!
En este apartado, actualmente comenzaremos a ver unas cuantas líneas de código, y mientras que hacemos eso vamos explorando lo que actualmente está pasando cuando haces marchar tu código JavaScript en tu página Web.
Hagamos un breve recordatorio del historial de lo que ocurre cuando cargas una página web en tu navegador (primero charlamos acerca de
en nuestro artículo). Cuando cargas una página Web en tu navegador, tu código (HTML, CSS y JavaScript) es leído en un entorno de ejecución (pestaña del navegador). Esto es como una fábrica que coge la materia prima (Las líneas de código) y lo presenta como el producto final (la página Web).
El lenguaje JavaScript es ejecutado por el motor del navegador de JavaScript, entonces que el código HTML y CSS han sido juntados y congregados dentro de la página Web. Esto asegura que el estilo y la estructura de la página están en su sitio en el instante en que JavaScript empieza a ejecutarse.
Esto es algo buenísimo, algo muy común en el uso de JavaScript para modificar dinámicamente el código HTML y CSS, a fin de que la interfaz de usuario sea actualizada, utilizando
DOMo el modelo de objeto de documento (como se mencionó previamente). Si al cargar JavaScript e procurar hacerlo marchar antes que sea leído el código HTML y CSS, se verá perjudicado, ocurriendo errores de programación.
Cada pestaña del navegador se considera como una cubeta en un divido separado para hacer funcionar el código (en términos técnicos las cubetas son llamadas “ambientes de ejecución”) – quiere decir que en la mayoría de los casos los códigos en cada pestaña marchan completamente separados, y el código en una pestaña no puede afectar de forma directa el código de otra pestaña, o bien en otro navegador. Esta es buena medida de seguridad – si este no fuera el caso, entonces los piratas informáticos podrían estar modificando tu código para robar información de otro sitio web, y otras tantas cosas malas.
Nota: Existen formas para mandar código e información entre diferentes sitios web/pestañas de una manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.
Cuando el navegador halla un bloque de JavaScript, generalmente lo corre en orden, de arriba cara abajo. Esto significa que debes tener cuidado en qué orden pones las cosas. Por poner un ejemplo, regresemos al bloque de JavaScript que vimos en nuestro primer ejemplo:
Aquí escogemos un texto del párrafo (línea 1), entonces es adherido a un (oyente o escuchador) de acontecimientos (línea 3) entonces cuando el párrafo es cliqueado, el bloque de código
updateName()empieza a marchar (línea 5 – ocho). El código de bloque
updateName()(este género de código de bloque reusable son llamados “funciones”) interactúa con el usuario para preguntar un nuevo nombre, y después lo introduce dentro del párrafo para actualizar lo que se esta visualizando.
Si tú cambias el orden de las primeras dos líneas de código, no funcionaría – de hecho, conseguirás un error de retorno en la consola del desarrollador del navegador –
TypeError: para is undefined. Esto quiere decir que el objeto
parano existe todavía, entonces no podremos añadir un (oyente o bien escuchador) de acontecimientos.
Nota: Este es un fallo muy común – necesitas ser cauteloso en tanto que el objeto de referencia en tu código debe existir antes de procurar algo con él.
Quizás debiste oír sobre los términos
interpretadory el
compiladoren contexto de programación, JavaScript es un lenguaje de interpretación – el código se hace funcionar de arriba cara abajo y el resultado de leerlo de este modo hace que de manera inmediata responda. No debes transformar tu código en algo diferente antes de que el navegador lo haga por ti.
En otra mano los lenguajes compilados son transformados (compilado) antes de que sean leídos por la computadora. Por servirnos de un ejemplo C/C++ son lenguajes congregados para compilarlos para entonces ser leídos por la computadora.
Ambos accesos tienen diferentes ventajas, de los cuales no discutiremos en este punto.
Quizás también debiste percibir los términos
lado-del-servidory el código del
lado-del-cliente captar clientes potenciales >, especialmente en contexto de desarrollo web. El código del cliente del servicio es código que marcha en la computadora del usuario – en el momento en que una página web es visualizada, la página del código del cliente es descargada, para luego ser leída y mostrada en el navegador. En este módulo de JavaScript vamos a hablar explícitamente sobre el
lado-del-cliente.
Por otro lado el lado-del-servidor es leído por el servidor, entonces el resultado es descargado y mostrado en el navegador. Ejemplos del empleo popular del lenguaje web del lado-del-servidor incluye PHP, Python, Ruby y ASP.NET. ¡Y JavaScript! Este lenguaje también puede ser usado como un lenguaje de lado-del-servidor, por servirnos de un ejemplo en el popular ambiente de Node.js – puedes localizar más información sobre JavaScript del lado del servidor en nuestro tema.
La palabra
dinámicoes utilizada para describir ambos lados-del-cliente del servicio en JavaScript, y lenguajes del lado-del-servidor. Es referido a la habilidad para actualizar lo visualizado de una página/app para mostrar contenido diferente en diferentes circunstancias, requiriendo nuevo contenido a generar. Por ejemplo, subir ficheros desde una base de datos, donde el lado-del-cliente de JavaScript produce dinámicamente nuevo contenido dentro del navegador del cliente, por servirnos de un ejemplo, creando una nueva tabla en código HTML, insertando datos que son llamados desde un servidor propio, para entonces visualizarlo en la tabla de la página web y mostrárselo al usuario, El significado es un tanto diferente entre los 2 contextos, pero teniendo relación, y aprovechando el trabajo mutuo entre (lado-del-servidor y lado-del-cliente).
Una página web sin ninguna actualización de contenido dinámico es llamada como
estática– puesto que únicamente muestra el mismo contenido todo el tiempo.
JavaScript es aplicado a tu página en código HTML de una manera afín al CSS. Donde el CSS usa el elementopara aplicar hojas de estilos externas y la etiquetaes un factor para aplicar hojas de estilos de manera interna al HTML, JavaScript solamente necesita de un solo amigo en el mundo del HTML - que es el elemento. Aprendamos cómo funciona esto.
<script> // JavaScript goes here</script>
function createParagraph() var para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para);var buttons = document.querySelectorAll('button');for (var i = 0; i < buttons.length ; i++) buttons[i].addEventListener('click', createParagraph);
Nota: Si según lo que parece tu ejemplo no funciona, examina tu código pasito a pasito y asegúrate que todo lo hayas hecho bien, ¿verificaste si guardaste tu archivo con la extensión
.html? ¿Añadiste el tagjusto después del tag
</body>? ¿Introduciste el código JavaScript como se mostraba anteriormente?
JavaScript es sensitivo y exigente con mayúsculas y minúsculas, así que necesitas introducir la sintaxis exactamente como se muestra, de otra forma no funcionará.
Esto trabaja muy bien, pero, ¿qué pasa si queremos poner nuestro JavaScript en un archivo externo? Entonces exploremos esto ahora.
<script src="script.js"></script>
Nota: Puedes ver esta versión en GitHub comoy().
A veces puedes apreciar que te encontrases con ciertas líneas de JavaScript dentro de ficheros HTML. Es posible que se vean algo similar a esto:
Puedes procurar esta versión de nuestro demo abajo.
Este demo tiene la misma funcionalidad tanto como en las 2 secciones precedentes, excepto que el elementoincluye un controlador de línea
onclickpara hacer marchar el código cuando el botón en presionado.
Por favor no hagas esto, de otra manera.Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente – Deberías de incluir el atributo
onclick="createParagraph()"en cada botón que quieras para ser aplicado por JavaScript.
Usar los constructores de JavaScript deja seleccionar todos los botones utilizando una sola instrucción. El código que usamos arriba sirve para este propósito viéndose así:
Esto puede verse un poco más grande que el atributo
onclickpero esto funcionará para todos y cada uno de los botones sin importar lo más mínimo cuantos haya en la página, aun cuando sean añadidos o removidos. JavaScript no necesita ser alterado.
Nota: Intenta editar tu versión de
apply-javascript.htmly añade un poco más de botones en el archivo. Cuando vuelvas a cargar la página, deberías notar que todos y cada uno de los botones crean un párrafo cuando son cliqueados. ¿Estupendo no?
Hay una serie de problemas relacionados con conseguir que los scripts se carguen en el instante conveniente. Nada es tan simple como semeja! Un inconveniente común es que todo el HTML de una página se carga en el orden en que aparece. Si utiliza JavaScript para manipular elementos de la página (o más precisamente, el), su código no funcionará si el JavaScript es cargado y analizado ya antes que el código HTML al que está intentando manipular.
En los ejemplos de código anteriores, en los ejemplos internos y externos el JavaScript se carga y ejecuta en la cabecera del documento, antes de que se analice el cuerpo HTML. Esto podría causar un error, así que hemos utilizado algunas construcciones para evitarlo.
En el ejemplo interno, puede ver esta estructura alrededor del código:
Se trata de un receptor de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo que quiere decir que el cuerpo HTML está absolutamente cargado y analizado. El JavaScript en este bloque no se ejecutará hasta después de que se dispare ese evento, por consiguiente se evita el error (más adelante en el curso).
En el ejemplo externo, empleamos una función JavaScript más moderna para solucionar el problema, el atributo
async, que le señala al navegador que prosiga descargando el contenido HTML una vez que se haya alcanzado el elemento de la etiqueta
<script>.
En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará..
Nota: En el caso externo, no necesitábamos utilizar el acontecimiento
DOMContentLoadedporque el atributo
asyncnos solventaba el problema. No empleamos la solución de
asyncpara el ejemplo interno de JavaScript pues
asyncsólo funciona para scripts externos.
Una solución anticuada a este inconveniente solía ser poner su elemento de script justo en la parte inferior del cuerpo (por ejemplo, inmediatamente antes de la etiqueta
</body>), de forma que se cargara después de que todo el HTML haya sido analizado. El problema con esta solución (y la solución
DOMContentLoadedvista previamente) es que la carga/análisis del script está completamente bloqueada hasta el momento en que se haya cargado el DOM HTML. En sitios más grandes con mucho JavaScript, esto puede ocasionar un gran inconveniente de rendimiento, ralentizando su sitio. Esta es la razón por la que se agregó
asynca los navegadores!
En realidad hay dos maneras de eludir el problema del script de bloqueo —
asyncy
defer. Veamos la diferencia entre estos dos.
Los scripts async descargarán el script sin bloquear la renderización de la página y lo ejecutarán tan pronto como el script termine de descargarse. No se garantiza que los scripts se ejecutarán en un orden específico, sólo que no impedirán que se muestre el resto de la página. Es mejor utilizar
asynccuando los scripts de la página se ejecutan independientemente uno del otro y no dependen de ningún otro script de la página.
Por ejemplo, si tiene los próximos elementos de script:
No puede confiar en el orden en que se cargarán los scripts.
jquery.jspuede cargar ya antes o después de
script2.jsy
script3.jsy si este es el caso, cualquier función en esos scripts que dependa de
jqueryproducirá un fallo porque
jqueryno se definirá en el momento en que se ejecute el script.
Deferejecutará los scripts en el orden en que aparecen en la página y los ejecutará tan pronto como el script y el contenido sean descargados:
Todos los scripts con el atributo
deferse cargarán en el orden en que aparecen en la página. Así que en el segundo ejemplo, podemos estar seguros de que
jquery.jsse cargará ya antes que
script2.jsy
script3.jsy que
script2.jsse cargará antes que
script3.js.
Para resumir:
Así como en HTML y CSS, es posible redactar comentarios dentro de tu código de JavaScript que serán ignorados por el navegador, sencillamente existe para proveer instrucciones a tus colegas desarrolladores de como el código marcha (y para ti, por si retornas a tu código después de 6 meses y no recuerdas lo que hiciste). Los comentarios son muy útiles, deberías emplearlos más de manera frecuente, particularmente para grandes aplicaciones. He aquí 2 tipos:
// Soy un comentario
/* Yo tambíen soy un commentario*/
Entonces por poner un ejemplo, podemos anotar nuestro último demo de JavaScript con comentarios como:
Ahí vas, tus primeros pasos dentro del planeta de JavaScript, hemos empezado únicamente con teoría, para comenzar a entender por qué empleamos JavaScript, y qué tipo de cosas puedes utilizar con él. En el camino viste varios ejemplos de código y aprendiste cómo JavaScript encaja con el resto del código de tu página web, entre otras muchas cosas.
JavaScript es posible que se vea un poco desmoralizador de momento, pero deja de preocuparte – en este curso te vamos a llevar a través de pasos simples que harán que sigas adelante. En el siguiente artículo iremos, logrando un salto directo para edificar tus propios ejemplos en JavaScript.