Fragmentos de muestra de JavaScript de 15 Cool

Una descripción rápida en JavaScript

JavaScript se usa en todas partes en línea en estos días: para mejorar la interactividad del sitio web, para validar información y / o para 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 aceptación y uso. La sintaxis utilizada en JavaScript fue fuertemente influenciada por C; pero Java, Pearl, Python y Scheme también jugaron su papel también.

¿Qué es JavaScript?

Hay un viejo clip de YouTube que responde bien a la pregunta. Aquí va.

Consejos para principiantes: ¿Qué necesitas 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 entender que JavaScript realmente llevará al 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 las clasificaciones de los motores de búsqueda (debido a las bajas tasas de respuesta del sitio web). Para ayudar a validar mi caso aquí, ponte en la piel de un espectador. Si un sitio web que estaba visitando se cargó lentamente, fue difícil de navegar y, en general, poco atractivo, ¿volvería al sitio? Yo no lo haria

A continuación se muestra una pequeña lista de cosas en las que pensar al agregar JavaScript a su sitio 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 tenga miedo de usar JavaScript en sus sitios web, ya que proporciona muchos beneficios y, como se mencionó, es utilizado por las mayorías. El punto clave que estoy tratando de transmitir aquí es que no solo siga agregando funciones de JavaScript a un sitio cuando no sean necesarias. 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, vamos a ver las cosas por las que vino aquí: a continuación hay una lista de fragmentos de código 15 de JavaScript que mejorarán su sitio, ya sea en funcionalidad o apariencia. El código se dividirá en dos secciones, la cabeza y el cuerpo o el archivo .js. Si no se da un título de sección, entonces no es necesario para ese fragmento de código en particular.

Entendiendo el video HTML5

Muestra rápida

<script type="text/javascript">

la función entiende_video () {
return !! document.createElement ('video'). canPlayType; // booleano
}

if (! understands_video ()) {
// Debe ser el navegador más antiguo o IE.
// Tal vez hacer algo como esconder la costumbre
// Controles HTML5. O lo que sea…
videoControls.style.display = 'ninguno';
}

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

Cookies de JavaScript

Muestra rápida

<script type="text/javascript">

/ **

* Establece una cookie con el nombre y valor dados.

*

* nombre Nombre de la cookie

* valor valor de la cookie

* [caduca] Fecha de caducidad de la cookie (por defecto: final de la sesión actual)

* [ruta] Ruta donde la cookie es válida (por defecto: ruta del documento que llama)

* [dominio] dominio donde la cookie es válida

* (por defecto: dominio del documento que llama)

* [seguro] Valor booleano que indica si la transmisión de la cookie requiere un

* transmisión segura

*/

función setCookie (nombre, valor, caducidad, ruta, dominio, seguro) {

document.cookie = nombre + "=" + escape (valor) +

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

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

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

((Vigilado) "; seguro": "");

}

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

*/

función getCookie (nombre) {

var dc = document.cookie;

var prefijo = nombre + "=";

var comienza = dc.indexOf (";" + prefijo);

si (comienza == -1) {

begin = dc.indexOf (prefijo);

if (begin! = 0) devuelve null;

} Else {

comienza + = 2;

}

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

if (end == -1) {

end = dc.length;

}

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

}

<script type="text/javascript">

/ **

* Borra 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)

*/

función deleteCookie (nombre, ruta, dominio) {

if (getCookie (nombre)) {

document.cookie = nombre + "=" +

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

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

"; caduca = Jueves, 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.

Precarga tus imagenes

Muestra rápida

<script type="text/javascript">

var images = new Array ();

función preloadImages () {

para (i = 0; i <preloadImages.arguments.length; i ++) {

imagenes [i] = nueva imagen ();

imágenes [i] .src = preloadImages.arguments [i];

}

}

preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

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

Validación de correo electrónico

Muestra rápida

Cabeza:

<script type="text/javascript">
función validateEmail (theForm) {
if (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. test (theForm.email-id.value)) {
return (true);
}
alerta ("¡Dirección de correo electrónico no válida! Por favor ingrese otra vez con cuidado!");
return (false);
}

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

¿Qué hace el fragmento de JavaScript?

Este fragmento validará que una dirección de correo electrónico con el formato correcto se ingrese en un formulario, no puede garantizar que la dirección de correo electrónico sea real, no hay forma de verificarlo con JavaScript.

No haga clic derecho

Muestra rápida

<script type="text/javascript">
función f1 () {
if (document.all) {return false; }
}
función f2 (e) {
if (document.layers || (document.getElementById &! document.all)) {
if (e.which == 2 || e.which == 3) {devolver falso; }
}
}
if (document.layers) {
document.captureEvents (Event.MOUSEDOWN);
document.onmousedown = f1;
}
else {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = nueva función ("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.

Mostrar cotizaciones aleatorias

Muestra rápida

Cabeza:

<script type="text/javascript">
writeRandomQuote = function () {
cotizaciones var = nueva matriz ();
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 terminar antes.";
quotes [2] = "Cada objetivo, cada acción, cada pensamiento, cada sentimiento que uno experimenta, ya sea que se sepa consciente o inconscientemente, es un intento de aumentar el nivel de paz mental de uno".
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 ();

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.

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.

Marcar una página

Muestra rápida

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com ',' Nombre de tu sitio')"> 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.

Easy Print Page Link

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.

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 son basados ​​en cero
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}

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.

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

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.

Obtener el área de visualización de un navegador

Muestra rápida

<script type="text/javascript">

<! -

var viewportwidth;

var vistapor la luz;

// los navegadores más compatibles con los estándares (mozilla / netscape / opera / IE7) utilizan window.innerWidth y window.innerHeight

if (typeof window.innerWidth! = 'undefined')

{

viewportwidth = window.innerWidth,

viewportheight = window.innerHeight

}

// IE6 en modo compatible con las normas (es decir, con un doctype válido como la primera línea del documento)

else if (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

más

{

viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth,

viewportheight = document.getElementsByTagName ('body') [0] .clientHeight

}

document.write ('<p> El ancho de su ventana gráfica es' + viewportwidth + 'x' + viewportheight + '</p>');

// ->

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

Redireccionar con retraso opcional

Muestra rápida

<script type="text/javascript">

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.

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

}

}

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

Imprimir mensaje a la barra de estado

Muestra rápida

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

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