Técnico Superior en Desarrollo

de Aplicaciones Web

[DWEC] Unidad 1
ARQUITECTURAS Y L ENGUAJES DE PROGRAMACIÓN EN CLIENTES WEB
UT01.-
Arquitecturas y
lenguajes de
programación
en clientes web.
Planificación
18/09/2024 25/09/2024 02/10/2024 09/10/2024
Presentación JavaScript Funciones TypeScript

Variables y ámbito Ejemplo práctico Resolución de dudas.

Conceptos básicos
Operadores Documentación
Lenguajes Depuración
Estructuras de control
Herramientas de trabajo
Tipos de datos
UT01. Arquitecturas y lenguajes de
programación en clientes web
REPASANDO
Desarrollo WEB cliente|Front-end
Contenido Estructura Presentación Comportamiento
 Javascript
❖ Cliente: Solo trabaja en el lado cliente, es decir, no puede escribir
ficheros en el servidor.

❖ Compatibilidad: No todos los navegadores WEBs son iguales. No

todos implementan o implementan igual todos los lenguajes.

❖ Puede utilizarse para pre-procesar y validar los datos de un

formulario que serán enviados a un servidor.

❖ Permitir que una web sea interactiva a las interacciones de un

usuario.

❖ Modificar el DOM (HTML) y el estilo (CSS).

❖ Solicitar información al servidor.
IDE | Visual Studio Code

https://code.visualstudio.com/
Herramientas desarrollador
CheatSheets
https://www.codecademy.com/lea
rn/introduction-to-
javascript/modules/learn-
javascript-introduction/cheatsheet
Instrucciones básicas JS
Web interesante
https://lenguajejs.com/
javascript/introduccion
/que-es-javascript/

https://twitter.com/Ma
nz
<script>

https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write
Comentarios
<noscript>
Console.log | Complemento al debug

Uso de consola:
https://www.w3schools.com/js/tryit.a https://dev.to/devsmitra/javascript-console-methods-a-cheat-
sp?filename=tryjs_output_console sheet-for-developers-44mc
Consola

https://dev.to/devsmitra/javascript-console-methods-a-cheat-
sheet-for-developers-44mc
Cuadro de dialogo

https://www.w3schools.com/howto/howto_css_modals.asp
Variables
camelCase
Camelcase es una convención de nomenclatura para escribir nombres de archivo u objeto utilizando
palabras compuestas o unidas, con al menos una de esas palabras que comienzan en mayúscula.

https://medium.com/@kjschelling/a-comprehensive-guide-to-naming-conventions-in-
javascript-46a7518e4807
Var, let y const
¿Qué es hoisted?
En JavaScript, hoisting te permite usar funciones y variables antes de que se hayan declarado.

https://www.freecodecamp.org/espanol/news/que-es-hoisting-alzar-en-javascript/
Constantes
Var no tiene
block scope 
Ejemplo de ambito
Ámbito de las variables

https://lenguajejs.co
m/javascript/fundam
entos/variables/
Tipos de datos
Tipos de datos

Nomenclatura (cuidado, hay palabras (ej. var)y caracteres reservados “ ”, “%”):

camelCase
Tipos de datos

BigInt

null

https://twitter.com/Manz/status/1561664887193059328?t=S2NPGL8vmBV63ZuJYwFOJQ&s=35
Objetos
Un objeto no es más que una colección de atributos, cada uno de ellos asociado a un valor. Para
definir un objeto utilizamos las llaves y expresamos cada uno de sus atributos indicando el
nombre y su valor separados por dos puntos. Los objetos en JavaScript no tienen por qué ser
instancias de clases.

El literal {} representa un objeto vacío (sin atributos)

Array
Arrays: son objetos que contienen diferentes valores, que pueden ser de diferentes tipos,
indexados por su índice, comenzando en 0. Para declararlos utilizamos los corchetes y para
acceder a sus valores utilizamos su índice encerrado entre corchetes:
Comprobar tipo de dato
Más ejemplos
Conversiones de tipos
<var> a string:

String a Int/Float
Conversiones de tipos automáticas
Convertir entre tipos
Fallos de precisión y otras peculiaridades
https://twitter.com/Manz/stat
us/1375436477702750208?t=
3nfimr2eOTjfdSlelfL8TQ&s=09

https://twitter.com/Manz/stat
us/1479780042184007682?t=
1mxLBb1dTAdkn7UqRGDjjQ&s
=09

https://javascript.plainenglish.
io/why-0-1-0-2-0-3-in-
https://javascript.plainenglish.io/why-0-1-0-2-0-3-in-javascript- javascript-d7e218224a72
d7e218224a72
Operadores
Operadores JavaScript
❖Comparación:

❖Aritméticos

❖Asignación:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift

❖Booleanos:

❖Y muchos más relacionados con bit a bit (>>, &), objetos (new delete instanceOf), misceláneos
(typeof), etc.
Plantillas de texto
Con ES6 podemos definir cadenas de una forma más sencilla que como estábamos haciendo
hasta ahora. Fíjate en este ejemplo, en el que para utilizar la plantilla de cadenas utilizamos la
comilla invertida ` y ponemos las variables encerradas entre ${}.
Desestructuración
En ES6 también tenemos nuevas formas de asignar valores a variables a partir de un array.

Esa misma desestructuración también la podemos hacer con objetos.

Operador ? :
Este operador condicional es la forma reducida de la expresión if - else.
Operadores
https://javascript.info/optional-chaining

Ejemplo de uso. Muy útil para el trabajo con nodos (Unidad 5).
nodo?.padre??null
Operador ??
El operador de fusión de null (nullish Coalescing) permite devolver un valor si su precedente es
null. Se suele utilizar en combinación con el operador de encadenamiento opcional.
https://caniuse.com/
Interacción básica con el usuario
document.write()

https://www.w3schools.com/js/tryit.asp?filename=tryjs_outpu
t_write
document.getElementById("demo").innerHTML

https://www.w3schools.com/js/js_output.asp
alert

https://www.w3schools.com/js/tryit.asp?filename=tryjs_outpu
t_alert
Botones y javascript

https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
Ejemplo de cambiar estilo

https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style
Ejemplo botones

https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
Ejemplo botones 2

https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_hide
Funciones y archivos externos .js
Reglas javascript
1. Las instrucciones terminan en “;”. Ej: console.log(“Hola”);
2. Las variables se declaran con la palabras reservada var, let y const. Ej: var num1.
3. El operador de asignación es “=” . Ej: var num1=2
4. Los decimales se indican con el “.”. Ej: var num2=2.15
5. Las cadenas de texto se pueden escribir con comillas ‘simples’ o “dobles”.
6. Operadores. Ej: var suma = num1+num2
7. Comentarios línea con // o varias líneas con /* */
8. JS es case sensitive
¿Interactuar con el usuario?

SOL
Condicionales
IF, ELSE, ELSE IF, SWITCH
Condicional If-else

Ejemplo: https://www.w3schools.com/js/tryit.asp?filename=tryjs_ifthenelse
Condicional else if

Ejemplo: https://www.w3schools.com/js/tryit.asp?filename=tryjs_elseif
Switch

Ejemplo: https://www.w3schools.com/js/tryit.asp?filename=tryjs_switch
Ejemplo2 (agrupar): https://www.w3schools.com/js/tryit.asp?filename=tryjs_switch3
Try… catch .. finally

https://www.w3schools.com/js/js_errors.asp
If-else en una linea
Bucles
FOR, WHILE, DO … WHILE, BREAK, CONTINUE
For, while, Do…while

For:

While:

Do while:
For…of & For…in
Continue y Break

Continue: https://www.w3schools.com/js/tryit.asp?filename=tryjs_continue
Break: https://www.w3schools.com/js/tryit.asp?filename=tryjs_break
Cheat Sheet
https://www.emezeta.com/articul
os/javascript-cheatsheet-chuleta-
js

https://twitter.com/midudev/statu
s/1554831788685418497?t=zpTqC
NmO6V_3k8gX0U4Lew&s=35
https://beacons.ai/criislopeez
Mapa de conocimientos de JS

https://learnjavascript.online/knowled
ge-map.html
Ejercicios
Test online | Teórico (izq) y Práctico (der)

https://www.w3schools.com/js/js_quiz.asp https://learnjavascript.online/
Ejercicio 1
Crea una web con un campo de texto y un botón. En el campo de texto debe introducirse un número y
cuando se le da al botón se debe generar una alerta que muestre ese numero multiplicado por 2.

SOLUCIÓN
¡Reto!

SOLUCIÓN