KluBro Forum Community™

Trimis: 31/10/2008 19:47 Titlul subiectului: ProgramE

Programare C & C++, .NET, PHP & MySQL, Delphi, Java, Borland, Python etc. Discutii, resurse, tutoriale
_________________
devl1

Trimis: 09/12/2008 18:19 Titlul subiectului:

JavaScript este un limbaj de scripting dezvoltat la origine de Netscape, permitand scrierea de secvente de program care se executa la aparitia unui eveniment utilizator. Vom prezenta in continuare fundamentele JavaScript si, mult mai important, modalitati de valorificare si integrare in propriile pagini web a tehnologiei JavaScript.

JavaScript nu este Java!

Trebuie sa facem distinctie intre limbajul de programare Java si limbajul de scripting JavaScript. Spre deosebire de JavaScript, Java este un limbaj de progrmare considerat "de indice inalt" (foarte aproapiat de gandirea utilizatorului si nu de arhitectura calculatorului) care permite scrierea de aplicatii de aproximativ orice tip si grad de complexitate. Consideram ca pentru moment nu trebuie sa enumeram diferentele, trebuie doar sa retinem faptul ca JavaScript nu este Java. Pentru mai numeroase informatii privind limbajele Java si JavaScript va recomandam lucrarea "Java, JavaScript - Profesional" oferita de site-ul nostru in cadrul pachetului de carti electronice generic intitulat "Internetul pentru Afaceri".

Rularea programelor JavaScript

De ce avem trebuință pentru a rula scripturi concepute in limbajul JavaScript? Avem in debutantul rand nevoie de un browser care suporta JavaScript - de exemplu Netscape Navigator (incepand cu versiunea 2.0) sau Microsoft Internet Explorer (Ms. I.E. - incepand cu versiunea 3.0). De vreme ce aceste browsere sunt extrem de raspandite, multi utilizatori (peste 90%) au posibilitatea de a rula fara probleme programele JavaScript. Pentru a utiliza in paginile proprii evenimente tratabile prin JavaScript avem bineinteles necesitate si de cunosterea - cel putin la nivel mediu - atat a limbajului HTML, cat si a limbajului de scripting JavaScript.

Inserarea JavaScript in documentele HTML

Codul JavaScript poate fi introdus direct in pagina HTML. Pentru a vedea cum functioneaza JavaScript, haideti sa ne aruncam privirile peste un exemplu simplu:

<html><head><title>Pagina HTML cu JavaScript</title></head>

<body>
<br><p>
Acesta este un document HTML continand JavaScript.
</p>

<script language="JavaScript">
document.write("Acesta este JavaScript!")
</script>

<br><p>
Din nou text si cod HTML.
<p></body>

</html>

La întâia vedere acesta bucata de cod arata ca un fisier HTML normal. Singura noutate o constituie blocul <script>...</script>:

<script language="JavaScript">
document.write("Acesta este JavaScript!")
</script>

Acesta este JavaScript-ul nostru! Pentru a observa modul de functionare a scriptului vom salva codul HTML de mai sus ca si fisier normal HTML lansand pagina HTML astfel salvata in browserul nostru cu suport JavaScript. Daca browserul suporta JavaScript vom vedea 3 linii:

Asta este un document HTML continand JavaScript.
Acesta este JavaScript!
Din nou text si cod HTML.

Este adevarat ca acest script grozav de simplist nu este unul folositor - acelasi rezultat il puteam obtine uzand de cod HTML mult mai simplu. Am dorit numai sa exemplificam utilizarea tagului <script>. Tot ce este intre eticheta <script> si eticheta </script> este interpretat drept cod JavaScript. Putem observa folosirea document.write() - una dintre cele mai importante comenzi in programarea JavaScript. "Document.write()" este o rutina JavaScript folosita pentru a scrie text, imagini, etc... intr-un document (in acest caz in documentul HTML curent). Asadar, micul nostru program JavaScript scrie textul "Acesta este JavaScript!" in documentul HTML in care a fost inserat.

Trimis: 09/12/2008 18:20 Titlul subiectului:

JavaScript - Exemple

Evenimente

Evenimentele sunt extraordinar de importante in programarea JavaScript. Evenimentele sunt de cele mai numeroase ori declansate de actiuni ale utilizatorului. Daca utilizatorul apasa un buton, un eveniment de tip "Click" are loc. Daca mouse-ul este deasupra unei legaturi, atunci un eveniment de tip "MouseOver" are loc.

Dorim ca programul JavaScript sa reactioneze la unele evenimente. Aceasta se poate realiza cu ajutorul managerilor de evenimente sau gestionarilor de evenimente - "event-handlers". Un buton poate creea o fereastra atunci cand este apasat. Aceasta inseamna ca fereastra apare ca o reactie la evenimentul "Click". Managerul de evenimente (event-handler-ul) pe care trebuie sa-l utilizam este numit "onClick". Acesta spune brwoser-ului computerului utilizator ce sa faca atunci cand evenimentul are loc. Urmatorul cod este un exemplu modest de "event-handler onClick":

<form>
<input type="button" value="Click me" onClick="alert('Yo')">
</form>

Exista cateva lucruri care trebuie analizate in codul JavaScript de mai sus

In primul rand putem observa ca am creeat un buton cu susținerea unui formular (aceasta este o problema de HTML asa ca nu va fi analizata aici). Noua bucata de cod JavaScript este onClick="alert('Yo')" in interiorul tagului <input>. Asa cum am spus deja, codul in cauza defineste ce se intampla cand butonul este apasat. Atunci cand un eveniment "Click" are loc, computerul executa alert('Yo'). Acesta este codul JavaScript (se observa ca nu utilizam tagul <script> in acest caz). "Alert()" ne îngăduie sa cream ferestre de avertizare (de tip popup windows). In interiorul parantezelor trebuie sa specificam un sir. In cazul nostru sirul este 'Yo'. Acesta este un text ce va fi afisat in fereastra de avertizare. Deci scriptul dat ca exemplu creeaza o fereastra cu continutul 'Yo' atunci cand utilizatorul apasa butonul.

Un lucru poate ne poate induce in eroare. In comanda document.write() am folosit ghilimele duble " " dar in combinatie cu alert() am întrebuințat ghilimele simple ' '. De ce? In principiu pot fi cele două utilizate. Dar in ultimul exemplu am scris onClick="alert('Yo')" puteti vedea ca am folosit si ghilimele simple si duble. Daca am fi scris onClick="alert("Yo")" interpretorul ar fi fost indus in confuzie pentru ca nu este clar care parte apartine de "onClick event-handler" si care nu. Asa ca trebuie sa alternam ghilimelele. Nu conteaza ordinea in care folosim ghilimelele - mai intai cele duble si apoi cele simple sau viceversa. Putem scrie fara nici o problema onClick='alert("Yo")'.

Functii

Vom utiliza functii in cea mai mare parte a programelor noastre JavaScript. De aceea vom explora subiectul inca din aceasta sectiune. Functiile sunt o metoda profesionala de a lega mai multe comenzi impreuna. Sa scriem un script care furnizeaza un anumit text de trei ori consecutiv:

<script language="JavaScript">

</script>

Acest script, introdus intr-un document HTML, va scrie de trei ori:

Bine ai venit pe pagina mea!
Acesta este JavaScript!

Analizand codul sursa observam ca scriind de trei ori comanda ajungem la rezultatul scontat. Dar este eficient? Nu, deci haideti sa rezolvam problema mai simplu. Ce spuneti de codul urmator care face acelasi lucru:

<html><head></head>
<body></body>
<script language="JavaScript">

</script>
<body></body>
</html>

In scriptul din sectiunea BODY a documentului HTML de mai sus am definit si apelat o functie. Definirea s-a realizazt cu urmatoarele linii de cod:

function myFunction() {
document.write("Bine ai venit pe pagina mea!<br>");
document.write("Acesta este javascript!<br>");
}

Comenzile din interiorul {} tin de implementarea functiei myFunction(). Aceasta inseamna ca ambele comenzi "document.write()" vor fi executate prin apelarea functiei. In exemplul nostru avem trei apelari ale functiei. Putem observa ca am scris "myFunction()" de trei ori repede sub definitia functiei. Acestea sunt trei apelari ale functiei si au rolul de a face ca functia sa fie executata de trei ori. Rezultatul executiei este:

Bine ai venit pe pagina mea!
Acesta este JavaScript!
Bine ai venit pe pagina mea!
Acesta este JavaScript!
Bine ai venit pe pagina mea!
Acesta este JavaScript!

Trimis: 09/12/2008 18:25 Titlul subiectului:

Proiectare Site si Web Design - JavaScript - Ferestre Cadru

O intrebare frecventa este cum interactioneaza frame-urile (cadrele) si JavaScript. Mai intai trebuie sa explicam ce sunt frame-urile si la ce pot fi folosite. Fereastra browserului poate fi impartita in mai numeroase frame-uri (cadre, ferestre). Aceasta inseamna ca un frame reprezinta o parte din suprafata ferestrei browserului. Fiecare cadru (frame) incarca in el un document (de cele mai multe ori de tip HTML). De exemplu putem creea doua cadre astfel: in primul frame putem incarca pagina de deschidere a site-ului Netscape iar in cel de-al doilea pagina principala a site-ului Microsoft.

Desi crearea de frame-uri este o problema HTML, dorim sa descriem in cele ce urmeaza cateva lucruri de baza. Pentru crearea de cadre se folosesc doua taguri: <frameset> si <frame>. O pagina HTML care creaza doua frame-uri poate arata astfel:

<html>
<frameset rows="50%,50%">
<frame src="page1.htm" name="frame1">
<frame src="page2.htm" name="frame2">
</frameset>
</html>

Aceasta secventa de cod produce doua frame-uri. Remarcam utilizarea proprietatilor "rows" in tagul FRAMESET. Aceasta inseamna ca cele doua cadre create cu tagul FRAME se afla unul deasupra celuilalt. Frame-ul de sus incarca pagina HTML "page1.htm" iar frame-ul de jos prezinta documentul "page2.htm".

Daca dorim sa avem coloane in loc de randuri trebuie sa scriem "cols" in loc de "rows" inauntrul tagului FRAMESET. Porțiunea "50%,50%" specifica in procente ecran cat de mari sunt cele doua ferestre. Putem de întocmai sa scriem "50%,*" daca nu dorim sa calculam cat de larga trebuie sa fie cea de-a doua fereastra pentru a ajunge la 100% din spatiul ramas. Putem de asemenea specifica mărimea in pixeli omitand simbolul %.

Fiecare frame are un nume unic specificat cu susținerea atributului "name" din eticheta <frame>. Acest atribut ne va ajuta sa accesam frame-urile cu ajutorul JavaScript.

Iata un exemplu:

<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
<frameset rows="33%,33%,33%">
<frame src="cell.htm">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
</frameset>

Putem fixa mărimile marginii prin intermediul proprietatii (atributului) "border" din eticheta <frameset>. "Border=0" inseamna ca nu vom avea margine la cadru (atributul nu functioneaza cu Netscape 2.x).
[url=http://www.99poze.ro/p/e5a7d8058add76bc9f7ac73643303e95.jpg] ProgramE

[/url]
In varful iererhiei este fereastra browser. Aceasta fereastra este impartita in doua frame-uri. Fereastra mare (implicita) a browserului este "parinte" in aceasta ierarhie iar cele doua frame-uri sunt "copiii". Putem sa dam celor doua fram-euri numele "frame1" si "frame2". Cu ajutorul acestor nume putem altera informatii intre cele doua frame-uri.

Trebuie sa analizam trei cazuri:

1. "parent window/frame" acceseaza "child frame"
2. "child frame" acceseaza "parent window/frame"
3. "child frame" acceseaza un alt "child frame"

Din punct de vedere al ferestrei parinte cele doua frame-uri copil se numesc "frame1" si "frame2". Putem vedea in imaginea de mai sus ca exista o conexiune directa intre fereastra parinte si fiecare frame copil in parte. Deci daca avem un script in fereastra parinte - in pagina care creaza frame-urile - si dorim sa accesam prin intermediul acestuia frame-urile (continutul unuia dintre ele) pentru a scrie date, trebuie doar sa folosim numele frame-ului. De exemplu putem scrie:

frame2.document.write("A message from the parent window.");

Iata si o ilustrare a exemplului:
[url=http://www.99poze.ro/p/45cc292bcc5b1abd9a7a2d70205ede8e.jpg] ProgramE

[/url]
Cateodata putem dori sa accesam fereastra parinte dintr-un frame pentru a rescrie (spre exemplu) continutul acesteia, indepartand structura de frame-uri la reaccesarea paginii parinte pornind dintr-un frame copil. Asadar acest formulă poate fi util atunci cand dorim sa eliminam pe cat posibil frame-urile la accesari repetate. Eliminarea structurii de cadre inseamna doar incarcarea unei pagini noi in locul paginii (ferestrei) parinte care a creeat frame-urile. Putem accesa fereastra parinte ("parent frame") din interiorul ferestrelor copil cu ajutorul cuvantului predefinit "parent". Pentru a incarca un nou document trebuie sa furnizam un nou URL parametrului "location.href". Pentru că dorim sa eliminam frame-urile trebuie sa utilizam obiectul locatie al ferestrei parinte. Vom avea o locatie obiect pentru fiecare frame, inclusiv pentru frame-ul parinte apelat din frame-urile copil. Putem incerca o noua pagina in fereastra parinte cu comanda:

parent.location.href= "http://...";

Iata si o ilustrare a exemplului:[url=http://www.99poze.ro/p/dcffd1e3921f37010ed5517ca7158c90.jpg] ProgramE

[/url]