Fragmentos de muestra de JavaScript gratuitos de 15 para sus sitios web

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:

• JavaScript se puede desactivar en el navegador
• JavaScript se ejecutará cada vez que se carga una página
• JavaScript tarda en cargarse en una conexión de Internet lenta
• JavaScript todavía se ejecuta desde páginas en caché
• Puede alojar JavaScript dentro de una página web o externamente desde un archivo .js
• JavaScript es completamente diferente a Java

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.

• ¿Se requiere JavaScript para que el sitio funcione correctamente?
• ¿Cómo se verá el sitio si se bloquea el JavaScript?
• ¿Dañará el JavaScript el rendimiento del servidor?
• ¿Agregar la ayuda de JavaScript moverá su sitio en la dirección que desea que vaya?

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.

Regalos: 15 Fragmentos de JavaScript para tu sitio web

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.

1 Comprensión del video HTML5

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.

2 Cookies de JavaScript

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.

3 Precarga tus imágenes

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.

4 Validación de correo electrónico

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);
}


Cremas corporales: 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.

5 Sin clic derecho

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.

6 Mostrar cotizaciones aleatorias

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();


Cremas corporales: 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.

7 Enlaces anteriores / siguientes

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.

8 Marcar una página

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.

9 Enlace de página de impresión fácil

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.

10 Mostrar fecha formateada

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);
  }


Cremas corporales: 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.

11 Separador de coma

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);
}


Cremas corporales: 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.

12 Obtener el área de visualización de un navegador

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.

13 Redireccionar con retraso opcional

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.

14 Detectar iPhones

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.

15 Imprimir mensaje en la barra de estado

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.

Lee mas:

• Guía HTML básica para principiantes
• Creando un sitio web desde cero
• Lo básico de .htaccess
• Codificación para niños: programación Scratch
• Códigos de WordPress para mejorar tu blog