Paginas dinamicas

Pagina con contenido estatico Web informativa a aplicaciones web web ads
Crecaion es necsario programación web en el lado del cliente el navegador del usuario
Web ads ejemplos gestionar correo comparador de vuelos

Necesitamos interpretar el lenguaje que conoce el cliente web: javascript

Contenido
Aprender a como utilizar el lenguaje javascript y cómo integrarlo en una web para crear web
ads.
Javascript 1
También se conocerán alguna Librerías y Frameworks que facilita la creación de aplicaciones
web con javascript.
DEFINICION DE PAGINA DINAMICA(WEB ADS)

CREACION DE CONTENIDO DIGITAL

BUSQUEDA DE SOLUCIONES INNOVADORAS
BUSQUEDA DE SOLUCIONES INNOVADORAS

SEGURIDAD EN LA RED
Son los conocimientos para proteger dispositivos, contenidos, datos personales y
la privacidad en entornos digitales

COMUNICACIÓN Y COLABORACION
Son las habilidades para comunicarse, colaborar y participar activamente en
plataformas digitales

BUSQUEDA Y GESTION DE INFORMACION

Es la capacidad de buscar, filtrar, manejar, ordenar, recuperar y evaluar contenido,
información y datos digitales
 JAVASCRIPT
PÁGINAS DINÁMICAS.
Introducción
Una página web dinámica

 Es una página que se actualiza conforme el usuario va haciendo peticiones, navegando

por la página o actualizando su contenido.
 Suelen venir cargadas:
o de alto contenido visual,
o opciones para discapacitados o
o aprendizaje de las elecciones que ha ido tomando el usuario.

En contra a lo que ocurre con las páginas estáticas,

 En las que su contenido e información se encuentra predeterminado,

 En las páginas dinámicas la información va apareciendo:
 según el ciclo de vida del usuario en la aplicación.

Esto se hace posible porque una página dinámica tiene asociada una aplicación web o una
Base de Datos desde la que se permite visualizar el contenido.

CREACION DE PAGINAS DINAMICAS

Para la creación de este tipo de páginas deberán utilizarse:

1. etiquetas HTML y
2. algún lenguaje de programación que se ejecute tanto del “lado servidor” como del
“lado cliente”.

LENGUAJES UTILIZADOS PARA LA CREACION DE PAGINAS

DINAMICAS
Los lenguajes utilizados para la creación de este tipo de páginas son principalmente:

1. ASP,
2. PHP,
3. JSP,
4. pero, sobre todo, mucho Javascript (JS).
MÓDULO 1. PÁGINAS DINÁMICAS.
VENTAJAS Y DESVENTAJAS
VENTAJAS

 El proceso de actualización y creación es sumamente sencillo, sin necesidad de entrar

en el servidor.

 Gran número de funcionalidades y desarrollos tales como bases de datos, foros,

contenido dinámico, etc.

 Facilitan tener actualizada diariamente toda la información.

 Diferentes áreas de diferentes empresas pueden participar en la creación y el

mantenimiento.

 Dominación total sobre la administración de todos los contenidos.

 Contenidos fácilmente reutilizables.

 Una mayor interactividad con el usuario.

 Presentación de contenidos en diversos dispositivos y formatos, como los terminales

móviles.

 Los autores del contenido no requieren conocimientos técnicos.

DESVENTAJAS

 Mayores requerimientos técnicos para su alojamiento en Servidores de pago y, por

tanto, costes de alojamiento mayores.

 En algunos casos, un mayor coste de desarrollo que implican mayor cantidad de

recursos en el apartado visual de la aplicación.
 JAVASCRIPT
Básicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es
necesario hacer nada con estos programas, ni tan siquiera compilarlos. Los programas escritos
con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de
procesos intermedios.

Integrar JavaScript y HTML es muy sencillo y variado, destacamos tres maneras de incluir
JavaScript en un documento HTML:

1. Escribir JavaScript en el propio documento HTML

2. Definir JavaScript en un archivo externo a nuestro documento
3. Incluir JavaScript dentro de las propias etiquetas HTML

ESCRIBIR JAVASCRIPT EN EL PROPIO DOCUMENTO HTML

Las sentencias JavaScript se encierran entre etiquetas, o tags,  <script> y se incluyen en
cualquier parte del documento.

Aunque es correcto incluir cualquier bloque de sentencias en cualquier zona del documento,
se recomienda

 definir el bloque de código JavaScript dentro de la cabecera del documento (dentro de

la etiqueta ) (dentro de la etiqueta )

Para que la página HTML obtenida sea correcta, es imprescindible agregar el atributo type a la
etiqueta <script>. Los valores a los que se iguala el atributo type están estandarizados y para el
caso de JavaScript, el valor correcto es text/javascript.

<script type= “text/javascript”>

Alert(“un mensaje de prueba”);
</script>

CUANDO SE EMPLEA
Este método se emplea:

 cuando se define un bloque pequeño de sentencias o

 cuando se quieren incluir códigos específicos en un determinado documento.

DESVENTAJA
La principal desventaja es:

 el no reutilizamiento ya que si se quiere hacer una modificación en el bloque de

código, es necesario modificar todas las páginas que incluyen ese mismo bloque de
código JavaScript (que habremos copiado en cada una de las respectivas páginas), por
lo que no lo hace reutilizable.
<!DOCTYPE html PUBLIC ”-//w3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd”>
<html xmlns= “http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv= “Content-Type” content= “text/
htmal; charset=iso-8859-1” />
<title>Ejemplo de código JavaScript en el propio
documento</title>
<script type= “text/javascript”>
Alert(“un mensaje de prueba”);
</script>
</head>
<body>
<p>Un párrafo de texto. </p>
</body>
</html>

DEFINIR JAVASCRIPT EN UN ARCHIVO EXTERNO A NUESTRO

DOCUMENTO
Las sentencias JavaScript se pueden escribir en un archivo externo de tipo  JavaScript (.js) que
los documentos HTML enlazan mediante la etiqueta (o tag)  <script>. Se pueden enlazar todos
los archivos JavaScript que se necesiten y cada documento HTML puede enlazar tantos
ficheros JavaScript como utilice.
Aparte del atributo type, este método hace imprescindible definir el atributo src, que es el que
indica la URL (o dirección) correspondiente al fichero JavaScript que se quiere unir.

<!DOCTYPE html PUBLIC “-// W3//DTD XHTML 1.0

Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd”>
<html xmlns- “http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=iso-8859-1” />
<title>Ejemplo de código JavaScript en el propio
documento</title>

<script type=”text/javascript” src=”/js/codigo.js

”
></script>
Definir el tributo scr que es el que indica la URL (o dirección) correspondiente
al fichero JavaScript que se quiere unir

</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

 Cada etiqueta <script> solamente puede unir un único fichero, pero

 en un mismo documento se pueden incluir tantas etiquetas (o tags) <script> como
sean necesarias, lo que hace estos archivos reutilizables.

Los ficheros de tipo JavaScript son archivos normales de texto con la extensión .js, que se
pueden crear con cualquier editor de texto.
VENTAJA

 La mayor ventaja de enlazar un fichero JavaScript externo:

o es que se simplifica el código HTML del documento,
o que se puede reutilizar el mismo código JavaScript en todos los documentos
del sitio web y que
o cualquier modificación realizada en el fichero JavaScript se ve reflejada
inmediatamente en todas las páginas HTML en los que está importado

NCLUIR JAVASCRIPT DENTRO DE LAS PROPIAS ETIQUETAS HTML

Esta última forma es la menos utilizada, ya que consiste en crear bloques de JavaScript dentro
del código HTML del documento.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHML 1.0 Transitional//EN” “http://

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=iso-8859-1” />
<title>Ejemplo de código JavaScript en el propio documento</title>

</head>

<body>
<p onclick=”alert(`Un mensaje de prueba´)”>Un párrafo de texto.</p>
</body>
</html>

DESVENTAJA
 La mayor desventaja de esta forma es que:
o ensucia innecesariamente el código HTML del documento
o y complica el mantenimiento del bloque de código en JavaScript.
MÓDULO 2. SINTAXIS DEL LENGUAJE JAVASCRIPT.
 La sintaxis de JavaScript es muy similar a la de otros lenguajes:
 No importan las nuevas líneas y los espacios en blanco al igual que sucede en
HTML ya que el propio intérprete del lenguaje los ignora.
 Es case sensitive: distingue entre las mayúsculas y minúsculas.
CONTRA:

 En contra de otros lenguajes de programación:

o no se definen el tipo de las variables (var).
 En JavaScript nunca sabemos el tipo de datos que va a contener una variable
por lo que una misma variable puede almacenar diferentes tipos de datos.
CÓMO TERMINAN SENTENCIAS EN JAVASCRIPT

 Cada sentencia en JavaScript acaba con el carácter; (punto y coma)

 Aunque no en necesario ya que el intérprete lee cada sentencia, aunque no
exista este carácter. Por convenio deberíamos incluirlo.
INCLUIR COMENTARIOS
Existe la opción de incluir comentarios:
o Para añadir información en el código fuente del programa.
o Estos comentarios suelen servir para dar información al propietario del código
u otro desarrollador sobre el contenido del bloque de código en JavaScript.
o Los comentarios pueden ser de:
o una sola línea o de
 SE DEFINE AÑADIENDO DOS BARRAS OBLICUAS //
 AL PRINCIPIO DE LA LINEA
o varias líneas (en bloque).
 COMENTARIOS MULTILINEAS SE UTILIZA /* */
 SE DEFINE ENCERRANDO EL COMENTARIO ENTRE /* */
 VARIABLES
Una variable:

 Es un contenedor que se usa:

o para almacenar y
o hacer referencia a otro valor.

conocidos también se las conoce como identificador

 Sin las variables sería imposible escribir y crear "programas genéricos", es

decir, códigos que funcionan de la misma manera independientemente de los
valores concretos usados.
 Las variables en JavaScript se utilizan mediante la palabra reservada ‘var’.
 La palabra ‘var’ solamente se indica al definir por primera vez la variable, y a
eso lo llamamos ‘declarar’ una variable
 El nombre de una variable también se le conoce como identificador y debe
cumplir la siguiente normativa:

NORMATIVA PARA DECLARAR UNA VARIABLE

 El identificador únicamente puede estar formado por:
o números,
o letras, y los
o símbolos ‘$’ y ‘_’ a lo sumo.
 El primer carácter del identificador no debe ser un número.
 No hace falta declarar también el tipo de dato que va a almacenar esa variable.
 TIPOS DE DATOS
Ya sabemos que todas las variables en JavaScript se crean a través de la palabra
reservada “var” pero dependiendo de los valores que almacenen pueden ser de un
tipo u otro.

NUMÉRICOS
Se usan para contener:

 Valores numéricos enteros (llamados integer) o

var entero=99
 Decimales (llamados float).
Var decimal=9384.52

CADENAS DE TEXTO
Se usan para contener:

 caracteres, var letter = ’e’ ;

 palabras y/o var nomProducto = ‘escoba’;
 frases de texto var sms = “Welcome to our city” ;

A veces el texto que contienen estas variables no es tan fácil. Si el propio texto encerrado
entre comillas dobles o simples tiene comillas dobles o simples que deben aparecer como
parte del valor se haría así:

A veces, hacen falta caracteres especiales para definir un cambio de línea dentro del texto de
nuestra variable, o incluso, quizás queramos meter comillas simples y dobles a la vez dentro de
nuestra sentencia
De esta manera, podemos rehacer el ejemplo anterior:

Este mecanismo de JavaScript se denomina “mecanismo de escape” o “caracteres de escape”.

ARRAYS
Un array es una colección de variables, sin importar los tipos de los que sean cada
una.

UTILIDAD
Los arrays sirven para guardar colecciones de valores, de manera que serviría para
agrupar diferentes variables. Por ejemplo, tenemos esta sucesión de variables con los
días de la semana:

Ese conjunto de datos no se puede manipular de

forma conjunta, pues cada uno está en una variable
diferente

.Si los almacenamos en un array:

 estarían todos los datos apuntados por una variable

 podría recorrerse con una instrucción for.

COMO DECLARAR UN ARRAY

Para guardarlos en un array sería:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]

Este array luego se puede recorrer para, por ejemplo, mostrar sus valores:
For (var i=0;i<dias.length;i++) { alert(dias [i]);}
Por tanto la manera de crear o escribir un array es con el contenido entre corchetes
([ ]) y separando cada valor de nuestra variable por una coma (no se pone una coma en
el elemento final de nuestro array):

Ya que tenemos definido nuestro primer array, podemos sacar algunos de sus valores
de su interior de esta manera:

BOOLEANOS
Las variables de tipo booleano:

 también son llamadas o denominadas con el nombre de variables de tipo

lógico.


FORMAS DE DECLARAR
Var register = false;
Var mayorEdad = true;

UTILIDAD
Estas variables suelen servir para condiciones o para la programación lógica.

OPERADORES
Los operadores:
 manipulan los valores de las variables,
 realizan cálculos matemáticos y
 comparan los valores de diferentes variables.

Veamos los diferentes tipos:

Asignación (=)
Sirve para asignar un valor a una variable.

INCREMENTO Y DECREMENTO (++ --)

Ambos operadores sirven:
 para decrementar o
 incrementar el valor de una variable.

Estos operadores también pueden ser indicados como sufijos en vez de prefijos.

Aunque el resultado en uno y otro caso es el mismo, no es lo mismo poner el operador

como prefijo o sufijo:

Cuando el operador ++ está como prefijo g Su valor se incrementa antes de la

operación.
Cuando el operador ++ está como sufijo g Su valor se incrementa después de la
operación.

LÓGICOS ()
Los operadores lógicos son adecuados para realizar:
 condiciones y
 lógica matemática.
El resultado de estas operaciones siempre da como resultado un valor lógico o de
booleano.
NEGACIÓN( interrogación hacia abajo)
El operador de negación se utiliza para
 dar el valor contrario a una variable.

En el caso de una variable que tenga el valor de un booleano, se le asignará el valor

contrario tras usarse el operador de negación-

El operador de negación también se puede :

 usar cuando el valor de la variable es un texto o un número.
o Si es un número = 0:
 se transforma en false y
o si es otro número <> 0
 su valor es true, por lo que al negarlo en los dos casos sería su
valor contrario.

o En el caso de las cadenas:

 si es cadena vacía (“”) se transforma en false y
 con cualquier otra cadena su valor sería true.

AND
Este operador sirve para:
 combinar los valores de dos variables, usando lógica matemática y solo dando
true si ambos valores son true
 El operador se define mediante el símbolo “&&”.

OR
Este operador sirve para:
 combinar los valores de dos variables, usando lógica matemática y solo dando
true si alguno de los valores es true. En otro caso el valor final es false.
  En otro caso el valor final es false. El operador se define mediante el símbolo
“||”

MATEMÁTICOS
Los operadores declarados son:
 suma (+),
 resta (-),
 multiplicación (*) y
 división (/).

Aparte de estos anteriormente comentados, existe el:

 Operador de “módulo” que obtiene como valor el resto de una división.
 Este operador se indica mediante el símbolo “%”.

RELACIONALES
Los relacionales:
 mayor que (>),
 menor que (<),
 mayor o igual (>=),
 menor o igual (<=),
 igual que (==) y distinto de (!=).
 OBJETOS DEL NAVEGADOR
Cuando se carga una página en un navegador se crean un número de objetos
característicos del navegador según el contenido de la página.

La siguiente figura muestra la jerarquía de clases del Modelo de Objetos del

Documento (Document Object Model - DOM).

OBJETO WINDOW
 El objeto window es el de más alto nivel,
 Contiene las propiedades de la ventana y en el supuesto de trabajar con marcos
(frames), se genera un objeto window para cada uno.

Contiene:
 las propiedades básicas de la ventana y
 sus componentes.
Algunos de los datos mas elementales son:
 DEFAULT STATUS: Contiene el mensaje que aparece en la barra de estado.
 FRAMES: Es una matriz que contiene todos los frames de la ventana.
 LENGHT: Nos indica el numero de frames de la ventana.
 NAME: Contiene el nombre de la ventana.
 SELF: Hace referencia a la propia ventana(ventana activa).

El siguiente ejemplo muestra cómo modificar el mensaje que aparece en la barra de

estado del navegador.

El objeto window también posee una serie de métodos que permiten ejecutar
funciones específicas con las ventanas, como por ejemplo:
 crear ventanas y
 cuadros de diálogo.
También es posible determinar el aspecto que tendrá la nueva ventana del navegador
mediante los campos de datos que permiten configurar el menú, la barra de
herramientas, la barra de estado, etc.

El siguiente ejemplo muestra cómo abrir una nueva ventana desde la ventana actual.
 OBJETO LOCATION
 Contiene toda la información sobre la URL que se esta visualizando
 Asi como los detalles de esa dirección
o Puerto,
o Protocolo, etc

OBJETO SCREEN
Permite obtener:
 Información sobre la resolución de la pantalla

En el siguiente ejemplo, se estable el color de fondo de la página de acuerdo a la

resolución que soporte la pantalla del usuario.
 OBJETO DOCUMENT
Hace referencia a determinadas características acerca de la página como:
 Color de fondo bg color,
 Color de sus enlaces, etc.

El objeto document contiene todas las propiedades del documento actual, como son:
su color de fondo, enlaces, imágenes, etc.

Son los principales tipos de estructura que podemos desarrollar.

 Object window
 Object location
  Object screen
 Object Document.

Principales objetos del navegador con los que podemos trabajar

El código que se muestra a continuación carga una imagen dependiendo de la elección

que haga el usuario.

A continuación vemos un ejemplo que permite conectar código a los eventos de la

página web. El primero de ellos simplemente muestra una ventana de alerta, mientras
que el segundo va modificando de forma aleatoria la imagen que se carga.

OBJETO HISTORY
Contiene las propiedades que representan a las URL que el usuario ha visitado
anteriormente.

Contiene:
 Información sobre los enlaces que el usuario ha visitado
Utilidad:
 Se utiliza principalmente para generar botones de avance y retroceso.

OBJETO NAVIGATOR
Permite:
 Obtener información del navegador con el que se está visualizando el
documento.
 El objeto navigator contiene las propiedades del navegador.

Es como una caché. El objeto screen contiene información referente a la resolución de

la pantalla que muestra la URL.