7 Introduccion a JavaScript
-
Upload
millan2993 -
Category
Documents
-
view
236 -
download
4
description
Transcript of 7 Introduccion a JavaScript
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}