Scribd Logo
Upload

Welcome to Scribd!

  • Piu C6

    Uploaded by

    Antal Bogdan
    7 views32 pages

    Original Title

    PIU_C6

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views32 pages

    Piu C6

    Uploaded by

    Antal Bogdan

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 32

    1.

    1 JAVASCRIPT
    JavaScript este un limbaj de  programare din categoria "Scripting Languages" care face posibil
    ca paginile web să fie mai interactive. A fost lansat sub numele de  "LiveScript" iar schimbarea
    numelui în JavaScript a fost legată de strategia de marketing.
    Scripturile JavaScript sunt introduse în pagina HTML și sunt interpretate și executate debrowser.
    JavaScript este o unealtă foarte bună dacă se dorește controlul conținutului paginilor în funcție de
    dată, oră, sistem de operare sau browser-ul utilizatorilor, respectiv dacă se dorește implementarea
    de site-uri interactive, care să comunice cu vizitatorii, site-uri dinamice, validarea datele primite
    din formulare.
    JavaScript poate fi inserat în cadrul paginilor HTML. Pentru a fi  interpretat de către browser
    trebuie marcat codul astfel:
    <script type="text/javascript">
        Codul javascript
     </script>
           
    O altă metodă utilizată pentru a folosi scripturile JavaScript, metodă recomandată și pe care o
    consider mai practică,  este aceea de utilizare a scripturilor externe. Cei care folosesc CSS
    sunt obișnuiți cu folosirea  fișierelor  externe de stiluri. Este aproximativ același lucru: se
    adresează fișierul extern în  interiorul etichetei <HEAD> a fișierului HTML și apoi o modificare
    a acestui script se propagă în întreg documentul.
    Iată cum adresăm un fișier JS extern (fișierul extern este exemplu.js):
    <html>
    <head>
    <title>
    Exemplu
    </title>
    <script type="text/javascript" src=exemplu.js>
    </script>
    </head>
    <body>
    Continut
    </body>
    </html>

    Exemplul – modalitate de afișare în browser a unui text folosind JavaScript


    <html>
    <head>
    <title> exemplu  </title>
    </head>
      <body>
          <h1> Text HTML </h1>
    <h1><script type="text/javascript"> document.write("Text
    JAVASCRIPT");
      </script>
      </h1>
      </body>
    </html>
    Instrucțiunea document.write("text JavaScript")conțineobiectul document  și metoda write().Un
    obiect poate conține alte  obiecte care pot fi considerate proprietăți ale acestuia. De
    exempludocument conține alte obiecte, de  exemplu title . În JavaScript acest obiect se identifică
    cu document.title.  Alt exemplu ar fi obiectul submit careapare într-un formular din  pagina web.
    Acesta ar fi adresat sub forma document.form.submit.Cumwrite() este o metodă acest lucru ne
    face să ne gândim la acțiune, iar metodele au efect asupra obiectelor. Metodele au tot timpul
    paranteze ( ). 
    În tabelul de mai jos suntprezentate câteva exemple de obiecte HTML și corespondențele în
    JavaScript:
    Obiect Marcator/tag HTML Corespondent JavaScript
    pagina web <body> .... </body> Document
    formular <form document.formular
    HTML name="formular">
    ... </form>
    buton <input type="button" document.formular.buton
    name="buton">
    imagine <img name="imagine"> document.imagine

    Tabel 3.1. Exemple de obiecte HTML și corespondentele în JavaScript [51].


    Exemplul de mai josfolosește un fisier extern JavaScript
     Fișierul 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>

    În exemplul de mai sus am adresat fișierul extern JavaScript în zona <HEAD> a documentului
    HTML și am atribuit marcajului <h1> id-ul "text1". Un ID JavaScript funcționează ca un ID în
    CSS: poate fi folosit o singură dată într-o pagina. Iată și codul JavaScript: 
    window.onload = scrieText;
    function scrieText() {
    document.getElementById("text1").innerHTML = "Text
    JavaScript din fisier extern";
    }
    Ce face acest script:
     după ce termina de încărcat fereastra execută funcția "scrieText" (window.onload =
    scrieText;)
     pasul următor este definirea functie scrieText()ș aceasta se face intre acolade
    ({ }).Această funcție caută după ID-ul "text1" în documentul HTML și unde îl gasește
    înlocuiește conținutul tag-ului respectiv cu textul pe care l-am introdus în ghilimele.
    Pentru a face comentarii care să nu fie afișate de browser, cu scopul de a explica codul pentru
    alții sau pentru a lăsa marcaje care să-ți aducă aminte anumite lucruri despre script, ai la
    dispoziție două modalitați:
     comentarii pe o singura linie :
    // comentariu pe o singura linie (daca treceti pe linia urmatoare va fi
    interpretat de browser si va afisa o eroare)

     comentarii pe mai multe linii:


    /*
    comentariu 1
    comentariu 2
    comentarii pe mai multe randuri, tot ce se afla in interiorul acestor
    marcaje este ignorat
     */    
    Din pacate încă mai sunt folosite browsere care nu suportă JavaScript. Pentru a-i avertiza și pe
    aceștia că browserul lor nu suporta JavaScript puteți folosiți tag-ul <noscript>. Acesta nu este
    luat în seamă dacă browserul suportăJavaScript dar în situația în care nu suportă sau nu-l are
    activat putem să afișăm un mesaj de avertizare de genul:
    <noscript>
       Browserul dumneavoastra nu suporta javascript. Pentru a beneficia
    de toate facilitatile acestui site schimbati browserul sau activati
    JavaScript
    </noscript>

    Una dintre cele mai importante facilități ale acestui limbaj este acela că oferă posibilitatea să
    interacționezi cu utilizatorii.
    Pentru a crea o alertă care să afișeze un mesaj la care utilizatorii trebuie să răspundă, codul din
    fișierul JavaScript este următorul (codul din fișierul HTML îl păstrăm):
     alert("Mesaj de intampinare - Bine ati venit!"); // pagina se va incarca
    atunci cand se face click pe OK     
    Condiționaleleoferă posibilitatea de a face să se realizeze anumite lucruri în funcție de anumite
    circumstanțe, de exemplu dacă sunt sau nu cookie-urile activate. Putem realiza acest lucru
    folosind o structură de forma if then else.
    Vom implementa un script care să afișeze un mesaj sau o alertă dacă cookie-urile sunt activate și
    altul daca nu sunt activate:     
    if (/* intre aceste paranteze vom introduce conditia. Aceasta trebuie sa
    intoarca valoarea true sau false.*/)
       {
          /*Aici trebuie introdus codul care sa fie executat daca conditia
    din if intoarce valoarea true */  
    }
       else {
        /* Codul care este executat daca conditia intoarce valoareafalse.
    Conditionala poate fi folosita si fara partea de else*/
       }
    Iată codul din fișierul JavaScript:
      if (navigator.cookieEnabled) {
       alert ("cookies activate!!!");
       }
       else {
       alert ("cookies dezactivate");
       }   
    Exemplu - Mai jos se implememtează un script care să ofere utilizatorilor posibilitatea să
    confirme sau nu, iar în funcție de răspuns să avem acțiuni diferite, vom folosi un if și vom
    schimba doar condiția:
     if (confirm("Esti sigur ca aceasta e pagina pe care trebuie sa te afli?"))
    {
       alert("ai zis ca esti sigur"); }
       else {
       alert("nu esti sigur");
       }  
    Dacă dorim ca user-ul să introducă răspunsul de la tastatură trebuie să folosim variabile. O
    variabilă se definește o dată și poate fi folosită de mai multe ori. Script-ul următor preia
    răspunsul introdus de utilizator și poate să-l folosească pentru a-i da acestuia un răspuns de
    exemplu.
    Pentru ca vizitatorii să poată introduce valori se folosește prompt(), care este din aceeași
    categorie cualert() si confirm(), toate solicitând acțiune din partea utilizatorului.    
    Confirm face parte din aceeași categorie cu alert și prompt, adică sunt ferestre popup. Spre
    deosebire de alert, confirm întoarce valoarea true sau false, putând fi astfel folosit în
    structuri if, ca în exemplul de mai jos:
    var raspuns = prompt("esti sigur ca aici pe aceasta pagina vrei sa
    ajungi","");
     /* Intre primele ghilimele se introduce intrebarea iar intre celelalte se
    introduce un raspuns random. Am lasat liber pentru a nu avea un
    raspuns predefinit. */
     if (raspuns) { // daca exista vreun raspuns
     alert("ai zis: " + raspuns); //concateneaza cele doua siruri
     }
     else {
     alert("nu esti sigur");
      }
    if (confirm("esti de acord?")) {
         alert("Esti de acord")
       }
        else {
       alert ("Nu esti de acord")
       };

    Sintaxa pentru crearea unei funcții în JavaScript este următoarea:


    function NumeFunctie(var1,var2,...,varX)
        {
          ceva cod
        }  

    În cazul în care funcția nu are parametrii numele funcției va trebui urmat de paranteze ( ).
     function NumeFunctie()
         {
          ceva cod
          }
        
    Iată un exemplu foarte simplu de funcție fără parametrii:
    <html>
    <head>
    <script type="text/javascript">
    function ScrieText()
    {
    alert("Text de PROBA");
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" value="Apasa"onclick="ScrieText()" >
    </form>
    </body>
    </html>

    În exemplul de mai sus nu s-a mai folosit un fisier JavaScript extern ci s-a definit funcția în zona
    de <HEAD> a documentului HTML. La apăsarea butonului se va executa funcția ScrieText.
    Înlocuiți codul într-un fișier .txt, schimbați extensia fisierului în .html și observați cum
    funcționează.
    Funcțiile cu parametri sunt și ele foarte utile. Să presupunem că avem nevoie de o funcție care să
    facă anumite operații cu anumiți parametrii. Nu vom scrie funcția de câte ori avem nevoie să
    efectuăm operația asupra altor parametrii, ci vom folosi doar o altă adresare a funcției, folosind
    parametri.
    function prod(a,b)
    {
    x=a*b;
    return x;
    } 
    Funcția implementează produsul a două numere. Ca să atribuim unei variabile produsul a două
    numere este suficient să adresăm funcția prod (pe care am definit-o) și să indicăm și cele 2
    numere între paranteze.
    produs=prod(5,10); // realizeaza produsul celor 2 numere     

    Cu ajutorul JavaScript putem să facem link-urile mai "destepte", adică să primim mesaje de
    avertizare, care să ducă la o pagină sau la alta în fucție de anuite condiții.
    Exemplul următor este un exemplu de link "deștept" dar și un bun exercițiu de lucru cu funcții. 
    Pentru a putea controla un link cu JavaScript trebuie să folosim o metodă de marcare a link-ului
    respectiv.
    Cel mai uzual folosim un ID și apoi, în JavaScript, folosim document.getElementById("") .
    Să zicem că dorim să controlăm un link din următoarea pagină:
     <html>  
    <head><title> exemplu </title>
    <script type="text/javascript" src="script.js">
    </script>
    </head>
    <body>
        <h1> Exemplu link destept </h1>
        <h2 align="center">
        <a href="index.html " id="redirect"> Link "destept"
    JavaScript </a>
        </h2>
     </body>
    </html>    

    Link-ului deștept i-am atașat un ID, putând astfel să-l folosim în fișierul JavaScript. Vom încerca
    să controlăm accesul la pagina spre care face link-ul trimitere. Codul din fișierul script.Js:
    window.onload = functieI; /* Dupa ce se incarca pagina se trimite la
    functia functieI pe care o vom defini mai jos in script*/
      
    function functieI() {
    document.getElementById("redirect").onclick = controlClick; /* cauta
    in
    document elementul care are id-ul redirect, actiunea este onclick (cand
    se face
    click pe elementul respectiv) si trimite la functia controlClick */
     }
     function controlClick() {
     alert("Link controlat!! Atentie!!");
       
    return false; /* nu ne lasa sa mergem mai departe. Daca
    puneam return true ne
    lasa sa trecem la pagina la care trimite link-ul */
     }    
    Dacă dorim ca utilizatorii care au JS activat să ajungă pe o pagină și cei care l-au dezactivat pe
    altă pagină cam asta trebuie să facem:
    window.onload = functieI;
    function functieI() {
    document.getElementById("redirect").onclick = controlClick;}
    function controlClick() {
     window.location = "paginajs.html";
    return false;
     }
    Cei care au JS activat vor fi directionați de către link pe pagina paginajs.html iar cei care nu au
    JavaScript activat vor ajunge pe pagina care este trecuta în HTML, adica index.html.  Dacă în
    browser nu este JavaScript activat sau nu este suportat, acesta nu va putea să interpreteze codul
    JS și-l va executa doar pe cel HTML.
    Un alt exemplu util despre care trebuie discutat este cel în care dacă doriți să primiți mesaj de
    avertizare atunci când se face click pe un link care nu duce la o pagina de pe domeniul vostru. În
    acset caz vom proceda astfel:
    Fisierul HTML (s-a schimbat doar link-ul):
    <html>
    <head><title> exemplu </title>
    <script type="text/javascript" src="script.js">
    </script>
    </head>
    <body>   
    <h1> Exemplu link destept </h1>
    <h2 align="center">
    <a href="www.google.com" id="redirect"> Link "destept" JavaScript
    </a>
    </h2>
    </body>
    </html>    
    Fișierul JavaScript:
    window.onload = functieI;
       function functieI() {
       document.getElementById("redirect").onclick = controlClick;}
    function controlClick() {
        if(this.toString().indexOf("etutoriale") < 0) {
    alert("Nu suntem responsabili de continutul acestui site. Aceasta
    pagina este
    in afara domeniului nostru!!");
       }
    }

    După cum se poate observă, în acest exemplu au apărut multe noutăți. Cea mai importantă dintre
    ele ar fi cuvântul cheie thiscare depinde de context. De obicei se referă la un obiect în funcție de
    metoda care apelează funcția sau structura în care intră this.  În cazul nostru se referă la un link și
    ne dăm seama de acest lucru deoarece funcția este apelată de onclick, care se aplică link-ului. 
    <input type="radio" name="Buton radio test"
    onClick="alert(this.name)">
     
    apăsați pe butonul radio să vedeți efectul

    <input type="checkbox" name="MyCheckbox"


    onClick="alert(this.checked)">                                                 
      
    apăsați pe butonul pătratpentru a vedea efectul
           
    Pentru ca datele din formularele HTML să fie trimise către un fișier PHP este de preferat să
    faceți o verificare, sa vedeti dacă ele corespund câmpurilor în care au fost introduse. De
    exemplu atunci cand un utilizator trimite un comentariu și a lăsat goală o căsuță sau a scris
    adresa de email aiurea să putem opri trimiterea datelor mai departe.
    JavaScript face fata cu succes acestei acțiuni iar codul este foarte simplu. Astfel JavaScript
    poate să interacționeze cu tastatura utilizatorului și poate controlatipul datelor introduse, fără a
    permite introducerea altor tipuri de caractere.
    Pentru a afla care tastă a fost apăsată și a acșiona în consecință funcșie de acest lucru trebuie să
    știm comenzile utilizate:
     onkeypress - când se apasă tasta
     onkeyup - când este eliberată tasta
     onkeydown - când se ține apăsata tasta
    Pentru a face legatura între apăsarea tastei și un obiect HTML din pagina se poate folosi atât
    cod în interiorul obiectului HTML dar și apelare de funcții JavaScript :
    <form>
    <input type="text" value="Apasa o tasta" onkeypress="alert(' A fost
    apasata o tasta din interiorul campului')" />
    </form>
         <script type="text/javascript">
    function alertare ( ) {
    alert("A fost apasata o tasta din document html")
    }
    document.onkeypress=alertare()
    </script>
     
    Pentru validarea formularelor trebuie sa se determine ce tasta a fost apăsata în interiorul
    obiectului respectiv.Pentru asta se folosește keycode care indică codul tastei apăsate. Mod de
    utilizare:

    <script type="text/javascript">
    function aratacod(e){
    var unicode=e.keyCode? e.keyCode : e.charCode
    alert("codul tastei este:" + unicode)
    }
    </script>
    <form>
    <input type="text" size="2" maxlength="1"
    onkeyup="aratacod(event); this.select()" />
    </form>

    Exemplu - validare comentariu inserat în funcție de numărul de caractere     

    <script type="text/javascript">
    function limitarelungime(obj, length){
    var lungime=length
    if (obj.value.length>lungime)
    obj.value=obj.value.substring(0, lungime)
    }
    </script>
    introduceti textul aici (lungimea maxima e de 20 de caractere):
    <form>
    <textarea onkeyup="return limitarelungime(this, 20)" style="width:
    300px; height: 40px"></textarea>
    </form>  
    Exemplu - validare număr de telefon

    Acest lucru se realizează prinlimitarea numărului maxim de caractere la 10 și se va permite


    doar apăsarea tastelor de la 0 la 9, pentru impunerea acestei restricțiise vor utiliza codurile
    caracterelor.      

    <script type="text/javascript">
    function numere(e){
    var unicode=e.charCode? e.charCode : e.keyCode
    if (unicode!=8){ //daca tasta apasata nu e backspace
    if (unicode<48||unicode>57) //si nu e nici numar
    return false //nu se poate apasa
    }
    }
    function limitarelungime(obj, length){
    var lungime=length
    if (obj.value.length>lungime)
    obj.value=obj.value.substring(0, lungime)
    }
    </script>
    introduceti numarul de telefon (lungimea maxima e de 10 de
    caractere):
    <form>
    <textarea onkeypress="return numere(event)" onkeyup="return
    limitarelungime(this, 10)" style="width: 300px; height:
    25px"></textarea>
    </form>
    Exemplu - validare e-mail
    Pentru validare e-mail se folosesc funcțiile javascript: evalid() si everif(). Prima verifică dacă
    s-a scris ceva în campul de e-mail sau dacă acel câmp a rămas gol.A doua funcție verifică dacă
    textul introdus are formatul tipic unei adrese de email: daca contine @ , daca are cel puțin un
    punct, dacă punctul este plasat imediat inaintea lui @ sau imediat dupa el sau dacă conține mai
    mult de doua caractere @ .       

    <script language = "JavaScript">


    function everif(str) {
    var at="@"
    var punct="."
    var lat=str.indexOf(at)
    var lstr=str.length
    var lpunct=str.indexOf(punct)
    if (str.indexOf(at)==-1){
    alert("E-mail invalid. Introduceti o adresa reala!!!")
    return false
    }
    if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr)
    {
    alert("E-mail invalid. Introduceti o adresa reala!!!")
    return false
    }
    if (str.indexOf(punct)==-1 || str.indexOf(punct)==0 ||
    str.indexOf(punct)==lstr){
    alert("E-mail invalid. Introduceti o adresa reala!!!")
    return false
    }
    if (str.indexOf(at,(lat+1))!=-1){
    alert("E-mail invalid. Introduceti o adresa reala!!!")
    return false
    }
    if (str.substring(lat-1,lat)==punct ||
    str.substring(lat+1,lat+2)==punct){
    alert("E-mail invalid. Introduceti o adresa reala!!!")
    return false
    }
    if (str.indexOf(punct,(lat+2))==-1){
    alert("E-mail invalid. Introduceti o adresa reala!!!")
    return false
    }
    if (str.indexOf(" ")!=-1){
    alert("E-mail invalid. Introduceti o adresa reala!!!")
    return false
    }
    return true
    }
    function evalid(){
    var emailID=document.eFormular.txtEmail

    if ((emailID.value==null)||(emailID.value=="")){
    alert("Va rog sa introduceti o adresa de email")
    emailID.focus()
    return false
    }
    if (everif(emailID.value)==false){
    emailID.value=""
    emailID.focus()
    return false
    }
    return true
    }
    </script>
    <form name="eFormular" method="post" action="#"
    onSubmit="return evalid()">
    <p>Enter an Email Address :
    <input type="text" name="txtEmail">
    </p>
    <p>
    <input type="submit" name="Submit" value="Submit">
    </p>
    </form>

    Exemplu - Validare butoane radio și checkbox


    În cazul în care sunt mai multe variante de răspuns la o întrebare și se dorește alegerea unei
    singure variante este suficient să treceți nume identice butoanelor radio care sunt cuprinse în
    acea întrebare. Se va folosi apoi JavaScript pentru a fi siguri că formularul nu va fi trimis fără
    să fie bifat un răspuns la fiecare întrebare. În exemplu s-a inserat funcția check_buttons care va
    indica spre fișierul care să preia datele din formular numai în cazul în care s-a răspuns la fiecare
    rubrică. Acest lucru se verifică cu un IF, parcurgând înainte fiecare buton ca pe un array cu
    FOR.     

    <script language="JavaScript">
       function check_buttons()
            {
            for(i=0; i<4; i++)
            for (j=0; j<4; j++)
    {
            if(document.form1.intr1[i].checked==true) {
            if(document.form1.intr2[j].checked==true) {
             document.form1.action="rezultat.php"; } } }
            return; }
    </script>
      <form name="form1" method="post"
    onSubmit="javascript:check_buttons();" action="">
            1. Cate limbaje de programare cunosti?
      <p>
      <input type="radio" name="intr1" value="a" >a. Nici unul<br>
      <input type="radio" name="intr1" value="b" >b. 1<br>
      <input type="radio" name="intr1" value="c" >c. 2<br>
      <input type="radio" name="intr1" value="d" >d. 3<br>
    </p>
            2. De cat timp esti interesat de Web Design?
      <p>
      <input type="radio" name="intr2"  value="a"> a. De cand m-am
    nascut<br>
      <input type="radio" name="intr2" value="b"> b. De mai mult de 10
    ani<br>
      <input type="radio" name="intr2" value="c"> c. De mai putin de 10
    ani<br>
      <input type="radio" name="intr2" value="d"> d. De ieri<br>
    </p>
      <input type="submit" value="Trimite formularul">
      </form>
    Exemplu - funcție JavaScript care face mai dificilă copierea continutului paginilor web.  Dacă
    cel care încearcă să copieze nu are JavaScript activat din browser următoarea funcție nu se va
    executa iar drept urmare dreapta click nu va fi dezactivat. Oricum există și CTRL+C .....
    Funcția trebuie introdusă între tag-urile <head> .... </head> ale paginii.
    <script language=JavaScript>
    <!--
    var message="Ne cerem scuze dar operatia click-dreapta a fost
    dezactivata";
    function click(z) {
    if (document.all) {
    if (event.button == 2) {
    alert(message);
    return false;
    }
    }
    if (document.layers) {
    if (z.which == 3) {
    alert(message);
    return false;
    }
    }
    }
    if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    }
    document.onmousedown=click;
    // -->
    </script>
    CARUSEL

    A.Implementare carusel/slideshow

    Pas 1. Fisier HTML


    <!-- Slideshow container -->
    <div class="slideshow-container">

      <!-- Full-width images with number and caption text -->


      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="img1.jpg" style="width:100%">
        <div class="text">Caption Text</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="img2.jpg" style="width:100%">
        <div class="text">Caption Two</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="img3.jpg" style="width:100%">
        <div class="text">Caption Three</div>
      </div>

      <!-- Next and previous buttons -->


      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>

    <!-- The dots/circles -->


    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span> 
      <span class="dot" onclick="currentSlide(3)"></span> 
    </div>

    Pas 2. Fisier CSS – formatare butoane next si prev, text si buline utilizate in cadrul
    caruselului/slideshow-ului
    * {box-sizing:border-box}

    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }

    /* Hide the images by default */


    .mySlides {
      display: none;
    }

    /* Next & previous buttons */


    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */


    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-


    through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }

    /* Number text (1/3 etc) */


    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }

    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }

    Pas 3. JavaScript
    var slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    // Thumbnail image controls


    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {slideIndex = 1} 
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none"; 
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block"; 
      dots[slideIndex-1].className += " active";
    }

    COD SURSA

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box}
    body {font-family: Verdana, sans-serif; margin:0}
    .mySlides {display: none}
    img {vertical-align: middle;}

    /* Slideshow container */
    .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    }

    /* Next & previous buttons */


    .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    }

    /* Position the "next button" to the right */


    .next {
    right: 0;
    border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */


    .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    }

    /* Caption text */
    .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }
    /* Number text (1/3 etc) */
    .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
    background-color: #717171;
    }

    /* Fading animation */
    .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }

    @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }

    /* On smaller screens, decrease text size */


    @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
    }
    </style>
    </head>
    <body>

    <div class="slideshow-container">

    <div class="mySlides fade">


    <div class="numbertext">1 / 3</div>
    <img src="img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">


    <div class="numbertext">2 / 3</div>
    <img src="img_snow_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">


    <div class="numbertext">3 / 3</div>
    <img src="img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>


    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    </div>
    <br>

    <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    </div>

    <script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
    showSlides(slideIndex += n);
    }
    function currentSlide(n) {
    showSlides(slideIndex = n);
    }

    function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    }
    </script>
    </body>
    </html>
    B.Implementare slideshow automat !

    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none"; 
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1} 
        slides[slideIndex-1].style.display = "block"; 
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }

    COD SURSA

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box;}
    body {font-family: Verdana, sans-serif;}
    .mySlides {display: none;}
    img {vertical-align: middle;}

    /* Slideshow container */
    .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    }

    /* Caption text */
    .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }

    /* Number text (1/3 etc) */


    .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }

    .active {
    background-color: #717171;
    }

    /* Fading animation */
    .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }

    @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }

    /* On smaller screens, decrease text size */


    @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
    }
    </style>
    </head>
    <body>

    <h2>Automatic Slideshow</h2>
    <p>Change image every 2 seconds:</p>

    <div class="slideshow-container">

    <div class="mySlides fade">


    <div class="numbertext">1 / 3</div>
    <img src="img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">


    <div class="numbertext">2 / 3</div>
    <img src="img_snow_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">


    <div class="numbertext">3 / 3</div>
    <img src="img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
    </div>

    </div>
    <br>

    <div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    </div>

    <script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
    </script>

    </body>
    </html>

    C. Implementare slideshow-uri multiple


    var slideIndex = [1,1];
    /* Class the members of each slideshow group with different CSS
    classes */
    var slideId = ["mySlides1", "mySlides2"] 
    showSlides(1, 0);
    showSlides(1, 1);

    function plusSlides(n, no) {
      showSlides(slideIndex[no] += n, no);
    }

    function showSlides(n, no) {
      var i;
      var x = document.getElementsByClassName(slideId[no]);
      if (n > x.length) {slideIndex[no] = 1} 
      if (n < 1) {slideIndex[no] = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
      }
      x[slideIndex[no]-1].style.display = "block"; 
    }

    COD SURSA
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box}
    .mySlides1, .mySlides2 {display: none}
    img {vertical-align: middle;}

    /* Slideshow container */
    .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    }

    /* Next & previous buttons */


    .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    }

    /* Position the "next button" to the right */


    .next {
    right: 0;
    border-radius: 3px 0 0 3px;
    }

    /* On hover, add a grey background color */


    .prev:hover, .next:hover {
    background-color: #f1f1f1;
    color: black;
    }
    </style>
    </head>
    <body>

    <h2 style="text-align:center">Multiple Slideshows</h2>


    <p>Slideshow 1:</p>
    <div class="slideshow-container">
    <div class="mySlides1">
    <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides1">
    <img src="img_snow_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides1">
    <img src="img_mountains_wide.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>


    <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
    </div>

    <p>Slideshow 2:</p>
    <div class="slideshow-container">
    <div class="mySlides2">
    <img src="img_band_chicago.jpg" style="width:100%">
    </div>

    <div class="mySlides2">
    <img src="img_band_la.jpg" style="width:100%">
    </div>

    <div class="mySlides2">
    <img src="img_band_ny.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>


    <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
    </div>

    <script>
    var slideIndex = [1,1];
    var slideId = ["mySlides1", "mySlides2"]
    showSlides(1, 0);
    showSlides(1, 1);

    function plusSlides(n, no) {


    showSlides(slideIndex[no] += n, no);
    }
    function showSlides(n, no) {
    var i;
    var x = document.getElementsByClassName(slideId[no]);
    if (n > x.length) {slideIndex[no] = 1}
    if (n < 1) {slideIndex[no] = x.length}
    for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    }
    x[slideIndex[no]-1].style.display = "block";
    }
    </script>

    </body>
    </html>

    PARALAX
    EFECT PARALLAX
    Pentru implementarea acestui efect se utilizeaza un container si se adauga o imagine acestui
    container cu o anumita inaltime, apoi se utilizeaza optiunea background-attachment:fixed pentru
    a crea efectul parallax. Celelalte proprietati ale background-ului sunt utilizate pentru a centra si
    scala imaginea.

    P1.Exemplu cu pixeli
    <style>
    .parallax { 
        /* The image used */
        background-image: url("img_parallax.jpg");

        /* Set a specific height */


        height: 500px; 

        /* Create the parallax scrolling effect */


        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    </style>
    <!-- Container element -->
    <div class="parallax"></div>

    COD SURSA
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */


    min-height: 500px;

    /* Create the parallax scrolling effect */


    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }
    </style>
    </head>
    <body>

    <p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

    <div class="parallax"></div>

    <div style="height:1000px;background-color:white;font-size:32px">
    Scroll Up and Down this page to see the parallax scrolling effect.
    This div is just here to enable scrolling.
    Tip: Try to remove the background-attachment property to remove the scrolling effect.
    </div>

    </body>
    </html>

    P2. Exemplu cu procent

    body, html {
        height: 100%;
    }

    .parallax { 
        /* The image used */
        background-image: url("img_parallax.jpg");

        /* Full height */


        height: 100%; 

        /* Create the parallax scrolling effect */


        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    COD SURSA
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body, html {
    height: 100%;
    }

    .parallax {
    /* The image used */
    background-image: url('img_parallax.jpg');

    /* Full height */
    height: 100%;

    /* Create the parallax scrolling effect */


    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }
    </style>
    </head>
    <body>

    <div class="parallax"></div>

    <div style="height:1000px;background-color:yellow;font-size:28px">
    Scroll Up and Down this page to see the parallax scrolling effect.
    This div is just here to enable scrolling.
    Tip: Try to remove the background-attachment property to remove the scrolling effect.
    </div>

    <div class="parallax"></div>

    </body>
    </html>
    P3. Eliminare efect parallax pentru telefoane mobile & tablete

    /* Turn off parallax scrolling for all tablets and phones.


    Increase/decrease the pixels if needed */
    @media only screen and (max-device-width: 1366px) {
        .parallax {
            background-attachment: scroll;
        }
    }

    COD SURSA
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body, html {
    height: 100%;
    }

    .parallax {
    /* The image used */
    background-image: url('img_parallax.jpg');

    /* Full height */
    height: 100%;

    /* Create the parallax scrolling effect */


    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }

    /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
    @media only screen and (max-device-width: 1366px) {
    .parallax {
    background-attachment: scroll;
    }
    }
    </style>
    </head>
    <body>

    <p>In this example we have turned off parallax scrolling for mobile devices. It works as
    expected on all desktop screens sizes.</p>
    <p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

    <div class="parallax"></div>

    <div style="height:1000px;background-color:red;font-size:36px">
    This div is just here to enable scrolling.
    Tip: Try to remove the background-attachment property to remove the scrolling effect.
    </div>

    <div class="parallax"></div>

    </body>
    </html>

    You might also like