»  Pagina principala  »  JavaScript »  Tutorial complet JavaScript (prima parte)

Tutorial complet JavaScript (prima parte)


      

Javascript

este un limbaj de  programare care face posibil ca paginile web sa fie mai interactive. Este mai  des recunoscut ca facand parte din categoria "Scripting Languages".  A fost lansat sub numele de  "LiveScript", schimbarea numelui in JavaScript fiind o chestie legata de  strategia de marketing.
        Scripturile  Javascript sunt introduse in pagina HTML si sunt interpretate si executate de browser. Javascript poate fi considerat o unealta foarte buna daca doriti sa controlati continutul paginilor in functie de data, ora, sistemul de operare sau browserul utilizatorilor, sa faceti site-uri interactive, care sa comunice cu vizitatorii, site-uri dinamice, sa validati datele primite din formulare, dar nu numai atat, acestea fiind doar cateva din posibilitatile pe care le ofera acest limbaj.
        Pentru a putea sa parcurgeti  acest tutorial si sa si intelegeti ceva din el trebuie sa aveti cunostinte de  HTML si cateva notiuni generale legate de structura limbajelor de programare.
        Nu voi mai pierde timpul cu asta  si o sa incep cu cateva exercitii simple care va vor ajuta sa intelegeti aceste  lucruri elementare.

 


        Dupa cum am spus mai sus,  javascript poate fi introdus in interiorul paginilor html. Pentru a fi  interpretat de catre browser trebuie sa marcam codul astfel:

       

<script type="text/javascript">

     

Codul javascript

   

</script>

O alta metoda pentru a folosi  scripturile javascript, metoda pe care o recomand si o consider mai practica,  este aceea de utilizare a scripturilor externe. Cei care folosesc CSS sunt  obisnuiti cu folosirea  stylesheet-urilor  externe. Este aproximativ acelasi lucru: se adreseaza fisierul extern in  interiorul etichetei <HEAD> a fisierului html si apoi o modificare a  acestui script se propaga in intreg documentul.

Iata cum adresam un fisier JS  extern (fisierul extern este exemplu.js):

       

<html>
  <head>
  <title>
      Exemplu
  </title>
  <script type="text/javascript" src=exemplu.js>
  </script>
  </head>
  <body>

     

Continut

     

</body>
  </html>


In continuare voi incerca sa  afisez in browser un text folosind javascript.

Exemplul 1

       

<html>
  <head>
  <title> exemplu  </title>
  </head>
  <body>

     

<h1> Text HTML </h1>
  <h1> <script type="text/javascript">
        document.write("Text JAVASCRIPT");
  </script>
  </h1>
  </body>
  </html>

Exemplu

Explicatii suplimentare:
  document.write("text Javascript");

document este un obiect iar write() este o metoda.

Un obiect poate contine alte  obiecte care pot fi considerate proprietati ale acestuia. Spre exemplu document contine alte obiecte, de  exemplu title  . In javascript acest obiect se identifica cu: document.title.  Alt exemplu ar fi obiectul submit care este intr-un formular din  pagina. Acesta ar fi adresat document.form.submit.
Iata cateva exemple de obiecte HTML si corespondentele in JavaScript:

ObiectulTag-ul HTMLCoresp. JavaScript
Pagina Web<body> .... </body>document
Formular HTML

<form name="formular">

   

... </form>

document.formular
Buton

<INPUT TYPE="button" name="buton">

   
document.formular.buton
Imagine<IMG name="imagine">document.imagine

 

write() este o metoda. O metoda ne face sa ne gandim la actiune, au  efect asupra obiectelor. Metodele au tot timpul paranteze ( ). O sa mai intalnim in tutorial metode si obiecte si atuci o sa  le intelegeti mai bine rolul.


S-a folosim si un fisier extern  (exemplu2.js)
  Fisierl HTML are codul de mai jos

       

<html>
<head>
<title>exemplu2</title>
<script type="text/javascript"  src="exemplu2.js">
</script>
</head>
<body>

     

<h1> Text HTML </h1>
<h1 id="text1"> <!-- aplicam un id pe care-l vom defini in JS -->
</h1>

     

</body>
</html>

Exemplu

Am adresat fisiserul extern javascript in zona <HEAD> a documentului HTML si am atribuit marcajului <h1> id-ul "text1". Un ID javascript functioneaza ca un ID in CSS: poate fi folosit o singura data intr-o pagina. Iata si codul din exemplu2.js :

       

window.onload = scrieText;

     

function scrieText() {
        document.getElementById("text1").innerHTML = "Text JavaScript din fisier extern";
    }

Ce face acest script:

- dupa ce termina de incarcat fereastra executa functia "scrieText" (window.onload = scrieText;)

- pasul urmator este definirea functie scrieText(). Aceasta se face intre acolade ({ }).Aceasta functie cauta dupa ID-ul "text1" in documentul HTML si unde il gaseste inlocuieste continutul tagului respectiv cu textul pe care l-am introdus in ghilimele.





1 2 3 Inainte »
Pagina Urmatoare: Comentarii, alerte ...





Articole asemanatoare
» Upload de fisiere cu PHP
» Validare de Formulare cu Javascript
» Dezactivare Dreapta Click

Comentarii



   xpt1

Greseala de tiparire:
"Sa folosim si un fisier extern  (exemplu2.js)
  Fisierl HTML are codul de mai jos"
22-Mar-2010 - 10:58


   deea

Cum pot pune un cod...care atunci cand tin mouseul pe o poza..sa apara un text..care dispare cand iau mouseul?

Va rog raspundeti.
01-Apr-2010 - 11:55


   Cristian

Vezi http://etutoriale.tutorialehtml.com/articles/2150/1/Elemente-de-pagina-(partea-3)/   !!!

De aici poti  sa adaptezi si sa faci cea ce zici tu:  sa apara un text cand treci cu mouse-ul peste poza.

Din tutorialul ala trebuie sa iei doar functia javascript si sa nu uiti sa incluzi paragraful cu id-ul corespunzator : descriere

<p id="descriere"></p>

Nu uita nici de onMouseover care sa adreseze functia Showtext
03-Apr-2010 - 22:14


   carmen

cum pot deschide dintr-un index.html, alte pagini html, apasand combinatii de taste (ex. "ctrl+p")? (fara mouse)
02-Jun-2010 - 08:29


   cristian

nu inteleg exact ce vrei sa spui. Da un exemplu detaliat.
02-Jun-2010 - 11:13


   djmihai

cand intru pe site sa imi apara o pagina de vot(site care vreau eu sa fie votat).cum fac?
27-Aug-2010 - 20:57


   radu

Buna... :D eu vreau sa stiu cum pot creea un site care sami apara pe net. Adica eu il fac html si nu stiu ce cod sa pun sami apara pe net (intelegeti ce vreau sa spun?)Sa-mi apara pe net adica ii pun un URL www.suteul meu.html si vreau sa pot intra pe browser, sa pun URL-ul de mai sus si da-mi intre pe site:D astept raspunsuri multumesc.

25-Apr-2011 - 19:49


   Xig#

Of cand ma uit a commurile astea imi amintesc de mine :)) acum 3 luni cand am inceput sa invatz HTML. acu stiu si HTML si JS si PHP si putzin CSS :)) .. Auzi cum sa pui un site pe web e ff simplu .. cumperi un domain :)) preturile variaza de la domain la domain :P
27-Jun-2011 - 07:28


   Olah Calin

Are cineva idee cam cum arata un script care sa schimbe un text sau o poza la o anumita ora... spre ex un site al unui post de radio: de la ora 8:00 la 10:00 sa afiseze "Acum asculti matinalul" iar de la 10:00 la 12:00 sa afiseze Acum asculti emisiunea de pranz...
29-Jul-2011 - 17:32


   Cristian

Asta poti sa o faci cu PHP (si probabil cu o bdd mysql - daca vrei sa editezi direct din browser programul si pozele sau textul care vrei sa fie afisat).

Pentru mai multe detalii poti sa postezi aici detaliile de contact (nu le afisam) si o sa facem un tutorial pentru asa ceva.
30-Jul-2011 - 11:21


   Marius

Vreau si eu un tutorial Javascript sau Flash foarte usor de inteles va rog mult. Vreau sa invat! Cunosc deja HTML. Am si un site: www.nmariuscostel.ilive.ro
Va multumesc anticipat!
07-Sep-2011 - 09:20



Voteaza acest articol!
 



Trimite un comentariu!

Nume *
E-mail *
Comentariu *
  Vreau sa fiu anuntat de urmatoarele mesaje la acest articol

Security image

Cristian Bozeanu

Free Mini Games

Cloud tag

tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php