Vamos a ver las nociones básicas sobre cómo empezar a programar en JavaScript con ejemplos básicos.

Recuerda que el código JavaScript se incluye en el documento HTML mediante la etiqueta <script>, que tiene cláusulas de apertura y cierre.

Ejemplo de primer programa con JavaScript

En el siguiente ejemplo vemos que dentro la etiqueta script hay dos llamadas a funciones o métodos. Alert y document.write. el primero muestra un mensaje al usuario en una ventanita y el segundo sustituye el contenido del documento HTML por el texto introducido entre comillas.

Dónde ubicar JS

Podemos ubicar los scripts donde queramos dentro del documento y también se puede enlazar a un archivo externo .js en el que se encuentre el código.

Aunque podemos ubicar el código JavaScript en cualquier parte del documento HTML, cuando dentro del código se haga referencia a un elemento del documento HTML, este código debe aparecer después del elemento o emplear algún métido que espere a que se cargue todo el documento para ejecutar el script.

Cómo insertar comentarios en JavaScript

Enviar mensajes a la consola en JavaScript

Tu amiga la consola es una herramienta esencial cuando desarrollamos en JS. con estos métodos a continuación podemos enviar diferentes tipos de mensaje a la consola del navegador:

Envío de contenido al HTML

Podemos enviar contenido al HTML mediante el método write de la clase document:

document.write("Cadena de texto o una variable como n concatenando con +: " + n);

Es importante tener en cuenta que si empleamos document.write cuando la página está completamente cargada, todo el contenido se sustituye. En realidad se emplea normalmente en entornos de prueba. Recomendable leer y ver los ejemplos de W3Schools.

Obtención de datos por teclado:

La función promt() nos permite abrir un cuadro de diálogo al usuario para que introduzca un dato. Podemos pasarle como parámetro una cadena de caracteres que se mostrará y nos devuelve una cadena de texto.

prompt("Introduzca número");

Lo que ocurre es que, como hemos dicho, esta función devuelve una cadena de texto. Si queremos trabajar exclusivamente con números debemos convertir esa cadena de texto a número mediante la función parseInt(), a la que se le introduce una cadena de texto como parámetro y devuelve el valor en formato numérico.

numero=parseInt("5");

Si unimos ambas funciones en la misma sentencia tenemos el dato introducido por el usuario en formato numérico:

numero=parseInt(prompt("Introduzca número"));

También se puede usar la función Number para convertir texto a números:

Diferencia entre ParseInt() y Number()

// parsing:
parseInt("20px");       // 20
parseInt("10100", 2);   // 20
parseInt("2e1");        // 2

// type conversion
Number("20px");       // NaN
Number("2e1");        // 20, exponential notation

Cuadro de diálogo de confirmación

Con la función confirm podemos hacer una pregunta al usuario en un cuadro de diálogo en el que el este puede afirmar o no y en tal caso la función devolverá verdadero o falso respectivamente.

var v = confirm("¿Quieres enviarlo?");
if ( v ) {
    document.write("Ok, gracias.");
} else {
    document.write("Estaremos aquí para cuando te decidas ;)");
}

Navegadores obsoletos o con JavaScript desactivado

La etiqueta <noscript> nos permite especificar contenido alternativo para los usuarios sin JS en sus navegadores.

También tenemos el truco de comentar el contenido del script mediante un comentario HTML, que sólo surtirá efecto en un navegador que no interprete JavaScript.

<script> <!– function mostrarMsj() {     alert(“Hola”) } //–> </script>

Ejemplos con objetos del DOM

Aquí podemos ver la referencia del DOM en W3Schools.

Veamos algunos ejemplos:

Ejemplo de objeto Screen en JavaScript

Se trata de un sencillo ejemplo que muestra los valores de la pantalla activa del usuario en el documento HTML:

<script>
  document.write('Valores de las propiedades del objeto screen:<br>');
  document.write('availHeight :' + screen.availHeight + '<br>');
  document.write('availWidth :' + screen.availWidth + '<br>');
  document.write('height :' + screen.height + '<br>');
  document.write('width :' + screen.width + '<br>');
  document.write('colorDepth :' + screen.colorDepth);
</script>

Ejemplo de objeto Window en JavaScript

En el ejemplo a continuación se abre una nueva ventana en la que agregamos código HTML mediante document.write. Es el uso habitual de este método.

<HTML>
<HEAD>
<TITLE>Abriendo y cerrando ventanas con Javascript vía Víctor M. Rivas Santos</TITLE>
<SCRIPT>
<!--
var nuevaVentana;
function  nueva() {
  nuevaVentana=window.open("", "segundaPag", 
  "toolbar=yes,location=no,menubar=yes,resizable=yes,"+
  "width=30,height=30" );
  nuevaVentana.document.write("<HTML><HEAD><TITLE>"+
  "Sin Título</TITLE></HEAD>\n");
  nuevaVentana.document.write("<BODY><form>\n");
  nuevaVentana.document.write("<input type='button' "+
  "value='Cerrar' onClick='window.close();'>\n");
  nuevaVentana.document.write("</form>\n");
  nuevaVentana.document.write("</BODY></HTML>\n");
  nuevaVentana.document.close();
}
// -->
</SCRIPT>
<BODY>
<FORM>
  <INPUT TYPE="button" VALUE="Abrir" onClick="nueva();"><br>
</FORM>
</BODY>
</HTML>

Ejemplo de objeto Navigator en JavaScript

Este ejemplo aporta información sobre el navegador que está empleando el usuario.

<!-- Manual de JavaScript de WebEstilo --> 
<HTML> 
<HEAD> 
   <title>Ejemplo de JavaScript</title> 
</HEAD> 
<BODY> 
<script LANGUAGE="JavaScript"> 
<!-- 
   document.write("Navigator <b>appCodeName</b>: " + navigator.appCodeName + "<br>"); 
   document.write("Navigator <b>appName</b>: " + navigator.appName + "<br>"); 
   document.write("Navigator <b>appVersion</b>: " + navigator.appVersion + "<br>"); 
   document.write("Navigator <b>language</b>: " + navigator.language + "<br>"); 
   document.write("Navigator <b>platform</b>: " + navigator.platform + "<br>"); 
   document.write("Navigator <b>userAgent</b>: " + navigator.userAgent + "<br>"); 
//--> 
</script> 
</BODY> 
</HTML>

Ejemplo de objeto Location en JavaScript

Este ejemplo muestra información sobre la URL y demás parámetros habituales del objeto Location:

<!-- Manual de JavaScript de WebEstilo --> 
<HTML> 
<HEAD> 
   <title>Ejemplo de JavaScript</title> 
</HEAD> 
<BODY> 
<script LANGUAGE="JavaScript"> 
<!-- 
   document.write("Location <b>href</b>: " + location.href + "<br>"); 
   document.write("Location <b>host</b>: " + location.host + "<br>"); 
   document.write("Location <b>hostname</b>: " + location.hostname + "<br>"); 
   document.write("Location <b>pathname</b>: " + location.pathname + "<br>"); 
   document.write("Location <b>port</b>: " + location.port + "<br>"); 
   document.write("Location <b>protocol</b>: " + location.protocol + "<br>"); 
//--> 
</script> 
</BODY> 
</HTML>

Ejemplo de objeto Document en JavaScript

Obtener clases, etiquetas y demás elementos del documento HTML.

Más sobre document.write().

Más sobre document.createElement().

Ejemplo de objeto Date en JavaScript

Cálculo de los días entre la fecha actual y una fecha futura:

<script>
	var hoy = new Date();
	var otraFecha = new Date(2020,12,31);
	//A continuación obtenemos la diferencia en milisegundos		
	var diferencia = otraFecha.getTime() - hoy.getTime();
	//Cálculo de días que hay en los milisegundos redondeando
	dias = Math.round(diferencia/(1000*60*60*24));
	document.write("Faltan " + dias + " días");
</script>

Arrays en JavaScript

Ejemplos con Arrays:

También se pueden declarar los arrays como objetos:

var persona = {nombre:"John", apellido:"Snow", edad:46};

Y estar compuestas por objetos:

miArray[0] = Date.now;
miArray[1] = miFuncion;

Ejemplo de Array en un buble for

También podemos recorrer arrays con la función forEach().

En los ejemplos anteriores se puede ver cómo en algunos casos de usa la llamada al constructor de la clase Array y en otros no. En W3Schools, sección When to Use Arrays. When to use Objects en la página JavaScript Arrays podemos ver los matices.

Consideraciones transversales sobre arrays y matrices en programación

Una de las cosas básicas que como vemos, ya tenemos implementado en JavaScript a cerca de las matrices de elementos es su búsqueda y ordenación.

Veamos algunos recursos sobre esto a nivel teórico:

Un ejemplo de arrays con Países

Analiza el siguiente ejemplo y descubre, buscando información externa, qué hacen los métodos shift y unshift.

¿Podrías determinar el número de elementos del array si agregamos las siguientes líneas de código al script?

        countries.splice(3,0, 'Austria', 'México', 'Panamá');
        document.write('<p>El lugar más imperial es <em>');
        document.write(countries[3] + '</em></p>');
        countries.splice(6,1);
        document.write('<p>El lugar en que más me he cansado es <em>');
        document.write(countries[6] + '</em></p>');
        countries.splice(1,2, 'Canadá', 'Egipto');
        document.write('<p>El lugar que más me ha impactado es <em>');
        document.write(countries[1] + '</em></p>');

Ahora prueba a ordenar y mostrar el array.

Es importante recordar que la ordenación de números se puede hacer mediante la función que vemos en el siguiente ejemplo:

var numArray = [140000, 104, 99];
numArray = numArray.sort(function (a, b) {  return a - b;  });

Arrays multidimensionales

Podemos meter Arrays dentro de otras, generando así matrices de múltiples dimensiones.

Se explican paso a paso en el artículo Arrays multidimensionales en Javascript de Miguel Ángel Álvarez.

En este script tenemos en un ejemplo:

var arrayMuchasDimensiones = [1, ["hola", "que", "tal", ["estas", "estamos", "estoy"], ["bien", "mal"], "acabo"], 2, 5];
alert (arrayMuchasDimensiones[0]);
alert (arrayMuchasDimensiones[1][2]);
alert (arrayMuchasDimensiones[1][3][1]);
alert (arrayMuchasDimensiones[1][3]);

Caso práctico propuesto

Se propone realizar un script en el que carguemos preguntas y respuestas en un Array bidimensional y posteriormente vaya haciendo las preguntas al usuario mediante promt e indique si la respuesta es correcta o no. Si la respuesta no es correcta, indicará la respuesta correcta.