Lenguaje de programacin usado para dar a las pginas web, mayor interaccin con

el usuario.
Permite entre otras cosas, manipular los objetos de la pantalla. (DOM)
Es ejecutado e interpretado por el navegador. (Lenguaje de cliente)
Basado en C y Java. Integrado a cualquier navegador moderno.
No es lo mismo que Java. Sintaxis similar, pero tiene un objetivo totalmente distinto,
orientado a web.
No es totalmente estndar con todos los navegadores. (Ayuda: frameworks JS)
Inclusin en HTML:
Directamente en el html: (puede colocarse en cualquier lugar del cdigo)
<script type="text/javascript> PROGRAMA EN JAVASCRIPT </script>
Llamando a un archivo externo:
<script type="text/javascript" src="http://localhost/archivo.js"></script>
Como todo lenguaje, se basa en escribir sentencias (Lneas de cdigo separadas por
;)


Los objetos representan componentes de la pgina. Poseen propiedades y mtodos.
Ejemplos: document, window, etc.

Las variables son espacios en memoria para mantener valores. Pueden ser de
distintos tipos y sus valores ser accedidos de distintos lugares.

Las funciones son bloques de cdigo destinados a realizar una secuencia de acciones.
Pueden recibir variables como parmetros y retornan un valor.

Las funciones son llamadas por otras funciones o por el cdigo principal de la
pgina.

Las funciones pueden ser definidas por el usuario, o nativas del lenguaje.
Ejemplos: alert(); confirm(); prompt(); length(); touppercase();

Los eventos son sucesos que se dan durante la vida de una pgina en ejecucin. Es
posible programarlos asocindole funciones.
Ejemplos: onClick(), onKeyPress(), onLoad(), onSubmit(), etc.

Ejemplos de objetos y funciones:
var tag = document.getElementById(titulo);
(obtiene el tag que tiene id = titulo y lo almacena en la variable tag.
alert(Hola mundo!);
(muestra un cuadro de alerta modal con el texto Hola Mundo!)
var respuesta = confirm(Desea proceder?);
(muestra un cuadro de confirmacin con botones Aceptar y
Cancelar. La variable valdr 1 0 dependiendo del botn presionado)
window.location = http://www.google.com.ar;
(redirecciona el navegador a la pgina de google)
var ancho = screen.availWidth();
(almacena en la variable ancho, la cantidad de pxeles horizontales de la
pantalla)
go.history(-1);
(redirecciona el navegador a la pgina visitada anteriormente)

Operador de asignacin:
Signo = (igual). Permite que la expresin a su izquierda tome el valor de la derecha.

Operadores matemticos
Signo + (ms). Permite sumar valores numricos.
Signo - (menos). Permite restar valores numricos.
Signo * (asterisco). Permite multiplicar valores numricos.
Signo / (divisin). Permite divider valores numricos. (siempre que el divisor no sea 0)
Signo ++ (ms ms). Incremento en uno del valor a izquierda.
Signo -- (menos menos). Decremento en uno del valor a izquierda.
Signo += (ms igual). Incremento del valor a izquierda tantas unidades como diga el valor a
derecha. (Suma)
Signo -= (menos igual). Decremento del valor a izquierda tantas unidades como diga el valor a
derecha. (Resta)
Signo *= (asterisco igual). Producto entre el valor a izquierda y el valor a derecha. (Producto)
Signo /= (barra igual). Cociente entre el valor a izquierda y el valor a derecha. (Divisin)
Signo % (porciento). Resto de dividir el valor a izquierda por el valor a derecha. (Mdulo)

Operadores relacionales:

Signo == (igual igual). Permite comparar si dos expresiones son
iguales. (EQUAL)
Signo != (negacin igual). Permite comparar si dos expresiones NO
son iguales. (NOT EQUAL)
Signo > (mayor). Permite comparar si una expresin es mayor que
otra. (GREATER THAN)
Signo < (menor). Permite comparar si una expresin es menor que
otra. (LESS THAN)
Signo >= (mayor igual). Permite comparar si una expresin es mayor o
igual que otra. (GREATER OR EQUAL THAN)
Signo <= (menor igual). Permite comparar si una expresin es menor
o igual que otra. (LESS OR EQUAL THAN)


Operadores lgicos:
Signo && (ampersand ampersand). Da como resultado true, si tanto la
expresin de la izquierda como la de la derecha son true. En caso contrario da
como resultado false. (AND)
Signo || (barra barra). Da como resultado true, si al menos una de las dos
expresiones (de la izquierda y derecha) es true, en caso contrario da como
resultado false. (OR)
Signo ! (negacin). Da como resultado true si la expresin es false, da false en
caso contrario. (NOT)
Signo ^ (circunflejo). Da como resultado true si las expresiones son distintas
(una true y la otra false), da false en caso contrario. (XOR)

Otros operadores
Operador de strings (+): Permite concatenar la cadena de la izquierda con la de
la derecha.
Operadores de bits (&, |, ^, <<, >>)

En Javascript, los tipos de dato de las variables pueden cambiar en un programa. (Coercin)

Tipos de datos simples:
Cadenas de caracteres (Strings)
Son textos. Se inicializan entre comillas.
Existen funciones propias de javascript para manipularlas.

Nmeros enteros
Permiten efectuar operaciones matemticas sin decimales.

Nmeros reales (coma flotante)
Permiten efectuar operaciones matemticas con decimales.
Simple precisin (float) para nmeros reales de baja precisin.
Doble precisin (double) para nmeros reales de alta precisin.

Fechas y horas (Datetime)
Permiten manipular fechas y lapsos de tiempo.

Lgicos (Boolean)
Permiten manipular dos valores: true (verdadero) o false (falso).

Tipos de datos ausentes
Undefined. Valor default cuando una variable no se ha incializado con ningn valor.
Null. Valor explcito definido para considerar que una variable est vaca (tiene valor nulo).



Tipos de datos compuestos:

Arreglos (Array)
Estructura de varios elementos en una misma variable.
Cada elemento tiene un ndice asociado dentro del array.
Existen muchas funciones para manipular arrays.

Objetos
Permiten almacenar claves asociadas a valores y as representar entidades u objetos del mundo
real.

Ejemplos:
var automoviles = ["Saab", "Volvo", "BMW"];
var generos = new Array();
generos*0+ = Femenino;
generos*1+ = Masculino;

var ficha = {nombre:"Juan", apellido:Garca", edad:50, fechaAlta:2014-10-12-;
ficha.nombre = Jorge;



Permite ejecutar un bloque de
programa si se cumple una
condicin y otro bloque si no se
cumple.


Estructura condicional
simple
<script type="text/javascript">
var numero = 5;
switch(numero){
case 1: document.write(Uno); break;
case 2: document.write(Dos); break
case 5: document.write(Cinco); break;
default: document.write(Otro); break;
}
</script>
<script type="text/javascript">
var numero = 5;
if(numero < 0){
document.write(Nro. Negativo);
}else{
document.write(Nro. No negativo);
}
</script>
Permite ejecutar varios bloques de
programa si se cumple alguna de
varias condiciones posibles.
Permite ejecutar un bloque por
default.


Estructura condicional
mltiple

while (condicin){
Bloque de cdigo;
}


Estructuras iterativas
<script type="text/javascript">
var numero = 1;
do{
document.write(numero);
numero = numero + 1;
} while(numero < 5);
</script>
<script type="text/javascript">
var numero = 1;
while(numero < 5){
document.write(numero);
numero = numero + 1;
}
</script>
do{
Bloque de cdigo;
} while (condicin);


for(inicializacin; lmite; incremento) {
Bloque de cdigo;
}


<script type="text/javascript">
for(i=1; i<5; i++){
document.write(i);
};
</script>

Librera de funciones y utilidades para trabajar con javascript.
Tiene una sintaxis simple (aunque requiere dominar JS), basada en combinacin de funciones.
Los resultados obtenidos siempre son crossbrowser.
Por lo general reduce la cantidad de cdigo javascript.

Inclusin de librera:
Es posible utilizarla online. (referenciando la version pblica de googleapis, por ejemplo)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
O bajarla del sitio de jquery (http://jquery.com/download) e incluirla en nuestro html.

Ejemplos de uso:







<script type="text/javascript">

$(body).css(,border-color, Red-);

</script>
<script type="text/javascript">
$(window).load(function(){
alert(La pgina cargo!);
});
</script>

El framework se basa en el uso de selectores. Para seleccionar un elemento se usa el signo $.
$(selector) permite aplicar alguna funcin o modificacin sobre un elemento del formulario.

Selectores:
Por nombre de tag:
Ejemplo: Seleccionar los tags tipo input: $(input)
Por id del tag:
Ejemplo: Seleccionar los tags con id = Usuario: $(#Usuario)
Por clase del tag:
Ejemplo: Seleccionar los tags con class = Boton: $(.Boton)
Por descendencia del tag:
Ejemplo: Seleccionar los tags prrafo que son hijos directos de divs: $(div > p)
Por orden de descendencia del tag:
Ejemplo: Seleccionar los tags prrafo que son primeros hijos: $(p:first-child)
Por atributo del tag:
Ejemplo: Seleccionar las opciones de una combo que fueron elegidas: $(:selected)

Referencias para mayor informacin: http://www.w3schools.com/jquery/jquery_ref_selectors.asp




Una vez utilizado un selector, el paso siguiente es emplear una funcin.
Existe multiples funciones para realizar diversas tareas.

Algunas funciones:
Definir atributo css:
Ejemplo: $(input).css(font-family, Verdana);
Definir atributo de html:
Ejemplo: $(input).attr(name, usuario);
Ocultar tags:
Ejemplo: $(input).hide();
Visualizar tags:
Ejemplo: $(input).show();

Es posible combinar funciones y crear expresiones ms complejas. Ejemplo:
$(input).css(
font-family,
$(#titulo :first).css(font-family)
);
Asignara a todos los input, un tipo de fuente igual a la que tenga el primer tag con id = titulo.
Referencias para mayor informacin: http://api.jquery.com/


Crear una pgina que al ingresar te salude (mencionando tu nombre) con un cuadro
de alerta.

Crear una pgina con un cuadro de texto y un botn. Al hacer clic en el botn, si el
cuadro est vaco debe informar con un cuadro de alerta que debes escribir algo. Si
no, mostrar el cuadrado del nmero ingresado.

Igual al anterior, pero agregar un ttulo que diga Fahrenheit y al presionar el botn,
debe calcular la temperatura en grados Fahrenheit a partir de los grados Centgrados
ingresados.
Frmula: Grados Fahrenheit = Grados Centgrados x (5/9) + 32

En el ejercicio del login. Validar que los cuadros no estn vacos. En cada caso, emitir
un cuadro de mensaje que indique el error. Si no hay errores, emitir un cuadro de
confirmacin que diga Confirma el ingreso al sistema?. Si se responde Aceptar,
redireccionar a la pgina del CESSI (www.cessi.org.ar)

Armar una pgina con dos cuadros de textos, colocarles un id a cada uno.
Agregar un botn que diga Confirmar, y un span vaco en la parte inferior.
Con JQuery: al hacer clic en el botn, validar que los campos no estn vacos
(mostrar un mensaje sobre el span en dicho caso), y de no estarlos, mostrar el
contenido del primer cuadro, junto a un espacio, junto al contenido del segundo
cuadro, sobre el span.
Si en el 1 cuadro se carg Claudio y en el 2 Delgado, en el span debe salir
Claudio Delgado.
Si el 1 cuadro est vaco, en el span debe salir Falta completar el cuadro 1.
Si el 2 cuadro est vaco, en el span debe salir Falta completar el cuadro 2.

Igual al anterior, pero ahora si alguno de los cuadros est vaco, colocar un fondo rojo
sobre el cuadro vaco.

En el ejercicio anterior, agregar que al pasar el foco a un cuadro (con clic o con tab),
automticamente se vaya el color rojo.