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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Obiectul anchor si Lucru cu adrese din link

Last accessed pages

  1. Programe si scripturi pentru webmasters (5337)
  2. Caractere speciale - Entitati HTML (13763)
  3. Rechizite si obiecte scolare (2253)
  4. Articolul din limba engleza - The article (69440)
  5. Definire Variabile si Constante (6327)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (678)
  2. Coduri pt culori (303)
  3. Exercitii engleza - English Tests and exercises - Grammar (301)
  4. Gramatica limbii engleze - Prezentare Generala (295)
  5. Cursuri limba engleza gratuite si lectii online (272)