Παραδείγματα αντικειμένων προγράμματος περιήγησης JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Παραδείγματα χρήσης JavaScript για πρόσβαση και χειρισμό των αντικειμένων του προγράμματος περιήγησης.

Αντικείμενο παραθύρου

Ανοίξτε ένα νέο παράθυρο όταν κάνετε κλικ σε ένα κουμπί

<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
  window.open("https://www.w3schools.com");
}
</script>
</head>
<body>

<form>
  <input type="button" value="Open Window" onclick="openWin()">
</form>

</body>
</html>

Ανοίξτε ένα νέο παράθυρο και ελέγξτε την εμφάνισή του

<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
  window.open("https://www.w3schools.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>
</head>
<body>

<form>
  <input type="button" value="Open Window" onclick="openWin()">
</form>

</body>
</html>

Θάμπωμα και εστίαση ενός νέου παραθύρου

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=400, height=200");
  myWindow.blur();
}
function blurWin() {
  myWindow.blur();
}
function focusWin() {
  myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="Open new window" onclick="openWin()">
<input type="button" value="Blur new window" onclick="blurWin()">
<input type="button" value="Focus new window" onclick="focusWin()">

</body>
</html>

Κλείστε το νέο παράθυρο

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=400, height=200");
}

function closeWin() {
  myWindow.close();
}
</script>
</head>
<body>

<input type="button" value="Open 'myWindow'" onclick="openWin()" />
<input type="button" value="Close 'myWindow'" onclick="closeWin()" />

</body>
</html>

Ελέγχει εάν το νέο παράθυρο έχει κλείσει ή όχι

<!DOCTYPE html>
<html>
<head>

<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=400 ,height=200");
}

function closeWin() {
  if (myWindow) {
    myWindow.close();
  }
}

function checkWin() {
  msg = ""
  if (!myWindow) {
    msg = "was never opened";
  } else { 
    if (myWindow.closed) { 
      msg = "is closed";
    } else {
      msg = "is open";
    }
  
  }
  document.getElementById("msg").innerHTML = 
  "myWindow " + msg;
}
</script>

</head>
<body>

<button onclick="openWin()">Open myWindow</button>
<button onclick="closeWin()">Close myWindow</button>
<button onclick="checkWin()">Is myWindow open?</button>

<br><br>
<div id="msg"></div>

</body>
</html>

Γράψτε κάποιο κείμενο στο παράθυρο προέλευσης (γονικό).

<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
  var myWindow = window.open("", "", "width=400, height=200");
  myWindow.opener.document.getElementById("demo").innerHTML = 
  "A new window has been opened.";
}
</script>
</head>
<body>

<button onclick="openWin()">Open myWindow</button>

<p id="demo"></p>

</body>
</html>

Μετακινήστε το νέο παράθυρο σε σχέση με την τρέχουσα θέση του

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("", "", "width=400, height=200");
}
function moveWin() {
  myWindow.moveBy(250, 250)
}
</script>
</head>
<body>

<input type="button" value="Open myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="Move myWindow" onclick="moveWin()" />

</body>
</html>

Μετακινήστε το νέο παράθυρο στην καθορισμένη θέση

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("", "", "width=400, height=200");
}

function moveWin() {
  myWindow.moveTo(300, 0);
  myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="Open myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="Move myWindow" onclick="moveWin()" />

</body>
</html>

Εκτυπώστε την τρέχουσα σελίδα

<!DOCTYPE html>
<html>
<head>
<script>
function printPage() {
  window.print();
}
</script>
</head>
<body>

<input type="button" value="Print this page" onclick="printPage()" />

</body>
</html>

Αλλάξτε το μέγεθος ενός παραθύρου κατά τα καθορισμένα pixel

<!DOCTYPE html>
<html>
<head>
<script>
var w;
function openwindow() {
  w = window.open('','', 'width=100,height=100');
  w.focus();
}

function myFunction() {
  w.resizeBy(50, 50);
  w.focus();
}

</script>
</head>
<body>

<button onclick="openwindow()">Create window</button>
<button onclick="myFunction()">Resize window</button>

</body>
</html>

Αλλάξτε το μέγεθος ενός παραθύρου σε ένα καθορισμένο μέγεθος

<!DOCTYPE html>
<html>
<head>
<script>
var w;
function openwindow() {
  w = window.open('','', 'width=100,height=100');
  w.focus();
}

function myFunction() {
  w.resizeTo(500, 500);
  w.focus();
}

</script>
</head>
<body>

<button onclick="openwindow()">Create window</button>
<button onclick="myFunction()">Resize window</button>

</body>
</html>

Κάντε κύλιση στο περιεχόμενο κατά τον καθορισμένο αριθμό pixel

<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
  window.scrollBy(0, 10);
}
</script>
</head>
<body>


<input type="button" onclick="scrollWindow()" value="Scroll" />

<h2>Reserved Words</h2>
<hr>
<p>You cannot use reserved words as variables, labels, or function names:</p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>

</body>
</html>

Μετακινήστε το περιεχόμενο σε μια καθορισμένη θέση

<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
  window.scrollTo(0, 100);
}
</script>
</head>
<body>

<input type="button" onclick="scrollWindow()" value="Scroll" />

<h2>Reserved Words</h2>
<hr>
<p>You cannot use reserved words as variables, labels, or function names:</p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>

</body>
</html>

Το παράθυρο εξήγησε

Αντικείμενο οθόνης

Η οθόνη του επισκέπτη: Πλάτος

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

</body>
</html>

Η οθόνη του επισκέπτη: Ύψος

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>

Η οθόνη του επισκέπτη: Διαθέσιμο πλάτος

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen width is " + screen.availWidth;
</script>

</body>
</html>

Η οθόνη του επισκέπτη: Διαθέσιμο ύψος

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen height is " + screen.availHeight;
</script>

</body>
</html>

Η οθόνη του επισκέπτη: Βάθος χρώματος

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen color depth is " + screen.colorDepth;
</script>

</body>
</html>

Η οθόνη του επισκέπτη: Βάθος εικονοστοιχείων

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen pixel depth is " + screen.pixelDepth;
</script>

</body>
</html>

Επεξήγηση της οθόνης

Αντικείμενο τοποθεσίας

Επιστρέψτε το όνομα κεντρικού υπολογιστή και τη θύρα της τρέχουσας διεύθυνσης URL

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Page hostname is: " + window.location.hostname;
</script>

</body>
</html>

Επιστρέψτε ολόκληρη τη διεύθυνση URL της τρέχουσας σελίδας

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"The full URL of this page is:<br>" + window.location.href;
</script>

</body>
</html>

Επιστρέψτε το όνομα διαδρομής της τρέχουσας διεύθυνσης URL

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
</script>

</body>
</html>

Επιστρέψτε το τμήμα πρωτοκόλλου της τρέχουσας διεύθυνσης URL

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The page protocol is: " + window.location.protocol;
</script>

</body>
</html>

Φόρτωση νέου εγγράφου

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<input type="button" value="Load new document" onclick="newDoc()">

<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
}
</script>

</body>
</html>

Αντικαταστήστε το τρέχον έγγραφο

<!DOCTYPE html>
<html>
<body>

<button onclick="window.location.replace('https://www.w3schools.com')">
Replace document</button>

</body>
</html>

Ξέσπασε από ένα πλαίσιο

<!DOCTYPE html>
<html>
<head>
<script>
function breakout() {
  if (window.top != window.self) {
    window.top.location = "tryjs_breakout.htm";
  }
}
</script>
</head>
<body>

<input type="button" onclick="breakout()" value="Break out of frame!">

</body>
</html>

Η τοποθεσία εξηγείται

Αντικείμενο Ιστορίας

Εμφάνιση του αριθμού των διευθύνσεων URL στη λίστα ιστορικού

<!DOCTYPE html>
<html>
<body>

<p>Display the number of URLs in the history list:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = history.length;
}
</script>

</body>
</html>

Δημιουργήστε ένα κουμπί επιστροφής σε μια σελίδα

<!DOCTYPE html>
<html>
<head>
<script>
function goBack() {
  window.history.back()
}
</script>
</head>
<body>

<button onclick="goBack()">Go Back</button>

<p>Clicking on the Back button here will not result in any action, because there is no previous URL in the history list.</p>

</body>
</html>

Δημιουργήστε ένα κουμπί προώθησης σε μια σελίδα

<!DOCTYPE html>
<html>
<head>
<script>
function goForward() {
  window.history.forward()
}
</script>
</head>
<body>

<button onclick="goForward()">Go Forward</button>

<p>Clicking on the Forward button here will not result in any action, because there is no next URL in the history list.</p>

</body>
</html>

Φορτώστε μια συγκεκριμένη διεύθυνση URL από τη λίστα ιστορικού

<!DOCTYPE html>
<html>
<head>
<script>
function goBack() {
  window.history.go(-2)
}
</script>
</head>
<body>

<button onclick="goBack()">Go 2 pages back</button>

<p>Clicking on the "Go 2 pages back" button here will not result in any action, because there is no previous URL in the history list.</p>

</body>
</html>

Η ιστορία εξηγείται

Αντικείμενο πλοήγησης

Είναι ενεργοποιημένα τα cookies στο πρόγραμμα περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The cookieEnabled property returns true if cookies are enabled:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled is " + navigator.cookieEnabled;
</script>

</body>
</html>

Ποιο είναι το όνομα του προγράμματος περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Navigator</h2>

<p>The appCodeName property returns the code name of the browser.</p>

<p>Do not rely on it! "Mozilla" is the application code name for Chrome, Firefox, IE, Safari, and Opera.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"navigator.appCodeName is " + navigator.appCodeName;
</script>

</body>
</html>

Ποιο είναι το όνομα του κινητήρα του προγράμματος περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The product property returns the product name of the browser.</p>

<p>Do not rely on it! Most browsers returns "Gecko" as product name!</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.product is " + navigator.product;
</script>

</body>
</html>

Ποιες είναι οι πληροφορίες έκδοσης του προγράμματος περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The appVersion property returns version information about the browser:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>

</body>
</html>

Ποιες είναι οι πληροφορίες παράγοντα χρήστη του προγράμματος περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The userAgent property returns the user-agent header sent by the browser to the server:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
navigator.userAgent;
</script>

</body>
</html>

Ποια είναι η πλατφόρμα του προγράμματος περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The platform property returns the browser platform (operating system):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"navigator.platform is " + navigator.platform;
</script>

</body>
</html>

Ποια είναι η γλώσσα του προγράμματος περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The language property returns the browser's language:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.language is " + navigator.language;
</script>

</body>
</html>

Είναι ενεργοποιημένη η Java στο πρόγραμμα περιήγησης του επισκέπτη;

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The javaEnabled() method returns true if Java is enabled:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"javaEnabled is " + navigator.javaEnabled();
</script>

</body>
</html>

Εξήγησε ο Navigator

Αναδυόμενα κουτιά

Εμφανίστε ένα πλαίσιο ειδοποίησης

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  alert("I am an alert box!");
}
</script>

</body>
</html>

Επίδειξη σπασίματος γραμμής σε ένα πλαίσιο ειδοποίησης

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>
<p>Line-breaks in a popup box.</p>

<button onclick="alert('Hello\nHow are you?')">Try it</button>

</body>
</html>

Εμφανίστε ένα πλαίσιο επιβεβαίωσης

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Confirm Box</h2>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Εμφανίστε ένα πλαίσιο προτροπής

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Prompt</h2>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  let person = prompt("Please enter your name:", "Harry Potter");
  if (person == null || person == "") {
    text = "User cancelled the prompt.";
  } else {
    text = "Hello " + person + "! How are you today?";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Εξήγησε το αναδυόμενο παράθυρο

Συγχρονισμός

Απλός συγχρονισμός

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

Άλλο ένα απλό timing

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

Συμβάν χρονισμού σε έναν άπειρο βρόχο

<!DOCTYPE html>
<html>
<body>

<button onClick="setInterval(myCounter, 1000)">Start counter!</button>

<p id="demo">Click on the button above and I will count forever.</p>

<script>
var c = 0;
function myCounter() {
  document.getElementById("demo").innerHTML = ++c;
}
</script> 

</body>
</html>

Συμβάν χρονισμού σε άπειρο βρόχο - με κουμπί Διακοπής

<!DOCTYPE html>
<html>
<body>

<button onClick="myTimer = setInterval(myCounter, 1000)">Start counter!</button>

<p id="demo">Click on the button above and I will count forever.</p>

<button onClick="clearInterval(myTimer)">Stop counter!</button>

<script>
var c = 0;
function myCounter() {
  document.getElementById("demo").innerHTML = ++c;
}
</script> 

</body>
</html>

Ένα ρολόι που δημιουργήθηκε με ένα συμβάν χρονισμού

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>

Ρυθμίστε και σταματήστε ένα χρονόμετρο με setInterval() και clearInterval()

<!DOCTYPE html>
<html>
<body>

<p id="demo">Clock</p>

<button onclick="clearInterval(myTimer)">Stop</button>

<script>
var myTimer = setInterval(myClock, 1000);
function myClock() {
  document.getElementById("demo").innerHTML = new Date().toLocaleTimeString();
}
</script>

</body>
</html>

Ο χρόνος εξηγείται

Μπισκότα

Δημιουργήστε ένα cookie καλωσορίσματος

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>