Fise de lucru JavaScrip - js9

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Obiecte
Programarea Orientata Obiect

JavaScript este un limbaj de programare orientat obiect. Un limbaj de programare orientat obiect permite definirea propriilor noastre obiecte si tipuri de date.
Totusi nu vom discuta deocamdata despre crearea propriilor obiecte ci vom vorbi despre obiectele deja făcute din JavaScript.
Pana acum a trebuit sa lucram oricum cu obiecte si am constatat deja ca un obiect are proprietati si metode.

Proprietatile

Proprietatile sunt valorile continute de obiect. O proprietate este ca o variabila in interiorul obiectului si este capabila astfel sa memoreze valori.
In urmatorul exemplu se foloseste proprietatea length pentru returnarea numarului de caractere dintr-un sir de caractere.

<script type="text/javascript">
var txt="Hello World!";
document.write(txt.length);
</script>

In JavaScript variabilele sunt de fapt obiecte. Asta pentru ca JavaScript este perfect orientat obiect spre deosebire de alte limbaje de programare cum ar fi C++.
In acest caz obiectul txt (care a fost declarat ca variabila) contine proprietatea length care are ca valoare numarul de caractere continute de sirul stocat.

Metode

Metodele sunt actiuni pe care poate sa le faca un obiect.
In exemplul urmator obiectul txt va apela metoda toUpperCase() transformand caracterele in majuscule.

<script type="text/javascript">
var str="Hello world!";
document.write(str.toUpperCase());
</script>

Obiectul String

Daca am declarat
var txt="Hello world";
spunand ca txt este o variabila, de fapt am creat un obiect string, chiar daca suna diferit.
Odata ce ne-am lamurit ca intr-un obiect string putem stoca un sir de caractere, sa vedem ce metode are un astfel de obiect.

Mai intai cateva metode mai uzuale, insa va trebui sa invatam majoritatea metodelor de la siruri, chiar daca sunt mai multe. Problema cu sirurile e ca le intalnim pretutindeni si dat fiind natura lor complexa, au o multime de metode (contin orice caractere si oricate, se afiseaza pe ecran sau sunt scrise in fisiere, sunt formatate, comparate, trunchiate etc).

- text.length()
returneaza lungimea sirului

- text.charAt(pos)
returneaza caracterul de la pozitia data ca parametru

<script type="text/javascript">
var str="Hello world!";
document.write(str.charAt(1));
</script>

in acest exemplu se returneaza caracterul "e" de pe pozitia 1, pozitia 0 fiind ocupata de caracterul "H"

- text.indexOf(textDeCautat)

returneaza pozitia primei aparitii a unui sir dat ca parametru (textDeCautat) in text daca acesta este gasit sau -1 daca nu este gasit

<script type="text/javascript">

var str="Hello world!";
document.write(str.indexOf("Hello") + "
");
document.write(str.indexOf("World") + "
");
document.write(str.indexOf("world"));

</script>
In acest exemplu va fi afisat mai intai 0 pentru prima cautare, apoi -1 căci "World" nu face parte din sir : W < > w.
La a treia cautare va fi afisat 6 pentru ca de la pozitia 6 este gasit sirul "world"

- text.lastIndexOf(textDeCautat)
returneaza pozitia ultimei aparitii a unui sir dat ca parametru. Adica va cauta din bucată dreapta pentru întâia aparitia a sirului.

- text.replace("textDeInlocuit", "textulCareInlocuieste")
inlocuieste un text cu un alt text, ambele sunt date ca parametri

<html>
<body>

<script type="text/javascript">

var str="Visit Microsoft!";
document.write(str.replace("Microsoft","W3Schools"));
</script>
</body>
</html>

- text.substr(inceput, lungime)
returneaza un sir din text pornind de la caracterul de pe pozitia inceput si avand un numar de caractere egal cu lungime.Parametrul lungime nu este obligatoriu.

<script type="text/javascript">
var str="Hello world!";
document.write(str.substr(3));
</script>

Se afiseaza "lo world"; Se porneste de pe pozitia 3 adica se sare peste "Hel" si se returneaza "lo world".

In urmatorul exemplu se vor extrage 7 caractere de la pozitia 3

<script type="text/javascript">

var str="Hello world!";
document.write(str.substr(3,7));

</script>

Se afiseaza "lo worl" pentru ca are 7 caractere

- text.substring(start,stop)
returneaza subsirul din text de la pozitiastart pana la pozitia stop

- text.concat ( textDeAdaugat1, text2, ....)
adauga la sirul text sirul textDeAdaugat astfel:
<script type="text/javascript">
var str1="Hello ";
var str2="world!";
document.write(str1.concat(str2));
</script>

Se va afisa "Hello world!"

- text.split(separator,deCateOri)
se va returna un vector de siruri in functie de separator. Daca separator="" (sirul vid) atunci se va returna un vector cu toate caracterele.
deCateOri nu este obligatoriu dar daca apare va stabili de cate ori se va extrage cate un subsir in vector

<script type="text/javascript">
var str="How are you doing today?";
document.write(str.split(" ") + "
");
document.write(str.split("") + "
");
document.write(str.split(" ",3));
</script>
Rezultatul este:
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

La prima afisare se separa fiecare cuvant fiindcă separtorul este caracterul spatiu " "
La a doua afisare separatorul este vid, prin urmare fiecare caracter va fi separat, inclusiv spatiile
A treia afisare seamana cu prima dar se separta doar 3 siruri pentru ca deCateOri = 3

Mai jos cateva functii de formatare
- text.bold()
- text.italics()
- text.strike() // text taiat cu o linie
- text.fontcolor() //modifica culoarea
- text.fontsize() //modifica dimensiunea fontului
- text.toLowerCase() // toate caracterele sunt transformate in minuscule
- text.toUpperCase() // toate caracterele sunt transformate in majuscule
- text.sub() // caracterele sunt coborate mai jos de natural (indice)
- text.sup() // caracterele sunt ridicate mai sus de normal (putere)
- text.link() // realizeaza un link

<html><body>
<script type="text/javascript">

var txt="Hello World!";

document.write("<p>Bold: " + txt.bold() + "</p>");
document.write("<p>Italic: " + txt.italics() + "</p>");

document.write("<p>Strike: " + txt.strike() + "</p>");

document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>");
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>");

document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>");
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>");

document.write("<p>Subscript: " + txt.sub() + "</p>");
document.write("<p>Superscript: " + txt.sup() + "</p>");

document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>");
</script>
</body>
</html>