Conceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptx

Conceptos HTML
y JavaScript
Bloque 3
JavaScript

3 Editeca.com ® Todos los Derechos Reservados 2021
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. Variables y constantes.
6. Tipos de datos.
7. Operadores aritméticos.
8. Operadores de comparación y lógicos.
9. Funciones.
10. Métodos en los tipos de datos.
11. Objetos en JS.
12. ¿Qué es un map?
13. Sentencia ‘if-else’.
14. Sentencia ‘switch-case’.
15. ¿Qué son los bucles?
16. Bucle ‘for’.
17. Bucle ‘while’.
18. Tratamiento de errores mediante ‘try..catch’.
19. Las funciones flecha.
20. Clases en JS.
21. Archivos JSON.
22. Manejar el DOM desde JS.

JavaScript
¿Qué es JavaScript?
JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio
web.
JavaScript es un robusto lenguaje de programación que se puede aplicar a un documento HTML y usarse
para crear interactividad dinámica en los sitios web.
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.

JavaScript
Insertar JavaScript en nuestro proyecto
Puede ser añadido de dos formas:
Interna: Mediante la etiqueta <script>
Externa: Mediante la etiqueta script llamando a un archivo externo especificando 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.

JavaScript
Opciones para la salida de datos en JS
JavaScript puede mostrar datos de formas diferentes:
• Mediante la consola del navegador utilizando console.log( ).
• Escribiendo en una caja de alertas, usando window.alert( ).
• Escribiendo 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.

JavaScript
Sintaxis de JavaScript
La sintaxis de JavaScript 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 del código.
• Identificadores: Son nombres que sirven para identificar variables, funciones o palabras clave.

JavaScript
Variables y constantes
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.
Estos dos tipos de contenedores deben ser identificados con nombres únicos. Se les asigna un valor
mediante el signo “=“, pudiendo ser igualado su valor a otra variable, a un valor o a una expresión.
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.

JavaScript
Tipos de datos
El concepto de tipo de datos es muy importante en programación. 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.

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.

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

JavaScript
Ejemplos de operaciones

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.
Operador Significado
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
Operador Uso Devuelve true si…
AND ( &&) expr1 && expr2 Las dos expresiones son
ciertas
OR (||) expr1 || expr2 Al menos una de las dos
expresiones es cierta
NOT (!) !expr La expresión es falsa
Operadores de comparación Operadores lógicos

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.

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.
Llamada a funciones
Funciones

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.
• includes (string): Devuelve un valor booleano según si nuestra cadena contiene la que le pasamos.

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]

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.

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.

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:

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,…

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( ),…

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.

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.

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.

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.

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,…

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.

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.

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

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

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.

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).

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 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.

Conceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptx

Más contenido relacionado

Similar a Conceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptx (20)

Último (20)

Conceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptx