conceptos introductorios de javascript preparado por: prof. nelliud d. torres

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.

Comando que indica que comienza el código XHTML

Comentarios

“Header” de la página.

Título de la página.

<?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>Mi primer programa en JavaScript</title>

<script type = "text/javascript">

FORMATO DE UN PROGRAMA EN JAVASCRIPT

Indica tipo de documento y lenguaje.

Comando de Javascript que se va a ejecutar.Final de código

Javascript (script)

Esta parte se deja en blanco si es que no se va a incluir comandos de HTML para la página.



</script>

</head>

<body>

</body>

</html>

FORMATO DE UN PROGRAMA EN JAVASCRIPT – CONT.

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'

BooleanoVerdadero (true) o falso (false)

Objeto

Más adelante hablaremos sobre esto.Función

NULL 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:

var miArreglo = new Array(10); for (i = 0; i < 20; i++) { miArreglo[i] = i; }

Define un arreglo de 11 posiciones (0-10). Trabaja en base 0.

Le está asignando el valor del suscrito dentro del arreglo.

OPERADORES BINARIOSOperad

orDescripció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 operando de la derecha

varNum -= contador

* =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

Operador Descripción

++xIncrementa 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 UNARIOS


&&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 LÓGICOS


==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

OPERADORES DE COMPARACIÓN

PRECEDENCIA DE LOS OPERADORES

Prioridad

Operador

Descripción

1 () []Paréntesis, corchetes y el operador punto que sirve para los objetos.

2 ! - ++ --negación, negativo e incrementos.

3 * / %Multiplicación división y módulo .

4 +- Suma y resta.

5<< >> >>>

Cambios a nivel de bit.

PRECEDENCIA DE LOS OPERADORES – CONTINUACIÓN

Prioridad


6 < <= > >= Operadores condicionales.

7 == !=

Operadores condicionales de igualdad y desigualdad.

8 & ^ | Lógicos a nivel de bit.

9 && || Lógicos boleanos.

10

= += -= *= /= %= <<= >>= >>>= &= ^= !

=

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.

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

Ejemplo - 1:if (studentGrade >= 60) document.writeln(“Paso el

examen”);else document.writeln(“No paso el

examen”);

INSTRUCCIÓN – IF - CONT. - 1

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”); {


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 – SWITCHswitch (opcion){ case “1”: instrucciones si el valor es 1; break; case “2”: instrucciones si el valor es 2; break; case “3”: instrucciones si el valor es 3; break; default: instrucciones 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íneaSintaxis:

// comentario Comentarios de varias líneas

Sintaxis: /* comentario */

PALABRAS RESERVADASabstract 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

var val while with

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.writeEscribe 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 - 2document.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.


window.alertEscribe el texto que se indique en una ventana de window separada del “browser”. Incluye un botón de OK para continuarEjemplo:window.alert(“Welcome to\nJavaScript\nProgramming!”);


window.promptMuestra 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 GLOBALESeval

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.

parseFloatConvierte 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)

parseIntConvierte 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 GLOBALESescape

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.

unescapeHace 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

<?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 - 2


// 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 ); }

//**********************************************//// 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>

EJEMPLO CON FUNCIONES - 3

Este comando es el que ejecuta el módulo control.

conceptos introductorios de javascript preparado por: prof. nelliud d. torres

Documents