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 - para 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 codificados mal configurados y descuidados 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 las clasificaciones de los motores de búsqueda (debido a las bajas tasas de respuesta del sitio web y el rastreo de bot). Para ayudar a validar mi caso aquí, ponte en la piel de un espectador. Si un sitio web que visitaba se cargara lentamente, fuera difícil de navegar y, en general, poco atractivo, ¿volverí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 las mayorías. El punto clave que estoy tratando de transmitir aquí es no seguir agregando funciones de JavaScript a un sitio cuando son innecesarias. Algunos sitios necesitarán más JavaScript que el resto; algunos solo necesitan menos: solo porque un sitio lo esté haciendo no significa que debas hacer lo mismo.

Regalos: 15 Fragmentos de JavaScript para tu sitio web

Ahora, pasemos a las cosas por las que vino aquí: a continuación hay una lista de fragmentos de JavaScript de 15 que mejorarán su sitio en funcionalidad o apariencia. El código se dividirá en dos secciones, la cabeza 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

<script type = "text / javascript"> la función entiende_video () {return !! document.createElement ('video'). canPlayType; // boolean} if (! understand_video ()) {// Debe ser un navegador o IE más antiguo. // Quizás haga algo como ocultar los controles personalizados // HTML5. O lo que sea ... videoControls.style.display = 'none'; } </script>

¿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

<script type = "text / javascript"> / ** * Establece una cookie con el nombre y el valor dados. * * nombre Nombre de la cookie * valor Valor de la cookie * [caduca] Fecha de vencimiento de la cookie (predeterminada: final de la sesión actual) * [ruta] Ruta donde la cookie es válida (predeterminada: ruta del documento de llamada) * [ dominio] Dominio donde la cookie es válida * (predeterminado: dominio del documento de llamada) * [seguro] Valor booleano que indica si la transmisión de la cookie requiere una * transmisión segura * / función setCookie (nombre, valor, caduca, ruta, dominio, seguro) {document.cookie = name + "=" + escape (value) + ((expires)? "; expires =" + expires.toGMTString (): "") + ((ruta)? "; ruta =" + ruta: "") + ((dominio)? "; dominio =" + dominio: "") + ((seguro)? "; seguro": ""); } </script> <script type = "text / javascript"> / ** * Obtiene el valor de la cookie especificada. * * nombre Nombre de la cookie deseada. * * Devuelve una cadena que contiene el valor de la cookie especificada, * o nulo si la cookie no existe. * / function getCookie (name) {var dc = document.cookie; prefijo var = nombre + "="; var begin = dc.indexOf (";" + prefijo); if (begin == -1) {begin = dc.indexOf (prefijo); if (begin! = 0) devuelve nulo; } else {comenzar + = 2; } var end = document.cookie.indexOf (";", begin); if (end == -1) {end = dc.length; } return unescape (dc.substring (comienzo + prefijo.length, end)); } </script> <script type = "text / javascript"> / ** * Elimina la cookie especificada. * * nombre nombre de la cookie * [ruta] ruta de la cookie (debe ser la misma que la ruta utilizada para crear la cookie) * [dominio] dominio de la cookie (debe ser el mismo que el dominio utilizado para crear la cookie) * / function deleteCookie ( nombre, ruta, dominio) {if (getCookie (name)) {document.cookie = name + "=" + ((ruta)? "; ruta =" + ruta: "") + ((dominio)? "; dominio = "+ dominio:" ") +"; caduca = jue, 01-Jan-70 00: 00: 01 GMT "; }} </script>

¿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

<script type = "text / javascript"> var images = new Array (); función preloadImages () {for (i = 0; i <preloadImages.arguments.length; i ++) {images [i] = new Image (); images [i] .src = preloadImages.arguments [i]; }} preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"); </script>

¿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:

<script type = "text / javascript"> function validateEmail (theForm) {if (/^w+([.-font>?w+)*@w+([.-font>?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } alert ("¡Dirección de correo electrónico no válida! ¡Ingrese nuevamente con cuidado!"); falso retorno); } </script>

Cuerpo: <form onSubmit = "return validateEmail (this);" action = ""> Dirección de correo electrónico: <input type = "text" name = "emailid" /> <input type = "submit" value = "Submit" /> <input type = "reset" value = "Reset" /> </form>

¿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

<script type = "text / javascript"> function f1 () {if (document.all) {return false; }} función 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 = nueva función ("return false"); </script>

¿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: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "La acción es la medida real de la inteligencia"; quotes [1] = "El béisbol tiene la gran ventaja sobre el cricket de haber terminado antes"; quotes [2] = "Cada objetivo, cada acción, cada pensamiento, cada sentimiento que uno experimenta, ya sea consciente o inconscientemente conocido, es un intento de aumentar el nivel de paz mental". quotes [3] = "Una buena cabeza y un buen corazón son siempre una combinación formidable"; var rand = Math.floor (Math.random () * quotes.length); document.write (comillas [rand]); } writeRandomQuote (); </script>

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

¿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

<a href="javascript:history.back(1)"> Página anterior </a> | <a href="javascript:history.back(-1)"> Página siguiente </a>

¿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

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com','Your Site Name')"> Añadir a favoritos </a>

¿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

<a href="javascript:window.print();"> Imprimir página </a>

¿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: <script type = "text / javascript"> función showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // los meses están basados ​​en cero var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </script>

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

¿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: <script type = "text / javascript"> función 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 (fuera); } </script>

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

¿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

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // los navegadores más compatibles con los estándares (mozilla / netscape / opera / IE7) usan window.innerWidth y window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 en modo compatible con los estándares (es decir, con un tipo de documento válido como la primera línea del documento) si no (typeof document.documentElement! = 'Undefined' && typeof document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // versiones anteriores de IE else {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth, viewportheight = document.agElements = document.getElements ('body') [0] .clientHeight} document.write ('<p> El ancho de su viewport es' + viewportwidth + 'x' + viewportheight + '</p>'); // -> </script>

¿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

<script type = "text / javascript"> setTimeout ("window.location.href = 'http://walkerwines.com.au/'", 5 * 1000); </script>

¿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

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

¿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

<script language = "javascript" type = "text / javascript"> <! - window.status = "<TIPE SU MENSAJE>"; // -> </script>

¿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.