PDF de programación - JavaScript

JavaScript

Fermí Vilà

1

JavaScript

(Manual FV)



Bajado de www.softdownload.com.ar


Antes de empezar:


- Manual F.V.



Significa “manual práctico de informática”, pero realmente realmente PRÁCTICO.

- En el texto me refiero continuamente a TuCarpeta, esto es un subdirectorio de tu

ordenador donde es conveniente que grabes todos los programas de este “tu manual”.

- Todos los programas y ejercicios del manual han sido probados sin problema en el

Microsoft Internet Explorer 5.0

- Mi consejo, es que escribas de nuevo tal como te indico en el texto, cada uno de los

programas utilizando el Bloc de Notas del Windows. Sólo en el caso de que el
programa no te funcione y no descubras cuál es el error, cópialo a partir del Word en el
Bloc de Notas y grábalo con otro nombre; para poder compararlo con el tuyo y así
descubrir el error.
Piensa que se aprende más descubriendo los propios errores, que avanzar sin hacer
ningún error.



ÍNDICE

1. Introducción a la programación en JavaScript.....................................................................3

Ejercicios de autoevaluación 1.................................................................................................18

2. Estructuras de Programación...............................................................................................23

Ejercicios de autoevaluación 2.................................................................................................46


JavaScript

Fermí Vilà

2

3. Funciones y Arrays...............................................................................................................51

Ejercicios de autoevaluación 3.................................................................................................74

4. Programación Visual ............................................................................................................79

Ejercicios de autoevaluación 4.................................................................................................93

5. Programación en HTML .......................................................................................................95

Ejercicios de autoevaluación 5.................................................................................................136

6. Programación Orientada a Objetos......................................................................................139

7. JavaScript y la Web..............................................................................................................173

Soluciones autoevaluación 1....................................................................................................191

Soluciones autoevaluación 2....................................................................................................199

Soluciones autoevaluación 3....................................................................................................211

Soluciones autoevaluación 4....................................................................................................227

Soluciones autoevaluación 5....................................................................................................237



I.- Introducción a la programación en

JavaScript



1.- Introducción

- De todos los servicios que ofrece INTERNET, no cabe duda de que el más popular es la

WWW (World Wide Web).

La WWW no es más que millones de páginas en formato electrónico, con los contenidos y
temáticas más diversas a las que podemos acceder gracias a un ordenador + modem +
browser (navegador).



- Una página WEB no es más que un fichero de texto (ASCII), escrito en formato HTML

(Hyper Text Markup Language = lenguaje etiquetado de hipertexto).



- El HTML es un lenguaje basado en pares de tags (etiquetas). Un tag es un código entre

<>, si es de apertura o un código entre </ > si es de cierre.



Los browsers (navegadores de Internet), son capaces de traducir estas etiquetas (tags) de
forma que presentan visualmente la página.



- Estructura de un fichero HTML


Básicamente consta de cuatro pares de etiquetas:



<HTML>
<HEAD>



JavaScript

Fermí Vilà

3



<TITLE>Nuestra primera página</TITLE>
</HEAD>
<BODY>
..........................
..........................
..........................
</BODY>
</HTML>

Lo que visualizará nuestra página

• El par <HTML> y </HTML>

Determina que un fichero sea HTML

• El par <HEAD> y </HEAD>

Determina la cabecera del fichero HTML, que puede contener un título.

• El par <TITLE> y </TITLE>

Encierra el “título”: frase de texto que aparecerá en el marco del navegador
(primera línea), al ejecutar el fichero HTML

• El par <BODY> y </BODY>

Encierra el contenido de la página html, es decir lo que se visualizará en el
navegador.



Los navegadores (browsers) más conocidos son:

• Netscape Comunicator
• Microsoft Internet Explorer



- Ejecuta el “Bloc de Notas”, es decir:

[Inicio]
Programas



Accesorios


Bloc de Notas


- Escribe:


<HTML>
<HEAD>
<TITLE>PROG000.HTM</TITLE>
</HEAD>
<BODY>
<P>Esto aparecerá en el navegador porque es un párrafo</P>
<P>Esto es otro párrafo</P>
<P>Observa lo que aparece en la línea de título</P>
<P>La línea de título es la frase que aparece en el marco
del navegador, línea superior</P>
<P>¿Está claro para qué sirven los tags P, /P?</P>
</BODY>
</HTML>


- Graba el fichero anterior con el nombre PROG000.HTM en TuCarpeta

- Ejecuta el “Explorador de Windows”. Sitúate en TuCarpeta y haz un doble click en

PROG000.HTM
De esta forma, se ejecuta el navegador de tu ordenador (supondré que es el Internet
Explorer) y se “carga” la página PROG000.HTM

El navegador nos muestra la página HTML “visualmente”, para ver su código debes hacer:

JavaScript

Fermí Vilà

4



Menú Ver


Código fuente

La programación en HTML no tiene ninguna utilidad para un usuario normal, ya que en el
mercado existen herramientas que evitan la necesidad de tener que introducir
manualmente los “tags”: HotMetal, FontPage, Word, etc.
Lo que sí tienen sentido es el estudio de la programación en JavaScript.

JavaScript es un lenguaje de programación creado por la empresa Netscape (creadora de
uno de los navegadores más conocido)
Es el lenguaje de programación más utilizado en Internet para añadir interactividad a las
páginas Web


- No confundir el JavaScript con el Java. El Java es un lenguaje de programación de

propósito general como lo son el C++ o el Visual Basic.


- Un programa en JavaScript se integra en una página Web (entre el código HTML) y es el

navegador el que lo interpreta (ejecuta). Es decir el JavaScript es un lenguaje
interpretado, no compilado (no se genera ningún tipo de fichero objeto o exe).


- Para programar en JavaScript sólo necesitamos un editor de texto (utilizaremos el Bloc de

Notas del Windows) y un navegador (utilizaremos el Microsoft Internet Explorer) para
ejecutarlo.


- ¿Porqué el JavaScript y no otro lenguaje de programación?

Porque:


-


-



• Es moderno (tiene pocos años)
• Es sencillo (su hermano mayor: el Java, es bastante más complejo)
• Es útil (el desarrollo de Internet, se prevé muy rápido en los próximos años)
• Es potente: permite la moderna POO (programación orientada a objetos)
• Es barato: sólo necesitamos un editor de textos (el “Bloc de Notas” está incluido en

el Windows) y un navegador (es gratuito, ya sea el “Internet Explorer” o el
“Netscape”).

• Es visual: permite la moderna “programación visual” (ventanas, botones, colores,

formularios, etc.).

En definitiva: es ideal para un primer curso de introducción a la programación.
Y has de tener en cuenta que hay un “dicho” en informática, que afirma: “Si dominas
un lenguaje de programación, los conoces todos”.



2.- Sintaxis básica

- Escribe, utilizando el “Bloc de Notas” del Windows, el siguiente programa:


<HTML>
<HEAD>
<TITLE>PROG001.HTM</TITLE>
<SCRIPT LANGUAGE="JavaScript">

alert("¡Hola Mundo!");

</SCRIPT>
</HEAD>
<BODY>
<P>
Programa 1 en JavaScript

JavaScript

Fermí Vilà

5

</P>
</BODY>
</HTML>



- Graba el fichero anterior en TuCarpeta con el nombre Prog001.htm

- Ejecuta el programa Prog001.htm, es decir:
• Ejecuta el “Explorador de Windows”
• Sitúate en TuCarpeta
• Clic-Click en Prog001.htm


- Estudio del Prog001.htm:

• Un programa “JavaScript” se escribe integrado en una página HTML, por lo tanto

no es más que un fichero de texto que contiene una serie de pares de tags
correspondientes a la página Web (como mínimo el par: <HTML>, </HTML>),
además del par de tags característico de un programa JavaScript. Dicho fichero se
ha de grabar necesariamente con la extensión HTM (característica de una página
HTML).

• Un programa “JavaScript” no es más que una secuencia de ordenes, que deben

terminar en punto y coma, entre los tags:

<SCRIPT LANGUAGE=”JavaScript”>
y
</SCRIPT>

• En nuestro Prog001.htm, hemos incluido el programa en la cabecera (HEAD) de la

página, pero podríamos colocarlo en cualquier parte del fichero htm

• Nuestro primer programa JavaScript contiene una única sentencia: alert(“”¡Hola

Mundo!”);
Que “abre” una ventana con el mensaje que tenemos entre comillas.
Al hacer clic en el [Aceptar] de la ventana “alert”, se acaba el programa
JavaScript (se encuentra el tag </SCRIPT>) y continua ejecutándose la página
HTML.



- Utilizando el “Bloc de Notas” escribe el siguiente programa:


<HTML>
<SCRIPT LANGUAGE="JavaScript">

// PROG002.HTM
var nom;
nom=prompt("Escribe tu nombre ","Paco");
alert("Mucho gusto "+ nom);

</SCRIPT>
</HTML>


- Grábalo en TuCarpeta con el nombre Prog002.htm

- Ejecútalo v