Scribd
Upload
6 views

Java Script

Codigos javascript

Uploaded by

Sebastián Beltrán
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Java Script

Codigos javascript

Uploaded by

Sebastián Beltrán
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 44

Console.log() = Es para mostrar información en la consola.

+ = Es para concatenar texto y/o variables.


Bucle for: Es para repetir algo en tu código una cantidad específica de veces.
Bucle While: Es para repetir algo en tu código una cantidad de veces
desconocida, hasta que tu condición se cumpla.

variable++ = Incremento de 1 en 1
variable-- = Descender de 1 en 1
No usar nunca juntas en un código, ya que no tendrá fin el ciclo de
repeticiones.
Arreglos = Son listas (arrays en inglés)

variable.push() = Para agregar algo elementos al arreglo


variable.pop() = Para eliminar el último elemento del arreglo

Variable[número índice] = x = Es para cambiar el valor de un elemento del


arreglo por lo que quieras.
function nombre_funcion {} = Es donde se hace un código para luego llamar la
función y ahorrarse hacer más código.
return = retornar o devolver un valor
|| = es un “o” “or”. Si una u otra se cumple.

% = Saca el residuo de una división, lo que sobra.


Se suman los números 1,2,3,4,5 = 15

Ciclo for incrementando 1 en 1, 0,1,2,3,4 y luego multiplica cada uno por 3


A todos los que tengan residuo 0, se les cambiara por “par”. 0,1,2,3,4,5
Incrementa sumando x de 2 en 2, y como son 3 bucles, Eso quiere decir que 0
pasa a 2, 2 pasa a 4 y 4 a 6. 2,4,6. Los 3 bucles.
Objetos

Objetos con arreglo dentro

Arreglo con objetos dentro


Agregar campo a un objeto

Eliminar un campo de un objeto

Agregar una propiedad (lista) dentro de un objeto


Actualizar o editar un campo de un objeto

Agregar una función dentro de un objeto, no se especifican parámetros solo el


nombre
El uso de return necesita una variable para que se almacene el resultado de la
función creada
Para enlazar nuestro html a js
Funciones dentro de js para html
Seleccionar elemento, id o clase igual que en css. querySelector es mas
reciente que getElement, pero hacen lo mismo.

Se pueden mezclar igual que en css

document.querySelectorAll(".imagenEliminar"): Busca y selecciona todos los


elementos del documento que tienen la clase.
imagenes.forEach(): Recorre cada uno de los elementos en la lista imagenes.
imagenes.forEach(function(imagen): La función forEach itera sobre cada
elemento en imagenes y ejecuta una función para cada uno.
imagen.addEventListener("click", function(): Añade un evento de escucha
(event listener) al elemento actual de la lista. Este evento se activa
cuando se hace clic en la imagen. Asocia una función (el segundo
parámetro) con un evento específico (en este caso, "click") en el
elemento.
this.remove(): Dentro de la función de manejo del evento, la palabra clave this
se refiere al elemento al que se hizo clic. La función remove() elimina ese
elemento del
innerText es para cambiar o remplazar algo del html

Modificar atributos de htm en js, cambiar o remplazar ina imagen y la letra


cuando no carga

Value trae devuelta el valor de que tiene cualquier tipo de input, en este caso
la variable barra búsqueda. Solo se usa con los inputs.

Actualizar valores de los input:

Actualizar o cambiar la imagen por otra, solo se le cambia la ruta de la imagen

Textcontent trae todo lo que hay incluyendo los espacios


Inner text actualizar contenido

innerHTML: extrae en formato string lo que hay en una variable

Agregar elementros al html con innerHTML

El remove elimina elementos del html, pero siguen estando almacenados en la


variable o en el código html

querySelector busca un elemento también de una variable que tenga más


elementos, si se llaman igual trae el primero

Closest es para subir un nivel o escalon, ir volviendo atrás. Es cuando pasas de


algo interno a algo externo
Agregar función a un botón, en el html debes poner la acción en este caso
onclick se ejecuta cuando se da click. Onclick=”nombrefuncion(this)” la
función debe ir en el js. Esta es una opción sencilla para no agregar en js
la propiedad addEventListener

La función alert es para desplegar un cuadro de dialogo en pantalla, en este se


activa haciendo clic. This va en el elemento de html y (elemento) en la
función de js

Una función de js se puede enlazar a distintos elementos a la vez del html,


ósea reutilizar la función. En este caso son dos funciones. Onmouseover
cuando pasa por arriba y onmouseout cuando sales con el maus del
elemento.

Son dos funciones, cambiar el color al pasar por encima y volver a su color
original cuando salgas con el maus del elemento, el color para cambiar
esta definido en una clase dentro del css llamada extra. Add agregar y
remove eliminar.
Ahora solo desde js, eliminar todos los elementos que están dentro de una
clase al hacer click. Se usa cuando tenemos muchos elementos en la
pagina

Esto hace lo mismo, pero es con menos elemento.


Etiqueta <a va en las palabras que tienen links de redirección

Dentro del js para agregar divs o código html dentro de una función hay que
poner estas comillas ´´
La función forEach para recorrer los elementos dentro de un arreglo, imprime
los todos los nombres y el índice (numero), nom es nombre de la
variable.

Función map es para modificar un arreglo su estructura, y split es para


modificar strings dentro de un arreglo donde los separamos por un
espacio en blanco como parámetro de separación. Separo el nombre
completo en dos, donde el nombre está en índice 1 y el apellido en el 2
para que queden dentro de un objeto. Return obj está devolviéndolo a la
variable personas.

find encuentra un elemento dentro de un objeto u arreglo, devuelve el primero


que coincida, si no lo encuentra devuelve undefinid. El resultado no lo
genera en un arreglo.
filter encuentra todas las coincidencias que deseas filtrar dentro de un arreglo,
el resultado lo genera en un arreglo, si no los encuentra trae el arreglo
vacío.

Ciclo alterno similar al forEach, se alamcena en una variable y recorre y se


imprime. ESTO ES PARA ARREGLO.

For in dentro de un objeto, itera sobre las propiedades del objeto para mostrar
cada propiedad y su valor en la consola. FOR IN ES PARA OBJETOS.
Apis: https://github.com/public-apis/public-apis
En esta Api nos piden solo un numero para solicitar una cantidad de imágenes
aleatorias de perritos, máximo 50.

Al estar en un formulario (form) y si quieres agregar un evento dentro de un


elemento o botón, hay que poner onsubmit=”variable(evento)” o puede ser
(this) si se quiere hacer referencia al form, pero en este caso es al DOM
Método preventDefault previene la acción por defecto de un evento, en este
caso era recargar la pagina cuando se hacía click en un botón.
Extraemos el valor del input en una variable, para anexarla al url del api, donde
el numero es la cantidad de imágenes que se le deben solicitar a la api.

Async function es para decir que es una función asíncrona


El await espera para luego ejecutar la siguiente línea de código, para que la
consola al ejecutar el código no se adelante.

Datos son todos los datos de la respuesta, y message es el arreglo donde están
almacenadas las imágenes de la respuesta. Muestra las imágenes que se
solicitan en la respuesta.
$ es para mostrar el valor que esta dentro de una variable

Resultados.innerHTML es para limpiar los resultados cada vez que se ingrese


otra respuesta, y no tener que estar recargando la pagina para que se
borre la ultima búsqueda.
Le asignamos una clase a las imágenes para editarlas en css para aplicarles
estilos, tamaño.

Le agregamos estilo a las imágenes y al contenedor de las imágenes. Aling-


items flex end para que no alargue las imágenes.

Card y oculto son dos clases separadas, oculto es para ocultar el elemento en
css.
Onsubmit event para actualizar información dentro de un ventana de un
formulario

Función modal para actualizar información con un formulario


Parte 2 función actualizar información para remplazar los inputs por los que
están actualmente. Lo mismo de arriba pero al revés.

Crear una clase en base a un objeto, es para copiar la estructura y no tener


que escribir de nuevo un objeto. Las clases empiezan con MAYUSCULA.
Hacemos otro objeto con new y la clase para copiar la estructura y solo
poner los valores.
Se le pueden agregar métodos de instancia, que son como funciones dentro de
una clase, para así llamarla fuera de la clase ya sea para imprimir o
actualizar información. Manipular objetos dada una clase.

You might also like