Artículo anterior: Curso de JavaScript | Imprimir Hello World en JavaScript
Insertar JavaScript en una página web es muy parecido a insertar cualquier otro contenido HTML. Las etiquetas utilizadas para agregar JavaScript en HTML son <script> y </script>. El código rodeado por las etiquetas <script> y </script> se denomina blog de script.
El atributo ‘tipo’ era el atributo más importante de la etiqueta <script>. Sin embargo, ya no se usa. El navegador entiende que la etiqueta <script> tiene código JavaScript dentro.
<script></script>
Cómo escribir, ejecutar y guardar código
Método 1:
- Cree una extensión de archivo html (.htm) y escriba el código javascript dentro de la etiqueta ‘script’
- luego simplemente cargue el archivo HTML en el navegador
Método 2:
- Cree un archivo javascript separado (.js) con la extensión .js. Escribe tu código en él.
- Ahora vincule este archivo js con el documento HTML usando una etiqueta de script como:
<script src='relative_path_to_file/file_name.js'></script>
- ya sea en el cuerpo o en la cabeza.
Entendamos la estructura del código con la ayuda de un ejemplo simple de javascript donde hará desaparecer un bloque solo con javascript.
Estructura del código:
index.html styles.css script.js
índice.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Button Vanisher</title>
</head>
<body>
<a onclick="toggle('plain')">
<div id="plain">
How many times were you frustrated while looking out for a
good collection of programming/algorithm/interview questions?
What did you expect and what did you get? This portal has
been created to provide well written, well thought and
well-explained solutions for selected questions.
Geeksforgeeks is the one stop solution to all
your coding problems! Join us so that we can shape
your future.
</div>
</a>
</body>
</html>
El código HTML anterior contiene un elemento div simple que está envuelto dentro de una etiqueta de anclaje (enlace) para que cada vez que hagamos clic en el elemento div, el código javascript funcione. Dentro del elemento ‘div’ hay un texto aleatorio. Dentro de la etiqueta del script, vinculamos el archivo javascript guardado como ‘script.js’ con el documento HTML. Además, el archivo CSS también está vinculado.
estilos.css
css
#plain {
border: 2px solid black;
max-width: 200px;
height: 300px;
margin: 0 auto;
display: block;
}
a {
display: block;
}
El código CSS anterior solo apunta a dos elementos ‘a’ y ‘div’ cuyo ID es ‘simple’.
guión.js
javascript
// javascript function to change the content of the
function toggle(id) {
let button = document.getElementById(id);
if (button.style.display == 'block') {
button.style.display = 'none';
} else {
button.style.display = 'block';
}
}
El código Javascript anterior se llama cuando hacemos clic en el botón ‘div’, ya que los hemos vinculado con la etiqueta ‘a’ y también con ‘onclick=’toggle(plain)’. Dentro de la función, estamos pasando el ‘ID’ del elemento ‘div’ y luego accediendo al elemento desde el ‘DOM’ usando el método getElementByID y luego una simple condición if-else que verifica si el ‘div’ es del tipo ‘block ‘ luego cambie la visualización a ninguno, de lo contrario cámbielo a bloque de visualización.
Salida: (Antes de hacer clic en cualquier lugar en div)
Salida: (después de hacer clic en cualquier lugar en div)
Aprendiendo del código
- La página se conoce como documento con el propósito de crear secuencias de comandos en una página web.
- Se puede hacer referencia a las propiedades del documento escribiendo documento seguido de un punto, seguido del nombre de la propiedad. El documento tiene muchas propiedades.
- Después de que el navegador de la etiqueta <script> comience a interpretar el texto como JavaScript hasta que aparezca </script>.
El código anterior es un ejemplo decente de cómo debemos hacer un directorio, cómo vincular diferentes tipos de archivos de código entre sí y cómo escribir código simple pero efectivo.
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Artículo siguiente: Curso de JavaScript | Variables en JavaScript