Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

Exercici - HTML - 16 Novembre 2009

Exercici 1
De les etiquetes que hem fet fins ara digues a quines apareixen els següents atributs, els valors que poden prendre i la seva utilitat en cadascuna d'elles.

  • ALIGN
  • BORDER
  • TARGET
  • WIDTH
  • HEIGHT
  • CELLPADDING
  • CELLSPACING
  • BACKGROUND
  • BGCOLOR
  • SRC
  • NAME
  • TEXT
  • LINK
  • VALIGN
  • VLINK
  • ALINK
  • COLOR
  • SIZE
  • BODY
    FACE
  • START
  • TYPE
  • FAMILY
  • LEFTMARGIN
  • BOTTOMMARGIN
  • RIGHTMARGIN
  • TOPMARGIN
  • MARGINWIDTH
  • MARGINHEIGHT
Exercici 2 Digues si són certes o falses les següents afirmacions:
  • La etiqueta IFRAME va per parelles.
  • Entre etiquetes TITLE no es poden posar altres etiquetes.
Exercici 3 Fes la següent pàgina amb les següents imatges:




















Versió en vermell de les opcions del menú per si voleu assenyalar a quina pàgina esteu.



Javascript - 12 nov 2009

Reptes:

  1. Averigua si el DOM d'un document els diferents navegadors el veuen igual. Quines són les diferències. Quina arrel fan servir cadascú.
  2. Averigua com detectar el navegador i fes un script senzill que escrigui un alert dient amb quin navegador s'està veient la pàgina.
  3. Obté l'amplada i alçada visible (dia anterior) del forat del navegador en els diferents navegadors.
  4. Fes un Script que escrigui el contingut d'un H1 a un alert. Després que l'escrigui a una DIV.

Javascript - 11 nov 2009

Busca amb Javascript la manera d'obtenir la amplada i alçada visibles d'una pàgina, és a dir el que surt al forat del navegador, la finestra del navegador.



Mireu l'enllaç aquest: Clica.

Busca document.body.clientHeight i window.innerWidth

Solució - Javascript - Bucles, matrius i DOM

Analitzeu com està fet.



<HTML>
<HEAD>
<TITLE>Exemple d'una matriu</TITLE>

<SCRIPT>

dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado",

"Domingo", "digestiu"];
//Defineixo una matriu global(sense posar var per tant).


longitud=dias.length;
//longitud em defineix el número d'elements que té la matriu

function enumerar() {

for (i=0; i<longitud; i++) {
//Faig un bucle que recorre tots els elements de la matriu

var elemento=document.createElement('p');
//Es para definir "elemento" como un elemento de tipo párrafo


var texto=document.createTextNode(dias[i]);
//Es para definir un elemento de texto.


elemento.appendChild(texto);
//Al párrafo "elemento" le pone como hijo a "texto"


//var obj=document.getElementById('parrafos');
//Es para indiciar dónde va a ir creando los objetos "elemento", o sea los

párrafos


//obj.appendChild(elemento);
//A "obj", que es la div que tiene id="parrafos", le va a poner como elemento

hijo a elemento



document.getElementById('parrafos').appendChild(elemento);



}


}

</SCRIPT>


<style>
body {
background-color:#336699;
}
</style>



</HEAD>
<BODY onclick="enumerar();">

Aquí sota hi aniran els dies de la setmana: <br>

<div id="parrafos"> </div>



</BODY>
</HTML>

Exercici - Javascript - CURS TARDA - 10 NOV 2009

  1. Acabar el d'ahir del bucle FOR i la matriu.
  2. Mirar aquest enllaç(clica aquí) per comprendre el DOM i diferents mètodes per treballar amb els nodes. Analitzeu el codi font. I fes els teus exemples.
  3. Fes una matriu amb colors hexadecimals i canvia el color al BODY a base de clicar en diferents TD d'una petita taula. (Ideal per webs de fotògrafs).
  4. Busca la manera de retardar una acció(setTimeout) i fes un exemple.
  5. Busca la manera d'obtenir amb javascript l'amplada i alçada disponible dintre del forat del navegador.
  6. Busca la manera de canviar dinàmicament amb javascript una fulla d'estils.

Solució - Exercici 8 - 2009-NOV-04


<html>
<head>
<title>Link amb javascript</title>
<script>

function canvia(url) {
document.location.href=url;
}

</script>
</head>
<body>

<strong onclick="canvia('http://google.com');">Anar a

google</strong>


</body>
</html>

Solució Exercici 6 - 2009-NOV-04

<html>
<head>
<title>Escriure un text dins d'un paràgraf</title>
<script>
//Mode 1 - Fent servir innerText o innerHTML
function escriure(p) {
document.getElementById(p).innerHTML ="Hola ¿Cómo estás?";
}

//Mode 2 - Fent servir el DOM
function escriure2(p) {
var texto="Patates fregides."
document.getElementById(p).firstChild.nodeValue=texto;
}

//Mireu l'adreça:

http://www.alfonsojimenez.com/computers/no-uses-innerhtml-usa-do

m



</script>


</head>
<body>
<a href="#" onclick="escriure('parag');">Clica i veuràs.</a> |
<a href="#" onclick="escriure2('parag');">Una altra opció</a>

<p id="parag"> </p>

</body>
</html>

Solució de l'exercici 5 del dia 2009-Nov-04

Recordeu que quan vam sustituir els caràcters amb accent per caràcters especials amb la funció replace només se sustituïa la primera vegada que apareixia.

Doncs bé, tenim la solució: Hem de fer servir les anomenades "expressions regulars". Mira't els següents enllaços que en parlen:

  1. Enllaç 1
  2. Enllaç 2 (Aquí teniu una llista)

Aplica't al que voliem fer tenim un exemple concret. Clica aquí Mireu com ho solucionen en aquest enllaç i acabeu de completar l'exercici d'ahir.

Según eso con el ejemplo que teníamos habría que hacer:

cadena.replace(/á/g, "&aacute;");


Així la solució de l'exercici 5 d'ahir és:


<HTML>
<HEAD>
<TITLE>Reemplazar un trozo de una cadena por otra cosa</TITLE>
<script>

function cambiar() {

var cadena=document.masa.cosa.value;

//minúsculas acentuadas agudas
cadena = cadena.replace(/á/g,"á");

cadena = cadena.replace(/é/g,"é");

cadena = cadena.replace(/í/g,"í");

cadena = cadena.replace(/ó/g,"ó");

cadena = cadena.replace(/ú/g,"ú");


//minúsculas acentuadas graves
cadena = cadena.replace(/à/g,"à");

cadena = cadena.replace(/è/g,"è");

cadena = cadena.replace(/ò/g,"ò");


//mayúsculas acentuadas agudas
cadena = cadena.replace(/Á/g,"Á");

cadena = cadena.replace(/É/g,"É");

cadena = cadena.replace(/Í/g,"Í");

cadena = cadena.replace(/Ó/g,"Ó");

cadena = cadena.replace(/Ú/g,"Ú");


//mayúsculas acentuadas graves
cadena = cadena.replace(/À/g,"À");

cadena = cadena.replace(/È/g,"È");

cadena = cadena.replace(/Ò/g,"Ò");


//ç y Ç
cadena = cadena.replace(/ç/g,"ç");
cadena = cadena.replace(/Ç/g,"Ç");

//ñ y Ñ
cadena = cadena.replace(/n/g,"ñ");
cadena = cadena.replace(/N/g,"Ñ");


// punt volat
cadena = cadena.replace(/·/g,"·");


document.masa.cosa.value=cadena;


}




</script>
</HEAD>
<BODY>

<form name="masa">
<textarea cols="25" rows="10" name="cosa"></textarea>
<input type="button" onclick="cambiar();" value="corrige" />
</form>



</BODY>
</HTML>



Puedes completar los carácteres especiales que tú consideres que se puedan añadir.

Exercicis - Javascript - 5 Novembre

Exercici 1
Analitza el codi línia per línia dels següents exemples.

Exemple 1


<html>
<head>
<title> Color de fondo </title>
</head>

<body bgcolor="#FFFFFF">
<SCRIPT language="JavaScript">
<!--

function get_color(color_num)
{
var now_color=color_num;

var my_color= new Array(5)
my_color[0]="lime";
my_color[1]="orange";
my_color[2]="lightblue";
my_color[3]="pink";
my_color[4]="ghostwhite";

document.bgColor=my_color[now_color];
}
//-->
</SCRIPT>
<P>
<B>Cambiar el color de fondo!</B>
<P>
<FORM>
<INPUT type="button" value="Lima" onClick="get_color(0)">
<INPUT type="button" value="Naranja" onClick="get_color(1)">
<INPUT type="button" value="Celeste" onClick="get_color(2)">
<INPUT type="button" value="Rosa" onClick="get_color(3)">
<INPUT type="button" value="Blanco" onClick="get_color(4)">
</FORM>

</body>
</html>



Exemple 2

<HTML>
<HEAD>
<TITLE>imatge de sustitució</TITLE>
<script language="javascript" type="text/javascript">


function canviar(ident,url) {

identificacio=ident;

antiga=document.getElementById(ident).src;

//les defineixo globalment per utilitzar-les
//per una altra funció externa,
//la que es diu restituir();


document.getElementById(ident).src=url;
//A l'atribut src de la img li donc
//com a valor el que valgui la url
//que li hem passat
}


function tornar() {

document.getElementById(identificacio).src=antiga;

}

</script>

</HEAD>
<BODY>
<img src="flor1.jpg" id="imatge1"

onmouseover="canviar('imatge1','flor2.jpg');"
onmouseout="tornar();">

<img src="flor2.jpg" id="imatge2"

onmouseover="canviar('imatge2','flor1.jpg');"
onmouseout="tornar();" hspace="10">

</BODY>
</HTML>





Exercici 2

Basant-te en els exemples anteriors fes un matriu en la que definiu a cada posició la url d'una imatge diferent(fes-ho amb 5 imatges). A continuació posa una imatge, a la que li posaràs com a atribut id="imatge", i després fes 5 enllaços de tal manera que al passar per sobre canvïi una imatge o altra de les que hi ha a la matriu.


[Os explicaré esto para cambiar dinámicamente el contenido(el texto y más) de cualquier elemento: clica aquí para ver un adelanto].


CSS combinado Javascript

Solució - Exercici 7 del 2009-NOV-05

Objectiu:
Fer que una imatge es sustitueixi per una altra. Analitzeu el codi:



<HTML>
<HEAD>
<TITLE>imatge de sustitució</TITLE>
<script language="javascript" type="text/javascript">


function canviar(ident,url) {

identificacio=ident;

antiga=document.getElementById(ident).src;

//les defineixo globalment per utilitzar-les
//per una altra funció externa,
//la que es diu restituir();


document.getElementById(ident).src=url;
//A l'atribut src de la img li donc
//com a valor el que valgui la url
//que li hem passat
}


function tornar() {

document.getElementById(identificacio).src=antiga;

}

</script>

</HEAD>
<BODY>
<img src="flor1.jpg" id="imatge1"

onmouseover="canviar('imatge1','flor2.jpg');"
onmouseout="tornar();">

<img src="flor2.jpg" id="imatge2"

onmouseover="canviar('imatge2','flor1.jpg');"
onmouseout="tornar();" hspace="10">

</BODY>
</HTML>

Exercicis - HTML i Javascript - 4 de Novembre 2009

Exercici 0
Digues si són certes o falses les següents frases:

  1. Javascript és un llenguatge de programació orientat a objectes que actua en el costat client(POO).
  2. Les funcions de javascript es declaren entre les etiquetes script al body.
  3. Amb javascript podem definir interactivitat en el costat client.
  4. a="5"; és una variable numèrica.
  5. Un element html a javascript és un objecte.
Exercici 1
Respón a les següents preguntes:
  1. Com es defineix una variable.
  2. Tipus de variables que hem fet.
  3. Com es defineix una funció. A on?
  4. DOM -> Com "enrutem" al valor d'un camp de text d'un formulari.
  5. Com creem una variable amb javascript.
  6. Com asignem un valor a una variable amb javascript.
  7. Com cridem a una funció.
  8. Què és un event de ratolí.
  9. Fes una llista d'events de ratolí.
  10. Com fer que aparegui el focus del ratolí a un camp de text a un formulari quan s'ha carregat la pàgina.
  11. Què és una condicional.
  12. Fes una llista de tot el que saps fins ara sobre javascript.
  13. Cerca tipus de variables.
  14. Què és un array.
  15. Defineix AJAX i els seus usos.
Exercici 2 (HTML)
Fes una pàgina que serveixi per enviar una cerca al google. A veure si es pot. Feu servir el mètode get.


Exercici 3

Fent comentaris de Javascript( // ) o de HTML (<!-- /-->) explica per a què serveixen les coses de javascript que vegis als codis següents.


Exemple 1


<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

document.formulina.clonico.value=texto;

}

</script>
</HEAD>

<BODY onload="document.formulina.campillo.focus();">

<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="clonar" onclick="mensaje();" >

<INPUT TYPE="text" name="clonico">

</FORM>

</BODY>
</HTML>



Exemple 2


<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

alert(texto);
}

</script>
</HEAD>

<BODY>
<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="mensaje" onclick="mensaje();" >

</FORM>

</BODY>
</HTML>





Exercici 4
Basant-te en el exemple 2 de l'exercici anterior crea un formulari amb dos camps i dos botons que ens serveixi per convertir un valor en euros a pesetes i de pesetes a euros amb dos botons.

Exercici 5
Busca a internet alguna funció que serveixi per reemplaçar un caràcter que hi hagi a una cadena per un altre. I per aplicar aquest coneixement crea un formulari amb un textarea i un botó que cridi a una funció que sustitueixi les lletres amb accents i que se surtin de ASCII pels seus caràcters especials.

Exercici 6
Busca a internet alguna manera, amb javascript, d'escriure text dins d'un paràgraf.

Exercici 7
Busca a internet alguna manera, amb javascript, de sustituir una imatge per un altra al passar per sobre amb el ratolí.

Exercici 8
Busca a internet alguna manera, amb javascript, de fer un enllaç.

Exercici 9
Busca a internet o a librosweb alguna manera, amb javascript, d'obtenir la resolució de la pantalla de l'ordinador de l'usuari.

Exercici 10
Busca a internet o a librosweb alguna manera, amb javascript, de limitar el número de caràcters escrits a un camp de text.

Solució d'exercici de dia anterior

Solució de l'exercici del dia anterior:
L'exercici consistia en fer que un missatge que escribíssim a un camp de formulari saltés. És la excusa per posar en pràctica la definició de funcions i variables, posem events de ratolí i enrutem per l'arbre DOM del document.



<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

alert(texto);
}

</script>
</HEAD>

<BODY>
<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="mensaje" onclick="mensaje();" >

</FORM>

</BODY>
</HTML>

Exercicis - LIGHTBOX - 29-OCtubre

Fent servir el lightbox i les imatges d'acontinuació fes una galeria.
http://www.huddletogether.com/projects/lightbox2/