Tutorial bases de Javascript

Tutorial Javascript

Parte 1: Algunas formas de mostrar hola mundo en Javascript

Parte 2: Características básicas del lenguaje Javascript

Parte 3: No hace falta que el código vaya directamente en el archivo HTML: Archivos JS

Parte 4: Funciones

Parte 5: Eventos

Parte 6: Arreglos

Parte 7: Matriz con arreglos

Parte 8: Join y Split, Strings y arreglos

Parte 9: Objetos

Parte 10: Conclusión

---------------------------------------------------------------------------------------------------

Parte 1: Algunas formas de mostrar hola mundo en Javascript

Primero aprende HTML5, en Google hay varios tutoriales. Yo hice uno sencillo (al que puedes entrar en este enlace).

Porque nuestros scripts van a correr sobre una página web, y esta debe tener un formato. Vamos a usar el siguiente formato para nuestra plantilla:

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Tutorial Javascript</title>

    </head>

    <body>

        <!-- Código -->

    </body>

</html>

¿Cuántos navegadores usa usted? Lo más probable es que utilice uno. Si usa varios y es desarrollador, podría haber notado lo que a continuación vamos a comentar, y si no, será necesario para seguir con el tutorial entenderlo.

Hay tres formas en las que podemos mostrar resultados con Javascript.

1. Mostrando los resultados en la consola (sirve para debugg de cómputo y textos)

2. Mostrando los resultados en la página (y así se muestra el resultado final).

3. Mostrando los resultados con una ventana alert

Entonces primero hay que mostrar un hola mundo en la consola.

La consola en el navegador Chrome se obtiene al presionar Cntrl+Shift+J

Este mismo resultado lo puedes obtener en cualquier navegador. Para saber cómo se puede sacar la consola en otros navegadores realiza una búsqueda en Google con los términos “mostrar consola en nombreDeMiNavegador”.

Para mostrar Hola Mundo basta con el siguiente código:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

console.log("Hola Mundo"); // la declaración termina en punto y coma

</script>

</body>

</html>

Para mostrar Hola Mundo como alerta, sería de la siguiente forma:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

alert("Hola Mundo");

</script>

</body>

</html>

La otra forma sería escribir en el documento usando write, de la siguiente forma:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

document.write("Hola Mundo");

</script>

</body>

</html>

Los comentarios se hacen de la siguiente forma:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

<!--

Esto es un comentario HTML

-->

* Comentario multilinea en Java

document.write("Hola Mundo"); // Escribe 'hola mundo' en el documento

document.console("Hola Mundo"); // Escribe 'hola mundo' en la consola

alert("Hola Mundo"); // Escribe 'hola mundo' en una alerta

</script>

</body>

</html>

Eso muestra los tres modos de hola mundo (recuerda que la consola se muestra al presionar Shift+Cntrl+J

Note que los comentarios en Javascript son diferentes de los comentarios en HTML.

---------------------------------------------------------------------------------------------------

Parte 2: Características básicas del lenguaje Javascript

1. Javascript es débilmente tipado, o sea que no hace falta declarar el tipo de dato.

2. Antes de declarar una variable se usa la palabra var

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var holaMundo= "Hola Mundo" // Es de tipo String

document.write(holaMundo); // Escribe el valor de la variable

</script>

</body>

</html>

3. La suma de un entero con una cadena de texto da como resultado la yuxtaposición de la cadena con el número, es decir ocurre una concatenación

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var holaMundo = "Hola Mundo" // Es de tipo String

var numero = 206370942;

var suma = holaMundo+numero;

document.write(suma); // Muestra una concatenación

</script>

</body>

</html>

4. Los 4 operadores aritméticos básicos son los mismos de toda la vida.

5. No funcionan todas las secuencias de escape, como en los lenguajes de escritorio convencionales.

Las secuencias de escape en, por ejemplo, C++, son las siguientes (D&D 6ta ed.)

Pero como lo que al final se muestra es un documento HTML (al usuario final) se debe sustituir por sintaxis HTML.

Por ejemplo para el salto de línea tendría más sentido usar el <br /> o encerrar el texto en <p></p>, porque el salto de línea \n no va a funcionar.

De todos estos caracteres de escape los más útiles son las comillas, porque estos si funcionan. Veamos un correcto uso en cuanto a secuencia de escape en Javascript con respecto a lo que acabo de decir:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

// Aclaraciones sobre secuencias de escape

var holaMundo = "Hola Mundo<br />\"hola mundo\""

document.write(holaMundo);

</script>

</body>

</html>

Esto muestra lo siguiente:

El salto de línea no tiene secuencia de escape, pero las comillas si, y funcionó a la perfección.

Sin embargo, ¿qué pasaría si mostramos esto en un alert?

Qué desastre, se estropeó el salto de línea. Probemos esta vez el carácter de escape para el salto de línea:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

// Aclaraciones sobre secuencias de escape

var holaMundo = "Hola Mundo\n\"hola mundo\""

alert(holaMundo);

</script>

</body>

</html>

En conclusión, tome en cuenta donde está mostrando mensajes para evitar posibles errores. En cuanto a la aritmética

6. Bucles for, while funcionan, conectivos lógicos y operadores relacionales son los mismos, hay if, else if, else, switch. Use llaves para encerrar el código esto no es Python (pero aun así haga buena identación para mayor legibilidad del código).

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var i = 0;

while (i < 5) {

document.write("while");

i+=1;

}

for (a=0;a<5;a++) {

document.write("for");

i+=1;

}

</script>

</body>

</html>

Cuando utilice listas, puede hacer cosas como for(elemento:lista) para referirse a cada uno de los elementos de la lista.

Y no se quede en lo básico con estos bucles, recuerde que existen los operadores de incremento

Y los operadores de asignación se pueden usar con las 4 operaciones aritméticas básicas:

También se puede usar el ciclo doWhile:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var i = 0;

do {

document.write("doWhile");

i+=1;

}

while (i < 5)

</script>

</body>

</html>

En este caso imprime 5 veces el contenido. Para entender con exactitud la diferencia entre un While y un do While puede buscar los diagramas UML. No es muy común pero puede ser indispensable dependiendo del caso.

Un switch se hace de la siguiente forma:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var numero = 2;

switch (numero) {

case 0:

document.write("Cero");

break;

case 1:

document.write("Uno");

break;

case 2:

document.write("Dos");

break;

default:

document.write("Ninguno");

}

</script>

</body>

</html>

Veamos un caso donde necesitemos omitir el break.

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var numero = 12;

switch (numero) {

case 12:

document.write("Es 12<br/>");

// se omite el break;

case 24 / 2:

document.write("Es 24/2<br/>");

break;

default:

document.write("No es ninguno<br>");

}

</script>

</body>

</html>

En este caso si hubiéramos puesto un break, no se hubiera comprobado la segunda condición de case 24 / 2.

Los if se ejecutan igual, se pueden poner todos los else-if que uno desee. Un caso particular de estos lenguajes, como Java, C++ y demás, es que los if pueden tener o no llaves:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var numero = 12;

if(numero == 12){

document.write("Tiene llaves<br/>");

}

if(numero == 12)

document.write("No tiene llaves<br/>");

</script>

</body>

</html>

Hay otro tipo de condicional, donde se decide el contenido de una variable. Por ejemplo si yo quiero que una variable sea un número 3, o un string “tres”:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var numeroTres = false;

var variable = numeroTres? 3:"tres";

document.write(variable);

</script>

</body>

</html>

Esto es similar a declarar algo como:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var numeroTres = false;

var variable;

if (numeroTres) {

variable = 3;

}

else {

variable = "tres";

}

document.write(variable);

</script>

</body>

</html>

Y ahorra bastantes líneas de código.

Sin embargo, como buena práctica de programación, no deberías nunca usar una variable para varios tipos. Si haz programado o leído (y entendido) sobre cómo funcionan los niveles de organización de un computador, sabrás que usar un tipo siempre es mejor.

---------------------------------------------------------------------------------------------------

Parte 3: No hace falta que el código vaya directamente en el archivo HTML: Archivos JS

Como estás programando en Javascript ten en cuenta que es en un entorno web, donde se utilizan muchos archivos: imágenes, audio, animaciones, video, scripts, estilos, html’s, algoritmos (php, asp, etc) bases de datos (sqlite, txt).

Los navegadores guardan archivos en la caché. ¿Qué quiere decir esto? Que cuando usted entra a una página, no todos los archivos se vuelven a cargar. Solo se carga una parte (la que es generada en HTML y que ven los usuarios finales).

Si usted mete su código Javascript en el archivo HTML, entonces cada vez que usted cargue la página, el código se va a ejecutar.

Si son algoritmos pequeños no importa, como los que hemos estado programando. Pero hay archivos Javascript muy pesados. Pesados son más de 500KB, porque recuerde que el ancho de banda promedio de la actualidad no es tan rápido, es bastante lento (el promedio) como para descargar 500KB cada vez que cargas un HTML.

Pero a veces se usan archivos Javascript pesados, y en estos casos, lo que se hace es guardarlos en caché.

Los archivos javascript tienen extensión .js, y tienen la siguiente estructura:

Tenemos dos archivos en la misma carpeta:

· miHtml.html

· miScript.js

Vamos a ejecutar el contenido de miScript en miHtml:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

</body>

</html>

Observe que se borró el contenido entre <script></script> y se incluyó con un atributo src la ruta del archivo miScript.js. Esto también lo hacemos con los archivos css para hojas de estilo.

No es necesario que el archivo esté en la misma carpeta que el HTML o el archivo que estemos trabajando sea HTML, PHP, CSS, JS, o el que sea. Simplemente al escribir la ruta (que debe ser un URL válido) buscará el archivo en Internet.

A veces es conveniente tenerlo en nuestro propio servidor, porque algunos servidores son inestables. Basándonos en este criterio, podría pensarse que este siempre es el caso, pero no es así. Hay servidores que son mucho más seguros de lo que los nuestros difícilmente podrían llegar a ser.

Y no solo eso, sino que, algunos archivos Javascript son continuamente desarrollados y mejorados, por lo que podemos tener en nuestro servidor una versión obsoleta de un archivo Javascript.

Hay proyectos muy famosos y utilizados, que por el momento omitiremos su mención.

---------------------------------------------------------------------------------------------------

Parte 4: Funciones

Un ejemplo de función es la siguiente:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

function imprime(variable){

document.write(variable);

}

imprime("Hola Mundo");

</script>

</body>

</html>

Lo cual imprime hola mundo. Una forma peculiar de declarar una función, es asignarle el nombre a través de una variable. Esto sirve para crear Objetos en Javascript, y establecer métodos a esos objetos. En la última etapa de este tutorial veremos el porqué es importante.

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var imprimir = function (variable){

document.write(variable);

}

imprimir(206370942);

</script>

</body>

</html>

Si necesitamos que retorne un valor, utilizamos return:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

function siete(){

return 7;

}

var suma = 4 + siete();

document.write(suma); // retorna 11 ya que 11 = 4 + 7

</script>

</body>

</html>

Talvez te parezca obvio que haya que poner un return, pero aunque no lo creas hay lenguajes en los que ni siquiera hace falta colocar el return.

Puedes utilizar funciones recursivas e iterativas por supuesto. :

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

function sumatoriaIterativa(numero){

var resultado = 0;

for(i = 1; i <=numero;i++){

resultado+=i;

}

return resultado;

}

function sumatoriaRecursiva(numero){

if(numero <= 0){

return numero;

}

return numero + (sumatoriaRecursiva(numero-1))

}

document.write("El resultado iterativo es " + sumatoriaIterativa(10) + "<br />");

document.write("El resultado recursivo es " + sumatoriaIterativa(10) + "<br />");

</script>

</body>

</html>

Realiza el procedimiento correspondiente a la expresión:

Cuyo resultado es el siguiente:

---------------------------------------------------------------------------------------------------

Parte 5: Eventos

Ahora comencemos a comunicarnos con los elementos de afuera del script. Podemos hacer prácticamente lo que queramos con los elementos de la página web, y el principio para ello son los eventos.

Ya vimos el concepto de funciones. Las funciones se comportan de la siguiente forma:

F(x) = y

Pues resulta que para este caso, la x recibida es un evento. Supongamos que usted quiere escribir “Hola Mundo” en la página, cada vez que se presione una tecla:

Primero creamos un div, que tenga un ID específico:

</div>

Luego, nos referimos a ese div desde javascript, declarando una nueva variable, esto se hace de la siguiente forma:

var panel = document.getElementById('2013');

Para cambiar el contenido del panel tenemos que hacer un

panel.innerHTML = loQueSea;

Para que un evento ocurra cuando se presiona una tecla:

window.addEventListener("keydown",funcion);

Pero la función a la que nos referimos no es cualquier función, sino que debe recibir como parámetro un event, y nunca debemos especificarlo en el espacio donde ves escrito “funcion”. Nunca lleva paréntesis ni nada, solo se escibe el nombre de la función. Pero la función se declara así:

function nombreDeLaFuncion(event){

}

Todo junto quedaría de la siguiente forma:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var texto = "Hola Mundo";

function holaMundo(event){

var panel = document.getElementById('2013');

panel.innerHTML = texto;

texto+=" Hola Mundo"

}

window.addEventListener("keydown",holaMundo);

</script>

</div>

</body>

</html>

Así, cada vez que se presiona una tecla, se escribe la cadena texto. Como la cadena concatena a su contenido actual un “Hola Mundo”, parece como si se estuviese escribiendo varias veces.

Si queremos que ocurra cuando damos, click, simplemente cambiamos esta línea:

window.addEventListener("click",holaMundo);

Note que addEventListener le agrega el evento a la ventana. Agregaremos el evento a un botón, de la siguiente forma:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

<button id="elBoton">Hacer click</button>

var texto = "Hola Mundo";

function holaMundo(event){

var panel = document.getElementById("2013");

panel.innerHTML = texto;

texto+=" Hola Mundo"

}

window.addEventListener("keydown",holaMundo); // Se le agrega un listener a la pagina

var boton = document.getElementById("elBoton"); // Se busca el botón ya creado

boton.addEventListener("click",holaMundo) // Se le agrega un listener al botón buscado

</script>

</div>

</body>

</html>

Para este caso tuvimos que declarar el botón antes del script. Para evitar tener que hacer esto, podemos usar javascript dentro de los atributos del botón y hacer referencia a la función:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var texto = "Hola Mundo";

function holaMundo(event){

var panel = document.getElementById("2013");

panel.innerHTML = texto;

texto+=" Hola Mundo"

}

window.addEventListener("keydown",holaMundo); // Se le agrega un listener a la pagina

</script>

<button id="elBoton" onclick="holaMundo(this)">Hacer click</button>

</div>

</body>

</html>

Esto también se puede hacer si el script está en un archivo externo.

Algunos eventos son:

· click

· mouseover

· keydown

· mouseout

Encontrará una gran variedad de información sobre eventos e interfaces gráficas de cualquier lenguaje de programación, realizando búsquedas en internet.

---------------------------------------------------------------------------------------------------

Parte 6: Arreglos

Para declarar un arreglo y recorrerlo se hace de la siguiente forma:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var cifras = [0,1,2,3,4,5,6,7,8,9];

for(algo in cifras){

console.log(algo);

}

</script>

</body>

</html>

Usted puede crear un arreglo con cualquier tipo de datos. Use push para insertar elementos al final, y refiérase a su posición para obtener el dato que se encuentra en dicha posición.

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var elementos = new Array(); // creo un nuevo arreglo vacío

elementos.push(24722768); // Introduzco un número en la posición 0

elementos.push("Hola Mundo"); // Introduzco un string en la posición 1

// Imprimo los elementos según sun índice

console.log(elementos[0]);

console.log(elementos[1]);

console.log(elementos[2]); // No existe nada en esta posicion, error

</script>

</body>

</html>

---------------------------------------------------------------------------------------------------

Parte 7: Matriz con arreglos

De esta forma se crean y recorren las matrices:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var matriz = [[1,2,3],[4,5,6],[7,8,9]]

for(i = 0; i < matriz.length;i++){

for(j = 0; j < matriz[i].length;j++){

console.log(matriz[i][j]);

}

</script>

</body>

</html>

Heredan la naturaleza de los arreglos, así la lista puede tener sublistas, números, strings, booleans, objetos y todo los tipos de datos.

---------------------------------------------------------------------------------------------------

Parte 8: Join y Split, Strings y arreglos

Suponga que usted tiene una lista de palabras y quiere unirlas todas de manera que obtenga una frase, eso lo hace con join:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var listaPalabras = ["fuiste ","anoche ","donde ","dany ","? "]

var fraseDesdeLista = listaPalabras.join("");

document.write(" ",fraseDesdeLista);

</script>

</body>

</html>

De lo contrario, si tiene un string y quiere construir una lista:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var frase = "fuiste anoche donde dany ?";

var listaDesdeFrase = frase.split(" ");

document.write(listaDesdeFrase);

</script>

</body>

</html>

---------------------------------------------------------------------------------------------------

Parte 9: Objetos

Como fue mencionado en la parte 4, la forma extraña de declarar funciones, es realmente para declarar objetos:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Javascript</title>

</head>

<body>

var persona = new humano("stephen");

function humano(nombreRecibido){

// Atributos

this.nombre=nombreRecibido;

this.edad;

// Funciones miembro o métodos

this.saludar = function(){

alert("hola");

}

this.setEdad = function(edadRecibida){ // Ejemplo de set

this.edad = edadRecibida;

}

this.getEdad = function(edadRecibida){ // ejemplo de get

return this.edad;

}

persona.saludar();

persona.setEdad(16);

alert(persona.getEdad());

</script>

</body>

</html>

Como se puede asumir Javascript no tiene herencia ni polimorfismo de forma nativa, sino que hay que implementarlo.

---------------------------------------------------------------------------------------------------

Parte 10: Conclusión

He decidido finalizar este tutorial en esta parte, porque realmente la utilidad de Javascript es la creación y utilización de librerías para lograr acabados muy bien logrados.

En los tutoriales siguientes se tratarán los temas avanzados de Javascript, como JQuery, AJAX, JSON, y demás elementos.

Tutorial bases de Javascript

No hay comentarios:

Publicar un comentario

Categorías