Introducción a la programación en JavaScript

Este punto esta dividido en 8 partes numeradas para un mejor entendimiento y un mayor orden del mismo.
Los puntos son:

1. Introducción
2. Sintaxis básica
3. Variables
4. Tipos de Datos
5. El tipo de dato "String"
6. El tipo de datos "Number"
7. Contadores
8. Conversión entre tipos de datos
   

El tipo de datos "Number"

Podemos guardar indistintamente en una variable number un número entero, decimal, positivo o negativo.
Ejemplos:

• var numNatural = 1234;
• var numEntero = -479;
• var numDecimal = 3.141592;
• var numDecimal2 = -0.123;

Leer mas...

Bases de Numeración en JavaScript (números enteros)
Por defecto, el sistema de numeración es el decimal.

• Base Hexadecimal (base 16): anteponemos el prefijo 0X
• Base Octal (base 8): anteponemos un cero

Dígitos del sistema decimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Dígitos del sistema hexadecimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A (que corresponde al 10 en base decimal), B (que corresponde al 11 en decimal), C (12), D (13), E (14), F (15)
Ejemplo:

• FF32 en base 16 es 2 + 3*16 + 15*16² + 15*16³ = 65330 en sistema decimal
  Es decir: 0xFF32 (número en base 16, según notación de JavaScript) = FF32₁₆ = 65330₁₀
• 123458 = 5 + 4*8 + 3*8² + 2*8³ + 1*8⁴ = 5349₁₀
  Es decir: 012345 (número en base 8, según notación de JavaScript) = 12345₈ = 5349₁₀
  
• Escribe el siguiente programa:
  

  <HTML>
  <SCRIPT LANGUAGE=''JavaScript''>
  // PROG007.HTM
  var n1=57; //número en base 10
  var n2=012345; //base 8, porque empieza por 0
  var n3=0xFF32; //base 16, porque empieza por 0x
  alert("número decimal= "+n1);
  alert("el 12345 en base 8 es en decimal= "+n2);
  alert("el FF32 en base 16 es en decimal= "+n3);
  /* Observa que al escribir una variable numérica en un "alert" siempre nos da el número en decimal,aunque sea en octal o hexadecimal */
  </SCRIPT>
  </HTML>

• Grábalo en TuCarpeta con el nombre Prog007.htm y ejecútalo.

En el programa anterior aparecen 3 “alerts”, uno para cada uno de los tres números. No hay ningún problema para incluir los tres “alerts” en uno solo....

• En efecto, escribe el siguiente programa:
  

  <HTML>
  <SCRIPT LANGUAGE=''JavaScript''>
  //PROG007b.HTM
  var n1=57; // número en base 10
  var n2=012345; //base 8, porque empieza por 0
  var n3=0xFF32; //base 16, porque empieza por 0x
  alert("número decimal= "+n1+"\n"+"el 12345 en base 8 es en decimal = "+n2+"\n"+"el FF32 en base 16 es en decimal = "+n3);
  </SCRIPT>
  </HTML>

• Grábalo en TuCarpeta con el nombre Prog007b.htm y ejecútalo.

Observa que la solución de nuestro problema está:

• Unir texto (entre comillas) y variables (sin comillas), con el signo “+”
• Cada vez que deseemos un cambio de línea, incluimos “\n”

Veamos otra forma de incluir en un “alert” muchos datos ...

• Escribe:
  

  <HTML>
  <SCRIPT LANGUAGE="JavaScript">
  // Prog007bb.htm
  var x,y,z;
  salida="";
  var x1="Pepito Grillo", y1="Paquita González";
  var num1=37, num2=3.752;
  x=prompt("Escribe tu nombre:","");
  y=prompt("Escribe tu primer apellido:","");
  z=prompt("Escribe tu segundo apellido:","");
  salida=salida+"Ahora un alert largo ";
  salida=salida+x+y+z;
  salida=salida+x1+" "+y1;
  salida=salida+num1+" "+num2;
  salida=salida+" ,ya me he cansado";
  alert(salida);
  </SCRIPT>
  </HTML>

• Grábalo en TuCarpeta con el nombre Prog007bb.htm y ejecútalo.

Observa de qué forma acumulamos muchos datos en un solo “alert” (ésta será la forma de proceder, cuando necesitemos una “salida” con muchos valores):

• Definimos una variable “vacía”: var salida = ””;
• Acumulamos a la variable salida todo lo que queramos: salida = salida + lo que sea
• “lo que sea” puede ser una cadena (un texto) o una variable (sea numérica o de texto).
  salida=salida + x1 + “ “ + y1;
  salida=salida + “ya me he cansado”;
• Para acabar, un solo “alert”: alert(salida);

Variables nulas
Cuando una variable no contiene ningún valor, su contenido es nulo
Ejemplo:

• miVariable = "Hola";
• miVariable= null; // la vaciamos para que no ocupe memoria.

Valores especiales para variables numéricas
NaN: no es un número.
Infinity: infinito, por ejemplo 3/0

• Escribe el siguiente programa:
  

  <HTML>
  <SCRIPT LANGUAGE="JavaScript">
  //PROG008.HTM
  var var1="Pepe";
  var var2="Paquito";
  var var3=5/0;
  alert("Pepe es "+var1);
  alert("Paquito + 2 es = "+(var2+2));
  alert("5/0 es = "+var3);
  </SCRIPT>
  </HTML>

• Grábalo en TuCarpeta con el nombre Prog008.htm y ejecútalo.
  

El tipo de dato "String"

En JavaScript los textos se denotan por comillas dobles o comillas simples, pero no ambas a la vez.

• Variable1 = "Pepito"
• Variable2 = 'Paquito'

Podemos incluir un carácter de control en una cadena de texto, si utilizamos el llamado carácter de escape que es: \
Los caracteres de control más usados son:

• \n salto de línea
• \t tabulador

Leer mas...

• Escribe el siguiente programa:
  

  <HTML>
  <SCRIPT
  LANGUAGE="JavaScript">
  // PROG006.HTM
  var num;
  alert("Hola que tal");
  alert("Hola \nque tal");
  alert("Hola\t"+"que"+"\n"+"tal");
  alert("Hola\n que\nt\nal");
  num=prompt("Escribe un número: ","");
  alert("El \ndoble\n es:\n"+(num*2));
  </SCRIPT>
  </HTML>

• Grábalo en TuCarpeta con el nombre Prog006.htm
• Ejecútalo, observando detenidamente la acción de \n y \t
• Si no introducimos un número en el "prompt", en el "alert" correspondiente al doble del número, aparecerá NaN, que quiere decir que no es un número.
  

Tipos de Datos

Cuando declaramos una variable, ésta no pertenece a ningún tipo de dato en concreto, se dice que es Undefined. Es al asignarle un valor cuando pasa a ser de uno u otro tipo, según el dato que albergue.
Existen 6 tipos de datos:

• String: cadenas de texto
• Object: objetos
• Number: valores numéricos
• Null: nulo
• Boolean: true o false
• Undefined: no definido.

Podemos averiguar el tipo de dato que contiene una variable si utilizamos la función incorporada typeof
leer mas...

• Escribe el siguiente programa:
  

  <HTML>
  <SCRIPT
  LANGUAGE=''JavaScript''>
  // PROG005.HTM
  var Pepe;
  var PEPE="Hola que tal ";
  var pepE=75.47;
  var pEpe=" ¿Como estás?";
  Pepe=PEPE+pEpe;
  alert("PEPE="+PEPE);
  alert("PEPE es "+typeof(PEPE));
  alert("pepE="+pepE);
  alert("pepE es "+typeof(pepE));
  alert("pEpe="+pEpe);
  alert("pEpe es "+typeof(pEpe));
  alert("Pepe="+Pepe);
  alert("Pepe es "+typeof(Pepe));
  </SCRIPT>
  </HTML>

• Grábalo en TuCarpeta con el nombre Prog005.htm
• Ejecútalo tantas veces como quieras.
  

Variables

Declaración de variables

Una variable se puede declarar en JavaScript, de dos formas:

• Forma Explícita: var nombre Variable;
• Forma Implícita: var nombre Variable = valor;

En el último caso no es imprescindible escribir var, pero es conveniente, ya que de esta forma localizamos rápidamente todas las variables del programa.

El "JavaScript" es un lenguaje de programación "Case Sensitive", esto es: no es lo mismo las mayúsculas que las minúsculas. Es decir, para el JavaScript: pepe es distinto de Pepe y distinto de pEpe.

Leer mas...

• Escribe el siguiente programa:
  

  <HTML>
  <SCRIPT LANGUAGE=''JavaScript''>
  // PROG004.HTM
  /* Programa que utiliza una variable explícita y dos implícitas */
  var Expli;
  var pi=3.141592;
  var radio=7;
  Expli=pi*radio*radio;
  alert("Área del Círculo = "+Expli);
  <SCRIPT>
  <HTML>

• Grábalo en TuCarpeta con el nombre Prog004.htm
• Ejecútalo
  
  

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
  </P>
  </BODY>
  </HTML>
• Graba el fichero anterior en TuCarpeta con el nombre Prog001.htm. Leer mas...
  

• Ejecuta el programa Prog001.htm, es decir:
  
  • Ejecuta el “Explorador de Windows”
  • Sitúate en TuCarpeta
  • Doble-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 varias veces, observando detenidamente lo que sucede.

Estudio del Prog002.htm

1. Primera y última línea: <HTML> y </HTML>
   Es decir: página html mínima que necesitamos para incluir un programa JavaScript.
2. Segunda y penúltima líneas: <SCRIPT LANGUAGE=.....> y </SCRIPT>, es decir programa en JavaScript
3. Primera sentencia del programa: // PROG002.HTM
   Única línea del programa que no es necesario acabarla con punto y coma.
   Todas las líneas que empiezan por // son comentarios para el programador, es decir no forman parte del programa, dicho de otra forma: el navegador si encuentra una línea que empieza por //, la salta.
4. var nom;
   Definimos una variable de nombre nom
5. nom = prompt(“Escribe tu nombre”,”Paco”);
   Aparece un recuadro con un mensaje y un campo donde podemos escribir algo; el mensaje corresponde a lo que escribimos en el primer argumento de la función prompt, encerrado entre comillas. El segundo argumento del prompt contiene el valor que aparece por defecto en el campo del cuadro de diálogo.
   El valor del prompt es nom, es decir lo que nosotros escribamos en el cuadro será el valor que tomará la variable nom.
   Si no escribimos nada y hacemos click en [Aceptar], el prompt, es decir la variable nom tomará el valor de Paco, porque es el valor que aparece por defecto.
6. alert("Mucho gusto "+nom);
   Aparece un cuadro con el mensaje "Mucho gusto" y a continuación el valor de la variable
   "nom", que será lo que hemos escrito en el primer cuadro que nos ha aparecido.

En definitiva:

• La función prompt nos permite introducir "valores", dichos valores se han de guardar en variables, que previamente hemos de declarar con la palabra reservada "var"
• La función "alert" muestra mensajes y/o valores de variables.

• Utilizando el "Bloc de Notas del Windows" escribe el siguiente programa:
  <HTML>
  <SCRIPT LANGUAGE="JavaScript">
  // PROG003.HTM
  /*Programa que sirve para calcular
  el área de un rectángulo */
  var base,altura;
  base=prompt("Escribe la base del Rectángulo","");
  altura=prompt("Escribe la altura del Rectángulo","");
  alert("El área del Rectángulo es = "+(base*altura));
  </SCRIPT>
  </HTML>
• Grábalo en TuCarpeta con el nombre Prog003.htm
• Ejecútalo varias veces. Sería conveniente utilizar números enteros y también decimales
  (5.72, 0.531: observa que has de utilizar el punto decimal inglés).
• Si has ejecutado el programa una vez, para volverlo a ejecutar, no es necesario que
  "cierres" el navegador, basta que hagas: Menú Ver - Actualizar o si quieres ir más rápido, pulsa la tecla [F5]
• Es importante que tengas claro este programa:
  
  • Declaramos dos variables (var), que necesitamos para introducir la base y la altura del rectángulo, a través de dos "prompts": base= prompt...... - altura= prompt.....
  • Por último necesitamos dos "alerts" que nos muestre el resultado del programa, que es simplemente el producto (base * altura).
• El único elemento nuevo que aparece en el Prog003.htm es:
  /*Programa que sirve para calcular el área de un rectángulo */
  Todo lo que aparece escrito entre /* y */ no es más que un comentario para el programador, igual que pasaba con las líneas que empezaban por //
  La diferencia entre // y /* */ está en que esta última forma de incluir un comentario, nos
  permite colocarlo de forma que ocupe más de una línea.
  

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.

Leer mas...

• Estructura de un fichero HTML

Básicamente consta de cuatro pares de etiquetas:
<HTML>
<HEAD>
<TITLE>Nuestra primera página</TITLE>
</HEAD>
<BODY>
..........................
..........................
..........................
</BODY>
</HTML>

• 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
• Mozilla Firefox (particularmente mi preferido (.^^)' )

Vayamos con un ejemplo sencillo de aplicación:

• Ejecuta el “Bloc de Notas”, es decir: [Inicio] - Programas - Accesorios -Bloc de Notas
• En el "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:

• 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”.

Javascript

JavaScript

Antes de empezar con el presente tutorial, debo poner en claro algunos puntos:

• Dicho tutorial, segun lo que eh encontrado, pertenece a Fermi Vila, lo puedes encontrar en el siguiente website: www.softdownload.com.ar.
  
• la version online la encontre en: www.wikilearning.com.
  

Consejos antes de empezar:

• 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.

Indice:

Introducción a la programación en JavaScript
Ejercicios de autoevaluación 1
Estructuras de Programación
Ejercicios de autoevaluación 2
Funciones y Arrays
Ejercicios de autoevaluación 3
Programación Visual
Ejercicios de autoevaluación 4
Programación en HTML
Ejercicios de autoevaluación 5
Programación Orientada a Objetos
JavaScript y la Web
Soluciones autoevaluación 1
Soluciones autoevaluación 2
Soluciones autoevaluación 3
Soluciones autoevaluación 4
Soluciones autoevaluación 5