Příklady objektů prohlížeče JavaScript

Obsah

    Zobrazit obsah

Příklady použití JavaScriptu pro přístup a manipulaci s objekty prohlížeče.

Objekt okna

Kliknutím na tlačítko otevřete nové okno

<!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>

Otevřete nové okno a ovládejte jeho vzhled

<!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>

Rozostření a zaostření v novém okně

<!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>

Zavřete nové okno

<!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>

Zkontroluje, zda bylo nové okno zavřeno nebo ne

<!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>

Napište nějaký text do zdrojového (nadřazeného) okna

<!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>

Posuňte nové okno vzhledem k jeho aktuální poloze

<!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>

Přesuňte nové okno na určené místo

<!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>

Vytiskněte aktuální stránku

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

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

</body>
</html>

Změňte velikost okna o zadané pixely

<!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>

Změňte velikost okna na zadanou velikost

<!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>

Posuňte obsah o zadaný počet 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>

Posuňte obsah na určené místo

<!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>

Okno vysvětlil

Objekt obrazovky

Obrazovka návštěvníka: Šířka

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Obrazovka návštěvníka: Výška

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Obrazovka návštěvníka: Dostupná šířka

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Obrazovka návštěvníka: Dostupná výška

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Obrazovka návštěvníka: Barevná hloubka

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Obrazovka návštěvníka: Pixel Depth

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Obrazovka vysvětlena

Umístění objektu

Vraťte název hostitele a port aktuální adresy 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>

Vrátit celou adresu URL aktuální stránky

<!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>

Vraťte název cesty aktuální adresy 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>

Vraťte protokolovou část aktuální adresy 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>

Načtěte nový dokument

<!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>

Nahradit aktuální dokument

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Vylomit se z rámu

<!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>

Místo vysvětleno

Historie objektu

Zobrazení počtu adres URL v seznamu historie

<!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>

Vytvořte na stránce tlačítko zpět

<!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>

Vytvořte na stránce tlačítko vpřed

<!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>

Načtěte konkrétní adresu URL ze seznamu historie

<!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>

Historie vysvětlena

Objekt navigátoru

Jsou v prohlížeči návštěvníka povoleny soubory cookie?

<!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>

Jak se jmenuje prohlížeč návštěvníka?

<!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>

Jaký je název vyhledávače návštěvníka?

<!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>

Jaké jsou informace o verzi prohlížeče návštěvníka?

<!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>

Jaké jsou informace uživatelského agenta prohlížeče návštěvníka?

<!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>

Jaká je platforma prohlížeče návštěvníka?

<!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>

Jaký je jazyk prohlížeče návštěvníka?

<!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>

Je v prohlížeči návštěvníka povolena 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>

Navigátor vysvětlil

Popup Box

Zobrazit pole s upozorněním

<!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>

Ukažte zalomení řádků ve výstražném poli

<!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>

Zobrazte potvrzovací pole

<!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>

Zobrazte okno s výzvou

<!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>

Popup vysvětlil

Načasování

Jednoduché načasování

<!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>

Další jednoduché načasování

<!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>

Časování události v nekonečné smyčce

<!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>

Časování události v nekonečné smyčce - s tlačítkem Stop

<!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>

Hodiny vytvořené pomocí časové události

<!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>

Nastavte a zastavte časovač pomocí setInterval() a 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>

Načasování vysvětleno

Soubory cookie

Vytvořte uvítací 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>