Manual Programador JS

Manual de programador
1.- Antes de comenzar tenemos que saber que JavaScript es el lenguaje de

programación usado para las páginas web, compatible con todos los navegadores
y que forma un estándar de desarrollo que ahora también se extiende a
dispositivos o programas de propósito general multiplataforma.
2.- Utilizando nuestros conocimientos sobre JavaScript, a continuación

desarrollaremos una pequeña aplicación con la ayuda de este lenguaje de
programación, llamada “Lista de tareas”, esta nos permitirá agregar tareas.
podemos agregar cualquier texto que deseemos, como por ejemplo Hola, damos
clic en Agregar tarea, y se agregará en la parte de abajo,
al pasar el mouse podemos seleccionar la tarea que queramos,
Y al dar clic sobre esta la eliminamos

Es una aplicación sencilla que casi no tiene validaciones, solo tiene 2, una es por
ejemplo si el usuario intenta aplanar el botón sin agregar ningún texto, por lo que
podemos concluir que no tiene validaciones muy complejas, Debemos aclarar que
esta aplicación no guarda los datos en una base de datos, ni algo por el estilo,
esta es una aplicación que sirve de practica para poder trabajar los valores de un
lado a otro, en este cado los valores los estamos pasando a una lista, ya
posteriormente le podremos agregar una base de datos, y conectarla con algún
otro lenguaje como PHP, para así tener una aplicación completamente funcional.
Entonces iniciemos a crear esta aplicación.
3.- Para iniciar comenzaremos construyendo nuestro código html y css los cuales
son los siguientes, los cuales explicaremos a continuación:
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxium-scale=1.0,

minium-scale=1.0">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="">
<title>Lista de tareas</title>
</head>
<body>
<div class="principal">
<div class="wrap">
<form class="formulario" action="">
<input type="text" id="tareaInput" placeholder="Agrega tu tarea.">
<input type="button" class="boton" id="btn-agregar" value="Agregar tarea">
</form>
</div>
</div>
<div class="tareas">
<div class="wrap">
<ul class="lista" id="lista">
<li><a href="#">ðŸ“Œ Terminar la tarea.</a></li>
<li><a href="#">ðŸ“Œ Hacer la cena.</a></li>
<li><a href="#">ðŸ“Œ Ir a reuniÃ³n de las 7:00pm</a></li>
</ul>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
Nota: Al código JavaScript le pondremos por nombre index.html

Código css
/*Importamos un archivo de fuentes*/
@import url("fuentes.css");
/*Señalamos que todo el documento tendrá las siguientes propiedades*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
/*El cuerpo tendrá un fondo gris claro con una fuente personal con un tamaño de 16px*/
body{
background: #FAFAFA;
font-family: century;
font: 16px;
/*.wrap es una clase, dento de wrap se encuentra todo el documentos, en esta parte señalaremos que con
margin auto, centraremos todo, con diseño responsive, adaptabe a pantallas*/
.wrap{
margin: auto;
max-width: 800px;
width: 90%;
}
/*.principal, en esta clase encapsulamos en una caja la parte del boton junto con la parte de el area text (Inputs)
*/
.principal{
box-shadow: 0px 3px 5px 0px #212121;
/*background: #125688;*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#59ADEA), to(#36CD96));
color: #FFF;
padding: 50px 0px;
width: 100%;
/*Se da color a las fuente, y centramos*/
.principal .formulario{
color: #212121;
text-align: center;
/* Le damos una sombra a la parte del área texto, con una fuente, un color, le damos la propiedad de width al
100% para que ocupe toda la caja del contenido*/
.principal .formulario input[type=text]{
margin-bottom: 20px;
padding: 10px;
width: 100%;
/*Esta propiedad solo se utilizara cuando se ejecute el código JavaScript*/
.principal .formulario input[type=text].error{
border: 2px solid #E62117;
color: red;
}
/*porpiedades al boton,*/
.principal .formulario .boton{
font-family: hpRg;
background: none;
border: 1px solid #FFF;
color: #FFF;
display: inline-block;
font-size: 16px;
padding: 15px;
cursor: pointer;
.principal .formulario .boton:hover{
border: 1px solid #2F73C3;
background: #1668c4
/*Se agrega estilos a las listas de tareas*/
.tareas .lista{
padding: 10px;
list-style: none;
.tareas .lista li{
border-bottom: 1px solid #B6B6B6;
.tareas .lista li a{
color: #212121;
display: block;
padding: 20px 0px;
text-decoration: none;
}
.tareas .lista li a:hover{
background: #B6B6B6;
text-decoration: line-through;
NOTA: A este archivo css le daremos por nombre “estilos.css”
@font-face{
src: url(../fonts/century/century_gothic.TTF);
@font-face{
font-family: hpRg;
src: url(../fonts/hp/HPSimplified_Rg.ttf);
NOTA: A este otro archivo css le daremos por nombre “fuentes.css”
En el código html tenemos básicamente lo que es el formulario el cual ya escribimos

anteriormente que es este:
<form class="formulario" action="">
</form>
La mayoría de todos los elementos de html, tienen clases, como por ejemplo la clase "wrap" que
es para centrar, la clase principal, que nos ayuda a distinguir nuestro contenido principal, el
formulario que tiene una clase formulario que nos ayuda a darle estilos con css, todas esas clases
las vamos a visualizar en los archivos css.
Nota: Hay algo que no se debe olvidar es que debemos tener en cuenta que en el archivo html, en
los input se le agrega un id para poder así trabajar con JavaScript, todos los id que se vean en html
se van a trabajar con JavaScript, y todas las clases se utilizarán para trabajas con css, tenemos el
input para agregar las tareas y el input para crear las tareas, y el input para aceptar y agregarlas.
Después allí mismo en el código html tenemos una lista ul de clase lista y de id lista y dentro del
ul encontramos elementos Li, dentro de estos elementos esta contenido un enlace no es
obligatorio tenerlos pero es conveniente tenerlos pues de esa forma es más fácil trabajar.
</ul>
Si vamos al código css encontramos el siguiente código:
.tareas .lista li a:hover{
background: #B6B6B6;
text-decoration: line-through;
Lo que hace este código es lo siguiente; si nos vamos a nuestra aplicación podemos ver que al
poner el cursor sobre la tarea, se subraya y si damos clic sobre el ítem este se borra, pues eso lo
hacemos con el estado hover, en donde declaramos que los elementos en estado hover van a
tener un text-decoration: line-through.
Por ultimo tenemos en nuestro código css tenemos en nuestro código el input[type=text] que es
aquel que nos ayuda a agregar la terea.
.principal .formulario input[type=text]{
margin-bottom: 20px;
padding: 10px;
width: 100%;
Y también tenemos una clase de error, esta clase la estaremos añadiendo al input, lo que hace es
poner el borde y el texto en color rojo, esto sucede cuando el usuario da clic en el botón agregar
tarea y no ha escrito nada.
.principal .formulario input[type=text].error{
border: 2px solid #E62117;
color: red;
4.- Una vez explicado los códigos html y css, comencemos a construir nuestro código js. Como
podemos observar sin nuestro código js, en nuestra aplicación al momento de ingresar la tarea no
pasa nada, como ya se había dicho eso sucede porque no se tiene el código JavaScript.
Se debe tener en cuenta que los archivos de estilos deben estar correctamente enlazados, para
poder ver el resultado, en este caso los archivos de estilos se tiene dentro de la carpeta css y los
archivos js, se tienen almacenados dentro de la carpeta js.
Entonces comencemos:
4.1.- Primero que nada escribiremos la función que es utilizada para proteger las funciones y el
código
(function(){
}());
4.2.-Despues procederemos a crear unas variables que son importantes y que se estarán
utilizando en el código, agregaremos un comentario que diga variables, y luego agregaremos las
primeras variables, una de ellas es:
var lista = document.getElementById("lista"),
Que en este caso queremos accesar a la variable lista que tenemos en nuestro documento html
delimitado por el elemento <ul> como tenemos un id lo aprovechamos y trabajaremos con el id
“lista” al final después que escribimos esa línea de código, ponemos una coma porque, seguiremos
escribiendo variables.
</ul>
Posteriormente agregaremos:
tareaInput = document.getElementById("tareaInput"),
Este es otro id que tenemos justamente en el input de tipo texto en donde el usuario escribirá su
tarea
Nota: Revisa que tu código lo escribas correctamente.
Posteriormente se agregara una variable más para el botón y para ello agregaremos el siguiente
código:
btnNuevaTarea = document.getElementById("btn-agregar");
Todo este código de la variable pertenece a este código del botón que tenemos en html que es el
siguiente:
De momento solo trabajaremos con estas variables, es importante que trabajemos con la consola
abierta la mayoría del tiempo, está la podemos abrir presionando la tecla F12 en Chrome, esta
nos ayudara a detectar errores al momento de programar.
5.- Posteriormente procederemos a agregar los eventos que son aquellos que van a ejecutar las
acciones, que son las funciones, ahora agregaremos un comentario que diga funciones y otro que
diga elementos, pero por ahora trabajaremos con elementos y más tarde hablaremos de la
funciones, bueno primero que nada lo que deseamos hacer es que cuando el usuario de clic al
botón el contenido de arriba, lo pase al contenido de la lista.
Para hacer eso tendremos que agregar un evento al botón, para ello agregaremos el siguiente
código:
btnNuevaTarea.addEventListener("click", agregarTarea);
Para no confundirnos le antepondremos al código el comentario agregar tarea para no

confundirnos, porque es lo que hace.
5.1 Entonces se le agrega btnNuevaTarea, porque ese es el nombre del botón, en este caso el
listener es de tipo clic, porque queremos que cuando el usuario de un clic, vamos a ejecutar la
función tarea, vamos a agregar la función agregartarea debajo del comentario funciónes, solo la
vamos a declarar y colocamos el siguiente código, de momento la dejaremos en blanco.
var agregarTarea = function(){} ;
Posteriormente agregaremos otro comentario que dice comprobación de los input, lo que hará
este elemento es que cuando el usuario de clic en el botón agregar tarea el input no este vacío y
ese input está vacío, marcara la clase error de la cual ya hemos hablado. Entonces lo que se
quiere hacer es que cuando marca esa clase error, el usuario de clic en el input y desaparezca el
error,
Entonces para eso agregaremos el siguiente código:
tareaInput.addEventListener("click", comprobarInput);
Lo que se hizo fue crear nuevamente la tareaInput y se le agrego .addEventListener, este evento
era de tipo clic , se ejecutó una función llamada comprobarInput, y la procederemos a declarar en
la parte de arriba en el comentario funciones:
var comprobarInput = function(){ };
Ya tenemos 2 eventos, pero eso no es todo a un faltan eventos, como podemos observar en el
código html, ya se han especificado elementos como ejemplo dentro de la lista, para que el
usuario las pueda ver, entonces se tiene que agregar un evento a todos los inputs de la lista , por
ejemplo si ya se cargó la lista, conectándolos con una base de datos, entonces lo que se desea es
que al cargar la página, asigne un evento a cada uno de esos inputs, para que al presionarlo
ejecute una función y borre el elemento que fue cliqueados, entonces tenemos que recorrer
todos los elementos li de nuestra lista y a todos les vamos a agregar un event listener, les vamos a
agregar un evento, para ello ejecutaremos un ciclo, y en este vamos a ejecutar todos los
elementos y en cada uno de ellos les vamos agregando el evento, para ello agregaremos el
siguiente código:
for (var i = 0; i <= lista.children.length -1; i++) {
lista.children[i].addEventListener("click", eliminarTarea);
}
n
En donde diremos que la variable i=0, y sea menor o igual a la cantidad de elementos children que
hay en este caso la cantidad de elementos li que haya dentro de la lista, con .length vamos a
determinar cuántos elementos li son, le agregamos menos 1 para trabajar posterior mente pues
empieza a contar desde 0, después dentro de la expresión agregaremos el código en donde le
agregaremos a cada uno de los elementos de la lista un evento y para eso agregaremos el
siguiente código
lista.children[i].addEventListener("click", eliminarTarea);
Lo que declaramos fue cada uno de los elementos de la lista, declaramos que podemos acceder a
ellos declarando la letra i, decimos que a cada uno de ellos le agregamos el addEventListener y
que cada uno de ellos va a ser de tipo clic y que cuando el usuario de un clic, vamos a ejecutar la
función eliminar tarea.
No debemos olvidar que le debemos de anteponer a nuestro código un comentario que diga lo
que hace estas líneas de código, en este caso le antepondremos “Parte para eliminar los
elementos cliqueados de la lista”
Y ya por ultimo crearemos la función de eliminar tarea, para ello escribiremos el siguiente código:
var eliminarTarea = function(){};

Manual Programador JS

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Programador JS

Cargado por

Copyright:

Formatos disponibles

Manual de programador

1.- Antes de comenzar tenemos que saber que JavaScript es el lenguaje de

2.- Utilizando nuestros conocimientos sobre JavaScript, a continuación

Y al dar clic sobre esta la eliminamos

Entonces iniciemos a crear esta aplicación.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxium-scale=1.0,

<link rel="stylesheet" href="css/estilos.css">

<link rel="stylesheet" href="">

<form class="formulario" action="">

<input type="text" id="tareaInput" placeholder="Agrega tu tarea.">

<input type="button" class="boton" id="btn-agregar" value="Agregar tarea">

<ul class="lista" id="lista">

<li><a href="#">ðŸ“Œ Terminar la tarea.</a></li>

<li><a href="#">ðŸ“Œ Hacer la cena.</a></li>

<li><a href="#">ðŸ“Œ Ir a reuniÃ³n de las 7:00pm</a></li>

Nota: Al código JavaScript le pondremos por nombre index.html

/*Importamos un archivo de fuentes*/

/*Señalamos que todo el documento tendrá las siguientes propiedades*/

box-shadow: 0px 3px 5px 0px #212121;

background-image: -webkit-gradient(linear, left top, left bottom, from(#59ADEA), to(#36CD96));

padding: 50px 0px;

/*Se da color a las fuente, y centramos*/

.principal .formulario input[type=text]{

box-shadow: 0px 3px 5px 0px #212121;

/*Esta propiedad solo se utilizara cuando se ejecute el código JavaScript*/

.principal .formulario input[type=text].error{

border: 2px solid #E62117;

.principal .formulario .boton{

border: 1px solid #FFF;

.principal .formulario .boton:hover{

border: 1px solid #2F73C3;

/*Se agrega estilos a las listas de tareas*/

.tareas .lista li{

border-bottom: 1px solid #B6B6B6;

padding: 20px 0px;

NOTA: A este archivo css le daremos por nombre “estilos.css”

NOTA: A este otro archivo css le daremos por nombre “fuentes.css”

En el código html tenemos básicamente lo que es el formulario el cual ya escribimos

<form class="formulario" action="">

<input type="text" id="tareaInput" placeholder="Agrega tu tarea.">

<input type="button" class="boton" id="btn-agregar" value="Agregar tarea">

<input type="text" id="tareaInput" placeholder="Agrega tu tarea.">

<ul class="lista" id="lista">

<li><a href="#">ðŸ“Œ Terminar la tarea.</a></li>

<li><a href="#">ðŸ“Œ Hacer la cena.</a></li>

<li><a href="#">ðŸ“Œ Ir a reuniÃ³n de las 7:00pm</a></li>

Si vamos al código css encontramos el siguiente código:

.tareas .lista li a:hover{

.principal .formulario input[type=text]{

box-shadow: 0px 3px 5px 0px #212121;

border: 2px solid #E62117;

var lista = document.getElementById("lista"),

<ul class="lista" id="lista">

<li><a href="#">ðŸ“Œ Terminar la tarea.</a></li>

<li><a href="#">ðŸ“Œ Hacer la cena.</a></li>

<li><a href="#">ðŸ“Œ Ir a reuniÃ³n de las 7:00pm</a></li>

<input type="text" id="tareaInput" placeholder="Agrega tu tarea.">

Nota: Revisa que tu código lo escribas correctamente.

Para no confundirnos le antepondremos al código el comentario agregar tarea para no

Entonces para eso agregaremos el siguiente código:

var comprobarInput = function(){ };

var eliminarTarea = function(){};

/Importamos un archivo de fuentes/

/Señalamos que todo el documento tendrá las siguientes propiedades/

/Se da color a las fuente, y centramos/

/Esta propiedad solo se utilizara cuando se ejecute el código JavaScript/

/Se agrega estilos a las listas de tareas/