JavaScript vainilla
- Establecer Vanilla JavaScript en la página web
- Selectores de JavaScript Vanilla
- JavaScript vainilla con matrices
- Agregar, eliminar, alternar y verificar clases en un elemento
- Estilo CSS con Vanilla JavaScript
- Conclusión
JavaScript es el lenguaje más popular para el diseño web con tecnologías HTML y CSS. Este artículo incluye Vanilla JS, que se refiere a JavaScript simple.
En otras palabras, podemos usar JavaScript sin bibliotecas adicionales. Todo el mundo inicializa Vanilla JavaScript como uno de los marcos de trabajo más ligeros.
Podemos aprender JavaScript Vanilla fácilmente. Vanilla JavaScript crea aplicaciones web significativas e impactantes, y los sitios web más famosos actualmente usan Vanilla JS para sus sitios web.
Facebook, Google, YouTube, Yahoo, Wikipedia, LinkedIn, Microsoft, Apple, etc., son sitios web que mencionan el script Vanilla en su página de inicio. Veamos cómo configurar Vanilla JavaScript.
Establecer Vanilla JavaScript en la página web
JavaScript se ejecuta con CSS y HTML. Entonces, para que una función de JavaScript funcione, debe estar dentro de un documento HTML o conectarse con un documento HTML.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
</html>
<body>
<script>
var myName = "Rashmi";
alert(myName);
</script>
</body>
Inserte un <script> en cualquier lugar entre la etiqueta <body>. Además, hay otra forma de agregar un archivo JavaScript a un archivo HTML.
Podemos agregar un archivo fuente de JavaScript dentro de la etiqueta <head> del documento HTML.
<head>
<script src="script.js"></script>
</head>
Agregar la etiqueta <script> con la ruta del archivo JavaScript de origen con la etiqueta src.
Selectores de JavaScript Vanilla
Los selectores se usan para obtener elementos en DOM. Algunos de ellos incluyen getElementById, getElementByClassName, getElementByTagName, etc.
Podemos usar getElementById() para obtener elementos por su id. HTML usa una identificación para cada componente que necesitamos.
Al agregar una función de JavaScript a ese elemento, podemos llamar a ese elemento en el archivo de script con la función getElementById.
Echemos un vistazo a la siguiente instancia.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
<body>
<h3>Hello Vanilla Javascript</h3>
<p id="demo">vanilla javascript</p>
<script>
document.getElementById("demo").innerHTML= 5+6;
console.log('no errors');
</script>
</body>
</html>
Su objetivo principal es crear una identificación y obtenerla llamando a la función getElementById. El id fue creado como un naming demo.
Dentro de un script, llamamos a document.getElementById("demo") para obtener un elemento de demostración por su id.
Entonces, esta función de JavaScript agrega dos números y genera un resultado llamando a su id.
Producción:
JavaScript vainilla con matrices
JavaScript Vanilla ofrece un bucle for para iterar y acceder a valores dentro de los elementos de la lista de nodos y matriz.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
<body>
<h3>My javascript</h3>
<p id="demo">vanilla javascript</p>
<script>
var countries = ["Netherlands","Canada","USA"];
for(var i=0;i<countries.length;i++)
console.log(i)
</script>
</body>
</html>
El código anterior usaba un bucle for para iterar sobre la matriz de cadenas de países.
Dentro del bucle for, declaraba una variable de contador que representaba el valor actual de la matriz. Tiene asignado el valor 0.
El bucle for itera sobre el final de los elementos de la matriz utilizando la palabra clave longitud.
Después de cada iteración, se debe ejecutar i++. Significa que se debe agregar uno al contador después de cada iteración.
Producción:
Agregar, eliminar, alternar y verificar clases en un elemento
Vanilla JavaScript ofrece la API classList, similar a la API de manipulación de clases jQuery. La classList es de solo lectura, pero realiza agregar, eliminar, alternar y comprobar las clases.
<!DOCTYPE html>
<html>
<head>
<title>class list</title>
</head>
<style>
.myStyle {
background-color: cornflowerblue;
padding: 16px;
}
</style>
<body>
<button onclick="addFunc()">Add</button>
<button onclick="removeFunc()">Remove</button>
<button onclick="toggleFunc()">Toggle</button>
<div id="classlist" class="myStyle">
<p>Classlist perform</p>
</div>
<script>
function addFunc() {
const list = document.getElementById("classlist").classList;
list.add("myStyle");
}
function removeFunc() {
const listRemove = document.getElementById("classlist").classList;
listRemove.remove("myStyle");
}
function toggleFunc() {
const listToggle = document.getElementById("classlist").classList;
listToggle.toggle("myStyle");
}
</script>
</body>
</html>
Teniendo en cuenta el código anterior, realiza agregar, eliminar y alternar elementos DOM en el elemento de párrafo <p>Lista de clase realizar</p>. Al hacer clic en el botón, la apariencia de los elementos <p> cambiará.
Dentro de un <script>, hay tres funciones creadas para agregar, eliminar y alternar. La función addFunc() añade un estilo CSS al elemento <p>.
Para ello, podemos asignar una variable a getElementByID para la lista de clases.
Luego, podemos llamar al método add a la variable declarada (list.add()). Agregará un color de fondo y una propiedad de relleno al elemento <p>.
Por lo tanto, removeFunc eliminará las propiedades de estilo del elemento <p>, y toggleFunc activará y desactivará myStyle al hacer clic en el botón alternar. Podemos obtener salidas de la siguiente manera.
Agregar:
Eliminar:
Palanca:
Recuerde, la propiedad classList no admite versiones anteriores de la versión de Internet Explorer 9.
Estilo CSS con Vanilla JavaScript
Usamos el elemento <estilo> para establecer el estilo CSS en elementos HTML. Entonces, Vanilla JavaScript ofrece una versión de Camel case para agregar estilos CSS.
Utilice .style para obtener y establecer el estilo en línea de los elementos HTML. mira el siguiente ejemplo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">Inline style setting with Vanilla Javascript</p>
<script>
const phara = document.getElementById("intro");
// Appling inline styles on element
phara.style.color = "blue";
phara.style.fontSize = "30px";
phara.style.backgroundColor = "yellow";
</script>
</body>
</html>
Este ejemplo establece el estilo en línea usando Vanilla JavaScript agregando la propiedad .style. Podemos obtener la salida de la siguiente manera.
Conclusión
Este artículo analizó algunos de los atributos y métodos de JavaScript Vanilla.
Hay más métodos y funciones en Vanilla JavaScript además de estos. Vanilla JavaScript es más rápido que otros idiomas.
Se recomienda aprender Vanilla JavaScript antes de estudiar el marco JS. Por lo tanto, Vanilla JavaScript es una descripción general de alto nivel para principiantes.
Hay algunas ventajas de usar Vanilla JavaScript. Podemos crear interfaces ricas y acelerar la ejecución y la ejecución en el lado del cliente, por lo tanto, reduciendo la participación del servidor.
Además, las aplicaciones pequeñas no necesitan ningún servidor.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.