{"id":712,"date":"2024-07-30T20:23:51","date_gmt":"2024-07-30T18:23:51","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=712"},"modified":"2024-07-30T20:23:51","modified_gmt":"2024-07-30T18:23:51","slug":"005-alert-confirm-y-prompt","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/06-objetos-y-funciones-del-lenguaje\/005-alert-confirm-y-prompt\/","title":{"rendered":"005. alert, confirm y prompt"},"content":{"rendered":"\n

En este cap\u00edtulo vamos a ver 3 m\u00e9todos<\/strong> que son muy importantes para interactuar con el usuario, y que cuelgan del objeto padre que es window<\/em> <\/strong>en los navegadores. Estos m\u00e9todos<\/strong> no existen en Node.js<\/strong> ya que no existe el objeto window<\/em><\/strong>, pero s\u00ed que existen en el Javascript<\/strong> de los navegadores, y muy importante, aunque a\u00fan no hemos visto nada del DOM<\/strong> ni del BOM<\/strong>, que ya es m\u00e1s interacci\u00f3n con HTML<\/strong>, s\u00ed es importante explicar estos 3 m\u00e9todos de la ventana.<\/p>\n\n\n\n\n\n\n\n

Estos 3 m\u00e9todos nos permiten interactuar con el usuario.<\/p>\n\n\n\n

La diferencia entre un alert<\/em> <\/strong>y un confirm<\/em> <\/strong>es que mientras que alert<\/em><\/strong> (alerta) s\u00f3lo tiene un bot\u00f3n de Aceptar, confirm<\/em> <\/strong>(confirmaci\u00f3n) tiene un bot\u00f3n de Aceptar y uno de Cancelar, y dependiendo de lo que el usuario pulse, validar\u00e1 a true<\/em> <\/strong>o false<\/em><\/strong>.<\/p>\n\n\n\n

El prompt <\/em><\/strong>(aviso) permite que el usuario interact\u00fae y facilite un valor, es decir, le permite ingresar un valor.<\/p>\n\n\n\n

Aunque son m\u00e9todos<\/strong> que cuelgan de window<\/em><\/strong>, no es necesario especificar la palabra window<\/em> <\/strong>para llamar a dichos m\u00e9todos<\/strong>.<\/p>\n\n\n\n

La alerta nos va a mostrar undefined<\/em><\/strong>, la confirmaci\u00f3n nos puede mostrar true<\/em> <\/strong>o false<\/em><\/strong>, y el aviso (prompt<\/em><\/strong>), si no ingresamos nada y le damos a aceptar nos dar\u00e1 una cadena vac\u00eda, si le damos al bot\u00f3n Cancelar retornar\u00e1 un valor null<\/em><\/strong>, por ello una alerta manda mensaje al usuario s\u00f3lamente, la confirmaci\u00f3n si le damos al bot\u00f3n de aceptar, guarda dicha confirmaci\u00f3n en una variable y retorna el valor true<\/em><\/strong>, si damos clic en Cancelar no se guarda dicha confirmaci\u00f3n en una variable y retorna un valor false<\/em><\/strong>, y el aviso, si escribimos algo y le damos a aceptar, devolver\u00e1 una cadena de texto, si no escribimos nada y damos clic a aceptar, devolver\u00e1 una cadena de texto vac\u00eda, y si damos a Cancelar, independientemente de que hayamos escrito algo o no, retornar\u00e1 un valor null<\/em><\/strong>.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Alert, Confirm, Prompt<\/title>\n  <\/head>\n\n  <body>\n    <h1>Alert, Confirm, Prompt<\/h1>\n\n    <script>\n      \/\/ window.alert(\"Hola esto es una alerta\");\n      \/\/ window.confirm(\"Hola esto es una confirmaci\u00f3n\");\n      \/* window.prompt(\n        \"Hola esto es un prompt y permite al usuario ingresar un valor\"\n      ); *\/\n\n      let alerta = alert(\"Esto es una alerta\");\n      let confirmacion = confirm(\"Esto es una confirmaci\u00f3n\");\n      let aviso = prompt(\"Esto es un aviso\");\n\n      console.log(alerta);\n      console.log(confirmacion);\n      console.log(aviso);\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
En este cap\u00edtulo vamos a ver 3 m\u00e9todos que son muy importantes para interactuar con el usuario, y que cuelgan del objeto…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":697,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-712","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo vamos a ver 3 m\u00e9todos que son muy importantes para interactuar con el usuario, y que cuelgan del objeto...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=712"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/712\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/712\/revisions\/713"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/697"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}