JavaScript

JAVASCRIPT Experto en Desarrollo WEB

CURSO DE DESARROLLO WEBJAVSCRIPT


¿Qué es JAVASCRIPT?

• Es un lenguaje Script• Extiende las capacidades de las páginas Web• El código está integrado en el HTML o vinculado a

archivos externos• Se interpreta en el ordenador que recibe el HTML, no

se compila, se ejecuta en el navegador del cliente• Ejecución dinámica

– Los programas y funciones no se chequean hasta que se ejecutan


¿Qué podemos hacer con javascript?

• Páginas dinámicas (DHTML) • Comprobación de datos (Formularios) • Realizar cálculos simples• 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...


Aspectos generales de Javascript

• Es un lenguaje de programación.• No debe confundir Java con Javascript.• Javascript por si sólo no permite la creación de

aplicaciones independientes. • Necesita estar inserto en un documento HTML para

poder operar.• Para programarlo sólo necesita de un editor de texto

o de html que le permita editar sus documentos.


Cómo incluir JavaScript en documentos XHTML (1/3)

• Incluir JavaScript en el mismo documento XHTMLEn el head entre etiquetas <script> se suele insertar las funciones que luego llamaremos en el body

<script type="text/javascript"> function aviso() {

alert(“Bienvenido al mundo de Javascript”);}

</script>



• Incluir JavaScript en un documento externo, con extension .jsEn el head entre etiquetas <script> se suele insertar las funciones que luego llamaremos en el body<script type="text/javascript" src=“misfunciones.js">

</script>

• El atributo type le dice al navegador que el script contiene Javascript



• Directamente en el body<body><p>Ejemplo javascript</p> <script type="text/javascript“>

alert(“Bienvenido al mundo de Javscript”);</script></body>

• En este caso se ejecuta directamente una alerta


Navegadores sin javascript .Etiqueta noscript• Algunos navegadores no disponen de soporte completo de

JavaScript, otros navegadores permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript

• El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su navegador no puede ejecutar JavaScript<body>

<noscript><p>La página que estás viendo requiere para su funcionamiento

el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>

</noscript> </body>


Ejercicio 11. Crear una alerta en el head que diga “Bienvenido a mi

pagina”2. Mover todo el JavaScript a un archivo externo llamado

codigo.js y el script siga funcionando de la misma manera.3. Después del primer mensaje, se debe mostrar otro mensaje

que diga "Soy el primer script"4. Añadir algunos comentarios que expliquen el

funcionamiento del código5. Añadir en la página XHTML un mensaje de aviso para los

navegadores que no tengan activado el soporte de JavaScript


Ejercicio 2

• Crear una pagina que verifique si nuestro navegador soporta Javascript

• Si lo soporta saldra una alerta que nos diga “OK, Javascript Activado”

• Si no lo soporta nos saldra un parrafo que nos diga“Su navegador no soporta Javascript”


Funciones

• La definición de funciones nos permite definir un código que se utilizará a lo largo de la web tan solo invocando su nombre

• se definen con la palabra reservada function y en minúsculas seguido del nombre de la función y los parametros entre parentesis, si no tuviera lo pondremos solo parentesis ()

p.e. function aviso() { alert(“Saludos”); }


Funciones • El contenido de una función va entre llaves. { }• Cada sentencia Javascript debe terminar con punto y coma (;)• Las mayúsculas y minúsculas deben ser respetadas.• Las comillas simples (‘) representan texto.• La función debe ir definda con un nombre e independiente si

recibe o no parámetros con paréntesis redondos.• Deben tener un return como norma si devuelve valores

p.e. function suma(a,b) {return a+b; }


Llamadas a funciones

• Una función por si sola no hace nada hasta que la invoquemos. Para llamarla utilizaremos su nombre

• Podremos llamarla dentro de otro script o desde el html

• Si la llamamos desde el html lo podemos hacer sin evento p.e. <body> <p>…</p> <script type=“text/javascript”> aviso() aviso() </script>

• O con evento <p onclick="aviso()">Ejemplo </p>


Eventos• onClick: cuando el usuario hace un click en un

elemento.• onLoad:la página se carga en el browser.• onUnload : la pagina se descarga (se cierra)• onBlur:el usuario sale del campo de un formulario.• onSubmit: cuando un formulario va a ser enviado.• onMouserOver: cuando se mueve el mouse por

sobre el elemento.• onMouseOut: cuando se mueve el mouse por fuera

del elemento.


EJERCICIO 3

• Realiza una página que muestre el mensaje "Bienvenido" al entrar en la

página y muestre el mensaje "Adios" al salir de la página


Variables

• Declaración de Variable: var strnombre;• Para Js no hace falta declarar la variable, pero es muy

convenientevar numero_1;var numero_2;numero_1 = 3;numero_2 = 1;var resultado = numero_1 + numero_2;

• \n es un salto de pagina• /*... * / Bloque de comentarios.• // comentarios línea a línea.


ENTRADA DE DATOS POR TECLADO

• Para la entrada de datos por teclado esta la función prompt. Hay otras formas más sofisticadas para la entrada de datos en una página HTML,

• La sintaxis de la función prompt es:<variable>=prompt(<mensaje a mostrar en la ventana>,<valor inicial a mostrar en la ventana>);

• La función prompt tiene dos parámetros: uno es el mensaje y el otro el valor incial a mostrar. nombre=prompt('Ingrese su nombre:', 'pepe');nombre=prompt('Ingrese su nombre:', 'pepe');


EJERCICIO 4

• Realiza una página que pregunte el nombre de entrada y muestre una página con un saludo con la fuente Comic Sans y de tamaño 10


OPERADORES == Igual!= distinto>= Mayor o igual<= Menor o igual> Mayor< Menor

&& AND (y logico)|| Or (o lógico)! Not (negado)

+ suma y/o concatenación- resta./ división.* multiplicación.% resto de la división++ incremento-- decremento


EJERCICIO 5

• Realizar una web que nos pregunte el lado de un cuadrado y nos diga el perimetro del mismo y la superficie de cuadrado

• Realizar una web que nos pregunte el valor en pesetas y nos devuelva una alerta con el mensaje siguiente:

Usted a introducido XXX pesetasEquivale a XXX.XX Euros


El objeto document• El objeto document es el que tiene el contenido de toda la página que se

está visualizando. Esto incluye el texto, imágenes, enlaces, formularios.• Como todos los objetos en OOPS, tiene metodos, los que nos interesa.

– document.getElementById(id): Nos obtiene un elemento utilizando su id

– document.getElementByName(nombre: idem por atributo name– Document.getElementByTagName(etiqueta): idem por etiquetas

• Ademas del metodo tenemos las propiedades, en nuestro caso– .value: nos da el valor del elemento– .style.xxx: nos da el valor de la propiedad css xxx– . className: nos da el valor de la clase css


EJEMPLOS objeto document

• document.write("<p>hola "+document.getElementById('nombre').value+"</p>");– Escribe “hola pepe” si el valor del id=nombre es pepe

• document.getElementById('uno').className="verde";– Establece la clase verde para el objeto cuyo id=uno

• document.getElementById('precio').value=225 * actualizacion;– Establece el valor 225*actualizacion (variable) al elemento cuyo id=precio

• document.getElementById('contenidos').style.borderColor='black';– Establece el color del borde a negro para el id=contenidos


El objeto document para escribir en html

• El objeto document represeta a todo el documento html

• Si quiero escribir desde js al html pondremos:• document.write(“Hola”);• document.write(“<h1>Hola</h1>”);


El objeto formulario

Cuando tenemos un formulario con nombre (name) podemos utilizar sus metodos y funciones, esto nos servira para los grupos de opciones y casillas de verificación

Podemos llamarlo con document.nombre_formulario.nombre_campo.propiedadp.e document.miformulario.apellidos.value =“Lopez”

Si tenemos un grupo de opciones: la propiedad length te dice el numero de opcionescuantopagos = document.miformulario.forma_pago.length

Y cada opcion tendra un numero empezando por 0 valor_1 =document.miformulario.forma_pago[0].value


Constantes predefinidas

• NaN: valor especial que indica un resultado no numerico en una operación

P.e. alert(10*”pi”) NaN

Si queremos saber si lo que entra es un numero utilizamos la función isNaN(variable) devolverá true si es numero o false si no lo es.var pi=3.14; var radio=“3 o 14”

isNaN(pi) -> true isNaN(radio) ->false


Constantes predefinidas

• Infinity: valor especial que representa valores demasiados granes (infinitos) en los que JS no puede trabajar

P.e. alert(10/0) NaN

• \n Salto de lines• \t tabulador• \’ comilla simple \” comilla doble


Conversion de tipos

• parseInt(variable) -> convierte la var. en num. Entero

– var variable1 = "hola"; – parseInt(variable1); // devuelve NaN – var variable2 = "34"; – parseInt(variable2); // devuelve 34 – var variable3 = "34hola23"; – parseInt(variable3); // devuelve 34 – var variable4 = "34.23"; – parseInt(variable4); // devuelve 34


Conversion de tipos

• parseFloat(variable) -> convierte la var. en decimal

– var variable1 = "hola"; – parseFloat(variable1); // devuelve NaN– var variable2 = "34"; – parseFloat(variable2); // devuelve 34.0 – var variable3 = "34hola23"; – parseFloat(variable3); // devuelve 34.0 – var variable4 = "34.23"; – parseFloat(variable4); // devuelve 34.23


Conversion de tipos

• toString(variable) -> convierte la var. Una cadena de texto. Ojo es un metodo no una funcion

– var variable1 = true; – variable1.toString(); // devuelve "true" como cadena de texto

– var variable2 = 5; – variable2.toString(); // devuelve "5" como cadena de texto


Matrices (arrays)

• var dias = new Array();dias[1] =“Lunes”;dias[2] =“Martes”;dias[3] =“Miercoles”;dias[4] =“Jueves”;dias[5] =“Viernes”;dias[6] =“Sabado”;dias[7] =“Domingo”;

• var dias =[ “Lunes”, “Martes”, “Miercoles”,“Jueves”,“Viernes”, “Sabado”, “Domingo”];

alert(“Mañana es “+dias[3]);

alert('La semana se compone de: '+dias);


Funciones matematicas. Objeto Math• abs (numero), calcula el número absoluto de numero.• acos (numero), calcula el ángulo cuyo coseno es numero.• asin (numero), calcula el ángulo cuyo seno es numero.• atan (numero), calcula el ángulo cuya tangente es numero.• ceil (numero), calcula el entero mayor o igual que numero.• cos ( angulo ), calcula el coseno de angulo.• exp (numero), calcula el número e elevado a la potencia numero.• floor (numero), calcula el entero menor o igual que numero.• log (numero), calcula el logaritmo natural de numero.• max (numero1, numero2 ), calcula el máximo entre numero1y numero2.• min (numero1, numero2 ), calcula el mínimo entre numero1y numero2.• pow (numero1, numero2 ), calcula numero1 exponentado a numero2.• random ( ), calcula un número decimal aleatorio entre 0 y 1.• round (numero), devuelve el entero más cercano a numero.• sin (angulo), calcula el seno de angulo.• sqrt (numero), calcula la raíz cuadrada de numero.• tan (angulo), calcula la tangente de angulo.


Ejemplo funciones matematicas

• Math.abs(-4) = 4• Math.abs(5) = 5• Math.max(2,9).=.9• Math.pow(3,2) = 9• Math.sqrt(144) = 12• var num1 = 3.141592;• var num2 = num1.toFixed(); // 3• var num3 = num1.toFixed(2); // 3.14• var num4 = num1.toFixed(10); // 3.1415920000


Estructuras condicionales simples• Cuando hay que tomar una decisión aparecen las estructuras

condicionales y ya no se resuelve secuencialmente como hasta ahora, para ello utilizaremos la instruccción if

if(condicion) {...

}• O bien si hay dos opciones

if (condicion) {...

} else {...

}


EJEMPLO ESTRUCTURA IF

<body><script language="javascript"> var nombre; var nota; nombre=prompt('Ingrese nombre:',''); nota=prompt('Ingrese su nota:',''); if (nota>=4) { document.write(nombre+' esta aprobado con un '+nota); }</script>


EJERCICIO 6

1 - Realizar un programa que lea por teclado dos números, si el primero es mayor al segundo informar su suma y diferencia, en caso contrario informar el producto y la división del primero respecto al segundo.

2 - Se ingresan tres notas de un alumno, si el promedio es mayor o igual a 4 mostrar un mensaje ‘APROBADO', sino ‘SUSPENSO'.

3- Ingresar tres numeros, he indicar cual de los 3 numero es el mayor (if anidados)


EJERCICIOS OPERADORES LOGICOS

• De un operario se conoce su sueldo y los años de antigüedad. Se pide confeccionar un programa que lea los datos de entrada e informea) Si el sueldo es inferior a 500 y su antigüedad es igual o superior a 10 años, otorgarle un aumento del 20 %, mostrar el sueldo a pagar.b) Si el sueldo es inferior a 500 pero su antigüedad es menor a 10 años, otorgarle un aumento de 5 %.c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en la página sin cambios.


ESTRUCTURA REPETITIVA SWITCH• La instrucción switch es una alternativa para remplazar los

if/else if. (if anidados) De todos modos se puede aplicar en ciertas situaciones donde la condición se verifica si es igual a cierto valor. No podemos preguntar por mayor o menor.

switch(variable) {case valor_1:

...break;

case valor_2:...break;

...case valor_n:...default:...break;}


EJEMPLO SWITCH<script language="javascript"> var valor; valor=prompt('Ingrese un valor comprendido entre 1 y 5:','');valor=parseInt(valor); //Convertimos a entero switch (valor) { case 1: document.write('uno'); break; case 2: document.write('dos'); break; case 3: document.write('tres'); break; case 4: document.write('cuatro'); break; case 5: document.write('cinco'); break; default:document.write('debe ingresar un valor comprendido entre 1 y 5.'); } </script>


EJERCICIO SWITCH

• Solicitar el ingreso alguna de estas palabras (casa, mesa, perro, gato) luego mostrar la palabra traducida en inglés. Es decir, si se ingresa 'casa' debemos mostrar el texto 'house' en la página.


Estructura repetitiva for

• Esta estructura se emplea en aquellas situaciones en las Esta estructura se emplea en aquellas situaciones en las cuales CONOCEMOS la cantidad de veces que queremos que cuales CONOCEMOS la cantidad de veces que queremos que se ejecute el bloque de instrucciones se ejecute el bloque de instrucciones

for (valor inicial; condicion de control; actualizacion) {for (valor inicial; condicion de control; actualizacion) { …………. Se ejecuta mientra la condicion sea true. Se ejecuta mientra la condicion sea true

}}


Ejemplo ForLa tabla de multiplicar del 5<body> <body>

<script language="javascript"> <script language="javascript"> var c; var c; for(c=1; c<=10; c++) for(c=1; c<=10; c++) { { tabla=c*5; tabla=c*5; document.write("5 * "+ c + " = " + tabla + "<br />");document.write("5 * "+ c + " = " + tabla + "<br />"); } } </script> </script>

</body> </body>

Date post:	25-Dec-2015
Category:	Documents
Upload:	freddy-martinez
View:	2 times
Download:	0 times

JavaScript

Documents