Esimerkkejä JavaScriptin käyttämisestä selainobjektien käyttämiseen ja käsittelemiseen.
Avaa uusi ikkuna, kun napsautat painiketta
<!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>
Avaa uusi ikkuna ja hallitse sen ulkoasua
<!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>
Sumenna ja tarkenna uusi ikkuna
<!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>
Sulje uusi ikkuna
<!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>
Tarkistaa, onko uusi ikkuna suljettu vai ei
<!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>
Kirjoita tekstiä lähde (emo) -ikkunaan
<!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>
Siirrä uusi ikkuna suhteessa sen nykyiseen sijaintiin
<!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>
Siirrä uusi ikkuna määritettyyn paikkaan
<!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>
Tulosta nykyinen sivu
<!DOCTYPE html>
<html>
<head>
<script>
function printPage() {
window.print();
}
</script>
</head>
<body>
<input type="button" value="Print this page" onclick="printPage()" />
</body>
</html>
Muuta ikkunan kokoa määritetyillä pikseleillä
<!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>
Muuta ikkunan koko määritettyyn kokoon
<!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>
Vieritä sisältöä määritetyn pikselimäärän verran
<!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>
Vieritä sisältöä tiettyyn kohtaan
<!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>
Ikkuna selitti
Vierailijan näyttö: Leveys
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen width is " + screen.width;
</script>
</body>
</html>
Vierailijan näyttö: Korkeus
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen height is " + screen.height;
</script>
</body>
</html>
Vierailijan näyttö: Käytettävissä oleva leveys
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen width is " + screen.availWidth;
</script>
</body>
</html>
Vierailijan näyttö: Available Height
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen height is " + screen.availHeight;
</script>
</body>
</html>
Vierailijan näyttö: Värisyvyys
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen color depth is " + screen.colorDepth;
</script>
</body>
</html>
Vierailijan näyttö: Pixel Depth
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen pixel depth is " + screen.pixelDepth;
</script>
</body>
</html>
Näytön selitys
Palauta nykyisen URL-osoitteen isäntänimi ja portti
<!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>
Palauta nykyisen sivun koko URL-osoite
<!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>
Palauta nykyisen URL-osoitteen polun nimi
<!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>
Palauta nykyisen URL-osoitteen protokolla-osa
<!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>
Lataa uusi asiakirja
<!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>
Korvaa nykyinen asiakirja
<!DOCTYPE html>
<html>
<body>
<button onclick="window.location.replace('https://www.w3schools.com')">
Replace document</button>
</body>
</html>
Murtaudu ulos kehyksestä
<!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>
Sijainti selitetty
Näytä URL-osoitteiden lukumäärä historialuettelossa
<!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>
Luo takaisin-painike sivulle
<!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>
Luo eteenpäin-painike sivulle
<!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>
Lataa tietty URL-osoite historialuettelosta
<!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>
Historia selitetty
Onko evästeet sallittu vierailijan selaimessa?
<!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>
Mikä on vierailijan selaimen nimi?
<!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>
Mikä on vierailijan selaimen moottorin nimi?
<!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>
Mitkä ovat vierailijan selaimen versiotiedot?
<!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>
Mitä ovat vierailijan selaimen käyttäjäagenttitiedot?
<!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>
Mikä on vierailijan selaimen alusta?
<!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>
Mikä on vierailijan selaimen kieli?
<!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>
Onko Java käytössä vierailijan selaimessa?
<!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>
Navigaattori selitti
Näytä hälytysruutu
<!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>
Näytä rivinvaihdot hälytysruudussa
<!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>
Näytä vahvistusruutu
<!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>
Näytä kehoteruutu
<!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 selitti
Yksinkertainen ajoitus
<!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>
Toinen yksinkertainen ajoitus
<!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>
Ajoitustapahtuma äärettömässä silmukassa
<!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>
Ajoitustapahtuma äärettömässä silmukassa - Stop-painikkeella
<!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>
Kello, joka on luotu ajastustapahtumalla
<!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>
Aseta ja pysäytä ajastin komennoilla setInterval() ja 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>
Ajoitus selitetty
Luo tervetuliaiskeksi
<!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>