javascript - profesores.virtual.uniandes.edu.coisis3710/dokuwiki/lib/... · • javascript del lado...

JAVASCRIPTISIS 3710

Javascript: Funciones

var x = function (a, b) {return a * b};

En JS, las funciones pueden asignarse a variables


var x = function (a, b) {return a * b};

var z = x(4, 3);

var z = x(7, 10);?

En JS, las funciones pueden asignarse a variables


function suma ( a, b ) { return a + b; }

suma = function ( a, b ) { return a – b; }

console.log( suma( 10, 2 ) ); // Output: ??


function suma ( a, b ) { return a + b; }

suma = function ( a, b ) { return a – b; }

console.log( suma( 10, 2 ) ); // Output: ??

En JS, las funciones pueden redefinirse en tiempo de ejecución


function Apple ( type ) { this.type = type; this.color = “red";

this.getInfo = function () { return this.color + " " + this.type; }}

var apple = new Apple( 'macintosh' );apple.color = "roja";console.log ( apple.getInfo() );


function Apple ( type ) { this.type = type; this.color = “red";

this.getInfo = function () { return this.color + " " + this.type; }}

var apple = new Apple( 'macintosh' );apple.color = "roja";console.log ( apple.getInfo() );

En JS, se pueden simular objetos con funciones !!!

Javascript: Alcances

// aquí no se puede usar nombre function myFunction() { var nombre = "Miguel"; // aquí se puede usar nombre }

Variables locales: solo pueden ser usadas dentro de la función


var nombre = "Miguel"; // aquí se puede usar nombrefunction myFunction() { // aquí se puede usar nombre }

Variables globales: definidas por fuera de funciones


// aquí se puede usar nombrefunction myFunction() { nombre = "Miguel"; // aquí se puede usar nombre}

Variables globales

Pregunta estilo parcial !!

var aNumber = 100;tweak();

function tweak(){

window.alert(aNumber);

if (false) { var aNumber = 123; }}


var test = "I'm global";

function testScope() { var test = "I'm local";

console.log (test); }

testScope(); // output: ??console.log(test); // output: ??console.log(test); // output: ??






I'm local






I'm localI'm global






I'm localI'm globalI'm global





console.log(test); // output: ?? testScope(); // output: ??console.log(test); // output: ??






I'm global






I'm globalI'm local






I'm globalI'm localI'm global



function testScope() { test = "I'm local";








I'm local






I'm localI'm local






I'm localI'm localI'm local



function testScope() { test = "I'm local"; var test = "I'm local 2" console.log (test); }

console.log(test); // output: ??testScope(); // output: ??console.log(test); // output: ??





I'm global





I'm globalI'm local 2





I'm globalI'm local 2I'm global



function testScope() { test = "I'm local"; window.alert(test); var test = "I'm local 2" console.log (test); }testScope();



function testScope() { window.alert(test); var test = "I'm local 2" console.log (test); }testScope();

Visión inicial Agregar interacciones / animaciones en páginas HTML

Evolución / Uso actual • Interacciones cliente/servidor usando peticiones

AJAX • Componentes en aplicaciones web/móviles/escritorio • Reemplazo de plugins web (e.j., multimedia) • Mejoras en el rendimiento (e.j., Google V8) • Javascript del lado del servidor • Librerías y Frameworks para crear aplicaciones

Javascript

Librerías • Colección de funciones • No definen una estructura para el código

Frameworks • Entorno de software que debe ser extendido por el

usuario para crear una aplicación • Define una estructura para el código

Librerías/ Frameworks


https://www.javascripting.com/


http://jster.net/

Librerías/ Frameworks: JQuery

JQuery ofrece opciones para • Interfaz simplificada para buscar/consultar/

manipular elementos DOM • Interfaz simplificada para llamadas AJAX • Librerías de eventos, objetos gráficos,

animaciones

Por ejemplo: • Agregar eventos a elementos que ya existen • Obtener información de elementos

JQuery

Buscar un elemento

var x = document.getElementById( “btn_agregar” );

var x = $( “#btn_agregar” );

Agregar el evento onclick

var x = document.getElementById( “btn_agregar” );x.onclick = function () { … };

$( “#btn_agregar” ).click( function(){ … } );

$( “#btn_agregar” ).click( variable );$( “#btn_agregar” ).bind( “click”, function(){ … } );$( “#btn_agregar tbody tr” ).on( “click”, function(){ … } );

JQuery

<script src="libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Agregando Jquery a página HTML

Jquery local

Jquery alojado remotamente

JQuery: Selectores

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

$(“*")

$(“p")

$(“#lastname”)

$(".intro")

$(".intro,.demo")

Todos los elementos

Todos los elementos <p>

JQuery: Selectores


$(“*")

$(“p")

$(“#lastname”)

$(".intro")

$(".intro,.demo")

Todos los elementos


Elementos con id lastname

Elementos con clase intro

JQuery: Selectores


$(“*")

$(“p")

$(“#lastname”)

$(".intro")

$(".intro,.demo")

Todos los elementos


Elementos con id lastname

Elementos con clase intro

Elementos con clase introo clase

JQuery: Selectores


$("p:first")

$("p:last")

$("tr:even")

$("tr:odd")

$("[href]")

El primer <p>

El último <p>

JQuery: Selectores


$("p:first")

$("p:last")

$("tr:even")

$("tr:odd")

$("[href]")

El primer <p>

El último <p>

Los <tr> pares

Los <tr> impares

JQuery: Selectores


$("p:first")

$("p:last")

$("tr:even")

$("tr:odd")

$("[href]")

El primer <p>

El último <p>

Los <tr> pares

Los <tr> impares

Todos los elementos con el atributo href

JQuery

$('#btn_agregar').click( function () { ……… });

var myFnc = function () { ………};

$(‘#btn_agregar').click(myFnc);

JQuery




Función a ejecutarse con el evento onclick del elemento HTML

JQuery




Función a ejecutarse con el evento onclick del elemento HTML

Definición de la función como una variable

JQuery

// un evento para todos los elementos // button$(‘:button’).click( function(){ // hacer algo });

COMO SE PUEDE ASIGNAR UNA FUNCION AL EVENTO ONCLICK DE TODOS LOS

BOTONES EN EL ARBOL DOM ?

<input type=“button"/>

JQuery

// un evento para todos los elementos // button$(‘:button’).click( function(){ // hacer algo });

<input type=“button"/>

JQuery

// un evento para todos los elementos // checkbox$(‘:checkbox’).click( function(){ // hacer algo });

COMO SE PUEDE ASIGNAR UNA FUNCION AL EVENTO ONCLICK DE TODOS LOS

CHECKBOX EN EL ARBOL DOM ?

<input type=“checkbox"/>

JQuery

// un evento para todos los elementos // checkbox$(‘:checkbox’).click( function(){ // hacer algo });

<input type=“checkbox"/>

JQuery

var html = $('#elemento').html();

$('#elemento').html( '<b>Nuevo contenido</b>‘ );

Obtener y modificar HTML de un elemento

JQuery

$(document).ready( function () { $('#btn_agregar').click( function () { var texto_tarea = $("#nuevo_item_text").val(); agregarTarea( texto_tarea ); mostrarTareasEnTabla(); } ); });

JQuery

$(document).ready( function () { $('#btn_agregar').click( function () { var texto_tarea = $("#nuevo_item_text").val(); agregarTarea( texto_tarea ); mostrarTareasEnTabla(); } ); });

El árbol DOM está listo

JQuery

<html><head> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $( document ).ready(function() { console.log( "document loaded" ); }); $( window ).load(function() { console.log( "window loaded" ); }); </script></head><body> <iframe src="http://techcrunch.com"></iframe></body></html>

JQuery

<html><head> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $( document ).ready(function() { console.log( "document loaded" ); }); $( window ).load(function() { console.log( "window loaded" ); }); </script></head><body> <iframe src="http://techcrunch.com"></iframe></body></html>

DOM listo; Frames, objetos, e imágenes se

han cargado

Recomendado…

javascript - profesores.virtual.uniandes.edu.coisis3710/dokuwiki/lib/... · • javascript del lado...

Documents