15 Cool JavaScript Sample Snippets

Un aperçu rapide sur JavaScript

De nos jours, JavaScript est utilisé partout en ligne afin d'améliorer l'interactivité des sites Web, de valider les informations et / ou d'améliorer les perspectives de site Web. JavaScript est apparu pour la première fois dans 1995 et a depuis parcouru un long chemin en termes d’acceptation et d’utilisation. La syntaxe utilisée dans JavaScript a été fortement influencée par C; mais Java, Pearl, Python et Scheme ont également joué leur rôle.

Qu'est-ce que JavaScript?

Il y a un vieux clip YouTube qui répond bien à la question. Voici.

Conseils pour débutants: ce que vous devez savoir?

Pour commencer, voici quelques notions de base:

• JavaScript peut être désactivé dans le navigateur
• JavaScript sera exécuté chaque fois qu'une page est chargée
• JavaScript prend du temps à charger sur une connexion Internet lente
• JavaScript est toujours exécuté à partir des pages en cache
• Vous pouvez héberger du JavaScript dans une page Web ou en externe à partir d'un fichier .js
• JavaScript est complètement différent de Java

Il est également important de comprendre que JavaScript va effectivement provoquer un désastre lorsqu'il est utilisé à mauvais escient. Des JavaScripts mal configurés et mal codés ralentiront votre site Web et endommageront la navigation globale du site. Cela affecte également le taux de retour de vos visiteurs (en raison d'une mauvaise expérience utilisateur) ainsi que le classement des moteurs de recherche (en raison du faible taux de réponse du site Web). Pour aider à valider mon cas ici, mettez-vous dans la peau d'un spectateur. Si un site Web que vous visitiez était lent, sa navigation était difficile et, globalement, peu attrayant, est-ce que vous reviendriez sur le site? Je ne voudrais pas

Vous trouverez ci-dessous une liste d'éléments à prendre en compte lors de l'ajout de JavaScript à votre site Web.

• JavaScript est-il requis pour que le site fonctionne correctement?
• À quoi ressemblera le site si le JavaScript était bloqué?
• Le JavaScript va-t-il nuire aux performances du serveur?
• L'ajout de JavaScript aidera-t-il votre site à se déplacer dans la direction souhaitée?

Non, je ne cherche pas à vous faire peur avec ces points. En fait, n’ayez pas peur d’utiliser JavaScript sur vos sites Web car il offre de nombreux avantages et, comme mentionné, il est utilisé par les majorités. Le point clé que j'essaie de faire comprendre ici est de ne pas continuer à ajouter des fonctionnalités JavaScript à un site lorsqu'elles sont inutiles. Certains sites auront besoin de plus de JavaScript que les autres; certains ont simplement besoin de moins - Ce n’est pas parce qu’un seul site le fait que vous devez en faire autant.

Freebies: 15 Cool JavaScript Snippets pour votre site Web

Passons maintenant aux choses pour lesquelles vous êtes venu ici - vous trouverez ci-dessous une liste d'extraits de code JavaScript 15 qui amélioreront votre site, que ce soit en termes de fonctionnalités ou d'apparence. Le code sera divisé en deux sections, la tête et le corps ou le fichier .js. Si aucun titre de section n'est donné, il n'est pas nécessaire pour cet extrait de code particulier.

Comprendre la vidéo HTML5

Échantillon rapide

<Script type = "text / javascript">

function comprend_video () {
return !! document.createElement ('video'). canPlayType; // booléen
}

si (! comprend_video ()) {
// Doit être un navigateur plus ancien ou IE.
// Peut-être faire quelque chose comme cacher la coutume
// contrôles HTML5. Ou peu importe…
videoControls.style.display = 'aucun';
}

</ Script>

Que fait l'extrait de code JavaScript?

Ce petit extrait empêchera votre site Web d'essayer d'afficher une vidéo que le navigateur ne peut pas prendre en charge, ce qui vous fait économiser de la bande passante et de la puissance de traitement.

Cookies JavaScript

Échantillon rapide

<Script type = "text / javascript">

/ **

* Définit un cookie avec le nom et la valeur donnés.

*

* nom du cookie

* valeur Valeur du cookie

* [expire] Date d'expiration du cookie (par défaut: fin de la session en cours)

* [chemin] Chemin où le cookie est valide (par défaut: chemin du document appelant)

* [domaine] Domaine dans lequel le cookie est valide

* (par défaut: domaine du document appelant)

* [sécurisé] Valeur booléenne indiquant si la transmission par cookie nécessite une

* transmission sécurisée

*/

fonction setCookie (nom, valeur, expire, chemin d'accès, domaine, sécurisé) {

document.cookie = name + "=" + escape (value) +

((expires)? "; expires =" + expires.toGMTString (): "") +

(? (Chemin) "; path =" + path: "") +

((domaine)? "; domaine =" + domaine: "") +

((Obtenir) "; sécuriser": "");

}

</ Script>

<Script type = "text / javascript">

/ **

* Obtient la valeur du cookie spécifié.

*

* nom Nom du cookie désiré.

*

* Retourne une chaîne contenant la valeur du cookie spécifié,

* ou null si le cookie n'existe pas.

*/

fonction getCookie (nom) {

var dc = document.cookie;

préfixe var = nom + "=";

var begin = dc.indexOf (";" + préfixe);

if (begin == -1) {

begin = dc.indexOf (préfixe);

if (begin! = 0) renvoie null;

} Else {

commencer + = 2;

}

var end = document.cookie.indexOf (";", commencer);

if (fin == -1) {

fin = dc.length;

}

return unescape (dc.substring (begin + prefix.length, end));

}

</ Script>

<Script type = "text / javascript">

/ **

* Supprime le cookie spécifié.

*

* nom du cookie

* [chemin] chemin du cookie (doit être identique au chemin utilisé pour créer un cookie)

* [domaine] domaine du cookie (doit être identique au domaine utilisé pour créer le cookie)

*/

function deleteCookie (nom, chemin d'accès, domaine) {

if (getCookie (nom)) {

document.cookie = name + "=" +

(? (Chemin) "; path =" + path: "") +

((domaine)? "; domaine =" + domaine: "") +

"; expire = jeu, 01-Jan-70 00: 00: 01 GMT";

}

}

</ Script>

Que fait l'extrait de code JavaScript?

Cet extrait est un peu long mais très utile, il permettra à votre site de stocker des informations sur l'ordinateur du spectateur, puis de les lire à un autre moment. Cet extrait peut être utilisé de différentes manières pour accomplir différentes tâches.

Précharger vos images

Échantillon rapide

<Script type = "text / javascript">

var images = new Array ();

fonction preloadImages () {

pour (i = 0; i <preloadImages.arguments.length; i ++) {

images [i] = nouvelle image ();

images [i] .src = preloadImages.arguments [i];

}

}

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

</ Script>

Que fait l'extrait de code JavaScript?

Cet extrait empêchera votre site d’avoir ce moment inconfortable où il n’affiche qu’une partie du site; non seulement cela semble mauvais, mais aussi un manque de professionnalisme. Tout ce que vous avez à faire est d’ajouter vos images à la section preloadImages et vous êtes prêt à rouler.

Validation par courrier électronique

Échantillon rapide

Directeur:

<script type = "text / javascript">
fonction validateEmail (theForm) {
if (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. test (theForm.email-id.value)) {
return (true);
}
alert ("Adresse e-mail invalide! Veuillez entrer à nouveau avec précaution !.");
return (false);
}
</ Script>

Corps:

<form onSubmit = "return validateEmail (this);" action = "">
Adresse électronique:
<input type = "text" name = "emailid" />
<input type = "submit" value = "Submit" />
<type d'entrée = "reset" value = "Reset" />

Que fait l'extrait de code JavaScript?

Ce fragment de code confirmera qu'une adresse électronique correctement formatée est entrée dans un formulaire. Il ne peut pas garantir que l'adresse électronique est réelle. Il n'y a aucun moyen de vérifier cela avec JavaScript.

Pas de clic droit

Échantillon rapide

<script type = "text / javascript">
fonction f1 () {
if (document.all) {return false; }
}
fonction f2 (e) {
if (document.layers || (document.getElementById &! document.all)) {
if (e.which == 2 || e.which == 3) {return false; }
}
}
if (document.layers) {
document.captureEvents (Event.MOUSEDOWN);
document.onmousedown = f1;
}
else {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = nouvelle fonction ("return false");
</ Script>

Que fait l'extrait de code JavaScript?

Cet extrait empêchera l'utilisateur de cliquer avec le bouton droit de la souris sur votre page. Cela peut décourager l'utilisateur moyen d'emprunter des images ou du code de votre site.

Afficher des citations aléatoires

Échantillon rapide

Tête:

<script type = "text / javascript">
writeRandomQuote = function () {
var quotes = new Array ();
quotes [0] = "L'action est la véritable mesure de l'intelligence.";
quotes [1] = "Le baseball a le grand avantage d'être terminé plus tôt que le cricket.";
quotes [2] = "Chaque but, chaque action, chaque pensée, chaque sentiment ressenti, qu’il soit consciemment ou non, est une tentative d’augmenter sa tranquillité d’esprit.";
quotes [3] = "Une bonne tête et un bon coeur sont toujours une combinaison formidable.";
var rand = Math.floor (Math.random () * quotes.length);
document.write (quotes [rand]);
}
writeRandomQuote ();
</ Script>

Corps:

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

Que fait l'extrait de code JavaScript?

Ok, donc ce n’est pas un extrait que tous les sites utiliseraient, mais il peut être utilisé pour afficher plus que des citations aléatoires. Vous pouvez modifier le contenu des citations comme bon vous semble et afficher des images ou du texte au hasard, où que vous soyez sur votre site.

Liens précédent / suivant

Échantillon rapide

<a href="javascript:history.back(1)"> Page précédente </a> | <a href="javascript:history.back(-1)"> Page suivante </a>

Que fait l'extrait de code JavaScript?

Cet extrait est idéal si vous avez plusieurs pages sur un article ou un tutoriel. Cela permettra à l'utilisateur de naviguer facilement entre les pages. Il est également petit et léger du point de vue des ressources.

Marquer une page

Échantillon rapide

<a href="javascript:window.external.AddFavorite('http://www.votresite.com', 'Votre nom de site')"> Ajouter aux favoris </a>

Que fait l'extrait de code JavaScript?

Cet extrait de code permettra à l'utilisateur de créer facilement un signet pour votre page. tout ce qu'ils ont à faire est de cliquer sur le lien. Ses petites fonctionnalités comme celle-ci peuvent augmenter l'expérience globale de vos téléspectateurs.

Lien d'impression de page facile

Échantillon rapide

<a href="javascript:window.print();"> Imprimer la page </a>

Que fait l'extrait de code JavaScript?

Ce petit lien permettra à vos vues d’imprimer facilement votre page. Il utilise la fonction d'impression rapide déjà configurée par votre navigateur et n'utilise aucune ressource jusqu'à ce que l'utilisateur clique dessus.

Afficher la date formatée

Échantillon rapide

Tête:

<script type = "text / javascript">
fonction showDate () {
var d = new Date ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // mois sont à base zéro
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}
</ Script>

Corps:

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

Que fait l'extrait de code JavaScript?

Cet extrait de code vous permettra d’afficher la date du jour n’importe où sur votre page Web et n’a pas besoin d’être mis à jour. Il suffit de le mettre en place et de l’oublier.

Séparateur de virgule

Échantillon rapide

Tête:

<script type = "text / javascript">
fonction addCommas (num) {
num + = ";
var n1 = num.split ('.');
var n2 = n1 [0];
var n3 = n1.length> 1? '.' + n1 [1]: ”;
var temp = / (d +) (d {3}) /;
while (temp.test (n2)) {
n2 = n2.replace (temp, "+ ',' +");
}
var out = return n2 + n3;
document.write (out);
}
</ Script>

Corps:

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

Que fait l'extrait de code JavaScript?

Cet extrait serait principalement utilisé par les sites qui utilisent souvent des nombres. Cet extrait gardera vos numéros identiques. Tout ce que vous avez à faire est de copier la ligne de corps où vous souhaitez ajouter un numéro et de remplacer le numéro par votre numéro.

Obtenir la zone d'affichage d'un navigateur

Échantillon rapide

<Script type = "text / javascript">

<! -

var viewportwidth;

var viewportheight;

// les navigateurs les plus compatibles (mozilla / netscape / opera / IE7) utilisent window.innerWidth et window.innerHeight

if (typeof window.innerWidth! = 'undefined')

{

viewportwidth = window.innerWidth,

viewportheight = window.innerHeight

}

// IE6 en mode conforme aux normes (c'est-à-dire avec un type de document valide comme première ligne du document)

else if (typeof document.documentElement! = 'non défini'

&& typeof document.documentElement.clientWidth! =

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

{

viewportwidth = document.documentElement.clientWidth,

viewportheight = document.documentElement.clientHeight

}

// anciennes versions d'IE

d'autre

{

viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth,

viewportheight = document.getElementsByTagName ('body') [0] .clientHeight

}

document.write ('<p> La largeur de votre fenêtre d'affichage est' + viewportwidth + 'x' + viewportheight + '</ p>');

// ->

</ Script>

Que fait l'extrait de code JavaScript?

Cet extrait de code vous permettra d’obtenir la largeur et la hauteur de la zone d’affichage dans votre navigateur de vues. Cela donnera au concepteur la possibilité de créer et d'utiliser différents affichages en fonction de la taille de la fenêtre du navigateur de l'utilisateur.

Redirection avec délai optionnel

Échantillon rapide

<script type = "text / javascript">

setTimeout ("window.location.href =

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

</ Script>

Que fait l'extrait de code JavaScript?

Cet extrait de code vous permettra de rediriger vos lecteurs vers une autre page et vous permet de définir un délai. L'utilisation de cet extrait de code est assez explicite et constitue un outil très précieux à avoir dans votre ceinture.

Détecter les iPhones

Échantillon

<script type = "text / javascript">

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

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

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

}

}

</ Script>

Que fait l'extrait de code JavaScript?

Cet extrait de code vous permettra de détecter si votre lecteur est sur un iPhone ou un iPod, ce qui vous permettra d’afficher du contenu différent. Cet extrait de code est inestimable par rapport à la taille du marché de la téléphonie mobile et il ne fera que continuer à se développer.

Imprimer le message dans la barre d'état

Échantillon rapide

<script language = "javascript" type = "text / javascript">
<! -
window.status = "<TAPEZ VOTRE MESSAGE>";
/ / ->
</ Script>

Que fait l'extrait de code JavaScript?

Ce petit extrait vous permettra d’imprimer un message dans la barre d’état. Vous pouvez afficher des informations récentes ou importantes dans une région qui attirera l’attention de l’utilisateur.