Introduccin a JavaScript y CSS

Programacin iiiTecnologa en sistemasUniversidad adventista

POR: Juan gmo montoya

Introduccin a JavaScriptCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012Qu es JavaScript?JavaScript es un lenguaje de script pensado pararealizar diversas tareas dentro de una pgina web.tareas como :Generar dinmicamente contenidos dentro de la pgina web Gestionar algunos eventos del usuario Validar formularios Manipular cookies Interactuar con applets incrustados en la pgina webCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012DIFERENCIAS ENTRE JAVA Y JAVASCRIPTCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012Java es un lenguaje de programacin de propsito general, en el cual se puede abordar prcticamente cualquier proyecto de programacin.JavaScript es un pequeo lenguaje de script diseado para ser ejecutado en el interior de un documento html.Java es un lenguaje compilado e interpretado, y en la fase de compilacin se alerta de los errores sintcticos que hayamos cometido.JavaScript no necesita ser compilado, y por lo tanto no necesita de un compilador. JavaScript es directamente interpretado por el navegador web.Integrar JavaScript en una pgina HTMLCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012Existen 2 formas para agregar un javascript en una pgina htmlIncrustar el cdigo entre las etiquetas head (Se carga antes de visualiza la pgina) o Body (Se visualiza cuando se carga la pgina) //cdigo

Agregar dentro del head la referencia al archivo javascript (Extensin js)

La ruta del archivo (src), es con respecto a la ubicacin de la pagina html.

EjemploJSInterno.html

alert("Esto es un mensaje en JS");

Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012VARIBALES Y TIPOS DE DATOS EN JAVASCRIPTEn JavaScript a diferencia de Java, C++ o C#, por ejemplo, no se declara nunca el tipo de una variable; cuando le asignemos un valor por primera vez esa variable pasar a ser del tipo de dato que le hemos asignado. (Dbilmente tipado)

Podemos definir una variable mediante la palabra clave var:var n;var n = 0; //n es una variable de tipo numricovar n; //variable tipo Undefinedn = hola //n pasa a ser una variable de tipo String.

Cuando le asignemos un valor a esa variable pasar a ser del tipo de dato del valor asignado.Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012FuncionesUna funcin, o procedimiento, es un conjuto de cdigo con un nombre, al cual se le pueden pasar unos argumentos, y que puede o no devolver, como resultado de llamarla, un dato. En JavaScript las funciones se declaran con la palabra reservada function:

function nombreFuncion (argumento1, argumento2){//Cuerpo de la funcionreturn valor; //Esto es opcional, puede no devolver nada}Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012Ejemplo funcion js Interno

EjemploJSInterno.html

function mensaje(){alert("Esto es una funcion JS dentro del HTLM");}

mensaje();

Ejemplo funcion en js Externo

EjemploJSInterno.html

mensaje();

Crear un archivo llamado Mensaje.js

function mensaje(){alert("Esto es una funcion JS llamada externamente del HTLM");}

Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012DOCUMENT OBJECT MODEL (DOM)Es un rbol jerrquico de objetos que los navegador web construyen, a partir de una pgina html.La mayor parte de estos objetos representan propiedades de la pgina html que se est visualizando y del propio navegador web, o los elementos que se visualizan en el documento html (imgenes, applets, formularios, capas). Sin embargo, y desgraciadamente, DOM no est estandarizado. Cada fabricante de navegadores web tiene libertad para implementarlo, lo que provoca incompatibilidades entre navegadores, forzando a escribir scripts distintos para cada navegador y a chequear en que navegador se est ejecutado el script para decidir que versin de ste se ejecuta.Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012DOCUMENT OBJECT MODEL (DOM)Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012

DOCUMENT OBJECT MODEL (DOM)Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012

DOCUMENT OBJECT MODEL (DOM)

ejemploDOM.html

function cambiaObjetosDOM(color){document.bgColor = color;window.document.form.texto.value="No aparece Hola!";}

cambiaObjetosDOM("#000000");

Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012

ejemploDOM.html

function cambiaObjetosDOM(color){/*accedemos a la propiedad bgColor, color de fondo de lapgina y hacemos que tome el valor de la variable argumento*/document.bgColor = color;/*Accedo a un campo de texto ( cuyo atributo NAME es texto)de un formulario de la pgina (con NAME = form) y modifico supropiedad value .*/window.document.form.texto.value="No aparece Hola!";}

//Aunque el texto incial de este campo de es Hola losscripts lo modificarn

cambiaObjetosDOM(#000000");

Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012Accediendo a los elementos del DOM con mtodos JSCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012getElementById : permite acceder a cualquier elemento tan slo conociendo el valor de su atributo id. Etiequeta HTML: Contctenos Codigo JS: var elementoContacto = document.getElementById("contacto");

getElementsByTagName. Acceder a un grupo de elementos

Editorial

Autores

Noticias

Conttenos

Puede obtenerse todos los hipervnculos de la siguiente manera:var hipervinculos= document.getElementsByTagName("a");

El valor de la variable hipervnculos es una coleccin de elementos [a]. Las colecciones sonArreglos.

Var enlace= hipervinculos[0] enlace EditorialVar enlace2= hipervinculos[1] enlace Autores

Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012GESTIN DE EVENTOS EN JAVASCRIPTCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012Los programas de JavaScript suelen funcionar dirigidos por eventos, esto es, se ejecutan en respuesta a una determinada accin del usuario.

Eventos tpicos que se pueden gestionar con JavaScript son cambiar el tamao de la pgina, pulsar un botn de un formulario, ganar o perder el foco un componente de la pgina web, hacer clic en un link.

Para gestionar estos eventos, al igual que en Java, hemos de indicarle al objeto fuente del evento quien es su manejador, y ser ese manejador quien especifique el cdigo a ejecutar para gestionar ese evento.

Para indicar quien es el manejador de un determinado evento de un objeto empleamos el tag de html que define ese objeto:

EVENTOS MAS COMUNESCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012

EVENTOS MAS COMUNESCorporacin Universitaria Adventista Tecnologa de sistemas II- 2012

EJEMPLO

ejemploEventos.html

function CambiarColor(color) {window.document.bgColor=color}

No hagas click aqui

Corporacin Universitaria Adventista Tecnologa de sistemas II- 2012

ejemploEventos.html

function CambiarColor(color) {window.document.bgColor=color}