¿Qué es internet?

Internet es un conjunto descentralizado de redes de comunicación interconectadas.

Una red permite a dos computadoras comunicarse.
Funciona como una red lógica única, de alcance mundial, aunque esté formada por
multitud de redes físicas heterogéneas.
Sobre esta red se han desarrollado múltiples servicios(aplicaciones que se comunican
con un fin determinado).
El servicio que más éxito ha tenido es la World Wide Web (WWW).

¿Qué es un protocolo de comunicación?

Un protocolo es un conjunto de reglas y procedimientos que deben respetarse para el

envío y la recepción de datos a través de una red.

¿Qué es la Web?

La Web es un conjunto de protocolos, estándares y tecnologías, basadas en internet,

diseñado originalmente para la consulta remota de información en archivos de
hipertexto.

En los comienzos de la Web:

Todos los sitios Web eran conjuntos de páginas Web en forma de archivo HTML.

Los sitios Web eran como libros pero con navegación mediante enlaces en vez de
navegación secuencial.

La edición de sitios Web se realizaba con herramientas similares a la edición de

documentos(se les denominaba páginas Web estáticas).

Nace la Web 2.0:

En 2004 Dougherty acuña el término Web 2.0. Con la Web 2.0, las páginas Web
dejaban de ser simples documentos online para convertirse en aplicaciones Web y
entonces cuando los usuarios toman el control de los contenidos.

Aplicaciones Web:

Las páginas Web actualmente suelen ser completas aplicaciones Web.

Una aplicación Web es aquella que los usuarios utilizan accediendo a un servidor Web
a través de internet mediante un navegador tienen la ventaja de ser independientes del
S.O, que son fáciles de actualizar y mantener.

¿Qué es una arquitectura?

Es un diseño a alto nivel de cómo va a trabajar un sistema. La arquitectura trata de
determinar componentes, roles y comunicación, a un nivel tanto lógico como fìsico.

¿Cómo funciona la Web?

Los sistemas Web nos proponen una arquitectura distribuida.

Los componentes están distribuidos en dos tipos de nodo: Clientes(muchos) y
servidores(uno, al menos a nivel lógico).

Cliente - Servidor

La Web responde a una arquitectura cliente-servidor que utiliza un protocolo de

pedido-respuesta(HTTP).

Un cliente hace un pedido, el servidor lo procesa y responde.

Protocolo HTTP: es el protocolo de comunicación.

¿Qué es HTTP?

Son las siglas de “HyperText Transfer Protocol”.

Es el nombre de un protocolo el cual nos permite realizar una petición de datos y
recursos.
Utiliza cabeceras.
Basado en el principio cliente-servidor.
Es stateless, no recuerda que página pidió cada cliente.

Métodos HTTP

HTTP define un conjunto de métodos de petición para indicar la acción que se desea
realizar para un recurso determinado. Cada uno de ellos implementan una semántica
diferente.

GET: Solicita un recurso.

POST: Crea un recurso.
PUT: Modifica un recurso.
DELETE: Elimina un recurso.

¿Cómo se desarrolla una Web?

Son al menos 5 lenguajes diferentes:

Interactúan entre sí.

Conviene mantenerlos separados.
Mantener cada uno en su tarea.
Se puede dividir el trabajo en partes.
Una página web es un sistema de software.

Páginas Web Estáticas

Son páginas en las que el navegador renderiza el HTML con estilos CSS e imágenes
pero sin JavaScript.
En estas páginas, cada vez que el usuario hace click en un enlace, el navegador
recarga por completo la página web.
Las primeras páginas web eran así y hoy todavía se siguen utilizando bastante: en
páginas personales, en páginas de documentación, etc.

Páginas Web Dinámicas

El cliente es dinámico porque las páginas incluyen código javascript que se ejecuta en
el navegador. Javascript puede usarse para:

Efectos gráficos.
Peticiones en segundo plano(AJAX).
Single Page Application.

Estándares Web

Existen estándares para indicar cómo es cada una de las tecnologías más utilizadas
en los navegadores web(HTML,CSS, JavaScript). Intentan que la web sea compatible
con cualquier dispositivo.
Aún se usan otras tecnologías no estándar.

HTML

Proporciona la información estructurada en secciones, párrafos, títulos, imagenes, etc.

La versión actual es HTML5, la mayoría de los navegadores implementan gran parte
de la especificación

CSS

Proporciona la distribución de los elementos y su estilo(colores, tipos de letra, fondos,

efectos) . La versión actual es CSS3. la mayoría de los navegadores incorporan gran
parte de las especificaciones. .

JavaScript
Con javascript se puede modificar la página y ejecutar código cuando se interactúa
con ella. Hay ligeras diferencias en la implementación de JS de los navegadores,
aunque actualmente todos son bastante compatibles entre sí.

Responsive: ¿Qué es el diseño responsive?

Es una técnica de diseño web que busca la correcta visualización de una misma
página en distintos dispositivos.

Cambio de dimensiones.
Distribución dinámica de los elementos.

Media queries

Es un recurso de CSS que permite asignar diferentes estilos para distintos tamaños y
resoluciones de pantalla

Actúan como un if de CSS.

Flexbox

Fue diseñado como un modelo unidimensional de layout.

Mejora las capacidades de alineación.

Grid

Sistema de rejillas en dos dimensiones.

Es el estándar y compatible con todos los navegadores.
Control detallado de la posición y dimensiones de cada elemento.

Framework

Es un esqueleto para el desarrollo de una aplicación.

Ventajas

Pocos problemas de compatibilidad.

Aceleramos tiempo de desarrollo.
Debug, fácil.

Desventajas

Poca flexibilidad, páginas similares.

Tiempo de aprendizaje.
Agregar cosas de cero.

Framework CSS: Bootstrap

Liberado por twitter, muy popular.

Mobile first.

Ventajas

Es fácil y rápido de usar.

HTML5 y CSS3
Soporte múltiple de navegadores.
Grid system.

Desventajas

Adaptar tu diseño a grid 12 columnas.

Complicado cambiar de versión.
Sitios parecidos.

Estructura semántica HTML

En el contexto de la Web, la semántica, es la práctica de darle al contenido de una

pagina Sentido y Estructura.

Beneficios de usar código semántico:

● Darle a computadoras, buscadores, y otros dispositivos la capacidad de leer y
entender páginas web.
Además el código semántico es:
● Fácil de manejar.
● Fácil de trabajar con él.
● Comprender para que esta cada porción de contenido.
AJAX

Asynchronous Javascript And XML.

No es un lenguaje o tecnología.

Es una técnica que combina un set de tecnologías conocidas, para hacer las páginas
web más rápidas y amigables

Es una técnica del lado del cliente.

¿Entonces qué es AJAX?

Técnica de carga asíncrona de contenido dinámico y datos del server.

Permite cambios dinámicos del lado del cliente.

Ventajas

Más dinámica/interactiva
Más eficiente para navegar
Menos tráfico
Más rápido.

Desventaja

Hay que aprenderlo

Mayor complejidad
Puede fallar si espera una respuesta y recibe otra.

Estilos de AJAX
Partial Render de páginas: Carga un fragmento de HTML y mostrarlo en un DIV.

Servicio REST: Cargar un objeto JSON y procesarlo del lado del cliente con
Javascript.

HTML5

HTML5 elimina bastantes restricciones y limitaciones.

Es más ligero al ser más sencillo y simple el código.

Introduce:

Contenido Semántico

Elementos multimedia: video, audio.

Elementos gráficos: svg, canvas.

CSS3

Es el último standard para CSS.

Expande funcionalidad para bordes, efectos de texto, imágenes de fondo, colores y

degradados, transparencias, fuentes de texto.

También incorpora la posibilidad de animar.

HTML (Hyper Text Markup Language) fue creado para dar estructura y contenido.

HTML: Estructura y sintaxis

Estructura básica:

doctype
html
head
body

DOCTYPE: Es usado para darle al navegador que versión de HTML va a usar el

documento.

Siempre va al inicio del documento.

No es un tag de html.
En HTML5 es siempre el mismo <!DOCTYPE html>

HTML: Va seguido del doctype.

Indica el comienzo y fin del documento.
Es el elemento raíz (root).

<!DOCTYPE html>
<html>
…
…
</html>

HEAD: Es utilizado para colocar la metadata de la página.

El título del documento.
Parte no visible de la página.
Es usado para indicar el encoding que usa la página <meta charset=”UTF-8” />

Etiquetas dentro del head

<meta name=”description” “content=””> Descripción del contenido del sitio.

<meta name=”keywords” “content=””> Palabras claves del sitio.

<title></title> Título del documento.

BODY: Es utilizado para poner todo el contenido visible de la página web.

Puede haber solo uno por archivo html.

Etiquetas dentro de body

Buenas prácticas

Todos los tags se escriben en minúscula <body>, <p>, <head>

Escribir solo un elemento por línea.

Comentarios

No se muestran en el navegador
<!-- comentario -- >

Contenedores de texto - Párrafo

Los párrafos se definen con el tag <p></p>.

Son usados para escribir texto.
No usar <br> para separar párrafos.

Encabezados - Títulos

Se definen con los tags <h1> hasta <h6>

Hay que usarlo solo para títulos.
Hay que evitar saltar niveles siempre empezar con h1, seguir con h2, etc.

<h1>Titulo 1</h1>
<h2>Titulo 2</h2>

Elementos HTML - Imágenes

Se definen con el tag <img />

Sirve para insertar una imagen.
Atributos

src: En este atributo va el link de la imagen.

alt: Este atributo se usa para poner un texto, por si la imagen no se puede mostrar.

Listas en HTML

Listas ordenadas

<ol>
<li>Elemento 1</li>
</ol>

Listas desordenadas

<ul>
<li>Elemento 1</li>
</ul>

Elementos HTML - DIV y SPAN

Son simples contenedores de HTML

Los DIV y SPAN como todos los elementos, tienen las propiedades class o id.

DIV

Es un elemento que define un bloque, generalmente para secciones largas del sitio.
Puede incluir varios elementos.
Nos ayuda a construir el layout y el diseño.

SPAN

Es un elemento “inline”.
Usado para agrupar texto, palabra o frases.
Su ancho depende del contenido que tengan.

Box model

Cada elemento en una página se representa mediante una caja rectangular.

CSS: Permite controlar el aspecto y ubicación de las cajas.

HTML: Todos los elementos HTML están presentes como cajas.

Elementos HTML - Hyperlink

Links: Los links sirven para transportarse a otro sitio.

Se define con el tag <a>

Atributos

El atributo más importante del tag <a> es el href, este atributo indica el destino del link
<a href=”www,google.com.ar”>Ir a google</a>

Otro atributo es target: especifica donde se va a abrir el link.

_blank: Abre en una nueva ventana.

_parent: Abre la ventana en el frame padre.
_self: Es el default (como no ponerlo) abre en la misma página.

Elementos HTML - Tablas

Las tablas se definen con el tag <table>

Las tablas se dividen en:

Filas con el tag <tr>

Celdas con el tag <td>

Dentro del tag <td> se puede colocar texto, imágenes, etc.

Podemos indicar que una fila es el encabezado de la tabla <thead>

<table>
<thead>
<tr>
<th> Mes </th>
<th> Ahorro </th>
</tr>
</thead>
</table>

Elementos HTML - Forms

Son usados para pasar información al servidor

Se utiliza el tag <form> para definirlo.

Dentro de ese tag se pueden tener diferentes tags <input>

Texto, password, checkbox, radio, botones.

Todos los input utilizan el mismo tag <input>

El atributo type es el que hace que se diferencien.

Cada tipo de input puede tener algún atributo especial:

Por ejemplo: checkbox o radio button, el atributo checked.

HTML5 - Figure & Figcaption

El elemento HTML <figure> representa contenido independiente, a menudo con un

título.Si bien se relaciona con el flujo principal, su posición es independiente de éste.
Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de
código, o un esquema al que se hace referencia en el texto principal.

<figure>
<figcaption>
</figcaption> Descripción/pie de imagen.
</figure> Insertar imágenes en una noticia

HTML5 - Video

Etiquetas <video> </video>

Atributos

src
autoplay
controls
loop
poster
CSS(Cascading Style Sheets) es un lenguaje de presentación creado para dar estilo al
contenido.

Términos

Selector: Determina el estilo que se va a aplicar a un elemento. Los selectores están

antes de cualquier {..}

Propiedades: El estilo que se aplica puede ser una o múltiples propiedades que están
contenidas dentro de {...} y el texto seguido de : (dos puntos).

Valor: Define el comportamiento de la propiedad.

Es el valor que va después de los : (dos puntos) y antes del ; (punto y coma).

¿Cómo incluir una hoja de estilo CSS?

Hay 3 formas de hacerlo:

Hoja de estilos externa.

Hoja de estilos interna .
Hoja de estilo en línea.

La mejor práctica para usar CSS es usar un archivo externo, referenciado en la

sección head.

Usando un archivo CSS externo, se pueden usar los mismos estilos en todo el sitio sin
replicar código.

<head>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
</head>

Selectores - Resumen
Selectores - Tipo

Son los más básicos

Funciona con los elementos sin ningún atributo especial

Hay que tratar de usarlos, cuando es posible, porque son más fáciles de manejar

Selectores - Clase

Permite ponerle el mismo estilo a una lista de elementos, agregándole el atributo

class.

Selectores - ID

Utilizados para un único elemento por página.

Selector universal

Se utiliza para seleccionar todo los elementos de la página.

El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML

*{
margin: 0;
padding: 0;
}

Selector - “name”
Se utiliza agregando el atributo name a la etiqueta HTML de la siguiente forma.

<p name=”mielemento”>Hola</p>

Y en CSS de la siguiente manera:

p[name=”mielemento”]{
color: blue;
}

Este atributo contiene 3 variantes:

^: Ej. p[name^=”mi”] Si la palabra “mi” esta al comienzo del atributo name se aplica el
estilo.

$: Ej. p[name$=”mi”] Si la palabra “mi” se encuentra en el final del atributo se aplica el

estilo.

Fondo - Imágenes

Se puede usar una imágen de fondo.

La propiedad es background-image.

Por defecto la imagen se repite para cubrir todo el fondo.

body {
background-image: url (imagen.jpg);
}
Para que la imagen no se repita, hay que usar una propiedad background-repeat.

body {
background-image: url(imagen.jpg);
background-repeat: no-repeat:
}

Propiedades de texto - Alineación

La propiedad text-align es usada para alinear horizontalmente, esta puede ser:

Centrado (text-align: center;)

Derecha (text-align: right;)
Izquierda (text-align: left;)
Justificado (text-align:justify;)

Propiedades de texto - Decorations

La propiedad text-decoration es usada para eliminar o agregar algunas decoraciones

al texto.

Mayormente se usa para eliminar el subrayado a los links text-decoration: none;

Propiedades de texto - Transform

Mayúscula (text-transform: uppercase;)

Minúscula (text-transform: lowercase;)
Capitalizado (text-transform: capitalize;)

Familia de fuentes

La familia de fuentes se indica con la propiedad font-family.

La font-family debe tener varias fuentes por si el browser no soporta alguna.

La primera fuente debe ser la que uno quiere, la última una genérica.

Si el nombre de la font tiene más de un nombre/palabra se escribe entre comillas. EJ

“Times new Roman”

Más de una font-family se especifica por comas.

Insertar una font en CSS

@font-face{
font-family: “Nombre a elección”;
src: url(‘ruta del archivo’);
}

Fuentes - Estilos

La propiedad font-style es usada mayoritariamente para especificar la cursiva

font-style: normal – El texto se muestra normal

font-style: italic – El texto se muestra en cursiva
font-style: oblique – Es como cursiva, pero menos soportado.

Propiedad - text-shadow

Se utiliza de la siguiente manera:

text-shadow: color horizontal(px/%) vertical(px/%) difuminación(px/%)

Sirve para darle sombra al texto.

Box Model

El concepto de “Box Model” dice que cada elemento en una página se representa
mediante una caja rectangular (contenedor).

CSS utiliza el modelo cajas/bloques que consta de 4 partes:

CONTENT
PADDING
BORDER
MARGIN

CONTENT: Alto (height) y Ancho (width) de un elemento.

PADDING: Usado para generar espaciado o margen interior transparente dentro de un

elemento.

BORDER: Se utiliza para bordear con una línea alrededor del elemento.

MARGIN: Usado para generar margen exterior transparente fuera de un elemento

(puede usarse para separar bloques)

Unidades de medida

CSS divide las unidades de medida en dos grupos:

Absolutas: pixeles (px)

Están completamente definidas, ya que su valor no depende de otro.

Ajustan tamaños fijos en los navegadores y pantallas.

Poca flexibilidad.
Sirve cuando conocemos tamaños de las salidas.

Relativas: porcentajes (%)

No están completamente definidas, ya que su valor siempre es dependiente respecto a

otro valor de referencia padre.

Permiten ajustes con cambios de tamaño de pantalla.

Mayor flexibilidad.

Medida “Auto”

La opción auto significa “expandir” o ajustar automáticamente un tamaño.

Para centrar un bloque

.bloque{
width: 100px;
margin: 0 auto;
}

Para hacer que ocupe el máximo espacio

.bloque{
width: auto;
}

Tipos de cajas (Type of boxes)

CSS puede definir la manera en la que los elementos de una página “encajan” uno con
otros. Estas maneras se pueden categorizar en:

Block
Inline

Se controlan con la propiedad display

Elemento {
display: block | inline;
}

Tipos de cajas - Block vs Inline

Block

Elemento-1{
 display: block;
}

Elemento-2{
display: block;
}

Ocupan el ancho total del elemento contenedor.

Las dimensiones son controlables.

Insertan un salto de línea en el flujo al terminar.

Inline

Elemento-1{
display: inline;
}

Elemento-2{
display: inline;
}

Otras propiedades de posicionamiento

display: inline-block; Es una combinación de los dos tipos anteriores.

display: none; Oculta el elemento de la página.

Flotar elementos

La propiedad CSS float permite a los elementos colocarse del lado izquierdo o derecho
de su contenedor.

Cuando se flotan elementos, van a ir hasta el borde de su contenedor padre, si no

tiene padre va a ir hasta el borde de página.

Cuando un elemento es flotado rompe con el flujo normal de la página, para volver al
flujo normal de la página siempre usar la propiedad “clear: both”.

Cuando un elemento tiene la propiedad clear, a partir de ese punto en adelante la

página vuelve al flujo normal.

Posicionamiento

La propiedad position sirve para posicionar un elemento dentro de la página.

Muy útil cuando queremos posicionar elementos fuera del flujo normal de la página.
Dependiendo de cual sea la propiedad que usemos, el elemento tomará una referencia
u otra para posicionarse.

Herencia

La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de

un elemento padre se transmiten a sus hijos.

¿Para que nos sirve entonces la herencia?

Escribir menos código.

Si ponemos la font-family al elemento HTML
● todos los elementos lo heredan
● no tengo que re escribirlo para que otros lo tengan
● más mantenible
● menos redundante (menos código repetido)
la redundancia lleva a inconsistencia

Selectores combinados

Se pueden combinar selecciones para hacerlas más específicas.

p.destacado{ color: red; }

Elige los párrafos que tengan la clase destacado.

Selectores anidados

Permite seleccionar elementos contenidos dentro de otros elementos. Así se puede

aumentar el nivel de detalle.

Selecciona los span que estén dentro de algún párrafo (incluye si está contenido
indirectamente).

p span{ color: blue;}

Combinaciones de selectores
Cascada

La cascada es el mecanismo que controla el resultado final cuando se aplican varias

declaraciones CSS contrapuestas al mismo elemento.

Hay tres conceptos principales que controlan el orden en el que se aplican las
declaraciones de CSS:

Importancia.
Especificidad.
Orden en el código fuente.

Importancia: La palabra reservada !important, sobreescribe cualquier cascada.

Especificidad: Más específico es el selector, entonces ese es el estilo que se aplica.

Lo que tiene clases es más específico que lo que no.

Si tiene la misma cantidad de clases, gana el que tiene más elementos para cumplir.

Orden en el código fuente: Si dos declaraciones afectan al mismo elemento, tienen

la misma importancia y la misma especificidad, la selección final es el orden de las
fuentes.
La declaración que se ve después en la hoja estilo “ganara” a las anteriores.

Pseudo clases

Las pseudo clases se utilizan para definir un estado o comportamiento especial de un

elemento.
Por ejemplo: Se puede asignar un estilo cuando se pasa con el mouse encima del
texto.

Sintaxis:
selector:pseudo-clase{
propiedad: valor;
}

Pseudo elementos

Un pseudo elemento de CSS es usado para dar un estilo a una parte de un elemento.
Pueden usarse combinados.

Por ejemplo: Se puede asignar un estilo a la primera letra de un elemento, o a la

primera línea.

Sintaxis:

selector::pseudo-elemento{
propiedad: valor;
}

CSS3 - Box-shadow

Se utiliza de la siguiente manera:

box-shadow: color horizontal(px/%) vertical(px/%) difuminación(px/%)

CSS3 - Degradado

degradado lineal [mozila firefox]

background: -moz-linear-gradient(posicion, color1, color2);

degradado lineal [Google Chrome]

background: -webkit-linear-gradient(posicion, color1, color2);

degradado lineal [Internet Explorer]

background: -ms-lineal-gradient(posicion, color1, color2);

CSS3 - RGBA

La A es de Alpha, le otorga transparencia al texto su utilización es:

color: rgba(red, green, blue, alpha)

El alpha va de 0 a 1.

CSS3 - Transform: rotate

(especificar qué navegador) transform: rotate(Xdeg);

X cantidad de grados a rotar.

Javascript - Origen

Se popularizó con DHTML (páginas dinámicas).

La Web dejó de ser un conjunto de markup documents, para tener comportamiento de

acuerdo al usuario.

DHTML = HTML + CSS + Javascript + DOM

¿Cómo incluir un javascript?

Conviene incluir un archivo javascript separado.

Se ejecuta su código en la línea donde se incluye.

<script type=”text/javascript” src=”js/main.js”><script>

Incluirlo al final del body, luego de que ya se cargo el html con todos sus elementos.

Se pueden agregar varios archivos JS.

Eventos

Un evento es algo que ocurre en el sistema, originado por el usuario u otra parte del
sistema y que se avisa al sistema.

Ejemplo:

El usuario hace click.

Se terminó de cargar la página.
Pasó un segundo desde que se terminó de procesar.

Las interfases gráficas suelen programarse orientada a eventos.

Funciones

“Una función es un conjunto de líneas de código que realizan una tarea específica y
puede retornar un valor. Las funciones pueden tomar parámetros que modifiquen su
funcionamiento”.

En javascript no hay diferencia entre funciones y procedimientos.

function saludar(){
alert(“Hola”);
}

Programación dirigida por eventos

Un programa dirigido por eventos sigue los siguientes pasos:

Comienza la ejecución del programa.

Se llevan a cabo las inicializaciones y demás código inicial.

El programa queda bloqueado “escuchando” hasta que se produzca algún evento.

Se definen:

Eventos (click, drag, hover, load, etc).

Funciones que se ejecutan en esos eventos.

Se llama el controlador de eventos.

En la programación dirigida por eventos no sabemos la secuencia exacta de ejecución,

porque se disparan diferentes códigos con diferentes acciones.

Programación secuencial: sabemos el flujo de la ejecución.

Variables

Una variable es un nombre que le damos a un valor que puede cambiar (o no).

El nombre no es el contenido.

Declaración de una variable

let nombre = “Pepe”;

Constantes

Son un nombre que le damos a un valor.

Nunca cambia con el tiempo.

Se usan para aumentar la legibilidad del programa.

Declaración de una constante

const cantDados = 2;

Naming

Variables se nombran con sustantivos.

Funciones comienzan con verbos.
En el caso de funciones booleanas, deben comenzar con “is”. EJ isValid()

Usar nombres descriptivos, nunca son demasiado largos.

Evitar nombres sin significado como “aux” y “temp”.

Use Strict

Es una buena práctica escribir al comenzar un archivo JS “use strict”;

Convierte en obligatoria la declaración de variables.

Restringe otros posibles errores de sintaxis.

Arbol HTML

Una manera de comprender las dependencias y relaciones entre elementos es

mediante un diagrama de árbol.

DOM

El document Object Model es una API (Application Programming Interface) para

documentos HTML y XML.

Representación estructurada del documento.

Permite modificar el contenido

Es lo que conecta las páginas web con Javascript.

El DOM es un árbol de objetos.

Obtener nodos del DOM mediante ID:
let elem = document.getElementById(“identificador”);

Al DOM podemos:

Agregarle nodos (Etiquetas).

Editar nodos (Es como cambiar el HTML).

Borrar nodos (Es como borrar etiquetas).

Generar números aleatorios

Se utiliza Math.random();

Podemos utilizar también la función matemática Math.floor(); que redondea al menor

entero.

let numeroAleatorio = Math.floor(Math.random() * 5);

Identificamos elementos por etiquetas

document.getElementsByTagName(“TAG”).[¿Qué Tag?].onclick = nombreFunción;

Identificamos un único elemento

document.getElementById(“id”).onclick = nombreFunción;

Identificar elementos por clase

document.getElementsByClassName(“”).onclick = nombreFuncion;

Nuevos métodos para JavaScript

querySelector()
Retorna el primer elemento que corresponde al grupo de selectores indicado
entre paréntesis. Dentro del paréntesis se especifican selectores CSS como por
ejemplo “.important”, “#principal”.

querySelectorAll()
Retorna todo los elementos que corresponden al grupo de selectores indicado
entre paréntesis. El valor devuelto es un array conteniendo los elementos en el mismo
orden en el que aparecen en el documento.

Eventos

addEventListener()
Estándar de la especificación HTML5
 El método tiene 3 argumentos:
Nombre del evento
Función a ejecutar
Valor booleano

EJ:
addEventListener(“evento”, función, valor booleano)

Eventos comunes:

click: Click sobre algo.

mouseover: Mouse encima de algo.
mouseout: Mouse fuera de algo.
 AJAX - REST

POST: Crea un recurso.

GET: Obtener uno o muchos recursos.
PUT: Editar uno o varios recursos.
DELETE: Borrar un recurso.

FETCH: Opciones

Para enviar datos, necesitamos de fetch un segundo parámetro para

indicar opciones.

fetch(url, opciones).then(...)

FETCH: POST

Construir POST

Crear el Objeto que vamos a enviar:

let Objeto = {
“jugador”: “Messi”,
“equipo”: “Argentina”,
“minuto”: 75 }

fetch( URL, { “method”: ‘POST’,

“headers”: { ‘Content-Type’: ‘application/json’ },
“body”: JSON.stringify(objeto)})

JSON.stringify convierte el objeto a la cadena de texto

lista para enviarla.

.then(response => {
if(response.ok){
response.json().then(t => {
console.log(“El objeto se guardó con
éxito.”); })
}else{
console.log(“El objeto no se guardó.”);
}
})
.catch(response => {
console.log(“Error de conexión.”);
})

Construir GET

Por defecto el método que se utiliza es el GET.

fetch(URL + GRUPO + COLECCIÓN).then(response => {

if(response.ok){
response.json().then(t => {
for(let data of t.colección){

}
}else{
console.log(“No sé encontro el archivo”);
})

.catch(response => {
console.log(“Error de conexión);
})

Construir PUT

A la función de editar el contenido le pasamos el ID que

queremos modificar y tomamos los datos del objeto.

let Objeto = {
 “things”: {
“city”: city,
“stadium”: stadium,
“price”: price
}
}

fetch(URL + GRUPO + COLECCIÓN + ID, {

“method”: PUT,
“headers” {
“Content-type”: application/json },
“body”: JSON.stringify(Objeto)
})
.then(response => {
if(response.ok){
response.json().then(t => {
console.log(“Se editó exitosamente”);
}else{
console.log(“No se encontró el archivo”);
}
.catch(response => {
console.log(“Error de conexión”);
}

Construir DELETE

fetch(URL + GRUPO + COLECCIÓN + ID, {

“method”: ‘DELETE’,
“headers”: {
“Content-type”: ‘application/json’})
.then(response => {
if(response.ok){
response.json().then(t => {
console.log(“Se eliminó con éxito.”);
})
}else{
console.log(“No sé encontró el archivo”);
}
.catch(response => {
console.log(“Problemas de conexión.”);
}
 ¿Cómo se integra JS a un proyecto Web? ¿Qué función tiene?

Siendo incluido con una linea de <script type="text/javascript" src"

"></script> en el <body> de HTML una vez que se carguen todos los
elementos. Javascript tiene la funcion ay permitir la generacion y reaccion de
eventos en el sitio web. Puede, por ejemplo, validar formularios, reaccionar a
eventos como click o tecleados del usuario, calculos complejos, carja dinamica
de contenido (AJAX), entre otras cosas.

 ¿Qué es el DOM? ¿Para qué nos sirve en JS?

DOM es una API para documentos HTML y XML, con la cual se logra una
representacion estructurada del documento, permite modificaciones del
contenido y es lo que conecta a las paginas web con Javascript. Practicamente,
DOM es un arbol de objetos.

 ¿Qué es un evento en JS?

Un evento en Javascript es algo que ocurre en el sistema, originado por

el usuario u otra parte del sistema y que se avisa al sistema. Por ejemplo, los
clicks del usuario, el que se termine de cargar la pagina o incluso que pase una
X cantidad de tiempo desde que se termino de procesar.