proiect didactic html

5/13/2018 Proiect Didactic HTML - slidepdf.com

http://slidepdf.com/reader/full/proiect-didactic-html 1/4

Proiect didactic – Proprietăţi ale elementelor „document”, „title” şi „body” în JavaScript

Data: 7.XII.2011

Obiectul: CDS – Pagini Web

Subiectul: Proprietăţi ale elementelor „document”, „title” şi „body” în JavaScript

Tipul lecţiei: însuşire de noi cunoştinţe

Scopul: scrierea paginilor Web cu ajutorul limbajului HTML si a interacţiunii acestuia cu

limbajul JavaScript

Nr. ore: 1

Strategii didactice:

- Metode: expunerea, comunicarea, problematizarea, exerciţiul la tablă, exerciţiul pe

calculator

- Mijloace: calculator, materiale didactice HTML cu JavaScript, programe şcolare

Desfăşurarea lecţiei:

- secvenţă introductivă (moment organizatoric): 2-3 min

- verificarea obiectivelor lecţiei precedente:I1 – atributele elementului BODY în HTML

I2 – afişarea elementelor INPUT de tip TEXT şi BUTTON în HTML

- transmiterea noilor cunoştinţe:

O1 – Proprietăţile TITLE şi BODY ale elementului DOCUMENT din JavaScriptO2 – Proprietăţile bgColor şi text ale elementului BODY în JavaScriptO3 – Realizarea unei aplicaţii.

Realizarea lecţiei:Printre proprietăţile elementului document din JavaScript se numără title şi body. Pentru

a accesa aceste proprietăţi, folosim document.title, respectiv document.body.Pentru modificarea fundalului documentului, folosim document.body.bgColor , iar pentru

modificarea fontului din document, folosim document.body.text .Funcţiile close() şi open() realizează închiderea paginii curente, respectiv deschiderea

unei ferestre.

Aplicaţie: Să se realizeze următoarea aplicaţie: o pagină cu 6 elemente input de tip button, un

element input de tip text, care să arate astfel:Apăsarea butonului Schimbă titlul paginii realizează modificarea titlului paginii noastre.



Din căsuţa text Citeşte codul culorii, se citeşte un cod de culoare. Butonul Colorează fundal colorează background-ul paginii, în funcţie de culoarea dată de utilizator. Textul din

pagină se modifică la apăsarea butonului Colorează textul paginii.

Butonul Setări iniţiale permite revenirea în pagină la setările iniţiale legate de aspectul

iniţial al paginii. Butonul www.mail.yahoo.com deschide fereastra cu aclaţi nume, permitând

utilizatorului să intre în căsuţa sa poştală.

Butonul Închide fereastra permite ieşirea din aplicaţie, cu posibilitatea de revenire la

aplicaţie.

http://www.mail.yahoo.com/

http://www.mail.yahoo.com/



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 inJavaScript</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()">



<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 cunoştinţ elor : 3 min

Opera ţionalizarea cuno ş tinţelor (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

http://www.howtocreate.co.uk/

http://www.cs.brown.edu/.../javascript/javascript-t

http://www.howtocreate.co.uk/

http://www.cs.brown.edu/.../javascript/javascript-t

proiect didactic html

Documents