Documentos de Académico
Documentos de Profesional
Documentos de Cultura
JavaScript. Introducción PDF
JavaScript. Introducción PDF
Conforme las aplicaciones web se hacan ms complejas por ejemplo por el uso de
formularios y aadido a esto una velocidad de navegacin lenta, surgi la necesidad
de lenguaje de programacin que se ejecutaran en el navegador del usuario. De esta
forma, si el usuario no llenaba correctamente un formulario, no se le haca esperar
mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los
errores existentes.
Las tecnologas del lado del cliente, es decir, las que se ejecutan en el navegador
del usuario son las pginas dinmicas que se procesan en el cliente. En estas pginas
toda la carga de procesamiento de los efectos y funcionalidades la soporta el
navegador. Usos tpicos de las pginas de cliente son efectos especiales para webs
como rollovers o control de ventanas, presentaciones en las que se pueden mover
objetos por la pgina, control y validacin de formularios, clculos, etc. El cdigo
necesario para crear los efectos y funcionalidades se incluye dentro del mismo archivo
HTML y generalmente son scripts, activex o plugins. Cuando una pgina HTML
contiene alguna de las tecnologas de cliente, el navegador se encarga de
interpretarlas y ejecutarlas para realizar los efectos y funcionalidades. Las pginas del
cliente son muy dependientes del sistema donde se estn ejecutando y esa es su
principal desventaja, ya que cada navegador tiene sus propias caractersticas, incluso
cada versin, y lo que puede funcionar en un navegador puede no funcionar en otro.
Como ventaja se puede decir que estas pginas descargan al servidor algunos
trabajos, ofrecen respuestas inmediatas a las acciones del usuario y permiten la
utilizacin de algunos recursos de la mquina local. Un lenguaje del lado cliente es
totalmente independiente del servidor, lo cual permite que la pgina pueda ser
albergada en cualquier sitio. Pero nuestra pgina no se ver bien si la computadora
cliente no tiene instalados los plug-in adecuados. El cdigo, tanto del hipertexto como
de los scripts, es accesible a cualquiera y ello puede afectar a la seguridad.
JavaScript
JavaScript es ms simple que Java; pues se puede insertar cdigo especial dentro
de HTML de una pgina o no, a travs del cual podemos realizar por ejemplo que
cuando se presente una pgina web al visitante haga cosas como poner en la pgina
la fecha del da, hacer que una imagen se mueva de un lado a otro, responder de una
determinada forma a la pulsacin del ratn, validar el texto ingresado por el usuario,
etc. Los programas escritos con este lenguaje son conocidos como scripts o guiones.
Pese a su nombre no tiene nada que ver con Java.
Como con cualquier otro lenguaje de programacin que hemos estudiado en ciclos
anteriores, con JavaScript se necesita conocer sus reglas y vocabulario.
<html>
<head>
<title>Ejemplo de la primera forma</title>
<script type="text/javascript">
alert("Ingeniera de Sistemas");
</script>
</head>
<body>
<html>
<head>
<title> Otro ejemplo de la primera forma</title>
</head>
<body>
<p onclick="alert('hemos escrito JavaScript dentro del body en la pgina')">
Ejemplo de un prrafo de texto
</p>
</body>
</html>
<html>
<head>
<title>Ejemplo de la segunda forma</title>
</script>
</head>
<body>
<p>Hemos enlazado un archivo externo, de extensin js</p>
</body>
</html>
En una pgina web se pueden incluir tantas etiquetas <script> como sean
necesarias para enlazar varios archivos externos. Como se pueden haber dado cuenta
representa una ventaja utilizar archivos externos.
<body>
<noscript>
<p>La pgina no puede ejecutar contenido JavaScript</p>
<p>Si lo has deshabilitado, por favor activarlo.</p>
</noscript>
</body>
Sintaxis
De varias lneas
/* de esta manera se escribe comentarios de varias lneas,
son tiles cuando se necesita mostrar
o registrar referencias importantes respecto al trabajo que se realiza
*/
Mensajes
Son ventanas que desde el cdigo se lanzan al usuario, nos informan algo o
para que se reaccione ante una determinada situacin, ya hemos utilizado alguno en
ejemplos anteriores.
Alert.-
Muestra un mensaje en pantalla que slo da la oportunidad de aceptarle.
Su sintaxis es:
alert(se_escribe_el_mensaje);
Ejemplo: (escrito en el primer ejemplo)
alert("Ingeniera de Sistemas");
Prompt.-
Muestra una ventana que permite ingresar datos al usuario. Devuelve un valor
que puede ser asignado a una variable.
La ventana posee 2 botones: Aceptar y Cancelar.
Su sintaxis es:
prompt(mensaje,valor_por_defecto);
Ejemplo:
prompt(Ingresar nombre: );
Ejemplo:
prompt(Ingresar nombre: , Juan);
Ejemplo:
resp=prompt(Ingresar nombre: );
Confirm.-
Muestra un mensaje de confirmacin, tiene 2 botones: Aceptar y Cancelar.
Su sintaxis es:
confirm(mensaje);
Ejemplo:
confirm(Esta seguro..? );
Escribir el siguiente cdigo con cualquier editor de texto y luego guardarlo con el
nombre: mensajes.html
<html>
<head>
<title>Ejemplo de la primera forma</title>
<script type="text/javascript">
resp=prompt("Ingresar nombre: ");
document.write("Hola: ",resp);
</script>
</head>
<body>
<p>Programacin </p>
<p> JavaScript </p>
</body>
</html>
PROGRAMACIN BSICA
Variables
Ejemplo:
<html>
<head>
<title>Variables en JavaScript</title>
<script type="text/javaScript">
var minuendo; // Se crea la variable "minuendo", actualmente no
tiene ningn valor
minuendo=25; // ahora "minuendo" tiene el valor numrico 25
Operadores
Las variables por s solas son de poca utilidad, para hacer programas
realmente tiles son necesarios los operadores, ya que estos permiten manipular el
valor de las variables, realizar operaciones matemticas con sus valores y comparar
diferentes variables. De esta forma, los operadores permiten a los programas realizar
clculos complejos y tomar decisiones lgicas en funcin de comparaciones y otros
tipos de condiciones.
Ejemplo:
var sustraendo=10;
) Operadores aritmticos
Los operadores aritmticos toman los valores numricos como sus operandos
y devuelve un solo valor numrico.
Suma +
Resta -
Multiplicacin *
Divisin /
Resto de la Divisin(mdulo) %
Incremento ++
Decremento --
Los primeros operadores son binarios, es decir que se aplican sobre dos
argumentos.
Ejemplo:
var diferencia=minuendo-sustraendo;
) Operadores relacionales
Permiten comparar variables.
Mayor que '>'
Menor que '<'
Igual '=='
Distinto '='
Mayor o igual que '>='
Menor o igual que '<='
) Operadores lgicos
Permiten construir expresiones lgicas.
Devuelve true si ambos operandos son true '&&'
Devuelve true si alguno de los operandos son true '||'
Niega el operando que se le pasa '!'
) Operadores cadenas
Ejemplo
dato1="Bienvenidos"
dato2="estudiantes"
cadena=dato1+dato2 //cadena sera " Bienvenidosestudiantes"
El operador + sirve para dos usos distintos, si los operandos son nmeros
los suma, pero si se trata de cadenas las concatena. Javascript es
suficientemente listo para entender que tipo de operacin realizar mediante una
comprobacin de los tipos que estn implicados.
Ejemplo: Elaborar un programa en JavaScript que permita ingresar dos nmeros por
teclado e imprimir la suma y su producto.
<html>
<head>
<title>Operadores</title>
<script type="text/JavaScript">
var valor1, valor2;
valor1=parseInt(prompt('Ingrese primer nmero:',''));
valor2=parseInt(prompt('Ingrese segundo nmero',''));
var suma=valor1+valor2;
var producto=valor1*valor2;
document.write('La suma es: ',suma);
document.write('<br>');
Estructura if
Es la estructura ms utilizada en JavaScript y en la mayora de lenguajes de
programacin, se emplea para tomar decisiones en funcin de una condicin.
if(condicin)
{
...
}
Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se
cumple la condicin, hazlo; si no se cumple, no hagas nada". Normalmente las
condiciones suelen ser del tipo "si se cumple esta condicin, hazlo; si no se cumple,
haz esto otro".
if(condicin)
{
...
}
else if(condicin)
{
...
}
else if(condicin)
{
...
}
else {
}
Bucles
Permiten repetir un nmero determinado o indeterminado de veces ciertas
sentencias de nuestro cdigo.
var m;
m = "casa";
for(i = 0; i < 5; i++)
{
alert(m+" "+(i+1));
}
var
dias=["Lunes","Martes","Mircoles","Jueves","Viernes","Sbado","Domingo" ];
for(i=0;i<7;i++)
{
document.write(dias[i]+"<br>");
}
var edad;
edad=parseFloat(prompt("Ingresar edad: "));
if(edad >= 0 && edad < 18)
{
document.write('No participa de proceso electoral');
}
else
{
document.write('Si participa de proceso electoral');
}
var nota;
nota=parseFloat(prompt("Ingresar nota: "));
if(nota >= 0 && nota < 5) {
document.write('muy mal');
} else if(nota >= 5 && nota < 11) {
document.write('Mal');
} else if(nota >= 11 && nota < 14) {
document.write('Regular');
} else if(nota >= 14 && nota < 17) {
document.write('Notable');
} else if(nota >= 17 && nota <= 20) {
document.write('Sobresaliente');
} else {
document.write('La nota no es vlida. Tiene que estar entre 0 y 20');
}
<html>
<head>
<title>Estructuras de control</title>
<script type="text/javaScript" src="nota.js">
</script>
</head>
<body>
<h1>Ejemplo de estructura if</h1>
</body>
</html>