MIC Edgar Alfonso Pérez García :: Tecnologías Web :: I

Transcripción

1 Tecnologías Web Facultad de Ingeniería Universidad Autónoma de San Luis Potosí MIC Edgar Alfonso Pérez García

2

3 JavaScript is a case sensitive. White Spaces if (isnan(finalnum)) Alert( you should know that 1 to any power is 1. ); else Alert ( When cubed, + thenum + is + finalnum) ; if (isnan(finalnum)) Alert( you should know that 1 to any power is 1. ); else Alert ( When cubed, + thenum + is + finalnum) ;

4 Comments /* para múltiples líneas de comentarios Con el mismo estilo que el lenguaje C, puedes poner Varias líneas de comentarios antes de cerrar con */ // para comentar una sola línea, se utiliza esta opción // Otra opción es comentar de firma individual cada una de las lineas //cuando se tienen varias como lo es en este caso //hasta la ultima línea a comentar

5 Semicolons are used to delineate expressions in JavaScript. Line Breaks Placing JavaScript correctly Between head or body tags You need to declare what type of script you re using <script type= text/javascript > To import javascript routines <script type= text/javascript src= myscripts.js >

6

7 Data Types Numbers xd Strings Booleans Null Undefined Objects

8 Numbers xd Numeric Functions Testing isnan() function Javascript:alert(isNaN( 4 )); Javascript:alert(isNaN(4)); Javascript:alert(isNaN( 4 ));

9 The Math Object Javascript:alert(Math.PI); Complete list of properties pdf Strings Hola B Hola Escaping Quotes \ \b Backspace \t Tab \n Newline \v Vertical tab \f Form feed \r Carriage return \\ Literal backslash

10 javascript:alert( Hola\t\tHola de nuevo\nbye ); String Methods and Properties alert( this is a string.length); var x= this is a string ; alert(x.length); x = Igarperez ; alert(x.substring(0,4); Booleans true or false In conditionals

11 Null Special data Means nothing var myvariable= ; Objects Like numerators //myvariable is empty, not null var dvdcatalog = identifier : 1, name : Coho Vineyard ; //to access Alert(dvdCatalog.name);

12 Arrays var star = new Array(); star[0] = Polaris ; star[1] = Deneb ; star[2] = Vega ; star[3] = Altair ; var star = [ Polaris, Deneb, Vega, Altair ]; var star = new Array( Polaris, Deneb, Vega, Altair );

13 <script type= text/javascript > Var anewvariable = I m Global ; function dosome(incomingbits) alert(anewvariable); alert(incomingbit); dosome( Some Argument ); </script>

14 var r = new Array("00","33","66","99","CC","FF"); var g = new Array("00","33","66","99","CC","FF"); var b = new Array("00","33","66","99","CC","FF"); for (i=0;i<r.length;i++) for (j=0;j<g.length;j++) document.write("<tr>"); for (k=0;k<b.length;k++) var nuevoc = "#" + r[i] + g[j] + b[k]; document.write("<td bgcolor=\"" + nuevoc + "\" align=center>"); document.write(nuevoc); document.write("</td>"); document.write("</tr>");

15 If Statement If (some condition) // do something If (CostoVuelo<350) comprarvuelo(); If (parametro!= alta ) //no darse de alta

16 <script language="javascript" type="text/javascript"> var inputnum = prompt("introduce un numero menor a 100:"); if (inputnum > 99) document.write("el numero" + inputnum + " no es menor a 100"); </script>

17 if ((inputnum>99) (inputnum <51)) alert( El Número, + inputnum+ no está entre 50 y 100 )

18 var inputnum = prompt("introduce un numero menor a 100:"); if (isnan(inputnum)) alert(inputnum + ", no es un número") else if ((inputnum > 99) (inputnum<51)) document.write("el numero" + inputnum + " no está entre 50 y 100");

19 var inputnum = prompt("introduce un numero menor a 100:"); if (isnan(inputnum)) if (inputnum.match(/one two tree four five six seven eight nine ten/)) alert ("esto representa un numero pero para la computadora no lo es"); else alert(inputnum + " no es un número"); else if ((inputnum > 99) (inputnum<51)) document.write("el numero " + inputnum + " no está entre 50 y 100"); else document.write("el número " + inputnum + " sí está entre 50 y 100");

20 var lenguaje = prompt("introduce el idioma"); switch (lenguaje) case "ingles": case "en": document.write("escogiste Ingles"); break; case "de": case "aleman": document.write("ecogiste Aleman"); break; case "portugues": case "pt": document.write("escogiste Portugues"); break; default: document.write("idioma por default Español");

21 var count = 0; while (count<10) document.write ("<p> párrafo " + count + "</p>"); count++;

22 var count=0; do document.write ("<p> párrafo " + count + "</p>"); count++; while (count<15);

23 var arreglo=["vega", "Deneb", "Altair"]; for (var count=0; count<arreglo.length; count++) document.write("<p>" + arreglo[count] + "</p>");

24 var star=new Object; star.name="polaris"; star.type="double/cepheid"; star.constellation = "Ursa Minor"; for (var starprop in star) document.write("<p>" + starprop + "=" + star[starprop] + "</p>");

25 <script type="text/javascript"> function alertname() var name= document.forms[0].nametext.value; if (name=="arturo") alert ("Hola " + name); else if (name=="fatima") alert ("Hola " + name); else alert (" y tu quien demonios eres?? " + name); return true; </script> <form id="formulario" action="#" onsubmit="return alertname();"> <p> Useranem: <input id="nametext" name="nametext" type="text" /></p> <p><input type="submit" /></p> </form>

26 <script type="text/javascript"> function processconfirm(answer) var result; if (answer) result = "Excelente entonces comencemos la partida"; else result = "Ok... quiza en otro momento"; return result; </script> </head> <body> <script type="text/javascript"> var confirmanswer = confirm("aceptas jugar un juego conmigo?"); var theanswer = processconfirm(confirmanswer); alert (theanswer); </script> </body>

27 <body> <p id="campofecha"></p> <script type="text/javascript"> var fecha = new Date(); var datestring = fecha.tolocaledatestring() + " " + fecha.tolocaletimestring(); var dateloc = document.getelementbyid("campofecha"); dateloc.innerhtml = "Hola la página fue rendereada el " + datestring; dateloc.innerhtml += "<br>" + fecha.todatestring(); dateloc.innerhtml += "<br>" + fecha.tolocalestring(); dateloc.innerhtml += "<br>" + fecha.tostring(); dateloc.innerhtml += "<br>" + fecha.totimestring(); dateloc.innerhtml += "<br>" + fecha.toutcstring(); dateloc.innerhtml += "<br>" + fecha; </script> </body>

28 The Browser Object Model creates a treelike hierarchy of object. The Browser itself is represented by one object, called window. Some window childs are: document frames history location self/window/parent screen

29

30

31 <script type="text/javascript"> document.write("available Height: " + screen.availheight + "<br>"); document.write("total Height: " + screen.height + "<br>"); document.write("available Width:" + screen.availwidth + "<br>"); document.write("total Width: " + screen.width + "<br>"); </script>

32 <title>untitled 1</title> <script type="text/javascript"> function muestrapropiedades() var body = document.getelementsbytagname("body")[0]; for (var propiedad in navigator) var elem = document.createelement("p"); var text = document.createtextnode(propiedad + ": " + navigator[propiedad]); elem.appendchild(text); body.appendchild(elem); </script> </head> <body onload="muestrapropiedades()"> </body>

33 <title>untitled 1</title> <script type="text/javascript"> function muestrapropiedades() var body = document.getelementsbytagname("body")[0]; for (var propiedad in location) var elem = document.createelement("p"); var text = document.createtextnode(propiedad + ": " + location[propiedad]); elem.appendchild(text); body.appendchild(elem); </script> </head> <body onload="muestrapropiedades()"> </body>

34 <script type="text/javascript"> function moveratras() history.back(); function moveradelante() history.forward(); </script> </head> <body> <p><a href="#" onclick="moveratras();"> click para la página anterior</a></p> <p><a href="#" onclick="moveradelante();">click para ir a la página siguiente</a></p> </body>

35 <html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled 1</title> </head><body> <p>here s some text</p> <p>here s some text</p> <p>link to the <a href=" </body> </html>

36 <html > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled 1</title> <script language="javascript" type="text/javascript"> function recuperalink() var lnk = document.getelementbyid("linkw3"); alert(lnk.href); </script> </head> <body onload="recuperalink();"> <p>here s some text</p> <p>here s some text</p> <p>link to the <a id="linkw3" href=" </body> </html>

37 <script language="javascript" type="text/javascript"> function cambiafondo() var celdas = document.getelementsbytagname("td"); for (var i=0;i<celdas.length;i++) celdas[i].style.background = "#C7C7C7"; </script> </head> <body> <table border="1"> <tr><td>izquierda</td><td>derecha</td></tr> <tr><td>izquierda</td><td>derecha</td></tr> <tr><td>izquierda</td><td>derecha</td></tr> </table> <p><a href="#" onclick="return cambiafondo();">cambia el fondo de las celdas</a></p> </body>

38 <title>untitled 1</title> <script language="javascript" type="text/javascript"> function muestraatributos() var e = document.getelementbyid("link"); for (var elemento in e) document.getelementbyid("resultado").innerhtml += "<br>" + elemento + ": " + e.getattribute(elemento); </script> </head> <body> <p><a id="link" href="#" onclick="return muestraatributos();">muestra los atributos</a></p> <p id="resultado"> </p> </body>

39 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled 1</title> <script language="javascript" type="text/javascript"> function muestraatributos() var e = document.getelementbyid("link"); e.setattribute("innerhtml","fecha y hora:" + Date()); e.setattribute("href"," return false; </script> </head> <body> <p><a id="link" href="#" onclick="return muestraatributos();">muestra los atributos</a></p> </body>

40

41 function createcookie(name,value,days) if (days) var date = new Date(); date.settime(date.gettime()+(days*24*60*60*1000)); var expires = "; expires="+date.togmtstring(); else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; function readcookie(name) var nameeq = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) var c = ca[i]; while (c.charat(0)==' ') c = c.substring(1,c.length); if (c.indexof(nameeq) == 0) return c.substring(nameeq.length,c.length); return null; function erasecookie(name) createcookie(name,"",-1);