15 enero 2010

Sentencias

Cada script consiste en un conjunto de sentencias separadas por ;
Primera sentencia;
Segunda sentencia;

Comentarios

Algunas veces es útil escribir comentarios sobre qué hace el script. JavaScript permite dos formas de comentarios:
   // Comentarios de una línea
   /* comentarios de
   varias lineas */
También se puede utilizar para comentar trozos de código.

Variables

Una variable permite almacenar un dato
Son declaradas usando la palabra reservada var. Los nombres de las variables pueden tener cualquier longitud y contener números, letras, y ciertos caracteres alfa-numéricos. Los nombres de las variables son sensibles a mayúsculas y minúsculas:
  var MIVAR;
  var mivar;
Las variables puede tener su valor asignado cuando se declaran
  var cat = 'Sabina';

Tipos de datos

Los tipos de datos que se pueden almacenar en una variable son:
  • Números :
  • var my_age = 28; var birth_year = 1977; var negNum = -1.9304;
  • Cadenas : "texto"
  • var empty = ''; var girl_cat = 'Sabine'; var boy_cat = "Dakota"; var zip_code = '06517';
  • Booleanos:
  • var mujer = false; // No soy una mujer var hombre = true; // Soy un hombre

Operadores

Aritméticos: +, -, *, /, %, ++, --
Asignación: =, +=, -=, *=, /=, %=
<script language="JavaScript" type="text/javascript">

<!--
precio = 128 //introduzco un 128 en la variable precio
unidades = 10 //otra asignación, luego veremos operadores de asignación
factura = precio * unidades //multiplico precio por unidades, obtengo el valor factura
resto = factura % 3 //obtengo el resto de dividir la variable factura por 3
precio++ //incrementa en una unidad el precio (ahora vale 129)

ahorros = 7000 //asigna un 7000 a la variable ahorros
ahorros += 3500 //incrementa en 3500 la variable ahorros, ahora vale 10500
ahorros /= 2 //divide entre 2 mis ahorros, ahora quedan 5250
//-->
Comparación: ==, !=, >, <, >=, <=
Lógicos: &&, ||, !

Funciones

Conjunto de instrucciones que determinan procesos independientes que se suelen realizar de forma repetida. Se podrá ejecutar en el momento que se desee y tantas veces como sea necesario. Las funciones a utilizar pueden ser las creadas por el usuario o las ya definidas por el sistema (ej.alert)
Para definir una función:
Una función que muestra un mensaje de bienvenida
   function escribirBienvenida(){
      document.write("Hola a todos");
   }
Para llamar a una función:
   escribirBienvenida()
Para mandar valores a una función con los que ella trabajará para realizar las acciones se utilizan los parámetros:
   function escribirBienvenida(nombre){
      document.write("<H1>Hola " + nombre + "</H1>")
     }
Para llamar a una función:
   escribirBienvenida("Susana")
Las funciones pueden devolver valores:
   function media(valor1,valor2){
     var resultado
     resultado = (valor1 + valor2) / 2
     return resultado
   }
Un ejemplo de función (enlazar con funcion.txt)

Sentencias Condicionales

Para realizar unas acciones u otras en función del estado de las variables
Si edad es mayor que 18 entonces
Te dejo ver el contenido para adultos
Si no
Te mando fuera de la página
   if (edad>=18)
   {
     document.write("<H1>Mi página</H1>");

   }
   else
   {
     location.replace("http://www.uc3m.es");
   }

Sintaxis

  if (condicion)
    {
       //código para condición = true
    }
    else
    {
       //código para condición = false
    }

Sentencias de bifurcación

Tomar decisiones en función de distintos estados de las variables
   switch (dia_de_la_semana){
     case 1:
       document.write("Es Lunes");
       break;
     case 2:
       document.write("Es Martes");
       break;
     case 3:
       document.write("Es Miércoles");
       break
     case 4:
       document.write("Es Jueves");
       break;
     case 5:
       document.write("Es viernes");
       break;
     case 6:
     case 7:
       document.write("Es fin de semana");
       break;
     default:
       document.write("Ese día no existe");
    }

Sintaxis

   switch (expresion)
      {
         case etiqueta1:
             //código si la expresion = label1
             break
         case etiqueta2:
             //código si la expresion = label2
             break
         default:
             //código si la expresión no es ninguna de las anteriores
      }

Sentencias repetitivas

El bucle FOR se utiliza para repetir las mismas instrucciones un determinado número de veces
Escribir desde 0 hasta 10 de uno en uno
   var i
      for (i=0;i<=10;i++) {
         document.write(i)
      }

Sintaxis

   for (inicializacion; condicion; incremento)
      {
         //código
      }
El bucle WHILE se utiliza para repetir la ejecución de sentencias un número indefinido de veces, siempre que se cumpla una condición
         mientras tenga credito
           seguir comprando

         while (credito>=0){
           credito -= valorCompra;
         }

Sintaxis

        while (condicion)
          {
            //código
          }
El bucle DO-WHILE se diferencia del while en que sabemos seguro que el bucle por lo menos se ejecutará una vez
        preguntar la edad al usuario
        hasta que esté comprendida entre 18 y 95 años

        do{
           edad=prompt('¿que edad tienes?','') }
        while(!(edad>18 && edad<95))

Sintaxis

        do
        {
              //código
        }
        while (condicion)


Etiquetas:

Objetos Predefinidos


ESTÁNDARES WEB
Tema 2.Presentación de datos en la Web
Objetos predefinidos


JavaScript es un lenguaje orientado a objetos. Un objeto es una colección de datos auto-contenidos. Cada objeto tiene acceso a un conjunto de propiedades y de métodos. Las propiedades son valores asociados a un objeto. Por ejemplo:
   <script type="text/javascript">
   var txt="Hola!"
   document.write(txt.length)
   </script>
el objeto txt de tipo String almacena en la propiedad length el valor 5, es decir el número de caracteres almacenados en la variable txt
Los métodos son las acciones que se pueden realizar sobre los objetos. En el ejemplo anterior se ha utilizado el método write sobre el objeto document. El objeto documentrepresenta a todo el documento HTML sobre el que se encuentra el código JavaScript, y el método write permite escribir texto sobre el de manera dinámica
A continuación se presentan los objetos predefinidos en JavaScript organizados en dos grupos. Para cada uno de ellos se incluye un enlace donde se puede encontrar un listado detallado de sus propiedades y métodos.

Objetos del Lenguaje

 String. El objeto String se utiliza para manipular texto. Para crear un objeto basta con inicializar una variable con una cadena de caracteres.
   var text=" ";
Ejemplo: string

Un listado detallado de sus propiedades y métodos se puede encontrar enhttp://www.w3schools.com/jsref/jsref_obj_string.asp

 Array. El objeto Array es utilizado para almacenar un conjunto de valores en una única variable.

La creación de un array se lleva a cabo con la sentencia:
    mi_array = new Array(); //vacío
    otro_array = new Array (10); //con espacio para 10 valores

Para añadir valores:
    mi_array [0]="Hola"
    mi_array [1]=3 //pueden ser de diferente tipo

o durante la creación del objeto
    var mi_array = new Array("Hola", 3);

Ejemplo: array

Un listado detallado de sus propiedades y métodos se puede encontrar enhttp://www.w3schools.com/jsref/jsref_obj_array.asp 

 Date: para trabajar con fechas y horas
Para crear objetos Date:
VarFecha=new Date();//inicializa con la fecha y la hora actual
VarFecha=new Date(2007,10,3); //año, mes, dia
VarFecha=new Date(2007,10,3,22,30,30);//año,mes,dia,hora,min,sg

Ejemplo: date

Un listado detallado de sus propiedades y métodos se puede encontrar enhttp://www.w3schools.com/jsref/jsref_obj_date.asp 

Otros objetos predefinidos del lenguaje son

Objetos del Navegador

Esta jerarquía tiene un nombre: Modelo de Objeto de Documento (DOM).
En la figura se muestra la jerarquía de objetos de JavaScript para Netscape Navigator 4.x. (figura de la izquierda) y IE 4.x/5.x (figura de la derecha) relacionados con el navegador y el documento que lo contiene. La parte que está sombreada en la figura de la derecha es lo que tienen en común ambas jerarquías.
La jerarquía hay que interpretarla de izquierda a derecha y de arriba hacia abajo. Así el objeto que está en lo más alto es window (la ventana del navegador) que tiene como propiedades Frame, Document, Location, History, que a su vez son objetos con sus propias propiedades y métodos.
A continuación presentamos aquellos más relevantes.
 Window. representa a la ventana o a un marco

Propiedades
defaultStatus: Contiene el mensaje para la barra de estado

frame: Es un array que contiene todos los frames de la ventana

length: Contiene el número de frames que tiene la ventana

name: Contiene el nombre que se le ha asiganado a la ventana al definirla o crearla

parent: Es el nombre de la ventana principal

self: El nombre de la ventana
top: Contiene el nombre de la ventana principal en el navegador

window: Nombre de la ventana actual
Métodos
alert(texto):Muestra en una ventana popup un texto

confirm(texto): Devuelve un valor true si se pulsa el botón OK, y un valor false si se pulsa el botón Cancel.

close():
 Cierra una ventana referenciada, sino cierra la que ha invocado el método

open("Url","Nom_Ventana","Grup_Elements");:
 Abre una nueva ventana en el navegador

prompt (mensaje, [CampoEntrada]):
 La cadena de caracteres se visualizará en negrita

setTimeout: 
Sirve para evaluar una expresión al cabo de un número de milésimas de segundos. Se ejecuta una vez
clearTimeout: Cancela el Timeout especificado en el método anterior.
Ejemplo: window

Ejemplo de código:
<HTML>
<HEAD><TITLE>Pruebas JavaScript. Ventanas</TITLE>
<SCRIPT>
<!--
function crear_ventana()
{
nueva_ventana=window.open("","Hola"
,"toolbar=1,status=1,heigh=100,width=400");
nueva_ventana.document.write("<HTML>");
nueva_ventana.document.write("<TITLE>
Mi ventana</TITLE>")
nueva_ventana.document.write("<BODY>")
nueva_ventana.document.write("Una nueva ventana");
nueva_ventana.document.write("<FORM>");
nueva_ventana.document.write("<INPUT TYPE='button' NAME='Cerrar' VALUE='Cerrar'
onClick='window.close()'>")
nueva_ventana.document.write("</FORM>");
nueva_ventana.document.write("</BODY>");
nueva_ventana.document.write("</HTML>");
nueva_ventana.document.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="F1">
<INPUT TYPE="button" NAME="Botón" VALUE="Crear Ventana"
onClick="crear_ventana()">
</FORM>
</BODY>
</HTML>




Ejemplo de ejecución:
Más información sobre este objeto se puede encontrar enhttp://www.w3schools.com/htmldom/dom_obj_window.asp .

 document. contiene información sobre el actual documento y proporciona métodos para mostrar HTML

Propiedades
alinkColor: Color para el link activado

anchors: Array de anclas del documento

bgColor:
 Color de fondo

cookie: 
Especifica una cookie

fgColor:
 Especifica el color del texto

forms:
 Array que contiene los formularios

images:
 Array que contiene las imagenes. lastModified: Fecha de la última modificación del documento

linkColor: 
Color de los links

links:
 Array que contiene todos los links del documento

location:
 Contiene el URL del documento

referrer:
 Contiene el URL del documento desde donde ha sido llamado

title:
 Contiene el título del documento

vlinkColor:
 Color de los links visitados
Métodos
clear(): Borra el contenido del documento

close(): Cierra el documento

open(mimetype): Abre un documento para escritura

write(cadena): Inserta texto

writeln(cadena): Inserta texto y salta de línea
Ejemplo: document

Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script LANGUAGE="JavaScript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) {
roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) {
roll = 'true'; }
else { roll = 'false'; }
function msover(img,ref)
{
if (roll == 'true')
{ document.images[img].src= ref; }
}
function msout(img,ref)
{
if (roll == 'true')
{ document.images[img].src=ref; } }
//-->
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<a href="aqui ponemos un link si queremos"
onMouseOver="msover('image1','imagen_02.gif');"
onMouseOut="msout('image1','imagen_01.gif');"><img name="image1"
src="imagen_01.gif" border="0" width="88" height="32"></a>
</BODY>
</HTML>



Ejemplo de ejecución:
Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_document.asp 

 navigator. Permite recuperar información sobre el navegador, para poder determinar durante la ejecución lo que admite o no el navegador y así poder tomar ciertas decisiones

Propiedades
appName: Proporciona el nombre del navegador

appVersion: Número de versión del navegador

appCodeName: Nombre de código de la aplicación

userAgent:
 Agente de usuario que se envía a través de HTTP como encabezado

cookieEnabled: Proporciona si se admiten o no cookies

javaEnabled: Proporciona si esta disponible la Java Virtual Machine

Métodos
No tiene.
Ejemplo: navigator
Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Nombre:"+navigator.appName+"<br>");
document.write("versión:"+navigator.appVersion+"<br>");
document.write("Código:"+navigator.appCodeName+"<br>");
document.write("Agente de Usuario:"+navigator.userAgent+"<br>");
//-->
</SCRIPT>
</BODY>
</HTML>



Ejemplo de ejecución:

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_navigator.asp 
 location. contiene información referente al URL de la página actual.

Propiedades
hash:Incluye la sección de la URL que prosigue al carácter # si existe.

host: Contiene el nombre del host (ordenador).

hostname: especifica el nombre, el nombre de dominio o dirección IP del host dentro de la red

href: especifica el URL entero

pathname: Contiene la ruta o camino del recurso (página web, archivo, etc.) dentro del URL

port: Especifica el puerto de comunicaciones que utiliza el server para comunicarse

top: Contiene el nombre de la ventana principal en el navegador

protocol: especifica el tipo de protocolo (http:, ftp:, mailto: )
Métodos
reload(): La página actual se recargue

replace(URL): Sustituir el documento actual por el especificado en URL
Ejemplo: location
Ejemplo de código:
<HTML>
<HEAD>
<TITLE> Prueba de JavaScript </TITLE>
<SCRIPT>
<!--
function IrA(destino)
{
window.location.hash=destino;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Página de Prueba</h1>
<BR>
<BR>
<A NAME="primero">Primero</A>
<FORM NAME="F1">
<INPUT TYPE="button" VALUE="Segundo" onClick="IrA('segundo')">
<INPUT TYPE="button" VALUE="Tercero" onClick="IrA('tercero')">
</FORM>
<p><BR><p><BR><p><BR>
<p><BR><p><BR><p><BR><p><BR><p><BR><p><BR><p><BR><p><BR>
<A NAME="segundo">Segundo</A>
<FORM NAME="F2">
<INPUT TYPE="button" VALUE="Primero" onClick="IrA('primero')">
<INPUT TYPE="button" VALUE="Tercero" onClick="IrA('tercero')">
</FORM>
<BR><BR><BR><BR><BR><BR><p><BR><p><BR><p><BR><p><BR>
<A NAME="tercero">Tercero</A>
<FORM NAME="F3">
<INPUT TYPE="button" VALUE="Primero" onClick="IrA('primero')">
<INPUT TYPE="button" VALUE="Segundo" onClick="IrA('segundo')">
</FORM>
</BODY>
</HTML>



Ejemplo de ejecución:

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_location.asp 

 history: contiene todas las URL que haya visitado el usuario durante una sesión

Propiedades
length: Número de elementos en la lista de URLs
Métodos
back(): Retrocede un elemento de la lista de páginas visitadas

fordward(): Adelanta un elemento de las páginas visitadas

go(numero): va al número especificado a partir de la actual
Ejemplo: history

Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM>
<INPUT TYPE="button" VALUE="Atras" onClick="history.go(-1)">
<INPUT TYPE="button" VALUE="Avanzar" onCLick="history.go(1)">
</FORM>
</BODY>
</HTML>



Ejemplo de ejecución:

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_history.asp 
 screen: permite recuperar información sobre las capacidades de la pantalla

Propiedades
height: Altura en pixels

width: Anchura en pixels

colorDepth:
 Número de bits de color por pixel

updateInterval:
 Frecuencia con la que se refresca la pantalla
Métodos
No tiene.
Ejemplo: screen

Ejemplo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Altura:"+screen.height+"<br>");
document.write("Anchura:"+screen.width+"<br>");
document.write("Color:"+screen.colorDepth+"<br>");
document.write("Buffer:"+screen.bufferDepth+"<br>");
document.write("Refresco:"+screen.updateInterval+"<br>");
//-->
</SCRIPT>
</BODY>
</HTML>



Ver ejemplo de ejecución 

Más información sobre este objeto se puede encontrar en
http://www.w3schools.com/htmldom/dom_obj_screen.asp


Etiquetas: