Referencia JAVASCRIPT!

Transcripción

1 Referencia JAVASCRIPT Adicion de codigo Javascript Javascript en el HTML <script type="text/javascript"> // Aca va codigo Javascript </script> Variables Arte e Internet - Magister Artes Mediales - Universidad de Chile Javascript externalizado <script type="text/javascript" src="javascript.js"> </script> Tipos de variables, las variables siempre seran manejadas segun tipo variable = 30; // variable tipo number variable = 30.34; // variable tipo float variable = "30"; // variable tipo string, uso de "" variable = true; // variable tipo boolean var variable; // variable tipo undefined variable = null; // variable tipo null variable = [30,30.34,'30',true]; // variable tipo array variable[4]; // obtener de array segun indice variable = ['numero':30,'si':true]; // array asociativo variable['numero']; // obtener de array asociativo segun key div=document.getelementbyid('id'); // objeto referenciado en variable body=document.documentelement; //body en variable var obras={'o':[{'id':'0','autor':'autor']; //json Operadores aritmeticos + - * / % Operaciones de asignacion = += -= *= /= %= Operadores de comparacion == === = > < >= <= Operaciones logicos && Popup Alert, alerta simple alert('mensaje'); Confirm, solicita una confirmacion var respuesta = confirm("esta seguro?"); // true - false Prompt, solicita un ingreso de dato var respuesta = prompt("cual es tu nombre?");

2 Funciones Arte e Internet - Magister Artes Mediales - Universidad de Chile Siempre preocuparse de enviar parametros correctos en tipo y valor si la funcion lo requiere Funcion que "devuelve algo" function suma (a,b){ return a+b; var resultado = suma(3,5); Funcion que "hace algo" function opacidad(){ document.getelementbyid('opa').style.opacity = 0.4; opacidad(); Funcion anonima dentro de timer timer = setinterval(function(){ // instrucciones aqui,5000); Objetos Javascript trabaja con objetos aunque formalmente no existe el concepto de "clases" al interior del lenguaje, pero existe la posibilidad en javascript de manipular las funciones para crear falsas clases con la mayor parte de las características que tendrían en otros lenguajes. function imagen(id,cat) { min = 0;max = 1; this.id = id; var self = document.getelementbyid(this.id); this.opacity = function opacidad(min,max){ var opaco = true; var opa=1; //constructores, variables //metodos setinterval(function(){ if(opaco){ opa-=0.01;if(opa<min){opaco=false; else{ opa+=0.01;if(opa>max){opaco=true; self.style.opacity=opa;,50); self.onclick = function(){ alert(cat); // creacion de la instancia var uno = new imagen('uno','viaje'); //aplicacion de los metodos de la clase uno.opacity(0.1,0.8); //eventos

3 Eventos pueden llamarse como atributo de las etiquetas en HTML, o como propiedades de los objetos en Javascript <div onclick="alert('click');"> document.getelementbyid('unico').onclick=function(){; document.getelementbyid('unico').addeventlistener('click', nombrefuncion, false); body onload, onunload, onkeypress para todos los elementos onclick, ondblclick, onmouseover, onmouseout formularios onchange, onsubmit, onreset, onfocus, onblur, onerror Loops ciclo For, "repite este ciclo n numero de veces" for(i=0;i<10;i++){ for(var element in array){ ciclo While, "repite este ciclo durante esta condición" while(b==5){ Iteraciones ciclo Do-While, "repite este ciclo a lo menos una vez y luego continua si la condición es cierta" do{ while(b==5) if, "ejecuta este bloque si la condición es cierta" if(c==3){ if - else, "ejecuta este bloque si la condición es cierta, si no es asi entonces ejecuta el otro bloque" if(c==3){ else{ (c==3)? : ; // operador ternario if - else if - else, "ejecuta el primer bloque si la condición es cierta, si no es asi entonces evalúa la segunda condición y si es cierta ejecuta el bloque que le corresponde, si tampoco es asi entonces ejecuta el bloque final" if(c==3){ else if(){ else{ switch - case, "evalúa esta esta unica variable, y si coincide con cualesquiera de los valores propuestos ejecuta el bloque correspondiente" switch ( var ){ case "si": break; case "no": break; default:

4 Timers SetTimeout, timer simple settimeout('funcion()',5000); SetInterval, timer iterativo setinterval('funcion()',5000); despeje de SetInterval var timer = setinterval('funcion()',5000); clearinterval(timer); Math var pi = Math.PI; Arte e Internet - Magister Artes Mediales - Universidad de Chile // var integral = Math.round(3.1415); // 3 var raiz = Math.sqrt(9); // 3 numeros al azar var random = Math.random(); // flotante desde 0 a 1, ej: var azar = Math.round(Math.random()*10); //multiplico y redondeo // Math.round(), Math.floor(), Math.ceil() son aproximaciones a integrales conversiones entre grados y radianes var grados = 180; var radianes; radianes = grados * (Math.PI/180); grados = radianes * (180/Math.PI); Nodos Creacion de un nodo //1- crear y setear el nodo div = document.createelement('div'); div.innerhtml="contenido del div"; div.style.csstext = "border:dotted red 2px"; //2- ubicar el elemento padre body = document.documentelement; /* no solo puedo pegar cosas al body, tambien puedo ubicar otros elementos: li = document.getelementbyid('lista').getelementsbytagname('li')[2]; */ //3- "pegar" el nodo al elemento padre body.appendchild(div); Otros metodos y propiedades de nodo node.getattibute('title'); node.setattibute("atributo","valor"); node.parentnode; node.childnode[4]; node.firstchild; node.lastchild; node.appendchild(); node.removechild(); node.replacechild(new,old); node.insertbefore(new,old); node.clonenode();

5 Date Arte e Internet - Magister Artes Mediales - Universidad de Chile var fecha = new Date(); // instancia objeto date en la variable fecha dia = fecha.getdate(); //dia del mes mes = fecha.getmonth(); //mes en un numero integral yer = fecha.getfullyear(); //año completo hor = fecha.gethours(); min = fecha.getminutes(); sec = fecha.getseconds(); Metodos y Propiedades WINDOW window.innerheight;//alto disponible window.innerwidth;//ancho disponible window.open(); window.close(); window.alert(); window.confirm(); window.prompt() window.scrollto(x,y); CONSOLE console.log('mensaje'); // enviar mensajes a la consola, sirve como retroalimentacion o para debuggear LOCATION location.href;//url HISTORY history.back();//retroceder en la historia DOCUMENT document.getelementbyid('id'); // encontrar por id document.getelementbyid('id').style; // acceder a propiedades de estilo document.getelementbyid('id').innerhtml; // introducir nodo de texto document.getelementsbytagname('body')[0];// ubicar al body document.createelement('div');// crear elemento document.images[int]; document.forms[int]; document.anchors[int]; document.write(); document.title(); document.url; STRING var string='palabra'; string.lenght; string.fontcolor(); string.fontsize(); string.touppercase(); //devuelve largo de string //todo en mayusculas string.indexof(); //ubica posicion de caracter string.slice(1,5); //extrae tajada del string segun posiciones string.split(','); //tranforma string en array segun separador string.bold(); //negrita string.replace("reemplazado","reemplazante");//reemplazo de string string.link(url);

6 NUMBER var number= ; number.tofixed(3); //ajusta numero de decimales, number.toprecision(10); //digitos totales number.tostring(int); //fuerza conversion a string, " " number=parseint( ); //fuerza conversion a integral, 4 number=parsefloat(4); //fuerza conversion a flotante, 4.0 REGEXP string.test(/<[^<]+?>/g); //identifica patrones, boolean string.replace(/[a-z]{0,10/g,"m");//reemplaza patrones, reemplazo //Ejemplos de patrones /^[0-9]{2,4$/g //numero de 2 a 4 digitos /<h2>.+\s+.+<\/h2>/ //ubica todo entre h2, incluso salto de linea /image.+?.jpg/g //palabras que comience con image y termine con.jpg /\d{1,2\/d{1,2\/d{4/ //fecha en formato dd/mm/yyyy /\w+@[a-z_]+\.[a-z]{2,/i //simple mail ARRAY var array = ["Banana", "Orange", "Apple", "Mango"]; array.join(' ');//junta array en un string segun separador array.pop()//remueve y devuelve el ultimo elemento array.shift()//remueve y revuelve el primer elemento array.unshift()//agrega al principio del array array.push()//agrega al final del array array.reverse(); //invierte el orden array.sort() //ordena alfanumericamente o segun parametro Formulario Para acceder al valor de un elemento de formulario existen muchísimas notaciones muy distintas entre ellas, algunas parecen muy sencillas aunque tienen el problema de que obligan al navegador a realizar mas procesos de los necesarios y por lo tanto son mas ineficientes, esta es una notacion muy sencilla y sin embargo muy poderosa, exige que tanto el formulario como el elemento tengan el atributo "name" con un valor unico: nombre = document.forms['nombredelformulario']['nombredelelemento'].value; ej: nombre = document.forms['formulario1']['boton'].value; Aca en el evento "onsubmit" se ejecutara la funcion "validar()", la cual accederá a los valores de los elementos de formulario y ejecutar una evaluacion que apunta a verificar si han sido rellenados o si estan vacios, mediante un bloque "if" decide que hacer si alguno de los dos no tiene contenido. <form name="forma" onsubmit="validar()"> nombre: <input type="text" name="nombre"><br/> password: <input type="password" name="pass"><br/> <input type="submit" value="enviar"> </form> <script> function validar(){ nombre = document.forms['forma']['nombre'].value; pass = document.forms['forma']['pass'].value; if(nombre == 0 pass == 0){ alert("rellena bien la h***a poh"); </script>

7 JQuery JQuery es un Framework de Javascript, asocia selectores tipo CSS a un "objeto jquery", del cual se opera utilizando metodos que extienden la funcionalidad del objeto (p.e. a animaciones o eventos), requiere vincular en el head al archivo jquery mas actualizado ( // Ejecutar en la carga de la pagina -ubicado en el head- $(document).ready(function (){ /* acciones */ ); $('#id').toggle(); // Elegir elementos por ID $(".class").toggle(); // Elegir elementos por clase $("body div.class").toggle(); // Seleccionar según jerarquía $("p").hide(); // Esconder un elemento $("p").show(); // Mostrar un elemento $("p").html("<p>contenido</p>"); // Insertar HTML jquery way $("p").append("<p>contenido</p>"); // Añadir HTML JQuery way $("p").empty(); // Vaciar HTML $("p").before("estoy antes"); // Insertar antes $("p").after("estoy después"); // Insertar después $("p:last").after($("p:first")); // intercambiar elementos p $("p:eq(2)").toggle(); // Por posición $("#img").attr("alt","texto alternativo"); // escribir un atributo $("img").width(400); // cambiar ancho $("img").height(300); // cambiar alto $("p").css({'background-color': '#ffe', 'color': '#ccc');//insertar CSS $("img").removeclass("nuevaimagen"); // Quitar Clase $("img").toogleclass("nuevaimagen"); // Alternar Clase $("p").click(function (){ acciones ); // amarrar a un atajo de evento $("p").hover(function over(){,function out(){); // Eventos over y out $("p").toggle(200); // Cambia la visibilidad con duración $("p").fadein(200); // Fade in, require style="display:none;" $("p").fadeout(200); // Fade out $("p").fadeto(1000,0.330); // Fade (duración, opacidad, función) $("p").animate({width:"80%", opacity:0.33, borderwidth:"15px",2000); // Animacion ({parámetros,duración,leasing, función) $("div").load("message.txt"); // load() Ajax $("div").load("message.txt",function(){); // Ajax con función ejemplo: $(document).ready(function (){ $("divid").click(function(){ $("divid").load("message.txt"); ); ); otro: $(document).ready(function (){ $(".rojos").click(function(){ $(this).css({'background-color': 'blue', 'color': 'grey'); $(this).fadeout(2000); ); ); otro mas: $(document).ready(function (){ $("#azul").click(function(){ $(this).animate({opacity: 0.25,left: "+=50", 5000, function() {alert("listo");); ); );

8 Canvas <canvas id="canvas" style="width:200px;height:200px;"> parece que tu browser no soporta canvas </canvas> <script type="text/javascript"> canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext('2d'); // circulo ctx.beginpath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.fillstyle="red"; ctx.fill(); // cuadrado ctx.fillstyle="#ccc"; ctx.fillrect(0,0,300,300); //ctx.rect(0,0,300,300); // cuadrado, solo borde ctx.linewidth = 3; ctx.strokestyle = 'black'; ctx.strokerect(1, 10, 143, 134); // texto ctx.fillstyle = '#333'; ctx.font = 'bold 64px sans-serif'; ctx.textbaseline = 'top'; ctx.filltext("texto",x,y); // resetear canvas ctx.clearrect(0, 0, WIDTH, HEIGHT); // linea ctx.linewidth = 3; ctx.strokestyle = 'red'; ctx.beginpath(); ctx.moveto(0,0); ctx.lineto(x,y); ctx.stroke(); // imagen var vaso = new Image(); vaso.src = url; vaso.onload = function() { ctx.drawimage(vaso,x,y); // popmatrix-pushmatrix ctx.save(); ctx.scale(ancho, alto) ctx.rotate(); ctx.translate(); ctx.restore(); </script> Arte e Internet - Magister Artes Mediales - Universidad de Chile

9 Sonido <audio id='sonido'> <--<audio autoplay loop controls id='sonido'>--> <source src='recursos/sonido.mp3' type="audio/mp3"> <source src='recursos/sonido.ogg' type="audio/ogg"> </audio> <input type="button" value="play" onclick="audio('sonido','play');"> <input type="button" value="pause" onclick="audio('sonido','pause');"> <input type="range" id="slider" value="vol +" min="1" range="100" step="1"> <script> function Audio(obj,com){ var audio=document.getelementbyid(obj); switch(com){ case 'play': audio.play();break; case 'pause': audio.pause();break; function info(){ var audio=document.getelementbyid('sonido'); var slider=document.getelementbyid('slider').value; audio.volume=slider/100; document.getelementbyid('info').innerhtml=audio.currenttime.tofixed(2); var vol=parseint(audio.volume*100); var volumen=document.getelementbyid("volumen"); volumen.innerhtml=vol; volumen.style.width=slider+"px"; setinterval("info()",200); </script> Video <video width="400" height="223" id="video" autoplay loop poster="imagen.jpg"> <source src="recursos/video.mp4" type="video/mp4"> <source src="recursos/video.webm" type="video/webm"> <source src="recursos/video.ogv" type="video/ogv"> </video> <script> video=document.getelementbyid('video'); video.onclick=function(){video.webkitenterfullscreen();; video.onmouseover=function(){ video.playbackrate=0.3; ; video.onmouseout=function(){ video.playbackrate=1.5; ; </script>

10 Snippets Un Snippet es un fragmento de codigo reutilizable, ya sea en forma de funcion o de instrucciones el snippet almacena sus datos de configuracion en variables, lo que le permite reconfigurarse para adaptarse a cualquier entorno de trabajo, por definicion el snippet realiza tareas repetitivas o especificas que en la practica valga la pena reutilizar function azar(top){ return Math.round(Math.random()*top); function redireccionar(url,time){ settimeout(function(){location.href=url;,time); function popup(url){ nw=window.open(url,'nueva pagina','height=200, width=500,top=300, left=300, resizable=no'); if(window.focus){nw.focus(); function ajax(i,e){ p=(window.activexobject)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest(); p.onreadystatechange=function(){ if(p.readystate==4 &&(p.status==200 window.location.href.indexof("http")==-1)){ document.getelementbyid(i).innerhtml=p.responsetext; ; p.open('get',e,0); p.send(null); function newnode(){ var div=document.createelement('div'); div.innerhtml=prompt('ingrese una palabra','...'); document.documentelement.appendchild(div); function fecha(){ var hoy=new Date(); var d=hoy.getdate(); var m=hoy.getmonth(); var a=hoy.getfullyear(); var mes=['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre']; var m=mes[m]; //transformo el numero del mes en un indice de array que me permite recuperar el mes como un string en español del array return fecha='hoy es '+d+' de '+m+' del '+a; //funcion devuelve algo function hora(){ var hoy=new Date(); var h=hoy.gethours(); var m=hoy.getminutes(); var s=hoy.getseconds(); s=(h>=12)?s+=' pm':s+=' am'; h=(h>=13)?h-=12:h; var hora=h+' : '+m+' : '+s; document.getelementbyid('hora').innerhtml=hora; //funcion hace algo document.documentelement.onmousemove=function mouse(e){ document.getelementbyid('infomouse').innerhtml='mouse X: '+e.pagex+' mouse Y: '+e.pagey+'<br/> e.screenx: '+e.screenx+' e.screeny: '+e.screeny;

11 ; function hex(){ var color=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; var h=color[azar(15)]; for(var i=0;i<5;i++){h+=color[azar(15)]; return hex='#'+h; var zz=0; var der=true; function zigzag(top){ //siempre enviar parametro en la llamada if(der){ zz++; if(zz>=top){der=der; else{ return zz; zz--; if(zz<=0){der=der; d=document.getelementbyid("texto").innerhtml; document.getelementbyid("texto").innerhtml=d.replace(/( href=' $1</a>"); function rand(l, u) { return Math.floor((Math.random() * (u - l + 1)) + l) function #(id){return document.getelementbyid(id); //uso: url=$('mylink').href;