Winforms TextBox personalizado

A todos los que nos dedicamos a esto de la programación nos ha pasado en alguna o muchas ocasiones que necesitemos de un determinado control ofrecido por el framework algo adicional. A veces, son pequeños detalles que nos facilitarían la tarea a realizar y otras veces son simplemente efectos visuales que consideramos atractivos. Sea cual sea la situación, voy a mostrar un ejemplo de como personalizar el control TextBox en .NET WinForms.
En este ejemplo se optimiza el control TextBox para actuar comprobando la fortaleza de las contraseñas introducidas en el mismo. Para ello se añaden varias propiedades: Validate (permite establecer si queremos o no esta funcionalidad adicional), MinChars (en la versión inicial permite definir el número mínimo de caracteres para considerar una contraseña mínimamente fuerte), Valid (indica la validez o no de la contraseña introducida en el control), Fortaleza (devuelve un valor indicativo de la fortaleza de la contraseña con respecto a los criterios establecidos).
En la primera versión del control (se encuentra comentada en el código) se utilizaba la propiedad MinChars y cuando la longitud de la cadena introducida es mayor que MinChars + 3 y cumple el patrón, esta es considera válida y el fondo del control se pone en color verde. Para valores menores no válidos el color de fondo va variando desde el rojo hasta el verde correspondiente a una contraseña fuerte y por tanto válida.
En la segunda versión, se utiliza una función que nos da un número indicativo de la fortaleza de la cadena de caracteres que se le pasa como parámetro para su uso como contraseña.
La función que calcula el nivel de dificultad de adivinar una contraseña comprueba primero la longitud de la misma y después la pondera comprobando también los distintos tipos de caracteres empleados en la misma.

Public Class EBSTextBox
    Inherits TextBox
    Private _validate As Boolean
    Private patron As String = "^[a-zA-Z0-9.,?_-]+$"
    <Description("Define si se realiza validación o no")>
    <Category("Seguridad")>
    <DefaultValue(False)>
    <Browsable(True)>
    Public Property Validate() As Boolean
        Get
            Return _validate
        End Get
        Set(ByVal value As Boolean)
            _validate = value
        End Set
    End Property
    Private _minChars As Integer
    <Description("Define el mínimo número de caracteres para una contraseña")>
    <Category("Seguridad")>
    <Browsable(True)>
    Public Property MinChars() As Integer
        Get
            Return _minChars
        End Get
        Set(ByVal value As Integer)
            _minChars = value
        End Set
    End Property
    Private _valid As Boolean
    Public ReadOnly Property Valid() As Boolean
        Get
            Return _valid
        End Get
    End Property
    Private _fortaleza As Integer
    Public ReadOnly Property Fortaleza() As Integer
        Get
            Return _fortaleza
        End Get
    End Property
    Protected Overrides Sub OnTextChanged(ByVal e As EventArgs)
        _valid = False
        If _validate = True Then
            ''Validaciones básicas
            'If Me.Text.Length < MinChars Then
            '    Me.BackColor = Color.Red
            'ElseIf Me.Text.Length < MinChars + 3 Then
            '    Me.BackColor = Color.OrangeRed
            'Else
            '    'Comprobamos si se cumplen los requisitos de complejidad
            '    If Not System.Text.RegularExpressions.Regex.IsMatch(Me.Text, patron) Then
            '        Me.BackColor = Color.Yellow
            '        _valid = False
            '    Else
            '        Me.BackColor = Color.Green
            '        _valid = True
            '    End If
            '    Me.BackColor = Color.Green
            '    _valid = True
            ''Validaciones mediante función ObtenerFortalezaClave
            _fortaleza = ObtenerFortalezaClave(Me.Text)
            If _fortaleza <= 4 Then
                _valid = False
                Me.BackColor = Color.Red
            ElseIf _fortaleza < 10 Then
                _valid = False
                Me.BackColor = Color.Orange
            ElseIf _fortaleza < 20 Then
                _valid = True
                Me.BackColor = Color.LightGreen
            Else
                _valid = True
                Me.BackColor = Color.Green
            End If
        End If
        MyBase.OnTextChanged(e)
    End Sub
    Private Function ObtenerFortalezaClave(ByVal clave As String)
        Dim fortaleza As Integer = 0
        If clave.Length < 4 Then
            fortaleza = 0
        ElseIf clave.Length < 6 Then
            fortaleza = 2
        ElseIf clave.Length < 10 Then
            fortaleza = 5
        Else
            fortaleza = 10
        End If
        If Not System.Text.RegularExpressions.Regex.IsMatch(clave, "^[a-z]+$") Then
            If System.Text.RegularExpressions.Regex.IsMatch(clave, "^[a-zñ0-9]+$") Then
                fortaleza = fortaleza * 2
            ElseIf System.Text.RegularExpressions.Regex.IsMatch(clave, "^[a-zñ0-9A-ZÑ]+$") Then
                fortaleza = fortaleza * 4
            ElseIf System.Text.RegularExpressions.Regex.IsMatch(clave, "^[a-zñA-ZÑ0-9\W]+$") Then
                fortaleza = fortaleza * 5
            End If
        End If
        Return fortaleza
    End Function
End Class

En la imagen siguiente se puede observar el efecto de los cambios introducidos en el control TextBox. Como se puede ver en el ejemplo de uso del control, se utiliza la propiedad Valid para decidir si se habilita/deshabilita el botón que lo acompaña.

En este caso, la función de comprobación de la fortaleza da más importancia al uso de mayúsculas o signos de puntuación que a la longitud de la cadena (sobre todo si esta es pequeña). Este es un criterio más o menos acertado que se puede adaptar a las necesidades en cada momento. Lo importante del ejemplo son las posibilidades de personalización que ofrecen los controles en .NET.

El código del formulario de prueba del control es el siguiente:

Public Class frmTestInheritedControl
    Private Sub EbsTextBox1_TextChanged(sender As Object, e As EventArgs) Handles EbsTextBox1.TextChanged
        If CType(sender, EBSTextBox).Valid Then
            btnEntrar.Enabled = True
        Else
            btnEntrar.Enabled = False
        End If
        lblFortaleza.Text = CType(sender, EBSTextBox).Fortaleza.ToString()
    End Sub
    Private Sub btnEntrar_Click(sender As Object, e As EventArgs) Handles btnEntrar.Click
        If EbsTextBox1.Valid Then
            lblPassword.Text = EbsTextBox1.Text
        Else
            lblPassword.Text = ""
        End If
    End Sub
End Class

Uniqueidentifier en T-SQL

El tipo de datos uniqueidentifier permite asignar valores a columnas de las tablas o a variables de datos en T-SQL con el formato xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx, donde cada X es un dígito hexadecimal.
Para obtener un valor de tipo uniqueidentifier en T-SQL se utiliza la función NEWID().

DECLARE @myid uniqueidentifier ; 
SET @myid = 'A972C577-DFB0-064E-1189-0154C99310DAAC12'; 
SELECT @myid;

Es posible convertir una cadena de caracteres a Uniqueidentifier siempre que se ajuste al formato indicado previamente.

DECLARE @myid uniqueidentifier = NEWID(); 
SELECT CONVERT(char(255), @myid) AS 'char';

En caso de que se intente convertir una cadena con formato correcto pero con una longitud superior a la aceptada se truncará la cadena de caracteres.

DECLARE @ID nvarchar(max) = N'0E984725-C51C-4BF4-9960-E1C80E27ABA0wrong';
SELECT @ID, CONVERT(uniqueidentifier, @ID) AS TruncatedValue;

Se pueden consultar más detalles sobre este tipo de datos aquí, y sobre la función NEWID() aquí.

C#. Tipos de datos

En C# los tipos de datos se pueden agrupar en dos tipos: tipos por valor y tipos por referencia.
Los tipos por valor son int, float, double, struct, enum, etc.
Los tipos por referencia son las clases, interfaces, delegados, arrays, etc.

A los tipos por valor no se les puede asignar el valor null. Sin embargo, estos tipos se pueden convertir en tipos anulables, que pueden representar todos los valores del tipo original y el valor null. Para convertir un tipo por valor en anulable sólo hay que añadir el símbolo ? después del tipo.

int? opcion = null;
...
if (opcion != null) Console.WriteLine("La opcion elegida es: {0}", opcion);
else Console.WriteLine("No se ha elegido una opcion");

El código anterior se puede simplificar considerablemente utilizando el operador ??. En el siguiente ejemplo a la cadena se le asigna el valor anterior al operador ?? si la variable opcion no tiene valor nulo, en caso contrario, se le asigna el valor que hay después de dicho operador.

String respuesta = "La opción elegida es: " + opcion.Value.toString() ?? "No se ha elegido una opción";
Console.WriteLine(respuesta);

Javascript: marca de agua

Una tarea muy común en el desarrollo de una página web es  la creación de controles de texto con una marca de agua. A continuación se muestra un ejemplo de esta tarea.

<html>
<head>
<script type="text/javascript">
    function establecerMarcaAgua() {
        var txtTexto = document.getElementById("txtTexto");
       
        if (txtTexto.value.length == 0) {
            txtTexto.value= "Introduzca el texto aquí";
            txtTexto.className = "marcaAgua";
        }
    }
    function quitarMarcaAgua() {
        var txtTexto = document.getElementById("txtTexto");
       
        if (txtTexto.value == "Introduzca el texto aquí") {
            txtTexto.value = "";
            txtTexto.className = "texto";
        }
    }
</script>
<style type="text/css">
    .marcaAgua {
        color: gray;
        font-weight: bold;
        font-size: 0.8em;
    }
    .texto {
        color: black;
        font-weight: normal;
        font-size: 1em;
    }
</style>
</head>

<body>
    Texto:
    <input type="text" id="txtTexto" value="Introduzca el texto aquí"
      class="marcaAgua"
      onfocus="quitarMarcaAgua()" onblur="establecerMarcaAgua()" />
</body>
</html>

A continuación se puede ver una versión genérica de las funciones anteriores que se pueden utilizar con múltiples controles.

<html>
<head>
<script type="text/javascript">
    function establecerMarcaAgua(texto, control) {      
        if (control.value.length == 0) {
            control.value= "Introduzca el texto aquí";
            control.className = "marcaAgua";
        }
    }
    function quitarMarcaAgua(texto, control) {      
        if (control.value == "Introduzca el texto aquí") {
            control.value = "";
            control.className = "texto";
        }
    }
</script>
<style type="text/css">
    .marcaAgua {
        color: gray;
        font-weight: bold;
        font-size: 0.8em;
    }
    .texto {
        color: black;
        font-weight: normal;
        font-size: 1em;
    }
</style>
</head>

<body>
    Texto:
    <input type="text" id="txtTexto" value="Introduzca el texto aquí"
        class="marcaAgua"
        onfocus='quitarMarcaAgua("Introduzca el texto aquí", this)'
        onblur='establecerMarcaAgua("Introduzca el texto aquí", this)' />
</body>
</html>

ASP .NET: Procedimiento almacenado

En esta entrada se puede ver un ejemplo de uso de procedimientos almacenados en un método de una aplicación en ASP .NET.

private void Borrar(string IDs) {
  string cs = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
  SqlConnection con = new SqlConnection(cs);
  SqlCommand cmd = new SqlCommand("spBorrarEmpleados", con);

  cmd.CommandType = CommandType.StoredProcedure;
  SqlParameter parameter = new SqlParameter("@IDs", IDs);
  cmd.Parameters.Add(parameter); con.Open(); 
  cmd.ExecuteNonQuery();

  con.Close(); }

Android cheat sheet

Esta entrada está dedicada a anotar conceptos básicos para la programación en Android y que es necesario tener presentes en todo momento, ya sea en la memoria o en una entrada en un blog.

- Layouts:
  <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"> </FrameLayout>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="horizontal"
      android:padding="25dp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:weightSum="100"  (peso total de las vistas contenidas)
      android:background="@drawable/imagen_background.png" >
  </LinearLayout>
  <TableLayout  xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
       <TableRow>
         <TextView android:text="celda 1.1" />
         <TextView android:text="celda 1.2" />
      </TableRow>
      <TableRow>
         <TextView android:text="celda 2.1" android:layout_span="2" />
        (ocupa dos columnas)
     </TableRow>
   </TableLayout>
   <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:rowCount="2"
     android:columnCount="3"
     android:orientation="horizontal" >
         <TextView android:text="celda 1.1" />
         <TextView android:text="celda 1.2" />
         <TextView android:text="celda 2.1"  android:layout_columnSpan="2" />
   </GridLayout>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent"
     android:layout_height="match_parent" >
      <EditText android:id="@+id/TxtNombre"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text" />
     <Button android:id="@+id/BtnAceptar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/TxtNombre"
        android:layout_alignParentRight="true" />
  </RelativeLayout>
- Controles(views):
  <Button
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:text="Pulsar"
    android:layout_gravity="center"
    android:weight="80"  (en realidad, ocupa el 20% del peso total)
    android:textSize="20dp"
    android:id="@+id/btnPulsar" />
  <ToggleButton android:layout_weight="20" android:text="ToggleButton"
    android:id="@+id/tbtn1" android:layout_width="match_parent"
    android:paddingBottom="10dp" android:checked="true"
    android:layout_height="wrap_content" />
  <EditText android:layout_width="match_parent" android:layout_height="wrap_content"
    android:id="@+id/etNombre" android:hint="Escribe el nombre"
    android:password="true" />
- Definir actividad en AndroidManifest.xml:
  <activity android:name=".Splash" android:label="@string/nombre">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" /> (not.ebacelo.android.APP)
      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
- Button btnA = (Button) findViewById(R.id.btnA);
   TextView tvTexto = (TextView)findViewById(R.id.txtTexto);
   final EditText etEntrada= (EditText)findViewById(R.id.etEntrada);
   etEntrada.setInputType(InputType.TYPE_CLASS_TEXT |
     InputType.TYPE_TEXT_VARIATION_PASSWORD);
   tvTexto.setGravity(Gravity.CENTER);
- btnA.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Random rand = new Random();
      if (cadena.contentEquals("texto")
        txtTexto.setText("Texto para la vista");
        txtTexto.setTextColor(Color.BLUE);
        txtTexto.setTextSize(rand.nextInt(40);
    }
  }
  //Otra opción es implementar la interfaz View.OnClickListener y
  //el método onClick dentro de la clase correspondiente.
  //btnA.setOnClickListener(this)
- protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash);

    ourSong = MediaPlayer.create(Splash.this,  R.raw.sonido);
    ourSong.start();

    Thread timer = new Thread() {
       public void run() {
         try {
           sleep(5000);
         } catch (InterruptedException e) {
           e.printStackTrace();
         } finally {
           Intent openSplash = new Intent("not.ebacelo.android.SPLASH");
           startActivity(openSplash);
         }
       }
     }
  }
- protected void onPause() {
    super.onPause();
    ourSong.release();
    finish();
  }

- Lista de elementos:
  public class Menu extends ListActivity {
    String elementos[] = {"elemento1", "elemento2", "elemento3", "elemento4"};

    protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setListAdapter(new ArrayAdapter<String>(Menu.this,
         android.R.layout.simple_list_item_1, elementos));
    }
    protected void onListItemClick(ListView l, View v, int position, long id) {
      super.onListItemClick(l, v, position, id);
      String elementoSeleccionado = elementos[position];
      try {
        Class miClase = Class.forName("not.ebacelo.android.splash");
        Intent miIntent = new Intent(Menu.this, miClase);
        startActivity(miIntent);
      } catch (ClassNotFounException e) {
        e.printStackTrace();
      }
    }
  }

Javascript: cosas a recordar

Hoy voy a anotar aquí una serie de cosas que es recomendable tener en cuenta a la hora de trabajar con Javascript. Espero que estas anotaciones me sirvan de recordatorio cada vez que tenga que trabajar con Javascript y, de paso, que puedan resultarle útiles a cualquiera que lea este blog.

- Intérprete javascript online: jsbin.com

- Usar .textContent en lugar de innerHTML por el bien de la compatibilidad con
  todos los navegadores

- Usar doc.getElementById("elemento").value en lugar de .value (este último no
  funciona en IE)
- document.getElementById("imagen").getAttribute("src");
- document.getElementById("imagen").setAttribute("src", "imagen.jpg");

- Colocar las etiquetas <script> justo antes de la etiqueta de cierre </body>. Los
  navegadores paran la  descarga del HTML al encontrar etiquetas <script> para
  descargar los ficheros .js. También se puede usar atributo
  async de <script> en navegadores modernos.

- Sensible a mayúsculas y minúsculas.

- Comentarios: // (única línea) y /* comentario */ (varias líneas)

- Tipos de datos: Number, Boolean, String. Para definir una variable usamos var.

- parseInt() y parseFloat() para convertir strings a números enteros y decimales.
  isNaN() para comprobar si es un número.
- Number(prompt("Introduce un número: ", "");  //convierte una cadena a número

- cadena1.concat(" ", cadena2);
  también se puede utilizar: cadena1 + " " + cadena2.

- cadena1 = "Hola"; cadena2 = "mundo"; cadena1.concat(" ", cadena2, "!");

- cadena1.toUpperCase(); cadena2.toLowerCase();

- "cadena de texto".length

- trim(): eliminar blancos, cadena1.replace("cadena1", "cadena2");
  El primer parámetro de replace puede   ser una expresión regular

- substring(inicio, fin); substr(inicio, contador); slice(inicio, fin);
  substr no funciona en IE8 y anteriores, slice no intercambia inicio y fin cuando   inicio>fin

- cadena1.indexOf("c"); cadena2.lastIndexOf("d");

- document.getElementById("idElemento");

- prompt("Mensaje a mostrar", "texto por defecto para devolver si el usuario no
  introduce nada");

- Definir arrays:
  var arrayVacio = []; var miArray = ["uno", "dos", "tres"];
  var array10 = new Array(10);
  var array2d = new Array(3); for (var i=0; i<3 data-blogger-escaped-array2d=""
  data-blogger-escaped-br="" data-blogger-escaped-i="" data-blogger-escaped-new="">
  Array(3);} - miArray.push("valor a añadir");
- var elemento = miArray.pop(); //devuelve el último elemento del array y lo
  elimina del mismo.
- miArray.shift(); //obtiene el primer elemento del array y lo quita del mismo
- miArray.unshift("valor"); //añade un valor como primer elemento del array.
- miArray.sort(); //por defecto supone que los elementos son strings y los ordena.
- miArray.sort(function(a,b) {return a-b}); //ordena de menor a mayor
- var a = miArray.sort(function(a,b) {return b-a}); ó a.reverse();
- miArray.splice(índice, contadorEliminar, elemento1...elementoN); //añadir y
  eliminar
- miArray.filter(esPar(value, index, array) { return value % 2; }); //sólo los
  pares
- miArray.filter(function (value, index, array) { return array.indexOf(value) ==
  index; }); //no repetidos

- Se puede usar una función antes de su definición (function hoisting).
- Funciones anónimas: var sumar = function (x, y) { return x+y }; sumar(1, 2);
- arguments.length; arguments[i]; //es un objeto no un array
  var arrayArgs = Array.prototype.slice.call(arguments); //convertir en array
- Lanzar exceptiones: throw {error: "Número inválido", message: "No es un formato
  numérico válido"}

- window.onerror = function(msg, url, line) {
  alert("Mensaje: " + msg + "\nURL: " + url + "\nLinea: " + line);
  return true; }
- <img src="imagenNoExiste.jpg" onerror="imageErrorHandler()" />
  function imageErrorHandler(msg, url, line) {alert("Hay un problema
  con la imagen");}

- var fecha = new Date(); fecha = new Date("March 26, 2015 11:06:00");
- var fecha = new Date(year, month, day, hour, minute, second, millisecond);
- fecha.getFullYear(); fecha.getMonth(); fecha.getDate(); fecha.getDay();
  fecha.getHours(); fecha.getMinutes(); fecha.getSeconds();

- var idIntervalo = window.setInterval(funcion, intervaloMilisegundos);
  window.clearInterval(idIntervalo);
- var idTemporizador = window.setTimeout(funcion, esperaMilisegundos);
  window.clearTimeout(idTemporizador);

- if (confirm("¿Está seguro?")) {return true; } else {return false;}
  onclick="return confirmOnSubmit()"

- Atributos de la propiedad style (ver aquí).
- Eventos de elementos: onclick, onblur, onmouseover, onmouseout,...
- Eventos de DOM: document.getElementById("idElemento").onmouseover =
  nombreFuncion;
- idBtn.addEventListener("mouseover", changeColorOnMouseOver, false);
- idBtn.removeEventListener("mouseover", changeColorOnMouseOver);
  (Disponibles en IE9+ y otros navegadores modernos).
- idBtn.attachEvent("onclick", clickEventHandler);
- idBtn.detachEvent("onclick", clickEventHandler);
  (Soportado en IE8 y versiones anteriores)
- if (btn.addEventListener) {... (será true para IE9+ y otros navegadores
  modernos).
- <input type="button" value="Pulsar" id="btn"
  onclick="obtenerDetallesEvento(event)" />
  function obtenerDetallesEvento(event) {   
     var sourceElement;
     if (event.srcElement) {   //soportado en IE8-
        sourceElement = event.srcElement;
     } else {
        sourceElement = event.target;   //soportado en IE9+ y otros
     }
     return event.type + " " + event.clientX + " " + event.clientY + " " +
     sourceElement.type + " " + sourceElement.tagName;
  }

- Utilizar event bubbling para evitar asignar manejador en muchas ocasiones.
- Se puede activar event capturing poniendo el último parámetro del
  método .addEventListener a TRUE. Si es FALSE, se produce event
  bubbling. Se pueden activar los dos si se añade dos veces el manejador con
  los valores distintos para el último parámetro.
- Cancelar event bubbling:
  event = event || window.event;  //por compatibilidad con IE8-
  if (event.stopPropagation) {
    event.stopPropagation();  //IE9+ y otros
  } else {
    event.cancelBubble = true;  //IE8-
  }

- Evitar funcionamiento por defecto del navegador (click botón derecho,
  pulsar enlace):
  <body oncontextmenu="return false">
  document.oncontextmenu = deshabilitaPorDefecto;

  function deshabilitaPorDefecto(event) {
    event = event || window.event;
    if (event.preventDefault) {  //IE9+ y otros
      event.preventDefault();
    } else {
      event.returnValue = false;  //IE8-
    }

  Prevenir que un enlace nos lleve a otra página:
  <a href="http://www.google.com" onclick="return false" >Google</a>
  <a href="http://www.google.com" onclick="deshabilitaPorDefecto(event)">
  Google
  </a>

- Detectar el botón del ratón pulsado:
  <input type="button" value="Click me" onmouseup="obtenerClickRaton(event)" />
  function obtenerClickRaton(event) {
    var botonPulsado;
    if (event.which)  {
      botonPulsado = event.which;  //IE9+ y otros
    } else {
      botonPulsado = event.button;  //IE8-
    }
  }

- Ventanas emergentes:
  window.open(URL, nombre, caracteristicas, reemplazar);
  <input type="button" value="Abrir ventana"
  onclick="window.open('http://www.google.com', '_self ', 'height=100,width=150',
  false)" />

  var ventana;
  function abrirVentana() {
    ventana = window.open("http://www.google.com", "ventana", "height=100,
    width=100");
  }
  function cerrarVentana() { ventana.close(); }


- Expresiones regulares:
  Herramienta gratuíta: Expresso Librería de expresiones: Regexlib
  var valor= document.getElementById("txtCadena").value;
  var resultado = valor.match(/\d+/g);
  if (resultado != null) {
    for (var i=0; i<resultado.length;i++) {
      document.getElementById("txtResultado").value += resultado[i] + "\r\n";
    }
  }
    \d: valor numérico (\d+: 1 o varios elementos numéricos consecutivos)
    /g: búsqueda global
    \d{5,}: números de 5 dígitos o más ---  \b\d{4}\b:  números de justo 4 dígitos
    [0-9]{5}: equivalente al anterior
    \b[a-zA-Z]\b: palabras con letras sin tilde
    [a|b|c]: busca cualquiera de los caracteres incluídos

  var cadena="Cadena con números: 10 11 222";
  cadena.match(/\d+/g); //g: global, i: insensible a mayúsculas y minúsculas,
  m: multilínea
  cadena.replace("/\d+/g, "XXX");  //reemplaza números por XXX
  cadena.split("/\d+/");
  var posicion = cadena.search(/\d+/);

  var regexp = /\d+/g;   //expresión regular literal (mejor rendimiento si
  la expresión regular no varía)
  var regexp = new RegExp("\\d+", "gim");  //global, ignore case, multiline
  regexp.exec(cadena);  //busca coincidencia y devuelve la primera encontrada
  regexp.test(cadena); //busca coincidencia y devuelve true o false
  regexp.toString();  //devuelve cadena con la expresión regular
  regexp.global; regexp.ignoreCase; regexp.multiline; regexp.source;

- Validación lado cliente:
  function validarLogName() {
    var txtName = document.getElementById("txtName");
    var name= txtName.value;
    var regExName = /[a-zA-Z0-9]+/;

    txtName.style.color = "white";
    if (regExName.text(name))
      txtName.style.backgroundColor = "green";
    else
      txtName.style.backgroundColor = "red";
  }

- Herramientas para reducir código Javascript (minification):
  - http://crockford.com/javascript/jsmin
  - https://marijnhaverbeke.nl/uglifyjs (online)