Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Javascript 101

    Cargado por

    sandra_guevara_3
    20 vistas30 páginas
    Presentación taller Javascript 101

    Derechos de autor

    © © All Rights Reserved

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Presentación taller Javascript 101

    Copyright:

    © All Rights Reserved
    Marcar por contenido inapropiado
    20 vistas30 páginas

    Javascript 101

    Cargado por

    sandra_guevara_3
    Presentación taller Javascript 101

    Copyright:

    © All Rights Reserved
    Marcar por contenido inapropiado
    de 30

    Red de Investigaciones de

    Tecnologa Avanzada

    Universidad Distrital Francisco Jos de Caldas

    Javascript 101

    Historia
    Caractersticas
    Motores
    Aplicaciones
    Herramientas
    Sintaxis
    Tipos de datos
    Operadores
    Control de flujo
    Condiciones
    Bucles

    Funciones
    Callbacks
    Closures
    Scope
    DOM (Document Object Model)
    Eventos
    jQuery

    Historia
    1995

    LiveScript

    JavaScript

    Brendan Eich
    1997
    ECMA International

    ECMAScript

    Caractersticas

    Lenguaje de interpretado
    Dbilmente tipado
    Multiparadigma
    Cuenta con funciones first-class
    Basado en prototipos

    Motores
    Gecko

    Webkit

    Presto

    Webkit

    Aplicaciones

    Toolkit
    JS Bin

    Sintaxis (I)
    Sensible a Maysculas y minsculas
    Cada instruccin termina con ;
    Los bloques de cdigo estn delimitados por { }
    Comentarios para mltiples lneas /* */
    Comentario de una lnea //

    Sintaxis (II)
    <!DOCTYPE html>
    <html>
    <head>
    <script src="script1.js"></script>
    <script> // cdigo </script>
    </head>
    <body>
    <script src="script2.js"></script>
    </body>
    </html>

    ---------------------------------------------------------------------------------------------------------------------------------------------script1.js

    Tipos de datos (I)


    Integer

    Float

    Nmeros

    Especiales

    Strings

    typeof [variable] ;

    var a = 10

    var b =
    var b = -10.6
    -10.6
    var c = 10/0
    var c = 10/0 //Infinity
    //Infinity

    var cadena = Hola Mundo

    var persona = {
    Object

    nombre: "Javier",
    apellido: "Bautista",
    };

    Retorna el tipo de dato


    de la variable.

    var d = Math.sqrt(-1) //NaN Not a Number

    var cadena = Hola mundo

    Tipos de datos (II)


    true

    Definicin
    var a = [];
    var c = [Javascript, 1, true];

    Arreglos

    Boolean
    false

    undefined

    var e; //undefined

    var
    var
    var
    var

    f
    g
    h
    j

    =
    =
    =
    =

    c.length; //Tamao del arreglo


    c.pop();
    //Elimina el ltimo elemento
    c.push(10.5); //Agrega elemento al final
    c.shift(); //ELimina primer elemento

    Operaciones
    null

    var e = null;

    Operadores => Relacionales


    ==
    !=
    <
    <=
    >
    >=

    var a = -2
    var b = 3
    console.log(a==b);
    console.log(a!=b);
    console.log(a<b);
    console.log(a<=b);
    console.log(a>b);
    console.log(a>=b);

    Operadores => Aritmticos


    +
    *
    **
    /
    %

    var a = -2
    var b = 3
    console.log(a+b);
    console.log(a-b);
    console.log(a*b);
    console.log(a**b);
    console.log(a/b);
    console.log(a%b);

    Operadores => Asignacin


    =
    +=
    -=

    var i = 0
    var j = 10
    while(i != j){
    i+=1
    j-=1
    console.log(i = +i)
    console.log(j = + j)
    }

    Operadores => Lgicos


    &&
    ||
    !

    var a = true
    var b = false
    if(a && b){
    console.log(No);
    }
    if(a || b){
    console.log(Ok);
    }
    if(!b){
    console.log(No);
    }

    Control de flujo -> Condiciones


    if([condicin]){
    [sentencia]
    }
    else{
    [sentencia]
    }

    switch(variable){
    case 1:
    [sentencia]
    break;
    case 2:
    [sentencia]
    break;
    .
    .
    default:
    [sentencia]
    }

    var a = 23;
    var b = 10;
    if(a < b){
    console.log(a + es menor que + b)
    }
    else{
    console.log(a + es mayor que + b)
    }

    var opcion = 2;
    switch(opcion){
    case 1:
    console.log(Opcin 1 elegida);
    case 2:
    console.log(Opcin 2 elegida);
    default:
    console.log(Opcin no vlida);
    break;
    }

    Control de flujo -> Bucles


    for(var i=0;i<=10;i++){
    console.log(i);
    }
    var cont = 0
    while(cont <= 10){
    console.log(cont);
    cont++;
    }
    var cont = 10;
    do{
    console.log(cont);
    }while(--cont>=0);

    DOM -> Document Object Model (I)


    <!DOCTYPE html>
    <html>
    <head>
    <title>MY TITLE</title>
    </head>
    <body>
    <div>
    <h1></h1>
    <p>
    <a></a>
    </p>
    </div>
    </body>
    </html>

    DOM -> Document Object Model (II)


    Acceso a nodos

    getElementsByTagName()

    var elements = document.getElementsByTagName(div);

    getElementsByName()

    var elements = document.getElementsByName(nombre);

    getElementsById()

    var elements = document.getElementsById(logo);

    DOM -> Document Object Model (III)


    Otras acciones

    createElement(etiqueta)

    createTextNode(contenido)

    appendChild(nodo)

    querySelector(selector)

    var label = document.createElement(label);

    var contenido = document.createTextNode(Hola mundo);

    label.appendChild(contenido);
    document.body.appendChild(label);

    var element = document.querySelector(form .nombre);

    Eventos
    var label = document.querySelectorAll(label);
    label.onclick = function(){console.log(Click en label)};

    onkeydown

    onfocus
    onmouseover

    onclick
    onkeypress

    onload

    Ejercicio: Colores

    Funciones
    var nombreFuncion = function(param1, param2){
    [sentencia];
    [sentencia];
    return valor;
    }

    Funciones -> Callback


    function miFuncion (param1, callback){
    [sentencia]
    callback();
    }
    miFuncion(arg1, function(){
    [sentencia]
    });

    function miFuncion (param1, callback){


    var nombre = Sandra;
    callback();
    }
    miFuncion(Javier, function(){
    console.log(Hola por segunda vez +
    nombre);
    });

    Scope
    function sumar(a,b) {
    var suma = a + b;
    }
    sumar(1,2);
    console.log(suma);

    var suma = 0;
    function sumar(a,b){
    suma = a + b
    }
    sumar(1,2);
    console.log(suma);

    (I)
    function sumar(a,b){
    suma = a + b;
    }
    sumar(1,2);
    console.log(suma);

    (II)

    (II)

    Funciones -> Closures y funciones annimas

    function iniciarSaludo(){
    var nombre = Dany;
    function saludar(){
    console.log(nombre);
    }
    saludar();
    }
    iniciarSaludo();

    (I)

    function addHandler(){
    var clickHandler = function(){
    this.style.background = red;
    };
    (function(){
    var elemento = document.getElementById(el);
    elemento.onclick = clickHandler;
    })();
    }

    (II)

    jQuery
    $("#boton").on("click",function(){
    $(".cuadro").show();
    });

    $.ajax({
    url: "/datos/archivo.php",
    method: POST,
    data: {
    nombre: $(".nombre").val()
    },
    success: function(data) {
    $("#temporal").html("<span>"+data+"</span>");
    }
    });

    Ejercicio 1: Colores
    Ejercicio 2: Google maps
    Ejercicio 3: Send Data (AJAX)

    Ejercicio: Colores (sin jQuery)


    Herramienta: http://jsfiddle.net/

    Ejercicio: Colores (con jQuery)


    Herramienta: http://jsfiddle.net/

    Ejercicio: Google Maps


    Herramienta: www.jsbin.com

    Ejercicio: Send Data (AJAX)


    Herramienta: Cualquier IDE

    Referencias

    https://developer.mozilla.org/es/docs/Web/JavaScript
    https://jsfiddle.net/
    https://jsbin.com
    https://jquery.com/
    http://javascriptweekly.com/

    Gracias

    También podría gustarte