Módulo Proyecto. JAVASCRIPT. Elena

¿QUÉ ES JAVASCRIPT?

JavaScript (JS) es un lenguaje de programación, dialecto del estándar ECMAScript (estándar internacional que define a JavaScript). JavaScript es un lenguaje ampliamente utilizado en el mundo del desarrollo web por ser muy versátil y potente, tanto para la realización de pequeñas tareas como para la gestión de complejas aplicaciones. Además de la web podemos encontrarlo en otros entornos, como es el lenguaje ActionScript de Macromedia, que acompaña al sistema Flash. JavaScript es un lenguaje interpretado que, al contrario de las aplicaciones normales, que son ejecutadas por el sistema operativo, es ejecutado por el navegador que utilizamos para ver las páginas. Eso hace que podamos desarrollar aplicaciones muy diferentes, desde generadores de HTML, comprobadores de formularios, etc. También podremos desarrollar aplicaciones que permitan tener capas en una página como si fueran ventanas, y dar la sensación de estar trabajando con una aplicación con interfaz de ventanas.

¿PARA QUE SE UTILIZA?

Podemos utilizar este lenguaje para:

• Sistemas operativos
• Administración de sistemas, tanto Linux como Windows
• Plataformas de juegos
• Bases de datos
• Desarrollo Movil
• Páginas dinámicas (DHTML)
• Comprobación de datos (Formularios)
• Uso de los elementos de la página web
• Intercambiar información entre páginas web en distintas ventanas
• Manipulación de gráficos, texto, etc...
• Comunicación con plug-ins: Flash, Java, Shockwave, etc...

¿CÓMO EMPEZAR CON JAVASCRIPT?

Para empezar a programar con java script debes saber que podrás ulilizar:

La consola nos va a permitir ejecutar órdenes sencillas de JavaScript, para probar su funcionamiento.

La consola de JavaScript es un panel que se abre en la parte inferior del navegador para no interferir con el contenido principal, pero se puede mover y cambiar su tamaño. En cada navegador web posee un aspecto y se abre de forma diferente. Por ejemplo:

• En el navegador Firefox podemos usar las teclas Control + Mayus + J para abrir el panel de la consola.
• En el navegador Google Chrome de forma similar a Firefox podemos usar las teclas Control + Mayus + J y a continuación Escape.
• En el navegador Internet Explorer basta con presionar la tecla F12.

El caso de querer ejecutar funciones más complejas de JavaScript, nos resultará insuficiente. Para solucionar este inconveniente se puede utilizar otra herramienta denominada Borrador, que viene a ser un pequeño editor de textos que nos permite teclear más codigo para su ejecución.

Para acceder al “Borrador”, se ha de seleccionar la opción “Borrador”, desde el menú “Desarrollador Web”. Como se puede observar se abre una nueva ventana y es un editor que puedes usar para escribir y ejecutar JavaScript en el navegador. Puedes también guardar los scripts en el disco y cargarlos desde el disco. Si eliges “Mostrar”, el bloque de código tecleado en el borrador, es ejecutado en el navegador y el resultado es insertado de nuevo dentro del bloque como un comentario.

CARACTERÍSTICAS DE JAVASCRIPT

Hay que tener en cuenta que JavaScript es un lenguaje similar a otros como C, Java o PHP, tanto en su formato como en su sintaxis pero con sus propias características. JavaScript es un lenguaje que diferencia entre mayúsculas y minúsculas, por lo que si escribimos alguna expresión en minúsculas, deberemos mantener esa expresión en minúsculas a lo largo de todo el programa y si por el contrario escribimos esa misma expresión en mayúsculas, será una expresión diferente a la primera. Otra característica es que podemos encerrar las expresiones que escribamos con una serie de caracteres especiales. Estos caracteres se denominan operadores y sirven tanto para encerrar expresiones como para realizar trabajos con ellas, como operaciones matemáticas o de texto. Los operadores que permiten encerrar expresiones deben abrirse siempre. '(', '{' y '[' y deben cerrarse con sus correspondientes ')', '}' y ']', respectivamente. Como JavaScript es un lenguaje de formato libre, podemos escribir las líneas de código de la forma que consideremos mejor, aunque por supuesto debemos escribir siempre de la forma correcta. Por ejemplo:Podemos escribir las líneas con un número variable de espacios:

   variable = "Unicarlos";
   variable=" Unicarlos ";
       variable =" Unicarlos ";
   variable= " Unicarlos "   ;
	

Esto significa que podemos añadir tabuladores al inicio de la línea para justificar los párrafos de código. También podemos romper las líneas de texto si consideramos que son demasiado largas:

   document.write("Proyecto \
   final");
	

Pero no podremos hacer esto:

   document.write \
   ("Proyecto final");
	

Sólo podemos romper cadenas de texto(("Proyecto final")), no instrucciones (document.write). En ocasiones tenemos que escribir algunos caracteres especiales llamados "de escape", porque en ocasiones hay que utilizar algunos caracteres no imprimibles, como por ejemplo:

   document.write ("Este es el proyecto \"final\".");
	

Podemos ver que al introducir comillas dobles dentro de la cadena de caracteres, debemos añadir la barra invertida '\' para escapar las propias comillas, aunque esta misma expresión se podía haber escrito así:

   document.write ("este es el proyecto 'final'.");
	

Otro aspecto importante de JavaScript es la necesidad o no de utilizar el punto y coma ';' al final de las instrucciones (sirve para delimitar las instrucciones), pero su uso es opcional en JavaScript. Si usamos este operador, podemos incluir varias sentencias en la misma línea de código, y si no lo usamos, solo podemos escribir una sentencia cada vez. De todas formas, es aconsejable usar el punto y coma porque en otros lenguajes como PHP o Java, este operador sí que es obligatorio.

GUIA BASICA Y EJEMPLOS

• Operadores Lógicos

Los principales operadores lógicos que se utilizarán en comandos condicionales son:

    * = = : igual
    * ! = : diferente
    * > : más
    * > = : Mayor o Igual
    * < : menos
    * <= : Menor o Igual
    * && : y
    * || : o
	

• Operadores Matemáticos

Los operadores matemáticos que se utilizan en cálculos, referencias de indizadores y manejo de cadenas son:

Estos operadores serán ampliamente utilizados, por lo que tendremos una noción más precisa de su funcionamiento

    * + : adición de valor y concatenación de cadenas.
    * - : sustracción de valores
    * * : multiplicación de valores
    * / : división de valores
    * % : obtiene el resto de una división
    *   * 
  * Controles Especiales
	

Los delimitadores naturales para una cadena son "(comillas dobles) o" (comillas simples). Si es necesario utilizar estos caracteres como parte de la cadena, utilice \ precediendo "o". Como por ejemplo: alert ("Cuidado con el uso de \" o \ 'en una cadena ")

• \ b: de retroceso
• \ f: fuente de alimentación
• \ n: nueva linea de caracteres
• \ r: carriage return
• \ t: letras de canciones

• Estructuras de control o comandos condicional

Existen algunas estructuras de control que le permiten modificar el flujo de ejecución de un programa o es que tienen comandos que condicionan la ejecución de una cierta tarea a la veracidad o no de una determinada condición o cuando determinada condición es verdadera.

Estos son:

Comando IF

if (condicion) { /*acción para condición satisfecha*/ }[ else{ /*acción para condición no satisfecha*/ } ]Ejemplo :if (Edad <>{Categoría = "Menor" }else{Categoría = "Mayor"}

Comando FOR

for ( [inicializacion/creación de variablesde control;][condición ;][incremento da variable de controle] ){ acción }Ejemplo.for (x = 0 ; x <= 10 ; x++){alert ("X igual a " + x) }

Comando WHILE

Ejecuta una acción mientras se cumple cierta condición.while (condicion){ acción }Ejemplo.var contador = 10while (contador > 1)

{ contador-- }Mueve condicionalreceptor = ( (condicion) ? verdadero : falso)Ejemplo.NomeSexo = ((VarSexo == "M") ? "Masculino" : "Femenino")

• Eventos

Los eventos son hechos que ocurren durante la ejecución del sistema, a partir de los cuales usted puede definir acciones a ser realizadas por el programa. A continuación se presenta la lista de los eventos posibles, indicando los momentos en que pueden ocurrir, así como los objetos pasibles de su ocurrencia.

    * onload: Ocurre en la carga del documento. Es decir, sólo ocurre en el BODY (cuerpo) del documento.
    * onunload: Ocurre en la descarga (salida) del documento.También sólo ocurre en el BODY (cuerpo).
    * onchange: Ocurre cuando el objeto pierde el foco y ha habido un cambio de contenido. Válido para los objetos Text, Select y Textarea.
    * onBlur: Ocurre cuando el objeto pierde el foco, independientemente de que haya habido cambio.Válido para los objetos Text, Select y Textarea.
    * onfocus: Ocurre cuando el objeto recibe el foco. válido para los objetos Text, Select y Textarea.
    * onclick: Ocurre cuando el objeto recibe un clic del ratón.válido para los objetos Buton, Checkbox, Radio, Link, Reset y Submit.
    * onmouseover: Ocurre cuando el puntero del ratón pasa por encima del objeto. sólo válido para Link.
    * onselect: Ocurre cuando se selecciona el objeto. Válido para los objetos Text y Textarea.
    * onsubmit:Ocurre cuando un botón de tipo Submit recibe un clic del ratón. Válido sólo para el formulario.
	

• Estructuras básicas

Las páginas web se componen de código HTML (HyperText Markup Language), y para incluir el código Javascript utilizamos una marca HTML, <script>. Esta marca puede encontrarse en cualquier parte de la página web, tanto en el <head> como en el <body>. Aunque <script> es la forma más corta, existen otras formas de definir código script. Por ejemplo <script language="JavaScript">. W3C recomienda utilizar el tag <script type="text/javascript">.

Este ejemplo mostrará un número '4' en el navegador. Además, podemos especificarle el lenguaje en el que queremos programar. Javascript ya que es universal es el más cómodo en mi opinión, ya que todos los navegadores lo soportan, mientras que otros lenguajes dependen de la plataforma donde nos encontremos. Para indicar el lenguaje, podemos escribir lo siguiente:

   <script language="Javascript">
   
   </script>
	

De esta forma indicamos el lenguaje a usar. Esto es necesario en el caso de que tengamos que usar lenguajes combinados en la misma página, como en el caso de que queramos enlazar una película flash con nuestra página web. Otra forma de escribir JavaScript en una página web es utilizando los eventos de las etiquetas HTML. Las etiquetas HTML tienen varios "eventos" que responden a determinados sucesos, como por ejemplo el click del ratón, el envío de un formulario, o la carga de una página. Por ejemplo, si queremos que aparezca un mensaje al cargar la página que estamos viendo, haríamos algo como esto:

texto

Esto hará que aparezca un mensaje nada más cargar la página web. También podemos aplicar estos eventos como enlaces, botones, imágenes, etc. Prácticamente cualquier etiqueta HTML soporta eventos como onclick, que permite responder a una pulsación del botón izquierdo del ratón.

Unicarlos

En este ejemplo vemos cómo al mismo tiempo que vamos a Unicarlos, el navegador nos avisa de lo que vamos a hacer antes de que ocurra. Este tipo de acciones se pueden usar para comprobar formularios antes de enviar los datos.Y una última manera de ejecutar código Javascript es adjuntando un archivo al código principal, de tal forma que podemos agrupar las funciones, clases y demás en un archivo, y reutilizar ese archivo tantas veces como queramos posteriormente. Por ejemplo:

funciones.js:

   function saludo(nombre) {
           alert('Hola, ' + nombre);
   }
	

saludo.html:

En este ejemplo vemos cómo podemos incluir un código Javascript desde otro archivo y utilizar las funciones incluidas dentro de nuestro código, en tantos archivos como queramos. De esta forma podemos reutilizar el código todo lo necesario.