Cur So Javascript 01

Lic.
Gerardo Guadarrama Gonzlez
Objetivo: El participante aprender a utilizar

JavaScript
para
generar
pginas
web
dinmicas e interactivas, extendiendo a su
vez la funcionalidad de las pginas HTML
tradicionales.
Alcance: Conocer los elementos bsicos de
JavaScript para interactuar con pginas HTML.
-Introduccin
-Variables
-Operadores
-Estructuras de control
-Funciones
-Eventos
-Formularios
Qu es Javascript?
JavaScript es un lenguaje de programacin que se
utiliza principalmente para crear pginas web
dinmicas.
Una pgina web dinmica es aquella que
incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan
al pulsar botones y ventanas con mensajes de
aviso al usuario.
Tcnicamente, JavaScript es un lenguaje de

programacin interpretado, por lo que no es
necesario
compilar
los
programas
para
ejecutarlos.
A pesar de su nombre, JavaScript no guarda
ninguna relacin directa con el lenguaje de
programacin Java. Legalmente, JavaScript es una
marca
registrada
de
la
empresa
Sun
Microsystems.
Un poco de historia: A principios de los aos 90,

la mayora de usuarios que se conectaban a
Internet lo hacan con mdems a una velocidad
mxima de 28.8 kbps.
Con unas aplicaciones web cada vez ms complejas
y velocidad de navegacin tan lenta, surgi la
necesidad de un lenguaje de programacin que se
ejecutara en el navegador del usuario. De esta
forma, si el usuario no rellenaba correctamente un
formulario, no se le haca esperar mucho tiempo
hasta que el servidor volviera a mostrar el
formulario indicando los errores existentes.
Brendan Eich, un programador que

trabajaba en Netscape, pens que
podra solucionar este problema
adaptando
otras
tecnologas
existentes.
Su proyecto incialmente se llam
Mocha,
despus
LiveScript,
posteriormente Netscape firm una
alianza con Sun Microsystems para
el desarrollo del nuevo lenguaje de
programacin. Adems, justo antes
del lanzamiento Netscape decidi
cambiar el nombre por el de
JavaScript.
La primera versin de JavaScript fue un

completo xito y Netscape Navigator
3.0 ya incorporaba la siguiente versin
del lenguaje, la versin 1.1.
Al mismo tiempo, Microsoft lanz JScript
con su navegador Internet Explorer 3.
JScript era una copia de JavaScript al
que le cambiaron el nombre para evitar
problemas legales.
Netscape
estandariz
el
lenguaje
JavaScript.
En
1997
envi
la
especificacin JavaScript 1.1 al ECMA.
(European
Computer
Manufacturer
Association )
.
La integracin de JavaScript y XHTML es muy flexible,

ya que existen al menos tres formas para incluir
cdigo JavaScript en las pginas web.
Incluir JavaScript en el mismo documento
XHTML:
El cdigo JavaScript se encierra entre etiquetas
<script> y se incluye en cualquier parte del
documento. Aunque es correcto incluir cualquier
bloque de cdigo en cualquier zona de la pgina, se
recomienda definir el cdigo JavaScript dentro de la
cabecera del documento (dentro de la etiqueta
<head>)
Ejercicio 1:
Escribir el siguiente cdigo dentro de un archivo
html
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden incluir en un
archivo externo de tipo JavaScript que los
documentos XHTML enlazan mediante la etiqueta
<script>. Se pueden crear todos los archivos
JavaScript que sean necesarios y cada documento
XHTML puede enlazar tantos archivos JavaScript
como necesite.
Ejercicio 2:
Abrir un documento de texto y capturar lo siguiente:
alert("Un mensaje de prueba");

Guardar el archivo con el nombre ejercicio2.js
Escribir la siguiente referencia dentro de un nuevo
archivo de texto:
<script
type="text/javascript"
src="ejercicio2.js"></script>
Guardar el archivo con el nombre Ejercicio 2.html
Ejecutar el explorador de internet.
Abrir el archivo Ejercicio 2.html
Incluir JavaScript en los elementos XHTML

Este ltimo mtodo consiste en incluir trozos de
JavaScript dentro del cdigo XHTML de la pgina.
En general, este mtodo slo se utiliza para definir
algunos eventos y en algunos otros casos especiales.
*Ejercicio 3
Ejercicio 3:
Dentro de la etiqueta <body> capturar:
<a href="#none" onclick="alert('Un mensaje de

prueba')">Enlace con evento javascript.</a>
Guardar el archivo con el nombre ejercicio3.html
Ejecutar el explorador de internet.
Abrir el archivo ejercicio3.html
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 porque
creen que as navegan de forma ms segura.
En estos casos, es habitual que si la pgina web
requiere JavaScript para su correcto funcionamiento,
se incluya un mensaje de aviso al usuario indicndole
que debera activar JavaScript para disfrutar
completamente de la pgina.
Sintaxis:
Las normas bsicas que definen la sintaxis de
JavaScript son las siguientes:
No se tienen en cuenta los espacios en blanco
y las nuevas lneas.
Se distinguen las maysculas y minsculas.
No se define el tipo de las variables.
No es necesario terminar cada sentencia con el
carcter de punto y coma (;)
Se pueden incluir comentarios, de una o varias
lneas.
Posibilidades y limitaciones:
La aparicin de Flash disminuy su popularidad, ya
que Flash permita realizar algunas acciones
imposibles de llevar a cabo mediante JavaScript.
Sin embargo, la aparicin de las aplicaciones AJAX
programadas con JavaScript le ha devuelto
popularidad.
Posibilidades y limitaciones:
Los scripts de JavaScript no pueden comunicarse con
recursos que no pertenezcan al mismo dominio
desde el que se descarg el script. Los scripts
tampoco pueden cerrar ventanas que no hayan
abierto esos mismos scripts.
Los scripts no pueden acceder a los archivos del
ordenador del usuario (ni en modo lectura ni en
modo escritura) y tampoco pueden leer o modificar
las preferencias del navegador.
JavaScript en otros entornos

Herramientas como Adobe Acrobat permiten incluir
cdigo
JavaScript
en
archivos
PDF.
Otras
herramientas de Adobe como Flash y Flex utilizan
ActionScript, un dialecto del mismo estndar de
JavaScript.
Photoshop
permite
realizar
pequeos
scripts
mediante JavaScript y la versin 6 de Java incluye un
nuevo paquete (denominado javax.script) que
permite integrar ambos lenguajes.
*Ejercicio 4
1.Hacer que todo el cdigo JavaScript se encuentre
en un archivo externo llamado ejercicio.js y el script

muestre una alerta.
2. Aadir en la pgina XHTML un mensaje de aviso
para los navegadores que no tengan activado el
soporte de JavaScript
Variables: Las variables en los lenguajes de

programacin siguen una lgica similar a las
variables utilizadas en otros mbitos como las
matemticas.
Una variable es un elemento que se emplea para
almacenar y hacer referencia a otro valor. Gracias a
las variables es posible crear "programas genricos",
es decir, programas que funcionan siempre igual
independientemente de los valores concretos
utilizados.
De la misma forma que si en Matemticas no

existieran las variables no se podran definir las
ecuaciones y frmulas.
Si no existieran variables, un programa que suma dos
nmeros podra escribirse como:
resultado = 3 + 1
Sin embargo, el programa se puede rehacer de la
siguiente manera utilizando variables para almacenar
y referirse a cada nmero:
numero_1 = 3
numero_2 = 1
resultado = numero_1 + numero_2
Las variables en JavaScript se crean mediante la

palabra reservada var. De esta forma, el ejemplo
anterior se puede realizar en JavaScript de la
siguiente manera:
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
Una de las caractersticas de JavaScript es que
tampoco es necesario declarar las variables.
Normas para nombres de variables:

Slo puede estar formado por letras, nmeros y los
smbolos $ (dlar) y _ (guin bajo).
El primer carcter no puede ser un nmero.
Tipos de variables:
Numricas: Se utilizan para almacenar valores
numricos enteros (llamados integer en ingls) o
decimales (llamados float en ingls).
Tipos de variables:
Cadenas de texto: Se utilizan para almacenar
caracteres, palabras y/o frases de texto. Para asignar
el valor a la variable, se encierra el valor entre
comillas dobles o simples, para delimitar su comienzo
y su
final.
En ocasiones, el texto que se almacena en las
variables no es tan sencillo. Si por ejemplo el propio
texto contiene comillas simples o dobles, la
estrategia que se sigue es la de encerrar el texto con
las comillas (simples o dobles) que no utilice el texto.
/* El contenido de texto1 tiene comillas simples, por

lo que se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples'
dentro";
/* El contenido de texto2 tiene comillas dobles, por lo
que se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';
No obstante, a veces las cadenas de texto contienen

tanto comillas simples como dobles. Adems, existen
otros caracteres que son difciles de incluir en una
variable de texto (tabulador, ENTER, etc.) Para
resolver estos problemas, JavaScript define un
mecanismo para incluir de forma sencilla caracteres
especiales y problemticos dentro de una cadena de
texto.
El mecanismo consiste en sustituir el carcter
problemtico por una combinacin simple de
caracteres.
Si se quiere incluir... Se debe incluir...

Una nueva lnea
\n
Un tabulador
\t
Una comilla simple
\'
Una comilla doble
\"
Una barra inclinada
\\
*Ejercicio 5
Tomando como base el ejercicio 4 realizar lo
siguiente:
1. El mensaje que se muestra al usuario se almacene
en una variable llamada mensaje y el funcionamiento
del script sea el mismo.
2. El mensaje mostrado sea el de la siguiente:
Qu fcil es incluir comillas simples y comillas
dobles
Arrays
En ocasiones, a los arrays se les llama vectores,
matrices e incluso arreglos. No obstante, el trmino
array es el ms utilizado y es una palabra
comnmente aceptada en el entorno de la
programacin.
Un array es una coleccin de variables, que pueden
ser todas del mismo tipo o cada una de un tipo
diferente.
Su utilidad se comprende mejor con un ejemplo

sencillo: si una aplicacin necesita manejar los das
de la semana, se podran crear siete variables de tipo
texto:
var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";
Aunque el cdigo anterior no es incorrecto, s que es
poco eficiente y complica en exceso la programacin.
En este tipo de casos, se pueden agrupar todas las

variables relacionadas en una coleccin de variables
o array. El ejemplo anterior se puede rehacer de la
siguiente forma:
var dias = ["Lunes", "Martes", "Mircoles", "Jueves",
"Viernes", "Sbado", "Domingo"];
Ahora, una nica variable llamada dias almacena
todos los valores relacionados entre s, en este caso
los das de la semana. Para definir un array, se
utilizan los caracteres [ y ] para delimitar su
comienzo y su final y se utiliza el carcter , (coma)
para separar sus elementos:
var nombre_array = [valor1, valor2, ..., valorN];
Una vez definido un array, es muy sencillo acceder a

cada uno de sus elementos. Cada elemento se
accede indicando su posicin dentro del array. La
nica complicacin, que es responsable de muchos
errores cuando se empieza a programar, es que las
posiciones de los elementos empiezan a contarse en
el 0 y no en el 1:
var diaSeleccionado = dias[0]; // diaSeleccionado =
"Lunes"
var otroDia = dias[5]; // otroDia = "Sbado"
En el ejemplo anterior, la primera instruccin quiere

obtener el primer elemento del array. Para ello, se
indica el nombre del array y entre corchetes la
posicin del elemento dentro del array.
Como se ha comentado, las posiciones se empiezan a
contar en el 0, por lo que el primer elemento ocupa
la posicin 0 y se accede a el mediante dias[0].
*Ejercicio 6
-Cree un archivo llamado Ejercicio6.html que haga
referencia a un archivo llamado ejercicio6.js

-En el archivo ejercicio6.js deber Crear un array
llamado meses y que almacene el nombre de los
doce meses del ao.
-Mostrar por pantalla los doce nombres utilizando la
funcin alert().
Booleanos
Las variables de tipo boolean o booleano tambin se
conocen con el nombre de variables de tipo lgico.
Una variable de tipo boolean almacena un tipo
especial de valor que solamente puede tomar dos
valores: true (verdadero) o false (falso). No se puede
utilizar para almacenar nmeros y tampoco permite
guardar cadenas de texto.
var clienteRegistrado = false;
var ivaIncluido = true;
Operadores
Las variables por s solas son de poca utilidad. Para
hacer programas realmente tiles, son necesarias
otro tipo de herramientas.
Los operadores 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.
Asignacin
El operador de asignacin es el ms utilizado y el
ms sencillo. Este operador se utiliza para guardar un
valor especfico en una variable. El smbolo utilizado
es =
var numero1 = 3;
A la izquierda del operador, siempre debe indicarse el
nombre de una variable. A la derecha del operador,
se pueden indicar variables, valores, etc.
Incremento y decremento
Estos dos operadores solamente son vlidos para las
variables numricas y se utilizan para incrementar o
decrementar en una unidad el valor de una variable.
El operador de incremento se indica mediante el
prefijo ++ en el nombre de la variable. El resultado
es que el valor de esa variable se incrementa en una
unidad.
De forma equivalente, el operador decremento
(indicado como un prefijo -- en el nombre de la
variable).
*Ejercicio 7
-Cree un archivo llamado Ejericio7.html que haga
referencia a un archivo denominado ejercicio7.js
-Cree un archivo llamado ejercicio7.js y capture lo
siguiente:
var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
alert ('numero3: '+numero3+' numero1:'+numero1);
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
alert ('numero3: '+numero3+' numero1:'+numero1);
Matemticos
JavaScript
permite
realizar
manipulaciones
matemticas sobre el valor de las variables
numricas. Los operadores definidos son: suma (+),
resta (-), multiplicacin (*) y divisin (/).
Ejemplo:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1; // resultado = 13
resultado = numero2 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Adems de los cuatro operadores bsicos, JavaScript

define otro operador matemtico que no es sencillo
de entender cuando se estudia por primera vez, pero
que es muy til en algunas ocasiones.
Se trata del operador "mdulo", que calcula el resto
de la divisin entera de dos nmeros. Si se divide por
ejemplo 10 y 5, la divisin es exacta y da un
resultado de 2.
El resto de esa divisin es 0, por lo que mdulo de 10
y 5 es igual a 0.
Sin embargo, si se divide 9 y 5, la divisin no es
exacta, el resultado es 1 y el resto 4, por lo que
mdulo de 9 y 5 es igual a 4.
El operador mdulo en JavaScript se indica mediante

el smbolo %, que no debe confundirse con el clculo
del porcentaje:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4
Los operadores matemticos tambin se pueden

combinar con el operador de asignacin para
abreviar su notacin:
var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1
*Ejercicio 8
-Cree los archivos necesarios como ejercicio8 y
realice lo siguiente:
-A partir del siguiente array que se proporciona:
var valores = [true, 5, false, 7, 10, 2];
1. Exclusivamente de los dos valores booleanos del
array, determinar los operadores necesarios para
obtener un resultado true y otro resultado false.
2. Determinar el resultado de las cinco operaciones
matemticas realizadas con los nmeros.

Cur So Javascript 01

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cur So Javascript 01

Transféré par

Droits d'auteur :

Formats disponibles

Lic.

Gerardo Guadarrama Gonzlez

Objetivo: El participante aprender a utilizar

Tcnicamente, JavaScript es un lenguaje de

Un poco de historia: A principios de los aos 90,

Brendan Eich, un programador que

La primera versin de JavaScript fue un

La integracin de JavaScript y XHTML es muy flexible,

Definir JavaScript en un archivo externo

alert("Un mensaje de prueba");

Incluir JavaScript en los elementos XHTML

<a href="#none" onclick="alert('Un mensaje de

JavaScript en otros entornos

en un archivo externo llamado ejercicio.js y el script

Variables: Las variables en los lenguajes de

De la misma forma que si en Matemticas no

Las variables en JavaScript se crean mediante la

Normas para nombres de variables:

/* El contenido de texto1 tiene comillas simples, por

No obstante, a veces las cadenas de texto contienen

Si se quiere incluir... Se debe incluir...

Su utilidad se comprende mejor con un ejemplo

En este tipo de casos, se pueden agrupar todas las

Una vez definido un array, es muy sencillo acceder a

En el ejemplo anterior, la primera instruccin quiere

referencia a un archivo llamado ejercicio6.js

Adems de los cuatro operadores bsicos, JavaScript

El operador mdulo en JavaScript se indica mediante

Los operadores matemticos tambin se pueden

Vous aimerez peut-être aussi