Introducción a JavaScript

Carlos Cárcamo

Temario del taller

  • Introducción a JavaScript (js)
  • 'Hello world' con js
  • Herramientas para js
  • Estructura de un Script
  • Variables
  • Estructuras Básicas
  • Operadores
  • Funciones
  • Tipos y Objetos

¿Que JavaScript?

JavaScript Es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Javascript es un lenguaje que puede ser utilizado por profesionales y para quienes se inician en el desarrollo y diseño de sitios web. No requiere de compilación ya que el lenguaje funciona del lado del cliente, los navegadores (Como Firefox) son los encargados de interpretar estos códigos.

¿Porque JavaScript para Firefox OS?

♧Es un lenguaje fácil de aprender y usar.

♧Es parte de los entandares web junto con HTML5 y CSS3.

♧La mayoría (por no decir todos) de los navegadores lo soportan.

♧Existe un gran numero de librerías para JavaScript.

♧Una App basada en HMTL5, CSS y JS puede ser usada en múltiples dispositivos como Android y iOS (App híbrida).

"Nunca ha sido tan fácil ser inteligente"

Hello world en JavaScript

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello World</title>
  <link rel="stylesheet" href="style.css">
  <script>
    alert("Helo World")
  </script>
</head>
<body>

  <h1>Mozilla El Salvador</h1>

  <p>Desarrollo de Apps para <strong>Firefox OS</strong></p>
  <p>Introducción a JavaScript</p>

</body>
</html>

Considere el siguiente código, ponga atención a la etiqueta <script>

Herramientas de Mozilla para JavaScript

  • Consola web: Una consola que le permite interactuar con la información de salida , ejecutar fragmentos de JavaScript , y experimentar con su contenido.
  • Block Editor (Scratchpad): Un editor de texto integrado en Firefox que te permite editar y ejecutar código JavaScript.
  • Depurador de JavaScript: Recorrer el código JavaScript que se ejecuta en el navegador (o incluso en un navegador remoto) y ver las variables para ayudar a localizar los fallos. Esta documentación también cubre el depurador remoto, que se puede utilizar para depurar el código que se ejecuta en un dispositivo de Firefox OS o en Firefox en un dispositivo Android.

Herramientas de Mozilla para JavaScript

  • JSHint: Análisis de calidad y estadística de código JavaScript.
  • JSLint: Herramienta de calidad de código JavaScript.
  • Firebug: Herramienta de desarrollo web muy similar a la consola web de Firefox.

Extensiones

Estructura de un Script

JavaScript Interno: se refiere a código javascript dentro del mismo documento HMTL, como el siguiente ejemplo.

Ponga especial atención a las etiquetas  <script> y a la etiqueta <button>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>Mozilla SV</title>
  <script>
    alert("Helo World")
  </script>
</head>
<body>
  <h1>Mozilla El Salvador</h1>
  <button type="button" onclick="saludar()">Saludar</button>
  <script>
    function saludar(){
      alert("Hola Mozilleros de El Salvador!");
    }
  </script>
</body>
</html>

Estructura de un Script

JavaScript Externo: se refiere al código javascript que se ejecuta dentro del documento HMTL pero que no esta definido dentro del mismo, es decir esta el codigo esta definido dentro de un archivo externo al documento actual.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mozilla SV</title>
    <script>
      alert("Helo World")
    </script>
  </head>
  <body>
    <h1>Mozilla El Salvador</h1>
    <button type="button" onclick="saludar()">Saludar</button>
    <script src="js/script1.js"></script>
  </body>
</html>

Variables en JavaScript

Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas como por ejemplo las matemáticas. Una variable es un elemento que se usa para almacenar y hacer referencia a un valor. Pruebe el siguiente ejemplo:

/* variables numericas */
var a = 10;
var b = 20;
var c = a + b;
var d = c;
console.log(d);

/* variables de texto */
window.saludo1 = "Hola";
saludo2 = "Mozilleros";
console.log(saludo1 + " " + saludo2);

/* combinando variables de numero y texto */
var txt1 = "48";
var txt2 = "Hello world"
console.log(txt1 - num);
console.log(txt2 - num);

Estructuras de control

Javascript posee una sintaxis similar a C, Java y otros lenguajes de programación basados en C lo que hace que este sea fácil de aprender si se ha programado antes en otro lenguaje de programación.

 

Las estructuras de control, al igual que otros lenguajes de programación, se dividen en dos tipos básicos como lo son:
 

  • Selectivas
  • Repetitivas

Veamos cada una de ellas...

Estructuras de control Selectivas

Sentencia if, if/else: La sentencia if ejecuta una acción cuando un valor es verdadero, caso contrario no ejecuta ninguna acción.

if/else es una versión extendida de la sentencia if que permite definir una acción en caso que que la condición no se cumpla.

var a = 10;
var b = "10";

if(a == b){
    console.log("a es igual a b!");
}

if(a === b){
    console.log("a es identico a b!");
}else{
    console.log("a y b no son iguales!");
}

Ejercicio: implementar un código if/else anidado, hacer un script que implemente la estructura selectiva switch.

Estructuras de control Repetitivas

Las estructuras de control repetitivas son aquellas en las que una sentencia o varias sentencias pueden repetirse muchas veces. Este conjunto de sentencias se denomina bucle (loop).

/* for loop */

var i,
    stop = 10;
for (i = 0; i <= stop; i++){
    console.log(i);
}

var contador = 0;
while(contador <= 10){
    console.log(contador++);
}

Investigar:

  • Variante del while
  • ¿Como y cuando se usa un foreach?

Estructuras de control Repetitivas

Las estructuras de control repetitivas son aquellas en las que una sentencia o varias sentencias pueden repetirse muchas veces. Este conjunto de sentencias se denomina bucle (loop).

/* Estructura for */
var num = prompt('Numero a calcular'),
    factorial = 1;

for(i=2; i<=num; i++){
  factorial *= i;
}
alert('Factorial de: '+ num + ' es: '+ factorial);

/* Estructura while */
var num = prompt('Numero a calcular'),
    factorial = 1,
    i = 2;

while(i<=num){
    factorial *= i++;
}
alert('Factorial de: '+ num + ' es: '+ factorial);

Ejemplo: Estructura for y while para calcular el factorial de un numero

Estructuras de control Repetitivas

Sentencia For: Esta requiere que conozcamos el numero   de veces que se desea ejecutar la sentencia del interior del bucle. Si no se conoce de antemano el numero de repeticiones es mejor utilizar la sentencia while.

Investigar:

  • Variante del while
  • ¿Como y cuando se usa un foreach?

Sentencia while: La estructura repetitiva while   (mientras) es aquella en la que el número de interacciones no se conoce por anticipado y el cuerpo del bucle se repite mientras se cumple una determinada condición. por esta razón, a estos bucles se les denomina bucles condicionales.

Operadores

Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.

Tipos de operadores:

Asignación: =

Incremento y decremento: ++, --

Lógicos: !, &&, ||

Matemáticos: +, -, *,  /, %,

Relacionales: <, >, <=, >=, !=, ==, ===

Operadores

Ejemplos:

/* asignacion */
var numero1 = 3;
/* Error */
//5 = numero1;

/* Incremento y decremento */
var a = 10;
++a;
console.log(a);

/* logicos */
var flag = true;
console.log(!flag);

var x = true, y = true;
console.log(x && y);
console.log(x && !y);
console.log(x || !y);
console.log(!x || !y);
/* matematicos */
var a = 10, b = 20, c = 75;
console.log(a + b + c);
console.log(b/a);
console.log(a*b);
console.log(c%5);
console.log(c%4);

/* relacionales */
var a = 45, b = 170, c = 45, d = "170";
console.log(a>b);
console.log(a<b);
console.log(a>=c);
console.log(a<=b);
console.log(b==d);
console.log(b!=d);
console.log(b===d);
console.log(b!==d);

Funciones

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez las mismas instrucciones. Un script para una una calculadora necesita implementar el factorial de un numero, se necesita crear una porción de código que pueda llamarse cada vez que el usuario necesite hacer dicha operación.

 

Las funciones son la solución a todos estos problemas, tanto en JavaScript como en el resto de lenguajes de programación. Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.

Funciones

Veamos el ejemplo del calculo de un factorial usando funciones, el ejemplo permite calcular un factorial usando la estructura for y while como vimos anteriormente.

<button type="button" onclick="factorial_for()">Factorial con For</button>
<button type="button" onclick="factorial_while()">Factorial con while</button>

Hacemos uso de dos botones que en el evento 'onclick' llamaran a sus funciones respectivas ejecutando el código y mostrando los resultados en pantalla.

Funciones

Este es el código javascript:

function factorial_for (){
    var num = prompt('Numero a calcular', '5'),
        factorial = 1;

    for(i=2; i<=num; i++){
        factorial *= i;
    }

    alert('Factorial de: '+ num + ' es: '+ factorial);
}

var factorial_while = function (){
    var num = prompt('Numero a calcular', '5'),
        factorial = 1,
        i = 2;

    while(i<=num){
        factorial *= i++;
    }

    alert('Factorial de: '+ num + ' es: '+ factorial);
}

Tipos de datos en JavaScript

Made with Slides.com