Arquitecturas y lenguajes de programación en clientes web. JavaScript.

Caso práctico

Ada, directora de la empresa BK Programación.

CC by-nc Elaboración Propia.

La empresa "BK Programación", ha sido informada a través de uno de sus asesores, de que se ha abierto el plazo, para concursar a la adjudicación de un proyecto de modernización de la web de una importante empresa dedicada a la moda.

Ada, informa a sus trabajadores de la adjudicación de un contrato con la empresa "BK Programación", y Antonio (bajo la tutoría de Juan), deciden comenzar a investigar en las diferentes opciones disponibles para modernizar la web adjudicada.

El objetivo principal del proyecto es el de dar un mayor dinamismo a las páginas y actualizar la web a lo que se conoce como Web 2.0 (mayor interacción, interoperabilidad, aplicaciones más ricas y no intrusivas, etc.)

Ada considera que Antonio (estudiante de ciclo y trabajador de su empresa), con conocimientos de lenguaje HTML, podría formarse en las técnicas necesarias para realizar dicho trabajo de actualización y como además el proyecto tendrá un plazo máximo de entrega de 1 año, dispondrá de tiempo más que suficiente para ello.

Cómo han decidido emplear el lenguaje Javascript, lo primero que hará Antonio es ver los fundamentos de dicho lenguaje, y cuál es la estructura básica para comenzar a programar lo más pronto posible.

Ada está muy entusiasmada con este proyecto y está convencida de que Antonio será capaz de hacer ese trabajo sin ningún problema.

Presentación (CSS)
Comportamiento (JavaScript)
Estructura (DOM / estructura HTML)	Contenido Estructurado (documento HTML)
Contenido (texto, imágenes, vídeos, etc.)	Contenido Estructurado (documento HTML)

Tipo	Ejemplo	Descripción
Cadena.	"Hola mundo".	Una serie de caracteres dentro de comillas dobles.
Número.	9.45	Un número sin comillas dobles.
Boolean.	true.	Un valor verdadero o falso.
Null.	null.	Desprovisto de contenido, simplemente es un valor null.
Object.		Es un objeto software que se define por sus propiedades y métodos (los arrays también son objetos).
Function.		La definición de una función.

Tipo	Qué realizan
Comparación.	Comparan los valores de 2 operandos, devolviendo un resultado de true o false (se usan extensivamente en sentencias condicionales como if... else y en instrucciones loop). == != === !== > >= < <=
Aritméticos.	Unen dos operandos para producir un único valor que es el resultado de una operación aritmética u otra operación sobre ambos operandos. + - * / % ++ - - +valor -valor
Asignación.	Asigna el valor a la derecha de la expresión a la variable que está a la izquierda. = += -= *= /= %= <<= >= >>= >>>= &= \|= ˆ = []<br />
Boolean.	Realizan operaciones booleanas aritméticas sobre uno o dos operandos booleanos. && \|\| !
Bit a Bit.	Realizan operaciones aritméticas o de desplazamiento de columna en las representaciones binarias de dos operandos. & \| ˆ ∼ << >> >>>
Objeto.	Ayudan a los scripts a evaluar la herencia y capacidades de un objeto particular antes de que tengamos que invocar al objeto y sus propiedades o métodos. . [] () delete in instanceOf new this
Misceláneos.	Operadores que tienen un comportamiento especial. , ?: typeof void

Sintaxis	Nombre	Tipos de operandos	Resultados
==	Igualdad.	Todos.	Boolean.
!=	Distinto.	Todos.	Boolean.
===	Igualdad estricta.	Todos.	Boolean.
!==	Desigualdad estricta.	Todos.	Boolean.
>	Mayor que .	Todos.	Boolean.
>=	Mayor o igual que.	Todos.	Boolean.
<	Menor que.	Todos.	Boolean.
<=	Menor o igual que.	Todos.	Boolean.

Sintaxis	Nombre	Tipos de Operando	Resultados
+	Más.	integer, float, string.	integer, float, string.
-	Menos.	integer, float.	integer, float.
*	Multiplicación.	integer, float.	integer, float.
/	División.	integer, float.	integer, float.
%	Módulo.	integer, float.	integer, float.
++	Incremento.	integer, float.	integer, float.
--	Decremento.	integer, float.	integer, float.
+valor	Positivo.	integer, float, string.	integer, float.
-valor	Negativo.	integer, float, string.	integer, float.

Sintaxis	Nombre	Ejemplo	Significado
=	Asignación.	x = y	x = y
+=	Sumar un valor.	x += y	x = x + y
-=	Substraer un valor.	x -= y	x = x - y
*=	Multiplicar un valor.	x *= y	x = x * y
/=	Dividir un valor.	x /= y	x = x / y
%=	Módulo de un valor.	x %= y	x = x % y
<<=	Desplazar bits a la izquierda.	x <<= y	x = x << y
>>=	Desplazar bits a la derecha.	x >= y	x = x > y
>>=	Desplazar bits a la derecha rellenando con 0.	x >>= y	x = x >> y
>>>=	Desplazar bits a la derecha.	x >>>= y	x = x >>> y
&=	Operación AND bit a bit.	x &= y	x = x & y
\|=	Operación OR bit a bit.	x \|= y	x = x \| y
^=	Operación XOR bit a bit.	x ˆ = y	x = x ˆ y
[]=	Desestructurando asignaciones.	[a,b]=[c,d]	a=c, b=d

Sintaxis	Nombre	Operandos	Resultados
&&	AND.	Boolean.	Boolean.
\|\|	OR.	Boolean.	Boolean.
!	Not.	Boolean.	Boolean.

Operando Izquierdo	Operador AND	Operando Derecho	Resultado
True	&&	True	True
True	&&	False	False
False	&&	True	False
False	&&	False	False

Operador	Nombre	Operando izquierdo	Operando derecho
&	Desplazamiento AND.	Valor integer.	Valor integer.
\|	Desplazamiento OR.	Valor integer.	Valor integer.
^	Desplazamiento XOR.	Valor integer.	Valor integer.
∼	Desplazamiento NOT.	(Ninguno).	Valor integer.
<<	Desplazamiento a la izquierda.	Valor integer.	Cantidad a desplazar.
>>	Desplazamiento a la derecha.	Valor integer.	Cantidad a desplazar.
>>>	Desplazamiento derecha rellenando con 0.	Valor integer.	Cantidad a desplazar.

Arquitecturas y lenguajes de programación en clientes web. JavaScript.

Caso práctico

1.- Desarrollo web.

Caso práctico

Autoevaluación

Pregunta

Respuestas

Retroalimentación

Solución

1.1.- Áreas.

2.- Lenguajes de programación en clientes web.

Caso práctico

2.1.- Características.

Autoevaluación

Pregunta

Respuestas

Retroalimentación

Solución

2.2.- Compatibilidades.

Para saber más

2.3.- Seguridad.

3.- Herramientas y utilidades de programación (I).

Caso práctico

3.1.- Herramientas y utilidades de programación (II).

Para saber más

4.- Integración de código Javascript con HTML (I).

Caso práctico

4.1.- Integración de código JavaScript con HTML (II).

Para saber más

5.- Fundamentos de JavaScript.

Caso práctico

Para saber más

Autoevaluación

Pregunta

Respuestas

Retroalimentación

Solución

5.1.- Comentarios en el código.

Reflexiona

Para saber más

5.2.- Variables.

Para saber más

Citas para pensar

5.3.- Tipos de datos.

Citas para pensar

Debes conocer

5.3.1.- Conversiones de tipos de datos.

5.4.- Operadores.

Para saber más

5.4.1.- Operadores de comparación.

Para saber más

5.4.2.- Operadores aritméticos.

Citas para pensar

Autoevaluación

Pregunta

Respuestas

Retroalimentación

Solución

5.4.3.- Operadores de asignación.

Para saber más

Citas para pensar

5.4.4.- Operadores booleanos.

5.4.5.- Operadores bit a bit.

Para saber más

5.4.6.- Operadores de objeto.

5.4.7.- Operadores misceláneos.

5.5.- Condiciones y bucles.

Autoevaluación

Pregunta

Respuestas

Retroalimentación

Solución

Citas para pensar

5.5.1.- Estructuras de control.

Para saber más

5.5.2.- Bucles.

5.5.3.- Ejemplo sencillo con JavaScript.

Para saber más

6.- Depuración y errores comunes en JavaScript.

Caso práctico