Metodología JavaEjemplos de scripts con código fuente Code

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

Metodología Code Ejemplos que utilizan JavaEste script demuestra cómo los bucles, la validación de formularios y los eventos resuelven tareas cotidianas del navegador. Presenta un generador de tablas de multiplicar, un validador completo de formularios de registro, una ventana emergente que se activa al pasar el cursor, un reloj digital en tiempo real y las prácticas que garantizan la fiabilidad de estos scripts.

  • ✖️ Bucles anidados: La tabla de multiplicar construye una cadena HTML con un bucle exterior de filas y un bucle interior de columnas.
  • 📝 Validación de formulario: Los arreglos paralelos vinculan cada entrada con su propio contenedor de errores, de modo que los mensajes aparecen junto al campo que falló.
  • 📧 Regla de correo electrónico: Las comprobaciones de posición del símbolo @ y del punto final rechazan las direcciones mal formadas antes de su envío.
  • 🖱️ Manejo de eventos: addEventListener adjunta un comportamiento a un elemento sin colocar ningún script dentro del marcado.
  • ⏰ Actualizaciones programadas: La función setInterval repite una función según un intervalo fijo, que es el que controla el ejemplo del reloj en tiempo real.
  • 🔐 Regla del servidor: Las comprobaciones del lado del cliente solo mejoran la experiencia, y cada valor debe validarse de nuevo en el servidor.
  • 🧹 Práctica moderna: Reemplace document.write y las variables globales implícitas con textContent, let y const en el nuevo código.
Descubre más

JavaEjemplos de scripts con código fuente Code

Lo que construirás en estos JavaEjemplos de scripts

Cada ejemplo a continuación es una página HTML completa que se ejecuta en cualquier navegador sin necesidad de compilación ni bibliotecas externas. En conjunto, abarcan las tres habilidades presentes en casi todos los scripts de navegador: generar marcado a partir de datos, validar la entrada del usuario y reaccionar a eventos.

Ejemplo Concepto puesto en práctica Métodos clave utilizados
Tabla de multiplicación Bucles anidados y construcción de cadenas solicitud, para, mientras, documento.escribir
Validación de formulario Actualizaciones de matrices, condiciones y DOM getElementById, índice de, último índice de, HTML interno
Mensaje emergente Manejo de eventos agregarEventListener, alerta
Digireloj de tal Temporizadores y formato de fecha setInterval, Fecha, padStart, textContent

Conocimiento básico de JavaScript Se asume la sintaxis. Si los bucles aún no le resultan familiares, lea cómo usar bucles en JavaScript antes de empezar.

Ejemplo#1: JavaTabla de multiplicar con guiones

Crea una tabla de multiplicar sencilla que le pida al usuario el número de filas y columnas.

La Solución:

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

Salida (3 filas y 4 columnas):

1   2   3   4
2   4   6   8
3   6   9  12

Code explicación: El bucle for externo crea una fila de tabla por iteración, mientras que el bucle while interno llena esa fila con una celda por columna. El contador j Se restablece a 1 después de cada fila, que es el paso que la mayoría de los principiantes olvidan. Sin ese restablecimiento, solo la primera fila contendría celdas.

💡 Consejo: La función prompt siempre devuelve una cadena. La expresión i*j funciona porque JavaEl script convierte ambos operandos en números para la multiplicación, pero una comparación como rows > 5 compararía texto. Envuelva la entrada en Number() cuando el valor se utiliza tanto para operaciones aritméticas como para comparaciones.

Ejemplo n.° 2: Ejemplo de formularios JS

Cree un programa de formulario de ejemplo que recopile el nombre, apellido, correo electrónico, ID de usuario, contraseña y confirmación de contraseña del usuario. Todos los campos son obligatorios y la dirección de correo electrónico ingresada debe tener el formato correcto. Además, los valores ingresados ​​en los cuadros de texto de contraseña y confirmación de contraseña deben ser iguales. Después de validar usando JavaScript, mostrar mensajes de error apropiados en rojo justo al lado del cuadro de texto donde hay un error.

Solución con origen Code:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    var divs = new Array();
    divs[0] = "errFirst";
    divs[1] = "errLast";
    divs[2] = "errEmail";
    divs[3] = "errUid";
    divs[4] = "errPassword";
    divs[5] = "errConfirm";
    function validate()
	{
      var inputs = new Array();
      inputs[0] = document.getElementById('first').value;
      inputs[1] = document.getElementById('last').value;
      inputs[2] = document.getElementById('email').value;
      inputs[3] = document.getElementById('uid').value;
      inputs[4] = document.getElementById('password').value;
      inputs[5] = document.getElementById('confirm').value;
      var errors = new Array();
      errors[0] = "<span style='color:red'>Please enter your first name!</span>";
      errors[1] = "<span style='color:red'>Please enter your last name!</span>";
      errors[2] = "<span style='color:red'>Please enter your email!</span>";
      errors[3] = "<span style='color:red'>Please enter your user id!</span>";
      errors[4] = "<span style='color:red'>Please enter your password!</span>";
      errors[5] = "<span style='color:red'>Please confirm your password!</span>";
      for (i in inputs)
      {
        var errMessage = errors[i];
        var div = divs[i];
        if (inputs[i] == "")
        	document.getElementById(div).innerHTML = errMessage;
        else if (i==2)
        {
          var atpos=inputs[i].indexOf("@");
          var dotpos=inputs[i].lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
        	document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
          else
        	document.getElementById(div).innerHTML = "OK!";
        }
        else if (i==5)
        {
          var first = document.getElementById('password').value;
          var second = document.getElementById('confirm').value;
          if (second != first)
        	document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
          else
       		document.getElementById(div).innerHTML = "OK!";
        }
        else
        	document.getElementById(div).innerHTML = "OK!";
       }
     }
        function finalValidate()
        {
          var count = 0;
          for(i=0;i<6;i++)
          {
            var div = divs[i];
            if(document.getElementById(div).innerHTML == "OK!")
            count = count + 1;
          }
          if(count == 6)
          	document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        }
   </script>
</head>
<body>
	<table id="table1">
      <tr>
        <td>First Name:</td>
        <td><input type="text" id="first" onkeyup="validate();" /></td>
        <td><div id="errFirst"></div></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" id="last" onkeyup="validate();"/></td>
        <td><div id="errLast"></div></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="email" onkeyup="validate();"/></td>
        <td><div id="errEmail"></div></td>
      </tr>
      <tr>
        <td>User Id:</td>
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
        <td><div id="errUid"></div></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="password" onkeyup="validate();"/></td>
        <td><div id="errPassword"></div></td>
      </tr>
      <tr>
        <td>Confirm Password:</td>
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
        <td><div id="errConfirm"></div></td>
      </tr>
      <tr>
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
        <td><div id="errFinal"></div></td>
      </tr>
	</table>
</body>
</html>

Comportamiento esperado:

Empty first name        -> Please enter your first name!
Email "ann@site"        -> Enter a valid email address!
Email "ann@site.com"    -> OK!
Passwords differ        -> Your passwords don't match!
All six fields valid    -> All the data you entered is correct!!!

Code explicación: Tres matrices se ejecutan en paralelo. entradas mantiene los valores actuales, errores contiene los mensajes coincidentes y divs Contiene el identificador del contenedor que muestra cada mensaje. Por lo tanto, el índice vincula un campo, su texto de error y su ubicación de salida. La rama de correo electrónico solo acepta una dirección cuando el símbolo @ no es el primer carácter y cuando al menos dos caracteres separan el símbolo @ del punto final.

⚠️ Advertencia: La validación del lado del cliente mejora la experiencia del usuario, pero no proporciona seguridad. Cualquiera puede deshabilitarla. JavaEscriba el script o envíelo directamente al punto final, por lo que cada regla que se muestra aquí debe repetirse en el servidor.

ARTÍCULOS RELACIONADOS

Ejemplo n.° 3: Mensaje emergente mediante evento

Muestra un mensaje sencillo “¡Bienvenido!” en tu página web de demostración, y cuando el usuario pase el cursor sobre el mensaje, se mostrará una ventana emergente con el mensaje “¡Bienvenido a mi página web!”.

La Solución:

<html>
    <head>
        <title>Event!!!</title>
        <script type="text/javascript">
            function trigger() {
                document.getElementById("hover").addEventListener("mouseover", popup);
                function popup() {
                    alert("Welcome to my WebPage!!!");
                }
            }
        </script>
        <style>
            p{
                font-size: 50px;
                position: fixed;
                left: 550px;
                top: 300px;
            }
        </style>
    </head>
    <body onload="trigger();">
        <p id="hover">Welcome!!!</p>
    </body>
</html>

Comportamiento esperado:

Page loads      -> the text "Welcome!!!" appears in large type
Mouse hovers    -> an alert box shows "Welcome to my WebPage!!!"

Code explicación: El detector de eventos se encuentra dentro de la función de activación, que se ejecuta con el evento onload del cuerpo. Es importante esperar a que se cargue, ya que el párrafo con el ID "hover" no existe mientras se procesa el encabezado. Se puede lograr el mismo resultado de forma más limpia colocando el script justo antes de la etiqueta de cierre del cuerpo o agregando el atributo defer.

Ejemplo n.° 4: En vivo DigiReloj tal usando setInterval

Muestra la hora actual en la página y la actualiza cada segundo. Este ejemplo introduce el uso de temporizadores y muestra una alternativa moderna a document.write.

<html>
<head>
    <title>Digital Clock</title>
</head>
<body>
    <h2 id="clock">--:--:--</h2>

    <script>
        function showTime() {
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, "0");
            const mm = String(now.getMinutes()).padStart(2, "0");
            const ss = String(now.getSeconds()).padStart(2, "0");

            // textContent is safer than innerHTML for plain text
            document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss;
        }

        showTime();                 // draw immediately
        setInterval(showTime, 1000); // then refresh every second
    </script>
</body>
</html>

Comportamiento esperado:

09:05:07
09:05:08
09:05:09   (the heading updates in place once per second)

Llamar a showTime una vez antes de setInterval evita un retraso visible de un segundo al abrir la página. Use clearInterval con el valor devuelto por setInterval cuando necesite detener el reloj.

Mejores prácticas para escribir estos JavaEjemplos de scripts

Los tres ejemplos originales datan de un estilo anterior de JavaGuion. La siguiente lista muestra qué cambios se deben realizar al adaptarlo para su uso en producción.

  1. Reemplazar documento.write: Borra todo el documento si se llama después de que la página se haya cargado. En su lugar, crea un elemento y establece textContent o añade un nodo.
  2. Declara todas las variables: Utilice `let` y `const` en lugar de depender de variables globales implícitas como el contador. i en los bucles de arriba.
  3. Prefiera textContent a internalHTML: Insertar texto proporcionado por el usuario con innerHTML abre una vulnerabilidad de secuencias de comandos entre sitios (XSS).
  4. Mueva los manejadores fuera del marcado: Reemplaza los atributos onkeyup y onclick con addEventListener, lo que mantiene el comportamiento separado de la estructura.
  5. Convertir la entrada del mensaje: Envuelve los valores en Number() antes de usarlos en comparaciones, ya que prompt siempre devuelve una cadena.
  6. Validar de nuevo en el servidor: Considere las comprobaciones del navegador únicamente como una capa de conveniencia.

Para profundizar en estos ejemplos, revise JavaMétodos de matriz de script para los arreglos paralelos utilizados en el validador de formularios, JavaCadenas de script para las comprobaciones de la posición del correo electrónico y cookies en JavaScript para recordar los valores que ingresó un visitante. Decida dónde pertenece el script terminado leyendo interno y externo JavaScript.

Preguntas Frecuentes

Guarda el código en un archivo con extensión .html y ábrelo en cualquier navegador. No se requiere ningún servidor, compilador ni biblioteca para ninguno de los cuatro ejemplos de esta página.

El bucle while se detiene una vez que j supera el número de columnas. Sin restablecer j a 1, todas las filas posteriores a la primera no producirían ninguna celda.

No. Simplemente mejora la experiencia al proporcionar retroalimentación instantánea. Una solicitud puede eludir completamente el navegador, por lo que el servidor debe aplicar las mismas reglas antes de almacenar cualquier dato.

El evento mouseover se activa de nuevo cuando el puntero se mueve a un elemento hijo, mientras que mouseenter se activa solo una vez para el elemento en sí. Elija mouseenter cuando no desee que se active repetidamente.

La IA es útil para un primer borrador, pero el código generado suele usar innerHTML con entradas sin escape. Lea cada línea y reemplace las escrituras DOM inseguras antes de publicar.

Sí, cuando pegas el error exacto de la consola junto con el código. Los fallos de sincronización, como un script que se ejecuta antes de que exista el elemento, son de los más fáciles de identificar para un asistente.

Resumir este post con: