Curs Javascript

Obiectul anchor reprezinta elementele HTML <a> (folosite pentru link-uri).
In afara de proprietatile si metodele specifice elementelor html (prezentate la: marplo.net/javascript/proprietati-metode-element-html ), obiectul anchor contine si proprietati proprii, utile pentru lucru cu adrese URL (link-uri adaugate in elemente <a>).


Proprietati obiect Anchor

Proprietatile obiectului anchor sunt similare cu cele de la obiectul navigator, dar se aplica la elementele <a> preluate /create in JavaScrip.

download - returneaza sau seteaza valoarea atributului 'download' dintr-un link.
- Acest atribut indica faptul ca link-ul e pt. download, resursa va fi descarcata cand se da clic pe link.
<p>Exemplu link cu atribut download.<br>
 - La clic pe link, resursa de la adresa 'href' va fi descarcata.</p>
 <a href='/imgs/smile_gift.png' title='Image' id='lnk1' download='smile'><img src='/imgs/smile_gift.png' alt='Smile' width='40' height='35'> Link image</a>
<p>La clic pe urmatorul buton va fi adaugat la #resp valoarea atributului download.</p>
 <button id='btn1'>Attr download</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var dwl = document.getElementById('lnk1').download;
 document.getElementById('resp').innerHTML = dwl;
});
</script>
hash - returneaza sau seteaza sirul din adresa de la 'href' care urmeaza dupa caracterul diez (#).
<p>Exemplu #hash.<br>
 <a href='/javascript/proprietati-metode-element-html#hshmoh' title='Metode obiect html' id='lnk1'>/javascript/proprietati-metode-element-html#hshmoh</a>
</p>
<p>Portiunea 'hash' din link e: <em id='resp'>hash</em></p>

<script>
var hash = document.getElementById('lnk1').hash;
document.getElementById('resp').innerHTML = hash;
</script>
host - contine numele domeniului si numarul de port (daca e specificat) din adresa de la 'href'.
<p>Exemplu link.host<br>
 <a href='https://marplo.net/javascript' title='Curs JS' id='lnk1'>https://marplo.net/javascript</a>
</p>
<p>Proprietatea 'host' contine: <em id='resp'>host</em></p>

<script>
var host = document.getElementById('lnk1').host;
document.getElementById('resp').innerHTML = host;
</script>
hostname - contine numele domeniului din adresa de la 'href'.
<p>Exemplu link.hostname<br>
 <a href='https://marplo.net/html' title='Curs HTML' id='lnk1'>https://marplo.net/html</a>
</p>
<p>Proprietatea 'hostname' contine: <em id='resp'>host</em></p>

<script>
var hostn = document.getElementById('lnk1').hostname;
document.getElementById('resp').innerHTML = hostn;
</script>
href - seteaza sau returneaza adresa completa de la 'href'.
<p>Exemplu link.href<br>
 <a href='//marplo.net/javascript' title='Curs JavaScrip' id='lnk1'>Test Link</a>
</p>
<p>La clic pe buton afiseaza la #resp valoarea de la 'href', apoi adauga alta adresa.<br>
 - La al doilea clic pe buton va afisa noua adresa.</p>
 <button id='btn1'>Attr href</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.href;
 lnk.href ='//gamv.eu/';
});
</script>
origin - contine partea din adresa de la 'href' cu protocol, hostname (domeniu) si port (daca e specificat).
<p>Exemplu link.origin<br>
 <a href='https://marplo.net/javascript' title='Curs JavaScrip' id='lnk1'>https://marplo.net/javascript</a>
</p>
<p>Proprietatea origin contine: <em id='resp'>origin</em></p>

<script>
var org = document.getElementById('lnk1').origin;
document.getElementById('resp').innerHTML = org;
</script>
password - returneaza sau seteaza partea 'password' (parola) din adresa de la 'href' (daca e specificata, inainte de numele domeniului).
<p>Exemplu link.password<br>
 <a href='//nume_user:parola@marplo.net/ajax' title='Curs ajax' id='lnk1'>//nume_user:parola@marplo.net/ajax</a>
</p>
<p>La clic pe buton afiseaza la #resp valoarea de la 'password', apoi adauga alta parola.<br>
 - La al doilea clic pe buton va afisa noua parola.</p>
 <button id='btn1'>password</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.password;
 lnk.password ='alt-pass';
});
</script>
pathname - returneaza sau seteaza partea din adresa de la 'href' dupa numele domeniului, cu '/' la inceput.
<p>Exemplu pathname.<br>
 <a href='//marplo.net/javascript/sintaxajs.html' title='Sintaxa JS' id='lnk1'>marplo.net/javascript/sintaxajs.html</a>
</p>
<p>La clic pe buton adauga la #resp valoarea proprietatii 'pathname', apoi seteaza alt 'pathname'.<br>
 - La al doilea clic pe buton va afisa noua adresa.</p>
 <button id='btn1'>pathname</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.pathname;
 lnk.pathname ='/javascript/obiectul-string';
});
</script>
port - returneaza sau seteaza numarul port-ului din adresa link-ului (daca e specificat).
<p>Exemplu link.port<br>
 <a href='https://marplo.net:4097/html' title='Curs HTML' id='lnk1'>https://marplo.net:4097/html</a>
</p>
<p>Proprietatea 'port' contine: <em id='resp'>port</em></p>

<script>
var port = document.getElementById('lnk1').port;
document.getElementById('resp').innerHTML = port;
</script>
protocol - returneaza sau seteaza partea de protocol din adresa link-ului, cu ':' la sfarsit.
<p>Exemplu protocol.<br>
 <a href='https://marplo.net/javascript' title='Curs JavaScrip' id='lnk1'>https://marplo.net/javascript</a>
</p>
<p>Proprietatea protocol contine: <em id='resp'>protocol</em></p>

<script>
var protocol = document.getElementById('lnk1').protocol;
document.getElementById('resp').innerHTML = protocol;
</script>
referrerPolicy - returneaza sau seteaza valoarea atributului referrerpolicy. Se pot seta urmatoarele valori:
- no-referrer - referrer HTTP header nu va fi transmis.
- origin - referrer-ul transmis va fi originea paginii (protocol, domeniu si port).
- unsafe-url - referrer-ul va include originea si 'pathname' din adresa paginii.
<p>Exemplu referrerPolicy.<br>
 <a href='//marplo.net/html/linkuri.html' title='Creare linkuri' id='lnk1' referrerpolicy='origin'>Link cu atribut referrerpolicy</a>
</p>
<p>La clic pe buton afiseaza la #resp valoarea proprietatii 'referrerPolicy', apoi seteaza alta valoare.<br>
 - La al doilea clic pe buton va afisa valoarea adaugata.</p>
 <button id='btn1'>referrerPolicy</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.referrerPolicy;
 lnk.referrerPolicy ='no-referrer';
});
</script>
rel - returneaza sau seteaza valoarea atributului rel.
<p>Exemplu link.rel<br>
 <a href='//marplo.net/html/linkuri.html' title='Creare linkuri' id='lnk1' rel='nofollow'>Link cu atribut rel</a>
</p>
<p>La clic pe buton afiseaza la #resp valoarea proprietatii 'rel', apoi seteaza alta valoare.<br>
 - La al doilea clic pe buton va afisa valoarea adaugata.</p>
 <button id='btn1'>Seteaza rel</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.rel;
 lnk.rel ='follow';
});
</script>
search - returneaza sau seteaza sirul 'query' (parametri dupa '?') din adresa link-ului, inclusiv '?'.
<p>Exemplu link.search<br>
 <a href='//marplo.net/stai-linistit.htm?id=1&pg=page' title='Stai linistit' id='lnk1'>marplo.net/stai-linistit.htm?id=1&pg=page</a>
</p>
<p>Proprietatea search contine: <em id='resp'>search</em></p>

<script>
var src = document.getElementById('lnk1').search;
document.getElementById('resp').innerHTML = src;
</script>
target - returneaza sau seteaza valoarea atributului 'target'.
<p>Exemplu link.target<br>
 <a href='//marplo.net/css' title='Curs css' target='_blank' id='lnk1'>Curs CSS</a>
</p>
<p>Proprietatea target contine valoarea: <em id='resp'>target</em></p>

<script>
var target = document.getElementById('lnk1').target;
document.getElementById('resp').innerHTML = target;
</script>
title - returneaza sau seteaza valoarea atributului 'title' din link.
<p>Exemplu link.title<br>
 <a href='//marplo.net/stai-linistit.htm' title='Pacea-i buna. Stai linistit' id='lnk1'>Test link</a>
</p>
<p>Proprietatea title contine: <em id='resp'>title</em></p>

<script>
var title = document.getElementById('lnk1').title;
document.getElementById('resp').innerHTML = title;
</script>
text - returneaza sau seteaza textul link-ului.
<p>Exemplu link.text.<br>
 <a href='//marplo.net/html/linkuri.html' title='Creare linkuri' id='lnk1'>marplo.net/html/linkuri.html</a>
</p>
<p>La clic pe buton afiseaza la #resp textul link-ului, iar la link adauga ca text valoarea de la 'title'.<br>
 - La al doilea clic pe buton va afisa textul adaugat.</p>
 <button id='btn1'>Sets link text</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.text;
 lnk.text = lnk.title;
});
</script>
username - returneaza sau seteaza partea 'username' (nume_user) din adresa de la 'href' (daca e specificat, inainte de numele domeniului).
<p>Exemplu link.username<br>
 <a href='//nume_user:parola@marplo.net/ajax' title='Curs ajax' id='lnk1'>//nume_user:parola@marplo.net/ajax</a>
</p>
<p>La clic pe buton afiseaza la #resp valoarea de la 'username', apoi adauga alta nume.<br>
 - La al doilea clic pe buton va afisa numele adaugat.</p>
 <button id='btn1'>username</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.username;
 lnk.username ='alt_nume';
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Clic pe tag-ul HTML care afiseaza o linie orizontala.
<br> <em> <hr>
Continut ...
<hr />
Alt continut sub linie ...
Care proprietate CSS defineste culoarea textului?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Clic pe functia care cauta daca un anume caracter sau text e intr-un sir.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// nu e in sir");
else alert("http:// e in sir");
Care e functia ce imparte un sir in parti de siruri intr-un array, pe baza unui separator?
array_merge() explode() implode()
$str = "mar,banana,pepene,para";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"mar", 1=>"banana", 2=>"pepene", 3=>"para")
Indicati asocierea corecta: "luna-anotimp".
April - Autumn October - Spring July - Summer
July is a beautiful summer month.
- Iulie este o frumoasa luna de vara.
Indicati asocierea corecta: "luna-anotimp".
Octubre - Primavera Julio - Verano Abril - OtoƱo
Julio es un hermoso mes de verano.
- Iulie este o frumoasa luna de vara.
Obiectul anchor si Lucru cu adrese din link

Last accessed pages

  1. Articolul din limba engleza - The article (70362)
  2. Proverbe, expresii si zicatori (24700)
  3. Prezentul continuu - Exercitii si teste incepatori (39388)
  4. Creare documente PDF cu PHP si FPDF (1323)
  5. Diferenta dintre doua date de timp si ore (336)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (537)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (510)
  3. Coduri pt culori (337)
  4. Creare si editare pagini HTML (183)
  5. Formatare text in pagina html (177)