{"id":22960280,"url":"https://github.com/stringmanolo/tutoriales_espa-ol","last_synced_at":"2026-01-31T23:37:39.986Z","repository":{"id":95119579,"uuid":"286877957","full_name":"StringManolo/Tutoriales_Espa-ol","owner":"StringManolo","description":null,"archived":false,"fork":false,"pushed_at":"2020-08-12T11:21:09.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-12T23:41:56.081Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StringManolo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-12T00:34:45.000Z","updated_at":"2020-08-12T14:29:14.000Z","dependencies_parsed_at":"2023-05-26T19:00:33.513Z","dependency_job_id":null,"html_url":"https://github.com/StringManolo/Tutoriales_Espa-ol","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/StringManolo/Tutoriales_Espa-ol","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StringManolo%2FTutoriales_Espa-ol","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StringManolo%2FTutoriales_Espa-ol/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StringManolo%2FTutoriales_Espa-ol/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StringManolo%2FTutoriales_Espa-ol/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StringManolo","download_url":"https://codeload.github.com/StringManolo/Tutoriales_Espa-ol/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StringManolo%2FTutoriales_Espa-ol/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28960219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T23:03:11.038Z","status":"ssl_error","status_checked_at":"2026-01-31T22:56:44.691Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-14T18:32:08.842Z","updated_at":"2026-01-31T23:37:39.964Z","avatar_url":"https://github.com/StringManolo.png","language":null,"readme":"# Iniciación Javascript\n\n## Indice:\n+ ### 0. Un vistazo superficial.\n+ ### 1. Primeros Pasos.\n+ ### 2. Introducción al DOM. \n\n## Capítulo 0. Un vistazo superficial.  \n  \n\n### Qué es?\n  Es un lenguaje de programación de propósito general. Esto significa que puede usarse en programas para móvil, programas de windows, drones, sistemas aeroespaciales, parquímetros, sistemas de contabilidad... Pero donde cobra mayor trascendencia es en la web. Originalmente en páginas web, pero también en el lado del servidor.\n\n### Para qué sirve?\n  Para hacer cualquier tipo de programa. Sobre todo haciendo funcionar las páginas web, donde html se usa para definir el contenido, css modifica y estiliza la apariencia y javascript se ocupa de \"lo que hace\" la web. Desde mostrar algo al pulsar un botón, hasta descargarse una web entera, obtener algo que nos interesa de ella, almacenarlo, mostrarlo, enviarlo...\n\n### Qué conocimientos necesito?\n  Ninguno. Se usará html mínimo para crear un documento e indicar donde está el código con javascript.\n  \n\n\n## Programación General.\n\n  Javascript y la mayoría de lenguajes de uso actual utilizan varios elementos que suelen ser comunes entre ellos:\n  + Expresiones o sentencias.\n  + Variables.\n  + Operadores.\n  + Condicionales.\n  + Bucles.\n  + Metodos y Funciones.\n  + Arrays.\n  + Objetos.\n\n_Nota_: A continuación un resumen de que es cada cosa. No te preocupes si no lo entiendes todo ahora mismo o es demasiada información nueva o abstracta. Vas a ver ejemplos detallados de su uso que facilitaran asimilar los conceptos. \n\n###### Expresiones o sentencias:\n  Son lineas de código que sirven para expresar una acción o un contenido. Por ejemplo _1 + 3;_ es una expresión que suma dos números. El punto y coma sirve para indicar el final de una expresión. \n\n###### Variables:\n  Son contenedores para guardar algo que vamos a querer utilizar más tarde. Por ejemplo _var resultado = 1 + 3;_ nos almacenará 4 dentro de una variable a la que pusimos de nombre resultado. Hay distintos tipos de datos y contenedores.\n\n###### Operadores: \n  Sirven para realizar operaciones de todo tipo. Tenemos los operadores matemáticos básicos pero también tenemos algunos otros útiles como el menor o igual que _\u003c=_ el de asignación _=_ o el de comparación _==_ entre otros muchos.\n\n###### Condicionales:\n  Sirven para realizar una acción cuando se cumpla la condición que le indiquemos. Ejemplo _if (resultado == 4)_ se cumplirá si la variable resultado es igual a 4. Lo veremos en más detalle.\n\n###### Bucles:\n  Sirven para poder realizar una acción en bucle, es decir, de forma repetida hasta alcanzar el resultado deseado. Ejemplo _while (resultado == 4)_ se repetira en bucle la expresión que le indiquemos entre corchetes mientras la variable resultado sea igual a 4.\n\n###### Metodos y Funciones:\n  Los métodos y las funciones se utilizan para agrupar código designado para una tarea. Por ejemplo podemos agrupar un programa entero que haga la declaración de la renta y otro que mustre los datos de diversas empresas. De esta forma podremos llamar a todo el código para hacer la declaración de la renta de una forma sencilla sin tener que rescribirlo de cero cada vez que queramos hacer la declaración a una persona distinta. Al final nos quedara una función que podremos usar tal que: _hacerDeclaración(\"Paco\");_ _hacerDeclaración(\"Antonio\");_ ... Los métodos son prácticamente iguales.\n\n###### Arrays:\n  Los arrays son contenedores al igual que las variables, pero nos permiten almacenar varios datos y también variables. Ejemplo: _var colores = [\"rojo\", \"verde\", \"azul\"];_\n  Para acceder a ellos usaremos índices que empiezan a contar desde 0. Por ejemplo si quiero mostrar la palabra rojo:\n  _alert(colores[0]);_\n \n\n###### Objetos:\n  Los objetos son agrupaciones de datos o funciones que están relacionados de alguna forma. Por ejemplo podemos hacer un objeto persona que va a tener variables como nombre, altura, edad... Y métodos como hablar, caminar, comer...\n\n\n## Capítulo 1. Primeros Pasos.  \n  \n#### Creando el documento:\n  Antes de empezar a programar en javascript necesitas un documento HTML para indicarle al navegador que vamos a usar javascript:\n```\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript\u003e\n\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nSolo son 3 etiquetas html. Dentro de las etiquetas script vas a escribir el código javascript que quieras. Si quieres utilizar acentos y caracteteres especiales debes añadir las etiquetas head y meta charset. Por lo general puedes usar el ejemplo anterior, o si lo prefieres añadir más datos quedando:\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003ctitle\u003eTítulo de la pestaña\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\nEste texto lo veras en el documento.\n\u003cscript\u003e\n\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nEste código HTML debes escribirlo y guardarlo en un archivo con cualquier editor de texto. Por ejemplo el notepad o bloc de notas de windows. Guárdalo como NombreDeMiDocumento.html \n  \nVamos a trabajar en este archivo que abriremos en el navegador para ver los resultados. De momento no hace nada. Si ponemos 1 + 3; hará la suma, pero no veremos el resultado porque no se lo indicamos. \nExisten multitud de formas de ver los resultados, nosotros veremos la más básica de todas, la función alert. \n\n### Conociendo alert\n\nalert es una función (que ya viene definida en el navegador) que muestra una ventana pequeña en pantalla con el valor que le indiquemos.\n\nVamos a utilizar alert para mostrar el resultado de la suma:\n```\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript\u003e\nalert(1 + 3);\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nAsegúrate de guardar los cambios y abre el archivo con extensión tuArchivo.html en el navegador. Para ello puedes hacer click derecho y seleccionar abrir con ... Ahí deberás elegir Chrome, Mozilla, Edge, Internet Explorer, Safari, Opera... El explorador que tú tengas. Debes ver una ventana que muestre el número 4. Si no es así repite el proceso y asegúrate que todo está correcto.\n\nA parte de realizar operaciones también puedes mostrar texto si lo encierras entre comillas. Ejemplo:\n```\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript\u003e\nalert(\"Bienvenido a mi primer programa con javascript\");\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Trabajando con variables.\n\nTambién puedes guardar el resultado de la operación o el texto en una variable y mostrarlo desde el alert.\n```\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript\u003e\nvar resultado = 4;\nvar saludo = \"bienvenido a mi primer programa\";\nvar nombre = \"Juan\";\nalert(\"Hola\");\nalert(nombre);\nalert(saludo);\nalert(resultado);\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nEs un poco incómodo mostrar 4 alerts distintos y que el usuario necesite pulsar 4 veces en aceptar para leer todos nuestros mensajes. Hay secuencias de caracteres que tienen funcionalldad especial, como \\n que nos permite hacer una **n**ueva línea. Y el operador **+** sirve también para unir texto, no solo para sumar números, asique podemos mostrarlo todo en un solo alert.\n```\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript\u003e\nvar resultado = 4;\nvar saludo = \"bienvenido a mi primer programa\";\nvar nombre = \"Juan\";\nalert(\"Hola \" + nombre + \" \" + saludo + \".\\n\" + \"Ya no necesito utilizar \" + resultado + \" alerts para mostrarte este texto\");\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nPruébalo, verás el siguiente texto:\n```\nHola Juan bienvenido a mi primer programa.\nYa no necesito utilizar 4 alerts para mostrarte este texto.\n```\n\nProbablemente nuestro usuario no se llame Juan. Hay otra función muy similar a alert llamada prompt que da al usuario la posibilidad de escribir algo en la ventana, y a nosotros de obtenerlo.\n\nVamos a hacer un programa que pida el nombre, la edad y le dedique un saludo personalizado.\n\n```\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript\u003e\nvar saludo = \"Hola \";\nvar nombre = prompt(\"Cual es tu nombre?\");\nvar edad = prompt(\"Cuantos años tienes?\");\nalert(saludo + nombre + \" tienes \" + edad + \" años.\");\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Los condicionales.\n\nEsto está genial! Pero a todos los saludamos igual. Vamos a usar los condicionales para personalizar más el saludo:\n__A partir de ahora se asume que sabes que se debe poner el código en el documento entre las etiquetas y se omite por brevedad.__ \n```\nvar nombre = prompt(\"Cual es tu nombre?\");\nvar edad = prompt(\"Cuantos años tienes?\");\n\nif(edad \u003c 18) {\n  var saludo = \"Qué pasa \";\n  var postSaludo = \" qué tal los estudios?\";\n}\n\nif(edad \u003e= 18 \u0026\u0026 edad \u003c 65) {\n  var saludo = \"Hola \";\n  var postSaludo = \" qué tal la familia?\";\n}\n\nif(edad \u003e= 65) {\n  var saludo = \"Adelante \";\n  var postSaludo = \" qué tal está usted?\";\n}\n\nalert(saludo + nombre + postSaludo);\n```\n\nEl condicional if tiene una condición que va entre paréntesis y lo que queramos que pase si se cumple la condición va entre corchetes. También usamos el operador and __\u0026\u0026__ que sirve para añadir más de una condición que se tiene que cumplir.\n\nAhora vamos a hacer un programa que pida una contraseña, si se cumple la condición, es decir si se puso la contraseña correcta mostraremos un texto indicándolo, y en caso contrario mostraremos otro distinto.\n\n```\nvar contraseña = \"abc123\";\nvar introducida = prompt(\"Adivina la contraseña\");\n\nif (contraseña == introducida) {\n  alert(\"Enhorabuena, introduciste la contraseña correcta.\");\n} else {\n  alert(\"Ohh, fallaste!\");\n}\n```\n\nLa palabra clave else sirve para poner código que se ejecute cuando no se cumpla la condición del if.\n\nEste programa tiene un problema, y es que si queremos que el usuario tenga 10 intentos, tendrá que abrir la página 10 veces  o tendremos que pegar 10 veces el código. No parece algo tan malo, pero y si le quisiésemos dar 1000 intentos? Sería una locura copiar y pegar tanto y el archivo ocuparía mucho espacio. Para evitar esto tenemos los bucles.\n\n### Los bucles.\n\nEl bucle while se parece mucho al condicional if, pero en lugar de ejecutarse una vez, lo hace hasta que la condición se cumpla:\n```\nvar contraseña = \"abc123\"\nvar introducida = \"aún no se pidió\";\n\nwhile (contraseña != introducida) {\n  introducida = prompt(\"Adivina la contraseña\");\n}\n```\n\nAquí usamos el operador __desigual a__ en la condición. Es decir mientras la contraseña sea desigual a la introducida, ejecuta el código entre corchetes. Como ves __var__ solo es necesario utilizarlo para crear la variable, después se puede omitir.\n\nOtro bucle de uso muy amplio es el for, que se puede ver de varias formas. Solo vamos a ver la forma clásica que en lugar de utilizar un condicional usa 3 expresiones. Es común su uso para contar o hacer acciones un determinado número de veces:\n```\nfor (var contador = 0; contador \u003c 10; contador += 1) {\n  alert(contador);\n}\n```\n\nComo ves entre paréntesis hay 3 expresiones. La primera es para indicar la variable que se usará de contador. La segunda para indicar que condición se debe cumplir. La tercera para indicar cuanto debe aumentar o disminiur el contador.\n\n### Funciones y métodos.\n\nLas funciones y métodos son de las herramientas más útiles. Hasta ahora usamos alert y prompt, 2 funciones que nos sirven para interactuar con el usuario de forma sencilla. Nosotros haremos una función que nos permita obtener múltiples datos de una persona y la utilizaremos en un bucle en base al número de personas que nos indique el usuario. Es decir, si el usuario quiere darnos los datos de 2 personas, de 8, etc, nosotros tomaremos los datos de todos ellos.\nPrimero vamos a preguntarle al usuario:\n```\nvar miembrosUnidadFamiliar = prompt(\"Con cuantas personas convive en su domicilio?\");\n```\n\nEl siguiente paso sería preguntarle los datos que queremos saber de cada miembro:\n```\nvar nombre = prompt(\"Introduzca el nombre de un miembro de su unidad familiar\");\nvar edad = prompt(\"Dígame la edad de \" + nombre);\nvar sexo = prompt(nombre + \" es hombre o mujer?\");\nvar estadoCivil = prompt(nombre + \" está casado/a, soltero/a, viudo/a o divorciado/a\");\n```\n\nAhora podemos meter todas estas preguntas en una sola función. Y de paso hacemos que la función nos retorne todo organizado:\n```\nfunction obtenerDatos() {\n  var nombre = prompt(\"Introduzca el nombre de un miembro de su unidad familiar\");\n  var edad = prompt(\"Dígame la edad de \" + nombre);\n  var sexo = prompt(nombre + \" es hombre o mujer?\");\n  var estadoCivil = prompt(nombre + \" está casado/a, soltero/a, viudo/a o divorciado/a\");\n\n  return \"Nombre:\" + nombre + \"\\nEdad:\" + edad + \"\\nSexo:\" + sexo + \"\\nEstado Civil:\" + estadoCivil;\n}\n```\n\nYa tenemos definido lo que hace. Ahora podemos usarla siempre que queramos de la misma forma que un prompt. Solo nos falta el bucle para acabar el programa, quedando tal que:\n```\nvar miembrosUnidadFamiliar = prompt(\"Con cuantas personas convive en su domicilio?\");\n\nfor (var contador = 0; contador \u003c miembrosUnidadFamiliar; ++contador) {\n  var datosDeFamiliar = obtenerDatos();\n  alert(datosDeFamiliar);\n}\n\n\nfunction obtenerDatos() {\n  var nombre = prompt(\"Introduzca el nombre de un miembro de su unidad familiar\");\n  var edad = prompt(\"Dígame la edad de \" + nombre);\n  var sexo = prompt(nombre + \" es hombre o mujer?\");\n  var estadoCivil = prompt(nombre + \" está casado/a, soltero/a, viudo/a o divorciado/a\");\n\n  return \"Nombre:\" + nombre + \"\\nEdad:\" + edad + \"\\nSexo:\" + sexo + \"\\nEstado Civil:\" + estadoCivil;\n}\n```\n\nA lo largo del tiempo podríamos hacer funciones y almacenarlas en un archivo para poder utilizarlas sin tener que crearlas de nuevo de la misma forma que prompt y alert.\n\n\n### Arrays.\n\n  En lugar de retornar la cadena de texto, nos puede ser de interes separar los datos para acceder a ellos de forma individual:\n```\nvar datosDeFamiliar = [nombre, edad, sexo, estadoCivil];\n```\n\nAsí nos es posible tener todos los datos en un solo lugar y a la vez poder acceder a ellos individualmente:\n```\nalert(datosDeFamiliar);\nalert(\"Hola \" + datosDeFamiliar[0] + \" estás \" + datosDeFamiliar[3] + \" eres \" + datosDeFamiliar[2] + \" y tienes \" + datosDeFamiliar[1] + \" años.\");\n```\n\n### Métodos.\n\nQué pasa si queremos mostrar solo la inicial del nombre? Para ello javascript al igual que con alert y prompt, nos da un método llamado _substr_ cuya finalidad es a partir de un texto formar otro. Por ejemplo a partir del nombre Paco podremos obtener la P. Los métodos tienen una diferencia con las funciones, y es que estos son específicos de un objeto. Esto significa que no podemos crear un subtexto de un número, porque como es obvio un número no es un texto. Como ya vimos en ejemplos anteriores, el texto va entre comillas, mientras que los números no.\nVeamos un ejemplo del método substr:\n```\nvar nombre = \"paco\";\nvar inicial = nombre.substr(0, 1);\nalert(inicial);\n```\n\nEn este caso substr acepta 2 números separados por comas. El primero nos permite seleccionar la posición desde la que empezar a obtener caracteres. El segundo número nos permite indicar cuantos caracteres vamos a obtener a partir de la posición que indicamos. En el ejemplo a partir de la letra 0, obtendremos 1 letra. Es decir de _paco_ obtendremos la _p_. Si quisiesemos obtener _ac_ haríamos _var letrasCentrales = nombre.substr(1, 2);_ es decir, desde el caracter _a_ obtenemos 2 letras. \n\nHay muchos métodos predefinidos en javascript y se pueden encadenar. Por ejemplo si queremos mostrar la inicial de un nombre en mayúsculas podremos usar _substr(0, 1)_ y _toUpperCase()_ ejemplo:\n```\nvar nombre = prompt(\"Cómo te llamas?\"):\nvar inicial = nombre.substr(0, 1);\nvar inicialEnMayuscula = inicial.toUpperCase();\nalert(inicialEnMayuscula);\n```\n\nTambién podemos encadenar métodos en una sola línea:\n```\nvar nombre = prompt(\"Cómo te llamas?\");\nvar inicialEnMayuscula = nombre.substr(0, 1).toUpperCase();\nalert(inicialEnMayuscula);\n```\n\nEsto es posible debido a que javascript va evaluando las expresiones de izquierda a derecha remplazándolas por su resultado. Qué signifca esto? Significa que podemos simplificar mucho el código agrupando la funcionalidad en una sola linea, de tal forma que el ejemplo anterior también lo podemos hacer tal que:\n```\nalert(prompt(\"Cómo te llamas?\").substr(0, 1).toUpperCase());\n```\n\nEl navegador hará lo siguiente:\n  Hay paréntesis? Entonces evaluo lo que hay dentro:\n\n  Encuentro _prompt(\"Cómo te llamas?\")_ ejecuto la función y la remplazo por el resultado quedando el código tal que:\n  _alert(\"paco\".substr(0, 1).toUpperCase());_\n\n  Hay paréntesis? Entonces evaluo lo que hay dentro:\n\n  Encuentro _\"paco\".substr(0, 1)_ ejecuto el método y lo remplazo por el resultado quedando el código tal que:\n  _alert(\"p\".toUpperCase());_\n\n  Hay paréntesis? Entonces evaluo lo que hay dentro:\n\n  Encuentro _\"p\".toUpperCase()_ ejecuto el método y lo remplazo por el resultado quedando el código tal que:\n  _alert(\"P\");_\n\n  Como se puede apreciar ya no quedan expresiones que evaluar, asique el navegador pasará a hacer alert de \"P\".\n\n\n### Objetos.\n\n  Todo lo que hemos usado hasta ahora son objetos. Un objeto no es más que un contenedor en el que podemos guardar variables y funciones. Cuando una variable o una función pertenece a un objeto, nos referiremos a ellas como propiedades y métodos.\nLos objetos de momento los veremos como una forma sencilla de agrupar variables y funciones que tengan que ver entre sí. Para crear un objeto usaremos:\n```\nvar vehiculo = {};\n```\n\nPara añadir una variable(propiedad) usaramos el operador _._ que ya vimos:\n```\nvehiculo.velocidadActual = 0;\n```\n\nPara añadir una función(método) también usaremos el mismo operador, pero asignaremos una función sin nombre:\n```\nvehiculo.acelerar = function() {\n  vehiculo.velocidadActual += 1;\n};\n```\n  \n\n## Capítulo 2. Introducción al DOM.  \n  \nEl Document Object Model es un objeto de javascript incluido en los navegadores. Este objeto _document_ nos permite crear elementos como texto, imágenes, botones, hypervínculos, añadirlos al documento actual, obtenerlos, eliminarlos, escuchar eventos...  \n  \nPrincipalmente hay 2 formas de obtener un elemento. Definiéndolo con código html y obteniendolo usando un selector. O bien creándolo directamente desde el código javascript.  \n  \nPrimero un ejemplo de un enlace definido en html:\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003ctitle\u003eEjemplo de un hypervínculo\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003ca href=\"https://google.com/search?q=Tutoriales de HTML\"\u003eTutoriales de HTML en Google\u003c/a\u003e\n\u003cscript\u003e\n\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nEl resultado es un link tal que [Tutoriales de HTML en Google](https://google.com/search?q=Tutoriales%20de%20HTML). Es un elemento sencillo que nos permite ir a la página o elemento de la página deseado.\n  \nDentro del atributo href pondremos el destino. Entre las etiquetas pondremos el texto que se va a mostrar.\n  \nComo puedes apreciar el elemento _\u003ca\u003e_  está entre las etiquetas body.\nTodo lo que pongas entre estas etiquetas excluyendo las etiquetas script y su contenido, será visible para el usuario.\n\nEstos elementos podremos obtenerlos en javascript para modificarlos y demás. Para facilitar su obtención, le vamos añadir el atributo _id_ para poder identificarlo desde javascript:\n```\n...\n\u003cbody\u003e\n\u003ca id=\"vinculoAGoogle1\" href=\"https://google.com/search?q=Tutoriales de HTML\"\u003eTutoriales de HTML en Google\u003c/a\u003e\n\u003cscript\u003e\n\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nAhora podremos obtenerlo utilizando el _id_ de 2 formas. Con el método obtener elemento por id:\n```\nvar vinculo = document.getElementById(\"vinculoAGoogle1\");\n```\n\nO mediante una selección por consulta:\n```\nvar vinculo = document.querySelector(\"#vinculoAGoogle1\");\n```\n\nYo recomiendo la segunda forma porque permite seleccionar también por el nombre de la etiqueta(omitiendo el _#_), por clase(usando un _._), y por más atributos y selectores simplente cambiando el texto entre paréntesis. Por simplificar no es prioritario conocerlos todos ahora.\n\n\nLa otra forma de crear un elemento es hacerlo desde javascript y añadirlo entre las etiquetas body:\n```\n...\n\u003cscript\u003e\nvar vinculo = document.createElement(\"a\");\nvinculo.href = \"https://google.com/search?q=Tutoriales de HTML\";\nvinculo.innerText = \"Tutoriales de HTML en Google\"\n\nvar body = document.querySelector(\"body\");\nbody.appendChild(vinculo);\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nLo habitual es crear los elementos que conocemos de antemano con HTML y los que pueden variar o solo van a existir en casos remotos con javascript.\n\nLos elementos tienen múltiples atributos que podemos editar o leer desde javascript. Uno de los más interesantes a la hora de inspeccionar los elementos es outerHTML.\n\nPor ejemplo podremos ver como queda el body tras añadir el elemento creado desde javascript:\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003ctitle\u003eEjemplo de outterHTML\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cscript\u003e\nvar vinculo = document.createElement(\"a\");\nvinculo.href = \"https://google.com/search?q=Tutoriales de HTML\";\nvinculo.innerText = \"Tutoriales de HTML en Google\";\n\nvar body = document.querySelector(\"body\");\nbody.appendChild(vinculo);\n\nalert(body.outerHTML);\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nTambién hay eventos como click, load, error, ....\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstringmanolo%2Ftutoriales_espa-ol","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstringmanolo%2Ftutoriales_espa-ol","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstringmanolo%2Ftutoriales_espa-ol/lists"}