JavaScript

1
 Hora.html
<SCRIPT LANGUAGE="JavaScript">
 
function saludar(){
var tiempo = new Date();
var hora, hora1="son las ";
<SCRIPT LANGUAGE="JavaScript">
with (tiempo){
document.write(saludar());
hora = getHours();
</SCRIPT>
hora1 += hora + ":" + getMinutes()
+":"+getSeconds();
}
if (hora < 12)
hora1 = "Buenos días, "+ hora1;
else if (hora < 18)
hora1 = "Buenas tardes, "+ hora1;
else
hora1 = "Buenas noches, " + hora1;
return tiempo
}
 
</SCRIPT>
 Arreglo.html

<SCRIPT LANGUAGE="JavaScript">
 
<SCRIPT LANGUAGE="JavaScript">
function buscarItem(lista, valor){ var lista1 = new Array('Juan', 'Pedro', 'Luis',
var ind, pos; 'María', 'Julia');
for(ind=0; ind<lista.length; ind++)
{ var nombre = 'María';
if (lista[ind] == valor) var pos = buscarItem(lista1, nombre);
break;
} if (pos >=0)
pos = (ind < lista.length)? ind : -1; document.write(nombre+' está en la posición
return (pos);
} '+ pos );
</SCRIPT> else
document.write(nombre+ ' no está.');
 
</SCRIPT>
 Mes.html

<script language="JavaScript" >

<!--
var hoy = new Date();
dia = hoy.getDate();
mes = hoy.getMonth();
ano = hoy.getYear() + 1900;
 
if (mes == "0") nombremes = "<font color=#FF0000 size 5>enero</font>";
else if (mes == "1") nombremes = "<font color=#FF0000 size 5>febrero</font>";
else if (mes == "2") nombremes = "<font color=#FF0000 SIZE=5>marzo</font>";
else if (mes == "3") nombremes = "<font color=#FF0000 SIZE=5>abril</font>";
else if (mes == "4") nombremes = "<font color=#FF0000 SIZE=5>mayo</font>";
else if (mes == "5") nombremes = "<font color=#FF0000 SIZE=5>junio</font>";
else if (mes == "6") nombremes = "<font color=#FF0000 SIZE=5>julio</font>";
else if (mes == "7") nombremes = "<font color=#FF0000 SIZE=5>agosto</font>";
else if (mes == "8") nombremes = "<font color=#FF0000 SIZE=5>septiembre</font>";
else if (mes == "9") nombremes = "<font color=#FF0000 SIZE=5>octubre</font>";
else if (mes == "10") nombremes = "<font color=#FF0000 SIZE=5>noviembre</font>";
else nombremes = "<font color=#FF0000 SIZE=5>diciembre</font>";
 
document.write (dia);
document.write (" de ");
document.write (nombremes);
document.write (" de ");
document.write (ano);
// -->
</script>
 JavaScript

• Variables
• Una variable es un espacio de almacenamiento en un ordenador
para grabar cualquier tipo de datos como una cadena de
caracteres, un valor numérico o estructuras.

var miVariable;

• La palabra clave var está presente para indicar que se declara

una variable. Una vez que se declara, se puede almacenar lo que
quieras. Considerar que var es para globalizar para la cual no es
lo mas recomendable ahora en este caso se puede utilizar let.

var miVariable; miVariable = 2; Let variable; const variable;

5
 JavaScript

• Variable
• Los tres tipos principales de JavaScript:
• Cadenas de caracteres (string)
• tipo numérico (number)
• Booleanos (boolean)
• Prueba de la existencia de variables con typeof

var numero = 2;
alert (typeof numero ) / / Muestra: « number »
var text = "mitexto";
alert (typeof text) / / Muestra: « string »
var aBoolean = false;
alert (typeof aBoolean) / / Muestra: « boolean »

6
 JavaScript

• Objetos y arreglos y arreglos asociativos

Un objeto es una colección de propiedades, y una propiedad es una
asociación entre un nombre y un valor.
Se define de la siguiente manera:
let miAuto= {
marca:"Suzuki",
modelo:"Vitara",
anno:"2010"};

Se puede acceder a las propiedades del objeto de dos maneras:

1. objectName.propertyName
2. objectName["propertyName"]
7
 JavaScript

• Objetos
Los objetos también pueden tener métodos, estos
son acciones que se pueden realizar sobre los objetos.

var miAuto= {
  marca:"Suzuki",
  modelo:"Vitara",
  anno:"2010",
  toString: function() {
    return this.marca + " " + this.modelo;
  }
};
8
 JavaScript

• Arreglos

let arreglo = ["1","2","3"];

9
 JavaScript

• Operadores
aritméticos

10
 JavaScript

• Operadores Aritméticos

11
 JavaScript

• Operadores Asignación

12
 JavaScript

• Operadores Asignación

Operador Example
== If (a == 5 ) igualdad
!= If (a != 5) diferencia
&& If (a == 5 ) && (b == 4) cuando se de ambos casos

ǁ If (a == 5 ) ǁ (b == 4) se da una u otra cosa

=== Comparar eventos exactamente iguales

13
 JavaScript

• Contadores
• Uno de los instrumentos más utilizados en todo lenguaje de
programación es el llamado contador
Ejemplo:
var x= 10;
x = x+1;
x = x-5;

También:
var x= 10;
x +=1;
x -=5;
14
JavaScript

15
 JavaScript

• Ciclos
• FOR
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
• WHILE
while (i < 10) {
  text += "The number is " + i;
  i++;
}
16
 JavaScript

• Ciclos
• DO WHILE
• do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

17
 JavaScript

for ( ? in ?){ //muestra por posiciones

document.write(? + "<br>");
}
for ( ? of ? ){ //muestra por valores
document.write(? + "<br>");
}
También esta el for por label fornombre:

18
 JavaScript

• Eventos
Un evento puede ser algo que el navegador o algo que un usuario hace.

Estos son algunos ejemplos de eventos:

• Una página web ha terminado de cargar

• Un campo de entrada fue cambiado
• Se hace clic en un botón

19
 JavaScript

• Eventos
JavaScript permite ejecutar código cuando se detectan eventos. De la
siguiente manera:

<element event='some JavaScript'>

Ejemplo:

<button onclick="alert(‘Hola Mundo’);">Hola</button>

20
 JavaScript

• Eventos
Principales eventos:

21
 JavaScript

DOM (Document Object Model)

•Cuando se carga una pagina Web, el DOM construye un árbol de objetos
de nuestra pagina.
 JavaScript

Métodos del DOM

•Para cambiar elementos del DOM:
 JavaScript

Métodos del DOM

•Para buscar cualquier objeto de DOM se cuenta con los siguientes
métodos:
 JavaScript

Métodos del DOM

•Para agregar y eliminar elementos del DOM tenemos:
 JavaScript

Creamos un archivo llamado html5.html

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Invocando Script</title>
<script src="/funcion.js"></script>
</head>
<body>
<div id="principal">
<p>Hacer Clic
<p>No puede hacer Clic
</div>
</body>
</html>
 JavaScript

Creamos un archivo llamado funcion.js

function mostraralerta(){
alert('hizo clic!');
}
function hacerclic(){
document.getElementsByTagName('p')[0].onclick=mostraralerta;
}
window.onload=hacerclic;
 JavaScript

Encontrar elementos por Id. porId.html

<!DOCTYPE html>
<html>
<body>
<h2>Encontrar elementos por ID</h2>
<p>Este ejemplo muestra como usar el método <b>getElementById</b></p>
<p id="intro">Hola Mundo!</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
" El texto en el primer párrafo intro es: " + myElement.innerHTML;
</script>
</body>
</html>
 JavaScript
Encontrar elementos por Nombre Etiqueta. porEtiqueta.html

<!DOCTYPE html>
<html>
<body>
<h2>Encontrar elementos por Nombre Etiqueta</h2>
<p>Hola Mundo!</p>
<p>Este ejemplo muestra como usar el método
<b>getElementsByTagName</b></p>
<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"El texto en el primer párrafo (index 0) es: " + x[0].innerHTML;
</script>
</body>
</html>
 JavaScript
Encontrar elementos por Nombre Clase. porClase.html

<!DOCTYPE html>
<html>
<body>
< h2>Encontrar elementos por Nombre Clase</h2>
<p>Hola Mundo</p>
<p class="intro">El DOM es muy útil.</p>
<p class="intro">Este ejemplo muestra como usar el método
<b>getElementsByClassName</b></p>
<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
' El texto en el primer párrafo (index 0) con class="intro" es: ' +
x[0].innerHTML;
</script>
</body>
</html>
 JavaScript
Encontrar elementos por Selectores CSS - querySelectorAll() porSelector.html

<!DOCTYPE html>
<html>
<body>
<h2>Encontrar elementos por Query Selector</h2>
<p>Hola Mundo</p>
<p class="intro">El DOM es muy útil.</p>
<p class="intro">Este ejemplo muestra como usar el método
<b>querySelectorAll</b></p>
<p id="demo"></p>

<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
' El texto en el primer párrafo (index 0) con class="intro" es: ' +
x[0].innerHTML;
</script>
</body>
</html>
 JavaScript JavaScript Creamos un archivo que se llame
html5PersonalizarError.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Personalizar Errores</title>
<script>
function iniciar(){
nombre1=document.getElementById("nombre");
nombre2=document.getElementById("apellido");
nombre1.addEventListener("input", validacion, false);
nombre2.addEventListener("input", validacion, false);
validacion();
}
function validacion(){
if(nombre1.value=='' && nombre2.value==''){
nombre1.setCustomValidity('inserte al menos un nombre');
nombre1.style.background='#FFDDDD';
}else{
nombre1.setCustomValidity('');
nombre1.style.background='#FFFFFF';
}
}
window.addEventListener("load", iniciar, false);
</script>
</head>
<body>
<section>
<form name="registracion" method="get">
<p>Nombre: <input type="text" name="nombre" id="nombre">
<p>Apellido: <input type="text" name="apellido" id="apellido">
<p> <input type="submit" id="send" value="ingresar">
</form>
</section>
</body>
</html>
 JavaScript
• Eventos

Evento Descripción Pertenece

El evento ocurre antes de que el documento esté a punto de
beforeunload UiEvent, Event
ser descargado

blur El evento ocurre cuando un elemento pierde el foco. FocusEvent

El evento ocurre cuando el contenido de un elemento del
change formulario, ha cambiado (para <input>, <select> y Event
<textarea>)

click El evento ocurre cuando el usuario hace clic en un elemento. MouseEvent

El evento ocurre cuando el usuario hace clic con el botón

contextmenu MouseEvent
derecho para abrir un menú contextual
El evento ocurre cuando el usuario copia el contenido de un
copy ClipboardEvent
elemento.
El evento ocurre cuando el usuario corta el contenido de un
cut ClipboardEvent
elemento.
El evento ocurre cuando el usuario hace doble clic en un
dblclick MouseEvent
elemento.
focus El evento ocurre cuando un elemento toma el foco. FocusEvent

El evento ocurre cuando un elemento está a punto de ser

focusin FocusEvent
enfocado.
El evento ocurre cuando un elemento está a punto de perder el
focusout FocusEvent
foco.
 JavaScript

• Eventos

Evento Descripción Pertenece

keydown El evento ocurre cuando el usuario está presionando una tecla KeyboardEvent

keypress El evento ocurre cuando el usuario presiona una tecla. KeyboardEvent

keyup El evento ocurre cuando el usuario libera una tecla. KeyboardEvent

load El evento ocurre cuando un objeto se ha cargado UiEvent, Event

El evento ocurre cuando el usuario presiona un botón del

mousedown MouseEvent
mouse sobre un elemento
mouseenter El evento ocurre cuando el puntero se mueve a un elemento MouseEvent

mouseleave The event occurs when the pointer is moved out of an element MouseEvent

El evento ocurre cuando el puntero se mueve fuera de un

mousemove MouseEvent
elemento
El evento ocurre cuando el puntero se mueve a un elemento o
mouseover MouseEvent
a uno de sus hijos
El evento ocurre cuando un usuario mueve el puntero del
mouseout MouseEvent
mouse fuera de un elemento o de uno de sus hijos
 JavaScript

• Eventos
Evento Descripción Pertenece
El evento ocurre cuando un usuario suelta un botón del mouse
mouseup MouseEvent
sobre un elemento
El evento ocurre cuando el usuario pega algo de contenido en
paste ClipboardEvent
un elemento
El evento ocurre cuando la vista del documento cambia de
resize UiEvent, Event
tamaño

submit El evento ocurre cuando se envía un formulario. Event

El evento ocurre una vez que una página se ha descargado

unload UiEvent, Event
(para <body>)
El evento ocurre cuando la rueda del mouse se desplaza hacia
wheel WheelEvent
arriba o hacia abajo sobre un elemento
 JavaScript

• addEventListener
• Registra un evento a un objeto en específico.

• Sintaxis
• target.addEventListener(tipo, listener[, useCapture]);
• elemento.addEventListener("click", function(){ alert("Hello
World!"); });
• appendChild
 JavaScript - Practica

• Ejercicios

1. Realizar dos ejemplos con eventos diferentes.

 JavaScript
<!DOCTYPE html> listener.html
<html>
<body>
<h2>addEventListener()</h2>
<p>Ejemplo varios listener para un mismo elemento</p>
<button id="myBtn">Boton</button>
<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>
 JavaScript

BOM(Browser Object Model)

•El objeto window es soportado por todos los navegadores. Representa la
ventana del navegador.
 JavaScript

BOM(Browser Object Model)

•Window Screen
• El objeto window.screen contiene información acerca de la
pantalla del usuario.
• El objeto window.screen puede ser escrita sin el prefijo ventana.

screen.width screen.availHeigh
screen.height t
screen.availWidth screen.colorDepth
screen.pixelDepth
 JavaScript

BOM(Browser Object Model)

•Window Location
• El objeto window.location puede ser utilizado para obtener la
dirección actual de la pagina (URL) y para redirigir el navegador a
una página nueva.

• Métodos:
• window.location.href devuelve el URL de la página actual
• window.location.hostname devuelve el nombre de dominio
• window.location.pathname devuelve la ruta y el nombre de la página
actual
• window.location.protocol devuelve el protocolo web utilizado (http: o
https :)
• window.location.assign carga un nuevo documento
 JavaScript

BOM(Browser Object Model)

•Window History
• El objeto window.history contiene la historia de los navegadores.

• Métodos:

• history.back() - equivale a hacer clic atrás ( ) en el navegador

• history.forward() - equivale a hacer clic adelante ( ) en el
navegador
 JavaScript

BOM(Browser Object Model)

•Window Navigator
•El objeto window.navigator contiene información sobre el navegador.

• Métodos:

• history.back() - equivale a hacer clic atrás ( ) en el navegador

• history.forward() - equivale a hacer clic adelante ( ) en el
navegador
 JavaScript

BOM(Browser Object Model)

• Ejercicios

Crear una pagina que por medio de una botón muestre la

siguiente información:
A. URL
B. Nombre Dominio
C. Nombre de página actual
D. El protocolo
 JavaScript

• Funciones
Una función JavaScript es un bloque de código diseñado para realizar una tarea en
particular y se ejecuta cuando "algo" lo invoca.

function miFuncion(p1, p2) {
  return p1 * p2;
}

• Los parámetros de una función se listan dentro de los paréntesis ().

• Los argumentos de una función son los valores recibidos por la
función cuando se invoca.

45
 JavaScript

• Funciones
Pueden usarse sin el return o bien con el mismo. Depende de la
funcionalidad que quieran realizar.
function saludar(nombre){
alert("hola" +nombre);
return "la función es";
}
También tenemos funciones flecha el cual es muy utilizado actualmente.
Si es solo un parámetro no necesita paréntesis y también sin
corchetes si es solo una línea.
Ejemplos
46
 JavaScript

• Función flecha
const saludar = (nombre)=>{

let frase = "El nombre es "+ nombre;

document.write(frase);

const saludar = nombre=>{

let frase = "El nombre es "+ nombre;

document.write(frase);

const saludar = nombre => document.write("hola "+nombre);

saludar("Victoria");

47
 JavaScript

• Callbacks (Sencillamente llamar una función desde

otra).
function prueba(callback){
callback("Hola");
}
function pruebaDos(parametro){
console.log(parametro);
}
prueba(pruebaDos);

48
 JavaScript

• Ejercicio Crear un formulario que contenga una caja de texto y un botón y

en la cual vamos a invocar la siguiente función.
<script language = "JavaScript">
function validanombre(forma)
{
if (forma.Nombre.value == "Juan")
{
alert("Nombre Correcto");
}
else {
alert("Nombre Incorrecto");
}
}
</script>

49
 JavaScript

JavaScript Object Notation, y no es más que un formato ligero de

datos, con una estructura (notación) específica, que es totalmente
compatible de forma nativa con JavaScript, no se puede poner
comentarios en un JSON.
{
"name": "Juan",
"edad": 30,
"dead": false,
"props": ["invisibility", "coding", "happymood"],
"senses": {
"vision": 50,
"audition": 75,
"taste": 40,
"smell": 50,
"touch": 80
}
}

50
 JavaScript
JavaScript tenemos una serie de métodos que nos facilitan esa tarea, pudiendo
bajar con que contengan JSON y objetos Javascript de forma indiferente.

Método Descripción
JSON.parse(str) Convierte el texto str (un JSON válido) a un objeto y lo devuelve.
JSON.stringify(obj) Convierte un objeto Javascript obj a su representación JSON y la devuelve.

Convertir JSON a Objeto

La acción de convertir JSON a objeto JavaScript se le suele denominar parsear. Es una
acción que analiza un que contiene un JSON válido y devuelve un objeto JavaScript con
dicha información correctamente estructurada. Para ello, utilizaremos el método
JSON.parse():
const str = '{ "name": "Juan", "edad": 30 }';
 
const obj = JSON.parse(str);
 
obj.name;
obj.edad;
51
 JavaScript
Convertir Objeto a JSON
La acción inversa, convertir un objeto JavaScript a JSON también se puede realizar
fácilmente haciendo uso del método JSON.stringify(). Es Como «convertir a texto», y lo
podemos utilizar para transformar un objeto de JavaScript a JSON rápidamente:

const obj = {
name: "Juan",
edad: 30,
saludar: function () {
return "Hola!";
},
};
 
const str = JSON.stringify(obj);
 
str; // el resultado sería '{"name":"Juan","edad":30}'

Puede ser que si no lo soporta, simplemente no devolverá las propiedades.

52
 JavaScript

Una promesa es tener como una función llamando a dos

callbacks y diferencia se nota en que debemos de usar
un .then para invocar resultados.
let nombre = "pedro";

const promesa = new Promise((resolve,reject)=>{

if (nombre !== "pedro") reject("no es el nombre")

else resolve(nombre)

})

promesa.then((resultado)=>{

console.log(resultado)

}).catch((e)=>{

console.log(e)

})

53
 JavaScript – AJAX, XMLHTTPRequest, Fetch, Axios

Realizar peticiones con el GET y POST. server

XMLHTTPRequest = Termina siendo descontinuado.
peticion = fetch("htmlPruebas_dos.html"); //los fetch vienen encapsualados por eso usa promesas, y es asíncrona
no se espera resultado

peticion.then(res=>console.log(res.text()))
console.log(peticion);

fetch("htmlPruebas_dos.html")
.then(res=>res.text())
.then(res=>console.log(res))

54
JavaScript – AJAX, XMLHTTPRequest, Fetch, Axios

Métodos
•text()
•blob()
•json()
•formData()
•arrayBuffer()

55
 JavaScript – AJAX, XMLHTTPRequest, Fetch, Axios

const imagen = document.querySelector(".imagen");

fetch("feriados.jpg")
.then(res=>res.blob())
//.then(res=>console.log(res))
.then(img=>imagen.src = URL.createObjectURL(img));

56
JavaScript – AJAX, XMLHTTPRequest, Fetch, Axios
Librería axios ahora es lo que esta mas actualizado y para
simplificar mas el trabajo, Remplazando el fetch.

https://github.com/axios/axios

axios("htmlPruebas_dos.html")
.then(res=>console.log(res))

.get y .post

axios.post("htmlPruebas_dos.html",{
"direccion":"escazu“
})
.then(res=>console.log(res))

57
jQuery

58
 jQuery

Que es jQuery?

Es un framewok JavaScript. Los cuales aportan funciones o código para realizar

tareas específicas.

No es un lenguaje de programación si no librerías de código que contienen proceso

y rutinas listas para usarse.

Nos ofrece una infraestructura con la que tendremos mucha mayor facilidad para
la creación de aplicaciones complejas del lado del cliente.

Gratuito
 jQuery

Consideraciones debemos trabajar con la versión actualizada descargando libremente

https://jquery.com/

Debe de llamarse y ubicarla en alguna carpeta específica donde vamos a trabajar.

$ Comenzando con el sigo de dólar de esta manera decimos que vamos a trabajar con
jQuery.
Opciones generales que se utilizan:

$(document).ready(function(){ }

$('h1').html('Mensaje a Salir');

Se pueden llamar por id y por class . Igualmente por etiqueta

$('.caja h1:first').html(‘Al principio');

En atributos

$('img').attr('src','../imagenes/compu.jpg');

Por Eventos

$('.ok').click(function(){
$('h1').html('Cuando me presiona');
})
 HTML5 – jQuery – jquery.html

<html>
<head> Para bloquear la funcionalidad
<script src="jquery-3.4.1.js" type="text/javascript"></script>
<script>
evento.preventDefault();
$(document).ready(function(){
$("a").click(function(evento){
alert("Has pulsado el enlace...Ahora serás enviado a
google.com");
});
});
</script>
</head>
<body>
<a href="http://www.google.com">Ir a</a>
</body>
</html>
HTML5 – jQuery - jquery2.html
HTML5 – jQuery – jquery3.html
 jQuery

Ejercicio
Realizar Ejemplo en jQuery que cada vez que presione algún
párrafo de texto los esconda.

Buscar y hacer un ejemplo:

1.Jquery Effects: Fade, Slide, Animate
2.Jquery Add, Selector, Events