Hoja de trucos de JavaScript: una guía básica de JavaScript

¿Qué es JavaScript?

JavaScript es un lenguaje de programación ligero, abierto y multiplataforma. Es omnipresente en el desarrollo moderno y lo utilizan programadores de todo el mundo para crear contenido web dinámico e interactivo, como aplicaciones y navegadores. Es una de las tecnologías centrales de la World Wide Web, junto con HTML y CSS, y el centro neurálgico detrás de la rápida evolución de Internet al ayudar a crear sitios web hermosos y increíblemente rápidos.

¿Qué es la hoja de trucos de JavaScript?

Hemos creado una hoja de trucos para ayudar a nuestros lectores a aprender JavaScript de la manera más fácil posible. Es una documentación de los conceptos básicos y conceptos de JavaScript, fragmentos de código rápidos, correctos y listos para usar para circunstancias comunes en JavaScript en una sola página. Es útil tanto para los programadores principiantes como para los profesionales de JavaScript.

Tabla de contenidos:

Fundamentos: para usar JavaScript en el sitio web, debemos adjuntar el archivo JavaScript al archivo HTML. Para hacer el mejor código, también debemos comentar durante el código. Hay dos tipos de comentarios de una sola línea y de varias líneas.

• Para que un navegador sepa que el código está escrito en JavaScript y lo ejecute, debemos encerrar el código dentro de la etiqueta <script> para incluirlo en la página HTML.

  <script type="text/javascript"> 
    // Your js code goes here 
  </script>

• Un archivo JavaScript externo también se puede escribir por separado e incluir dentro de nuestro archivo HTML usando una etiqueta de script como:

  <script src="filename.js"></script>.

• Los comentarios de JavaScript pueden ser extremadamente útiles para explicar el código de JavaScript y ayudar a comprender lo que sucede en su código y hacerlo más legible.
  • Comentarios de una sola línea: Comience un comentario de una sola línea con «//».
  • Comentarios de varias líneas: envuelva el comentario en /* y*/ si abarca varias líneas.

Variables: Las variables en JavaScript son contenedores para almacenar datos. JavaScript permite el uso de variables de las siguientes tres formas:

<script>
    // Using var keyword
    document.write("<u>Using var Keyword</br></u>")
    var x = 1;
    if (x === 1) {
        var x = 2;
        document.write(x + "</br>"); // Output: 2
    }
    document.write(x + "</br>"); // Output: 2
      
    // Using let keyword
    document.write("<u>Using let Keyword</br></u>")
    let x1 = 1;
    if (x1 === 1) {
        let x1 = 2;
        document.write(x1 + "</br>"); // Output: 2
    }
    document.write(x1 + "</br>"); // Output: 1
      
    // Using const keyword
    document.write("<u>Using const Keyword</br></u>")
    const number = 48;
  
    // Changing const value will display TypeError
    try {
        number = 42;
    } catch (gfg) {
        document.write(gfg + "</br>");
    }
    document.write(number); // Output: 48
</script>

Tipos de datos: existen diferentes tipos de valores y datos que se pueden almacenar en variables de JavaScript. Para que la máquina pueda operar con variables y evaluar correctamente las expresiones, es importante conocer el tipo de variables involucradas. Existen los siguientes tipos de datos primitivos y no primitivos en JavaScript:

<script>
  // String
  let str = "hello geeks";
  document.write(str + "</br>");
  
  // number
  const num = 10;
  document.write(num + "</br>");
  
  // boolean
  const x = "true";
  document.write(x + "</br>");
  
  // undefined
  let name;
  document.write(name + "</br>");
  
  // null
  const number = null;
  document.write(number + "</br>");
  
  // symbol
  const value1 = Symbol("hello");
  const value2 = Symbol("hello");
  document.write(value1 + "</br>");
  document.write(value2 + "</br>");
  
  // Here both values are different as they
  // are symbol type which is immutable object
  const object = {
    firstName: "geek",
    lastName: null,
    batch: 2,
  };
  document.write(object);
</script>

Operadores: los operadores de JavaScript son símbolos que se utilizan para realizar diversas operaciones en variables (operandos). Los siguientes son los diferentes tipos de operadores:

<script>
  let x = 5;
  let y = 3;
  
  // Addition
  document.write("x + y = ", x + "</br>"); // 8
  
  // Subtraction
  document.write("x - y = ", x - y + "</br>"); // 2
  
  // Multiplication
  document.write("x * y = ", x * y + "</br>"); // 15
  
  // Division
  document.write("x / y = ", x / y + "</br>");
  
  // Remainder
  document.write("x % y = ", (x % y) + "</br>"); // 2
  
  // Increment
  document.write("++x = ", ++x + "</br>"); // x is now 6
  document.write("x++ = ", x++ + "</br>");
  document.write("x = ", x + "</br>"); // 7
  
  // Decrement
  document.write("--x = ", --x + "</br>"); // x is now 6
  document.write("x-- = ", x-- + "</br>");
  document.write("x = ", x + "</br>"); // 5
  
  // Exponentiation
  document.write("x ** y =", x ** y + "</br>");
  
  // Comparison
  
  document.write(x > y + "</br>"); // true
  
  // Equal operator
  document.write((2 == 2) + "</br>"); // true
  
  // Not equal operator
  document.write((3 != 2) + "</br>"); // true
  
  // Strict equal operator
  document.write((2 === 2) + "</br>"); // true
  
  // Strict not equal operator
  document.write((2 !== 2) + "</br>"); // true
  
  // Logical operator
  // logical AND
  document.write((x < 6 && y < 5) + "</br>"); // true
  
  // logical OR
  document.write((x < 6 || y > 6) + "</br>"); // true
  // logical NOT
  document.write(!(x < 6) + "</br>"); // false
</script>

Alcance JS y string de alcance:

• Alcance: El alcance define la accesibilidad o visibilidad de las variables en JavaScript. Es decir, qué secciones del programa pueden acceder a una determinada variable y dónde se puede ver la variable. Usando el alcance, podemos evitar modificaciones no deseadas a las variables desde otras partes del programa. Por lo general, hay tres tipos de alcances:

• String de alcance: la string de alcance se utiliza para resolver el valor de los nombres de variables en JavaScript. Sin una string de ámbito, el motor de JavaScript no sabría qué valor elegir para un determinado nombre de variable si hay múltiples definiciones en diferentes ámbitos. Si el motor de JavaScript no pudo encontrar la variable en el ámbito actual, buscará en el ámbito externo y continuará haciéndolo hasta que encuentre la variable o llegue al ámbito global. Si aún no pudo encontrar la variable, declarará implícitamente la variable en el ámbito global (si no está en modo estricto) o devolverá un error.

<script>
   let z=3
   function foo() {
     if (true) {
        var x = '1'; // Exist in function scope
        const y = '2'; // Exist in block scope 
     }
     document.write(x);
     document.write(y);
     document.write(z); // Exist in global scope
   }
   foo();
</script>

Funciones: una función de JavaScript es un bloque de código diseñado para realizar una tarea en particular. Se ejecuta cuando es invocado o llamado. En lugar de escribir el mismo fragmento de código una y otra vez, puede colocarlo en una función e invocar la función cuando sea necesario. La función JavaScript se puede crear usando la palabra clave functions. Algunas de las funciones en JavaScript son:

<script>
  // JS parseInt function
  var v1 = parseInt("3.14");
  document.write('Using parseInt("3.14") = ' + v1 + "</br>");
  
  // JS parsefloat function
  // It returns floating point Number until 
  // it encounters Not a Number character
  a = parseFloat("2018@geeksforgeeks");
  document.write('parseFloat("2018@geeksforgeeks") = ' + a + "</br>");
  
  // JS isNAN fucntion
  document.write(isNaN(12) + "<br>");
  
  // JS number() function
  function num() {
    var a = true;
  
    var value = Number(a);
    document.write(value + "</br>");
  }
  num();
  
  // JS eval() function
  function evalfn() {
    var a = 4;
    var b = 4;
    var value = eval(new String(a * b));
    document.write(value + "</br>");
  }
  evalfn();
  
  // JS encode URI function
  const url = "https://www.google.com/search?q=geeks for geeks";
  const encodedURL = encodeURI(url);
  document.write(encodedURL);
</script>

Arrays: en JavaScript, una array es una sola variable que se utiliza para almacenar diferentes elementos. A menudo se usa cuando queremos almacenar una lista de elementos y acceder a ellos mediante una sola variable. Las arrays usan números como índice para acceder a sus «elementos».
Declaración de una array: hay básicamente dos formas de declarar una array.

Example: var House = [ ]; // Method 1
var House = new Array(); // Method 2

Hay varias operaciones que se pueden realizar en arrays utilizando métodos de JavaScript. Algunos de estos métodos son:

<script type="text/javascript">
  // Declaring and initializing arrays
  var arr = [10, 20, 30, 40, 50]; // number array
  var arr1 = [110, 120, 130, 140];
  var string_arr = ["Alex", "peter", "chloe"]; // string array
  
  // push: Adding elements at the end of the array
  arr.push(60);
  document.write("After push op " + arr + "</br>");
  
  // unshift() Adding elements at the start of the array
  arr.unshift(0, 10);
  document.write("After unshift op " + arr + "</br>");
  
  // pop: removing elements from the end of the array
  arr.pop();
  document.write("After pop op" + arr + "</br>");
  
  // shift(): Removing elements from the start of the array
  arr.shift();
  document.write("After shift op " + arr + "</br>");
  
  // splice(x,y): removes x number of elements starting from index y
  arr.splice(2, 1);
  document.write("After splice op" + arr + "</br>");
  
  // reverse(): reverses the order of elements in array
  arr.reverse();
  document.write("After reverse op" + arr + "</br>");
  
  // concat(): merges two or more array
  document.write("After concat op" + arr.concat(arr1));
</script>   

Bucles: los bucles son una función útil en la mayoría de los lenguajes de programación. Con los bucles, puede evaluar un conjunto de instrucciones/funciones repetidamente hasta que se alcance una determinada condición. Te permiten ejecutar bloques de código tantas veces como quieras con diferentes valores mientras alguna condición sea verdadera. Los bucles se pueden crear de las siguientes maneras en JavaScript:

<script type="text/javascript">
  // Illustration of for loop
  var x;
  
  // for loop begins when x=2
  // and runs till x <=4
  for (x = 2; x <= 4; x++) {
    document.write("Value of x:" + x + "<br />");
  }
  
  // Illustration of for..in loop
  // creating an Object
  var languages = {
    first: "C",
    second: "Java",
    third: "Python",
    fourth: "PHP",
    fifth: "JavaScript",
  };
  
  // Iterate through every property of 
  // the object languages and print all
  // of them using for..in loops
  for (itr in languages) {
    document.write(languages[itr] + "<br >");
  }
  
  // Illustration of while loop
  var y = 1;
  
  // Exit when x becomes greater than 4
  while (y <= 4) {
    document.write("Value of y:" + y + "<br />");
  
    // Increment the value of y for next iteration
    x++;
  }
  
  // Illustration of do-while loop
  var z = 21;
  
  do {
    // The line while be printer even if the condition is false
    document.write("Value of z:" + z + "<br />");
  
    z++;
  } while (z < 20);
</script>

If-else: If-else se usa en JavaScript para ejecutar un bloque de códigos de forma condicional. Estos se utilizan para establecer condiciones para que se ejecute su bloque de código. Si se cumple cierta condición, se ejecuta cierto bloque de código; de lo contrario, se ejecuta el bloque de código. JavaScript nos permite anidar sentencias if dentro de sentencias if también. es decir, podemos colocar una sentencia if dentro de otra sentencia if.

if (condition)
{
   // Executes this block if
   // condition is true
}
else
{
   // Executes this block if
   // condition is false
}

<script type="text/javaScript">
  // JavaScript program to illustrate If-else statement
  var i = 10;
  
  if (i < 15)
  document.write("I am in the if block");
  else
  document.write("I am Not in the if block");
</script>

Strings: las strings en JavaScript son tipos de datos primitivos e inmutables que se utilizan para almacenar y manipular datos de texto que pueden ser cero o más caracteres que consisten en letras, números o símbolos. JavaScript proporciona muchos métodos para manipular strings. Algunos de los más utilizados son:

<script>
   let gfg = 'GFG ';
   let geeks = 'stands-for-GeeksforGeeks';
     
   // Print the string as it is
   document.write(gfg);
   document.write(geeks + "</br>");
     
   // concat() method
   document.write(gfg.concat(geeks) + "</br>");
     
   // match() method
   document.write(geeks.match(/eek/) + "</br>");
     
   // charAt() method
   document.write(geeks.charAt(5) + "</br>");
     
   // valueOf() method
   document.write(geeks.valueOf() + "</br>");
     
   // lastIndexOf() method
   document.write(geeks.lastIndexOf('for') + "</br>");
     
   // substr() method
   document.write(geeks.str.substr(6) + "</br>");
     
   // indexOf() method
   document.write(gfg.indexOf('G') + "</br>");
     
   // replace() method
   document.write(gfg.replace('FG', 'fg') + "</br>");
     
   // slice() method
   document.write(geeks.slice(2, 8) + "</br>");
     
   // split() method
   document.write(geeks.split('-') + "</br>");
     
   // toUpperCase method
   document.write(geeks.toUpperCase(geeks) + "</br>");
     
   // toLowerCase method
   document.write(geeks.toLowerCase(geeks) + "</br>");
</script>

Expresiones regulares: una expresión regular es una secuencia de caracteres que forma un patrón de búsqueda. El patrón de búsqueda se puede utilizar para búsqueda de texto y operaciones de reemplazo de texto. Una expresión regular puede ser un solo carácter o un patrón más complicado.

Sintaxis:

/pattern/modifiers;

También puede usar regEx() para crear una expresión regular en javascript:

const regex1 = /^ab/;
const regex2 = new Regexp('/^ab/');

Veamos cómo JavaScript permite expresiones regulares:

Modificadores de expresiones regulares: los modificadores se pueden usar para realizar búsquedas de varias líneas. Algunos de los modificadores de patrón que están permitidos en JavaScript:

Patrones de expresiones regulares: los metacaracteres son caracteres con un significado especial. Algunos de los metacaracteres que están permitidos en JavaScript:

Los cuantificadores definen cantidades. Proporcionan la cantidad mínima de instancias de un personaje, grupo o clase de personaje en la entrada requerida para encontrar una coincidencia. Algunos de los cuantificadores permitidos en JavaScript son:

Aquí hay un ejemplo para ayudarlo a comprender mejor la expresión regular.

<script>
  // Program to validate the email address
  function validateEmail(email) {
    const re = /\S+@\S+\.\S+/g; // Regex pattern for email
  
    let result = re.test(email); // check if the email is valid
    if (result) {
      document.write("The email is valid.");
    } else {
      let newEmail = prompt("Enter a valid email:");
      validateEmail(newEmail);
    }
  }
  // Take input
  let email = prompt("Enter an email: ");
  validateEmail(email);
</script>

Transformación de datos: la transformación de datos es el proceso de convertir datos de un formato a otro. La transformación de datos en JavaScript se puede realizar con el uso de funciones de orden superior que pueden aceptar una o más funciones como entradas y devolver una función como resultado. Todas las funciones de orden superior que toman una función como entrada son map(), filter() y reduce().

<!DOCTYPE html>
<html>
<body>
  <h1 style="color: green">
      JavaScript Data Transformation methods
  </h1>
  <p>
    The Array.map() method creates a new
    array from the results of calling a
    function for every element.
  </p>
  <p id="demo"></p>
  <h3>The filter() Method</h3>
  <p>
      Get every element in the array 
      that has a value of 18 or more:
  </p>
  <p id="demo1"></p>
  <h3>The reduce method</h3>
  <p>
      Subtract the numbers in the array,
      starting from the left:
  </p>
  <p id="demo2"></p>
  <script>
    const num = [16, 25];
      
    /* Using JS map() Method */
    document.getElementById("demo")
    .innerHTML = num.map(Math.sqrt);
  
    const ages = [19, 37, 16, 42];
      
    /* Using JS filter() Method */
    document.getElementById("demo1")
    .innerHTML = ages.filter(checkAdult);
  
    function checkAdult(age) {
      return age >= 18;
    }
      
    /* Using JS reduce() Method */
    const numbers = [165, 84, 35];
    document.getElementById("demo2")
    .innerHTML = numbers.reduce(myFunc);
  
    function myFunc(total, num) {
      return total - num;
    }
  </script>
</body>
</html>

Objetos de fecha: el objeto de fecha es un tipo de datos incorporado del lenguaje JavaScript. Se utiliza para tratar y cambiar fechas y horas. Hay cuatro formas diferentes de declarar una fecha, lo básico es que los objetos de fecha son creados por el operador new Date().
Sintaxis:

new Date()
new Date(milliseconds)
new Date(dataString)
new Date(year, month, date, hour, minute, second, millisecond)

Hay varios métodos en JavaScript que se utilizan para obtener valores de fecha y hora o crear objetos de fecha personalizados. Algunos de estos métodos son:

<script>
  // Here a date has been assigned by creating a date obj
  var DateObj = new Date("October 13, 1996 05:35:32");
  
  // getDate()
  var A = DateObj.getDate();
  
  // Printing date of the month
  document.write(A + "</br>");
  
  // getTime()
  var B = DateObj.getTime();
  
  // Printing time in milliseconds.
  document.write(B + "</br>");
  
  // getMinutes()
  var minutes = DateObj.getMinutes();
  
  // Printing minute.
  document.write(minutes + "</br>");
  
  // getFullYear()
  var C = DateObj.getFullYear();
  
  // Printing year
  document.write(C + "</br>");
  
  // getDay()
  var Day = DateObj.getDay();
  
  // Printing day of the week
  document.write("Number of Day: " + Day + "</br>");
  
  // setDate
  dateobj.setDate(15);
  
  var D = DateObj.getDate();
  
  // Printing new date of the month
  document.write(D);
  
  // parse(), taking wrong date string as input.
  var date = "February 48, 2018 12:30 PM";
  
  // calling parse function.
  var msec = Date.parse(date);
  document.write(msec);
</script>

DOM: DOM significa Modelo de objeto de documento. Define la estructura lógica de los documentos y la forma en que se accede y manipula un documento. JavaScript no puede comprender las etiquetas en el documento HTML, pero puede comprender los objetos en DOM. Hay muchas formas diferentes de construir y modificar elementos HTML con JavaScript llamados Nodes. A continuación se muestran algunos de los métodos proporcionados por JavaScript para manipular estos Nodes y sus atributos en el DOM:

<!DOCTYPE html>
<html>
<head>
  /* CSS is used to make the output looks good */
  <style>
    #sudo {
      border: 1px solid green;
      background-color: green;
      margin-bottom: 10px;
      color: white;
      font-weight: bold;
    }
    h1,
    h2 {
      text-align: center;
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h2>DOM appendChild() Method</h2>
  <div id="sudo">
      The Good Website is learning for Computer Science is-
  </div>
  <button onclick="geeks()">Submit</button>
  <br />
  <div style="border: 3px solid green">
    <h1>GeeksforGeeks</h1>
    <h2>A computer science portal for geeks</h2>
  </div>
  <h2>DOM cloneNode() Method</h2>
  <button onclick="nClone()">
      Click here to clone the above elements.
  </button>
  <br />
  <h2>DOM hasAttributes() Method</h2>
  <p id="gfg">
    Click on the button to check if that 
    body element has any attributes
  </p>
  <button type="button"
          onclick="hasAttr()">
      Submit
  </button>
  <br />
  <h2>DOM removeChild() Method</h2>
  <p>Sorting Algorithm</p>
  <ul id="listitem">
    <li>Insertion sort</li>
    <li>Merge sort</li>
    <li>Quick sort</li>
  </ul>
  <button onclick="Geeks()">
      Click Here!
   </button>
  <br />
  <h2>DOM getAttribute() Method</h2>
  <br />
  <button id="button" onclick="getAttr()">
      Submit
   </button>
  <p id="gfg1"></p>
  <br />
  <h2>DOM getElementsByTagName()</h2>
  <p>A computer science portal for geeks.</p>
  <button onclick="getElememt()">
      Try it
  </button>
  <h3>DOM isEqualNode() method .</h3>
  <!-- 3 div elements-->
  <div>GeeksforGeeks</div>
  <div>GfG</div>
  <div>GeeksforGeeks</div>
  <button onclick="isequal()">
      Check
  </button>
  <p id="result"></p>
  <script>
    function geeks() {
      var node = document.createElement("P");
      var t = document.createTextNode("GeeksforGeeks");
      node.appendChild(t);
      document.getElementById("sudo").appendChild(node);
    }
    function nClone() {
      // Accessing div attribute using a variable geek
      var geek = document.getElementsByTagName("DIV")[0];
   
      // Cloning geek variable into a variable named clone
      var clone = geek.cloneNode(true);
   
      // Adding our clone variable to end of the document
      document.body.appendChild(clone);
    }
    function hasAttr() {
      var s = document.body.hasAttributes();
      document.getElementById("gfg").innerHTML = s;
    }
   
    function Geeks() {
      var doc = document.getElementById("listitem");
      doc.removeChild(doc.childNodes[0]);
    }
   
    /* Using getElementById */
    function getAttr() {
      var rk = document.getElementById("button").getAttribute("onClick");
      document.getElementById("gfg1").innerHTML = rk;
    }
      
    /* Using getElementsByTagName */
    function getElement() {
      var doc = document.getElementsByTagName("p");
      doc[0].style.background = "green";
      doc[0].style.color = "white";
    }
      
    /* Cheacking the equality */
    function isequal() {
      var out = document.getElementById("result");
      var divele = document.getElementsByTagName("div");
      out.innerHTML +=
        "element 1 equals element 1: " +
        divele[0].isEqualNode(divele[0]) +
        "<br/>";
      out.innerHTML +=
        "element 1 equals element 2: " +
        divele[0].isEqualNode(divele[1]) +
        "<br/>";
      out.innerHTML +=
        "element 1 equals element 3: " +
        divele[0].isEqualNode(divele[2]) +
        "<br/>";
    }
  </script>
</body>
</html>

Números y Matemáticas: JavaScript proporciona varias propiedades y métodos para trabajar con Números y Matemáticas.

Las propiedades numéricas incluyen valor MAX, valor MIN, NAN (no es un número), infinito negativo, infinito positivo, etc. Algunos de los métodos en JavaScript para tratar con números son:

<script type="text/javascript">
  var num = 213;
  var num1 = 213.3456711;
  
  // JS valueof() Method
  document.write("Output : " + num.valueOf() + "</br>");
  
  // JS tostring() Method
  document.write("Output : " + num.toString(2) + "</br>");
  
  // JS tofixed() Method
  document.write("Output : " + num1.toString(2) + "</br>");
  
  // JS topricision() Method
  document.write("Output : " + num1.toPrecision(3) + "</br>");
  
  // JS toexponential() Method
  document.write("Output : " + num1.toExponential(4) + "</br>");
</script>

Javascript proporciona un objeto matemático que se utiliza para realizar operaciones matemáticas con números. Hay muchas propiedades de objetos matemáticos que incluyen el número de Euler, PI, raíz cuadrada, logaritmo. Algunos de los métodos en JavaScript para manejar las propiedades matemáticas son:

<script>
   document.getElementById("GFG").innerHTML =
       "Math.LN10: " + Math.LN10 + "<br>" +
       "Math.LOG2E: " + Math.LOG2E + "<br>" +
       "Math.Log10E: " + Math.LOG10E + "<br>" +
       "Math.SQRT2: " + Math.SQRT2 + "<br>" +
       "Math.SQRT1_2: " + Math.SQRT1_2 + "<br>" +
       "Math.LN2: " + Math.LN2 + "<br>" +
       "Math.E: " + Math.E + "<br>" +
       "Math.round: " + Math.round(5.8) + "<br>" +
       "Math.PI: " + Math.PI + "<br>" +
       "
   <p><b>Math.sin(90 * Math.PI / 180):</b> " +
       Math.sin(90 * Math.PI / 180) + "</p>
   " +
       "
   <p><b>Math.tan(90 * Math.PI / 180):</b> " +
       Math.tan(90 * Math.PI / 180) + "</p>
   " +
       "
   <p><b>Math.max(0, 150, 30, 20, -8, -200):</b> " +
       Math.max(0, 150, 30, 20, -8, -200) + "</p>
   " +
       "
   <p><b>Math.min(0, 150, 30, 20, -8, -200):</b> " +
       Math.min(0, 150, 30, 20, -8, -200) + "</p>
   " +
       "
   <p><b>Math.pow(3,4):</b> " + Math.pow(3, 4) + "</p>
   ";
</script>

Eventos: Javascript tiene eventos para proporcionar una interfaz dinámica a una página web. Cuando un usuario o navegador manipula la página se producen eventos. Estos eventos están vinculados a elementos en el modelo de objetos de documento (DOM). Algunos de los eventos soportados por JavaScript:

<!DOCTYPE html>
<html>
<head>
  /* CSS is used to make the output looks good */
  <style>
    #geeks {
      border: 1px solid black;
      padding: 15px;
      width: 60%;
    }
    h1 {
      color: green;
    }
  </style>
  <script>
    function hiThere() {
      alert("Hi there!");
    }
    function focused() {
      var e = document.getElementById("inp");
      if (confirm("Got it?")) {
        e.blur();
      }
    }
      
    /* Mouseover event */
    document.getElementById("hID").addEventListener("mouseover", over);
      
    /* Mouseoout event */
    document.getElementById("hID").addEventListener("mouseout", out);
      
    /* Over on green */
    function over() {
      document.getElementById("hID").style.color = "green";
    }
      
    /* Leaving Out Black */
    function out() {
      document.getElementById("hID").style.color = "black";
    }
  
    function Geeks() {
      var x = document.getElementById("GFG").value;
      document.getElementById("sudo").innerHTML = "Selected Subject: " + x;
    }
  
    /* Success alert */
    function Geek() {
      alert("Form submitted successfully.");
    }
    function Function() {
      document.getElementById("geeks").style.fontSize = "30px";
      document.getElementById("geeks").style.color = "green";
    }
  </script>
</head>
<body>
  <!-- onload event -->
  <img onload="alert('Image completely loaded')"
       alt="GFG-Logo"
       src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png"/>
  <br />
      
  <!-- onclick event -->
  <h2>onclick event</h2>
  <button type="button" onclick="hiThere()" on>
      Click me
  </button>
    
  <!-- onfocus event -->
  <h2>onfocus event</h2>
  <p>Take the focus into the input box below:</p>
  <input id="inp" onfocus="focused()" />
  
  <!-- onblur Event -->
  <h2>onblur event</h2>
  <p>
    Write something in the input box and 
    then click elsewhere in the document
    body.
  </p>
  <input onblur="alert(this.value)" />
  
  <!-- onmouseover and onmouseout event -->
  <h2 id="hID">onmouseover event</h2>
  <h2>onchange Event</h2>
  <p>Choose Subject:</p>
  <select id="GFG" onchange="Geeks()">
    <option value="Data Structure">
        Data Structure
     </option>
    <option value="Algorithm">
        Algorithm
     </option>
    <option value="Computer Network">
        Computer Network
     </option>
    <option value="Operating System">
        Operating System
     </option>
    <option value="HTML">
        HTML
    </option>
  </select>
  
  <p id="sudo"></p>
    
  <!-- onsubmit event -->
  <h2>onsubmit event</h2>
  <form onsubmit="Geek()">
    First Name:<input type="text" value="" />
    <br />
    Last Name:<input type="text" value="" />
    <br />
    <input type="submit" value="Submit" />
  </form>
    
  <!--ondrag event -->
  <h2>ondrag event attribute</h2>
  <div id="geeks" ondrag="Function()">
    GeeksforGeeks: A computer science portal for geeks
  </div>
</body>
</html>

Error: Al ejecutar código JavaScript, los errores ocurrirán definitivamente cuando el motor JavaScript encuentre un código sintácticamente inválido. Estos errores pueden ocurrir debido a una falla del lado del programador o la entrada es incorrecta o incluso si hay un problema con la lógica del programa. Javascript tiene algunas declaraciones para lidiar con estos errores:

<!DOCTYPE html>
<html>
<body>
  <h2>
      JavaScript throw try catch finally keywords
  </h2>
  <p>Please enter a number:</p>
  <input id="demo" type="text" />
  <button type="button" onclick="myFunction()">
      Test Input
  </button>
  <p id="p01"></p>
  <script>
    function myFunction() {
      const message = document.getElementById("p01");
      message.innerHTML = "";
      let x = document.getElementById("demo").value;
  
      /* Using try.. catch.. with conditions*/
      try {
        if (x == "") throw "is empty";
        if (isNaN(x)) throw "is not a number";
        x = Number(x);
        if (x > 20) throw "is too high";
        if (x <= 20) throw "is too low";
      } catch (err) {
        message.innerHTML = "Input " + err;
      } finally {
        document.getElementById("demo").value = "";
      }
    }
  </script>
</body>
</html>

Propiedades de ventana: el objeto de ventana es el objeto superior de la jerarquía DOM. Cada vez que aparece una ventana en la pantalla para mostrar el contenido del documento, se crea el objeto de ventana. Para acceder a las propiedades del objeto de la ventana, especificará el nombre del objeto seguido de un símbolo de punto (.) y el nombre de la propiedad.

Sintaxis:

window.property_name

Las propiedades y métodos del objeto Ventana que se usan comúnmente se enumeran en las siguientes tablas:

<!DOCTYPE html>
<html>
<body>
  <h1>The Window properties</h1>
  <h2>The origin Property</h2>
  
  <p id="demo"></p>
  <br />
  <button type="button" onclick="getResolution();">
      Get Resolution
     </button>
  <br />
  <button type="button" onclick="checkConnectionStatus();">
    Check Connection Status
  </button>
  <br />
  <button type="button" onclick="getViews();">
      Get Views Count</button>
  <br />
  <p>
     <button onclick="closeWin()">
      Close "myWindow"
     </button>
  </p>
  
  <script>
    // JS location property
    let origin = window.location.origin;
    document.getElementById("demo").innerHTML = origin;
  
    // JS screen property
    function getResolution() {
      alert("Your screen is: " + screen.width + "x" + screen.height);
    }
  
    // JS toolbar property
    var visible = window.toolbar.visible;
  
    // JS navigator property
    function checkConnectionStatus() {
      if (navigator.onLine) {
        alert("Application is online.");
      } else {
        alert("Application is offline.");
      }
    }
    // JS history property
    function getViews() {
      alert(
        "You've accessed " + history.length + " web pages in this session."
      );
    }
    // JS close property
    let myWindow;
    function closeWin() {
      if (myWindow) {
        myWindow.close();
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Window Methods</title>
  /* CSS is used to make the output looks good */
  <style>
    .gfg {
      font-size: 36px;
    }
    form {
      float: right;
      margin-left: 20px;
    }
  </style>
</head>
<body>
  <div class="gfg">JavaScript Window Methods</div>
  <br />
  <button onclick="windowOpen()">
      JavaScript window Open
  </button>
  <button onclick="resizeWin()">
      JavaScript window resizeTo
  </button>
  <button onclick="windowBlur()">
      JavaScript window Blur
  </button>
  <button onclick="windowFocus()">
      JavaScript window Focus
  </button>
  <button onclick="windowClose()">
      JavaScript window Close
  </button>
  <br />
  <br />
  <p id="g"></p>
  <form>
    <button onclick="setTimeout(wlcm, 2000);">
        Alert after 2 Second
    </button>
    <button onclick="geek()">Click me!</button>
    <input type="button" 
           value="Print" 
           onclick="window.print()" />
  </form>
  <br /><br />
  <button id="btn" 
          onclick="fun()" 
          style="color: green">
    JavaScript Used setTimeOut
  </button>
  <button id="btn" onclick="stop()">
      JavaScript clearTimeout
  </button>
  <script>
    var gfgWindow;
      
    // Function that open the new Window
    function windowOpen() {
      gfgWindow = window.open(
        "https://www.geeksforgeeks.org/",
        "_blank",
        "width=200, height=200"
      );
    }
      
    // Function that Resize the open Window
    function resizeWin() {
      gfgWindow.resizeTo(400, 400);
      gfgWindow.focus();
    }
      
    // Function that Closes the open Window
    function windowClose() {
      gfgWindow.close();
    }
      
    // Function that blur the open Window
    function windowBlur() {
      gfgWindow.blur();
    }
      
    // Function that focus on open Window
    function windowFocus() {
      gfgWindow.focus();
    }
      
    // Alert function
    function wlcm() {
      alert("Welcome to GeeksforGeeks");
    }
      
    // Prompt fucntion
    function geek() {
      var doc = prompt("Please enter some text", "GeeksforGeeks");
      if (doc != null) {
        document.getElementById("g").innerHTML = "Welcome to " + doc;
      }
    }
      
    // Fucntion setTimeout and clearTimeout
    var t;
    function color() {
      if (document.getElementById("btn").style.color == "blue") {
        document.getElementById("btn").style.color = "green";
      } else {
        document.getElementById("btn").style.color = "blue";
      }
    }
    function fun() {
      t = setTimeout(color, 3000);
    }
    function stop() {
      clearTimeout(t);
    }
  </script>
</body>
</html>

JavaScript es bien conocido por el desarrollo de páginas web y muchos entornos que no son de navegador también lo utilizan. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .

También tenemos una hoja de trucos similar para ayudarlo con los conceptos de HTML y CSS. Compruébalo aquí Hoja de trucos HTML y Hoja de trucos CSS .

Aprender JavaScript es la clave para convertirse en un desarrollador front-end con buenos ingresos. Tenemos un curso de JavaScript a su propio ritmo que lo ayudará a aprender JavaScript y sus conceptos básicos.