Java Script

JAVASCRIPT
Experto en Desarrollo WEB
CURSO DE DESARROLLO
JAVSCRIPT
WEB
JAVASCRIPT
Qu es JAVASCRIPT?
Es un lenguaje Script
Extiende las capacidades de las pginas Web
El cdigo 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
Ejecucin dinmica
Los programas y funciones no se chequean
hasta que se ejecutan
JAVASCRIPT
Qu podemos hacer con javascript?
Pginas dinmicas (DHTML)

Comprobacin de datos (Formularios)
Realizar clculos simples
Intercambiar informacin entre pginas
web en distintas ventanas
Manipulacin de grficos, texto, etc...
Comunicacin con plug-ins: Flash, Java,
Shockwave, etc...
JAVASCRIPT
Aspectos generales de Javascript
Es un lenguaje de programacin.
No debe confundir Java con Javascript.
Javascript por si slo no permite la creacin
de aplicaciones independientes.
Necesita estar inserto en un documento
HTML para poder operar.
Para programarlo slo necesita de un editor
de texto o de html que le permita editar sus
documentos.
JAVASCRIPT
Cmo incluir JavaScript en documentos XHTML (1/3)
Incluir JavaScript en el mismo documento XHTML

En 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>
JAVASCRIPT
Cmo incluir JavaScript en documentos

XHTML (2/3)
Incluir JavaScript en un documento externo, con
extension .js
En 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
JAVASCRIPT
Cmo incluir JavaScript en documentos

XHTML (3/3)
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
JAVASCRIPT
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 pgina que ests viendo requiere para su
funcionamiento el
uso de JavaScript. Si lo has
deshabilitado intencionadamente,
por favor vuelve a
activarlo.</p>
</noscript>
</body>
JAVASCRIPT
Ejercicio 1
1. 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. Despus del primer mensaje, se debe mostrar otro
mensaje que diga "Soy el primer script"
4. Aadir algunos comentarios que expliquen el
funcionamiento del cdigo
5. Aadir en la pgina XHTML un mensaje de aviso para
los navegadores que no tengan activado el soporte
de JavaScript
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
JAVASCRIPT
Funciones
La definicin de funciones nos permite
definir un cdigo que se utilizar a lo largo
de la web tan solo invocando su nombre
se definen con la palabra reservada
function y en minsculas seguido del
nombre de la funcin y los parametros
entre parentesis, si no tuviera lo
pondremos solo parentesis ()
p.e. function aviso() { alert(Saludos); }
JAVASCRIPT
Funciones
El contenido de una funcin va entre llaves. { }
Cada sentencia Javascript debe terminar con punto y
coma (;)
Las maysculas y minsculas deben ser respetadas.
Las comillas simples () representan texto.
La funcin debe ir definda con un nombre e
independiente si recibe o no parmetros con parntesis
redondos.
Deben tener un return como norma si devuelve valores
p.e. function suma(a,b) {
return a+b; }
JAVASCRIPT
Llamadas a funciones
Una funcin 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>
JAVASCRIPT
Eventos
onClick: cuando el usuario hace un click en un
elemento.
onLoad:la pgina 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.
JAVASCRIPT
EJERCICIO 3
Realiza una pgina que muestre el mensaje "Bienvenido" al

entrar en la pgina y muestre el mensaje "Adios" al salir de
la pgina
JAVASCRIPT
Variables
Declaracin de Variable: var strnombre;
Para Js no hace falta declarar la variable,
pero es muy conveniente
var 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 lnea a lnea.
JAVASCRIPT
ENTRADA DE DATOS POR TECLADO

Para la entrada de datos por teclado esta la funcin
prompt. Hay otras formas ms sofisticadas para la
entrada de datos en una pgina HTML,
La sintaxis de la funcin prompt es:
<variable>=prompt(<mensaje a mostrar en la
ventana>,<valor inicial a mostrar en la ventana>);
La funcin prompt tiene dos parmetros: uno es el
mensaje y el otro el valor incial a mostrar.
nombre=prompt('Ingrese su nombre:', 'pepe');
JAVASCRIPT
EJERCICIO 4
Realiza una pgina que pregunte el

nombre de entrada y muestre una pgina
con un saludo con la fuente Comic Sans y
de tamao 10
JAVASCRIPT
OPERADORES
+ suma y/o
concatenacin
- resta.
/ divisin.
* multiplicacin.
% resto de la divisin
++ incremento
-- decremento
== Igual
!= distinto
>= Mayor o
igual
<= Menor o
igual
> Mayor
&& AND (y
< Menor
logico)
|| Or (o lgico)
! Not
(negado)
JAVASCRIPT
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 pesetas
Equivale a XXX.XX Euros
JAVASCRIPT
El objeto document
El objeto document es el que tiene el contenido de toda la pgina
que se est visualizando. Esto incluye el texto, imgenes, 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
JAVASCRIPT
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='bla
ck';
Establece el color del borde a negro para el id=contenidos
JAVASCRIPT
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>);
JAVASCRIPT
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
verificacin
Podemos llamarlo con
document.nombre_formulario.nombre_campo.propiedad
p.e document.miformulario.apellidos.value =Lopez
Si tenemos un grupo de opciones: la propiedad length te dice el numero de
opciones
cuantopagos = document.miformulario.forma_pago.length
Y cada opcion tendra un numero empezando por 0
valor_1 =document.miformulario.forma_pago[0].value
JAVASCRIPT
Constantes predefinidas
NaN: valor especial que indica un resultado no

numerico en una operacin
P.e. alert(10*pi) NaN
Si queremos saber si lo que entra es un

numero utilizamos la funcin 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
JAVASCRIPT
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
JAVASCRIPT
Conversion de tipos
parseInt(variable) -> convierte la var. en num.
Entero
var variable1 = "hola";

parseInt(variable1);
// devuelve
var variable2 = "34";
// devuelve
var variable3 = "34hola23";
// devuelve
var variable4 = "34.23";
// devuelve
NaN
34
34
34
JAVASCRIPT
Conversion de tipos
parseFloat(variable) -> convierte la var. en decimal
var variable1 = "hola";

parseFloat(variable1); // devuelve
var variable2 = "34";
var variable3 = "34hola23";
var variable4 = "34.23";
NaN
34.0
34.0
34.23
JAVASCRIPT
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();
texto
// devuelve "5" como cadena de
JAVASCRIPT
Matrices (arrays)
var dias = new Array();
dias[1]
dias[2]
dias[3]
dias[4]
dias[5]
dias[6]
dias[7]
=Lunes;
=Martes;
=Miercoles;
=Jueves;
=Viernes;
=Sabado;
=Domingo;
alert(Maana es +dias[3]);
alert('La semana se compone de: '+dias);
var dias =[ Lunes, Martes,

Miercoles,Jueves,Viernes, Sabado, Domingo];
JAVASCRIPT
Funciones matematicas. Objeto Math
abs (numero), calcula el nmero 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 nmero 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 mximo entre numero1y numero2.
min (numero1, numero2 ), calcula el mnimo entre numero1y numero2.
pow (numero1, numero2 ), calcula numero1 exponentado a numero2.
random ( ), calcula un nmero decimal aleatorio entre 0 y 1.
round (numero), devuelve el entero ms cercano a numero.
sin (angulo), calcula el seno de angulo.
sqrt (numero), calcula la raz cuadrada de numero.
tan (angulo), calcula la tangente de angulo.
JAVASCRIPT
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
JAVASCRIPT
Estructuras condicionales simples

Cuando hay que tomar una decisin aparecen las estructuras
condicionales y ya no se resuelve secuencialmente como
hasta ahora, para ello utilizaremos la instrucccin if
if(condicion) {
...
}
O bien si hay dos opciones
if (condicion) {
...
} else {
...
}
JAVASCRIPT
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>
JAVASCRIPT
EJERCICIO 6
1 - Realizar un programa que lea por teclado dos
nmeros, si el primero es mayor al segundo
informar su suma y diferencia, en caso contrario
informar el producto y la divisin 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)
JAVASCRIPT
EJERCICIOS OPERADORES LOGICOS
De un operario se conoce su sueldo y los aos de

antigedad. Se pide confeccionar un programa
que lea los datos de entrada e informe
a) Si el sueldo es inferior a 500 y su antigedad
es igual o superior a 10 aos, otorgarle un
aumento del 20 %, mostrar el sueldo a pagar.
b) Si el sueldo es inferior a 500 pero su
antigedad es menor a 10 aos, otorgarle un
aumento de 5 %.
c) Si el sueldo es mayor o igual a 500 mostrar el
sueldo en la pgina sin cambios.
JAVASCRIPT
ESTRUCTURA REPETITIVA SWITCH

La instruccin switch es una alternativa para
remplazar los if/else if. (if anidados) De todos modos
se puede aplicar en ciertas situaciones donde la
condicin 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;
}
JAVASCRIPT
EJEMPLO SWITCH
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>
JAVASCRIPT
EJERCICIO SWITCH
Solicitar el ingreso alguna de estas

palabras (casa, mesa, perro, gato) luego
mostrar la palabra traducida en ingls. Es
decir, si se ingresa 'casa' debemos
mostrar el texto 'house' en la pgina.
JAVASCRIPT
Estructura repetitiva for

Esta estructura se emplea en aquellas situaciones
en las cuales CONOCEMOS la cantidad de veces
que queremos que se ejecute el bloque de
instrucciones
for (valor inicial;
condicion de control;
actualizacion) {
. Se ejecuta mientra la condicion sea true
}
JAVASCRIPT
Ejemplo For
La tabla de multiplicar del 5
<body>
var c;
for(c=1; c<=10; c++)
{
tabla=c*5;
document.write("5 * "+ c + " = " + tabla + "<br />");
}
</script>
</body>

Java Script

Cargado por

Copyright:

Formatos disponibles

Java Script

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Java Script

Cargado por

Copyright:

Formatos disponibles

JAVASCRIPT

Experto en Desarrollo WEB

Pginas dinmicas (DHTML)

Incluir JavaScript en el mismo documento XHTML

Cmo incluir JavaScript en documentos

Cmo incluir JavaScript en documentos

Navegadores sin javascript .Etiqueta

completo de JavaScript, otros navegadores permiten

Realiza una pgina que muestre el mensaje "Bienvenido" al

ENTRADA DE DATOS POR TECLADO

Realiza una pgina que pregunte el

Realizar una web que nos pregunte el lado

El objeto document para escribir en html

Cuando tenemos un formulario con nombre (name) podemos utilizar sus

NaN: valor especial que indica un resultado no

Si queremos saber si lo que entra es un

Infinity: valor especial que representa

var variable1 = "hola";

var variable1 = "hola";

toString(variable) -> convierte la var. Una

// devuelve "5" como cadena de

var dias =[ Lunes, Martes,

Funciones matematicas. Objeto Math

abs (numero), calcula el nmero absoluto de numero.

Ejemplo funciones matematicas

Estructuras condicionales simples

De un operario se conoce su sueldo y los aos de

ESTRUCTURA REPETITIVA SWITCH

Solicitar el ingreso alguna de estas

Estructura repetitiva for

También podría gustarte