javascript - profesores.virtual.uniandes.edu.coisis3710/dokuwiki/lib/... · • javascript del lado...
Post on 11-Oct-2018
225 Views
Preview:
TRANSCRIPT
Javascript: Funciones
var x = function (a, b) {return a * b};
En JS, las funciones pueden asignarse a variables
Javascript: Funciones
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
Javascript: Funciones
function suma ( a, b ) { return a + b; }
suma = function ( a, b ) { return a – b; }
console.log( suma( 10, 2 ) ); // Output: ??
Javascript: Funciones
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
Javascript: Funciones
function obtenerFuncion( nombre ) { if ( nombre == "suma" ) return function( a, b ) { return a + b; }; else return function( a, b ) { return a - b; };}
console.log( obtenerFuncion( "suma" ) );
console.log( obtenerFuncion( "suma" )( 10, 2 ) );
Javascript: Funciones
function obtenerFuncion( nombre ) { if ( nombre == "suma" ) return function( a, b ) { return a + b; }; else return function( a, b ) { return a - b; };}
console.log( obtenerFuncion( "suma" ) );
console.log( obtenerFuncion( "suma" )( 10, 2 ) );
En JS, las funciones pueden retornar funciones !!!
Javascript: Funciones
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() );
Javascript: Funciones
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
Javascript: Alcances
var nombre = "Miguel"; // aquí se puede usar nombrefunction myFunction() { // aquí se puede usar nombre }
Variables globales: definidas por fuera de funciones
Javascript: Alcances
// 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; }}
Pregunta estilo parcial !!
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: ??
Pregunta estilo parcial !!
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
Pregunta estilo parcial !!
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 localI'm global
Pregunta estilo parcial !!
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 localI'm globalI'm global
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { var test = "I'm local";
console.log (test); }
console.log(test); // output: ?? testScope(); // output: ??console.log(test); // output: ??
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { var test = "I'm local";
console.log (test); }
console.log(test); // output: ?? testScope(); // output: ??console.log(test); // output: ??
I'm global
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { var test = "I'm local";
console.log (test); }
console.log(test); // output: ?? testScope(); // output: ??console.log(test); // output: ??
I'm globalI'm local
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { var test = "I'm local";
console.log (test); }
console.log(test); // output: ?? testScope(); // output: ??console.log(test); // output: ??
I'm globalI'm localI'm global
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { test = "I'm local";
console.log (test); }
testScope(); // output: ??console.log(test); // output: ??console.log(test); // output: ??
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { test = "I'm local";
console.log (test); }
testScope(); // output: ??console.log(test); // output: ??console.log(test); // output: ??
I'm local
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { test = "I'm local";
console.log (test); }
testScope(); // output: ??console.log(test); // output: ??console.log(test); // output: ??
I'm localI'm local
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { test = "I'm local";
console.log (test); }
testScope(); // output: ??console.log(test); // output: ??console.log(test); // output: ??
I'm localI'm localI'm local
Pregunta estilo parcial !!
var test = "I'm global";
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: ??
Pregunta estilo parcial !!
var test = "I'm global";
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
Pregunta estilo parcial !!
var test = "I'm global";
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 globalI'm local 2
Pregunta estilo parcial !!
var test = "I'm global";
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 globalI'm local 2I'm global
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { test = "I'm local"; window.alert(test); var test = "I'm local 2" console.log (test); }testScope();
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { test = "I'm local"; window.alert(test); var test = "I'm local 2" console.log (test); }testScope();
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { test = "I'm local"; window.alert(test); var test = "I'm local 2" console.log (test); }testScope();
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { window.alert(test); var test = "I'm local 2" console.log (test); }testScope();
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { window.alert(test); var test = "I'm local 2" console.log (test); }testScope();
Pregunta estilo parcial !!
var test = "I'm global";
function testScope() { window.alert(test); var test = "I'm local 2" console.log (test); }testScope();
Pregunta estilo parcial !!
function addLinks () {for (var i=0, link; i<5; i++) {
link = document.createElement("a");link.innerHTML = "Link " + i;link.onclick = function () {
alert(i);};document.body.appendChild(link);
}}
window.onload = addLinks;
Descubra el error
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
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
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
$(“*")
$(“p")
$(“#lastname”)
$(".intro")
$(".intro,.demo")
Todos los elementos
Todos los elementos <p>
Elementos con id lastname
Elementos con clase intro
JQuery: Selectores
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
$(“*")
$(“p")
$(“#lastname”)
$(".intro")
$(".intro,.demo")
Todos los elementos
Todos los elementos <p>
Elementos con id lastname
Elementos con clase intro
Elementos con clase introo clase
JQuery: Selectores
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
$("p:first")
$("p:last")
$("tr:even")
$("tr:odd")
$("[href]")
El primer <p>
El último <p>
JQuery: Selectores
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
$("p:first")
$("p:last")
$("tr:even")
$("tr:odd")
$("[href]")
El primer <p>
El último <p>
Los <tr> pares
Los <tr> impares
JQuery: Selectores
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
$("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
$('#btn_agregar').click( function () { ……… });
var myFnc = function () { ………};
$(‘#btn_agregar').click(myFnc);
Función a ejecutarse con el evento onclick del elemento HTML
JQuery
$('#btn_agregar').click( function () { ……… });
var myFnc = function () { ………};
$(‘#btn_agregar').click(myFnc);
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
top related