{"id":7278,"date":"2018-08-20T13:56:48","date_gmt":"2018-08-20T13:56:48","guid":{"rendered":"https:\/\/blog.hostinger.io\/es-tutoriales\/?p=7278"},"modified":"2025-03-14T03:10:17","modified_gmt":"2025-03-14T02:10:17","slug":"que-es-javascript-introduccion-basica","status":"publish","type":"post","link":"\/es\/tutoriales\/que-es-javascript-introduccion-basica","title":{"rendered":"\u00bfQu\u00e9 es JavaScript? Introducci\u00f3n b\u00e1sica a JS para principiantes"},"content":{"rendered":"<p>JavaScript es un lenguaje de programaci&oacute;n ligero que los desarrolladores web suelen utilizar para crear interacciones m&aacute;s din&aacute;micas al desarrollar p&aacute;ginas web, aplicaciones, servidores e incluso juegos.<\/p><p>Los desarrolladores suelen utilizar JavaScript junto con HTML y CSS. El lenguaje de programaci&oacute;n funciona bien con CSS a la hora de dar formato a los elementos HTML. Sin embargo, JavaScript adem&aacute;s permite la interacci&oacute;n con el usuario, algo que CSS no puede hacer por s&iacute; mismo.<\/p><p>Las implementaciones de JavaScript en la web, las aplicaciones m&oacute;viles y el desarrollo de juegos hacen que valga la pena aprender este lenguaje de programaci&oacute;n. Puedes hacerlo a trav&eacute;s de plataformas de aprendizaje como BitDegree o explorando plantillas y aplicaciones gratuitas de JavaScript en plataformas de alojamiento de c&oacute;digo como GitHub.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/ES-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Descarga Glosario Completo de Desarrollo Web<\/a><br><\/p><p>\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">&iquest;Qu&eacute; es JavaScript?<\/h2>\n                    <p>JavaScript es un lenguaje de programaci&oacute;n que sirve para crear contenidos din&aacute;micos en las p&aacute;ginas web. Crea elementos para mejorar la interacci&oacute;n de los visitantes, como men&uacute;s desplegables, gr&aacute;ficos animados y colores de fondo din&aacute;micos.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-que-es-javascript-video\">&iquest;Qu&eacute; es JavaScript? &ndash; Video<\/h2><p>Si deseas profundizar en la definici&oacute;n de JavaScript, mira nuestro tutorial. <\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"&iquest;Qu&eacute; es JavaScript? | Explicado\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/04T_Zj0PBOc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-spain.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Suscribirse \u00a1Para m\u00e1s v\u00eddeos educativos!<\/span>\n          <span class=\"channel-name\">Academia de Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCYmKCu1yo_L0fqKe3U_oMnw?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>Suscribirse<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-para-que-se-utiliza-javascript\">&iquest;Para qu&eacute; se utiliza JavaScript?<\/h2><p>Las versiones iniciales del lenguaje de programaci&oacute;n eran s&oacute;lo para uso interno. Despu&eacute;s de que Netscape lo enviara a <a href=\"https:\/\/www.ecma-international.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">ECMA International<\/a> como especificaci&oacute;n est&aacute;ndar para los navegadores web, JavaScript dio lugar al lanzamiento de ECMAScript.<\/p><p>Se trataba de un lenguaje de scripting de uso general para garantizar la interoperabilidad de las p&aacute;ginas web en diferentes navegadores y dispositivos.<\/p><p>Desde entonces, JavaScript ha seguido creciendo junto a nuevos navegadores como <strong>Mozilla Firefox<\/strong> y <strong>Google Chrome<\/strong>. Este &uacute;ltimo incluso empez&oacute; a desarrollar el primer motor moderno de JavaScript, llamado <strong>V8<\/strong>, que compila el bytecode en c&oacute;digo m&aacute;quina nativo.<\/p><p>Hoy en d&iacute;a, JavaScript cuenta con multitud de frameworks y librer&iacute;as para simplificar proyectos complejos, como <a href=\"\/es\/tutoriales\/que-es-angular\">AngularJS<\/a>, <a href=\"\/es\/tutoriales\/que-es-jquery\">jQuery<\/a> y <a href=\"\/es\/tutoriales\/que-es-react\">ReactJS<\/a>.<\/p><p>Aunque originalmente se ejecutaba en el lado del cliente, la implementaci&oacute;n de JavaScript se ha extendido al lado del servidor tras el desarrollo de <strong>Node.js<\/strong>, un entorno de servidor multiplataforma construido sobre el motor V8 de JavaScript de Google Chrome.<\/p><p>Si bien es cierto que se dirige principalmente a los programas basados en la web, las caracter&iacute;sticas de programaci&oacute;n de JavaScript tienen otras implementaciones en diferentes &aacute;reas. A continuaci&oacute;n se detallan varios usos b&aacute;sicos de JavaScript.<\/p><h3 class=\"wp-block-heading\">1. Aplicaciones web y m&oacute;viles<\/h3><p>El desarrollo de frameworks de JavaScript, que consisten en librer&iacute;as de c&oacute;digo JavaScript, permite a los desarrolladores utilizar c&oacute;digo JavaScript preescrito en sus proyectos. Les ahorra tiempo y esfuerzo de tener que codificar las caracter&iacute;sticas de programaci&oacute;n desde cero.<\/p><p>Cada marco de trabajo de JavaScript tiene caracter&iacute;sticas que pretenden simplificar el proceso de desarrollo y depuraci&oacute;n.<\/p><p>Por ejemplo, los frameworks de JavaScript front-end como jQuery y ReactJS mejoran la eficiencia del dise&ntilde;o. Permiten a los desarrolladores reutilizar y actualizar los componentes del c&oacute;digo sin que se vean afectados unos por otros, en cuanto a funci&oacute;n o valor.<\/p><p>Por su parte, los frameworks de desarrollo de aplicaciones m&oacute;viles como <a href=\"https:\/\/cordova.apache.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cordova<\/a> permiten crear aplicaciones nativas o h&iacute;bridas.<\/p><p>La implementaci&oacute;n de c&oacute;digo JavaScript en Node.js tambi&eacute;n juega un papel importante en el desarrollo web. Node.js puede reducir el tiempo de respuesta del servidor gracias a su naturaleza single-threaded y a su arquitectura no bloqueante y omitir los retrasos.<\/p><p>Node.js tambi&eacute;n es lo suficientemente ligero como para servir de herramienta escalable para microservicios, permitiendo desarrollar una &uacute;nica app compuesta por peque&ntilde;os servicios con procesos individuales.<\/p><h3 class=\"wp-block-heading\">2. Construcci&oacute;n de servidores web y aplicaciones de servidor<\/h3><p>A trav&eacute;s de Node.js, JavaScript permite a los desarrolladores construir servidores web e infraestructura de back-end, ahorrando tiempo y esfuerzo.<\/p><p>El m&oacute;dulo HTTP incorporado te permite desarrollar un servidor HTTP b&aacute;sico que muestra texto sin formato cuando los usuarios acceden a una p&aacute;gina web. Puedes utilizar el servidor web propio de Node.js, <a href=\"https:\/\/node-os.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node-OS<\/a>, o servidores de terceros como Microsoft Internet Information Services (IIS) y <a href=\"https:\/\/httpd.apache.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apache<\/a> para gestionar las peticiones HTTP.<\/p><p>Ten en cuenta que Node-OS funciona mejor en los sistemas operativos Linux ya que est&aacute; construido sobre el <a href=\"https:\/\/www.redhat.com\/es\/topics\/linux\/what-is-the-linux-kernel\" target=\"_blank\" rel=\"noreferrer noopener\">kernel de Linux<\/a>.<\/p><h3 class=\"wp-block-heading\">3. Comportamiento interactivo en los sitios web<\/h3><p>Una de las funciones principales de JavaScript es a&ntilde;adir dinamismo a las p&aacute;ginas web. Esto incluye mostrar animaciones, modificar la visibilidad del texto y crear men&uacute;s desplegables.<\/p><p>Aunque se puede usar s&oacute;lo c&oacute;digo HTML y CSS para construir una p&aacute;gina web, &eacute;sta s&oacute;lo tendr&aacute; una visualizaci&oacute;n est&aacute;tica. Con JavaScript, un usuario puede interactuar con las p&aacute;ginas web y tener una mejor experiencia de navegaci&oacute;n.<\/p><p>Adem&aacute;s, JavaScript permite cambiar el contenido y los valores de los atributos de HTML sin tener que recargar primero la p&aacute;gina web. Esto se debe a que JavaScript admite los siguientes tipos de datos:<\/p><ul class=\"wp-block-list\">\n<li><strong>String<\/strong>: consiste en datos textuales escritos entre comillas. Por ejemplo, &lsquo;<strong>Hola mundo<\/strong>&lsquo; y &lsquo;<strong>Mostrar texto &lsquo;Hola mundo&rsquo;<\/strong>&lsquo;.<\/li>\n\n\n\n<li><strong>Number<\/strong>: abarca n&uacute;meros enteros y de punto flotante entre (2^53 &ndash; 1) y -(2^53 &ndash; 1).<\/li>\n\n\n\n<li><strong>Boolean<\/strong>: un tipo de datos l&oacute;gico con valores <strong>verdaderos<\/strong> y <strong>falsos<\/strong>.<\/li>\n\n\n\n<li><strong>BigInt<\/strong>: representa datos enteros de longitud arbitraria.<\/li>\n\n\n\n<li><strong>Null<\/strong>: contiene un valor nulo.<\/li>\n\n\n\n<li><strong>Undefined<\/strong>: incluye variables declaradas pero no asignadas.<\/li>\n\n\n\n<li><strong>Symbol<\/strong>: proporciona identificadores &uacute;nicos para los objetos.<\/li>\n\n\n\n<li><strong>Object<\/strong>: para estructuras de datos complejas escritas con llaves. Por ejemplo, <strong>{item: &lsquo;Libro&rsquo;, informaci&oacute;n: &lsquo;biograf&iacute;a&rsquo;}<\/strong>.<\/li>\n<\/ul><p>Los tipos de datos primitivos, que consisten en todos los tipos de datos excepto <strong>object<\/strong>, s&oacute;lo pueden almacenar un &uacute;nico dato. En cambio, el tipo de datos <strong>object<\/strong> puede contener una colecci&oacute;n de valores.<\/p><p>Con JavaScript, tambi&eacute;n se puede mejorar la experiencia de navegaci&oacute;n de los usuarios utilizando cookies. La creaci&oacute;n, lectura y eliminaci&oacute;n de cookies en JavaScript requiere la propiedad document.cookie, que permite obtener y establecer los valores de las cookies.<\/p><h3 class=\"wp-block-heading\">4. Desarrollo de juegos<\/h3><p>JavaScript puede ayudarte a crear un juego si se utiliza con HTML5 y una interfaz de programaci&oacute;n de aplicaciones (API) como <a href=\"https:\/\/get.webgl.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebGL<\/a>. Hay un mont&oacute;n de motores de juegos basados en JavaScript como <a href=\"https:\/\/phaser.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Phaser<\/a>, <a href=\"https:\/\/docs.gdevelop.io\/GDJS%20Runtime%20Documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">GDevelop<\/a> y Kiwi.js para la representaci&oacute;n de gr&aacute;ficos, la reutilizaci&oacute;n de c&oacute;digo y la creaci&oacute;n de aplicaciones multiplataforma.<\/p><p>Algunos de los juegos realizados con motores de juego JavaScript son <strong>Angry Birds<\/strong>, <strong>The Wizard<\/strong> y <strong>2048<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/angry-birds.png\/public\" alt=\"Ejemplo de juego hecho con JavaScript, Angry Birds\" class=\"wp-image-18910\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/angry-birds.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/angry-birds.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/angry-birds.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/angry-birds.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/angry-birds.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-por-que-es-bueno-javascript\">&iquest;Por qu&eacute; es bueno JavaScript?<\/h2><p>JavaScript tiene una serie de ventajas que lo convierten en una opci&oacute;n mejor que sus competidores. A continuaci&oacute;n, presentamos algunas de las ventajas de utilizar JavaScript:<\/p><ul class=\"wp-block-list\">\n<li><strong>Simplicidad<\/strong>: el hecho de tener una estructura sencilla hace que JavaScript sea m&aacute;s f&aacute;cil de aprender e implementar y tambi&eacute;n se ejecuta m&aacute;s r&aacute;pido que otros lenguajes. Los errores tambi&eacute;n son f&aacute;ciles de detectar y corregir.<\/li>\n\n\n\n<li><strong>Velocidad<\/strong>: JavaScript ejecuta los scripts directamente en el navegador web sin necesidad de conectarse primero a un servidor ni de utilizar un compilador. Adem&aacute;s, la mayor&iacute;a de los principales navegadores permiten que JavaScript compile el c&oacute;digo durante la ejecuci&oacute;n del programa.<\/li>\n\n\n\n<li><strong>Versatilidad<\/strong>: JavaScript es compatible con otros lenguajes como PHP, Perl y Java. Tambi&eacute;n hace que la ciencia de datos y el aprendizaje autom&aacute;tico sean accesibles para los desarrolladores.<\/li>\n\n\n\n<li><strong>Popularidad<\/strong>: hay muchos recursos y foros disponibles para ayudar a los principiantes con habilidades t&eacute;cnicas y conocimientos limitados de JavaScript.<\/li>\n\n\n\n<li><strong>Carga del servidor<\/strong>: otra ventaja de operar en el lado del cliente es que JavaScript reduce las solicitudes enviadas al servidor. La validaci&oacute;n de datos puede realizarse a trav&eacute;s del navegador web y las actualizaciones s&oacute;lo se aplican a determinadas secciones de la p&aacute;gina web.<\/li>\n\n\n\n<li><strong>Actualizaciones<\/strong>: el equipo de desarrollo de JavaScript y ECMA International actualizan y crean continuamente nuevos frameworks y librer&iacute;as, lo que garantiza su relevancia dentro del sector.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-cuales-son-las-desventajas\">&iquest;Cu&aacute;les son las desventajas?<\/h2><p>Como cualquier otro lenguaje de programaci&oacute;n, JavaScript tiene varios l&iacute;mites que hay que tener en cuenta. A continuaci&oacute;n se enumeran algunas de las desventajas de utilizar JavaScript:<\/p><ul class=\"wp-block-list\">\n<li><strong>Compatibilidad con los navegadores<\/strong>: los distintos navegadores web interpretan el c&oacute;digo JavaScript de forma diferente, lo que provoca incoherencias. Por lo tanto, debes probar tu script JavaScript en todos los navegadores web populares, incluyendo sus versiones m&aacute;s antiguas, para evitar perjudicar la experiencia del usuario.<\/li>\n\n\n\n<li><strong>Seguridad<\/strong>: el c&oacute;digo JavaScript que se ejecuta en el lado del cliente es vulnerable a la explotaci&oacute;n por parte de usuarios irresponsables.<\/li>\n\n\n\n<li><strong>Depuraci&oacute;n<\/strong>: aunque algunos editores de HTML admiten la depuraci&oacute;n, son menos eficaces que otros editores. Dado que los navegadores no muestran ninguna advertencia sobre los errores, encontrar el problema puede ser un reto.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-como-funciona-javascript-en-tu-sitio-web\">&iquest;C&oacute;mo funciona JavaScript en tu sitio web?<\/h2><p>El JavaScript se incrusta directamente en una p&aacute;gina web o es referenciado a trav&eacute;s de un archivo .js separado. Cuando un usuario visita esa p&aacute;gina web, su navegador ejecuta el script junto con el c&oacute;digo HTML y CSS, creando una p&aacute;gina funcional que se muestra a trav&eacute;s de la pesta&ntilde;a del navegador.<\/p><p>El script se descarga en las m&aacute;quinas de los visitantes y se procesa all&iacute;. Esto difiere de un lenguaje del lado del servidor, en el que el servidor procesa el script antes de enviarlo al navegador. Al encontrar un bloque de c&oacute;digo JavaScript, un navegador web lo procesar&aacute; de arriba a abajo.<\/p><h2 class=\"wp-block-heading\" id=\"h-en-que-se-diferencia-de-otros-lenguajes-de-programacion\">&iquest;En qu&eacute; se diferencia de otros lenguajes de programaci&oacute;n?<\/h2><p>La raz&oacute;n por la cual JavaScript es uno de los lenguajes de programaci&oacute;n m&aacute;s populares de todos es el hecho de que es tan vers&aacute;til. Muchos desarrolladores lo consideran su opci&oacute;n principal a menos que necesiten una funci&oacute;n espec&iacute;fica que JavaScript no proporciona.<\/p><p>Echemos un vistazo a algunos de los lenguajes de programaci&oacute;n m&aacute;s populares:<\/p><p><strong>C#<\/strong> es un lenguaje orientado a objetos para crear aplicaciones que se ejecutan en el ecosistema .NET. Est&aacute; tipado est&aacute;ticamente, lo que significa que sus variables son identificables en el momento de la compilaci&oacute;n. A diferencia de JavaScript, C# dispone de sobrecarga de operadores y conversiones, lo que permite modificar los tipos de datos.<\/p><p><strong>Java<\/strong> es un lenguaje de programaci&oacute;n orientado a objetos dise&ntilde;ado para soportar grandes programas y aplicaciones. A diferencia de JavaScript, Java est&aacute; fuertemente tipado, lo que significa que sus variables deben estar vinculadas a tipos de datos espec&iacute;ficos. Java requiere un compilador &lsquo;just-in-time&rsquo; (JIT) para ejecutar su script.<\/p><p><strong>PHP<\/strong> es un lenguaje del lado del servidor que suele verse en los sistemas de gesti&oacute;n de contenidos basados en PHP, como WordPress. Sus principales objetivos son transferir informaci&oacute;n hacia y desde una base de datos, ensamblar archivos HTML y hacer un seguimiento de las sesiones. A diferencia de JavaScript, PHP puede acceder directamente a las bases de datos y acepta variables tanto en min&uacute;sculas como en may&uacute;sculas.<\/p><p><strong>Ruby<\/strong> es un lenguaje de programaci&oacute;n de prop&oacute;sito general que admite la metaprogramaci&oacute;n, lo que significa que puede analizar y modificar otros programas y a s&iacute; mismo. Su framework m&aacute;s popular, Ruby on Rails, permite crear grandes aplicaciones web de forma rentable y r&aacute;pida. La implementaci&oacute;n de JavaScript en Node.js est&aacute; inspirada en el framework Ruby on Rails.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-agregar-javascript-a-un-sitio-web\">&iquest;C&oacute;mo agregar JavaScript a un sitio web?<\/h2><p>Hay dos formas de a&ntilde;adir c&oacute;digo JavaScript a una p&aacute;gina web HTML: internamente y externamente.<br>El JavaScript interno utiliza la etiqueta <strong>&lt;script&gt;<\/strong> dentro del cuerpo del script HTML para encapsular todo el c&oacute;digo JavaScript.<\/p><p>Este es un ejemplo de JavaScript interno con la etiqueta <strong>&lt;script&gt;<\/strong><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Inline JavaScript&lt;\/title&gt;\n  &lt;script type=\"text\/javascript\"&gt;\n    alert(\"Hola Mundo\");\n  &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Tambi&eacute;n puedes incrustar su script en atributos de eventos HTML, pidiendo al navegador que lo ejecute cuando se dispare un evento. Este tipo de script se llama <strong>JavaScript inline<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button onclick=\"alert('Clic para m&aacute;s detalles')\"&gt;Clic&lt;\/button&gt;<\/pre><p>Por otro lado, el <strong>JavaScript externo<\/strong> implica almacenar el c&oacute;digo en un archivo <strong>.js<\/strong> separado y luego recuperarlo dentro de la p&aacute;gina HTML. Los desarrolladores suelen utilizar este m&eacute;todo cuando trabajan en proyectos de gran magnitud, ya que as&iacute; mantienen el script organizado.<\/p><p>Adem&aacute;s, permite reutilizar el script en varias p&aacute;ginas HTML, algo que los desarrolladores valoran mucho.<\/p><p>Por ejemplo, a&ntilde;adir el siguiente script a una p&aacute;gina HTML permite recuperar un archivo JavaScript externo llamado <strong>script.js<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"script.js\" defer&gt;&lt;\/script&gt;<\/pre><p>Este es un ejemplo de c&oacute;mo referenciar un archivo JavaScript externo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n&lt;title&gt;El tiempo ahora:&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;button type=\"button\" onclick=\"myFunction()\"&gt;Seleccionar&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;script src=\"js\/script.js\"&gt;&lt;\/script&gt;\n&lt;\/html&gt;<\/pre><p>Puedes crear y modificar el c&oacute;digo JavaScript utilizando un editor de texto. Hemos recopilado los <a href=\"\/es\/tutoriales\/mejores-editores-html\">cinco mejores editores de texto<\/a> para acotar tu b&uacute;squeda.<\/p><p>Ten en cuenta que hay dos tipos de editores de texto: los editores de tipo WYSIWYG (what-you-see-what-you-get) y los editores de texto. Un editor de texto WYSIWYG es m&aacute;s apropiado para principiantes, ya que muestra el aspecto de los bloques de c&oacute;digo en una p&aacute;gina.<\/p><p>Por ejemplo, <a href=\"https:\/\/www.tiny.cloud\/\" target=\"_blank\" rel=\"noreferrer noopener\">TinyMCE<\/a> es un popular editor de texto WYSIWYG utilizado en WordPress.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/tinymce.png\/public\" alt=\"P&aacute;gina web del editor de texto TinyMCE\" class=\"wp-image-18917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/tinymce.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/tinymce.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/tinymce.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/tinymce.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Por otro lado, un editor de texto ofrece m&aacute;s libertad a la hora de personalizar el c&oacute;digo, pero requiere conocimientos de HTML para su manejo. Algunos de los editores de texto m&aacute;s populares son <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sublime Text<\/a>, <a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atom<\/a> y <a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Notepad++<\/a>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"484\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/sublime-text.png\/public\" alt=\"P&aacute;gina de inicio de Sublime Text\" class=\"wp-image-18918\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/sublime-text.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/sublime-text.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/sublime-text.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/sublime-text.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/05\/sublime-text.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Para obtener informaci&oacute;n m&aacute;s detallada, consulta nuestro tutorial sobre <a href=\"\/es\/tutoriales\/insertar-javascript-en-html\/\">c&oacute;mo insertar JavaScript<\/a> a tu sitio web. El tutorial viene con ejemplos y una explicaci&oacute;n m&aacute;s detallada sobre la implementaci&oacute;n de JavaScript. El <a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web oficial<\/a> de JavaScript tambi&eacute;n ofrece un mont&oacute;n de tutoriales de demostraci&oacute;n tanto para principiantes como para entusiastas.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/es\/hosting-web\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>JavaScript se utiliza a menudo junto con HTML y CSS para a&ntilde;adir interactividad a los sitios web. En algunos casos, JavaScript puede aprovechar las librer&iacute;as de terceros para proporcionar una funcionalidad avanzada sin que el desarrollador tenga que codificarla desde cero.<\/p><p>Los principiantes en el uso de JavaScript pueden esperar las siguientes ventajas:<\/p><ul class=\"wp-block-list\">\n<li>F&aacute;cil de aprender e implementar en determinados elementos o eventos de la p&aacute;gina web<\/li>\n\n\n\n<li>Respaldado por una s&oacute;lida comunidad de desarrolladores<\/li>\n\n\n\n<li>Reduce las peticiones enviadas al servidor<\/li>\n\n\n\n<li>Compatible con muchos otros lenguajes<\/li>\n\n\n\n<li>M&aacute;s r&aacute;pido y ligero que otros lenguajes de programaci&oacute;n<\/li>\n<\/ul><p>Esperamos que este art&iacute;culo te haya ayudado a entender qu&eacute; es JavaScript y su funci&oacute;n dentro de los sitios web y las aplicaciones. Si quieres aprender a codificar JavaScript, consulta nuestra gu&iacute;a para <a href=\"\/es\/tutoriales\/mejores-sitios-para-aprender-a-programar-gratis\">aprender a programar<\/a>.<\/p><p>Si tienes m&aacute;s preguntas o sugerencias, no dudes en dejarnos un comentario.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript es un lenguaje de programaci&oacute;n ligero que los desarrolladores web suelen utilizar para crear interacciones m&aacute;s din&aacute;micas al desarrollar p&aacute;ginas web, aplicaciones, servidores e incluso juegos. Los desarrolladores suelen utilizar JavaScript junto con HTML y CSS. El lenguaje de programaci&oacute;n funciona bien con CSS a la hora de dar formato a los elementos HTML. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/es\/tutoriales\/que-es-javascript-introduccion-basica\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"\u00bfQu\u00e9 Es JavaScript? Introducci\u00f3n B\u00e1sica A JS Para Principiantes","rank_math_description":"Aprende qu\u00e9 es JavaScript y c\u00f3mo funciona en este art\u00edculo. Incluimos una comparaci\u00f3n detallada de JS con otros lenguajes de desarrollo web.","rank_math_focus_keyword":"qu\u00e9 es javascript","footnotes":""},"categories":[8284],"tags":[5668,8876,8737],"class_list":["post-7278","post","type-post","status-publish","format-standard","hentry","category-glosario","tag-javascript","tag-js","tag-lenguajes-de-programacion"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-javascript","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-javascript","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/qu-est-ce-que-javascript","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-javascript-introduccion-basica","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-javascript","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-javascript","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-javascript","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-javascript","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-javascript","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-javascript","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-javascript","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-javascript","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-javascript","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-javascript","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-javascript","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-javascript","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/7278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=7278"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/7278\/revisions"}],"predecessor-version":[{"id":46059,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/7278\/revisions\/46059"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=7278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=7278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=7278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}