CONCEPTOS INTRODUCTORIOS DE JAVASCRIPT

Transcript CONCEPTOS INTRODUCTORIOS DE JAVASCRIPT

CONCEPTOS
INTRODUCTORIOS
DE JAVASCRIPT
Preparado por: Prof. Nelliud D. Torres
AL FINAL DEL MÓDULO EL
ESTUDIANTE PODRÁ:











Comprender que es JavaScript y sus diferencias con Java.
Un poco de Historia sobre Javascript.
Qué puede hacer Javascript y que no.
Entender el formato de un programa en JavaScript.
Conocer los Tipos de Datos que se utiliizan.
Entender los Operadores.
Conocer Instrucciones básicas.
Saber las palabras reservadas.
Conocer los caracteres especiales (“escape secuence”).
Saber los objetos pre-definidos.
Entender y diferenciar los dos tipos de funciones.
¿Qué es Javascript?




Lenguaje de programación que se puede
insertar en el “Header” de las páginas Web
(“Web pages”) y se ejecuta a nivel del
cliente.
JavaScript es un lenguaje interpretado, es
decir, no require compilación.
Lenguaje orientado a eventos.
Lenguaje orientado a objetos.
Historia de Javascript



El lenguaje fue inventado por Brendan Eich
en Netscape.
El nombre original de JavaScript fue
LiveScript, pero se modificó a último
momento.
Se utilizó por primera vez en la versión 2.0
de Netscape.
Historia de Javascript – cont.
Netscape introduce JavaScript y trata de
establecer un estándar de programación de
código en el navegador(“Browser”).
MicroSoft por su parte, apoya una versión
parcial de JavaScript, con el nombre de
JScript, en su Internet Explorer.
Cuando mencione Javascript, me voy a
referir a ambos “scripts” (Javascript y Jscript).

¿Qué puede hacer Javascript?






Ejecutar cálculos matemáticos.
Validar datos entrados en una forma.
Juegos interactivos.
Maneja efectos especiales en las
pantallas.
Manejo de gráficas en la página.
Manejar seguridad (“Password”).
¿Qué más se puede hacer con
Javascript ?




Mejorar la interactividad y el dinamismo de
una página Web.
Dar apoyo a las aplicaciones orientadas al
Internet.
Controlar las ventanas del navegador y el
contenido que muestran.
Capturar los eventos generados por el
usuario y responder a ellos sin la necesidad
de que el servidor intervenga o salir al
Internet.
¿Algo más?



Comunicarse con el usuario mediante
diversos métodos.
Evitar depender del servidor Web para
cálculos sencillos.
Puede ser utilizado como un lenguaje
introductorio para enseñar conceptos
básicos de programación.
¿Qué no se puede hacer con
Javascript?



No puede crear aplicaciones autónomas.
Solo puede ejecutarse dentro de un
documento tipo HTML.
Tiene ciertas peculiaridades y limitaciones
que no se encuentran en un lenguaje de
programación común como por ejemplo la
definición de variables.
Java vs Javascript




En lo único que se parecen es en el nombre y
en su estilo heredado de C++.
Son dos lenguajes con enfoques diferentes.
Se compilan y ejecutan de forma diferente.
Por lo tanto, no relacione ambos lenguajes.
TABLA COMPARATIVA
JAVA VS JAVASCRIPT
JAVASCRIPT
JAVA
Interpretado por el cliente.
Compilado (bytecodes). Se descarga del
servidor y se ejecuta en el cliente
Orientado a Objetos.
Basado en Clases.
El código se integra e incrusta en
documentos HTML.
Se utilizan APPLETS. Se accede a ellos
desde documentos.
Los tipos de datos de las variables no
se declaran.
Es necesario definir los tipos de datos de
las variables.
No puede escribir automáticamente en
el disco duro.
No puede escribir automáticamente en el
disco duro.
FORMATO DE UN PROGRAMA EN JAVASCRIPT
Comentarios
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Comando que indica que comienza el código XHTML
<html xmlns = "http://www.w3.org/1999/xhtml">
“Header” de la página.
<head>
Título de la página.
<title>Mi primer programa en JavaScript</title>
Indica tipo de documento y lenguaje.
<script type = "text/javascript">
FORMATO DE UN PROGRAMA EN JAVASCRIPT – CONT.
<!-document.writeln("<h1>Hello World!</h1>" );
// -->
</script>
</head>
Final de código
Javascript
(script)
Comando de
Javascript que se
va a ejecutar.
<body>
</body>
</html>
Esta parte se deja en blanco si es
que no se va a incluir comandos
de HTML para la página.
PANTALLA CON LA CORRIDA DEL
SCRIPT
TIPOS DE DATOS (“DATA TYPES”)



JavaScript apoya los tipos de datos más
importantes que se utilizan en los lenguajes
de programación más comunes.
Tiene la peculiaridad de que no hay que
indicar el tipo de dato cuando declaramos las
variables. (Ejemplo: real, entero, char)
Una variable puede cambiar su composición
(tipo de dato) durante la ejecución del
programa en forma dinámica.
TIPOS DE DATOS – CONT.
Tipo
Ejemplos
Numérico
Cualquier número, como 12, 22.5 o 2e8
“String”
(Cadena)
"Hola" u 'Hola'
Booleano
Verdadero (true) o falso (false)
Objeto
Función
NULL
Más adelante hablaremos sobre esto.
Palabra clave para indicar ningún valor
DECLARACIÓN DE VARIABLES
Permiten declarar variables dentro del código
ya sean globales o locales.
Ejemplo:
var area, // area del rectángulo
ancho_s, // ancho del rectángulo
alto_s; // alto del rectángulo
ARREGLOS
JavaScript provee apoyo para arreglos. Se define igual que
una variable pero utilizando el operador “new” (se explicará
en el próximo seminario) que permite crear instancias de
objetos. En este caso me permite crear una instancia de un
arreglo llamado miArreglo.
Ejemplo:
Define un arreglo de
11 posiciones (0-10).
Trabaja en base 0.
var miArreglo = new Array(10);
for (i = 0; i < 20; i++)
{
Le está asignando el
miArreglo[i] = i;
valor del suscrito
}
dentro del arreglo.
OPERADORES BINARIOS
Operador
Descripción
Ejemplo
Asigna el valor del operando de la
izquierda al operando de la derecha
variable = 5;
+ =
Suma el operando de la izquierda al
de la derecha y asigna el resultado al
operando de la derecha
varNum += contador
- =
Resta al operando de la izquierda el de
la derecha y asigna el valor al
varNum -= contador
operando de la derecha
* =
Multiplica el operando de la derecha
por el de la izquierda y asigna el valor
al operando de la derecha
varNum *= contador
/ =
Divide el operando de la izquierda por
el de la derecha y asigna el valor al
operando de la derecha
varNum /= contador
% =
Divide el operando de la izquierda por
el de la derecha y asigna el valor del
resto de la división al operando de la
derecha
varNum %= contador
=
OPERADORES UNARIOS
Operador
Descripción
++x
Incrementa x en una unidad y devuelve el
valor.
x++
Devuelve el valor de x y lo deja incrementado
en una unidad.
-x
Devuelve x negado.
OPERADORES LÓGICOS
Operador
Descripción
&&
AND lógico (devuelve verdadero si los
dos operandos son verdaderos, y falso en
caso contrario)
||
!
OR lógico (devuelve verdadero si uno de
los dos operandos o ambos son
verdaderos, y falso en caso contrario)
No lógico (devuelve verdadero si el
operando es falso, y falso si es
verdadero)
OPERADORES DE COMPARACIÓN
Operador
Descripción
==
Devuelve verdadero si los dos operandos
son iguales
!=
Devuelve verdadero si los dos operadores
son distintos
>
Devuelve verdadero si el primer operando
es mayor que el segundo
<
Devuelve verdadero si el primer operando
es menor que el segundo
>=
Devuelve verdadero si el primer operando
es mayor o igual que el segundo
<=
Devuelve verdadero si el primer operando
es menor o igual que el segundo
PRECEDENCIA DE LOS OPERADORES
Prioridad Operador
1
2
3
Descripción
Paréntesis, corchetes y el
() []
operador punto que sirve para
los objetos.
negación, negativo e
! - ++ -incrementos.
Multiplicación división y módulo
*/%
.
4
+-
5
<< >>
>>>
Suma y resta.
Cambios a nivel de bit.
PRECEDENCIA DE LOS OPERADORES –
CONTINUACIÓN
Prioridad
Operador
6
< <= > >=
7
== !=
8
9
&^|
&& ||
= += -= *= /=
%= <<= >>=
>>>= &= ^= !=
10
Descripción
Operadores
condicionales.
Operadores
condicionales de
igualdad y desigualdad.
Lógicos a nivel de bit.
Lógicos boleanos.
Asignación
INSTRUCCIONES
JavaScript tiene un conjunto de
instrucciones similares a otros lenguajes
de programación como por ejemplo
C++. Estas instrucciones ayudan en la
programación e interactividad que el
programador desea que su página posea.
A continución explicamos algunas de
ellas.
INSTRUCCIÓN – IF





Es similar a la de C++.
Puede utilizar if-then o if-then-else
Apoya if anidados
Sintaxis:
if (condicion) { instrucciones }
[else { instrucciones }]
INSTRUCCIÓN – IF - CONT. - 1
Ejemplo - 1:
if (studentGrade >= 60)
document.writeln(“Paso el examen”);
else
document.writeln(“No paso el examen”);

INSTRUCCIÓN – IF - CONT. - 2
Ejemplo - 2:
if (studentGrade >= 60)
}
document.writeln(“Paso el examen”);
document.writeln(“¡Estas en las papas!”);
{
else
}
document.writeln(“No paso el examen”);
document.writeln(“A repetir estructura”);
{

INSTRUCCIÓN – IF - CONT. - 3
Ejemplo - 3:
if ( grade >= 90 )
document.writeln(“A”);
else if ( grade >= 80 )
document.writeln(“B”);
else if ( grade >= 70 )
document.writeln(“C”);
else if ( grade >= 60 )
document.writeln(“D”);
else
document.writeln(“F”);

INSTRUCCIONES – CICLOS - FOR
Permite ciclos repetitivos sabiendo de
antemano el número de ejecuciones
que se van a utilizar.
 Similar también a C++.
 Sintaxis:
 for ([inicial;][final;][incremento])
{instrucciones }
INSTRUCCIONES – CICLOS – FOR
- CONTINUACIÓN
EJEMPLO-1:
for (i=0; i<4; i++)
{alert("Ahora van "+i)}
EJEMPLO-2:
for (i= 0; i < 10; i = i + 1)
{
document.write(“valor de i =”);
document.writeln(i);
}
INSTRUCCIONES – CICLOS - WHILE
Permite crear ciclos repetitivos cuyo
numero de repeticiones dependerá de
una condicion. Se ejecuta de 0 a N veces.
Sintaxis:
while (condicion) { instrucciones }
INSTRUCCIONES – CICLOS – WHILE CONTINUACIÓN
Ejemplo:
var producto = 1;
while (producto <=1000)
{
producto = 2 * producto;
document.writeln(producto);
}
INSTRUCCIONES – CICLOS – DO-WHILE
Permite crear ciclos repetitivos cuyo número
de repeticiones dependerá de una condición.
Se ejecuta de 1 a N veces.
Sintaxis:
do
{
instrucciones;
} while (condición);
INSTRUCCIONES – CICLOS – DO-WHILE
Ejemplo:
var counter = 1;
do
{
document.writeln( “<H” + counter + “> This is “
+ “an h” + counter + “level head” + “</H” +
counter + “>”);
++counter;
} while (counter <= 6);
INSTRUCCIONES – SWITCH
switch (opcion)
{
case “1”:
instrucciones
break;
case “2”:
instrucciones
break;
case “3”:
instrucciones
break;
default:
instrucciones
}
si el valor es 1;
si el valor es 2;
si el valor es 3;
si el valor no esta entre los anteriores;
INSTRUCCIONES – COMENTARIOS
Los comentarios son líneas que coloca el autor para
propósitos de documentación interna en el programa.
El interpretador del “Browser” ignora los comentarios
por completo.
Comentarios de una línea
Sintaxis:
// comentario
Comentarios de varias líneas
Sintaxis:
/* comentario */
PALABRAS RESERVADAS
abstract
boolean
break
byte
case
catch
char
class
const
continue
deault
do
double
else
extends
false
final
finally
float
for
function
goto
int
implements
input
in
instanceo
f
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronize
d
this
throw
throws
transient
true
try
CARACTERES ESPECIALES
(ESCAPE SEQUENCE)
Permiten insertar caracteres especiales dentro de un
“string”. Los más comunes son:
\n – Posiciona el cursor en una nueva línea.
\t – Ejecuta un “Tab” horizontal.
\r – Pone el cursor al principio de la misma línea (no
de la próxima).
\\ - Cuando se quiere poner el “Backslash” como
parte del “String”.
\” – Poner doble comilla dentro del “String”.
\’ – Poner comilla sencilla dentro del “String”.
OBJETOS PREDEFINIDOS (BUILT-IN)
La programación orientada a objetos, está
tomando más auge e importancia cada día.
 Es una nueva visión que nos permite
programar de una forma diferente a la que ya
conocemos.
 Por el momento solo vamos a mostrar
algunos objetos de JavaScript que son
imprecindibles. En la próxima presentación
vamos a abundar más en este tema.

OBJETOS PREDEFINIDOS - 1
document.write
Escribe el texto en la página y se va a quedar el cursor
al final de esa línea.
Ejemplo:
document.write(“<H1>Hello World!</H1>”);
El Cursor
se queda
aquí.
OBJETOS PREDEFINIDOS - 2
document.writeln
Escribe el texto en la página y se va a quedar el
cursor al principio de la próxima línea.
Ejemplo:
document.writeln(“<H1>Hello World!</H1>”);
El Cursor se
mueve a la
próxima
línea.
OBJETOS PREDEFINIDOS - 3
window.alert
Escribe el texto que se indique en una ventana de
window separada del “browser”. Incluye un botón de
OK para continuar
Ejemplo:
window.alert(“Welcome to\nJavaScript\nProgramming!”);
OBJETOS PREDEFINIDOS - 4
window.prompt
Muestra una pantalla con el mensaje indicado y en el
“Text Box” aparece un valor inicial de cero (0).
Ejemplo:
window.prompt(“Enter first integer”,”0”);
FUNCIONES

Existen dos tipos de funciones:

Funciones globales

Funciones de usuario
FUNCIONES GLOBALES
eval
Convierte de “string” a un valor numérico. Si
es una expresión, se evalúa primero.
Ejemplo:
resultado = eval(“5 + 7”)
isNaN
Evalúa un argumento para determinar si es
"NaN“ (“Not a Number”)
Ejemplo: resultado = isNaN(variable)
FUNCIONES GLOBALES – CONT.
parseFloat
Convierte de un “string” a número real. Si encuentra un
caracter que no es numero, signo (+ o -), punto decimal o
exponente, la funcion ignora la cadena a partir de esa
posicion.
Ejemplo: numeroReal = parseFloat(valorEntradoUsuario)
parseInt
Convierte un “string” a entero. Si se encuentra un
caracter que no es numerico, la funcion ignora la cadena a
partir de esa posicion.
Ejemplo: numeroEntero = parseInt(valorEntradoUsuario)
FUNCIONES GLOBALES
escape
Convierte cualquier carácter no alfanumérico (Ej.
espacio, semicolon) a su equivalente hexadecimal del
código ASCII precedido del símbolo ‘%’.
Ejemplo: valor = escape(“Pepito Huertas”)
El contenido de valor va a ser: “Pepito%20Huertas”
porque el código ASCII del espacio en blanco es 20.
unescape
Hace lo contrario de escape. Cambia los códigos
ASCII por caracteres.
Ejemplo: valor = escape(“Pepito%20Velez”)
El contenido de valor va a ser: “Pepito Velez” porque
cambia %20 a espacio en blanco.
FUNCIONES DE USUARIO



JavaScript permite al usuario definir sus
propias funciones, las cuales pueden tomar
parámetros y devolver valores.
FUNCTION
Se usa para declarar la función. Hay que
asignarle un nombre y te provee hasta un
máximo de 255 parámetros.
Sintáxis: function nombre
([parametro1][,parametro2]...[,parámetro n])
{instrucciones }
EJEMPLO DE UN PROGRAMA SIN
FUNCIONES DE USUARIOS
Tomado del libro Internet & World Wide Web How to Program de
Deitel & Deitel
Página 188
















<!-**************************************************************************
* (C) Copyright 1992-2004 by Deitel & Associates, Inc. and
*
* Pearson Education, Inc. All Rights Reserved.
*
*
*
* DISCLAIMER: The authors and publisher of this book have used their
*
* best efforts in preparing the book. These efforts include the
*
* development, research, and testing of the theories and programs
*
* to determine their effectiveness. The authors and publisher make
*
* no warranty of any kind, expressed or implied, with regard to these
*
* programs or to the documentation contained in these books. The authors *
* and publisher shall not be liable in any event for incidental or
*
* consequential damages in connection with, or arising out of, the
*
* furnishing, performance, or use of these programs.
*
**************************************************************************
-->
EJEMPLO SIN FUNCIONES - 2
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>An Addition Program</title>
EJEMPLO SIN FUNCIONES - 3
<script type = "text/javascript">
<!-var firstNumber, // first string entered by user
secondNumber, // second string entered by user
number1,
// first number to add
number2,
// second number to add
sum;
// sum of number1 and number2
// read in first number from user as a string
firstNumber = window.prompt( "Enter first integer", "0" );
// read in second number from user as a string
secondNumber = window.prompt( "Enter second integer", "0" );
// convert numbers from strings to integers
number1 = parseInt( firstNumber );
number2 = parseInt( secondNumber );
EJEMPLO SIN FUNCIONES - 4
// add the numbers
sum = number1 + number2;
// display the results
document.writeln( "<h1>The sum is " + sum + "</h1>" );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
EJEMPLO DE UN PROGRAMA CON
FUNCIONES DE USUARIOS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>



<HEAD>
<TITLE>Javascript con modulos</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
//**********************************************//
// Definicion de variables
//
//**********************************************//
var area,
// area del rectangulo
ancho_s,
// ancho del rectangulo
alto_s;
// alto del rectangulo
EJEMPLO CON FUNCIONES - 2
//**********************************************//
// Modulo principal del programa ejecuta los
//
// demas modulos.
//
//**********************************************//
function main()
{
PedirValores();
// Pide el ancho y el alto al usuario
CalcularArea();
// Calcula el area del rectangulo
MostrarResultados();
// Muestra el area del rectangulo en el browser
}
//************************************************//
// Solicita los valores al usuario. estos datos //
// se tienen que convertir de string a nummerico.//
//************************************************//
function PedirValores()
{
alto_s = window.prompt( "Entre el alto del rectangulo", "0" );
alto_n = parseInt( alto_s );
ancho_s = window.prompt( "Entre el ancho del rectangulo", "0" );
ancho_n = parseInt( ancho_s );
}
EJEMPLO CON FUNCIONES - 3
Este comando
es el que
ejecuta el
módulo control.
//**********************************************//
// Calcula el area del rectangulo.
//
//**********************************************//
function CalcularArea()
{
area = ancho_n * alto_n;
}
//**********************************************//
// Muestra en el browser el area del rectángulo//
// al usuario.
//
//**********************************************//
function MostrarResultados()
{
document.writeln( "<H1>El area del rectangulo es: " + area + "</H1>" );
}
</SCRIPT>
</HEAD>
<BODY ONLOAD = "main()"> 
<H3> Presione el boton BACK para volver e correr el script </H3>
</BODY>
</HTML>
FIN

CONCEPTOS INTRODUCTORIOS DE JAVASCRIPT

Transcript CONCEPTOS INTRODUCTORIOS DE JAVASCRIPT

Directory