3.- Tecnica De Desarrollo Web Para Crear Aplicaciones Interactivas (RIA)

sinay vargas escribió:JavaScript Básico (conceptos, temas que refieren al nivel básico y ejemplo de programa)

JAVASCRIPT
JavaScript es un lenguaje de programación utilizado para crear pequeños programas encargados de realizar acciones dentro del ámbito de una página web.
Se trata de un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Con Javascript se puede crear efectos especiales en las páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el único, con que cuenta este lenguaje es el propio navegador.
En JavaScript básico se pueden encontrar los siguientes elementos:

 Variables
 Tipos de Variables
 Operadores
 Estructuras de control de flujo


Variables
Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas en otros ámbitos como las matemáticas. Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor. Gracias a las variables es posible crear "programas genéricos", es decir, programas que funcionan siempre igual independientemente de los valores concretos utilizados.
Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, el ejemplo anterior se puede realizar en JavaScript de la siguiente manera:
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;


Tipos de Variables
Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar (números, textos, etc.)

Numéricas

Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o decimales (llamados floaten inglés). En este caso, el valor se asigna indicando directamente el número entero o decimal. Los números decimales utilizan el carácter . (punto) en vez de , (coma) para separar la parte entera y la parte decimal:
var iva = 16;        // variable tipo entero
var total = 234.65;  // variable tipo decimal


Cadenas de texto

Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si por ejemplo el propio texto contiene comillas simples o dobles, la estrategia que se sigue es la de encerrar el texto con las comillas (simples o dobles) que no utilice el texto:
/* El contenido de texto1 tiene comillas simples, por lo que
   se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";

/* El contenido de texto2 tiene comillas dobles, por lo que
   se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';


Arrays

En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante, el término array es el más utilizado y es una palabra comúnmente aceptada en el entorno de la programación.
Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente. Su utilidad se comprende mejor con un ejemplo sencillo: si una aplicación necesita manejar los días de la semana, se podrían crear siete variables de tipo texto:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
Ahora, una única variable llamada dias almacena todos los valores relacionados entre sí, en este caso los días de la semana.


Booleanos
Las variables de tipo boolean o booleano también se conocen con el nombre de variables de tipo lógico. Aunque para entender realmente su utilidad se debe estudiar la programación avanzada con JavaScript del siguiente capítulo, su funcionamiento básico es muy sencillo.
Una variable de tipo boolean almacena un tipo especial de valor que solamente puede tomar dos valores: true(verdadero) o false (falso). No se puede utilizar para almacenar números y tampoco permite guardar cadenas de texto.
Los únicos valores que pueden almacenar estas variables son true y false, por lo que no pueden utilizarse los valores verdadero y falso. A continuación se muestra un par de variables de tipo booleano:
var clienteRegistrado = false;
var ivaIncluido = true;



Operadores
Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.




ASIGNACIÓN


El operador de asignación es el más utilizado y el más sencillo. Este operador se utiliza para guardar un valor específico en una variable. El símbolo utilizado es = (no confundir con el operador == que se verá más adelante):
var numero1 = 3;



Incremento y decremento


Estos dos operadores solamente son válidos para las variables numéricas y se utilizan para incrementar o decremento en una unidad el valor de una variable.
Ejemplo:
var numero = 5;
++numero;
alert(numero);  // numero = 6
El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable. El resultado es que el valor de esa variable se incrementa en una unidad. Por tanto, el anterior ejemplo es equivalente a:
var numero = 5;
numero = numero + 1;
alert(numero);  // numero = 6



LÓGICOS

Los operadores lógicos son imprescindibles para realizar aplicaciones complejas, ya que se utilizan para tomar decisiones sobre las instrucciones que debería ejecutar el programa en función de ciertas condiciones.
El resultado de cualquier operación que utilice operadores lógicos siempre es un valor lógico o booleano.

NEGACIÓN

Uno de los operadores lógicos más utilizados es el de la negación. Se utiliza para obtener el valor contrario al valor de la variable:
var visible = true;
alert(!visible);  // Muestra "false" y no "true"


Estructuras de control de flujo
Las estructuras de control de flujo, que son instrucciones del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro". También existen instrucciones del tipo "repite esto mientras se cumpla esta condición".
Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesión lineal de instrucciones para convertirse en programas inteligentes que pueden tomar decisiones en función del valor de las variables.


Estructura if
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la estructura if. Se emplea para tomar decisiones en función de una condición. Su definición formal es:
if(condicion) {
 ...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran dentro de {...}. Si la condición no se cumple (es decir, si su valor es false) no se ejecuta ninguna instrucción contenida en {...} y el programa continúa ejecutando el resto de instrucciones del script.
Ejemplo:
var mostrarMensaje = true;

if(mostrarMensaje) {
 alert("Hola Mundo");
}
Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la condición, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen ser del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else. Su definición formal es la siguiente:
if(condicion) {
 ...
}
else {
 ...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran dentro del if(). Si la condición no se cumple (es decir, si su valor es false) se ejecutan todas las instrucciones contenidas en else { }. Ejemplo:
var edad = 18;

if(edad >= 18) {
 alert("Eres mayor de edad");
}
else {
 alert("Todavía eres menor de edad");
}
Si el valor de la variable edad es mayor o igual que el valor numérico 18, la condición del if() se cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eres mayor de edad". Sin embargo, cuando el valor de la variable edad no es igual o mayor que 18, la condición del if() no se cumple, por lo que automáticamente se ejecutan todas las instrucciones del bloque else { }. En este caso, se mostraría el mensaje "Todavía eres menor de edad".
El siguiente ejemplo compara variables de tipo cadena de texto:
var nombre = "";

if(nombre == "") {
 alert("Aún no nos has dicho tu nombre");
}
else {
 alert("Hemos guardado tu nombre");
}
Estructura for
Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de forma repetitiva una instrucción. Por ejemplo, si se quiere mostrar un mensaje cinco veces, se podría pensar en utilizar el siguienteif:
var veces = 0;

if(veces < 4) {
 alert("Mensaje");
 veces++;
}
Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro del if(), se muestra el mensaje y se incrementa el valor de la variable veces. Así se debería seguir ejecutando hasta mostrar el mensaje las cinco veces deseadas.
Estructura for...in
Una estructura de control derivada de for es la estructura for...in. Su definición exacta implica el uso de objetos, que es un elemento de programación avanzada que no se va a estudiar. Por tanto, solamente se va a presentar la estructura for...in adaptada a su uso en arrays. Su definición formal adaptada a los arrays es:
for(indice in array) {
 ...
}
Si se quieren recorrer todos los elementos que forman un array, la estructura for...in es la forma más eficiente de hacerlo, como se muestra en el siguiente ejemplo:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(i in dias) {
 alert(dias[i]);
}
La variable que se indica como indice es la que se puede utilizar dentro del bucle for...in para acceder a los elementos del array. De esta forma, en la primera repetición del bucle la variable i vale 0 y en la última vale 6.
Esta estructura de control es la más adecuada para recorrer arrays (y objetos), ya que evita tener que indicar la inicialización y las condiciones del bucle for simple y funciona correctamente cualquiera que sea la longitud del array. De hecho, sigue funcionando igual aunque varíe el número de elementos del array.





PROGRAMA DE UN JAVASCRIPT BASICO
<head>
<title> Hola Mundo </title>
<script>
alert ('¡Hola mundo SIN!');
</script>
</head>
<body>
alert ('¡Hola mundo SIN!');
</body>
</html>


FUENTES DE INFORMACIÓN

http://www.desarrolloweb.com/articulos/25.php
http://librosweb.es/javascript/capitulo_3/variables.html
http://librosweb.es/javascript/capitulo_3/tipos_de_variables.html
http://librosweb.es/javascript/capitulo_3/operadores.html
http://librosweb.es/javascript/capitulo_3/estructuras_de_control_de_flujo.html


ATENTAMENTE:
SINAÍ VARGAS GARCÍA      

CINTHIA CADENA PEREZ escribió:RESPUESTA AL INCISO Nº 2

JAVASCRIPT BÁSICO (CONCEPTOS, TEMAS QUE REFIEREN AL NIVEL BÁSICO Y EJEMPLO DE PROGRAMA)

¿Qué es JavaScript?
JavaScript es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML (lenguaje para la construcción de páginas Web). JavaScript no es un lenguaje de programación propiamente dicho como C o C++, es un lenguaje script u orientado a documento, como se nombra también a los lenguajes de macros que tienen muchos procesadores de texto y plantillas de cálculo.[1]. No se puede desarrollar un programa con JavaScript que se ejecute fuera de un Navegador. JavaScript es un lenguaje interpretado que se embebe en una página Web. Un lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas.

¿Donde se edita el código de JavaScript?

El código de JavaScript se puede incluir en cualquier documento HTML, o todo aquel que se pueda traducir en HTML en el navegador del cliente, ya sea PHP, ASP, SVG, entre otros.

El código va dentro de las etiquetas HTML <script type="text/javascript"> y </script>.
JavaScript no es un lenguaje de programación propiamente dicho, es un lenguaje de Script u orientado a documento, es una secuencia de comandos que se evalúa y ejecuta sobre la marcha, es usado para crear pequeños programas dentro de una página web que permiten interactuar con el usuario. Algunas


Elementos básicos para programar en JavaScript
JavaScript no es un lenguaje de programació propiamente dicho, es un lenguaje de Script u orientado a documento, es una secuencia de comandos que se evalúa y ejecuta sobre la marcha, es usado para crear pequeños programas dentro de una página web que
permiten interactuar con el usuario.
Algunas Características son:
• Permite interactuar con el usuario ( a pesar de haberlo dicho anteriormente, creo que es necesario reiterarlo).
• Crear efectos especiales
• Se pueden validar datos de un formulario.
• Crear rollovers (cambia la imagen cuando se pasa el mouse).
• Crear navegadores desplegables.
• Se puede realizar la apertura de ventanas secundarias.
• Trabajar con la barra de estado, Etc.

Donde se escribe un JAVASCRIPT?
• La programación de JavaScript se realiza en un documento HTML
• Se pueden incorporar en la cabecera entre las etiquetas <HEAD> </HEAD>
• En el cuerpo de la página entre las etiquetas <BODY> </BODY>, a esto se le llama código incrustado.
• Se pueden introducir varios script en una misma página con etiquetas <script> diferentes
• O se puede realizar un archivo externo.
• Cuando existen varias funciones probadas y que pueden servir a mas de un programa se puede realizar un archivo externo.
• El archivo externo normalmente tiene la extensión .JavaScript y se lo incluye de la siguiente manera, suponiendo que el archivo con las funciones se llame externo: <script src=“externo.JS”> </script>

Formas de Ejecutarlo
• Directa: se incorpora el script en el cuerpo o en la cabecera de una página html de modo que el navegador interprete cada línea.
• Como respuesta a un evento: Un evento es la acción que realiza el usuario mientras visita una página. Por ejemplo el movimiento el mouse, pulsar un botón, la selección de un texto o la carga de un formulario. El programa captura el evento realizado por el usuario, realiza una tarea y emite una respuesta mediante el uso de manejadores de eventos. Estos manejadores son funciones propias de JavaScript.

¿Quien interpreta las instrucciones?
Incorporamos acá un concepto básico que se desarrollará en otras materias de la carrera: el modelo cliente/servidor. Este modelo es definido por IBM de la siguiente manera: “Es la tecnología que proporciona al usuario final acceso transparente a las aplicaciones, datos, servicios, o cualquier otro recurso, a través de la organización, en múltiples plataformas. El modelo soporta un medio ambiente distribuido en el cual los requerimientos de servicios hechos por estaciones de trabajo inteligentes o “clientes”, resultan en un trabajo realizado por otros computadores llamados “servidores”.
1. Es una relación entre procesos corriendo en máquinas separadas en donde:
a) El Servidor es el proveedor de servicios.
b) El Cliente es el consumidor de servicios.
2. El Cliente y el Servidor interactúan por medio de pasajes de mensajes.
a) El Cliente solicita el servicio
b) El Servidor proporciona una respuesta.
Por tanto existen dos actores: el servidor y el cliente. En esta arquitectura, la computadora de los usuarios (cliente), produce una demanda de información a la computadora que proporciona información (servidor) quien da respuesta a la demanda del cliente.


Nuestro primer JavaScript
Haremos nuestro primer programa en JavaScript, escriba el siguiente código y guárdelo con el nombre primer_js.htm en su disquete
<html><body>
<script type=”text/javascript”>
document.write(“Hola programador!!!”)
</script>
</body></html>

Ejemplo
En este caso incorporamos una expresión javascript en un formulario en donde declaramos un botón con el texto presione. Al presionar el botón escribe en el documento la frase Hola Programador.
La expresión onClick es JavaScript, fíjese un detalle: luego de onClick = la expresión documentr.write está entre comillas dobles y el texto se encuentra en comillas simples.
Desde un evento para que muestre una ventana de
alerta:
<html><body>
<FORM>
<INPUT TYPE="button" NAME="boton"
VALUE="Presione" onClick="alert('Hola
Programador!!!')">
</FORM>
</body></html>

Variables y Operadores en JavaScript
En este capítulo veremos algunos elementos muy importantes a la hora de trabajar con JavaScript acompañados de ejemplos que ustedes podrán realizar para probar lo que se dice. Los ítems a tratar son:
1. Qué son las Variables
2. Qué son los operadores
1. Qué son las variables:
Una Variable es un espacio de memoria en donde se alberga un dato. Las variables deben tener un nombre, que puede ser cualquiera, por ejemplo pepe, respuesta, consulta, etc.
• Se forman con caracteres alfanuméricos o guión bajo.
o ejemplos: sumando_1, A, B, sumando2, _A, etc.

Qué son los operadores
Los operadores son símbolos que se utilizan para trabajar con las variables, tal como se trabaja en la aritmética elemental, los signos mas y menos so operadores. A continuación se listan los operadores usados en JavaScript con un ejemplo correspondiente.
Aritméticos:
o Suma: +
o Resta: -
o Multiplicación: *
o División: /
o Resto de la división: %
EJEMPLO
<HTML><HEAD><TITLE>LABORATORIO
1</TITLE></HEAD>
<script>
document.write('texto que saldrá en el script<br>')
var a=6 , b=2
c= a*b;
d= a/b;
e= a%b;
f= a+b;
document.write('a= '+ a + '<br>b= ' + b + '<br>c= ' + c);
document.write('<br>d= ' + d +'<br>e= ' + e + '<br>f='+f)
</script>
</BODY></HTML>

Bibliografía:
*http://aprendeenlinea.udea.edu.co/lms/moodle/course/view.php?id=414
*http://www.herrera.unt.edu.ar/programador/materias/labo1/libro/conceptos%20bsicos%20de%20javascript%20con%20ejemplos.pdf
*http://www.uazuay.edu.ec/estudios/sistemas/lenguaje_iii/MAnualJavaScript/introduccion.htm
*www.slideshare.net/jacobflores/01-conceptos-bsicosdejavascript‎

ATTE: CINTHIA CADENA PEREZ

thanahi escribió:MANEJO DE EVENTOS JAVA SCRIPT (CONCEPTOS O DESCRIPCIÓN DE LOS MÁS COMUNES Y UN EJEMPLO DE PROGRAMA)

En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.

Un evento ocurre cuando alguna situación produce un cambio, por ejemplo, cuando se da clic sobre algún elemento de la página y este debe producir alguna acción, o cuando se pasa el cursor por encima de un cuadro y este debe cambiar de color. Es decir, un evento ocurre cuando el usuario interactúa con la página web.

La mayoría de los eventos se refiere a la interfaz del navegador, estos son agregados generalmente a un elemento específico de la página. Otros eventos se refieren a las acciones del navegador, por ejemplo, cuando un documento o una imagen han cargado completamente en la página.

Para capturar un evento sobre un objeto, se asigna una función específica para manejar el evento cuando este suceda.

Muchas etiquetas HTML tienen eventos propios. Se puede definir el código de un script que debe ser ejecutado cuando uno de esos eventos ocurren usando el nombre del evento como un atributo. A continuación se muestra un ejemplo en el cual se manejan dos eventos (onmouseover y onmouseout) del elemento. La palabra reservada this se refiere al objeto que dispara el evento, en este caso es el elemento span.

<html>

<head>
<title> Ejemplo de eventos </title>
//Cambia el color de texto y el fondo del elemento

<span style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Ejemplo con manejadores de eventos
</span>

</head>

<body>
</body>

</html>

Ejemplo con manejadores de eventos

La siguiente tabla resume los eventos más importantes definidos por JavaScript:



Fuentes de información:
• http://librosweb.es/ajax/capitulo_6.html
• http://www.elcodigo.net/tutoriales/javascript/javascript5.html
• http://codigoprogramacion.com/cursos/javascript/eventos-en-javascript-onclick-onload-onmouseoveronmouseout.html#.U2Bw8fl5O-A


ATENTAMENTE: THANAHI MEDRANO RUIZ