25.
Κλήση Συνάρτησης ΅ε το Συ΅βάν OnClick
<html>
ημερομηνίας
και
<head>
<script type="text/javascript">
function myfunction() {
alert("Γεια σας")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()"
value="Κλήση συνάρτησης"> </form >
<p>
Oταν κάνουμε
κλικ στο
πλήκτρο εντολής
(button), θα
κληθεί μια
συνάρτηση που θα εμφανίσει ένα μήνυμα σ
ένα alert box. </p>
</body>
</html
>
26.
Κλήση Συνάρτησης ΅ε το Συ΅βάν OnMouseOver
<html>
<head>
<title> JavaScript Example 26 </title>
<script language="JavaScript">
<!-- Απόκρυψη του κώδικα από παλιούς
φυλλομετρητές function
message() {
alert("Αυτό το κείμενο ανήκει στη
συνάρτηση message()");
}
//
Τέλος απόκρυψης του script -->
</script>
</head>
<body
color=white>
<p>
Μετακινείστε το ποντίκι πάνω από
<a href="index.html" onMouseover="message();
return true"> εδώ </a></p>
<p> Oταν
μετακινήσουμε το ποντίκι πάνω από
το κείμενο «εδώ»,
που αποτελεί σύνδεσμο (link), θα κληθεί μια
συνάρτηση που θα
εμφανίσει
ένα μήνυμα σ ένα alert box. </p>
<noscript> Ο φυλλομετρητής
σας έχει απενεργοποιήσει την JavaScript <noscript>
</body>
</html>
27.
Κλήση Συνάρτησης ΅ε Παρα΅έτρους
1ο Παράδειγ΅α
<html>
<head>
<script type="text/javascript">
function myfunction(txt) {
alert(txt)
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="myfunction('Γεια
σας!')"
value="Κλήση συνάρτησης">
</form
>
<p> Κάνοντας κλικ στο πλήκτρο εντολής
(button), θα κληθεί μια συνάρτηση μ ένα όρισμα,
η οποία θα εμφανίσει αυτό
το όρισμα σ ένα alert box. </p>
</body>
</html>
28.
Κλήση Συνάρτησης ΅ε Παρα΅έτρους
2ο Παράδειγ΅α
<html>
<head>
<script type="text/javascript">
function myfunction(txt) {
alert(txt)
}
</script>
</head>
<body>
<form>
<input
type="button"
onclick="myfunction('Καλημέρα!')"
value="Το Πρωί">
<input
type="button" onclick="myfunction('Καλό Απόγευμα!')" value="Το Απόγευμα">
</form
>
<p>
Oταν κάνουμε
κλικ σ
ένα από τα
πλήκτρα εντολής,
θα κληθεί
μια συνάρτηση η οποία θα εμφανίσει το
όρισμα
που της μεταβιβάζεται σ ένα alert box. </p>
</body>
</html>
29.
Συνάρτηση που Κάνει Υπολογισ΅ούς
<html>
<head>
<script
language="JavaScript">
<!-- απόκρυψη
function calculation() {
var x = 12;
var y = 5;
var result = x + y;
alert(result);
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Υπολογισμός" onClick="calculation()">
</form>
</body>
</html >
30.
Συνάρτηση που Επιστρέφει Τι΅ή
1ο Παράδειγ΅α
<html>
<head>
<script type="text/javascript">
function myFunction() {
return ("Γεια σας, καλημέρα!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction()) </script>
<p> Το script στο τμήμα body
καλεί μια συνάρτηση, η οποία επιστρέφει
ένα κείμενο. Για να πάρουμε την τιμή
επιστροφής μιας συνάρτησης,
χρησιμοποιούμε την εντολή return. </p>
</body>
</html
>
31.
Συνάρτηση που Επιστρέφει Τι΅ή
2ο Παράδειγ΅α
<html>
<head>
<script type="text/javascript">
function total(numberA, numberB) {
return numberA + numberB
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(total(2, 3))
</script>
<p> Το script στο τμήμα body
καλεί μια συνάρτηση με δύο ορίσματα, το 2
και το 3, και η συνάρτηση επιστρέφει το
άθροισμα (sum) των δύο αυτών ορισμάτων.</p>
</body>
</html
>
32.
Κλήση Συνάρτησης ΅ε Παρα΅έτρους
3ο Παράδειγ΅α
<html>
<head>
<title> JavaScript Example
32 </title>
<script language="JavaScript">
function myFunction(message) {
alert(message);
}
</script>
</head>
<body color=white>
Μετακινείστε
το
ποντίκι
πάνω
από
<a
href="page 01.html" onMouseover="myFunction('Πίστη'); return
true"> εδώ </a>
για
να εμφανισθεί το πρώτο μήνυμα <br >
Μετακινείστε
το
ποντίκι
πάνω
από
onMouseover="myFunction('Ελπίδα');
return true"> εδώ </a>
για
να εμφανισθεί το δεύτερο μήνυμα <br >
Μετακινείστε
το
ποντίκι
πάνω
από
onMouseover="myFunction('Πρόνοια');
return true"> εδώ </a>
για
να εμφανισθεί το τρίτο μήνυμα
</body>
</html>
<a href="page 02.html"
<a
href="page
03.html"
33.
Συνάρτηση που Επιστρέφει Τι΅ή
3ο Παράδειγ΅α
<html>
<head>
<script
language="JavaScript">
function maximum(a, b) {
if (a>b)
result = a;
else
result=b;
return result;
}
</script>
<body>
<script language="JavaScript">
a
= prompt ("Δώστε τον πρώτο αριθμό");
b = prompt ("Δώστε τον δεύτερο αριθμό
");
c = prompt ("Δώστε τον τρίτο αριθμό ");
megistos = maximum(parseInt(a), parseInt(b));
megistos = maximum(megistos, parseInt(c));
alert("Ο μέγιστος είναι : " + megistos);
</script>
</body>
</html>
34.
Συνάρτηση που Επιστρέφει Τι΅ή
4ο Παράδειγ΅α
<html>
<head>
<script
language="JavaScript">
function average(a, b, c) {
result = (a+b+c)/3;
return result;
}
</script>
<body>
<script language="JavaScript">
a
= parseInt(prompt ("Δώστε τον πρώτο αριθμό"));
b = parseInt(prompt ("Δώστε τον
δεύτερο αριθμό "));
c = parseInt(prompt("Δώστε τον τρίτο
αριθμό "));
alert("Ο μέσος όρος είναι : " + average(a, b,
c));
</script>
<p> Η συνάρτηση parseInt()
είναι χρήσιμη για την μετατροπή ενός string
σε αριθμό, ώστε να γίνονται σωστά οι
πράξεις, καθώς η
μέθοδος prompt () επιστρέφει συμβολοσειρά (κείμενο).
</p>
</body>
</html>
35.
Συνάρτηση που Καλεί λλη Συνάρτηση
<html>
<head>
<script language="JavaScript">
function GetNumbers(form) {
var sNumber =
form.txtNumber.value
var sPercentage = form.txtPercent.value
form.txtResult.value =
Percentage(sNumber, sPercentage)
}
function Percentage(sNum, sPerc) {
var nResult = sNum * (sPerc/100)
return nResult
}
</script>
<body>
<form>
Γράψτε
έναν
αριθμό :
<input type = "text"
name = "txtNumber" size = 6><br> Γράψτε το ποσοστό % :
<input type = "text" name = "txtPercent"
size = 6><br>
<input type =
"button" value = "Αποτέλεσμα" onclick = "GetNumbers(this.form)"> <input type = "text" name = "txtResult"
size = 10>
</form
>
<p> Η συνάρτηση GetNumbers()
δέχεται τιμές από δύο πεδία κειμένου της
φόρμας και καλεί τη συνάρτηση Percentage στην
οποία
μεταβιβάζει τα
δύο αυτά
ορίσματα. Η
συνάρτηση Percentage()
υπολογίζει το ένα ποσό σαν ποσοστό του
άλλου και
η τιμή που επιστρέφει καταχωρείται στο
τρίτο πεδίο κειμένου. </p>
</body>
</html>
36.
Μορφοποίηση Κει΅ένου
<html
>
<head>
<script language =
"JavaScript">
function MyFunction() {
var sTypedText
sTypedText = prompt ("Γράψτε κάτι και πατήστε ΟΚ", " ") return sTypedText
}
</script>
<body>
<script language =
"JavaScript">
var sText
sText =MyFunction()
document.write("Γράψατε : " + sText + "<p>")
document.write("<br> Μεγάλο μέγεθος : " + sText.big())
document.write("<br> Σύνδεσμος : " + sText.link("page01.html"))
document.write("<br> Αναβόσβημα : " + sText.blink())
document.write("<br> Έντονο : " + sText.bold())
document.write("<br> Έγχρωμο : " + sText.fontcolor("green"))
document.write("<br> Πλάγια γράμματα : " + sText.italics())
document.write("<br> Μικρό μέγεθος : " + sText.small())
document.write("<br> Διαγραμμένο : " + sText.strike())
document.write("<br> Εκθέτης : " + sText.sup())
document.write("<br> Δείκτης : " + sText.sub())
document.write("<br> Πεζά : " + sText.toLowerCase())
document.write("<br> Κεφαλαία : " + sText.toUpperCase())
</script>
<p> Το σενάριο αυτό
καλεί τη συνάρτηση MyFunction (), όπου γράφουμε
κάποιο κείμενο σ ένα πλαίσιο προτροπής prompt
, και
μετά εμφανίζουμε το
κείμενο αυτό με διάφορες μορφές,
χρησιμοποιώντας τις μεθόδους
στοιχειοσειράς. Είναι, όμως,
πολύ πιθανό να μην δουλεύει σωστά το
αναβόσβημα (blink).
</p>
</body>
</html>
37.
Έλεγχος Καταχωρήσεων σε Φόρ΅α
<html >
<head>
<script language = "JavaScript">
function validateForm() {
formObj = document.sample;
if ((formObj.name.value == "") ||
(formObj.age.value == "") ||
(formObj.dob.value == "")) {
alert("Δεν έχει γράψει κάτι σ όλα τα
πεδία"); return
false;
}
else
return true;
}
</script>
</head>
<body>
<form
name="sample" method=post action=mailto:mail@dide.flo.sch.gr"
validateForm()">
Δώστε όνομα : <input type=text name="name"
size=30><br>
Δώστε ηλικία : <input type=text name="age"
size=3><br>
Ημερομηνία Γέννησης : <input type=text name="dob"
size=10><br>
<input type=submit value="Υποβολή">
<input type=reset value="Επαναφορά Τιμών">
</form >
onSubmit="return
<p> Στη φόρμα αυτή
χρησιμοποιούμε τρία πλαίσια (πεδία)
κειμένου, τα name, age και dob (date of birth ), και τα
κλασικά πλήκτρα
εντολής Submit και Reset, για
υποβολή ή και
μηδενισμό των στοιχείων της φόρμας
αντίστοιχα. Όταν κάνουμε κλικ στο
πλήκτρο Submit ,
ενεργοποείται το συμβάν onSubmit το οποίο
καλεί με τη σειρά του τη συνάρτηση validateForm(),
η οποία
συνάρτηση
ελέγχει αν κάποιο από
τα πεδία κειμένου της φόρμας δεν έχει
καθόλου τιμή, οπότε και εμφανίζει ένα alert box
με το σχετικό μήνυμα και
επιστρέφει την τιμή false . Διαφορετικά, δηλ.
αν ο χρήστης έχει γράψει κάτι σ όλα τα
πεδία κειμένου, επιστρέφει την τιμή true. </p>
</body>
</html>
38.
Η Εντολή If
<html >
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10) {
document.write("<b> Καλημέρα </b>")
}
</script>
<p>
Αυτό το παράδειγμα δείχνει την εντολή If.
</p>
<p>
Αν η ώρα στον
φυλλομετρητή είναι πριν
τις 10,
θα λάβουμε τον
χαιρετισμό "Καλημέρα", αλλιώς τίποτα.
</p>
</body>
</html>