Similar Posts
Highlight.js: resalta código automáticamente
Si hace unos dÃas hablábamos de CodePress, hoy vamos a hablar de otro Javascript parecido que resalta el código que se introduce en tu HTML entre las etiquetas <pre><code> … </code></pre>.
En este caso detecta automáticamente el lenguaje de programación, aunque se puede indicar también en el class de la etiqueta code, o también se puede ignorar el cógido si ponemos como estilo no-highlight.
Los lenguajes que reconoce son los siguientes: Python, Ruby, Perl, PHP, XML, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, RenderMan (RSL and RIB), SQL, SmallTalk, Axapta, 1C. A parte permite exportar el código HTML generado y añadirlo como plugin para WordPress.
Highlight.js
VÃa / WebAppers
Lista de recursos Javascript
Una gran lista de recursos que podemos necesitar para nuestros desarrollos o para aprender cosas nuevas sobre Javascript.
Tutoriales
- A (Re)-Introduction to JavaScript
- Eloquent JavaScript
- JavaScript (quirksmode.org)
- JavaScript Cake Tutorials and Scripts
- JavaScript Boot Camp Tutorial
- JavaScript Closures
- JavaScript in Ten Minutes
- JavaScript Tutorial
- JavaScript tutorial for the total non-programmer
- JavaScript/DHTML Tutorials
- Painless JavaScript Using Prototype
- Ten JavaScript Tools Everyone Should Have
- You think you know (JavaScript) but you have no idea
Colección de scripts
- Hot Scripts
- JavaScript Search
- JavaScript Scripts
- JavaScript Source
- Over 400+ free JavaScripts!
- Reusable Libraries And Objects
- The Yahoo! User Interface Library
Frameworks y librerÃas
- Ext JS – JavaScript Library
- JavaScript code library
- jQuery
- jsvalidate
- Mochikit
- overLIB
- Project: Bajax
- Prototype
- Open Rico
- script.aculo.us
- The Dojo Toolkit
- The Solvent
Técnicas
- BarelyFitz Tabs
- Behaviour : Using CSS selectors to apply JavaScript behaviours
- BSN AutoSuggest
- Drag & Drop Sortable Lists with JavaScript and CSS
- Edit in Place with JavaScript and CSS
- FD Sortable tables
- Flexible client-side table sorting
- flickrshow – Simple JavaScript slideshows for Flickr
- Form validation
- Highslide JS – JavaScript thumbnail viewer
- iPhoto-like image resizing using JavaScript
- JavaScript gallery and slideshow system
- JavaScript Tabifier automatically create an html tab interface
- JavaScript: DHTML Library, Drag & Drop for Images and Layers
- JDV Sortable tables
- Kryogenix Sortable tables
- Lightbox JS
- Livepipe Tabs
- moo.fx – The next small thing
- Mouse wheel programming in JavaScript
- overLIB Tooltips
- PlotKit – JavaScript Chart Plotting – liquidx
- Store JSON data in cookies
- Sorted tables
- TableKit
- ThickBox 2.1
- Tooltips, DHTML, JavaScript – BoxOver
Referencias
- CSS Properties to JavaScript Reference
- gotAPI/HTML – Instant search in HTML and other developer documentation
- JavaScript Cheat Sheet/
- JavaScript Reference
Herramientas
- Firebug – Web Development Evolved
- JSLint, The JavaScript Verifier
- RegexPal: JavaScript Regex Tester
- XML.ObjTree XML parser
70+ JavaScript Resources for Every Web Developer
VÃa / dzone
Dividir un texto mediante DOM en Javascript
Os voy a pasar un pequeño script que nos dividirÃa un elemento de texto HTML (TEXT_NODE) en distintas partes. Quizás os pueda resultar un script extraño, pero se puede usar poner en negrita palabras o alguna otra cosa, yo en mi caso ya le he encontrado utilidad un par de veces y ahora estoy usándolo otra vez en algo que os contaré más adelante (espero que dentro de poco tiempo).
Imaginaros que tenemos un elemento HTML que es realmente un nodo de texto (pensad en DOM, no en innerHTML), por ejemplo:
var elem = document.createTextNode('Esto es una prueba');
document.body.appendChild(elem);
Ahora queremos cambiar “es una” por “es una“. Lo que tendrÃamos que hacer es dividir en texto en tres partes “Esto “, “es una”, ” prueba”, crearemos tres objetos de texto, cada una con cada trozo de texto y luego un elemento STRONG en el que incluiremos el texto del medio. Por último incluimos los elementos nuevos y eliminamos el anterior.
// Obtenemos primera parte de texto
var parte = elem.nodeValue.substring(0,
elem.nodeValue.indexOf("es una"));
// Creamos elemento de texto con contenido "Esto "
var obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Obtenemos segunda parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una"), elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Lo añadimos a un objeto STRONG
var negrita = document.createElement("STRONG");
negrita.appendChild(obj);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(negrita, elem);
// Obtenemos tercera parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Eliminamos elemento anterior
elem.parentNode.removeChild(elem);
Slider accesible y no obstrusivo
Un gran script que nos permite insertar sliders en nuestras webs, que sean accesibles y no obstrusivos. A parte, permiten ser manejados por las flechas del cursor, por las teclas de inicio y fin, o el ratón, incluido el scroll.
El script le asigna automáticamente a cada slider el rol slider requerido por ARIA y los estados valuemax, valuemin y valuenow.
Un ejemplo de uso para un slider horizontal con una llamada de función serÃa la siguiente:
class="fd_range_0_255 fd_classname_extraclass fd_callback_updateColor"
VÃa / WebAppers
Consejos para tener un buen código Javascript
Consejos que nunca vienen mal para desarrollar un código Javascript decente:
- Que sea limpio y esté bien documentado: esto no es exclusivo de Javascript, pero parece que en este lenguaje se olvida. También es recomendable tener dos versiones del script, uno de desarrollo y otro de producción (que estará comprimido).
- Usa ficheros externos: no incluyas los scripts dentro de tu HTML, usa scripts externos. A parte de ser más eficiente en el gasto del ancho de banda es reutilizable y más legible.
- Separa la capa de presentación de la capa lógica: no añadas eventos en las etiquetas HTML, create Javascripts no intrusivos que modifiquen los elementos y añadan los eventos.
- Define el ámbito de las variables: aunque no sea necesario usar var para definir las variables, hay que hacerlo, así evitarás sorpresas de modificación de variables, sobre todo si usas recursividad.
- No pienses que por defecto se soporta Javascript: no todo el mundo dispone de javascript, por ello no es conveniente llamar a funciones javascript dentro del href de los enlaces, y es conveniente tener acción por defecto en un enlace cuando se quiere modificar su funcionalidad por javascript:
<a href="#" onclick="javascript:accionClick()">enlace</a>
<a href="enlace.html" onclick="accionClick(); return false;">enlace</a>
Resaltar filas en tablas mediante Javascript
A la hora de mostrar tablas, un modo de presentación muy recomendable es resaltar las filas alternas como por ejemplo hace la lista de actualizaciones de Bitacoras.com consiguiendo así una mayor facilidad a la hora de leer los datos. Para ello, se suelen usar un estilo para las filas pares.