Acerca de WHSR Guest
Este artículo fue escrito por un colaborador invitado. Las opiniones del autor a continuación son totalmente suyas y pueden no reflejar las opiniones de WHSR.
JavaScript es utilizado en todas partes en línea en estos días - mejorar la interactividad del sitio web, validar la información y / o mejorar las perspectivas de un sitio web.
JavaScript apareció por primera vez en 1995 y ha recorrido un largo camino desde entonces en términos de ser aceptado y cómo se usa. La sintaxis utilizada en JavaScript fue fuertemente influenciada por C; pero Java, Pearl, Python y Scheme también jugaron su parte.
Consejos para principiantes de JavaScrip: ¿qué necesita saber?
Para empezar, algunos conceptos básicos que debes saber son:
También es importante comprender que JavaScript en realidad conducirá a un desastre cuando se usa de manera incorrecta.
Los JavaScripts mal configurados y codificados de forma descuidada ralentizarán su sitio web y dañarán la navegación general del sitio. Esto, a su vez, afecta la tasa de retorno de sus visitantes (debido a la mala experiencia del usuario), así como la clasificación de los motores de búsqueda (debido a las tasas de respuesta lentas del sitio web y al rastreo de bots). Para ayudar a validar mi caso aquí, póngase en la piel de un espectador. Si un sitio web que estaba visitando se cargara lentamente, fuera difícil de navegar y, en general, poco atractivo, ¿regresaría al sitio? Yo no lo haría.
A continuación hay una pequeña lista de cosas en las que pensar al agregar JavaScript a su página web.
No, no estoy tratando de asustarte con estos puntos.
De hecho, no tengas miedo de usa JavaScript en tus sitios web ya que proporciona toneladas de beneficios y, como se mencionó, es utilizado por la mayoría. El punto clave que estoy tratando de transmitir aquí es no seguir agregando características de JavaScript a un sitio cuando son innecesarias. Algunos sitios necesitarán más JavaScript que el resto; algunos simplemente necesitan menos: el hecho de que un sitio lo esté haciendo no significa que usted deba hacer lo mismo.
Ahora, vayamos a las cosas por las que vino aquí: a continuación se muestra una lista de 15 fragmentos de JavaScript que mejorarán su sitio tanto en funcionalidad como en apariencia. El código se dividirá en dos secciones, el encabezado y el cuerpo o el archivo .js. Si no se proporciona un título de sección, no es necesario para ese fragmento en particular.
Muestra rápida
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'; }
¿Qué hace el fragmento de JavaScript?
Este pequeño fragmento evitará que su sitio web intente mostrar un video que el navegador no puede admitir, lo que le ahorrará ancho de banda y potencia de procesamiento.
Muestra rápida
/** * 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"; } }
¿Qué hace el fragmento de JavaScript?
Este fragmento es un poco largo pero muy útil, permitirá que su sitio almacene información en la computadora del espectador y luego la lea en otro momento. Este fragmento de código se puede utilizar de muchas maneras diferentes para realizar diferentes tareas.
Muestra rápida
var images = new Array(); function preloadImages(){ for (i=0; i
¿Qué hace el fragmento de JavaScript?
Este fragmento de código evitará que su sitio tenga ese momento incómodo cuando solo se muestra parte del sitio; Esto no solo se ve mal sino que también es poco profesional. Todo lo que tienes que hacer es agregar tus imágenes a la sección de imágenes de precarga y estás listo para rodar.
Muestra rápida
Cabeza: 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); } Cuerpo: Dirección de correo electrónico:
¿Qué hace el fragmento de JavaScript?
Este fragmento validará que se ingrese una dirección de correo electrónico formateada correctamente en un formulario, no puede garantizar que la dirección de correo electrónico sea real, no hay forma de verificar eso con JavaScript.
Muestra rápida
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");
¿Qué hace el fragmento de JavaScript?
Este fragmento evitará que el usuario pueda hacer clic con el botón derecho en su página. Esto puede disuadir al usuario promedio de tomar prestadas imágenes o códigos de su sitio.
Muestra rápida
Cabeza: 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(); Cuerpo: writeRandomQuote();
¿Qué hace el fragmento de JavaScript?
Ok, esto no es un fragmento de código que usarían todos los sitios, pero se puede usar para mostrar más que solo citas aleatorias. Puede cambiar el contenido de acuerdo con las citas a lo que desee y puede mostrar imágenes o texto al azar en cualquier lugar de su sitio.
Muestra rápida
Página anterior | Siguiente página
¿Qué hace el fragmento de JavaScript?
Este fragmento de código es excelente si tiene varias páginas en un artículo o tutorial. Permitirá al usuario navegar entre las páginas con facilidad. También es pequeño y ligero desde el punto de vista de los recursos.
Muestra rápida
Agregar a los favoritos
¿Qué hace el fragmento de JavaScript?
Este fragmento le permitirá al usuario marcar su página con facilidad; Todo lo que tienen que hacer es hacer clic en el enlace. Sus pequeñas características como esta pueden aumentar la experiencia general de los espectadores.
Muestra rápida
Imprimir página
¿Qué hace el fragmento de JavaScript?
Este pequeño enlace permitirá que sus vistas impriman fácilmente su página. Utiliza la función de impresión rápida ya configurada por su navegador y no utiliza recursos hasta que se hace clic.
Muestra rápida
Cabeza: 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); } Cuerpo: showDate();
¿Qué hace el fragmento de JavaScript?
Este fragmento de código le permitirá mostrar la fecha actual en cualquier lugar de su página web y no necesita actualizarse. Simplemente ponlo en su lugar y olvídalo.
Muestra rápida
Cabeza: 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); } Cuerpo: addCommas("4550989023");
¿Qué hace el fragmento de JavaScript?
Este fragmento sería utilizado principalmente por sitios que usan números a menudo. Este fragmento mantendrá sus números con el mismo aspecto en todos los ámbitos. Todo lo que tiene que hacer es copiar la línea del cuerpo donde desea agregar un número y reemplazar el número allí con su número.
Muestra rápida
Your viewport width is '+viewportwidth+'x'+viewportheight+''); //-->
¿Qué hace el fragmento de JavaScript?
Este fragmento le permitirá obtener el ancho y la altura del área de visualización en su navegador de vistas. Esto le dará al diseñador la capacidad de crear y usar diferentes pantallas según el tamaño de la ventana del navegador del usuario.
Muestra rápida
setTimeout( "window.location.href = 'http://walkerwines.com.au/'", 5*1000 );
¿Qué hace el fragmento de JavaScript?
Este fragmento de código le permitirá redirigir a sus espectadores a otra página y tiene la opción de establecer un retraso. El uso de este fragmento es bastante explícito y es una herramienta muy valiosa para tener en su cinturón.
Muestra
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"; } }
¿Qué hace el fragmento de JavaScript?
Este fragmento de código te permitirá detectar si tu espectador está en un iPhone o iPod y te permite mostrar contenido diferente. Este fragmento tiene un valor incalculable con el tamaño del mercado móvil y solo seguirá creciendo.
Muestra rápida
"; // -->
¿Qué hace el fragmento de JavaScript?
Este pequeño fragmento le permitirá imprimir un mensaje en la barra de estado. Puede mostrar noticias recientes o importantes en un área que llamará la atención del usuario.