From 3a24621e7eb2e2476bb463f87eb0345447eb41b2 Mon Sep 17 00:00:00 2001 From: imidom Date: Fri, 4 Jan 2019 08:53:38 -0500 Subject: [PATCH] Update 02-first-steps/09-alert-prompt-confirm --- .../09-alert-prompt-confirm/article.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/09-alert-prompt-confirm/article.md index 65a42557..4bbfd58f 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/09-alert-prompt-confirm/article.md @@ -2,7 +2,7 @@ This part of the tutorial aims to cover JavaScript "as is", without environment-specific tweaks. -But still we use a browser as the demo environment. So we should know at least a few user-interface functions. In this chapter we'll get familiar with the browser functions `alert`, `prompt` and `confirm`. +But we'll still be using the browser as our demo environment, so we should know at least a few of its user-interface functions. In this chapter, we'll get familiar with the browser functions `alert`, `prompt` and `confirm`. ## alert @@ -12,7 +12,7 @@ Syntax: alert(message); ``` -This shows a message and pauses the script execution until the user presses "OK". +This shows a message and pauses script execution until the user presses "OK". For example: @@ -20,27 +20,27 @@ For example: alert("Hello"); ``` -The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons etc, until they have dealt with the window. In this case -- until they press "OK". +The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc. until they have dealt with the window. In this case -- until they press "OK". ## prompt -Function `prompt` accepts two arguments: +The function `prompt` accepts two arguments: ```js no-beautify result = prompt(title[, default]); ``` -It shows a modal window with a text message, an input field for the visitor and buttons OK/CANCEL. +It shows a modal window with a text message, an input field for the visitor, and the buttons OK/CANCEL. `title` -: The text to show to the visitor. +: The text to show the visitor. `default` : An optional second parameter, the initial value for the input field. -The visitor may type something in the prompt input field and press OK. Or they can cancel the input by pressing the CANCEL button or hitting the `key:Esc` key. +The visitor may type something in the prompt input field and press OK. Or they can cancel the input by pressing CANCEL or hitting the `key:Esc` key. -The call to `prompt` returns the text from the field or `null` if the input was canceled. +The call to `prompt` returns the text from the input field or `null` if the input was canceled. For instance: @@ -50,16 +50,16 @@ let age = prompt('How old are you?', 100); alert(`You are ${age} years old!`); // You are 100 years old! ``` -````warn header="IE: always supply a `default`" -The second parameter is optional. But if we don't supply it, Internet Explorer would insert the text `"undefined"` into the prompt. +````warn header="In IE: always supply a `default`" +The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt. -Run this code in Internet Explorer to see that: +Run this code in Internet Explorer to see: ```js run let test = prompt("Test"); ``` -So, to look good in IE, it's recommended to always provide the second argument: +So, for prompts to look good in IE, we recommend always providing the second argument: ```js run let test = prompt("Test", ''); // <-- for IE @@ -74,7 +74,7 @@ The syntax: result = confirm(question); ``` -Function `confirm` shows a modal window with a `question` and two buttons: OK and CANCEL. +The function `confirm` shows a modal window with a `question` and two buttons: OK and CANCEL. The result is `true` if OK is pressed and `false` otherwise. @@ -88,22 +88,22 @@ alert( isBoss ); // true if OK is pressed ## Summary -We covered 3 browser-specific functions to interact with the visitor: +We covered 3 browser-specific functions to interact with visitors: `alert` : shows a message. `prompt` -: shows a message asking the user to input text. It returns the text or, if CANCEL or `key:Esc` is clicked, all browsers return `null`. +: shows a message asking the user to input text. It returns the text or, if CANCEL or `key:Esc` is clicked, `null`. `confirm` : shows a message and waits for the user to press "OK" or "CANCEL". It returns `true` for OK and `false` for CANCEL/`key:Esc`. -All these methods are modal: they pause the script execution and don't allow the visitor to interact with the rest of the page until the message has been dismissed. +All these methods are modal: they pause script execution and don't allow the visitor to interact with the rest of the page until the window has been dismissed. There are two limitations shared by all the methods above: -1. The exact location of the modal window is determined by the browser. Usually it's in the center. +1. The exact location of the modal window is determined by the browser. Usually, it's in the center. 2. The exact look of the window also depends on the browser. We can't modify it. That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine.