¿Alguna vez habéis usado jQuery, scriptaculous, etc, verdad? Todo es muy intuitivo ($('selector').animate() para animar, .hide() para ocultarlo, etc). Pero todo se basa en un lenguaje muy utilizado en la web, el Javascript.

Javascript es un lenguaje pensado para interactuar con el usuario en la web, es lo que hace que se muestren los posts relacionados, que se puedan leer los feeds del blog, editar elementos, etc.No hace falta decir que se escribe entre etiquetas <script></script>.

Aviso: Este post es largo, pero la información que se va a ver es la básica para poder hacer cosas más interesantes con este lenguaje de programación. Si tenéis alguna duda, o me he explicado mal, o cualquier cosa, dejad un comentario abajo y será respondido lo antes posible.

En javascript todo es un objeto (tal vez ahora no entendáis esto, pero es un concepto clave en javascript). Hay varios objetos predefinidos en javascript:

String

El objeto String es una cadena, un texto. Este objeto (mas bien su prototipo) nos permite acceder a una gran cantidad de métodos como, por ejemplo, split,toUppercase,substring,indexOf.... Ni idea, no? pues vamos a ver cómo aplicarlo (estáte atento a los comentarios).


//Con la palabra var, definimos una variable. A partir de ahora
//cada vez que pongamos miString, será igual que si pusiéramos "Hola mundo"
var miString = "Hola mundo";
//Con split separamos la cadena en base a un carácter para convertirlo en una Array (lista de valores)
//Entre las comillas hay un espacio!
var miArray = miString.split(" ")//devuelve ["Hola","mundo"]
//Para acceder a lo que hay en una Array usamos los corchetes indicando la posición.
//OJO!, en javascript casi siempre 0 indica el primer item, 1 el segundo, etc.
miArray[0] //"Hola"
miArray[1] //"mundo"
//toUpperCase nos devuelve la String en mayúsculas
var miStringEnMayusculas = miString.toUpperCase()\\"HOLA MUNDO"
//idexOf devuelve la posición del primer carácter o string que sea igual a lo que pasas a la función
//Si no encuentra nada devuelve -1
miString.indexOf("a")//Devuelve 3 (a es el cuarto carácter)
//substring devuelve una cadena que va desde el primer argumento hasta el segundo, o hasta el final si no hay segundo
miString.substring(2)//Devuelve "la mundo"
miString.substring(1,4)//Devuelve "ola" (sin "h", no es una errata)

¿Quieres probarlo? Si usas Firefox con Firebug, pulsa F12 (abre firebug), pulsa Consola, y a la derecha hay un recuadro para introducir texto. Vete introduciendo el texto del ejemplo de arriba y mira lo que sale por la izquierda.
Si usas Chrome, pulsa F12 y pulsa la pestaña “Console”. Allí, en la última línea podrás ir introduciendo el código.
Si usas IE los pasos son similares, pero no lo recomiendo, ya que IE no ha sido precisamente un navegador que cumpla con los estándars, y su consola es “diferente”, vamos a dejarlo ahí.

Array

Una array es una cadena de valores, que podemos recorrer gracias a loops. Por ejemplo, en el feed de blogger, nuestras entradas están en una array. Se puede crear de varias maneras. Una es usando el objeto constructor y otra es escribiéndola literalmente. Por ejemplo, para almacenar en una variable llamada miArray una array con los números 1, 2 y 3, podríamos escribir: var miArray = new Array(1,2,3) o var miArray = [1,2,3].

Para acceder a los valores (ver ejemplo de arriba), usaremos una notación de corchetes. El número que pongamos entre corchetes es la posición del elemento (tened en cuenta que el primero es 0). Así, miArray[0] sería igual a 1, miArray[1] sería 2 y miArray[2] sería 3. También posee métodos muy útiles.:


var miArray = [1,"Hola mundo",5]//En una array se pueden almacenar cualquier tipo de datos (strings, arrays, objetos, funciones, etc)
//Los valores de una array se pueden modificar así
miArray[1] = "Adiós"
//Para obtener el número de items usamos length
miArray.length //3
//con push insertamos al final de la array algo, en este caso, una string
miArray.push("Este es el cuarto valor")
console.log(miArray)//Esto es sólo para que veáis en la consola cómo es. Se vería algo así como [1,"Adiós",5,"Este es el cuarto valor"]
//unshift lo inserta como primer valor
miArray.unshift("primero")//["primero",1,"Adiós",5,"Este es el cuarto valor"]

Objeto

En un objeto podemos guardar diferentes datos. Al igual que una persona tiene un nombre, un apellido, una altura, etc, un objeto puede tener infinitas propiedades. Para crear un objeto, al igual que para crear una Array, hay dos métodos. El primero es escribirlo con la función constructora (var persona = new Object()), el segundo es escribirlo con json, una notación perfectamente válida y mucho más simple (var persona = {}).

Para configurar las propiedades de un objeto podemos usar la notación de puntos, o la de corchetes. Así, si escribimos persona.altura = '1.79m', es lo mismo que si escribimos persona['altura'] = '1.79m'. Igualmente, para acceder a la propiedad, usamos la misma notación: var laAltura = persona.altura, que es igual a var laAltura = persona['altura']. Normalmente se suele preferir la notación de puntos, pero hay que tener en cuenta que con ella no podemos usar algunos caracteres especiales como “-” , “/”, etc.

Por qué usar JSON si es posible

Os vais a dar cuenta en cuanto lo veáis:

/*==================================
* SIN USAR JSON
*/
var persona = new Object();
persona.altura = "1.80m";
persona.nombre = "Jose";
persona.apellido = "noExiste";
persona.deporteFavorito = "Futbol";
persona.ciudadesPreferidas = ["Madrid","Barcelona","Pekin","cualquierOtra"]
/*==================================
* USANDO JSON
*/
var persona = {
"altura" : "1.80m",
"nombre" : "Jose",
"apellido" : "noExiste",
"deporteFavorito" : "Futbol",
"ciudadesPreferidas" : ["Madrid","Barcelona","Pekin","cualquierOtra"]
}
//Supongamos que ahora quiero escribir su país de residencia, no tengo que reescribirlo todo, sólo tengo que poner
persona.pais = "Italia"

Como supongo que os habréis fijado, con JSON el lenguaje es mucho más comprensible y menos repetitivo, sobre todo para objetos grandes.

Los objetos no acaban aquí, hay prototipos, funciones constructoras, pero por ahora vamos a dejarlo.

Funciones

Una función nos sirve para poder ejecutar código repetitivo sin tener que copiarlo millones de veces. Se define así: function nombreDeLaFuncion(parametro1, parametro2,...){/*código a ejecutar*/}, o así: nombreDeLaFuncion = function(parametro1, parametro2,...){/*código a ejecutar*/}.

Los parámetros son datos que podemos pasar a la función. Son opcionales (si se quiere hacer algo siempre con los mismos valores, no hace falta). Vamos a verlo:

/*Sin parámetros*/
function sumarCincoMasOcho(){
return 5 + 8
}
/*Con parámetros*/
function sumarNumeros(num1,num2){
//Return => Devuelve un valor. Si no usamos esto, no podríamos hacer:
//var laSuma = sumarNumeros(5,6)//11
//Siempre que queráis quedaros con un dato, usad return.
return num1 + num2
}
/*La usamos*/
//La función alert saca un mensaje por pantalla
alert( sumarCincoMasOcho() )//Por tu pantalla debería salir el número 11 cuando lo uses
var laSuma = sumarNumeros(1,2)//Ahora la suma vale 3
//Ahora a laSuma le hemos sumado 9 => vale 12
//podríamos haber usado laSuma += sumarNumeros(4,5), que hace lo mismo
laSuma = laSuma + sumarNumeros(4, 5)
alert(laSuma)//12

Como anotación, en una función dentro de un objeto puedes usar this para referirte al objeto. Por ejemplo, en el caso de la persona:

persona.mostrarNombre = function(){
alert(this.nombre)
}
persona.mostrarNombre()//Jose

Finalmente, decir que una función también tiene métodos muy interesantes (call,apply), pero que por ahora no los voy a explicar.

Math

Por último, y antes de poner un ejemplo fácil con lo que hemos aprendido, voy a explicaros el objeto Math. El objeto Math es un objeto con funciones para realizar diversas operaciones y comparaciones. Aquí tenéis una lista completa, pero yo voy a explicar random, round, floor y ceil.

//Math.floor devuelve el número redondeado a la baja
Math.floor(1.77)//1
//Math.ceil hace lo mismo, pero a la alta
Math.ceil(5.2244)//6
//Math.round redondea el número normalmente
Math.round(5.6)//6
Math.round(5.4)//5
//Math.random devuelve un número aleatorio entre 0 y 1
Math.random() //Eso, un número aleatorio

Ejemplo práctico: típico widget de frases aleatorias

Ahora vamos a construir el típico widget de frases aleatorias, basándonos en una array, el objeto Math, y una función para cargar otra frase (vale, usaremos una cosilla más, pero sólo para mostrarlo en la página). Recordad que tiene que ir entre etiquetas <script></script>. Nota: Esta es la forma más fácil de haacerlo, hay otras maneras para no crear variables globales, etc, pero se verá más adelante.

El lugar donde mostraremos las frases será un div con la id ‘contenedor-frases’. Recordad que tiene que ir antes del script, porque si no no lo encontrará.

<div id='contenedor-frases'></div>

Ahora el script:

//Podríais poner las que quisiérais
var frasesWidget = ['Primera frase', 'Segunda frase', 'Tercera Frase', 'Cuarta frase', 'Quinta frase','Sexta frase'],
//Esta es una de las cosas que (aún) no sabéis. con esto seleccionamos el elemento con id="contenedor-frases"
contenedorFrases = document.getElementById('contenedor-frases');
function mostrarFrase(){
//Obtenemos un número aleatorio, multiplicado por el número de frases. El máximo con 6 frases sería 5.9999999
//En ese caso, si redondeáramos con Math.round, nos saldría 6, y miArray[6] no existe (el primer elemento es 0, recuerdas?)
//Así que lo redondeamos hacia abajo
var elIndex = Math.floor( Math.random() * frasesWidget.length );
//Con innerHTML configuramos el contenido del elemento (no teníais por qué saberlo)
contenedorFrases.innerHTML = frasesWidget[elIndex]
}
//Llamamos por primera vez a la función
mostrarFrase();

Ahora, si queremos recargar la frase tenemos que añadir un elemento que, cuando se haga click, la recargue: <a href='javascript:;' onclick='mostrarFrase();return false;'>Muestra otra</a>.

En funcionamiento

Muestra otra

Conclusión

Sí, ha sido largo, pero esto es una parte básica de lo que tienes que saber sobre javascript. Si sabes si he cometido algún error (nunca se sabe), comenta y será corregido inmediatamente.

15 pensamientos en “Lo básico de Javascript [1]

  1. Imagen de Oloman Oloman el dijo:

    Ya te he dicho un par de veces que sabes más de JavaScript que yo. Yo toco de oído y eso provoca que tarde mucho en preparar cualquier cosa usando mi método, el de ensayo-error. Esta serie la voy a seguir de cerca porque es la primera vez que leo un manual de ese lenguaje… en serio.

  2. Imagen de Abraham Santos Fernández el dijo:

    ¿No sabrás cómo evitar que una persona, provincia, estado o país no pueda leer mi blog usando JavaScript o sin usarlo?

    Usando Blogger, claro. Ojalá encuentres una respuesta, ya que lo necesito rápido. Agradecería mucho tu ayuda, Emilio.

    • Imagen de Abraham Santos Fernández el dijo:

      En la parte que dice: "¿No sabrás cómo evitar que una persona, provincia, estado o país no pueda leer mi blog usando JavaScript o sin usarlo?" me refiero si se puede hacer usando JavaScript o no; y cómo se puede hacer, si es que se hace, claro.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Se podría hacer de varias maneras. Los navegadores modernos usan un componente del objeto navigator, que se llama navigator.geolocation. Usando navigator.geolocation.getCurrentPosition(function(coordenadas){…código a ejecutar…}) sería una posibilidad, y puedes ajustar el rango de coordenadas permitidas para evitar que cargue el blog.

      Pero esto, además de que sólo está disponible en navegadores nuevos, requiere confirmación del usuario, así que no es viable.

      Otra opción sería usar el lenguaje del navegador con navigator.language || navigator.userLanguage, y bloquear la carga de la página con window.stop() si se cumplen unas determinadas condiciones.

      Como última opción, si es un blog de blogger, podrías aprovecharte de los redireccionamientos, y detectar la url (aunque, como siempre, se podría acceder al prefijo ncr).

      Conclusión: Sí, se puede, pero nunca será efectivo al 100% (siempre podría llegar alguien con javascript desactivado y acceder).
      Además, realmente no veo la razón para censurar a un país solo por su procedencia, pero supongo que tendrás tus razones.

    • Imagen de Abraham Santos Fernández el dijo:

      Pero cómo le haría… Todavía no entiendo. ¿Cómo le hago para que una persona, provincia o país, Usando la dirección IP?

      Lo que pasa es que no sé (con los códigos que me has dado) donde poner la dirección IP o no sé… Lo necesario para bloquear el acceso al blog en un lugar o región determinado.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Por ejemplo, si quisieras que no entrara gente que hable inglés sería algo así como:
      if( /en/i.test(navigator.language || navigator.userLanguage || '')){
      alert('Lo siento, pero el blog no está disponible.'); window.stop()
      }

      Claro que tendrías que pegarlo cerca de <head> y cambiar "en" por el lenguaje (es,es-mx,es-ar,etc).
      Con coordenadas sería más efectivo, pero habría más incompatibilidades.
      La ip no es accesible via javascript :S

      Por último te sigo diciendo que no entiendo el motivo por el que quieres evitar que la gente entre a tu blog, ya sea por motivos egoístas (visitas) o más trascendentes (no es justo privar de libertad a alguien por su origen), pero tú verás.

    • Imagen de Abraham Santos Fernández el dijo:

      No es por nada de lo que dices que quiero que alguien no pueda ver mi blog, sino por otros problemas que no quiero contar aquí. Quiero decirte que no me funciona cuando lo pongo. Lo he puesto detrás y delante de </head> y detrás y delante de <head> y no me funciona.

      Entonces no se puede hacer que una persona o región pequeña no pueda ver mi blog… :(

      Ojalá me respondas mañana.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Lo has puesto entre etiquetas <script> ?

      De todas maneras es imposible individualizar, porque aunque consiguieras su IP, con un reinicio de router sería suficiente.

      Para una región grande, si se podría bloquear basándose en las coordenadas, pero en una pequeña es muy difícil. Como poco tendría que ser una ciudad.

      Si bloqueas un lenguaje, no sólo estarás bloqueando a esa persona, sino a todas las que hablen ese lenguaje.

      Por lo tanto lo veo muy difícil, ya uses javascript o cualquier otro lenguaje.

      Imagínate: si en china tienen problemas para censurar una web a una región tan inmensa, con la ayuda de todas las empresas posibles, la dificultad que llevaría bloquear a una sola persona (o a unas pocas), que puede ponerse en el ordenador de al lado y verla…

  3. getAttribute y setAttribute en Javascript | Emilio Cobos-CMC
  4. Editando elementos con Javascript: El objeto style | Emilio Cobos-CMC

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.