sábado, 7 de junio de 2014

Javascript ... aspectos básicos

¿Qué puedo hacer con Javascript?
Existen bastantes librerías y Frameworks para desarrollo de aplicaciones de todo tipo, depende de la necesidad y trabajo del desarrollador sacarle el mejor provecho.

Hace años parecía imposible usarlo para aplicaciones que no fueran web.

¡Hola, mundo!
Para crear un archivo Javascript es necesario guardarlo con la extensión *.js, para invocarlo dentro de una archivo *.html es necesario agregar las etiquetas <script  src="miArchivo.js">  </script>.

miArchivo.js
function  inicio(){
   alert('¡Hola, mundo!')
}

miPagina.html
<! -- código javascript -->
<script src="miArchivo.js">  </script>

<body onload="inicio()">
<h1>Iniciando en Javascript</h1>
</body>

También se puede agregar el código dentro de la página *.html.
<script>
function inicio(){
  alert('¡Hola, mundo!')
}
</script>

<body onload="inicio()">

</body>

Al abrir este archivo en nuestro navegador nos muestra una ventana con el mensaje:!Hola, mundo¡

¿Como se declaran las variables?
Con la palabra var, puedes asignarles cualquier valor.

var entero=20
var cadena='Los presidentes se reunieron para hablar sobre las reformas ...'
var lista=[new Date(), 'T', 120,'tres', [2,4,5,6]]

Sentencias de control
Existen tres sentencias de control para mantener el flujo del programa,muy similar a C.

  • Secuencial
  • Iterativa: for, while
  • Selectiva: switch, if-else


Ejemplo. Declaramos un arreglo con un tamaño de 3 y lo recorremos con un for y un while.
var arreglo=new Array(3);
arreglo[0]=12;
arreglo[1]=32;
arreglo[2]=46;

//con for
for(var i=0;i<arreglo.length;i++){
   document.writeln(arreglo[i]);
}

//con while
var cont=0;
while(cont<arreglo.length){
        document.writeln('[arreglo[cont]);
        cont++;
}

Funciones
Podemos crear funciones usando la siguiente sintaxis:

function nombreFuncion(param1, param2, ...){
     //cuerpo
   [return]  variable
}

Ejemplo. Creamos una función que suma dos valores.

function sumar(a,b){
    return a+b
}

No es indispensable que las funciones devuelvan valor alguno.

Objetos en Javascript
Podemos crear objetos de la siguiente manera:

function Torre(tamanyo,color){
   this.tamanyo=tamanyo;
   this.color=color;
}

Nombre: Torre
Propiedades: tamanyo, y color


Usando la propiedad 'prototype' podemos agregar propiedades al objeto Torre:
  
//obtenemos la información
Torre.prototype.getInfo=function(){
    return 'color: '+this.color+' , tamaño:' +this.tamanyo;
};

//los getters y setters al estilo Java
Torre.prototype.getTamanyo=function(){
   return this.tamanyo;
};
    
Torre.prototype.setTamanyo=function(tam){
  this.tamanyo=tam;
};

Torre.prototype.setColor=function(col){
  this.color=col;    
};

Torre.prototype.getColor=function(){
  return this.color;
};

Formularios
Podemos acceder a los valores de los formularios html mediante javascript.

Ejemplo. Creamos un formulario con una caja de texto y un botón, obtendremos el valor de la caja de texto y lo mostraremos en una ventana.


<!-- código javascript -->
function obtiene(){
//accedemos al valor mediante un id, en este caso es 'dato'
    var dato=document.getElementById('dato');

//mostramos el valor obtenido y su tipo
    alert('El dato introducido es: '+dato.value+' , es de tipo: '+typeof(dato));

//borramos el contenido de la caja de texto
    document.getElementById('dato').value='';
}

<!-- código html -->
<form>
<input type="text" id="dato" value=""/>
    <button onclick="obtiene()">Obtener dato</button>
</form>

Introducimos texto  y presionamos el botón que lo envía a la función obtiene().

Javascript es un lenguaje muy usado hoy en día, existen bastantes frameworks que proveen  muchas utilidades para las aplicaciones. 

No hay comentarios:

Publicar un comentario