trisquel

Aprende JavaScript con ejemplos (I). Introducción.

1 Herramientas para compilar JavaScript

Para trabajar este tutorial hemos decidido utilizar una herramienta online. Las ventajas que ofrece son evidentes, podemos ejecutar y probar código desde cualquier dispositivo solamente teniendo acceso a Internet. Existen muchas herramientas en el mercado y nosotros nos hemos decantado por Codingground.

Herramienta para compilar javascript onlinePara compilar nuestros ejemplos javascript vamos a utilizar la herramienta online Codingground de Tutorialspoint. Esta herramienta no solo permite gestionar los distintos ficheros de nuestro proyecto sino que podemos descargar o agregar cualquier fichero que nos haga falta.

codinggroundjavascript

2 Por qué tienes que estudiar JavaScript

trisquel

Al igual que el trisquel o bandera de la isla de Man la cual tiene como emblema las tres piernas que significan para la cultura celta la evolución y el crecimiento, la programación web se asienta también sobre tres patas las cuales son:

  • El lenguaje JavaScript. Agrega el contenido dinámico.
  • El lenguaje HTML. Define el contenido.
  • El lenguaje CSS. Define la presentación.

2 JavaScript dentro del HTML y fuera del HTML

Podemos incluir JavaScript dentro de los archivos html o bien puede estar separado de los mismos en archivos con extensión js. Lo más limpio y eficaz es tener el código javascript fuera de los archivos html por las ventajas que ofrece. Un ejemplo de ambas posibilidades es el siguiente:

Ejemplo de JavaScript en ficheros js separados.archivo index.html:

<!DOCTYPE html>
<html>
<title>Myfpschool</title>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

archivo script.js:

function diAlgo()
{
alert("Myfpschool");
}
diAlgo();

Ejemplo de JavaScript con código dentro del HTML.

archivo index.html:

<!DOCTYPE html>
<html>
<title>Myfpschool</title>
<head>
<script>
function diAlgo()
{
alert("Myfpschool");
}
</script>
</head>
<body>

<script>
diAlgo();
</script>

</body>
</html>

Como puedes observar aunque el resultado es el mismo, la forma de distribuir el código HTML y JavaScript no. Nuestro consejo es que utilices archivos separados para HTML y JavaScript salvo que las líneas de código de este último sean mínimas y no vayan a ser modificadas prácticamente nunca.

Las ventajas de tener el JavaScript en un fichero separado son que las páginas cargarán mucho más rápido, se independiza el HTML del código y como podrás adivinar, el JavaScript será mucho más fácil de mantener.

2 Qué cosas podemos hacer con JavaScript

Modificar el código HTML

Prueba a copiar y ejecutar el siguiente código:


<!DOCTYPE html>
<html>
<body>

<h1>Modificando el código HTML</h1>

<p id=”prueba”>Modificando el contenido.</p>

<button type=”button”
onclick=”document.getElementById(‘prueba’).innerHTML = ‘CAMBIANDO el contenido!’”>
¡Dale!</button>

</body>
</html>

Ejercicio 1.1:
Como ejercicio se te propone crear un segundo botón que modifique el título “Modificando el contenido”.

Cambiar atributos HTML

Haz click sobre las letras anteriores para cambiarlas.

En el siguiente ejemplo vamos a modificar de forma dinámica el atributo src de un objeto tipo img en nuestro HTML. Copia el siguiente código y pégalo en codingground u otra herramienta para compilar html online y verás como funciona:

<!DOCTYPE html>
<html>
<body>

<h1>Cambio de imágenes con JavaScript</h1>

<img id=”myFPImage” onclick=”cambiaPic()” src=”http://myfpschool.com/wp-content/uploads/2016/06/myblack.jpeg” width=”100″ height=”180″>

<p>Haz click sobre las letras para cambiarlas.</p>

<script>
function cambiaPic() {
var image = document.getElementById(‘myFPImage’);
if (image.src.match(“green”)) {
image.src = “http://myfpschool.com/wp-content/uploads/2016/06/myblack.jpeg”;
} else {
image.src = “http://myfpschool.com/wp-content/uploads/2016/06/mygreen.jpeg”;
}
}
</script>

</body>
</html>

Ejercicio 1.2:
Como ejercicio se te propone crear una secuencia de imágenes con al menos 4 fotogramas. Según el usuario vaya haciendo clic sobre las imágenes la secuencia se irá reproduciendo.

Cambiar estilos CSS

Además de cambiar el contenido, podemos cambiar el estilo de los elementos de cualquier página HTML. Pulsa el siguiente botón y verás como se cambia el estilo de la etiqueta siguiente:

Aprende JavaScript con MyFPSchool!

Para ver cómo hemos hecho el truco anterior copia y pega el siguiente código en una herramienta que compile HTML y JavaScript:

<!DOCTYPE html>
<html>
<body>

<p id="mytxt">Aprende JavaScript con MyFPSchool!</p>

<button type="button" onclick="myFunction()">¡Dale!</button>

<script>
function myFunction() {
var x = document.getElementById("mytxt");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>

</body>
</html>

Ejercicio 1.3:
Realiza un test de 10 preguntas que tenga cada pregunta dos botones (verdadero y falso).
Dependiendo si el usuario hace click en verdadero o falso la frase se pone verde o roja.
Resumen
Nombre del artículo
Aprende JavaScript con ejemplos (I)
Autor
Descripción
Curso para aprender JavaScript con ejemplos.

2 thoughts on “Aprende JavaScript con ejemplos (I). Introducción.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>