Πώς δημιουργούνται τα Pop Up Windows

Συγγραφέας: CT       Μετάφραση (και κάποιες προσθήκες): Γιώργος Επιτήδειος

Το πρωτότυπο κείμενο βρίσκεται στη διεύθυνση http://www.crazyted.com/utilities/popup

Στο κείμενο αυτό σας παρουσιάζουμε τα βασικά στοιχεία της κατασκευής Pop-Up Windows με τη χρήση της JavaScript. Ακόμη κι αν δεν γνωρίζετε αυτή τη γλώσσα είκοσι λεπτά προσεκτικής ανάγνωσης θα σας είναι αρκετά για να προσθέσετε και εσείς στις σελίδες σας αυτά τα τόσο συνηθισμένα, αν και όχι και τόσο αγαπητά από τους χρήστες, παραθυράκια.

Η διαφορά ανάμεσα σε Pop-Up Windows και νέα παράθυρα του Browser

Στην πραγματικότητα δεν υπάρχει καμία διαφορά. Κάποια Pop-Up Windows μπορεί να μην περιέχουν την μπάρα εργαλείων ή να μην εμφανίζουν το URL στο οποίο βρίσκονται, αλλά στην πραγματικότητα είναι και αυτά νέες απεικονίσεις σελίδων από τον Browser που χρησιμοποιείτε.

Για να τα διαχωρίσουμε λοιπόν, όταν στο κείμενό μας αναφέρεται ο όρος Pop-Up Windows θα δηλώνει παραθυράκια όπως αυτό που εμφανίζεται όταν φορτώνετε αυτή τη σελίδα ή όπως τα διαφημιστικά που συναντούμε σε υπηρεσίες δωρεάν φιλοξενίας σελίδων όπως το Geocities και αλλού. Αντίθετα ο όρος νέο παράθυρο θα χρησιμοποιείται για παράθυρα που δημιουργούνται όταν επιλέξουμε File / New (Αρχείο - Δημιουργία - Παράθυρο) στον Browser που χρησιμοποιούμε.

Και επειδή όπως είπαμε οι διαφορές μεταξύ αυτών των δύο είναι κυρίως αισθητικές (εμφάνιση μπάρας επιλογών, δυνατότητα αλλαγής του μεγέθους κ.λπ.) μπορούμε να τις ξεχάσουμε και να ασχοληθούμε αποκλειστικά με το αντικείμενό μας, δηλαδή τα...

Τα Pop-Up Windows και τη χρήση τους

Τα πρώτα Pop-Up Windows, τα οποία όπως θα μάθουμε παρακάτω έχουν και άλλες εφαρμογές εκτός από τις διαφημιστικές, εμφανίστηκαν για πρώτη φορά γύρω στα 1995 και 96 όταν κυκλοφόρησε το Netscape 3.0 και η αγορά συνειδητοποίησε τις νέες δυνατότητες που προσέφερε η Java και η JavaScript. Τα Pop-Up Windows δημιουργούνται χάρη σε κώδικα JavaScript ο οποίος τοποθετείται μέσα στον κώδικα HTML της Web σελίδας με σκοπό να δημιουργηθεί ένα νέο παράθυρο από τον Browser και να οριστούν τα χαρακτηριστικά του.

Ο κώδικας και η σημασία του:

<script language=JavaScript>
open("URL", "όνομαΠαραθύρου", ["χαρακτηριστικάΠαραθύρου"]) </script>

Τα παραπάνω ακατανόητα πράγματα σημαίνουν τα εξής:

<script language=JavaScript> = Δηλώνει στην Browser ότι από δω και πέρα δεν θα διαβάζει HTML (τη γλώσσα δημιουργίας των web σελίδων), αλλά JavaScript.

open = Δηλώνει στην Browser ότι πρέπει να ανοίξει ένα νέο παράθυρο (το "Pop-Up Window")

"URL" = Αυτή είναι η διεύθυνση της σελίδας η οποία θα φορτωθεί στο νέο παράθυρο.

"όνομαΠαραθύρου" = Αυτό είναι το όνομα που θα δώσουμε στο νέο παράθυρο. Αν δεν καταλαβαίνετε γιατί πρέπει να "βαφτίσουμε" το παράθυρό μας μην ανησυχείτε. Κάτι τέτοιο μας παρέχει περισσότερες δυνατότητες (π.χ. δημιουργία παραπομπών από παράθυρο σε παράθυρο) και θα καταλάβετε τα πάντα γι' αυτό αν διαβάσετε για πλαίσια και την παράμετρο Target.

["χαρακτηριστικάΠαραθύρου"] = Οι αγκύλες ( [ ] ) υποδηλώνουν ότι αυτά τα χαρακτηριστικά είναι προαιρετικά. Είναι όμως πολύ χρήσιμα αφού μας επιτρέπουν να ελέγξουμε καλύτερα την εμφάνιση των παραθύρων που δημιουργούμε.

Οι διαθέσιμες επιλογές μας είναι:

toolbar[=yes / no] ή [=1 / 0]
location[=yes / no] ή [=1 / 0]
directories[=yes / no] ή [=1 / 0]
status[=yes / no] ή [=1 / 0]
menubar[=yes / no] ή [=1 / 0]
scrollbars[=yes / no] ή [=1 / 0]
resizable[=yes / no] ή [=1 / 0]
width=## (όπου ## είναι ο αριθμός των pixels)
height=## όπου ## είναι ο αριθμός των pixels)

</script> = Τώρα δηλώνουμε στον Browser ότι ο JavaScript κώδικας τελείωσε και μπορεί να συνεχίσει το διάβασμα της HTML (ή οτιδήποτε άλλο είχαμε χρησιμοποιήσει για να δημιουργήσουμε τη σελίδα μας).

Ας δούμε λίγο τώρα τι σημαίνουν και πώς μπορούν να χρησιμοποιηθούν τα χαρακτηριστικάΠαραθύρου:

  1. Ας υποθέσουμε ότι δεν θέλετε να υπάρχει μπάρα εργαλείων (toolbar) στο Pop-Up Window σας. Σε αυτή την περίπτωση θα πρέπει να δηλώσετε toolbar=no ή toolbar=0 (0 είναι το μηδέν και όχι το κεφαλαίο όμικρον). Φαντάζομαι ότι το yes/no είναι απόλυτα κατανοητό. Η σύνταξη 1/0 έχει να κάνει με δυαδική λογική (Binary Logic) και 1=yes ενώ 0=no.

  2. Αν δεν δηλώσετε τίποτε στα χαρακτηριστικάΠαραθύρου τότε θεωρείται αυτόματα ότι όλα ισχύουν (είναι σαν να τα έχετε δηλώσει όλα ως = 1 ή ως yes). Αν πάλι δεν ορίσετε συγκεκριμένο height (ύψος) ή width (πλάτος), τότε το ο browser θα σχεδιάσει το παράθυρο όσο μεγαλύτερο μπορεί.

Όλα αυτά θα γίνουν ευκολότερα κατανοητά με μερικά παραδείγματα. Αν θέλετε να δείτε τον πλήρη κώδικα που περιέχει η σελίδα αυτή (και δημιουργεί τα παραρτήματα), επιλέξτε View - Source για Internet Explorer View - Page Source για Netscape Communicator

Μερικά Παραδείγματα

Αν κάνετε κλικ στο Παράδειγμα 1 θα εμφανιστεί ένα νέο παράθυρο (Pop-Up Window) το οποίο:

  • Θα διαθέτει μπάρα εργαλείων (toolbar)

  • Δεν θα δηλώνει τη διεύθυνσή του (δεν θα έχει location bar)

  • Θα διαθέτει directory bar (προτεινόμενες παραπομπές από τον Browser)

  • Δεν θα έχει status bar (η γραμμή στο κάτω μέρος του παραθύρου με διάφορες πληροφορίες)

  • Θα εμφανίζει το βασικό μενού επιλογών (την menubar η οποία περιέχει τα Αρχείο - Επεξεργασία - Προβολή - Αγαπημένα - Εργαλεία - Βοήθεια κ.λπ.)

  • Θα περιέχει scrollbars αν είναι απαραίτητες (αν το παράθυρο είναι τόσο μικρό που πρέπει να κινηθούμε μέσα σε αυτό για να δούμε όλο το περιεχόμενό του)

  • Θα μπορεί ο χρήστης να αλλάξει το μέγεθός του

  • και θα έχει ύψος και πλάτος 150 pixels

Η σελίδα η οποία εμφανίζεται μέσα σε αυτό είναι η http://www.eeei.gr/odhgos/htmlfaq/popupex1.htm και το όνομα του νέου παραθύρου θα είναι Example1.

Ο κώδικας για όλα τα παραπάνω είναι:

open('popupex1.htm', 'Example1', 'toolbar=1,location=0,directories=1,status=0,menubar=1, scrollbars=1,resizable=1,width=675,height=150')

Προσέξτε ότι το τμήμα χαρακτηριστικάΠαραθύρου του κώδικα είναι τόσο μεγάλο που (αν δεν βλέπετε αυτή τη σελίδα τεράστια οθόνη και ανάλυση) δεν χωράει στην οθόνη και αλλάζει γραμμή. Αυτό γίνεται διότι μεταξύ κάθε παραμέτρου (αλλά και στο ίσον ή την τιμή) δεν αφήνουμε ΚΑΘΟΛΟΥ ΚΕΝΟ (όλα μπαίνουν κολλητά).

’σκηση:Αν κάνετε view source σε αυτή τη σελίδα θα δείτε στην κορυφή της τον ακόλουθο κώδικα ο οποίος κάλεσε το παράθυρο που άνοιξε όταν τη φορτώσατε: 

function inviteWin(){
    open('popupex0.htm', 'Welcome', 'toolbar=0,location=0,directories=0,
status=1,menubars=0,resizable=0,width=350,height=350')
}

Εδώ το όνομα του παραθύρου είναι Welcome, ενώ το όνομα της συνάρτησης είναι inviteWin. Για να ανοίγει αυτόματα το παράθυρο όταν φορτώνεται η σελίδα πήγαμε στο BODY της και προσθέσαμε το onLoad="inviteWin()".

Παράδειγμα 2

Παράδειγμα 2

Το παράδειγμα 2 είναι αρκετά πιο "περίπλοκο" από το πρώτο και χρειάζεται επιπλέον κώδικα για να λειτουργήσει.

Αν κάνετε view source σε αυτή τη σελίδα θα δείτε ότι ο κώδικας για την παραπομπή είναι:

<a href="javascript:newWindow()">Παράδειγμα 2</a>

ενώ στην κορυφή της έχουμε τοποθετήσει τον ακόλουθο κώδικα: 


function newWindow(){
    open('popupex2.htm', 'Example2', 'toolbar=1,location=0,directories=1,status=0,
menubar=1,scrollbars=1,resizable=1,width=700,height=400')
}

Παράδειγμα 3

Παράδειγμα 3

Πριν επιλέξετε το παράδειγμα 3 καλύτερα να διαβάσετε πρώτα τι κάνει. Εδώ θα ανοίξουμε ένα Pop-Up Window και αυτό με τη σειρά του θα καλέσει κάποιο άλλο. Αυτός είναι ο τρόπος με τον οποίο εμφανίζονται τα περισσότερα διαφημιστικά παράθυρα και για να λειτουργήσει το πρώτο παράθυρο περιέχει κώδικα σχεδόν ακριβώς ίδιο με εκείνον του παραδείγματος 2. Έτσι, φορτώνεται και δεύτερο παράθυρο.

Συνήθως οι δημιουργοί αυτών των παραθύρων δεν επιτρέπουν στον χρήστη να αλλάξει το μέγεθός τους, δεν διαθέτουν scrollbars και το ύψος και πλάτος τους είναι ακριβώς ίδια με αυτά της σελίδας που περιέχουν. Φυσικά, δεν είναι υποχρεωτικό η σελίδα αυτή να περιέχει γραφικά. Στις διαφημίσεις όμως τα γραφικά σπάνια απουσιάζουν.

’σκηση: Κάντε View - Source για να δείτε πώς δημιουργήθηκε η παραπομπή και το button του παραδείγματος 3. (Το κουμπί δημιουργήθηκε ακριβώς όπως και στο παράδειγμα 1. Η παραπομπή έγινε με τον ίδιο τρόπο όπως και στο παράδειγμα 2, αλλά τόσο στην παραπομπή όσο και στο πάνω μέρος της σελίδας αλλάξαμε το όνομα της συνάρτησης από newWindow σε exThree γιατί δύο αντικείμενα (συναρτήσεις ή ομάδες ενεργειών) δεν μπορούν να έχουν το ίδιο όνομα. Οι διαφορές που υπάρχουν στις παραμέτρους οφείλονται στη διαφορετική εμφάνιση που θέλαμε να έχουν τα παράθυρα.)

Μερικές ακόμη τεχνικές (Tips & Tricks)

Συμβουλή 1: Βεβαιωθείτε ότι έχετε πράγματι ανάγκη από Pop-Up Windows. Πολλά απ' όσα επιθυμείτε μπορούν πιθανώς να υλοποιηθούν με πλαίσια (frames) ή με την παράμετρο Target. Όσοι βαριούνται να διαβάσουν τις σχετικές οδηγίες μπορούν απλώς να δουν πώς λειτουργεί αυτή η τεχνική στον ακόλουθο κώδικα:

<a href="http://www.webhelp.org/frames.html" target="_new">Jonny's Frames Tutorial</a>

Προσέξτε το target="_new". Θα ανοίξει ένα νέο παράθυρο στο οποίο θα φορτωθεί η σελίδα http://www.webhelp.org/frames.html.

Συμβουλή 2: Για λόγους ευγενείας και ευχρηστίας είναι καλό να προσθέτετε στα Pop-Up Windows σας κουμπιά που επιτρέπουν στους χρήστες να τα κλείσουν. Αν και μπορούν να το κάνουν και από τις βασικές επιλογές στο πάνω δεξιά μέρος του παραθύρου αυτό θα κάνει πιο φιλικά τα Pop-Up Windows σας και θα δώσει μεγαλύτερη σιγουριά στους επισκέπτες των σελίδων σας (οι αρχάριοι χρήστες θα καταλάβουν ότι επιτρέπεται να κλείσουν το παράθυρο και πως αυτό δεν θα δημιουργήσει κανένα πρόβλημα).

Ο κώδικας που χρησιμοποιήθηκε για να υπάρχει κουμπί κλεισίματος του pop up το οποίο σας υποδέχθηκε σε αυτή τη σελίδα είναι:

<form name="closer"> <input type=button value="Close This Window" onClick="self.close()"> </form>

Τα κουμπιά δημιουργούνται πάντοτε με κώδικα ο οποίο περιέχεται μέσα στις οδηγίες (tags) <form> και </form>. Το ίδιο το κουμπί δημιουργήθηκε από τη μεσαία γραμμή. Το input σημαίνει ότι ο χρήστης θα δώσει κάποια πληροφορία στον browser (στην προκειμένη περίπτωση θα του πει κλείσε το παράθυρο). Το type=button δηλώνει τι είδους (τύπου) θα είναι αυτή η πληροφορία (πάτημα κουμπιού ή όχι) και το value καθορίζει πώς θα εμφανίζεται στον χρήστη (value="Κλείσιμο παραθύρου" σημαίνει ότι το κουμπί θα γράφει επάνω του Κλείσιμο παραθύρου.

Το onClick="self.close()" είναι ο κώδικας που κάνει όλη τη δουλειά. Αυτός δηλώνει στον browser ότι πρέπει να κλείσει το παράθυρο στο οποίο περιέχεται αυτός ο κώδικας.

Για να δείτε τον κώδικα σε λειτουργία κάντε View - Source στο Pop-Up (βρίσκεται στη διεύθυνση http://www.eeei.gr/odhgos/htmlfaq/popupex0.htm)

Συμβουλή 3: Μη χρησιμοποιείτε πολύ συχνά Pop-Up Windows! Θυμηθείτε πόσο σας ξάφνιασε και σας μπέρδεψε το παράθυρο που άνοιξε μόλις φορτώσατε αυτή τη σελίδα. Πνίγοντας τους χρήστες με πάρα πολλά παράθυρα δεν θα καταφέρετε τίποτε άλλο πέρα από το να κερδίσετε την αντιπάθειά τους.

Για παράδειγμα, για να δημιουργήσω εγώ αυτή τη σελίδα και να ελέγξω ότι όλες οι παραπομπές λειτουργούν σωστά χρειάστηκε να "φύγω" και να επιστρέψω σε αυτήν αρκετές φορές. Επειδή λοιπόν κάθε φορά που την ξαναφορτώνω βλέπω να εμφανίζεται μπροστά μου το popup, καταλαβαίνω απόλυτα πόσο μεγάλο εκνευρισμό προκαλεί στους τακτικούς επισκέπτες της σελίδας. Ελπίζω μέχρι τώρα να το έχετε καταλάβει και εσείς.

Τελειώνοντας:

Αν τα μαθήματα HTML που υπάρχουν εδώ στην ελληνική γλώσσα δεν σας ικανοποιούν μπορείτε να δοκιμάσετε το Jonny's HTML Headquarters. Ο συγγραφέας αυτού του κειμένου το χρησιμοποιεί συχνά αυτές τις σελίδες και συμμετέχει στο web message board του site.

Επίσης, μπορείτε πάντοτε να επισκεφθείτε την προσωπική σελίδα του (CrazyTed's Domain). Σε διάφορα σημεία του site θα συναντήσετε ενδιαφέροντα παραδείγματα HTML scripting, καθώς και κάποιες βελτιώσεις βασισμένες σε JavaScript. Τέλος, μπορείτε πάντοτε να του γράψετε E-Mail. Ακόμη κι αν δεν γνωρίζει την απάντηση στο ερώτημά σας, πιθανότατα θα μπορέσει να σας παραπέμψει σε κάποιον ο οποίος τη γνωρίζει.

Μετάφραση: Γιώργος Επιτήδειος © 2005

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων