Scribd
Cargar
4 vistas25 páginas

UD4 Lenguaje de Script

Cargado por

altamiranoubert16
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
4 vistas25 páginas

UD4 Lenguaje de Script

Cargado por

altamiranoubert16
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 25

< Aplicaciones Web /

>

Introducción. Lenguajes de
script de navegador

1011 011 01 1011001 10 11011 011 01 110110 110111 1101


<Índice/>

● Lenguajes de scripts de navegador:


○ Utilidad
○ Sintaxis básica de JavaScript

1011 011 01 1011001 10 11011 011 01 110110 110111 1101


<Lenguajes de scripts de
navegador/>
Un lenguaje de scripts de navegador
es a menudo llamado “lenguaje del
lado cliente”, porque se trata de un
lenguaje de programación que se
ejecuta en el equipo del usuario que
utiliza un navegador web.
El más común es JavaScript, que es de
alto nivel y uno de los lenguajes más
utilizados del mundo.
<Utilidad/>
JavaScript, y otros lenguajes similares, permiten realizar
tareas como:
· Validación de formularios: comprobar los datos introducidos
antes de mandarlos a un servidor.
· Manipulación del DOM: cambiar contenido de manera dinámica,
estilos, etc.
· Creación de la interacción: reaccionar a clics,
desplazamiento, arrastrar y soltar, etc.
· Animaciones y efectos visuales
· Manipulación de cookies y almacenamiento local
· Realización de solicitudes HTTP
<Sintaxis básica del lenguaje.
Uso/>
Es posible incorporar JavaScript a nuestras aplicaciones web de varias
maneras:
· Incrustado en el HTML: Se puede crear código JS en un archivo HTML
usando la etiqueta <script>…</script> dentro del <head> de la página
o al final del <body>.
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web</title>
<script>
// Tu código JavaScript aquí
function saludar() {
alert("Hola, mundo!");
}
</script>
</head>
<body>
<button onclick="saludar()">Saludar</button>
</body></html>
<Sintaxis básica del lenguaje.
Uso/>
Es posible incorporar JavaScript a nuestras aplicaciones web de varias
maneras:
· Enlazado desde un archivo externo: es mejor opción que la primera,
para separar la lógica de la estructura. Esto se puede hacer mediante
el uso de una etiqueta <script>…</script> y su atributo src, donde
especificaremos la ruta al archivo en cuestión.
<script src="mi_script.js"></script>
<Sintaxis básica del lenguaje.
Declaración/>
JavaScript ofrece la posibilidad de crear comentarios de una
sola línea, con “//”, o multilínea, con “/*…*/”.

Con respecto a las variables, en JS no hay que especificar los


tipos, basta con poner var, let(preferido) o const delante del
nombre de la variable/constante la primera vez que se use. Si
creamos una constante, no podremos cambiar su valor más
adelante.
var nombre = "Juan"; // Declaración con var
let edad = 30; // Declaración con let
const PI = 3.1416; // Declaración de constante
<Sintaxis básica del lenguaje.
Tipos/>
Con respecto a los tipos de datos en JS, podemos usar los
siguientes:
· string: para texto
· number: para números(enteros y decimales)
· boolean: para valores lógicos (true y false)
· array: para colecciones de datos
· object: para estructuras de datos complejas
· null y undefined: para representar la ausencia de valor
Además, una variable puede cambiar de tipo de dato de manera
dinámica.
<Sintaxis básica del lenguaje.
Arrays/>
Las Arrays son estructuras de datos flexibles que pueden
contener cualquier tipo de datos.

Para crear una array vacía se hace así:


var miArray = [];

Para acceder a elementos del Array hay que tener en cuenta que
el primero tiene un índice de 0:
var miArray = [10, 20, 30, 40, 50];
var primerElemento = miArray[0]; // 10
var segundoElemento = miArray[1]; // 20
<Sintaxis básica del lenguaje.
Arrays/>
Para añadir elementos a la Array se usan los métodos
push(elemento) (al final) y unshift(elemento) (al principio).
Para quitar elementos se usa pop()(quita del final) y shift()
(quita del principio).
Para quitar un elemento de un índice concreto usaremos
splice(índice, número) que borra desde ese índice (inclusive)
todos los elementos como se indiquen.
<Sintaxis básica del lenguaje.
Operadores/>
Tenemos una serie de operadores que se pueden utilizar en
nuestros programas JavaScript, de varios tipos:
· Aritméticos:
- +: suma
- -: resta
- *: multiplicación
- /: división · Lógicos:
- %: módulo - &&: ‘y’ lógico
· De comparación: - ||: ‘o’ lógico
- ==: igualdad - !: negación
- !=: desigualdad
- ===: igualdad estricta
- !==: desigualdad estricta
- <: menor que
- >: mayor que
- <=: menor o igual que
- >=: menor o igual que
<Sintaxis básica del lenguaje.
Control/>
Existen diferentes tipos de estructuras de control en JS,
condicionales e iterativas:
· if/else: es un bloque que se utiliza para tomar decisiones
basadas en una o más condiciones:
var edad = 18;
if (edad >= 18) {
console.log("Eres mayor de edad.");
} else {
console.log("Eres menor de edad.");
}
· for: es un bloque que usa para crear bucles de repetición
conocida:
for (var i = 0; i < 5; i++) {
console.log("Iteración número " + (i + 1));
}
<Sintaxis básica del lenguaje.
Control/>
Existen diferentes tipos de estructuras de control en JS,
condicionales e iterativas:
· while: es un bloque para crear bucles donde no sabemos las
iteraciones necesarias.
var contador = 0;
while (contador < 5) {
console.log("Iteración número " + (contador + 1));
contador++;
}
<Sintaxis básica del
lenguaje.Funciones/>
Las funciones nos permiten reutilizar partes de un programa de
una manera muy sencilla, su sintaxis es la siguiente:
function saludar(nombre) {
console.log("Hola, " + nombre + "!");
}
saludar("Ana"); // Llama a la función y muestra "Hola, Ana!"
<Sintaxis básica del
lenguaje.Funciones/>
Dos funciones que nos pueden ser útiles son console.log() y
alert() a la hora de hacer nuestras aplicaciones web.
· console.log(cadena): imprime en la consola web lo que tenga
como parámetros. Muy útil para depurar las aplicaciones en
desarrollo.
· alert(cadena): es una alerta que se le hace al usuario y
que debe responder. Útil para avisos que requieran de la
atención inmediata de los usuarios.
<Sintaxis básica del lenguaje.
DOM/>
El DOM(Document Object Model) es una representación en memoria
de la estructura de un documento HTML que JS es capaz de
manipular para interactuar con una aplicación web. Se pueden
hacer diversas acciones con él:
· Acceder a elementos del DOM
· Modificar contenido y atributos
· Crear y agregar elementos
· Eliminar elementos
· Eventos y manipulación dinámica
<Sintaxis básica del lenguaje.
DOM/>
El uso del DOM a través de JS se realiza mediante selectores,
similar a lo que necesitábamos para aplicar estilos CSS a
elementos HTML.
Para referenciar el DOM de la página web se hace con document.
Podemos seleccionar elementos HTML concretos o conjuntos de
ellos seleccionando por id, clases o etiquetas:
· document.getElementById(cadena-id)
· document.getElementsByClassName(cadena-clase)
· document.getElementsByTagName(cadena-etiqueta)

Estos elementos HTML se pueden asignar a variables para


trabajar con ellos en JS.
<Sintaxis básica del lenguaje.
DOM/>
En el caso de recoger más de un elemento a la vez con un
selector, se puede convertir en una Array para trabajar con
cada uno de ellos de manera individual:

var contenedor = document.getElementById("contenedor");


var elementos = contenedor.querySelectorAll("p");
// Convertir la colección en una matriz
var elementosArray = Array.from(elementos);

Ahora solo quedaría recorrer uno a uno para modificar sus


valores.
<Sintaxis básica del lenguaje.
DOM/>
Con los selectores podemos, por ejemplo, cambiar el texto de
una etiqueta p con id=“parrafo” de la siguiente manera:
1. Seleccionamos la etiqueta desde JS con un selector de id
let par = document.getElementById(“parrafo”); //solo una
2. Establecemos el texto del elemento a otra cosa
par.textContent = “Hasta luego”;
<Sintaxis básica del lenguaje.
DOM/>
Podemos modificar contenido de texto, pero también:
· El interior de un elemento HTML, con innerHTML.
· Atributos, según su etiqueta, con la sintaxis
referencia.nombre_atributo = valor;
· Las clases a las que pertenece un elemento, ya sea para
añadir o quitar. Para añadir
elemento.classList.add(“nombre-clase-nueva”), para quitar
elemento.classList.remove(“nombre-clase-vieja”).
· Estilo del elemento, de manera directa con el atributo
style y las propiedades que sean. Por ejemplo:
elemento.style.color = "white";
<Sintaxis básica del lenguaje.
DOM/>
Otra opción es cambiar la estructura del DOM a partir de una
referencia, por ejemplo añadiendo elementos HTML en un
contenedor <div>.
1. Creamos un nuevo elemento HTML desde JS
let nuevoElemento = document.createElement(“div”);
2. Se referencia a un elemento contenedor del DOM
let contenedor = document.getElementById(“contenedor”);
3. Se añade el nuevo elemento dentro del contenedor
contenedor.appendChild(nuevoElemento);
<Sintaxis básica del lenguaje.
Eventos/>
El manejo de los eventos y la interacción en JS es fundamental
para crear aplicaciones usables por las personas. Los eventos
son acciones que ocurren en el navegador, como clics de
botones, movimientos del ratón, pulsaciones de teclas, etc. JS
permite detectar y reaccionar a estos eventos para realizar
acciones específicas.
<Sintaxis básica del lenguaje.
Eventos/>
Algunos de los eventos a los que JS es capaz de reaccionar
son:
· Eventos de ratón:
- click
- mouseover
- mouseout
· Eventos de teclado:
- keydown
- keyup
· Eventos de formulario/input:
- submit
- change
- focus
<Sintaxis básica del lenguaje.
Eventos/>
Los eventos requieren de un “escuchador” que esté pendiente de
cuándo ocurren esos eventos que escuchan.
Para crear uno, se hace así:
elemento.addEventListener(evento, función-manejadora);

De esta manera podemos escuchar eventos de diferentes tipos


sobre los elementos que lo requieran. Debemos desarrollar una
función-manejadora del evento que realice lo que necesitemos.
<Sintaxis básica del lenguaje.
Eventos/>
function aviso() {
alert("¡Hiciste clic en el botón!");
}
var boton = document.getElementById(“miBoton”);
boton.addEventListener("click", aviso);

También podría gustarte