Herramientas de conocimientos Básicas

Algunas herramientas de conocimiento básicas:

Sass (lenguaje de hojas de estilo)

Sass es un metalenguaje de Hojas de Estilo en Cascada (CSS). 

Sass permite la definición de variables. Las variables comienzan con el signo de dólar ($). La asignación de variables se hace con los dos puntos (:).

Ejemplos[editar]

$blue: #3bbfce


.content-navigation
 border-color: $blue
 color: darken($blue, 9%)

eso se compila y se traduce en:

.content-navigation {
 border-color: #3bbfce;
 color: #2b9eab;
}

---

CoffeeScript

CoffeeScript es un lenguaje de programación que se compila a JavaScript.

Añade características más sofisticadas, como la comprensión de listas y la coincidencia de patrones. CoffeeScript compila previsiblemente a JavaScript y los programas se pueden escribir por lo general en 1/3 menos de líneas de código sin ningún efecto en el rendimiento ni en el tiempo de ejecución.

Ejemplos[editar]

Un fragmento de código JavaScript común con la biblioteca jQuery es

$(document).ready(function() {
  // Resto del código va aquí...
});

O incluso sólo

$(function() {
  // Resto del código va aquí...
});

En CoffeeScript, la palabra clave function se sustituirá por el símbolo ->, y la sangría se utilizará en lugar de las llaves, como en otros lenguajes "fuera de regla" como Python y Haskell. Además, generalmente cualquier paréntesis se puede omitir. De este modo, el equivalente CoffeeScript del fragmento anterior es

$(document).ready ->
  # Resto del código va aquí...

O

($ document).ready ->
  # Resto del código va aquí...

O simplemente

$ ->
  # Resto del código va aquí...

Lo que hace es haces mas simple la lectura, es un compilador.

--------------------------------------------------------------------------------------------------------------------------
less

less es un visualizador de archivos de texto que funciona en intérpretes de comando.

A diferencia de otros programas similares (como more), less permite una completa navegación por el contenido del archivo, utilizando un mínino de recursos del sistema.

Funcionamiento[editar]

Less no solo puede utilizarse para ver el contenido de archivos, sino que también para navegar por el resultado de otros programas, como por ejemplo: grep, sort, file, tree, etc.

Las bondades del programa son las siguientes:

• Navegación completa, con avance/retroceso de página (o línea a línea) y movimiento lateral.
• Búsqueda de palabras o frases (incluso vía expresiones regulares), con resaltado de resultados.
• Visualización simultánea de varios archivos.
• Soporta formato negrita y subrayado de palabras (usado por ejemplo con man).
• Otras varias características avanzadas como: ver número de líneas, guardar el contenido en un archivo (útil con grep y otros), creación de bookmarks para navegación, etc.
• Es portable y opera en casi todos los OS: Windows (XP/2000/98 etc), DOS, Linux y demás Unixes (FreeBSD, Solaris, etc).

Less se configura especificando parámetros de invocación, y aunque no tiene menú se maneja fácilmente por medio de comandos.

La manera de ejecutarlo es:   less [opciones] [archivo...]

----------------------------------------------------------------------------------

Haml (en inglés, “HTML Abstraction Markup Language”) es un lenguaje de marcado ligero que se usa para describir el XHTMLde un documento web sin emplear el código embebido tradicional. Está diseñado para solucionar varios problemas de los motores de plantillas tradicionales y también para ser un lenguaje de marcado tan elegante como sea posible. Haml funciona como reemplazo de sistemas de plantillas de páginas embebidas como PHP, RHTML y ASP. Sin embargo, Haml elimina la necesidad de escribir XHTML explícito dentro de la plantilla, por ser en sí una descripción de XHTML, más algo de código para generar contenido dinámico.

Ejemplo[editar]

Nota: este es un simple ejemplo de muestra y puede no reflejar la versión actual del lenguaje.

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    %title BoBlog
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"}
  %body
    #header
      %h1 BoBlog
      %h2 Blog de Bob
    #content
      - @entries.each do |entry|
        .entry
          %h3.title= entry.title
          %p.date= entry.posted.strftime("%A %d de %B de %Y")
          %p.body= entry.body
    #footer
      %p
        Copyright © 2012 Bob. Algunos derechos reservados.

El Haml de arriba produce este XHTML:

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>BoBlog</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" />
  </head>
  <body>
    <div id='header'>
      <h1>BoBlog</h1>
      <h2>Blog de Bob</h2>
    </div>
    <div id='content'>
      <div class='entry'>
        <h3 class='title'>Halloween</h3>
        <p class='date'>martes 31 de octubre de 2006</p>
        <p class='body'>
          ¡Feliz Halloween, gloriosos lectores! Esta noche iré a una fiesta... estoy muy emocionado.
        </p>
      </div>
      <div class='entry'>
        <h3 class='title'>Nuevo motor de plantillas para Rails</h3>
        <p class='date'>viernes 11 de agosto de  2006</p>
        <p class='body'>
          Acaba de salir un motor de plantillas muy bueno para Ruby on Rails. Se llama Haml.
        </p>
      </div>
    </div>
    <div id='footer'>
      <p>
        Copyright © 2012 Bob. Algunos derechos reservados.
      </p>
    </div>
  </body>
</html>

Gracias a Nando por este aporte para el blog.

Espero que les sirva!

Saludos a todos :D

Validar solo números con js en TextBoxt

en tu archivo js

function AcceptNum(evt)

{
var nav4 = window.Event ? true : false;

var key = nav4 ? evt.which : evt.keyCode;

return (key <= 13 || (key >= 48 && key <= 57) || key == 44);

}
en tu pagina.aspx.cs en el evento load:

txtNumeros.Attributes.Add("OnKeyPress", "return AcceptNum(event)");

Saludos.

Refrescar una página abierta con window.showModalDialog cuando volvemos a entrar

Estimados.

Tube un probema.. que me tubo mas de un dia investigando como resolver:

En js, utilizo window.showModalDialog para abrir una ventana de dialogo (modales), cuando entro la primera vez la página pasa por su evento OnLoad y se cargan los datos, modifico los datos y los guardo. Cuando vuelvo a entrar a la ventana de dialogo al parecer la pagina no se refresca y me sigue mostrando los datos viejos a pesar de que se han modificado correctamente (en la Base de datos).

Solución:


A la pagina que se abre en la ventana de dialogo le aumentamos las siguientes lineas en el lado del cliente, dentro del tag head:

<head>
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">

Jquery obtener el valor seleccionado de un control html select( combo)

Para obtener el texto seleccionado del un control html Select con JQuery:
$('#nombreControl option:selected').text()


Ejemplo:

<select id="cmbOpcion" name="cmbOpcion" >
<option value="1">
Soy Uno
</option>
<option value="2">
Soy Dos
</option>
</select>


Con esta instruccion, vamos a saber el texto que esta seleccionado:

$('#cmbOpcion option:selected').text()



Saludos!!!!

Crear un archivo txt con javascript

Crear un archivo con javascript

var directorioArchivo = 'D:';
var fso = new ActiveXObject("Scripting.FileSystemObject");
var rutaArchivo = directorioArchivo + "//";
var nombre = "Test" ;
var name = nombre + ".txt"; 
var nombreArchivo = rutaArchivo + nombre + ".txt";
if(fso.FileExists(nombreArchivo))
{
      var i = 1;
      nombreArchivo = rutaArchivo + nombre + i + ".txt";
      while (fso.FileExists(nombreArchivo))
     {
           i = i + 1;
           nombreArchivo = rutaArchivo + nombre + i + ".txt";
           name = nombre + i + ".txt";
      }
}
var fh = fso.CreateTextFile(nombreArchivo, true);
fh.WriteLine(datos); fh.Close();

JavaScript String Replace All

JavaScript String Replace All
Con esta línea solo se reemplaza la primer ocurrencia

str = str.replace(”find”,”replace”)

Para reemplazar todas las ocurrencias de la cadena, utilice el modificador g de esta manera:

str = str.replace(/find/g,”replace”)

Colocar separadores de miles mientras se escribe en un Input

Colocar separadores de miles mientras se escribe

Coloca la ',' como separador de miles en un campo de texto input.


<script language="JavaScript">
//Código para colocar
//los indicadores de miles mientras se escribe
//script por tunait!
function puntitos(donde,caracter){
pat = /[\*,\+,\(,\),\?,\,$,\[,\],\^]/
valor = donde.value
largo = valor.length
crtr = true
if(isNaN(caracter) || pat.test(caracter) == true){
if (pat.test(caracter)==true){
caracter = "\" + caracter
}
carcter = new RegExp(caracter,"g")
valor = valor.replace(carcter,"")
donde.value = valor
crtr = false
}
else{
var nums = new Array()
cont = 0
for(m=0;m<largo;m++){
if(valor.charAt(m) == "." || valor.charAt(m) == " ")
{continue;}
else{
nums[cont] = valor.charAt(m)
cont++
}
}
}
var cad1="",cad2="",tres=0
if(largo > 3 && crtr == true){
for (k=nums.length-1;k>=0;k--){
cad1 = nums[k]
cad2 = cad1 + cad2
tres++
if((tres%3) == 0){
if(k!=0){
cad2 = "." + cad2
}
}
}
donde.value = cad2
}
}
</script>


--------------------------------------------------------------------------
En el HTML el campo de texto:

<input type="text" name="pepe" onkeyup = "puntitos(this,this.value.charAt(this.value.length-1))">

La tecla que se pulso en la pagina en JavaScript

$().ready(function() {
document.onkeypress = manejarTecla;
});

var Tecla_pulsada;
function manejarTecla(elEvento) {
var evento = elEvento || window.event;
Tecla_pulsada = evento.charCode || evento.keyCode;
var srcEl = evento.srcElement ? evento.srcElement : evento.target;
//si Tecla_pulsada == 13 -> Enter
}

Adicionar Filas dinamicamente a una Tabla HTML (vamos a adicionar Texto)

Adicionar filas dinamicamente a una tabla HTML en JavaScript.
En este ejemplo vamos a adicionar texto

function addRowToTableDatos(pk, nombre, apellidos) {
var nombreTabla = 'tblPersona';
var tbl = document.getElementById(nombreTabla);
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

//esta columna es no visible, por eso en su style.display ='none'
var cell0 = row.insertCell(0); //PK
cell0.style.display = 'none';
var textNode0 = document.createTextNode(pk);
cell0.appendChild(textNode0);

var cellNombre = row.insertCell(1);
var textNombre = document.createTextNode(nombre);
cellNombre .appendChild(textNombre );

var cellAp = row.insertCell(2);
var textAp = document.createTextNode(apellidos);
cellAp.appendChild(textAp);

}

funcion trim en JavaScript

Funcion que permite elminar espacios en blanco de una cadena
 al principio y al final.

En JavaScript no existe una funcion trim.
Con esta funcion podemos simular un trim en js:

function trim (myString)
{
return myString.replace(/^\s+/g,'').replace(/\s+$/g,'')
}

Leer un XML en javascript

Supongamos un XML, con esta estructura:

<NewDataSet>
<Table1>
<nombre>Soy el nombre 1</nombre>
.
.
<campoN>campo N , del nombre 1</campoN>
</Table1>
<Table1>
<nombre>Soy el nombre 2</nombre>
.
.
<campoN>campo N , del nombre 2</campoN>
</Table1>
</NewDataSet>


Para leerlo, llamando con el nombre de su Etiqueta:

datos.childNodes[0].childNodes[0].selectNodes("nombre")[0].text
//esto me retorna “Soy el nombre 1”

datos.childNodes[0].childNodes[1].selectNodes("nombre")[0].text
//esto me retorna “Soy el nombre 2”

Imprimir el contenido de un Div con Javascript

<DIV ID="seleccion">Este texto es el que se va a imprmir </DIV>

colocamos un enlace que llame a la función de imprimir

<a href="javascript:imprSelec('seleccion')" >Imprime la ficha</a>

Y en JavaScript:

<script language="Javascript">
function imprSelec(nombre)
{
var ficha = document.getElementById(nombre);
var ventimp = window.open(' ', 'popimpr');
ventimp.document.write( ficha.innerHTML );
ventimp.document.close();
ventimp.print( );
ventimp.close();
}
</script>