Guías de Make it Real
Search…
Primeros pasos
Existen varias formas de empezar a trabajar con JavaScript en el navegador. Vamos a ver dos de ellas.
Codepen
La primera, y quizá la forma más fácil, es utilizar una herramienta en línea como Codepen. Ingresa a ese link y vas a ver una pantalla similar a la siguiente:
Codepen
Es posible que no sea exactamente igual (p.e. si la actualizaron) pero lo importante es que vas a tener 3 espacios para escribir el HTML, CSS y JavaScript respectivamente. En el espacio para el HTML omite las etiquetas
html, head y body, todo lo que escribas allí va a estar dentro del body que Codepen crea para ti.Desde un documento HTML
Otra forma de empezar a trabajar con JavaScript desde el navegador es crear un documento HTML y crear un tag
script. Puedes copiar la siguiente estructura en un archivo HTML para empezar:1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>Prueba de JavaScript</title>
7
</head>
8
<body>
9
10
<script>
11
// acá va el código que vamos a escribir
12
</script>
13
</body>
14
</html>
Copied!
O puedes crear un archivo con extensión
.js y referenciarlo desde el HTML antes de cerrar el body (que es una mejor práctica):1
<script src="app.js"></script>
Copied!
Nota: En este caso el archivo
app.js se debe encontrar en la misma carpeta que el archivo HTML para que funcione.Un ejemplo
Independiente de cómo quieras empezar a trabajar con JavaScript, vamos a escribir nuestro primer ejemplo.
1
<div></div>
Copied!
Escribe el siguiente código CSS (si creaste un documento HTML puedes hacerlo en la etiqueta
<style> dentro del <head>):1
div {
2
background-color: red;
3
height: 200px;
4
}
Copied!
El código JavaScript que debes incluir es el siguiente:
1
var div = document.querySelector("div");
2
div.addEventListener('click', function() {
3
this.style.background = 'yellow';
4
});
Copied!
En la primera línea del código JavaScript nos estamos enlazando al evento
click del <div>. De esa forma, cuando le hagan click, se va a ejecutar el código que está dentro de la función, que cambia el fondo a amarillo.Last modified 2yr ago
Copy link