JavaScript Básico

UNIVERSIDAD NACIONAL DE INGENIERIAFacultad de Ingeniería Industrial y de Sistemas

Centro de Cómputo – Sistemas UNI

JavaScript Básico Introducción Netscape introdujo al JavaScript con el nombre de LiveScript en su versión beta del Netscape Navigator 2.0. Cuando hizo el definitivo 2.0 cambió el nombre a JavaScript. JavaScript es un lenguaje diseñado para crear aplicaciones dinámicas "on-line". Estas aplicaciones unen objetos y recursos en el cliente y en el servidor.

Características de JavaScript Simple Como es un lenguaje simple, el desarrollador web puede crear páginas dinámicas sin necesidad de convertirse en un programador experto

Dinámico Una página web se convierte en dinámica cuando responde a eventos generados por el usuario u otro objeto. Con documentos HTML tradicionales, las aplicaciones del extremo del servidor tenían la responsabilidad de manejar los eventos pero JavaScript transfiere esa responsabilidad al extremo del cliente, lo que hace el diseño de las páginas web más flexible, dinámico y con una respuesta más rápida.

JavaScript está basado en objetos No es un lenguaje orientado a objetos como Java o C++ pero interacciona con los objetos. Un lenguaje de programación tiene clases, herencia y tipos de variables, cosas de las que JavaScript carece. Sin embargo, interacciona con los objetos a los que expone al entorno. JavaScript puede acceder a objetos en el navegador. Esta capacidad de interactuar con diferentes objetos le da una flexibilidad mucho mayor que muchos programas complejos.

Utilidades de JavaScript Lleva al cliente bastante parte de la acción del servidor con lo que éste se

descarga. Permite validar los campos de formularios antes de enviarlos al servidor. Posibilita que los documentos HTML respondan a eventos locales. Posibilita al programador comunicar información hacia y desde applets y

plugins. Con JavaScript del lado del servidor, cada usuario puede tener un perfil

único y personalizado que le permita configurar páginas web a medida. Permite accedes a bases de datos vía SQL u ODBC.

Inclusión de JavaScript en HTML<SCRIPT LANGUAJE="JavaScript"> ....código</SCRIPT>

Mi Primer Script<HTML><HEAD><SCRIPT LANGUAJE="JavaScript"> document.write("Hola Mundo!")

</SCRIPT></HEAD>

Prof. Daniel Ramos Castañeda Pag. 1 - 10 [email protected]



<BODY>Este es mi primer script.</BODY></HTML>

Manejo de eventosLos eventos convierten una página estática en una página dinámica interactiva. Los eventos se producen por acciones del usuario, como pulsar un botón del mouse, o enviar un formulario o salir de una página.

VariablesEn JavaScript no se asigna en la declaración el tipo de variable sino que el intérprete se encarga de esta tarea.var miVariable;miVariable = 2;

Alcance de las VariablesJavaScript permite dos alcances distintos para las variables:Variables LocalesSólo se aplican dentro de una función Variables Globales Se declaran fuera de una función

Operadores AritméticosEl propósito de lo operadores aritméticos es calcular un valor numérico sencillo a parte de los valores numéricos de literales o variables.JavaScript soporta los operadores matemáticos estándar de Suma(+), Resta(-), Multiplicación(*) y División(/).También tiene los de Módulo(%), Incremento(++), Decremento(--) y Negación(-).

Operadores LógicosNecesitan que los operandos sean booleanos (verdadero o falso) y devuelven un valor lógico.AND Lógico (&&)OR Lógico (||)NOT Lógico (!)

Operadores de comparaciónEstos operadores se aplican a comparaciones entre valores numéricos o de caracteres y no sobre boolenos.Igual (= =)Distinto (!=)Mayor (>)Menor (<)Mayor o igual (> =)Menor o igual (< =)

Operadores StringsEl operador de strings (+) concatena dos valores de strings y devuelve otro que es la unión de los dos primeros;"Java" + "Script"devuelve




"JavaScript"

Orden de precedenciaEn expresiones complejas, con más de un operador, la precedencia de los operadores determina el orden de cálculo.

Tabla de Precedencia de menor a mayor de los operadores de JavaScriptDescripción OperadoresAsignación = += -= *= /= %= <<= >>= >>>= &= |=Condicional ?:OR Lógico ||AND Lógico &&OR |XOR ^AND &Igualdad == |=Relacional < <= > >=Desplazamiento << >> >>>Suma/Resta + -Multiplicación/Div * / %Negación/Incremento ! - ++ --Llamada, Miembro () []

Sentencias de control y funcionesPara hacer una página dinámica e interactiva, el diseñador de páginas Web necesita sentencias que controles el flujo de información.IF ELSEif (condición) {sentencias 1 }[ else {sentencias 2 } ]

Ejemplo:if (numero==1) {numero++;numero+=2; }elsenumero--;

BuclesJavaScript soporta 2 estructuras de bucles; la sentencia for y la while. Para el control de esas estructuras se tienen las sentencias break y continue.

FORLa sentencia FOR de JavaScript es la misma que en Java y C.Repite un bucle hasta que una condición sea cierta o hasta que salga del bucle con una sentencia break.for ([expresión_inicial ;] [condición;] [expresión_incremental]) {sentencias}

1. El intérprete ejecuta la expresión_inicial que inicia todos los valores necesarios para el control del bucle.

2. Después, el intérprete comprueba la condición. Si es cierta, pasa el control al siguiente paso y si no, va a la siguiente sentencia tras el bucle.

3. El intérprete ejecuta la expresión_incremental que actualiza las variables utilizads en el control del bucle.




4. Se ejecutan las sentencias y -a menos que se encuentre una sentencia break o continue- el control se devuelve al paso 2.

Ejemplo<HTML><HEAD><SCRIPT LANGUAJE="JavaScript">for (i=1; i<=10; i++) {sq=i*idocument.write("número: " + i + "cuadrado: " + sq + "br");i++;}</SCRIPT></HEAD><BODY></BODY></HTML>

La sentencia Break

Esta sentencia termina un bucle for o while y devuelve el control a la sentencia que sigue al bucle terminado. El siguiente ejemplo ilustra cómo se usa:i=0while (i < 10) {if (i==3)breaki++}

La sentencia continueComo la sentencia break, esta sentencia termina la iteración actual de un bucle for o while, pero no sale del bucle. Que pase o no a la siguiente iteración depende del tipo de bucle:En un bucle while el control pasa a la condición. En un bucle for el control pasa a la expresión_incremental.

Ejemplo:i=0while (i < 10) {if (i==3)continuei++}

La sentencia functionUna función es un grupo de sentencias JavaScript que realizan una tarea determinada. Se le puede llamar desde cualquier punto del documento y juega un importante papel en la escritura de gestores de eventos:function Nombre (lista de argumentos) }sentencias}

Ejemplo:




<HTML><HEAD><SCRIPT LANGUAJE="JavaScript">function Mostrar(MostrarLinea + "<BR>")document.write(MostrarLinea + "<BR>")}</SCRIPT></HEAD><BODY><SCRIPT LANGUAJE="JavaScript">MostrarLinea("Hola Mundo")</SCRIPT></BODY></HTML>

ComentariosJavaScript permite dos tipos de comentarios://este es un comentarioif (a==2) //comentarios desde aca

Introducción a los ObjetosJavaScript es un lenguaje basado en objetos y no un lenguaje orientado a objetos (OOP). Los diseñadores de JavaScript no intentaron crear otro OOP, sino que intentaron crear un lenguaje Script que proporcionara una herramienta para integrar objetos creados con un lenguaje OOP en documentos HTML.

Los objetos y sus propiedadesSistema de notación utilizado para representar un objeto y sus propiedades:ObjectName.PropertyName

Ejemplo miperro.raza="callejero"miperro.edad=5miperro.peso=25

Definir métodosUna función asociada a un objeto se denomina método.Objeto.Método=nombre_de_función




Objetos predefinidos

El objeto Windows Es uno de los onjetos más importantes. Define la ventana sobre la que estamos trabajando y tiene como descendientes los objetos referentes a la barra de tareas, el documento o la secuencia de direcciones de la última sesión.Propiedades:open[Variable=][windows.]open("URL","Nombre",""Propiedades");El método open sirve para crear y abrir una ventana.El parámetro URL, contiene la dirección de la ventana que estamos abriendoEl nombre será el que queramos que se utilize como parámetro de un TARGET y las Propiedades son una lista separada por comas de algunos de los siguientes elementos:

toolbar[=yes|no] location[=yes|no] directories[=yes|no] status[=yes|no] menubar[yes|no] scrollbars[=yes|no] resizable[=yes|no] width=pixels height=pixels

CloseVariable.close()Cierra la ventana Variable

alertVariable.alert("Mensaje");Muestra una ventana de diálogo en la ventana Variable con el mensaje especificado.

statusDefine la cadena de caracteres que saldrá en la barra de estado en un momento dado

defaultStatusDefine la cadena de caracteres que saldrá por defecto en la barra de estado.

El objeto documentEs un objeto derivado de windows que identifica a un documento HTML

writedocument.write("Cadena");Escribe el script

lastModifiedContiene la fecha y la hora en que se modificó el documento por última vez.

El objeto history




Este objeto se deriva de document y contiene todas las direcciones que se han visitado en la sesión actual. Tiene tres métodos:

document.history.back(): Volver a la página anterior. document.history.forward(): Ir a la página siguiente. document.history.go(donde): Ir a donde se indique, siendo donde un

número tal que go(I)=forward() y go(-I)=back

El objeto formEste objeto derivado de document se refiere a un formulario.

submitNombre.submit() // Envía el formulario llamado Nombre.

textContiene el texto contenido en un campo de edición de un formulario.

El objeto DateEste objeto sirve para trabajar con fechas y horas:Métodos del objeto DateMétodo Valor devueltoget Date ( ) Día del mesget Day ( ) Día de la semanaget Hours ( ) Hora del díaget Minutes ( ) Minutos de la horaget Month ( ) Mesget Seconds ( ) Segundos del minutoget Time ( ) Milisegundos desde 1/1/70get TimezoneOffret ( ) Derivación desde la hora local y el GTMget Year ( ) Año

Además de ser capaz de dar información, los método del objeto Date, la tabla siguiente muestra como cambiar la información de las fechas:Método Valores válidossetDate (dia) 1 - 31setHours (hora) 0 - 23setMinutes (minuto) 0 - 59setMonth (mes) 0 - 11setSeconds (segundo) 0 - 59setTime (valor) > = 0setYear (año) > = 1970

El objeto navigatorA través de este objeto podremos averiguar varias características del navegador que usamos:navigator.appName: Nombre del navegadornavigator.appVer: Número principal de versiónnavigator.languaje: Idioma del mismonavigator.platform: Plataforma donde esta ejecutandose

El objeto screenCon este objeto podremos averiguar la configurar de la pantalla:


screen.height: Alturascreen.width: Anchurascreen.pixelDepth: Número de bits por pixel

EventosUn evento es algo que sucede. Para que una rutina nuestra se ejecute sólo cuando suceda algo deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen así:<A HREF="http://www.lavariable.com" onMouseOver="MiFuncion()">

Lista de eventosEvento Descripción Elementos que lo admitenonLoad Terminar de cargarse una página <body><frameset><layer>onUnLoad Salir de una página <body><frameset><layer>onMouseOver Pasar el mouse por encima <a href><area><layer>onMouseOut Que el mouse deje de estar encima <a href><area><layer>onSubmit Enviar un formulario <form>

onClick Pulsar un elemento <input type="button, checkbox, link, radio">

onBlur Perder el cursor <input type="text">

onChange Cambiar el contenido o perder el cursor <input type="text"><textarea>

onFocus Conseguir el cursor<input type="text"><textarea><layer>

onSelect Seleccionar texto <input type="text"><textarea>

SumarioJavaScript es más que un simple languaje script y menos que un completo lenguaje de programación orientado a objetos. Muy importante a la hora de realizar tareas del lado del cliente debido a su compatibilidad con todos los navegadores

Ejemplos1) Este script abre una ventana, después que la página fué cerrada:  <HEAD><SCRIPT LANGUAGE="JavaScript"><!-- Comienzoclosetime = 0; // Cerrar la ventana después de __ segundos?

function Start(URL, WIDTH, HEIGHT) {windowprops = "left=50,top=50,width=" + WIDTH + ",height=" + HEIGHT;preview = window.open(URL, "preview", windowprops);

if (closetime) setTimeout("preview.close();", closetime*1000);}

function doPopup() {url = "http://miVentana.htm";


http://www.lavariable.com/



width = 267; // ancho de la ventana en pixelsheight = 103; // alto de la ventana en pixelsdelay = 2; // time in seconds before popup openstimer = setTimeout("Start(url, width, height)", delay*1000);}// Fin --></script><BODY OnLoad="doPopup();"><p><center><a href="http://www.lavariable.com">El Sitio de los programadores </a></font></center><p>

2) En este ejemplo, vamos a comprobar los datos de tres formularios: Nombre Completo Dirección de Email Una Puntuación sobre el Sitio

<SCRIPT LANGUAGE="JavaScript">// Espacios en Blancovar espacio ="\t\n\r";//Chequear cuando la entrada esté vacíafunction EstaVacio(s){ return ((s = = null) || (s.lenght = = 0 )) }function HayEspacio(s){var i;if (EstaVacio(s)) return true;// buscar a traves de lo caracteres hasta encontrar un no espacio en blanco.for (i = 0; i < s.length; i++){ var c = s.charAt(i);if (espacio.indexOf(c) == -1) return false;}return true;}function Entrada(val, str) {var strInput = new String(val.value);if (HayEspacio(strInput)) {alert(str);return false;} elsereturn true;}function Ranking() {if (parseInt(document.forms[0].nRanking.value) >= 1 && parseInt(document.forms[0].nRanking.value) <=10return true;elsereturn false;}function ValidarDatos() {var EnviarDatos = false;// Chequear si el campo nombre no está vacíoEnviarDatos = Entrar(document.forms[0].txtNombre, "Ingresá tu nombre completo.");




//Chequear que el ranking sea entre 1 y 10EnviarDatos = Ranking();Return EnviarDatos;}</SCRIPT>

Finalmente sólo nos falta crear el formulario.<form name="Formulario" method="get" action="EntradaDeFormulario.asp" onsubmit="return ValidarDatos();">


JavaScript Básico

Documents

Transcript of JavaScript Básico