Fundamentos de  Javascript   Abraham Estrada
HistoriaBrendan Eich         3WC - DOMNetscape             1997 ECMAMocha > LiveScript   ECMAScript1995                 IS...
Sintaxis Básicavar foo = ‘hello world’;var foo =           ‘hello world’;2 * 3 + 5 // 112 * (3 + 5) // 16var foo = functio...
Operadores Básicosvar foo = ‘hello’;var bar = ‘world’;console.log(foo + ‘ ‘ + bar);2 * 3;2 / 3;var i = 1;var j = ++i;var k...
Operaciones con Númerosy Cadenas de Caracteresvar foo = 1;var bar = ‘2’;console.log(foo + bar);console.log(foo + Number(ba...
Operadores Lógicosvar foo = 1;var bar = 0;var baz = 2;foo || bar;    // devuelve 1, el cual es verdadero (true)bar || foo;...
Operadores de Comparaciónvar   foo   =   1;var   bar   =   0;var   baz   =   1;var   bim   =   2;foo == bar;            //...
Código Condicionalvar foo = true;var bar = false;if (bar) {    // este código nunca se ejecutará    console.log(hello!);}i...
Elementos Verdaderos y Falsos0;any   string; // cualquier cadena[];    // un arreglo vacío{};    // un objeto vacío1;     ...
Variables CondicionalesUtilizando el Operador Ternario     var foo = bar ? 1 : 0;
Declaración Switchswitch (foo) {    case bar:        alert(el valor es bar);        break;    case baz:        alert(el va...
var stuffToDo = {    bar : function() {        alert(el valor es bar);    },     baz : function() {         alert(el valor...
Bucle: For// muestra en la consola intento 0,// intento 1, ..., intento 4for (var i=0; i<5; i++) {    console.log(intento ...
Bucle: Whilevar i = 0;while (i < 100) {    // Este bloque de código    // se ejecutará 100 veces    console.log(Actualment...
Bucle: Do-Whiledo {    // Incluso cuando la    // condición sea falsa    // el cuerpo del bucle se    // ejecutará al meno...
Break - Continuefor (var i = 0; i < 10; i++) {    if (something) {        break;    }}for (var i = 0; i < 10; i++) {    if...
Palabras Reservadasabstract      double           in        superboolean         else    instanceof      switch  break    ...
Arreglosvar myArray = [ hello, world ];var myArray = [ hello, world, foo];console.log(myArray[2]);console.log(myArray.leng...
Arreglosvar myArray = [ h, e, l, l, o ];var myString = myArray.join();   // hellovar mySplit = myString.split();// [ h, e,...
Objetosvar myObject = {    sayHello : function() {        console.log(hello);    },    myName : Rebecca};myObject.sayHello...
Funcionesfunction foo() { /* hacer algo */ }var foo = function() { /* hacer algo */ }         http://kangax.github.com/nfe/
var greet = function(person, greeting) {    var text = greeting + ,  + person;    console.log(text);};greet(Rebecca, Hello...
var greet = function(person, greeting) {    var text = greeting + ,  + person;    return text;};console.log(greet(Rebecca,...
var greet = function(person, greeting) {    var text = greeting + ,  + person;    return function() { console.log(text); }...
Funciones Anónimas  Autoejecutables(function(){    var foo = Hello world;})();console.log(foo);// indefinido (undefined)
var myFunction = function() {    console.log(hello);};var myObject = {    foo : bar};var myArray = [ a, b, c ];var myStrin...
typeof   myFunction;   //   devuelve   functiontypeof   myObject;     //   devuelve   objecttypeof   myArray;      //   de...
Alcance (scope)var foo = hello;var sayHello = function() {    console.log(foo);};sayHello(); // muestra en la consola hell...
Alcance (scope)var sayHello = function() {    var foo = hello;    console.log(foo);};sayHello(); // muestra en la consola ...
Alcance (scope)var foo = world;var sayHello = function() {    var foo = hello;    console.log(foo);};sayHello(); // muestr...
Upcoming SlideShare
Loading in …5
×

Introducción a Javascript

1,535 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,535
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducción a Javascript

  1. 1. Fundamentos de Javascript Abraham Estrada
  2. 2. HistoriaBrendan Eich 3WC - DOMNetscape 1997 ECMAMocha > LiveScript ECMAScript1995 ISOMicrosoft JScript1996
  3. 3. Sintaxis Básicavar foo = ‘hello world’;var foo = ‘hello world’;2 * 3 + 5 // 112 * (3 + 5) // 16var foo = function() { console.log(‘hello);};
  4. 4. Operadores Básicosvar foo = ‘hello’;var bar = ‘world’;console.log(foo + ‘ ‘ + bar);2 * 3;2 / 3;var i = 1;var j = ++i;var k = i++;
  5. 5. Operaciones con Númerosy Cadenas de Caracteresvar foo = 1;var bar = ‘2’;console.log(foo + bar);console.log(foo + Number(bar));console.log(foo + +bar);
  6. 6. Operadores Lógicosvar foo = 1;var bar = 0;var baz = 2;foo || bar; // devuelve 1, el cual es verdadero (true)bar || foo; // devuelve 1, el cual es verdadero (true)foo && bar; // devuelve 0, el cual es falso (false)foo && baz; // devuelve 2, el cual es verdadero (true)baz && foo; // devuelve 1, el cual es verdadero (true)
  7. 7. Operadores de Comparaciónvar foo = 1;var bar = 0;var baz = 1;var bim = 2;foo == bar; // devuelve falso (false)foo != bar; // devuelve verdadero (true)foo == baz; // devuelve verdadero (true)foo === baz; // devuelve falso (false)foo !== baz; // devuelve verdadero (true)foo === parseInt(baz); // devuelve verdadero (true)foo > bim; // devuelve falso (false)bim > baz; // devuelve verdadero (true)foo <= baz; // devuelve verdadero (true)
  8. 8. Código Condicionalvar foo = true;var bar = false;if (bar) { // este código nunca se ejecutará console.log(hello!);}if (bar) { // este código no se ejecutará} else { if (foo) { // este código se ejecutará } else { // este código se ejecutará si foo y bar son falsos (false) }}
  9. 9. Elementos Verdaderos y Falsos0;any string; // cualquier cadena[]; // un arreglo vacío{}; // un objeto vacío1; // cualquier número distinto a cero0;; // una cadena vacíaNaN; // la variable JavaScript "not-a-number"null; // un valor nuloundefined; // puede ser redefinido
  10. 10. Variables CondicionalesUtilizando el Operador Ternario var foo = bar ? 1 : 0;
  11. 11. Declaración Switchswitch (foo) { case bar: alert(el valor es bar); break; case baz: alert(el valor es baz); break; default: alert(de forma predeterminada se ejecutará este código); break;}
  12. 12. var stuffToDo = { bar : function() { alert(el valor es bar); }, baz : function() { alert(el valor es baz); }, default : function() { alert(de forma predeterminada se ejecutará este código); }};if (stuffToDo[foo]) { stuffToDo[foo]();} else { stuffToDo[default]();}
  13. 13. Bucle: For// muestra en la consola intento 0,// intento 1, ..., intento 4for (var i=0; i<5; i++) { console.log(intento + i);}
  14. 14. Bucle: Whilevar i = 0;while (i < 100) { // Este bloque de código // se ejecutará 100 veces console.log(Actualmente en + i); i++; // incrementa la variable i}
  15. 15. Bucle: Do-Whiledo { // Incluso cuando la // condición sea falsa // el cuerpo del bucle se // ejecutará al menos una vez. alert(Hello);} while(false);
  16. 16. Break - Continuefor (var i = 0; i < 10; i++) { if (something) { break; }}for (var i = 0; i < 10; i++) { if (something) { continue; } // La siguiente declaración será ejecutada // si la condición something no se cumple console.log(Hello);}
  17. 17. Palabras Reservadasabstract double in superboolean else instanceof switch break enum int synchronized byte export interface this case extends long throw catch final native throws char finally new transient class float package try const for private typeofcontinue function protected vardebugger goto public void default if return volatile delete implements short while do import static with
  18. 18. Arreglosvar myArray = [ hello, world ];var myArray = [ hello, world, foo];console.log(myArray[2]);console.log(myArray.length);myArray[1] = ‘changed’;myArray.push(‘new’);
  19. 19. Arreglosvar myArray = [ h, e, l, l, o ];var myString = myArray.join(); // hellovar mySplit = myString.split();// [ h, e, l, l, o ]
  20. 20. Objetosvar myObject = { sayHello : function() { console.log(hello); }, myName : Rebecca};myObject.sayHello();console.log(myObject.myName);
  21. 21. Funcionesfunction foo() { /* hacer algo */ }var foo = function() { /* hacer algo */ } http://kangax.github.com/nfe/
  22. 22. var greet = function(person, greeting) { var text = greeting + , + person; console.log(text);};greet(Rebecca, Hello);// muestra en la consola Hello, Rebecca
  23. 23. var greet = function(person, greeting) { var text = greeting + , + person; return text;};console.log(greet(Rebecca,hello));// la función devuelve Hello, Rebecca,la cual se muestra en la consola
  24. 24. var greet = function(person, greeting) { var text = greeting + , + person; return function() { console.log(text); };};var greeting = greet(Rebecca, Hello);greeting();// se muestra en la consola Hello, Rebecca
  25. 25. Funciones Anónimas Autoejecutables(function(){ var foo = Hello world;})();console.log(foo);// indefinido (undefined)
  26. 26. var myFunction = function() { console.log(hello);};var myObject = { foo : bar};var myArray = [ a, b, c ];var myString = hello;var myNumber = 3;
  27. 27. typeof myFunction; // devuelve functiontypeof myObject; // devuelve objecttypeof myArray; // devuelve objecttypeof myString; // devuelve stringtypeof myNumber; // devuelve numbertypeof null; // devuelve objectif (myArray.push && myArray.slice && myArray.join) { // probablemente sea un arreglo // (este estilo es llamado, en inglés, "duck typing")}if (Object.prototype.toString.call(myArray) === [objectArray]) { // definitivamente es un arreglo; // esta es considerada la forma más robusta // de determinar si un valor es un arreglo.}
  28. 28. Alcance (scope)var foo = hello;var sayHello = function() { console.log(foo);};sayHello(); // muestra en la consola helloconsole.log(foo); // también muestra en laconsola hello
  29. 29. Alcance (scope)var sayHello = function() { var foo = hello; console.log(foo);};sayHello(); // muestra en la consola helloconsole.log(foo); // no muestra nada enla consola
  30. 30. Alcance (scope)var foo = world;var sayHello = function() { var foo = hello; console.log(foo);};sayHello(); // muestra en la consola helloconsole.log(foo); // muestra en laconsola world

×