FundAMNETO

S JavaScript
JavaScript
JavaScript

Contenido del bloque 3

1. ¿Qué es JavaScript?
2. Insertar JavaScript en nuestro proyecto.
3. Opciones para la salida de datos en JS.
4. Sintaxis de JS.
5. Funciones.
6. Métodos en los tipos de datos.
7. Objetos en JS.

3
JavaScript

¿CMO ES JavaScript?
Puedes hacer casi cualquier cosa con JavaScript. Desde crear cosas sencillas como
carruseles de imágenes o respuestas a eventos, hasta crear aplicaciones basadas en bases
de datos.

Además, con JavaScript podremos modificar nuestras páginas web, tanto el código HTML
como CSS, creando mayor dinamismo a la hora de representar el contenido.

Podemos también realizar conexiones y coger datos de recursos externos, como pueden ser
servidores o APIs.
JavaScript es uno de los lenguajes más potentes, y el más usado en desarrollo web.

4
JavaScript

JavaScript en nuestro proyecto

Puede ser de dos formas:

Interna: Mediante la etiqueta <script>

Externa: su ruta con el atributo “src”. Tiene la ventaja de que separa el HTML del JS,
haciendo que sean más fáciles de leer y mantener.

5
JavaScript

la salida de datos en JS
SE puede mostrar datos de formas diferentes:
• Mediante la consola del navegador utilizando console.log( ).
• writing en una caja de alertas, usando window.alert( ).
• WRITING en un elemento HTML, utilizando innerHTML. Para acceder a un elemento
podemos usar el método element = document.getElementById(id).
• Escribiendo en la salida estándar de HTML, mediante document.write( ). Esto es solo
recomendable en fases de prueba.

6
JavaScript

Sintaxis
define como el código de los programas está construido. Nos vamos a encontrar lo
siguiente:

• Valores: Pueden ser literales, constantes o variables, que almacenan los valores de los

datos.

• Operadores: Hay aritméticos, de comparación y lógicos.

• Expresiones: Combinan operadores, valores literales y variables; que dan como

resultado un valor.

• Palabras clave: Identifican una acción a realizar, como puede ser crear una variable.

• Comentarios: Parte del código que no debe ser ejecutado y sirven para la comprensión

7 del código.
 Variables
Las variables son contenedores para valores que se asignan a los datos, y que pueden
cambiar durante la ejecución del programa.

Las constantes son contenedores de valores que no se modifican en ningún momento.

Las variables se declaran mediante las palabras var (se puede declarar más de una vez) y
let (si solo se va a declarar una vez). Tras ser declarada, una variable no tiene valor
(undefined), y este debe ser asignado.

Las constantes son declaradas mediante la palabra const, y su valor no debe ser
reasignado una vez se declara.

8
JavaScript

Tipos
Nos dan información respecto a los valores de las variables que estamos utilizando, y
dictaminan de qué manera podemos utilizarlos.
Las variables en JS pueden cambiar de tipo de forma dinámica, es decir, se puede reutilizar
la misma variable para alojar otro tipo de datos. Los más importantes son:

• Strings: Contienen cadenas de caracteres entre comillas.

• Numbers: Contienen números, tanto enteros como decimales.

• Booleanos: Pueden tomar dos valores, true o false.

9
JavaScript

Tipos de datos
• Arrays: Contienen diferentes elementos, cada uno con un índice comenzando por el 0.

• Objetos: Tienen distintas propiedades que se representan mediante pares nombre-valor,

separadas por comas.

• Undefined: Representa un dato sin valor. Es el que toman las variables al ser
declaradas.

Podemos obtener el tipo de una dato mediante el operador typeof.

10
JavaScript

Operadores aritméticos
Podemos realizar las operaciones clásicas mediante los signos *, +, -, **, /, %,
combinándolas en expresiones con variables, constantes o números.
Mediante el operador ++ incrementaremos en una unidad el valor de un dato, y haremos lo
mismo para restar una unidad con --.
Podemos ver en esta tabla resumen otros operadores disponibles:

Operador Ejemplo Equivalente a

= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y

11
JavaScript

12
JavaScript

Operadores de comparación y lógicos

Las comparaciones y las operaciones lógicas devuelven un valor booleano según si una
condición se cumple o no.
Operadores de Operadores
Operador comparación
Significado Operador lógicos
Uso Devuelve true si…
== equal to AND ( &&) expr1 && expr2 Las dos expresiones son
ciertas
=== equal value and equal type OR (||) expr1 || expr2 Al menos una de las dos
!= not equal expresiones es cierta

!== not equal value or not equal type NOT (!) !expr La expresión es falsa

> greater than

< less than
>= greater than or equal to

<= less than or equal to

13 Editeca.com ® Todos los Derechos Reservados 2021

JavaScript

Funciones
Las funciones son bloques de código que ejecutan una tarea determinada y que pueden ser
ejecutados solo cuando se les llama mediante una parte del código en ejecución, por
ejemplo ante un evento.

Las funciones se definen mediante la palabra clave function, seguida de un identificador,

parámetros de entrada entre paréntesis y un bloque de código a ejecutar entre { }.

Al invocar una función, se le pasan como argumento valores que serán tratados como
parámetros dentro de ella.

Cuando queremos terminar la ejecución una función, usamos la palabra return, y

volveremos a la parte del código donde fue invocada. Las funciones pueden devolver o no
un valor.

Utilizamos funciones para poder reutilizar código, se define una vez y se usa todas las que
se necesite. También pueden ser utilizadas para asignar valores.

14 Editeca.com ® Todos los Derechos Reservados 2021

JavaScript

Funciones
Las variables que son declaradas en una función se denominan variables locales, y solo
pueden ser accedidas dentro de la función.
Funciones
Llamada a funciones

15
JavaScript

String y sus métodos

Ya hemos visto qué son los strings, vamos a ver algunos de los métodos y propiedades que
tienen:
• length: Propiedad para saber la longitud de un string.
• substring (inicio, final): Método con el que podemos sacar una subcadena entre dos
posiciones del string.
• toUpperCase ( ): Para convertir sus caracteres a mayúsculas.
• concat (string, string,…): Este método devuelve la unión de varios strings.
• split (string): Método que nos permite convertir el string en un array con las
subcadenas que quedan separadas por el carácter que le especifiquemos.
• indexOf (string): podemos saber cual es la posición de un carácter o un string en la
cadena.
• slice (inicio, final): Para extraer la subcadena contenida entre dos posiciones.
• replace (string, string): Permite remplazar una subcadena por otra.
16
JavaScript

Array y sus métodos

Ya hemos visto lo que son los arrays, vamos a ver ciertos métodos propios que tiene:
• pop ( ): Borra el último elemento de un array.
• push (elemento): Añade un nuevo elemento al final de un array,
• sort ( ): Este método ordena un array de forma alfabética.
• reverse ( ): Invierte el orden de los elementos de un array.
• forEach (function): Llama a una función para cada elemento del array.
• splice (índice, numero de elementos, elementos a insertar): Borra tantos
elementos como le especifiquemos, además de ser capaz de añadir elementos nuevos en
su lugar.
10 34 15 20
v[0] v[1] v[2] v[3]

17
JavaScript

Métodos en los tipos de datos

En los números, podemos usar el método toExponential( ), que lo convierte a notación
exponencial; el método toFixed(number), que nos formatea el número con la cantidad de
dígitos decimales que le especifiquemos; y el método toPrecision(number), que formatea
el número con la longitud que le pasemos como parámetro.

Tanto para arrays, booleanos, numbers y otros tipos de datos podemos utilizar el método
toString( ), que convierte nuestros valores a cadenas de caracteres.

El método parseInt(string, base) nos devuelve un entero en base 10 a partir de un

número o string, definiendo nosotros la base en la que está el primer argumento.

Además de las que están ya implementadas en JS, seremos nosotros mismos los que
aumentaremos este número de métodos mediante funciones, sobre todo en los objetos que
creemos desde cero.

18
JavaScript
Objetos en JS
Los objetos son tipos de datos que pueden contener varios atributos y métodos
propios. Estos atributos o propiedades se escriben con pares nombre:valor, y pueden
ser accedidos desde cualquier parte mediante objectName.propertyName o
objectName[“propertyName”].

Los métodos son acciones que pueden ser realizadas en los objetos, son funciones
propias del mismo. Podemos acceder a ellos de forma similar a los atributos con la
forma objectName.functionName( ).

Mediante la palabra clave this, podemos hacer referencia al objeto en cuestión

dentro de sus propios métodos. Podemos definir sus propiedades tanto de forma
conjunta como de una en una.

19
JavaScript

Crear objetos en JS
Ya hemos visto como definir los objetos, ahora vamos a aprender a crearlos mediante una
función constructora, que nos permitirá crear varios objetos distintos con las mismas
propiedades. Lo haremos de la siguiente manera:

20
JavaScript ¿Qué es un
set?
Un set es un tipo de dato que representa una colección iterable de
valores únicos. Cada uno puede aparecer solo una vez en el set.
Tiene varios métodos propios, como add( ), forEach( ), values( ), has(
), size,…

21 Editeca.com ® Todos los Derechos Reservados 2021

JavaScript

¿Qué es un map?
Un map es un tipo de dato que representa una colección de pares clave-valor donde las
claves pueden ser cualquier tipo de dato, a diferencia de los objetos en los que deben ser
strings o símbolos..

Tiene varios métodos propios, como set( ), get( ), delete( ), has( ), clear( ),…

22
JavaScript

Sentencia “If-else”
La sentencia if es una estructura de control condicional que se utiliza para determinar la
realización de una acción si una cierta condición se cumple. Tiene la siguiente sintaxis:

• La palabra clave if, seguida de la condición y un bloque de código a ejecutar.

• La sentencia opcional else sirve para ejecutar una acción si la condición es falsa.

• La sentencia opcional else if se utiliza para especificar una nueva condición si la anterior
ha sido falsa.

23
JavaScript

Sentencia “switch-case”
La sentencia switch es una estructura de control que se usa para determinar una acción a
realizar basada en las diferentes posibilidades que puede tomar una variable o expresión.
Tiene la siguiente sintaxis:
• La palabra clave case define los valores que puede tomar la variable o expresión que
decide qué caso se ejecuta.
• La palabra break detiene la ejecución del bloque de código de switch.
• Usamos default si no se cumple ninguna condición, y en ese caso ejecuta su código.

24
JavaScript

¿Qué son los bucles?

Los bucles se utilizan para ejecutar un bloque de código un número determinado de veces.
Pueden ser utilizados para recorrer el mismo código con distintos valores cada vez, para
recorrer arrays y para otras muchas funciones.

Los bucles nos permiten ejecutar la misma tarea una y otra vez, lo que se denomina
iteración. Un bucle normalmente tiene estas características:

• Un contador: Que se inicia a un determinado valor e irá cambiando durante las

iteraciones.
• Una condición de salida: Es la que marca el final del bucle, puede ser que el contador
llegue a determinado valor, la consecución de un valor que buscábamos,…
• Un iterador: Incrementa el valor del contador hasta alcanzar una condición de salida.

Estos bucles van a ayudarnos de una forma sencilla a realizar tareas repetitivas en pocas
líneas. Los más famosos son el bucle for y el bucle while.

25
JavaScript

Bucle “for”
El bucle for sirve para ejecutar un bloque de código un número determinado de veces. Este
bucle tiene la siguiente sintaxis:

• La palabra clave for, tres declaraciones entre paréntesis y un bloque de código que se va
a ejecutar una o más veces.
• La primera declaración es ejecutada antes de entrar en el bucle, la segundo define la
condición para volver a ejecutar el bloque de código posterior y la tercera es ejecutada al
terminar cada iteración.

26
JavaScript Bucles “for..in” y
“for..of”
El bucle for..in se usa para iterar sobre las propiedades de un objeto.

El bucle for..of se utiliza para iterar sobre un objeto iterable, como pueden ser arrays,
strings, listas de nodos,…

27
JavaScript

Bucle “while” y “do while”

Se utilizan para ejecutar un bloque de código una y otra vez mientras la condición del bucle
sea cierta. Tienen la siguiente sintaxis:

• La palabra clave while, seguida de una condición que en caso de ser verdadera hace que
se ejecute el bucle de nuevo. Puede ir seguida de un bloque de código entre { }.
Debemos tener cuidado para no entrar en un bucle infinito.

• La palabra do, que especifica el bloque de código a ejecutar.

28
JavaScript

Bucles y sentencias anidadas

Cuando implementamos código en JS, podemos anidar varias sentencias y bucles, lo que
nos permitirá realizar estructuras de control más precisas, recorrer varios objetos a la vez,
acceder a datos dentro de iterables con más de un índice, como pueden ser arrays dentro
de otros arrays,… entre otras muchas posibilidades.

29
JavaScript

Tratamiento de errores mediante try..catch

Cuando ejecutamos un código pueden aparecer múltiples errores. En JS existen tipos de datos
para ellos, que nos ofrece información adicional sobre lo acontecido, como pueden ser
TypeError, SyntaxError, RangeError,…

Podemos manejarlos mediante el mandato try…catch. El programa intentará ejecutar el

bloque dentro de la declaración try, si hay un error, saltará al bloque de código contenido en
catch.

Mediante finally definimos un bloque de código que se ejecute haya o no error después de la
estructura try..catch

30
JavaScript
Funciones
corta.
flecha
Las funciones flecha nos permiten escribir funciones de una manera mucho más sencilla y

31 Editeca.com ® Todos los Derechos Reservados 2021

JavaScript
Clases en JS
Las clases representan una sintaxis mucho mas clara y simple para crear objetos. Están
compuestas por:
• Declaraciones de clases: Usadas para definir una clase, con la palabra class y un nombre
para ella.
• Constructores: Métodos especiales para crear e inicializar un objeto creado con una clase.
Solo puede haber uno con el nombre constructor.
• Métodos de la clase: Diferentes métodos que pueden ser aplicados a cada objeto
perteneciente a esa clase.

32 Editeca.com ® Todos los Derechos Reservados 2021

JavaScript Archivos
JSON
JSON es un formato para transportar y guardar datos. Es usado frecuentemente a la hora de
recibir datos de un servidor. Son pares nombre-valor, con los datos separados por comas.
Hay diferentes tipos de datos:
• Nombre-valor: Un nombre que representa un campo seguido de un valor.
• Objetos: Encerrados entre llaves.
• Arrays: Parecidos a los arrays en JS, pueden contener objetos, que se almacenan entre
corchetes.

Para convertir de JSON a JavaScript utilizaremos la función JSON.parse(texto).

33 Editeca.com ® Todos los Derechos Reservados 2021

JavaScript

Manejar el DOM desde JS

Tenemos varias funciones que nos permiten realizar esto:
• document.getElementById: Nos permite seleccionar un elemento HTML por su id para
manipularlo.
• document.getElementsByTagName: Nos permite seleccionar elementos HTML por su
nombre de etiqueta para manipularlos.
• document.getElementsByClass: Nos permite seleccionar elementos HTML por su clase
en CSS para manipularlos.
• element.innerHTML: Nos permite insertar código HTML desde JavaScript en un
elemento que seleccionemos.
• element.style.property: Nos permite cambiar el valor de una propiedad de un estilo
dentro de un elemento.
• element.setAttribute: Nos permite añadir un nuevo atributo a un elemento HTML, con
34

un par nombre-valor.
JavaScript

Ejercicio final del bloque 3

A partir del proyecto ya creado en los anteriores bloques, debemos añadir interactividad y
eficiencia a partir de JS. Esta nueva página web debe poder tener varias secciones que
iremos alternando con la barra de navegación. Al menos debe tener lo siguiente:
• La barra de navegación debe cambiar el contenido de nuestra página, sin alterar la
misma.
• Debemos usar estructuras al menos una estructura como un set, un map, un array,…
• Debe haber estructuras switch, if, for y while.
• Deben existir comentarios.
• Debe generarse el mínimo posible de contenido mediante el archivo HTML, es decir, debe
agregarse este lenguaje mediante el JavaScript, evitando repetir código mediante el uso
de bucles, colecciones y objetos.

La práctica debe ser entregada mediante Github, invitando al usuario RicardoCebriánGarcía

a un repositorio creado por el alumno.
35