JavaScript es una de las tecnologías web más emocionantes, y cuando comiences a ser bueno en su uso, tus sitios web entrarán en una nueva dimensión de energía y creatividad.
Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentirse cómodo con HTML y CSS. Deberás comenzar poco a poco y continuar trabajando en pasos pequeños y consistentes. Para comenzar, mostraremos cómo añadir JavaScript básico a tu página.
Puedes añadir el código a tu HTML de 3 formas, exactamente iguales a las de CSS.
1. En Línea (directamente en un elemento):
Al igual que la capacidad de colocarlo directamente estilo sobre el elemento, es absolutamente desaconsejado, limitante y condena la escalabilidad de tu proyecto.
2. Dentro de etiquetas <script>:
Creas una etiqueta script con el atributo "type" con el valor "text/javascript" y dentro colocas el código a ejecutar, además necesitas conocer esta forma para poder aplicar la primera opción, pues es absolutamente ineficiente escribir una función entera dentro de un elemento HTML.
Por tal motivo, si se desea emplear la opción número 1, lo correcto seria activar una función o evento especial que se encuentre definida en otra sección del código.
3. Desde una Fuente externa (recomendado):
Creas una etiqueta script pero esta vez con el atributo "src" dentro colocas la dirección de el archivo que deseas incrustar en tu página, la misma se aconseja que se encuentre justo antes del cierre de la etiqueta <body>, para tratar de garantizar que se hayan cargado todos los elementos con los cuales el script va a trabajar, no obstante el script puede ser insertado incluso en la etiqueta <head>, suponiendo que no cumple ninguna función de modificación en los elementos HTML presentes en la página.
Esto, al igual que con CSS, te va a permitir controlar en instancias separadas los aspectos de tu sitio wew.
Conceptos Básicos Esenciales
Una vez enlazado nuestro archivo JavaScript a nuestro proyecto, y antes de comenzar a escribir en dicho lenguaje, debemos conocer ciertos conceptos que utilizaremos a lo largo de nuestro aprendizaje de esta tecnología.
Variable:
Las Variables son contenedores en los que puedes almacenar valores. Primero debes declarar la variable con la palabra clave "var" (menos recomendado) o "let", seguida del nombre que le quieras dar. Se recomienda más el uso de "let" que de "var":
let nombreDeLaVariable;
// Tras declarar una variable, puedes asignarle un valor:
nombreDeLaVariable = "Bob";
// Puedes hacer las dos cosas en la misma línea si lo necesitas:
let nombreDeLaVariable = "Bob";
// Puedes obtener el valor de la variable llamándola por su nombre:
nombreDeLaVariable;
// Después de haberle dado un valor a la variable, puedes volver a cambiarlo:
let nombreDeLaVariable = "Bob";
nombreDeLaVariable = "Steve";
Tipos de Datos:
- String, Esto es una secuencia de texto conocida como cadena. Para indicar que la variable es una cadena, debes escribirlo entre comillas..
- Number, Esto es un número. Los números no tienen comillas.
- Boolean, Tienen valor verdadero/falso. true/false son palabras especiales en JS, y no necesitan comillas.
- Array, Una estructura que te permite almacenar varios valores en una sola referencia.
- Object, Básicamente cualquier cosa. Todo en JavaScript es un objeto y puede ser almacenado en una variable. Mantén esto en mente mientras aprendes
// String
let miVariable = 'Bob';
// Number
let miVariable = 10;
// Boolean
let miVariable = true;
// Array
let miVariable = [1,'Bob','Steve',10];
//Llama a cada miembro del array así: miVariable[0], miVariable[1], etc.
// Object
let miVariable = document.querySelector('h1');
//Todos los ejemplos anteriores también.
Notas Importantes:
- Todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí donde termina la declaración. Si no los incluyes puedes obtener resultados inesperados.
- Puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones.
+ Deben empezar con una letra, underscore (_) o signo de dolar ($).
+ No pueden contener espacios.
+ No pueden ser iguales a palabras reservadas como "if", "var" o "let".
- JavaScript distingue entre mayúsculas y minúsculas. miVariable es una variable distinta a mivariable.
Operadores:
Un operador es básicamente un símbolo matemático que puede actuar sobre dos valores (o variables) y producir un resultado. A continuación expondremos los operadores más simples:
- Suma/concatena (+), Se usa para sumar dos números, o juntar dos cadenas en una.
- Resta, multiplicación, división (-, *, /),Estos hacen lo que esperarías que hicieran en las matemáticas básicas.
- Operador de asignación (=), Los has visto anteriormente: asigna un valor a una variable.
- Igualdad/Comparativo (==, ===), Comprueba si dos valores son iguales entre sí, y devuelve un valor de true/false (booleano).
- Negación, distinto (!, !=, !==), En ocasiones utilizado con el operador de identidad, la negación es en JS el equivalente al operador lógico NOT, es decir, cambia true por false y viceversa.
Condicionales:
Las condicionales son estructuras de código que permiten comprobar si una expresión devuelve true o no, y después ejecuta un código diferente dependiendo del resultado. La forma de condicional más común es la llamada if... else. Entonces, por ejemplo:
let helado = "chocolate";
if (helado === "chocolate") {
alert("¡Sí, amo el helado de chocolate!");
} else {
alert("Awwww, pero mi favorito es el de chocolate...");
}
La expresión dentro de if (... ) es el criterio, y este usa al operador de igualdad (descrito arriba) para comparar la variable helado con la cadena chocolate para ver si las dos son iguales. Si esta comparación devuelve true, el primer bloque de código se ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de código después de la declaración else.
Funciones:
Las funciones son una manera de encapsular una funcionalidad que quieres reutilizar, de manera que puedes llamar esa función con un solo nombre, y no tendrás que escribir el código entero cada vez que la utilices. Ya has visto algunas funciones más arriba, por ejemplo:
let nombreDeLaVariable = document.querySelector("h1");
alert("¡Hola!");
Estas funciones document.querySelector y alert están integradas en el navegador para poder utilizarlas en cualquier momento.
Si ves algo que parece un nombre de variable, pero tiene paréntesis —()— al final, probablemente es una función. Las funciones con frecuencia toman argumentos, que son pedazos de datos que necesitan para hacer su trabajo. Estos se colocan dentro de los paréntesis, y se separan con comas si hay más de uno.
Por ejemplo, la función alert() hace aparecer una ventana emergente dentro de la ventana del navegador, pero necesitas asignarle una cadena como argumento para decirle qué mensaje se debe escribir en la ventana emergente.
Las buenas noticias son que podemos definir nuestras propias funciones. En el siguiente ejemplo escribimos una función simple que toma dos números como argumentos y los multiplica entre sí:
function multiplica(num1, num2) {
let resultado = num1 * num2;
return resultado;
}
La sentencia return le dice al navegador que devuelva la variable resultado fuera de la función, para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones, solo están disponibles dentro de esas funciones. Esto se conoce como «ámbito (scope en inglés) de la variable»:
Eventos:
Para crear una interacción real en tu sitio web, debes usar eventos. Estos son unas estructuras de código que captan lo que sucede en el navegador, y permite que en respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un clic (click event), que se activa al hacer clic sobre algo.
Hay muchas maneras de enlazar un evento a un elemento; aquí hemos seleccionado el elemento <html> y le asignamos a su propiedad onclick una función anónima (función sin nombre) que contiene el código que se ejecutará cuando el evento suceda.
// Considera que ...
document.querySelector("html").onclick = function (){};
// ... es equivalente a ..
let miHTML = document.querySelector("html");
miHTML.onclick = function () {};
// Es solo un modo más corto de escribirlo.
Selectores:
Los selectores son funciones nativas de JavaScript que permiten ubicar un objeto en el Documento HTML, para:
- Ser encapsulado en una variable.
- Leer o modificar sus atributos.
- Modificar al elemento en sí.
- Usarlo como punto de referencia para la búsqueda de otros elementos relativos al objetivo.
Existen muchos selectores para poder exponerlos todos aquí, Pero debes conocer fundamentalmente que existen selectores de objetos (selector), y selectores de los atributos posibles del objeto (métodos). Por Ejemplo:
// Esto es un selector que busca al elemento <input> en el documento
let input = document.querySelector("input");
// Este Método busca el valor del objeto input
let value = input.value;
Dentro de los selectores podemos destacar los siguientes:
Selectores Viejos, que solo pueden ubicar a un único tipo de elemento, y pueden ser usados únicamente en la interfaz "document."
- getElementById(), Ubica elementos por su ID.
- getElementsByClassName(), Ubica varios elementos por su atributo "class", y por lo tanto devuelve un arreglo (array) de objetos
- getElementsByName(), Ubica varios elementos por su atributo "name", y por lo tanto devuelve un arreglo (array) de objetos
- getElementsByTagName(), Ubica varios elementos por su etiqueta, y por lo tanto devuelve un arreglo (array) de objetos. OJO: este selector tiene la particularidad de que la etiqueta a buscar deben escribirse en mayúscula.
Selectores Nuevos, que ofrecen una mayor flexibilidad al momento de ubicar a un objetivo, pues usan selectores CSS para tal labor, por lo cual no están limitados a 1 solo tipo de elemento por búsqueda, y no están supeditados a la interfaz "document." sino que incluso pueden ser usado dentro de elementos ya seleccionados con el propósito de realizar una búsqueda incluso más específica.
- querySelector(), Devuelve el primer objeto encontrado que coincida con el selector empleado.
- querySelectorAll(), Devuelve un arreglo de objetos compuesto por todos los elementos HTML que cumplen con el criterio de búsqueda.
Y esto ha sido todo de momento para el ámbito de normas, sintaxis y semántica de HTML de momento. Para ampliar la información por favor ingrese en el siguiente link: