Javascript Course

The anchor object represents the <a> HTML elements (used for links).
In addition to the properties and methods specific to html elements (presented at: //coursesweb.net/javascript/properties-methods-html-elements ), the anchor object contains its own properties, useful for working with URL addresses (links added in <a> tags).


Properties of the anchor object

The properties of the anchor object are similar to those of the navigator object, but they sre applied to the <a> elements in JavaScrip.

download - returns or sets the value of the 'download' attribute from a link.
- This attribute indicates that the link is for download, the resource will be downloaded when the link is pressed. 
<p>Example link with download attribute.<br>
 - When you click on the following link, the resource from URL in 'href' will be downloaded.</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>When you click on the following button, it adds in #resp the value of the download attribute.</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 - sets or returns the anchor part of the href attribute value (the string after #). 
<p>Example #hash.<br>
 <a href='/javascript/properties-methods-html-elements#hshmoh' title='Metods for html objects' id='lnk1'>/javascript/properties-methods-html-elements#hshmoh</a>
</p>
<p>The 'hash' part from the link above: <em id='resp'>hash</em></p>

<script>
var hash = document.getElementById('lnk1').hash;
document.getElementById('resp').innerHTML = hash;
</script>
host - sets or returns the hostname and port part of the href attribute value. 
<p>Example link.host<br>
 <a href='https://coursesweb.net/javascript' title='JavaScript Course' id='lnk1'>https://coursesweb.net/javascript</a>
</p>
<p>The 'host' property contains: <em id='resp'>host</em></p>

<script>
var host = document.getElementById('lnk1').host;
document.getElementById('resp').innerHTML = host;
</script>
hostname - sets or returns the hostname part of the href attribute value. 
<p>Example link.hostname<br>
 <a href='https://coursesweb.net/html' title='HTML Course' id='lnk1'>https://coursesweb.net/html</a>
</p>
<p>The 'hostname' property contains: <em id='resp'>host</em></p>

<script>
var hostn = document.getElementById('lnk1').hostname;
document.getElementById('resp').innerHTML = hostn;
</script>
href - sets or returns the value of the href attribute of a link. 
<p>Example link.href<br>
 <a href='//coursesweb.net/javascript' title='JavaScrip Course' id='lnk1'>Test Link</a>
</p>
<p>When you click the following button, it adds at #resp the value from 'href', then adds another address.<br>
 - The second click on the button it displays the new address.</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 - contains the protocol, hostname and port part of the href attribute value. 
<p>Example link.origin<br>
 <a href='https://coursesweb.net/javascript' title='JavaScrip Course' id='lnk1'>https://coursesweb.net/javascript</a>
</p>
<p>The origin property contains: <em id='resp'>origin</em></p>

<script>
var org = document.getElementById('lnk1').origin;
document.getElementById('resp').innerHTML = org;
</script>
password - sets or returns the password part of the href attribute value. 
<p>Example link.password<br>
 <a href='//user_name:pass@coursesweb.net/ajax' title='Ajax Course' id='lnk1'>//user_name:pass@coursesweb.net/ajax</a>
</p>
<p>When you click the following button, it adds at #resp the value from 'password', then it adds another password.<br>
 - The second click on the button it displays the new password.</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 ='another-pass';
});
</script>
pathname - sets or returns the pathname part of the href attribute value (the string after domain name). 
<p>Example pathname.<br>
 <a href='//coursesweb.net/javascript/javascript-syntax' title='JS Syntaxa' id='lnk1'>coursesweb.net/javascript/javascript-syntax</a>
</p>
<p>When you click the following button, it adds at #resp the value of the 'pathname' property, then it sets another 'pathname'.<br>
 - The second click on the button it displays the new address.</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/strings';
});
</script>
port - sets or returns the port part of the link address. 
<p>Example link.port<br>
 <a href='https://coursesweb.net:4097/html' title='HTML Course' id='lnk1'>https://coursesweb.net:4097/html</a>
</p>
<p>The 'port' property contains: <em id='resp'>port</em></p>

<script>
var port = document.getElementById('lnk1').port;
document.getElementById('resp').innerHTML = port;
</script>
protocol - sets or returns the protocol part of the href attribute value. 
<p>Example protocol.<br>
 <a href='https://coursesweb.net/javascript' title='JavaScrip Course' id='lnk1'>https://coursesweb.net/javascript</a>
</p>
<p>The protocol property contains: <em id='resp'>protocol</em></p>

<script>
var protocol = document.getElementById('lnk1').protocol;
document.getElementById('resp').innerHTML = protocol;
</script>
referrerPolicy - returns or sets the value of the referrerpolicy. You can set the following values:
- no-referrer - HTTP referrer header will not be sent.
- origin - the referrer is the page origin (protocol, domein and port).
- unsafe-url - the referrer will contains the page origin and the 'pathname'. 
<p>Example referrerPolicy.<br>
 <a href='//coursesweb.net/html/hyperlinks-links' title='Creating links' id='lnk1' referrerpolicy='origin'>Link with referrerpolicy attribute</a>
</p>
<p>When you click the following button, it adds at #resp the value of the 'referrerPolicy', then it sets another value.<br>
 - The second click on the button it shows the added value.</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 - sets or returns the value of the rel attribute of a link. 
<p>Example link.rel<br>
 <a href='//coursesweb.net/html/hyperlinks-links' title='Creating links' id='lnk1' rel='nofollow'>Link with rel attribute</a>
</p>
<p>When you click the following button, it adds at #resp the value of the 'rel' attribute, then it sets another value.<br>
 - The second click on the button it shows the added value.</p>
 <button id='btn1'>Sets 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 - sets or returns the querystring part of the href attribute value (the parameters after '?', including '?'). 
<p>Example link.search<br>
 <a href='//coursesweb.net/stay-quiet.htm?id=1&pg=page' title='Stay quiet' id='lnk1'>coursesweb.net/stay-quiet.htm?id=1&pg=page</a>
</p>
<p>The search property contains: <em id='resp'>search</em></p>

<script>
var src = document.getElementById('lnk1').search;
document.getElementById('resp').innerHTML = src;
</script>
target - sets or returns the value of the target attribute of a link. 
<p>Example link.target<br>
 <a href='//coursesweb.net/css' title='css course' target='_blank' id='lnk1'>CSS Course</a>
</p>
<p>The target property contains the value: <em id='resp'>target</em></p>

<script>
var target = document.getElementById('lnk1').target;
document.getElementById('resp').innerHTML = target;
</script>
title - returns or sets the value of the 'title' attribute. 
<p>Example link.title<br>
 <a href='//coursesweb.net/stay-quiet.htm' title='Peace is Good. Stay quiet' id='lnk1'>Test link</a>
</p>
<p>The title property contains: <em id='resp'>title</em></p>

<script>
var title = document.getElementById('lnk1').title;
document.getElementById('resp').innerHTML = title;
</script>
text - sets or returns the text content of a link. 
<p>Example link.text.<br>
 <a href='//coursesweb.net/html/hyperlinks-links' title='Creating links' id='lnk1'>coursesweb.net/html/hyperlinks-links</a>
</p>
<p>When you click the following button, it adds at #resp the text content of the link, then it sets the text with the value from 'title'.<br>
 - The second click on the button it shows the added text.</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 - sets or returns the username part of the href attribute value. 
<p>Example link.username<br>
 <a href='//user_name:pass@coursesweb.net/ajax' title='Ajax Course' id='lnk1'>//user_name:pass@coursesweb.net/ajax</a>
</p>
<p>When you click the following button, it adds at #resp the value from 'username', then it adds another name.<br>
 - The second click on the button it shows the added name.</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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus 
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
anchor and link object

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (137562)
  2. Recursive function to create Multi-Level Menu in PHP (11769)
  3. Force Download files with PHP (5056)
  4. The Truth Is (575)
  5. Create simple Website with PHP (43824)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (251)
  2. Read Excel file data in PHP - PhpExcelReader (91)
  3. PHP Unzipper - Extract Zip, Rar Archives (76)
  4. The Four Agreements (75)
  5. The Mastery of Love (66)
Chat
Chat or leave a message for the other users
Full screenInchide