INTRODUCCIÓN 
A
JAVASCRIPT 


Speaker: Esneyder Amin Palacios Mena
@sneyder_a






 ¿ Que es javascript ?

    ¿ Para que sirve, Como se come eso  ?


 




Según la  wikipedia 

"Es un lenguaje de programación  interpretado, se define como orientado 
a objetos  basado en prototipos, imperativo y débilmente tipado  " 
-Wikipedia

Desarrollo de paginas web

 



Corre multiplataforma 




 Permite programar hardware

Tessel.io            |             Arduino 


 

Librerías para hacer robotica con javascript 









Nodebots 



Fuck yeah !! 

tenemos robots 

¿ Que mas tenemos ?

Que tal cosas en 3D y 2D

javascript permite  hacer cosas como video juegos en tiempo real
Three.js                                              kinetic.js  


Una de las mejores comunidades

de programación
 

 

Entonces 

Comencemos 

Hola mundo !!!




        console.log("Hola mundo");

Variables


 var color ="verde";



Tipos de valores


  var color="verde";//String = cadena de texto  var a=1;//Number = numero  var b=2;//Number = numero   var suma=a+b;    console.log(suma);//3 var verdad=true;//Boolean true var falso=false; //Bolean false



Concatenar "adjuntar valores"


  console.log("texto"+3);//texto3  console.log("1"+3);//13  console.log(+"1"+3);//4
  console.log(Number("1")+3);//4
  console.log(parseInt("1.62")+3);//4
/*¿ que diferencia hay entre Number y parseInt o + ? Number - conserva los valores flotantes parseInt - conserva los valores enteros */  console.log(parseInt("1.62")+3);//4

 Number


 var numero=12;

 console.log(numero.toString());
//retorna 12 pero en este nivel numero es del tipo String=cadena de texto
 
 console.log(numero.toString(2));//base binaria 1100 console.log(numero.toString(8));//base octal 14
 console.log(numero.toString(16));//base hexadecimal c//Si le pasamos el como parametro a que base numerica queremos que retorno el String 




 var numero=12.2371232;

 console.log(numero.toFixed(2));
/*toFixed retorna el numero convertido a un String conservandodos decimales http://www.w3schools.com/jsref/jsref_obj_number.asp*/






//valor boolean es decir solo puede tener dos estados falso o verdadero  console.log(true);// verdadero
 console.log(false);// falso var a=5; var b=1; console.log( a < b );//false


Operadores


var numero=3;
 
console.log( numero++ );//4 = numero+1
console.log( numero-- );//2 = numero-1console.log( numero*2 );//6 = numero*2
console.log( numero/2 );//1.5 = numero/2


Operadores lógicos comparación

Son una serie de sentencias lógicas que sirven para 
determinar la equivalencia o diferencia entre variables o valores

 

console.log( 3 < 1 );//false

console.log(10 > 2);//true

console.log( 3 >= 1 );//true

console.log( 3 <= 1 );//false
console.log(10 === '10');//false

console.log(10 == 10 );//true
//http://www.w3schools.com/js/js_comparisons.asp

Operadores condicionales 



 
console.log( 3 || 2 );//3 OR
console.log( 3 && 2 );//2 AND  
console.log( !(3 > 2) );//false NOT negacion







valor boolean









console.log( !!0 );//falseconsole.log( !!1 );//true
console.log( !!4 );//true
console.log( !!-1 );//trueconsole.log( !!"hola" );//trueconsole.log( !!false );//false
console.log( !!null );//falseconsole.log( !!undefined );//false

 





Condicionales 








 if(3<5){
   //verdad
   console.log(true); 
 }else{   //falso   console.log(false); }

 
 

if(30 < 5){
   //verdad
   console.log(true);
 }else if( 3 < 5 ){   console.log(3 < 10);  }








Array





 var lista=['cero','uno','dos',3]; console.log(lista[0]);//cero console.log(lista[0].length);//4
 console.log(lista.length);//4
  lista.push("cuatro");//agrega un nuevo elemento   console.log(lista.length);//5

http://www.w3schools.com/js/js_array_methods.asp



String





 

var cadena="cadena de texto";

console.log( cadena[0] );//c
console.log( cadena[1] );//aconsole.log( cadena[2] );//d

http://www.w3schools.com/jsref/jsref_obj_string.asp






Ciclos





 

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

var cadena="cadena de texto";

for(var i=0;i<cadena.length;i++){
   console.log(cadena[i]);
}






 while(true) {
  console.log(true);
 //Mientras la condición deje de ser verdadera 
 //En este caso ciclo es infinito 
};

do{
 console.log(true);
 //Mientras la condición deje de ser verdadera 
 //En este caso ciclo es infinito 
}while(true);




JSON





 var json = {
  llave:"valor"
 };
console.log(json.llave);//valor//Metodos de un json  json.nuevo = "valor2";
console.log(json.nuevo);//valor2 console.log(json);//{llave:"valor",nuevo:"valor2"}  
delete json.nuevo;  
console.log(json.nuevo);//{nuevo:"valor2"}






Funciones





function Hola(parametro){   return "Hola "+parametro
 }
 
 console.log( Hola("mundo") );// Hola mundo invocacion console.log(Hola);// [Function: Hola] referencia 

 






var Calculadora = {  sumar:function(a,b) {    return a+b;  },
  restar:function(a,b) {   return a-b; }};
console.log( Calculadora.sumar(1+1) );//2console.log( Calculadora.restar(1-1) );//0





Manipulación del documento HTML5





 document



<!DOCTYPE html>
<html  lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi pagina</title>
  </head>
  <body>
    <section id="seccion">       <article>         <h1>Hola</h1>        <article>    </section>
  </body>

</html>





<script>
 var elemento =  document.getElementById("seccion");     
 console.log(elemento);//[ <section id="seccion"> <article> <h1>Hola</h1> </article> </section> ] elemento[0].style.border = "2px solid red";

</script>







Creación de elementos







<script>
 var parrafo =  document.createElement("p");//crea un elemento  parrafo.innerHTML = "Creado desde javascript";//cambia el valor interno del parrafo document.body.appendChild(parrafo);//agrega el elemento </script>



Eso es todo por ahora 





Gracias por asistir 














 









			

		


		    Made with Slides.com