Στοιχεία html, ιδιότητες και τιμές

Ένα έγγραφο html, αποτελείται από στοιχεία html.

Στοιχείο html μπορεί να είναι μια παράγραφος, ένας πίνακας, ένα κελί πίνακα, μια εικόνα, ένα κουμπί, ένα πεδίο κειμένου και γενικά ότι εισάγεται στο έγγραφο με μια ετικέτα, π.χ.

<img src="/image1.gif" name="I1" />

Είναι γνωστό (από την html) ότι κάθε στοιχείο χαρακτηρίζεται από τις ιδιότητές του (attributes) και κάθε ιδιότητα έχει μια τιμή. Για παράδειγμα:

<input type ="text" value ="Κείμενο πεδίου" name ="TF" />

Εδώ, έχουμε ένα πεδίο κειμένου με εισηγμένες τις ιδιότητες type, value και name. Για κάθε ιδιότητα ορίζεται μια τιμή. Για το συγκεκριμένο παράδειγμα, στην ιδιότητα value έχει οριστεί η τιμή "Κείμενο πεδίου" και για την ιδιότητα name η τιμή "TF". Επίσης, στο παράδειγμα <img src="views/image1.gif" name="I1" /> έχει οριστεί ένα στοιχείο με ιδιότητες src και name και με αντίστοιχες τιμές "image1.gif" και "I1".

Γενικά, θα πρέπει να έχετε υπόψη τα εξής:

  • Κάθε έγγραφο html αποτελείται από στοιχεία html
  • Κάθε στοιχείο χαρακτηρίζεται από τις ιδιότητές του (attributes) και
  • Καθε ιδιότητα δέχεται τιμές (values)

Με την JavaScript μπορείτε να διαβάζετε (read) ή/και να αλλάζετε (write) τις τιμές των ιδιοτήτων και έτσι να αλλάζει η μορφή της σελίδας.

JavaScript και στοιχεία html.

Όπως αναφέρθηκε, με τη JavaScript μπορείτε να διαβάσετε αλλά και να ορίσετε ή να αλλάξετε τις τιμές των ιδιοτήτων ενός στοιχείου html.

Για να αναφερθείτε σε ένα αντικείμενο πρέπει πρώτα να το επιλέξετε και η επιλογή μπορεί να γίνει με 3 διαφορετικούς τρόπους.

Αρχικά, θα χρησιμοποιήσουμε το id του αντικειμένου και την εντολή document.getElementById("idvalue") όπου idvalue είναι η τιμή της ιδιότητας id του αντικειμένου το οποίο θέλουμε να επιλέξουμε.

Συνήθως, χρησιμοποιούμε κάποια μεταβλητή για να καταχωρήσουμε το αντικείμενο που καλούμε με την εντολή document.getElementById("idvalue"). Γράφουμε δηλαδή var x = document.getElementById("idvalue") και άρα το x αντιστοιχεί στο συγκεκριμένο αντικείμενο. Αν δηλαδή θέλαμε να διαβάσουμε το value του αντικειμένου θα γράφαμε: x.value. Αν πάλι θέλαμε να αλλάξουμε το value του αντικειμένου θα γράφαμε: x.value="Όνομα".

Για πιο σύντομα, μπορείτε να διαβάζετε την τιμή γράφοντας απλά document.getElementById("idvalue").value ή να την αλλάζετε γράφοντας document.getElementById("idvalue").value="Όνομα".

Γενικά, για να αναφερθείτε στην ιδιότητα ενός αντικειμένου, πληκτρολογείτε το όνομα του αντικειμένου, στη συνέχεια μία τελεία και στη συνέχεια την ιδιότητα του αντικειμένου. Η γενική σύνταξη είναι: ΌνομαΑντικειμένου.Ιδιότητα. Δεν αφήνετε διάστημα πριν ή μετά την τελεία.

Ο συμβολισμός με την τελεία καλείται dot notation

Παράδειγμα

Στο πιο κάτω παράδειγμα, χρησιμοποιούμε την εντολή document.getElementById("idvalue").value για να διαβάσουμε και να εμφανίσουμε την τιμή της value με την εντολή alert().

<!DOCTYPE HTML>
<html>
	<head>
		<title>Εισαγωγή στη JavaScript</title>
		<meta charset="utf-8">
	</head>
	<body>
		<input type="text" value="hello!" id="myid" />
		<script>
			alert(document.getElementById("myid").value);
		</script>
	</body>
</html>

Παράδειγμα

Στο πιο κάτω παράδειγμα, χρησιμοποιούμε την εντολή document.getElementById("idvalue").value για να αλλάξουμε πρώτα την τιμή value και μετά την εμφανίζουμε.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Εισαγωγή στη JavaScript</title>
		<meta charset="utf-8">
	</head>
	<body>
		<input type="text" value="hello!" id="myid" />
		<script>
			document.getElementById("myid").value="welcome to my site!";
			alert(document.getElementById("myid").value);
		</script>
	</body>
</html>

Παράδειγμα

Στο πιο κάτω παράδειγμα, χρησιμοποιούμε μια μεταβλητή στην οποιά καταχωρούμε αρχικά το αντικείμενο.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Εισαγωγή στη JavaScript</title>
		<meta charset="utf-8">
	</head>
	<body>
		<input type="text" value="hello!" id="myid" />
		<script>
			var d = document.getElementById("myid");
			d.value="welcome to my site!";
			alert(d.value);
		</script>
	</body>
</html>

Παράδειγμα

Στο παράδειγμα αυτό, όταν ο χρήστης κάνει κλικ στο κουμπί "copy", αντιγράφεται το κείμενο από την αριστερή γραμμή στη δεξιά.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Εισαγωγή στη JavaScript</title>
		<meta charset="utf-8">
	</head>
	<body>
		<input type="text" value="" id="from" />
		<button onclick="document.getElementById('to').value = 
			document.getElementById('from').value">copy</button>
		<input type="text" value="" id="to" />
	</body>
</html>

Δοκιμάστε εδώ το παραπάνω σκριπτ