Javascript

Javascript
René Guamán-Quinche
Facultad de la Energía, las Industrias y los Recursos Naturales No Renovables
Carrera de Ingeniería en Sistemas/Computación
Mayo, 2020
Loja, Ecuador

3
1. Historia
2. ¿Dónde va el código?
3. Sintaxis
4. Estructura de datos
5. Funciones
6. Orientación a Objetos
7. DOM
8. Eventos
Agenda

4
Historia
Abril 1995, Brenda Eich fue contratado por netscape
Desarrolló un lenguaje de script que se puediese ejecutar
en el navegador de netscape
El objetivo era automatizar algunas partes de las páginas
web y lograr que las páginas fueran más dinámicas
Javascript recibió el Mocha
Luego se llamó Livescript

5
Características
Se ejecuta localmente
Es interpretado (no compilado)
Es de respuesta inmediata
Agrega interactividad a los sitios web
Manipula una página web (html, css, js)
Proporcional efectos visuales dinamicos

6
¿Dónde de ir el código?
Pueder ir:
Dentro de un elemento html
<input type=”button” value=”pulsa aqui” onClick=”alert(‘hola’)”>

7
Pueder ir:
En etiquetas script
Se debe agregar en el head de una página
web, pero se puede declarar en cualquer
parte del documento html

8
<html>
<head>
<script type=“text/javascript”>
function ahora() {
var h = new Date();
return h.toLocaleString();
}
var verFecha = true;
</script>
</head>
<body>
<script type=“text/javascript”>
if (verFecha) alert(“Fecha y hora: ” + ahora());
</script>
</body>
</html>

9
Pueder ir:
En un archivo externo .js
Se agrega en una etiqueta script en el head
o en cualquier parte del documento html
<script src=”documento.js”> </script>

10
Se crea el archio documento.js y se agrega codigo javascript
Alert(“es un documento”);
<script src=”js/documento.js”> </script>

22
Sintaxis
Prompt:
Permite ingresar datos de teclado
var nombres = prompt("Ingrese sus nombres");

23
Estructura de datos
Arreglos
●
Los arrays o colecciones son estructuras de datos que agrupan
elementos
●
Para declarar utilizamos los corchetes [ y ], e indicaremos en el interior
los elementos del array separados por coma ,

24
Estructura de datos
Arreglos
●
Para actualizar una posición del array, también podemos utilizar el
operador [] para acceder a una posición y usar la asignación = para
darle un nuevo valor. Ejemplo: palos[0] = "nuevo palo";

25
Estructura de datos
Arreglos
●
Para actualizar una posición del array, también podemos utilizar el
operador [] para acceder a una posición y usar la asignación = para
darle un nuevo valor. Ejemplo: palos[0] = "nuevo palo";

26
Estructura de datos
Arreglos
●
Podemos consultar el tamaño de un array utilizando la propiedad
length del mismo, a la que accedemos con el operador punto. Ejemplo:
palos.length nos devuelve el valor 4

27
Estructura de datos
var articulos = [ “loja”,”zamora”,”manabi”,”napo” ];
Var articulos = new Array
( “loja”,”zamora”,”manabi”,”napo” );

28
Estructura de datos
Arreglo.length = número de elementos del arreglos
Arreglo.push(elemento) = agrega elementos al final del arreglo
Arreglos.unshift(elemento) = agrega elementos al inicio del
arreglo
Arreglo.pop() = elimina un elemento al final al final del arreglo
Arreglo.shift() = elemina un elemento al inicio del arreglo

29
Estructura de datos
Diccionarios
●
Son estructuras que nos permiten almacenar datos estructurados También
se les llama hash en inglés
●
En los diccionarios la información se almacena con una clave y un valor
●
Por ejemplo para almacenar una dirección postal tendríamos la información
de un calle, una población, un código postal y un país

30
Estructura de datos
Diccionarios
●
Usa la notación de llaves { } para declarar un diccionario, que consta de
pares clave: valor separados por comas, para separar la clave de su valor
usamos :
●
●
En JavaScript los diccionarios se llaman Object (objeto) y tienen más
funcionalidades

31
Estructura de datos
Diccionarios
●
Existen dos maneras de acceder a los valores almacenados en un diccionario
●
En primer lugar, usando la misma notación que en los arrays con [ ] y poniendo
entre comillas el nombre de la clave cuyo valor queremos obtener
●
La segunda forma es con la notación de punto, que separa el nombre del
diccionario del de la clave cuyo valor queremos obtener. La notación más
habitual es la notación con punto

32
Estructura de datos
Diccionarios
●
Actualizar a los diccionarios:

33
Estructura de datos
Array de diccionarios
●
Se declara un array de cartas, siendo cada carta un diccionario
que contiene un palo y un valor.
En el ejemplo se declaró las cartas en variable separadas, pero podríamos
declarar el array directamente con los diccionario sin las variables intermedias

34
Estructura de datos
Array de diccionarios
●
Se ha definido un diccionario de palos con el listado de palos de distintas barajas, la
española y la de poker
●
Podemos acceder a cada listado, que es un array, y luego a cada posición dentro del
array.
●
Por ejemplo, accedemos a la última posición del listado de palos de la baraja de poker.

35
Funciones
Es un bloque de código que se ejecuta sólo cuando se invoca
No devuelve ningún dato devuelve un tipo dato

36
Funciones
Ejemplo: dada una mano de cartas podemos construir una función
puntua que calcule la puntuación obtenida en la mano de cartas

37
Funciones
Llamada a la función

38
Programa
●
Se compone de la ejecución de un conjunto de instrucciones de código para
desarrollar un trabajo concreto
●
Para estructurar el código de nuestro programa podemos utilizar funciones siendo
una de ellas la principal que orquesta la utilización de las demás

39
Librerias de Código
●
Se agregar en los diccionarios funciones
var cartas = [{palo: "c", valor: 1},
{palo: "d", valor: 1},
{palo: "p", valor: 1},
{palo: "t", valor: 1}];
function barajar(cartas){
return "Barajando...";
}
function repartir(cartas){
return "Su carta, gracias";
}
var Croupier = {baraja: barajar, reparte: repartir};
Croupier.baraja(cartas);
Croupier.reparte(cartas);

46
DOM – Document Object Model

47

48

49
Propiedades de nodos
nodeValue
nodeType
childNodes
attributes
firstChild
lastChild
nextSibling
previousSibling
Metodos de nodos
appendChild()
removeChild()
replaceChild()
insertBefore()
createAttribute()
createElement()
createTextNode()
getAttribute()
setAttribute()
removeAttribute()

50
Acceso directo a los nodos
getElementById()
getElementsByName()
getElementsByTagName()

51
getElementsByTagName()
Obtiene todos los elementos de la página XHTML cuya etiqueta sea
igual que el parámetro que se le pasa a la función, ejm;

52
getElementsByName() *se debe manejar con cuidado
Obtiene todos los elementos de la página XHTML cuyo atributo name,
coincida con el parámetro que se le pasa a la función. Ejm:

53
getElementsById()
Devuelve el elemento XHTML cuyo atributo id coincide con el
parámetro indicando en la función.
Como el atributo id debe ser único para cada elemento de una misma
página, la función devuelve únicamente el nodo deseado, ejm:

54
Agregar Nodo

55
Agregar Nodo

58
Cŕeditos
Transparencias basadas por:
• Sergio Lojan Mora, La web
Efraín Herrera Jiménez, https://es.slideshare.net/latinosoft/dom-
javascript
• Introducción a la programación. Descubre el lenguaje de la era digital.
(15.a
edición), Miriadax

Networking académico:
Correo electrónico: rguaman@unl.edu.ec
Twitter: @rene5254
SlideShare: https://es.slideshare.net/rene5254
59
Gracias

Javascript

Más contenido relacionado

La actualidad más candente (20)

Similar a Javascript (20)

Más de Rene Guaman-Quinche (20)

Último (6)

Javascript