Scribd
Upload
29 views

Course 9 - Javascript: Navigator History Location

This document provides information on JavaScript objects related to the browser and web pages. It discusses the Navigator object and its properties like appName and appVersion that provide information about the browser. It also covers the History object which manages the browser history and allows navigating forwards and backwards. Additionally, it discusses the Location object and its properties like href that provide URL information for the current page. It provides examples of how to access and use these object properties in JavaScript code to retrieve browser and URL details.

Uploaded by

Buțu Andreea-Maria
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views

Course 9 - Javascript: Navigator History Location

This document provides information on JavaScript objects related to the browser and web pages. It discusses the Navigator object and its properties like appName and appVersion that provide information about the browser. It also covers the History object which manages the browser history and allows navigating forwards and backwards. Additionally, it discusses the Location object and its properties like href that provide URL information for the current page. It provides examples of how to access and use these object properties in JavaScript code to retrieve browser and URL details.

Uploaded by

Buțu Andreea-Maria
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Course 9 – JavaScript

Objects Navigator, History and Location - objects of I level.

1. Object Navigator:
 appCodeName - represents the code name of the browser
 appName - represents the official name of the browser
 appVersion – the browser version
 language – the language of the browser
 mimeTypes -reffers to an array of objects Mimetype that contains all types MIME
accepted by the browser
 platform – a string that represents the platform on which the browser is running
 plugins -reffers to an array fo objects Plugin that contains all modeuls plugin installed
on browser
 userAgent – string that represent the antet user-agent
Methods of the object navigator are:
 javaEnabled() – function that tests if the browser know or not the java Language
 plugins.refresh() – search any modules plugin new installed
 preference() – allows to read and establish preferences of user in browser
 taintEnabled() - test if the contamination of data is activated

Example: display the properties and the methods of the used navigator:
<body>
<script type="text/javascript">
document.write("Name cod :".bold()+navigator.appCodeName+"<br>");
document.write("Name browser :".bold()+navigator.appName+"<br>");
document.write("version :".bold()+navigator.appVersion+"<br>");
document.write("language:".bold()+navigator.language+"<br>");
document.write("MIME Type :".bold()+navigator.mimeTypes+"<br>");
document.write("Platforme :".bold()+navigator.platform+"<br>");
document.write("Plugin :".bold()+navigator.plugins+"<br>");
document.write("Agent :".bold()+navigator.userAgent+"<br>");
document.close();
</script> </body>
In your page will be displayed:

Name cod :Mozilla


Name browser :Netscape
version :5.0 (Windows)
language:ro-RO
MIME Type :[object MimeTypeArray]
Platforme :Win32
Plugin:[object PluginArray]
Agent :Mozilla/5.0 (Windows NT 5.1; rv:34.0) Gecko/20100101 Firefox/34.0

2. Object History:
 current -reffers to the URL current adress from the history list
 length - returns the number of entries from the history list
 next -reffers to the next URL adress from the history list
 previous -reffers to the previous URL address from the history list

Methods of object History are:


 back() – upload the last URL adress from the hystorical list
 forward() – upload the next URL adress from the hystorical list
 go(x) – upload an URL adress, equivalent to a jump in the number of "x" (positive
or negative) in historical list. If we want to come back with 3 pages in historical
list, we can use a function and object History:
<script type="text/javascript">
function inapoi3
{
window.history,go(-3);
}
</script>

3. Object Location:
 hash - represents a name of ancora in URL adress, that starts with character diez (#)
 host - represents name of host computer and the port number of URL address
 hostname - represents the part with the partea cu numele calculatorului gazda din
adresa URL
 href - represents adress URL completa
 pathname - represents the part PATH_INFO of the adress URL
 port - represents the port of the URL address
 protocol – represents the the protocol part of the URL address
 search – searching the URL address, included the character "?"

Methods of object location are:


 reload() – reload the current URL adress in the browser window
 replace() – upload the new page transferred in the current browser

Example: We want to take some parts from the URL address in a JS script – domain and path
to the current page or the entire adress (without protocol: ("http:", "https":):

<script type="text/javascript">
function get_url()
{
var domeniu = window.location.hostname; // take the domain name from the
URL adress
var cale = window.location.pathname; // take path – director and the current
page
var url = domeniu+cale; // Compose variable to form URL address (without
protocol)
alert("The page address is: \n" + url);
}
</script>
<form action=""><input type="button" value="Click" onclick="get_url()" /></form>
RESULT????
To find the protocol portion of the URL adress:
<script type="text/javascript">
var protocol = window.location.protocol;
</script>
The rules for working in JS based on objects:
- first an object of high level is added (ex. Window);
- character (.);
- the next sub-object in which we want to wirk is added; here the sub object is
location;
- character (.);
- the property of this object that we want to make reference.
HOMEWORK: Create others examples with objects properties and methods, learned until now.

Mimetype, Plughin, Anchor, Area, Applet, Layer and Link

1. Object Mimetype:
The Multipurpose Internet Mail Extensions (MIME) type is a standardized way to indicate the
nature and the format of a document. The Internet Assigned Numbers Authority (IANA) is the
official body responsible to keeping track of all official MIME types, and you can find the
most up-to-date and complete list at the Media Types page.
Browsers often use the MIME type (and not the file extension) to determine how it will
process a document; it is therefore important that servers are set up correctly to attach the
correct MIME type to the header of the response object.
 description - contains the description of the object Mimetype
 enabledPlugin - contains the plugin module for a Mimetype object
 suffixes - contains file extension for Mimetype
 type - contains representation type string of object Mimetype

Example:
<head>
<script type="text/javascript">
function GetMimeTypes () {
var message = "";
// Internet Explorer supports the mimeTypes collection, but it is empty
if (navigator.mimeTypes && navigator.mimeTypes.length > 0)
{
var mimes = navigator.mimeTypes;
for (var i=0; i < mimes.length; i++) {
message += "<b>" + mimes[i].type + "</b> : " + mimes[i].description +
"<br />";
}
}
else {
message = "Your browser does not support this example!";
}
var info = document.getElementById ("info");
info.innerHTML = message;
}
</script>
</head>
<body onload="GetMimeTypes ()">
Supported MIME types:
<div id="info" style="width:500px; height:300px; overflow:auto; background-
color:#e0d0d0;"></div>
</body>

2. Object Plughin:
 description -reffers to a description of the plugin module
 filename -reffers to file name plugin program
 length -reffers to number of MIME types contained in picture
 name -reffers to plugin module name

Example 1:
<head>
<script type="text/javascript">
function UpdatePlugins ()
{
if (navigator.plugins)
{
navigator.plugins.refresh ();
alert ("The plugins collection is updated!");
}
else
{
alert ("Your browser does not support this example!");
}
}
</script>
</head>
<body>
<button onclick="UpdatePlugins ();">Update plugins!</button>
</body>

Example 2 - displays information about the installed plugin(s):


var pluginsLength = navigator.plugins.length;
document.body.innerHTML = pluginsLength + " Plugin(s)<br>"
+ '<table id="pluginTable"><thead>'
+'<tr><th>Name</th><th>Filename</th><th>description</th><th>version</th></tr>'
+'</thead><tbody></tbody></table>';
var table = document.getElementById('pluginTable');
for(var i = 0; i < pluginsLength; i++) {
let newRow = table.insertRow();
newRow.insertCell().textContent = navigator.plugins[i].name;
newRow.insertCell().textContent = navigator.plugins[i].filename;
newRow.insertCell().textContent = navigator.plugins[i].description;
newRow.insertCell().textContent =
navigator.plugins[i].version?navigator.plugins[i].version:"";
}

3. Object Anchor:
 name - name that offers acces to the anchor from a link
 text - text that appears between tags <a> and </a>
 x - coordonate x of anchor
 y - coordínate y of the anchor

4. Object Area:
Properties of the object Area:

 hash – part of the URL address which is the anchor, included the sign #
 host - numele calculatorului gazda (adresa IP) si portul specificat in adresa URL
 hostname – name of calculatorului gazda specificat in adresa URL
 href – the entire adress URL
 pathname - calea fisierului specificat in adresa URL, incepand cu simbolul /
 port - port specified in URL adress
 protocol - protocolul specificat in adresa URL, inclusiv caracterul doua puncte ( : )
 search - partea de cautare a adresei URL, inclusiv caracterul initial semnul intrebarii
(? )
 target - numele ferestrei tinta in care ar trebui afisata adresa URL
 text - text that appears between tags <area> and </area>
 x – x coordinate of the surface
 y – y coordinate of the surface

5. Object Applet:

6. Object Layer:
 above - specifica stratul de deasupra
 background -reffers to la imaginea de fundal a stratului
 below - specifica stratul de dedesubt
 bgColor -reffers to la culoarea de fundal a stratului
 clip.bottom -reffers to la partea de jos a suprafetei decupate a stratului
 clip.height -reffers to la inaltimea suprafetei decupate a stratului
 clip.left -reffers to la partea stanga a suprafetei decupate a stratului
 clip.right -reffers to la partea dreapta a suprafetei decupate a stratului
 clip.top -reffers to la partea de sus a suprafetei decupate a stratului
 clip.width -reffers to la latimea suprafetei decupate a stratului
 document -reffers to la Object "Document" care contains stratul
 left -reffers to la coordonata X a stratului
 name -reffers to la numele stratului
 pageX -reffers to la coordonata X, relativ la document
 pageY -reffers to la coordonata Y, relativ la document
 parentLayer -reffers to la stratul containe
 rsiblingAbove -reffers to la stratul de deasupra in "zIndex"
 siblingBelow -reffers to la stratul de dedesubt in "zIndex"
 src -reffers to la adresa URL sursa pentru strat
 top - face referie la coordonata Y a stratului
 visibility -reffers to la starea de vizibilitate a stratului
 window -reffers to la Object "Window" sau "Frame" care contains stratul
 x -reffers to la coordonata X a stratului
 y -reffers to la coordonata Y a stratului
 zIndex -reffers to la ordinea z-relativa a acestui strat in raport cu fratii lui

Methods of the object Layer are:


 captureEvent() - specifica tipul de event e care sa fie capturate
 handleEvent() - call handlerul pentru event ul specificat
 load() – upload a new URL adress
 moveAbove() - deplaseaza stratul deasupra altui strat
 moveBelow() - deplaseaza stratul sub alt strat
 moveBy() - deplaseaza stratul intr-o pozitie specificata
 moveTo() - deplaseaza coltul din stanga sus al ferestrei la coordonatele specificate ale
ecranului
 moveToAbsolute() - modify pozitia stratului in pagina, conform coordonatelor specificate in
pixeli
 releaseEvents() - stabileste ca stratul sa elibereze event ele capturate de tipul specificat
 resizeBy() - redimensioneaza stratul cu valorile de inaltime si latime specificate
 resizeTo() - redimensioneaza stratul la valorile de inaltime si latime specificate

7. Object Link:
Properties of the object Link are:

 hash - represents o denumire de ancora in adresa URL pt. legatura, care cu caracterul
diez ( # )
 host - represents the host computer portion of the URL associated with a link
(contact)
 hostname - represents portiunea de nume al calculatorului gazda din adresa URL
asociata cu o legatura
 href - represents the URL adress associated with a link
 pathname - represents portiunea numelui de cale a legaturii URL
 port - represents portiunea de port a legaturii URL
 protocol - specify portiunea de protocol a legaturii URL
 search - represents portiunea de interogare a legaturii URL
 target - represents the name of the object Window in care este afisata legatura
 x -reffers to X coordinate of the link
 y -reffers to Y coordinate of the link
 text - text used to create the link
Button, Checkbox, FileUpload, Hidden, Password, Radio

1. Object Button:
 form - returns Object Form al carui membru este butonul
 name - returns sirul specificat in atributul name al etichetei HTML <input>
 type - returns sirul specificat in atributul type al etichetei HTML <input>
 value - returns sirul care apare in reprezentarea grafica a unui buton, afisata in
browser.

Methods of object Button:


 blur() - dezactiveaza butonul
 click() - call an event click for the button;
 focus() - event de activare a butonului
 handle Event() - transfera un event handlerului de event corespunzator.

2. Object Checkbox:
 checked - returns a boolean value that determine if the checkbox is checked
 defaultChecked - returns a boolean value that keep the initial state of the checkbox
 form - returns the form object of the checheckbox
 name - returns string specified in the attribute name of the tag HTML <input>
 type - returns string specified in the attribute type of the tag HTML <input>
 value - returns o value returned when the form is submitted
Methods of object Checkbox:
 blur() – deactivate checkbox
 click() - call an event click for checkbox
 focus() - event for activate a checkbox
 handle Event() - transfer an event top event handler

3. Object FileUpload:
 form -reffers to la Object Form ce contains caseta FileUpload
 name - contains sirul specificat in atributul name al casetei FileUpload
 type - contains sirul specificat in atributul type al casetei FileUpload
 value - contains sirul care specifica numele caii fisierului pt. upload
Methods of "FileUpload":

 blur() - dezactiveaza caseta FileUpload


 focus() - activeaza caseta FileUpload
 handle Event() - transfera un event handlerului de event corespunzator
 select() - selecteaza suprafata de adaugare a datelor pentru caseta FileUpload.

4. Object Hidden:
 form -reffers to la form that contains object Hidden
 name - contains name of the object Hidden
 type - contains string specified in the attribute type of the box Hidden
 value - contains string specified in the attribute value of object Hidden

5. Object Password:
 defaultValue -reffers to the attribute value pf the box for the password from the
HTML form
 name - contains sirul specificat in atributul name al pt. parola
 type - contains sirul specificat in atributul type al casetei pt. Parola
 value -reffers to la continutul curent din caseta pt. parola

Methods of object Password:


 blur() – deactivate the box for password
 focus() - activate the box for password
 handle Event() - transfer an event to the event handler
 select() - select the text added in the box for password

6. Object Radio:
 checked - returneaza o valoare care determina daca este bifat Object radio
 defaultChecked - returns o valoare care pastreaza starea initiala a Objectui Radio,
care se stabileste cu atributul "checked" al etichetei <input> respective
 form - returns Object Form ce contains Object Radio
 name - contains sirul specificat in atributul name al etichetei <input>
 type - contains sirul specificat in atributul type al etichetei <input>
 value -reffers to la atributul value al etichetei <input>
Methods of the object Radio:
 blur() - dezactiveaza Object Radio
 click() - call un event "click" pt. Object Radio focus() - activeaza un buton radio
 handle Event() - transfera un event handlerului de event corespunzator

Obiecte Reset, Submit, Select, Text, Textarea and Option

1. Object Reset:
 form - returns Object Form that contains the button
 name - contains string specified in the attribute name of tag <input> coresponding to
the button
 type - contains string specified in the attribute type of tag <input>
 value - returns string added in the attribute value from the tag <input> of button
Methods of the object Reset:
 blur() - deactivate button
 click() - call an event "click" for the button
 focus() – activate the button

2. Object Submit:
 form - returns data din intreg formularul ce contains butonul "submit"
 name - returns sirul specificat in atributul name al etichetei <input> corespunzatoare
butonului
 type - returns sirul specificat in atributul type din eticheta <input> a butonului "submit"
 value - returns sirul adaugat in atributul value din eticheta <input> a butonului
Methods of the object Submit are:
 blur() - dezactiveaza butonul
 click() - call un event "click" pt. butonul respective
 focus() - activeaza butonul
 handle Event() - call handlerul pt. event ul specificat

3. Object Select:
 form - returns Object Form that contains slection list
 length - returns number of options from the selection list
 name - returns string specified in the attribute name of tag HTML
 type - returns string specified in attribute type of tag HTML (pentru instantele select
ce contin atributul "multiple" returns "select-multiple", iar pentru cele fara acest
atribut returns "select-one")
 options - returns un tablou ce contains toate elementele din caseta de selectare.
Elementele sunt definite cu eticheta HTML <options>. aceasta proprietate are doua
subproprietati: "length" si "selectedIndex"
 selectedIndex - returns un numar care specifica indicele optiunii selectate din caseta
de selectare
Methods of object Select:
 blur() – deactivate selection box
 click() - call un event "click" for selection box
 handleEvent() - transfer an event to handler event

4. Object Text:
 defaultValue - returns the value of text box, specified by the attribute form - returns
Object Form that contains text box
 name - returns the string specified in the attribute name of the HTML tag
 type - returns the string specified in the attribute type of HTML tag
 value - returns value displayed in the textbox

Methods of the object Text:


 blur() – deactivates the textbox
 focus() – activate box type text
 handleEvent() - transfer an event to the handler evens coreesponding
 select() - select text from the textbox

5. Object Textarea:
 defaultValue - returns the value of text area, specified between tags <textarea>
 form - returns Object Form that contains textarea box
 name - returns string specified in attribute name of HTML tag
 type - returns string specified in the attribute type of HTML tag
 value - returns value displayed in the textarea box
Methods of the object Textarea are:
 blur() – deactivate text area
 focus() - activate text area
 handleEvent() - transfer an event to the events handler
 select() - select text from text area

6. Object Option (level 4):


 defaultSelected -reffers to the option that is selected in default box
 index -reffers to the location indexed of an element in the table "Select options" (starts
with 0)
 selected -reffers to the value selected in the checkbox
 text -reffers to the text for option
 value -reffers to the value that is returned when the option is selected.

You might also like