JavaScript: Introducción al Diseño de Páginas Web Interactivas

JavaScript es un lenguaje esencial para el diseño de páginas de Internet. Aunque es relativamente sencillo, es ampliamente utilizado. No es un lenguaje de programación completo como C, C++, Delphi, etc., sino un lenguaje de script orientado a documentos, similar a los lenguajes de macros en procesadores de texto y hojas de cálculo. JavaScript se ejecuta dentro de un navegador, embebido en una página web HTML. Es un lenguaje interpretado, lo que significa que el navegador analiza y procesa las instrucciones en el momento de su ejecución.

Es crucial recordar que JavaScript distingue entre mayúsculas y minúsculas. Por ejemplo, document.write es diferente de Document.Write (la primera forma es correcta, la segunda genera un error de sintaxis). Prestar atención a las mayúsculas y minúsculas es fundamental para evitar errores. Los nombres de funciones suelen incluir letras mayúsculas.

Variables en JavaScript

Una variable es un espacio de almacenamiento que contiene un valor. Tiene un nombre y pertenece a un tipo (numérico, cadena de caracteres, etc.).

Tipos de Variables

  • Valores Enteros (100, 260, etc.)
  • Valores Reales (1.24, 2.90, 5.00, etc.)
  • Cadenas de caracteres (“Juan”, “Compras”, “Listado”, etc.)
  • Valores lógicos (true, false)

Existen otros tipos de variables que se abordarán más adelante.

Las variables son nombres que asignamos a las ubicaciones donde almacenamos información. En JavaScript, deben comenzar con una letra o un guion bajo (_), y pueden contener dígitos. No pueden tener el mismo nombre que una palabra clave del lenguaje. Se definen con la palabra clave var:

var dia;
var dia, mes, anio;
var edad = 20;
var edad;
edad = 20;

Elección del Nombre de una Variable

Es importante elegir nombres representativos para las variables. En el ejemplo anterior, dia, mes, y anio son claros. Una mala elección sería a, b, y c. Nombres como d, m, a pueden ser menos representativos a largo plazo.

Para mostrar el contenido de una variable en una página, se utiliza la función write del objeto document. Recuerda que JavaScript distingue entre mayúsculas y minúsculas:

Document.Write(nombre); // Error
document.write(nombre); // Correcto

Entrada de Datos por Teclado

La función prompt permite la entrada de datos por teclado. Muestra una ventana donde se puede ingresar un valor. Aunque existen métodos más sofisticados, prompt es útil para aprender los conceptos básicos de JavaScript.

La sintaxis de la función prompt es:

<variable que recibe el dato> = prompt(<mensaje a mostrar en la ventana>, <valor inicial a mostrar en la ventana>);

La función prompt tiene dos parámetros: el mensaje y el valor inicial a mostrar.

Estructuras Secuenciales de Programación

Cuando un problema involucra solo operaciones, entradas y salidas, se denomina estructura secuencial. Un ejemplo es ingresar el nombre y la edad de una persona.

Para sumar valores numéricos ingresados por teclado, se debe utilizar la función parseInt para convertir las variables a enteros. De lo contrario, el operador + concatenará las cadenas en lugar de sumarlas. Por ejemplo, 1 + 1 sin parseInt resultará en 11 en lugar de 2. El operador * no requiere el uso de parseInt.

JavaScript requiere cuidado al operar con contenidos de variables, ya que no se especifica el tipo de dato.

Estructuras Condicionales Simples

No todos los problemas pueden resolverse con estructuras secuenciales. Las estructuras condicionales permiten tomar decisiones. En la vida diaria, constantemente tomamos decisiones. En programación, esto se traduce en la ejecución de un bloque de código si se cumple una condición.

En una estructura condicional simple, hay actividades en el camino del verdadero, pero no en el camino del falso. La instrucción if en JavaScript permite implementar estas estructuras. La condición debe ir entre paréntesis. Si la condición es verdadera, se ejecutan las instrucciones dentro de las llaves.

Se pueden utilizar los siguientes operadores relacionales en la condición del if:

  • > mayor
  • >= mayor o igual
  • < menor
  • <= menor o igual
  • != distinto
  • == igual

La condición del if debe involucrar una variable, un operador relacional y otra variable o valor fijo.

El operador + también se puede utilizar para concatenar cadenas de caracteres:

document.write(nombre + ' esta aprobado con un ' + nota);

Estructuras Condicionales Compuestas

En una estructura condicional compuesta, se realiza una actividad u otra, dependiendo de si la condición es verdadera o falsa. Es crucial recordar que solo se ejecutan las actividades de una rama, nunca de ambas.

La función prompt retorna un string, por lo que debe convertirse a entero si se desea comparar numéricamente. En JavaScript, una variable puede cambiar el tipo de dato que almacena a lo largo de la ejecución del programa.

La estructura condicional compuesta tiene la siguiente codificación:

if (<condición>) {
 <Instruccion(es)>
} else {
 <Instruccion(es)>
}

Es similar a la estructura condicional simple, pero incluye la palabra clave else y un bloque {} con una o varias instrucciones. Si la condición del if es verdadera, se ejecuta el bloque después de la condición; de lo contrario, se ejecuta el bloque después del else.

Estructuras Condicionales Anidadas

Una estructura condicional es anidada cuando otra estructura condicional se encuentra dentro de la rama del verdadero o del falso de la primera.

Ejemplo: Programa que pide tres notas de un alumno, calcula el promedio e imprime un mensaje:

  • Si el promedio es >=7 mostrar “Promocionado”.
  • Si el promedio es >=4 y <7 mostrar “Regular”.
  • Si el promedio es <4 mostrar “Reprobado”.

Los comentarios en JavaScript se indican con dos barras previas:

// Convertimos los 3 string en enteros

Para comentarios de varias líneas:

/*
linea de comentario 1.
linea de comentario 2.
*/