{"id":266,"date":"2011-12-06T22:22:58","date_gmt":"2011-12-06T22:22:58","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-18T05:39:19","modified_gmt":"2017-11-18T05:39:19","slug":"lesson-3-javascript-dialog-box","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-3-javascript-dialog-box\/","title":{"rendered":"JavaScript Lesson 3: JavaScript Dialog Box"},"content":{"rendered":"<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-2-javascript-basics\/\">&lt;Lesson 2&gt; <\/a><a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-4-variables-javascript\/\">&lt;Lesson 4&gt;<\/a><\/h4>\n<h3>3.1 JavaScript Dialog<\/h3>\n<p>A dialog box that pops up on a web page will enhance the interactivity of the web page. It is normally used in advertising. A JavaScript dialog carries a message or a question that required some form of actions from the user, either clicking a button or pressing a key on the keyboard.In JavaScript, the syntax\u00a0to launch a dialog is very simple, you just need to use the <strong>alert <\/strong> method. The structure is:<\/p>\n<pre style=\"font-size: 110%; width: 80%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;script language=\"JavaScript\"&gt;\r\nwindows.alert(\"Welcome to JavaScript Tutorial\");\r\n&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-3033628290023372\"\n     data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><br \/>\nAdding this Script to a web page allows the user to see a popup dialog box that displays the message &#8220;welcome to JavaScript Tutorial&#8221;\u00a0 as shown in the diagram below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif\" alt=\"\" width=\"365\" height=\"138\" \/><\/p>\n<p>Click on <a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example3.1.htm\">Example 3.1<\/a> to view the dialog box.<\/p>\n<p>You can customize the format of the output using a backslash \\ and &#8220;n&#8221;. Lets change the line windows.alert(&#8220;Welcome to JavaScript Tutorial&#8221;) to<\/p>\n<p>window.alert&#8221;welcome to\\nJavaScript\\nTutorial&#8221;). The output will be displayed in three lines now, as shown below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/javascript-tutor.net\/java_tutor\/alert2.gif\" alt=\"\" width=\"365\" height=\"143\" \/><\/p>\n<p>If you put the two scripts together, you will see two dialog boxes appear successively, after you click the first one, the second one will appear.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"autorelaxed\"\n     data-ad-client=\"ca-pub-3033628290023372\"\n     data-ad-slot=\"2916349441\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-2-javascript-basics\/\"> &lt;Lesson 2&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-4-variables-javascript\/\">&lt;Lesson 4&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 2&gt; [Contents] &lt;Lesson 4&gt; 3.1 JavaScript Dialog A dialog box that pops up on a web page will enhance the interactivity of the web page. It is normally used in advertising. A JavaScript dialog carries a message or a question that required some form of actions from the user, either clicking a button or &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-3-javascript-dialog-box\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 3: JavaScript Dialog Box&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-266","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Dialog Box<\/title>\n<meta name=\"description\" content=\"This lesson shows how to create javascript dialog box\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Dialog Box\" \/>\n<meta property=\"og:description\" content=\"This lesson shows how to create javascript dialog box\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-18T05:39:19+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-3-javascript-dialog-box\/\",\"url\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html\",\"name\":\"JavaScript Dialog Box\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#primaryimage\"},\"image\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif\",\"datePublished\":\"2011-12-06T22:22:58+00:00\",\"dateModified\":\"2017-11-18T05:39:19+00:00\",\"description\":\"This lesson shows how to create javascript dialog box\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#primaryimage\",\"url\":\"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif\",\"contentUrl\":\"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 3: JavaScript Dialog Box\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Dialog Box","description":"This lesson shows how to create javascript dialog box","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html","og_locale":"en_US","og_type":"article","og_title":"JavaScript Dialog Box","og_description":"This lesson shows how to create javascript dialog box","og_url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-18T05:39:19+00:00","og_image":[{"url":"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-3-javascript-dialog-box\/","url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html","name":"JavaScript Dialog Box","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"primaryImageOfPage":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#primaryimage"},"image":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#primaryimage"},"thumbnailUrl":"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif","datePublished":"2011-12-06T22:22:58+00:00","dateModified":"2017-11-18T05:39:19+00:00","description":"This lesson shows how to create javascript dialog box","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#primaryimage","url":"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif","contentUrl":"http:\/\/javascript-tutor.net\/java_tutor\/alert.gif"},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson3.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 3: JavaScript Dialog Box"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":31,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/266\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/266\/revisions\/270"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}