Extraits d'échantillons JavaScript gratuits 15 pour vos sites Web

JavaScript est utilisé partout en ligne ces jours-ci - pour améliorer l'interactivité du site Web, pour valider les informations et / ou pour améliorer les perspectives d'un 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.

Astuces pour débutants JavaScrip: 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 à son tour 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 de la lenteur des taux de réponse du site Web et de l'exploration des robots). Pour aider à valider mon cas ici, mettez-vous dans la peau d'un spectateur. Si un site Web que vous visitiez se chargeait lentement, était difficile à naviguer et, dans l'ensemble, peu attrayant, reviendriez-vous sur le site? Je ne le ferais pas.

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

• Est-ce que JavaScript est 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 effrayer avec ces points.

En fait, n'ayez pas peur de utiliser JavaScript sur vos sites Web car il offre des tonnes d'avantages et, comme mentionné, il est utilisé par la majorité. Le point clé que j'essaie de faire passer ici est de ne pas simplement 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 juste besoin de moins - Ce n'est pas parce qu'un site le fait que vous devriez faire de même.

Freebies: 15 Cool JavaScript Snippets pour votre site Web

Maintenant, passons aux choses pour lesquelles vous êtes venu ici - vous trouverez ci-dessous une liste de 15 extraits de code JavaScript qui amélioreront votre site en termes de fonctionnalité 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.

1. Comprendre la vidéo HTML5

Échantillon rapide

function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

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.

2. Cookies JavaScript

Échantillon rapide

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

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

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

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

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

        ((secure) ? "; secure" : "");

}








/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

    var begin = dc.indexOf("; " + prefix);

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

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

    if (end == -1) {

        end = dc.length;

    }

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

}








/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

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

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

            "; expires=Thu, 01-Jan-70 00:00:01 GMT";

    }

}

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.

3. Précharger vos images

Échantillon rapide

var images = new Array();

function preloadImages(){

    for (i=0; i 

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.

4. Validation par courrier électronique

Échantillon rapide

Directeur:


function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}


Corps: Adresse électronique:

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.

5. Pas de clic droit

Échantillon rapide

function f1() {
  if(document.all) { return false; }
}
function 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 = new function("return false");

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.

6. Afficher des citations aléatoires

Échantillon rapide

Head:
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();


Corps: writeRandomQuote();

Que fait l'extrait de code JavaScript?

Ok, donc ce n’est pas un extrait utilisé par tous les sites, 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.

7. Liens précédent / suivant

Échantillon rapide

Page précédente | Page suivante

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.

8. Marquer une page

Échantillon rapide

Ajouter aux Favoris

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.

9. Lien d'impression de page facile

Échantillon rapide

Imprimer la page

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.

10. Afficher la date formatée

Échantillon rapide

Head:
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }


Corps: showDate();

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.

11. Séparateur de virgule

Échantillon rapide

Head:
function 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);
}


Corps: addCommas("4550989023");

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.

12. Obtenir la zone d'affichage d'un navigateur

Échantillon rapide

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

Que fait l'extrait de code JavaScript?

Cet extrait 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.

13. Redirection avec délai optionnel

Échantillon rapide

setTimeout( "window.location.href =

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

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 est assez explicite et c'est un outil très précieux à avoir dans votre ceinture.

14. Détecter les iPhones

Échantillon

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";

    }

}

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.

15. Imprimer le message dans la barre d'état

Échantillon rapide

 
"; 
// --> 

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.

Lire la suite:

• Guide HTML de base pour les nuls
• Créer un site Web à partir de zéro
• Les bases du .htaccess
• Codage pour les enfants: programmation Scratch
• Codes WordPress pour améliorer votre blog