Intro


Programas de JavaScript

Un programa de computadora es una lista de "instrucciones" que deben ser "ejecutadas" por una computadora.

En un lenguaje de programación, estas instrucciones de programación se denominan declaraciones .

Un programa JavaScript es una lista de declaraciones de programación .

Sentencias de JavaScript

Las declaraciones de JavaScript se componen de:

Valores, operadores, expresiones, palabras clave y comentarios.

Esta declaración le dice al navegador que escriba "Hola Dolly" dentro de un elemento HTML con id="demo":

document.getElementById("demo").innerHTML = "Hello Dolly.";

La mayoría de los programas JavaScript contienen muchas declaraciones JavaScript.

Las sentencias se ejecutan, una por una, en el mismo orden en que están escritas.

Punto y coma ;

Los puntos y coma separan las declaraciones de JavaScript.

Agregue un punto y coma al final de cada declaración ejecutable:

let a, b, c;  // Declare 3 variables
a = 5;        // Assign the value 5 to a
b = 6;        // Assign the value 6 to b
c = a + b;    // Assign the sum of a and b to c

Cuando se separan con punto y coma, se permiten varias declaraciones en una línea:

a = 5; b = 6; c = a + b;

Espacio en blanco de JavaScript

JavaScript ignora los espacios múltiples. Puedes agregar espacios en blanco a tu código para que sea más legible.

Las siguientes líneas son equivalentes:

let person = "Hege";
let person="Hege";

Una buena práctica es poner espacios alrededor de los operadores (=+-*/):

let x = y + z;

Longitud de línea y saltos de línea en JavaScript

Para una mejor legibilidad, los programadores a menudo prefieren evitar líneas de código de más de 80 caracteres.

Si una declaración de JavaScript no cabe en una línea, el mejor lugar para dividirla es después de un operador:

document.getElementById("demo").innerHTML =
"Hello Dolly!";

Bloques de código JavaScript

Las declaraciones de JavaScript se pueden agrupar en bloques de código, dentro de llaves {...}.

El propósito de los bloques de código es definir declaraciones que se ejecutarán juntas.

Un lugar donde encontrará declaraciones agrupadas en bloques es en las funciones de JavaScript:

function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

 JavaScript puede cambiar el contenido HTML

Uno de los muchos métodos HTML de JavaScript es getElementById().

El siguiente ejemplo "encuentra" un elemento HTML (con id="demo") y cambia el contenido del elemento (innerHTML) a "Hola JavaScript":

document.getElementById("demo").innerHTML = "Hello JavaScript";

Cambiar el estilo de un elemento HTML es una variante de cambiar un atributo HTML:

document.getElementById("demo").style.fontSize = "35px";

Se pueden ocultar elementos HTML cambiando el displayestilo:

document.getElementById("demo").style.display = "none";

También es posible mostrar elementos HTML ocultos cambiando el displayestilo:

document.getElementById("demo").style.display = "block";

La etiqueta <script>

En HTML, el código JavaScript se inserta entre las etiquetas <script>y </script>.

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

JavaScript en <head> o <body>

Puede colocar cualquier cantidad de scripts en un documento HTML.

Los scripts se pueden colocar en la sección <body>, o en la <head>sección de una página HTML, o en ambas.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

JavaScript externo

Los scripts también se pueden colocar en archivos externos:


Los scripts externos son prácticos cuando se utiliza el mismo código en muchas páginas web diferentes.

Los archivos JavaScript tienen la extensión de archivo .js .

Para utilizar un script externo, coloque el nombre del archivo de script en el srcatributo (fuente) de una <script>etiqueta:

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

Los scripts externos no pueden contener <script>etiquetas.


Ventajas del JavaScript externo

Colocar scripts en archivos externos tiene algunas ventajas:

  • Separa HTML y código
  • Hace que HTML y JavaScript sean más fáciles de leer y mantener.
  • Los archivos JavaScript almacenados en caché pueden acelerar la carga de las páginas

Para agregar varios archivos de script a una página, utilice varias etiquetas de script:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referencias externas

Se puede hacer referencia a un script externo de tres maneras diferentes:

  • Con una URL completa (una dirección web completa)
  • Con una ruta de archivo (como /js/)
  • Sin ningún camino

Este ejemplo utiliza una URL completa para vincular a myScript.js:

<script src="https://www.w3schools.com/js/myScript.js"></script>

Este ejemplo utiliza una ruta de archivo para vincularse a myScript.js:

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

Este ejemplo no utiliza ninguna ruta para vincularse a myScript.js:

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

Posibilidades de visualización de JavaScript

JavaScript puede "mostrar" datos de diferentes maneras:

  • Escribir en un elemento HTML, utilizando innerHTML.
  • Escribir en la salida HTML usando document.write().
  • El uso de document.write() después de cargar un documento HTML eliminará todo el HTML existente .
  • Escribiendo en un cuadro de alerta, usando window.alert().
  • Escribiendo en la consola del navegador, usando console.log().

Uso de innerHTML

Para acceder a un elemento HTML, JavaScript puede utilizar el document.getElementById(id)método .

El idatributo define el elemento HTML. La innerHTML propiedad define el contenido HTML:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Usando window.alert()

Puede utilizar un cuadro de alerta para mostrar datos:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

Usando console.log()

Para fines de depuración, puede llamar al console.log()método en el navegador para mostrar datos.

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>


Comentarios

Publicar un comentario

Entradas populares de este blog

1-Teclas

Imagen
En este codigo implementamos tres funciones para capturar los eventos del teclado. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Ejemplo de Keypress.js </title> </head> <body>     <script src = "https://cdn.jsdelivr.net/npm/keypress.js@2.1.5/keypress.js" ></script>     <script>         // Configuración del teclado         var configTeclado = { prevent_repeat : true };         var eventoTeclado = new window . keypress . Listener ( this , configTeclado );         // Funciones asociadas a las combinaciones         function pulsaA () {             console . log ( 'has pulsado a' );         } ...
Leer más

2-canvas

Imagen
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la ...
Leer más

3-1-Personajes

Imagen
 El código está diseñado para dibujar personajes en un lienzo ( canvas ), pero actualmente no tienen movimiento porque no se está actualizando la posición de los personajes en cada frame. Solución: Hacer que los personajes se muevan Para que los personajes se muevan, debes modificar sus coordenadas ( x o y ) dentro de la función principal() en cada iteración del bucle que setInterval ejecuta. Esto se logra simplemente alterando las propiedades this.x o this.y de los objetos creados con la función personaje . <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>             </head> <body onload = " inicializa ()" >     <canvas id = "canvas...
Leer más