À propos de l'invité WHSR
Cet article a été écrit par un contributeur invité. Les opinions de l'auteur ci-dessous sont entièrement les siennes et peuvent ne pas refléter les vues de WHSR.
Relier:
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:
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.
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.
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.
É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.
É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.
É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.
É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); } Notes de coeur: 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.
É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.
É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(); Notes de coeur: 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.
É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.
É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.
É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.
É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); } Notes de coeur: 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.
É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); } Notes de coeur: 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.
É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.
É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.
É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.
É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.