15 Cool δείγματα JavaScript JavaScript

Άρθρο που γράφτηκε από:
  • Προτεινόμενα άρθρα
  • Ενημερώθηκε: Mar 06, 2012

Μια γρήγορη επισκόπηση με JavaScript

Το JavaScript χρησιμοποιείται παντού online σε αυτές τις μέρες - για τη βελτίωση της διαδραστικότητας του ιστότοπου, την επικύρωση πληροφοριών ή / και τη βελτίωση των προοπτικών του ιστότοπου. Το JavaScript εμφανίστηκε για πρώτη φορά στο 1995 και από τότε έχει προχωρήσει πολύ από την άποψη της αποδοχής του και του τρόπου με τον οποίο χρησιμοποιείται. Η σύνταξη που χρησιμοποιήθηκε στο JavaScript επηρεάστηκε έντονα από το C. αλλά η Java, η Pearl, η Python και η Scheme έπαιξαν επίσης το ρόλο της.

Τι είναι το JavaScript;

Υπάρχει ένα παλιό κλιπ του YouTube που απαντά καλά στην ερώτηση. Εδώ πηγαίνει.

Αρχάριοι Συμβουλές: Τι πρέπει να ξέρετε;

Για αρχάριους, μερικά βασικά που πρέπει να ξέρετε είναι:

  • Το JavaScript μπορεί να απενεργοποιηθεί στο πρόγραμμα περιήγησης
  • Το JavaScript θα εκτελείται κάθε φορά που φορτώνεται μια σελίδα
  • Η JavaScript απαιτεί χρόνο για να φορτώσετε μια αργή σύνδεση στο Internet
  • Το JavaScript εξακολουθεί να τρέχει από προσωρινά αποθηκευμένες σελίδες
  • Μπορείτε να φιλοξενήσετε το JavaScript μέσα σε μια ιστοσελίδα ή εξωτερικά από ένα αρχείο .js
  • Το JavaScript είναι εντελώς διαφορετικό από την Java

Είναι επίσης σημαντικό να καταλάβουμε ότι το JavaScript θα οδηγήσει στην καταστροφή όταν χρησιμοποιείται με λάθος τρόπο. Οι ανεπαρκώς διαμορφωμένες και ευαίσθητες κωδικοποιημένες γλώσσες JavaScript θα επιβραδύνουν τον ιστότοπό σας και θα καταστρέψουν τη συνολική πλοήγηση του ιστότοπου. Αυτό με τη σειρά του επηρεάζει το ποσοστό επιστροφής των επισκεπτών σας (λόγω κακής εμπειρίας χρήστη), καθώς και κατάταξη μηχανών αναζήτησης (λόγω των αργών ποσοστών απόκρισης ιστοτόπων). Για να βοηθήσετε να επικυρώσετε την περίπτωσή μου εδώ, τοποθετήστε τον εαυτό σας στα παπούτσια ενός θεατή. Αν ένας ιστότοπος που επισκεφθήκατε φορτώθηκε σιγά-σιγά, ήταν δύσκολο να πλοηγηθείτε, και σε γενικές γραμμές, άβολα - θα επιστρέψετε στον ιστότοπο; Δεν θα ήθελα.

Παρακάτω είναι μια μικρή λίστα με πράγματα που πρέπει να σκεφτείτε όταν προσθέτετε JavaScript στον ιστότοπό σας.

  • Απαιτείται JavaScript για να λειτουργήσει σωστά ο ιστότοπος;
  • Τι θα μοιάζει με τον ιστότοπο εάν αποκλείστηκε η JavaScript;
  • Θα βλάψει η JavaScript την απόδοση του διακομιστή;
  • Θα προσθέσει η βοήθεια JavaScript τη μετακίνηση του ιστότοπού σας προς την κατεύθυνση που επιθυμείτε;

Όχι, δεν προσπαθώ να σας τρομάξω με αυτά τα σημεία. Στην πραγματικότητα, μην φοβάστε να χρησιμοποιήσετε το JavaScript στις ιστοσελίδες σας, καθώς παρέχει οφέλη τόνων και, όπως αναφέρθηκε, χρησιμοποιείται από τις πλειοψηφίες. Το βασικό σημείο που προσπαθώ να πετύχω εδώ είναι να μην συνεχίζουμε να προσθέτουμε χαρακτηριστικά JavaScript σε έναν ιστότοπο όταν δεν είναι απαραίτητα. Ορισμένοι ιστότοποι χρειάζονται περισσότερη JavaScript από τις υπόλοιπες. μερικοί απλά χρειάζονται λιγότερα - Ακριβώς επειδή ένα site κάνει αυτό δεν σημαίνει ότι πρέπει να κάνετε το ίδιο.

Freebies: 15 Cool αποσπάσματα JavaScript για τον ιστότοπό σας

Το απόσπασμα JavaScript

Τώρα, ας πάμε κάτω στα υλικά για τα οποία ήρθατε εδώ - παρακάτω είναι μια λίστα με τα αποσπάσματα JavaScript 15 που θα βελτιώσουν τον ιστότοπό σας σε λειτουργικότητα ή εμφάνιση. Ο κώδικας θα κατανεμηθεί σε δύο ενότητες, το κεφάλαιο και το σώμα ή το αρχείο .js. Αν δεν υπάρχει τίτλος ενότητας, τότε δεν είναι απαραίτητο για αυτό το συγκεκριμένο απόσπασμα.

Κατανόηση του βίντεο HTML5

Γρήγορο δείγμα

<script type="text/javascript">

συνάρτηση understands_video () {
επιστρέψτε! document.createElement ('βίντεο') canPlayType; // boolean
}

αν (! understands_video ()) {
// Πρέπει να είναι παλιότερο πρόγραμμα περιήγησης ή IE.
// Ίσως να κάνετε κάτι σαν να κρύβετε έθιμο
// έλεγχοι HTML5. Ή οτιδήποτε…
videoControls.style.display = 'καμία';
}

</ Script>

Τι κάνει το απόσπασμα JavaScript;

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

Μπισκότα JavaScript

Γρήγορο δείγμα

<script type="text/javascript">

/ **

* Ορίζει ένα cookie με το όνομα και την αξία.

*

* όνομα Όνομα του cookie

* αξία αξία του cookie

* [λήγει] Ημερομηνία λήξης του cookie (προεπιλογή: τέλος της τρέχουσας περιόδου σύνδεσης)

* [μονοπάτι] Μονοπάτι όπου το cookie είναι έγκυρο (προεπιλογή: διαδρομή του εγγράφου κλήσης)

* [domain] Τομέας όπου το cookie είναι έγκυρο

* (προεπιλογή: τομέας του εγγράφου κλήσης)

* [ασφαλή] Boolean τιμή που υποδεικνύει εάν η μετάδοση cookie απαιτεί a

* Ασφαλής μετάδοση

*/

λειτουργία setCookie (όνομα, τιμή, λήγει, διαδρομή, τομέας, ασφαλής) {

document.cookie = όνομα + "=" + διαφυγή (τιμή) +

(λήγει); "expires =" + expires.toGMTString (): "") +

(διαδρομή); "path =" + διαδρομή: "") +

((τομέας); "; domain =" + domain: "") +

((ασφαλής); "ασφαλής": "");

}

</ Script>

<script type="text/javascript">

/ **

* Λαμβάνει την τιμή του καθορισμένου cookie.

*

* όνομα Όνομα του επιθυμητού cookie.

*

* Επιστρέφει μια συμβολοσειρά που περιέχει την τιμή του συγκεκριμένου cookie,

* ή μηδέν εάν δεν υπάρχει cookie.

*/

λειτουργία getCookie (όνομα) {

var dc = document.cookie;

var prefix = όνομα + "=";

var begin = dc.indexOf (";" + πρόθεμα);

εάν (ξεκινήστε == -1) {

αρχή = dc.indexOf (πρόθεμα);

αν (αρχίζει! = 0) επιστρέφει null;

} Else {

αρχή + = 2;

}

var end = document.cookie.indexOf (";", αρχή);

αν (τέλος == -1) {

end = dc.length;

}

επιστροφή του unescape (dc.substring (έναρξη + prefix.length, end));

}

</ Script>

<script type="text/javascript">

/ **

* Διαγράφει το καθορισμένο cookie.

*

* όνομα όνομα του cookie

* Διαδρομή [path] του cookie (πρέπει να είναι ίδια με τη διαδρομή που χρησιμοποιείται για τη δημιουργία cookie)

* Τομέας [domain] του cookie (πρέπει να είναι ίδιο με τον τομέα που χρησιμοποιείται για τη δημιουργία cookie)

*/

λειτουργία deleteCookie (όνομα, διαδρομή, τομέας) {

αν (getCookie (όνομα)) {

document.cookie = όνομα + "=" +

(διαδρομή); "path =" + διαδρομή: "") +

((τομέας); "; domain =" + domain: "") +

"; λήγει = Thu, 01-Ιαν-70 00: 00: 01 GMT";

}

}

</ Script>

Τι κάνει το απόσπασμα JavaScript;

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

Προφορτώστε τις εικόνες σας

Γρήγορο δείγμα

<script type="text/javascript">

var εικόνες = νέος πίνακας ();

λειτουργία preloadImages () {

για (i = 0; i <preloadImages.arguments.length; i ++) {

εικόνες [i] = νέα εικόνα ();

εικόνες [i] .src = preloadImages.arguments [i];

}

}

preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg").

</ Script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα αποτρέψει τον ιστότοπό σας να έχει αυτό το δύσκολο χρόνο όταν εμφανίζει μόνο μέρος του ιστότοπου. αυτό δεν φαίνεται μόνο κακό αλλά είναι επίσης αντιεπαγγελματικό. Το μόνο που έχετε να κάνετε είναι να προσθέσετε τις εικόνες σας στην ενότητα preloadImages και είστε έτοιμοι να μετακινηθείτε.

Επικύρωση ηλεκτρονικού ταχυδρομείου

Γρήγορο δείγμα

Κεφάλι:

<script type="text/javascript">
λειτουργία validateEmail (theForm) {
εάν (/ ^ w + ([.-]? w +) * @ w + ([.-] ww)) * (.w {2,3}) + $ / .test (theForm.email id.value)
επιστροφή (αλήθεια)?
}
alert ("Μη έγκυρη διεύθυνση ηλεκτρονικού ταχυδρομείου! Εισαγάγετε ξανά προσεκτικά!");
επιστροφή (ψευδής)?
}
</ Script>

Σώμα:

<form onSubmit = "επιστρέφει validateEmail (αυτό);" δράση = "">
E-mail:
<input type = "text" όνομα = "emailid" />
<input type = "submit" value = "Υποβολή" />
<input type = "reset" value = "Επαναφορά" />

Τι κάνει το απόσπασμα JavaScript;

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

Κανένα δεξί κλικ

Γρήγορο δείγμα

<script type="text/javascript">
συνάρτηση f1 () {
if (document.all) {return false; }}
}
συνάρτηση f2 (e) {
αν (document.layers || (document.getElementById &! document.all)) {
αν (e.which == 2 || e.which == 3) {επιστρέψει ψευδής? }}
}
}
αν (document.layers) {
document.captureEvents (Event.MOUSEDOWN);
document.onmousedown = f1;
}
else {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = νέα λειτουργία ("επιστροφή ψευδούς");
</ Script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα αποτρέψει τον θεατή από το να μπορεί να κάνει δεξί κλικ στη σελίδα σας. Αυτό μπορεί να αποθαρρύνει τον μέσο χρήστη να δανειστεί εικόνες ή κώδικα από τον ιστότοπό σας.

Εμφάνιση τυχαίων εισαγωγών

Γρήγορο δείγμα

Κεφάλι:

<script type="text/javascript">
writeRandomQuote = συνάρτηση () {
var εισαγωγικά = νέος πίνακας ();
εισαγωγικά [0] = "Η ενέργεια είναι το πραγματικό μέτρο της νοημοσύνης."
εισαγωγικά [1] = "Το μπέιζ-μπώλ έχει το μεγάλο πλεονέκτημα σε σχέση με το κρίκετ ότι έχει λήξει σύντομα".
quotes [2] = "Κάθε στόχος, κάθε δράση, κάθε σκέψη, κάθε συναίσθημα που βιώνει κάποιος, είτε είναι συνειδητά ή ασυνείδητα γνωστό, είναι μια προσπάθεια να αυξηθεί το επίπεδο της ειρήνης του νου.
εισαγωγικά [3] = "Ένα καλό κεφάλι και μια καλή καρδιά είναι πάντα ένας τρομερός συνδυασμός."
var rand = Math.floor (Math.random () * quotes.length).
document.write (εισαγωγικά [rand]);
}
writeRandomQuote ();
</ Script>

Σώμα:

<script type = "text / javascript"> writeRandomQuote (); </ script>

Τι κάνει το απόσπασμα JavaScript;

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

Προηγούμενες / Επόμενες συνδέσεις

Γρήγορο δείγμα

<a href="javascript:history.back(1)"> Προηγούμενη σελίδα </a>. | <a href="javascript:history.back(-1)"> Επόμενη σελίδα </a>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα είναι μεγάλο εάν έχετε πολλές σελίδες σε ένα άρθρο ή σεμινάριο. Θα επιτρέψει στον χρήστη να περιηγηθεί εύκολα μεταξύ των σελίδων. Είναι επίσης μικρό και ελαφρύ από άποψη πόρων.

Σημειώστε μια σελίδα

Γρήγορο δείγμα

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Το όνομα του ιστότοπού σας')"> Προσθήκη στα Αγαπημένα </a>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα επιτρέψει στον χρήστη να κάνει σελιδοδείκτη τη σελίδα σας με ευκολία. το μόνο που έχετε να κάνετε είναι να κάνετε κλικ στο σύνδεσμο. Τα μικρά χαρακτηριστικά του όπως αυτό που μπορούν να αυξήσουν τη συνολική εμπειρία των θεατών σας.

Εύκολη σύνδεση σελίδας εκτύπωσης

Γρήγορο δείγμα

<a href="javascript:window.print();"> Εκτύπωση σελίδας </a>

Τι κάνει το απόσπασμα JavaScript;

Αυτός ο μικρός σύνδεσμος θα επιτρέψει στις εμφανίσεις σας να εκτυπώσουν εύκολα τη σελίδα σας. Χρησιμοποιεί τη λειτουργία γρήγορης εκτύπωσης που έχει ήδη ρυθμιστεί από το πρόγραμμα περιήγησης και δεν χρησιμοποιεί πόρους μέχρι να κάνει κλικ.

Εμφάνιση μορφοποιημένης ημερομηνίας

Γρήγορο δείγμα

Κεφάλι:

<script type="text/javascript">
λειτουργία showDate () {
var d = νέα Ημερομηνία ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1. // μήνες βασίζονται σε μηδέν
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}
</ Script>

Σώμα:

<script type = "text / javascript"> showDate (); </ script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα σας επιτρέψει να εμφανίσετε την τρέχουσα ημερομηνία οπουδήποτε στην ιστοσελίδα σας και δεν χρειάζεται να ενημερωθείτε. Απλώς το τοποθετήστε στη θέση του και ξεχάστε το.

Τμήμα διαχωριστή κομματιών

Γρήγορο δείγμα

Κεφάλι:

<script type="text/javascript">
συνάρτηση addCommas (num) {
num + = ";
var n1 = num.split ('.');
var n2 = n1 [0].
var n3 = n1.length> 1? '.' + n1 [1]: ".
var temp = / (d +) (d {3}).
ενώ (temp.test (n2)) {
n2 = n2.replace (temp, "+", "+");
}
var out = επιστροφή n2 + n3.
document.write (έξω);
}
</ Script>

Σώμα:

<script type = "text / javascript"> addCommas ("4550989023") </ script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα χρησιμοποιηθεί κυρίως από ιστότοπους που χρησιμοποιούν συχνά αριθμούς. Αυτό το απόσπασμα θα κρατήσει τους αριθμούς σας κοιτάζοντας το ίδιο σε ολόκληρο τον πίνακα. Το μόνο που έχετε να κάνετε είναι να αντιγράψετε τη γραμμή του σώματος όπου θέλετε να προσθέσετε έναν αριθμό και να αντικαταστήσετε τον αριθμό εκεί με τον αριθμό σας.

Αποκτήστε την περιοχή προβολής ενός προγράμματος περιήγησης

Γρήγορο δείγμα

<script type="text/javascript">

<! -

var viewportwidth;

var viewportheight;

// τα πιο συμβατά προγράμματα περιήγησης (mozilla / netscape / opera / IE7) χρησιμοποιούν window.innerWidth και window.innerHeight

αν (typeof window.innerWidth! = 'undefined')

{

viewportwidth = window.innerWidth,

viewportheight = window.innerHeight

}

// IE6 σε λειτουργία συμβατή με τα πρότυπα (δηλαδή με έγκυρο doctype ως πρώτη γραμμή στο έγγραφο)

else if (typeof document.documentElement! = 'undefined'

&& typeof document.documentElement.clientWidth! =

'undefined' && document.documentElement.clientWidth! = 0)

{

viewportwidth = document.documentElement.clientWidth,

viewportheight = document.documentElement.clientHeight

}

// παλαιότερες εκδόσεις του IE

αλλιώς

{

viewportwidth = document.getElementsByTagName ('σώμα') [0] .clientWidth,

viewportheight = document.getElementsByTagName ('σώμα') [0] .clientHeight

}

document.write ('<p> Το πλάτος της προβολής σας είναι' + viewportwidth + 'x' + viewportheight + '</ p>');

// ->

</ Script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα σας επιτρέψει να αποκτήσετε το πλάτος και το ύψος της περιοχής προβολής στο πρόγραμμα περιήγησης προβολών. Αυτό θα δώσει στον σχεδιαστή την δυνατότητα να δημιουργεί και να χρησιμοποιεί διαφορετικές οθόνες βάσει του μεγέθους του παραθύρου του προγράμματος περιήγησης του χρήστη.

Ανακατεύθυνση με προαιρετική καθυστέρηση

Γρήγορο δείγμα

<script type="text/javascript">

setTimeout ("window.location.href =

'http://walkerwines.com.au/' ', 5 * 1000).

</ Script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα σας επιτρέψει να ανακατευθύνετε τους θεατές σας σε μια άλλη σελίδα και έχει τη δυνατότητα να ορίσει μια καθυστέρηση. Η χρήση αυτού του αποσπάσματος είναι αρκετά αυτονόητη και είναι ένα πολύ πολύτιμο εργαλείο στη ζώνη σας.

Ανίχνευση iPhone

Δείγμα

<script type="text/javascript">

αν ((navigator.userAgent.match (/ iPhone / i)) || (navigator.userAgent.match (/ iPod / i))) {

αν (document.cookie.indexOf ("iphone_redirect = false") == -1) {

window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";

}

}

</ Script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα σας επιτρέψει να εντοπίσετε αν ο θεατής σας βρίσκεται σε iPhone ή iPod που σας επιτρέπει να εμφανίζετε διαφορετικό περιεχόμενο σε αυτά. Αυτό το απόσπασμα είναι ανεκτίμητο με το πόσο μεγάλη είναι η αγορά κινητής τηλεφωνίας και πρόκειται μόνο να συνεχίσει να αυξάνεται.

Εκτύπωση μηνύματος στη γραμμή κατάστασης

Γρήγορο δείγμα

<script language = "javascript" type = "text / javascript">
<! -
window.status = "<ΤΥΠΟΣ ΜΟΥ ΜΗΝΥΜΑ>";
/ / ->
</ Script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το μικρό απόσπασμα θα σας επιτρέψει να εκτυπώσετε ένα μήνυμα στη γραμμή κατάστασης. Μπορείτε να εμφανίσετε πρόσφατα ή σημαντικά νέα σε μια περιοχή που θα τραβήξει το μάτι του χρήστη.

Άρθρο του WHSR Guest

Αυτό το άρθρο γράφτηκε από έναν συνεισφέροντα. Οι απόψεις του συγγραφέα παρακάτω είναι εξ ολοκλήρου δικές του και μπορεί να μην αντικατοπτρίζουν τις απόψεις του WHSR.

Συνδέομαι: