Tecnologías Web
Facultad de Ingeniería
Universidad Autónoma de San Luis Potosí
MIC Edgar Alfonso Pérez García
[email protected] http://evirtual.uaslp.mx/Ingenieria/222502/
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 {
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
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
Data Types
◦
Numbers
4
51.50
-14
0xd
◦
Strings
◦
Booleans
◦
Null
◦
Undefined
◦
Objects
Numbers
◦
4
◦
51.50
◦
-14
◦
0xd
Numeric Functions
◦
Testing isNaN() function
Javascript:alert(isNaN(“4”));
Javascript:alert(isNaN(4));
Javascript:alert(isNaN(“4”));
The Math Object
◦ Javascript:alert(Math.PI);
◦ Complete list of properties
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
Strings
◦ “Hola” ◦ “B” ◦ „Hola‟ ◦ Escaping Quotes \” \b Backspace \t Tab \n Newline \v Vertical tab \f Form feed \r Carriage return \\ Literal backslash◦
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
Null
◦
Special data
◦
Means nothing
◦
var myVariable=“”;
//myVariable is empty, not null
Objects
◦
Like numerators
var dvdCatalog = {
“identifier” : “1”,
“name” : “Coho Vineyard” };
//to access
Arrays
var star = new Array(); star[0] = “Polaris“; star[1] = “Deneb”; star[2] = “Vega”; star[3] = “Altair”;
var star = [“Polaris”, “Deneb”, “Vega”, “Altair”];
<script type=“text/javascript”>
Var aNewVariable = “I‟m Global”; function doSome(incomingBits) { alert(aNewVariable); alert(incomingBit); } doSome(“Some Argument”); </script>
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>");
}
}
If Statement
◦
If (some condition)
{
// do something
}
◦
If (CostoVuelo<350)
{
comprarVuelo();
}
◦
If (parametro != “alta”)
{
//no darse de alta
}
<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");
}
if ((inputNum>99) || (inputNum <51))
{
alert(“El Número, “ + inputNum+ “ no está
entre 50 y 100”)
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");
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"); }
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:
var count = 0;
while (count<10)
{
document.write ("<p> párrafo " + count + "</p>");
count++;
var count=0;
do
{
document.write ("<p> párrafo " + count + "</p>");
count++;
}
var arreglo=["Vega", "Deneb", "Altair"];
for (var count=0; count<arreglo.length; count++)
{
document.write("<p>" + arreglo[count] + "</p>");
}
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>");
<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>
<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>
<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>
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
<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>");
<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()">
<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()">
<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>
<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="http://www.w3.com">W3</a></p> </body>
<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="http://www.w3.com">W3</a></p> </body>
<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>
<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>
<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","http://www.google.com.mx/");
return false;
}
</script>
</head>
<body>
<p><a id="link" href="#" onclick="return muestraAtributos();">muestra
los atributos</a></p>
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);
