Formas de enlazar javascript

En línea: onclick estilo clase

El que vamos a usar es enlazar en un archivo externo:

Ponemos <script src=”nombre del [Link]”></>

Y trabajamos en otro archivo tipo el [Link]

Variable: archivos que guardamos en espacio de memoria

Tipos de datos:

String = ”cadena de texto”

Number = #

Booleano = true or false

Acsos especiales: undefined ( en el programa esta pero todavía no tiene valor porque no se lo
hemos asignado), null y nan

Var, let y const: distintas maneras de nombrar las variables

Ej: var numero = 15

O: let numero = 15, let tiene menos alcance

Const es una constante, no pueden cambiar su valor

Scope es el alcance de cada variable

Multiples variables

Ej: let numero, numero2 , numero3;

Null nos dice que la variable esta vacia

Que tiene valor nulo digamos (esto es en JS)

Nan es la expresión not a number, cuando le damos por ejemplo a la maquina para que
multiplique dos numeors y pongo un numero y un texto por ej

Prompt()

Y la respuesta se guarda en las variables

Operadores aritméticos:

Toman valores numéricos

Operadores de asignación:

Asigna un valor al operando al de la izquierda basado en el de la derecha

Por ejemplo +=, -=, etc. **= es la potencia

Concatenación:

Unir dos textos como si sumáramos dos números

Operadores de comparación:

== le pregunta si es igual

!= le pregunta si es distinto

Operadores lógicos:

And (&&), si las dos condiciones se cumplen, me devuelve true

Or (||), si una de las dos condiciones se cumple me devuelve, true

Not (!), invierte el valor de la afirmación

Camel case:

La palabra 1 va en minúscula, pero ya la segunda la tengo que poner con capital letter al
pricnipio: holaComoEstas

Condicionales:

Nos permite validar algo (de lo más importante de programación)

If () {

alert(“hola”)

Si mi condición no se cumple utilizo los else if

Y si absolutamente nada se va a cumplir tengo que usar solo else {}

Capítulo 2:

Arrays o arreglos

En los arrays podemos guardar muchos datos en vez de uno como en las variables

Los agrupamos con corchetes

Arrays asociativos: se parecen al formato jason (?

Cuando llame al elemento me va a mostrar el dato que tiene asociado

Se ponen entre llaves y se separan solo con coma

Bucles e iteración:

Diferencia entre if y while

En el if primero chequeamos la condición, si se cumple ejecutamos y seguimos

En el while lo que hacemos es chequear, ejecutar, luego volver a chequear si se sigue

El do while es distinto, primero hago lo que quiero que se haga y después pregunto para
chequear la condición
Ej sumamos el número y después lo mostramos, luego pregunto

El break termina el bucle, después del while pongo un condicional ejecutándose un break;

El for es iguala l while pero es distintos tipos de bucles, a este le decimos “cuantas vueltas van a
dar” es determinado

Declaramos > iniciamos > iteramos(sumar)

Con el brak también puedo cortar el bucle for

Parecido al break es el continue, pero lo que hace esta iteración es salterase el dato que le
especifiques

For in nos devuelve la posición de cada elemento y of directamente nos muestra los elementos
de cada posición

El label nos permite a asociar un bucle con otras cosas

Funeciones:

Function -nombre de f-() {

Función a ejecutar

Una cosa es lo que la funcinon hace y otra cosa es lo que la función retorna (return)

Después de la acción le podemos dejar un return a la función para que se quede en pantalla
con un [Link]

Las funciones no son tal sin parámetros

Programación orientada a objetos:

La clase es la plantilla, la que crea los objetos. Luego los objetos son lo que se cre en la clase,
con ciertos “atributos” y demás características.

Class animal(porejemplo) {

Los métodos se crean dentro de la clase y te dice que acción hace el objeto

Características:

Abrstraccion: resumimos lo mayor posible entre los objetos, para resumir los métodos

Modularidad: trabajar por modulos

Encapsulamiento: encapsular datos para que el usuario no acceda tan fácil

Métodos estáticos, usa la herencia para llamar a la función O método

Set (setters), funcionan como propiedades

Get (getters)
Metodo de cadenas:

Antes de cualquier metodo tengo que poner cadena.{…}

Concat() junta dos o mas y retorna una nueva

startWith() se la cadena empieza con lo mismo de otra cadena, te tira booleanos

Lo mismo con endswith()

Includes() lo busca entre la cadena, no si empieza o termina

indexOf() nos dice en que posición se encuentra la palabra inlcuida, pero funciona igual que
includes. Acá si no lo encuentra en vez de false te devuelve un -1

Split(), divide la cadena como le pidamos

Substring lo que hace es mostrartnos lo que le digamos nosotros (_,_) donde arranca , donde
termina.

toLowerCase() para que deje todo en minúscula

toUperCase todo a mayúscula

toString lo convierte todo a cadena de texto

trim elimina espacios de la cadena

de esta salen trimEnd y trimStart

Metodos de array:

Primero tengo que tener un array, a partir de este aplico ciertos métodos

Pop() elimina el ultimo y lo muestra, shift() es lo mismo pero con el primero.

Push() agrega un elemento y después si se lo pide me lo vuelve a mostrar (llamando al array)

Reverse invierte el orden

Unshift agrega elementos al inicio

Sort ordena el array, en orden numerico o alfabetico, es decir lexicográfico

Métodos accesores, devuelven un nuevo array

Join, convierte todo en cadena de texto, la diferencia con to string podemos utilizar
separadores entre elementos

Slice te muestra lo que le digas (_ , _) el fin no se incluye

Filter es como un bucle, es método de repetición

Filter me crea otro array filtrando los elementos que yo ponga en la función

Objeto Math:

Métodos,

Sqrt() es la raíz cuadrada como ya sabemos

Max recibe solo números, todos los que quieras. Me devuelve el número más grande

Min hace lo opuesto

Random me devuelve un numero pseudo-aleatorio entre 0 y 1, como el random de proba

Raund redonde al numeor aleatorio al numero entero mas cercano

Floor nos redondea para abajo

Pero en todos estos aparece 0 y/o 100, se soluciona multiplicando el random por 99 y
sumándole 1 a floor.

Trunc te trunca en el entero, elimina los decimales, asi sea 9,9999 el numeor te tira 9

Consola:

Funciones de registro en consola,

Assert ya no es estándar

Clear limpia la consola, saca todo lo que haya

Error te muestra un mensaje de error

Table debe contener un array o un objeto y te devuelve una tabla

Warn te tira una advertencia, no errores.

Funciones de conteo,

Count, se utiliza como para saber cuantas veces se ejecuta algo

La consola es una herramienta del desarrollador, no del cliente

Group crea un nivel de grupo dentro de la consola, lo cierro con [Link]()

timeLog muestra el tiempo que esta ejecutándose alguna función

El DOM:

Nodo, cualquier etiqueta del cuerpo

Métodos de selección de elementos:

[Link](), se selecciona UN elemento por id. No hay que tener mas de uno
con id

[Link](), selecciona por objetos o elementos, no es recomendable

QuerySelector() , puedo seleccionar por el método que seleccione al elemento de html: clase,
id, o lo que sea

querySelectorAll()

Manipulación de atributos y etiquetas:

setAttribute(), manipulación de atributos

Atributos globales:

Contenteditable, puedo editar el contenido de un titulo(por ejemplo)

Dir indica la direccion del texto

Hidden oculta el texto o lo que se le marque

Title, contiene info del elemento al que pertenece, como cuando le pones el label a la imagen

Atributos de input:

Puedo poner un botón de submit por fuera del formulario y llamarlo con su id poniendo
form=”id”

Placeholder también lo puedo poner desde java

Para poner los agtributos uso: input.{…} = “ ”;

Required es que escribir ahí es obligatorio

Style modifica el estilo: [Link] (por ejemplo) = “#32b”

Clases, classlist y métodos de classlist

Hacemos cosas con las clases de los objetos

Add() agraga una clase  [Link] = (“ ”);

Item es para mostrar un valor de alguna clase

Contains te dice si existe la clase, te devuelve boleanos

Toggle lo que hace es, le das una clase. Si la clase esta la saca, si no está la agrega. Se lo puede
forzar

Replace cambia una clase por otra poniendo en el paréntesis separado por una coma

innerText y textContent nos devuelven el contenido del nodo o elemento pero no el contenido
html que está dentro

la diferencia que textContent no le da bola si se oculta la visibilidad del nodo

InnerHTML muestra las etiquetas HTML salvo que se le oculte la visibilidad. Aunque si se lo
muestra en alerta muestra toda la línea del nodo

Creación de elementos:

createElement(“LI”) todo en mayúscula

si a ese li le quiero poner algún texto adentro, lo que puedo hacer es usar un método de los
hijos o child:

[Link](acá adentro va una variable que contenga lo que yo le pida)

obtención y modificación de childs:

fisrtChild agarra el primer hijo del contenedor

lastChild, lo mismo con el último

firstElementChild, nos permite agarrar el primer nodo elemento, no el espacio como hace sin
poner el element

childNodes nos devuelve todos los nodos hijos

children son todos los nodos sin los espacios, solo etiquetas html

Métodos de Childs:

Con replaceChild puedo reemplazar algún hijo del contenedor

RemoveChild nos remueve el hijo que querramos

hasChildNodes es para ver si tiene hijos el elemento que ponga previamente:

Métodos de los padres:

ParentElement, le pregunta cual es el padre del elemento

Métodos de los sibilings (hermanos):

Los que están en el mismo rango o mismo nivel de tabulación digamos

[Link] muestra el que le sigue

[Link] muestra el elemento siguiente, salteándose el espacio de “texto”.