[GUIA] Javascript lección 1

Buenas a todos!
Hace un tiempo he estado aprendiendo y obteniendo distintos tipos de certificados de JS.
Gracias a esto me he dado cuenta que es un lenguaje muy facil y muy útil, el cual pueden combinar con sus páginas web de Ragnarok, por lo que decidí comenzar a traer guías creadas por mi, muy útiles y fáciles para comenzar a aprender hasta poder quedar a un buen nivel en este lenguaje.


Comencemos...

¿Que es Javascript?
Javascript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

¿Donde y como puedo ocupar este lenguaje de programación?
Javascript tiene distintos usos y funcionalidades, como motores de juegos(Javascript orientado a objetos), páginas webs, entre otros... pero en este caso les enseñaré a ocuparlo principalmente en páginas web.
Lo podemos introducir en una página web utilizando el siguiente comando dentro de las etiquetas body.
<script>
// Aquí irá el codigo de Javascript
</script>
Comencemos a ver como funcionan algunos de los métodos de este lenguaje...

El primer método que veremos es un comando para acceder a ciertos elementos y editarlos desde JS.
Este metodo de JS de HTML es getElementById(), que como hemos mencionado anteriormente, sirve para acceder a elementos de tipo id="" de HTML y cambiarlos utilizando el comando innerHTML = "";
Lo utilizamos de la siguiente manera:

<p id="testing">Este es nuestro parrafo de prueba</p>

<button type="button" onclick='document.getElementById("testing").innerHTML = "Mira como lo hemos transformado!"'>Presiona este botón!</button>
Como vez, hemos creado un parrafo (<p>) con id testing, al cual hemos accedido posterior mente, a través del metodo document.getElementById("testing"), para luego cambiarlo con innerHTML.

Es muy simple, y se puede utilizar con imágenes también, utilizando .src="" en vez de .innerHTML=""


Algo que se ocupa muchas veces en JS son las funciones, que sirven para acceder a métodos sin necesidad de ocupar tantas lineas de script.
Aquí un ejemplo del script anterior convertido a función.

<script>
function myFunction() {
    document.getElementById("testing").innerHTML = "Lo logramos!";
}
</script>

<p id="testing">Cambiemos el parrafo desde una función!</p>
<button type="button" onclick="myFunction()">Inténtalo!</button>


Y para hacerlo aún más interesante...
Podemos ocupar las funciones para poner distintos textos a elección tuya!
Aquí un ejemplo!

<script>
function myFunction(index) {
   document.getElementById("testing").innerHTML = index;
}
</script>

<p id="testing">Cambiemos el parrafo desde una función!</p>
<button type="button" onclick="myFunction("Aquí pon el texto que quieras!")">Inténtalo!</button>

Como ven, ocupamos la misma función, pero agregamos "index".
¿Para que sirve eso?
Al agregar index entre las () de la función, podrás manejarla más completamente y todo lo que añadas dentro de los paréntesis, se añadirá al script a cambio del index que se encuentra entre las {} de la función.

Muchas gracias, no había tenido tiempo de volver a esta comunidad por temas de estudios, entre otros, pero me daré el tiempo de volver y traerles bastantes guías sobre este y otros lenguajes de programación, para que todos los que quieran aprender lo puedan hacer de una manera bien explicada.

Para realizar la guía me estoy basando en otras guías, debido a que soy pésimo organizándome para ver que enseñar primero, pero cualquier duda que tengan se las responderé con gusto.