Sunteți pe pagina 1din 4

Proiect didactic Proprieti ale elementelor document, title i body n JavaScript Data: 7.XII.

.2011 Obiectul: CDS Pagini Web Subiectul: Proprieti ale elementelor document, title i body n JavaScript Tipul leciei: nsuire de noi cunotine Scopul: scrierea paginilor Web cu ajutorul limbajului HTML si a interaciunii acestuia cu
limbajul JavaScript Nr. ore: 1

Strategii didactice: - Metode: expunerea, comunicarea, problematizarea, exerciiul la tabl, exerciiul pe Desfurarea leciei:
calculator Mijloace: calculator, materiale didactice HTML cu JavaScript, programe colare

- secven introductiv (moment organizatoric): 2-3 min - verificarea obiectivelor leciei precedente: I1 atributele elementului BODY n HTML I2 afiarea elementelor INPUT de tip TEXT i BUTTON n HTML - transmiterea noilor cunotine: O1 Proprietile TITLE i BODY ale elementului DOCUMENT din JavaScript O2 Proprietile bgColor i text ale elementului BODY n JavaScript O3 Realizarea unei aplicaii.

Realizarea leciei:
Printre proprietile elementului document din JavaScript se numr title i body. Pentru a accesa aceste proprieti, folosim document.title, respectiv document.body. Pentru modificarea fundalului documentului, folosim document.body.bgColor, iar pentru modificarea fontului din document, folosim document.body.text. Funciile close() i open() realizeaz nchiderea paginii curente, respectiv deschiderea unei ferestre. Aplicaie: S se realizeze urmtoarea aplicaie: o pagin cu 6 elemente input de tip button, un element input de tip text, care s arate astfel: Apsarea butonului Schimb titlul paginii realizeaz modificarea titlului paginii noastre.

Din csua text Citete codul culorii, se citete un cod de culoare. Butonul Coloreaz fundal coloreaz background-ul paginii, n funcie de culoarea dat de utilizator. Textul din pagin se modific la apsarea butonului Coloreaz textul paginii.

Butonul Setri iniiale permite revenirea n pagin la setrile iniiale legate de aspectul iniial al paginii. Butonul www.mail.yahoo.com deschide fereastra cu aclai nume, permitnd utilizatorului s intre n csua sa potal.

Butonul nchide fereastra permite ieirea din aplicaie, cu posibilitatea de revenire la aplicaie.

Codul surs al paginii: <html> <head> <title>Proprietati ale obiectelor JavaScript </title> </head> <body> <script language="JavaScript"> function titlu() { document.title="Jocuri de culori"; } function fundal() { document.body.bgColor=parseInt(text1.value); } function ttt() { document.body.text="blue"; } function initial() { document.title="Proprietati ale obiectelor JavaScript"; document.body.bgColor="white"; document.body.text="black"; } function fer_mail() { open("http://www.mail.yahoo.com"); } function inchide() { close(); } </script> <P><font size=10 type="Arrial"><b><center> Exemple de metode JavaScript</center></b></font></p> <input type="button" name="buton1" value="Schimba titlul paginii" onclick="titlu()"> <br><br> Citeste codul culorii: <input type="text" name="text1" value="444444"> <br> <input type="button" name="buton2" value="Coloreaza fundal" onclick="fundal()"> <br><br> <input type="button" name="buton3" value="Coloreaza textul paginii" onclick="ttt()"> in

<br><br> <input type="button" name="buton4" value="Setari initiale!" onclick="initial()"> <br><br> <input type="button" name="buton5" value="www.mail.yahoo.com" onclick="fer_mail()"> <br><br> <input type="button" name="buton6" value="Inchide fereastra" onclick="inchide()"> <br><br> </body> </html>

Fixarea cunotinelor: 3 min Operaionalizarea cunotinelor (asigurarea conexiunii inverse): 5 min Evaluarea: 5 min. Bibliografie:
1. www.howtocreate.co.uk 2. www.tutorialehtml.com/htmlt/script.php 3. www.cs.brown.edu/.../javascript/javascript-t

S-ar putea să vă placă și