{"id":7278,"date":"2018-08-20T13:56:48","date_gmt":"2018-08-20T13:56:48","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-tutoriales\/?p=7278"},"modified":"2023-03-08T17:39:24","modified_gmt":"2023-03-08T16:39:24","slug":"que-es-javascript","status":"publish","type":"post","link":"\/co\/tutoriales\/que-es-javascript\/","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\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   &iquest;Qu&eacute; es JavaScript?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">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><\/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\/co\/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 videos 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\/co\/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=\"\/co\/tutoriales\/que-es-angular\/\">AngularJS<\/a>, <a href=\"\/co\/tutoriales\/que-es-jquery\/\">jQuery<\/a> y <a href=\"\/co\/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\/40\/2018\/08\/angry-birds.png\/w=1024,h=1024,fit=scale-down\" alt=\"Ejemplo de juego hecho con JavaScript, Angry Birds\" class=\"wp-image-18910\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2018\/08\/angry-birds.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2018\/08\/angry-birds.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2018\/08\/angry-birds.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2018\/08\/angry-birds.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2018\/08\/angry-birds.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/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=\"\/co\/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\/40\/2022\/05\/tinymce.png\/w=1024,h=1024,fit=scale-down\" alt=\"P&aacute;gina web del editor de texto TinyMCE\" class=\"wp-image-18917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/05\/tinymce.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/05\/tinymce.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/05\/tinymce.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/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\/40\/2022\/05\/sublime-text.png\/w=1024,h=1024,fit=scale-down\" alt=\"P&aacute;gina de inicio de Sublime Text\" class=\"wp-image-18918\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/05\/sublime-text.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/05\/sublime-text.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/05\/sublime-text.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/05\/sublime-text.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/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=\"\/co\/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=\"\/co\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/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=\"\/co\/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=\"\/co\/tutoriales\/que-es-javascript\/\">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":1},{"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":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/che-cose-javascript\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-javascript\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-javascript\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-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},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-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":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-javascript\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/7278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=7278"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/7278\/revisions"}],"predecessor-version":[{"id":29588,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/7278\/revisions\/29588"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=7278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=7278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=7278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}