Εισαγωγή JavaScript

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

Αυτή η σελίδα περιέχει μερικά παραδείγματα του τι μπορεί να κάνει η JavaScript.

Η JavaScript μπορεί να αλλάξει το περιεχόμενο HTML

Μία από τις πολλές μεθόδους HTML JavaScript είναι η getElementById().

Το παρακάτω παράδειγμα "βρίσκει" ένα στοιχείο HTML (με id="demo"), και αλλάζει το περιεχόμενο του στοιχείου (innerHTML) σε "Hello JavaScript":

Παράδειγμα

document.getElementById("demo").innerHTML = "Hello JavaScript";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

Η JavaScript δέχεται τόσο διπλά όσο και μεμονωμένα εισαγωγικά:

Παράδειγμα

document.getElementById('demo').innerHTML = 'Hello JavaScript';

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>

Η JavaScript μπορεί να αλλάξει τις τιμές χαρακτηριστικών HTML

Σε αυτό το παράδειγμα η JavaScript αλλάζει την τιμή του χαρακτηριστικού src (source) μιας ετικέτας <img>:

Η λάμπα

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

Το JavaScript μπορεί να αλλάξει τα στυλ HTML (CSS)

Η αλλαγή του στυλ ενός στοιχείου HTML, είναι μια παραλλαγή αλλαγής ενός HTML Χαρακτηριστικό:

Παράδειγμα

document.getElementById("demo").style.fontSize = "35px";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

Η JavaScript μπορεί να αποκρύψει στοιχεία HTML

Η απόκρυψη στοιχείων HTML μπορεί να γίνει αλλάζοντας το στυλ εμφάνισης:

Παράδειγμα

document.getElementById("demo").style.display = "none";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

Η JavaScript μπορεί να εμφανίσει στοιχεία HTML

Η εμφάνιση κρυφών στοιχείων HTML μπορεί επίσης να γίνει αλλάζοντας το στυλ εμφάνισης:

Παράδειγμα

document.getElementById("demo").style.display = "block";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

Το ήξερες?

Η JavaScript και η Java είναι εντελώς διαφορετικές γλώσσες, και οι δύο ως προς την ιδέα και σχεδιασμός.

Η JavaScript επινοήθηκε από τον Brendan Eich το 1995 και έγινε πρότυπο ECMA το 1997.

ECMA-262 είναι η επίσημη ονομασία του προτύπου. Το ECMAScript είναι το επίσημο όνομα της γλώσσας.