# JavaScript in the Browser ### Project Setup Create a new project folder named scripts-intro. Open the folder in VS Code and create an index.html file and add the following in the body element. ### \ ``` ### \ ``` ### script placement The \ ``` ![](/files/-M_aazhrk1BUA4XhGIp8) **alert(message)** - shows a message to the user and waits for the user to click Ok. ![](/files/-M_aaMQ3kdWQ_lUD-Pfv) ### window\.prompt method **prompt(message, default value)** - shows a modal dialog with a message and a input field for the user to enter a value and waits for the user to click Ok or Cancel. The second parameter is optional, and will be used as the default value if it is supplied. The function will return the value the user entered. The script below is calling the prompt method on the window object to ask the user what color to change the background color to. The prompt method returns a value entered by the user. In order to store the return value we need to create a variable to hold the return value. The **let keyword** is how you define a variable to hold a value. The **= symbol** is how you assign a value to a variable. ```javascript let color = window.prompt("What color should I set the background to?", "yellow"); ``` ![](/files/-M_apKaLqREki6SKt84i) ![](/files/-M_aomGN67YstE0YzIGl) Use the value stored in the color variable to set the value of the body element's background color; ```javascript let color = window.prompt("What color should I set the background to?", "yellow"); document.body.style.backgroundColor = color; ``` ### Concatenating Strings Modify the above script to use the window\.alert method to display the value of the background color after it has been changed. The "+" character can be used to concatenate strings to form a larger string. ```javascript let color = window.prompt("What color should I set the background to?", "yellow"); document.body.style.backgroundColor = color; window.alert("The color is: " + color); ``` ![](/files/-M_ar97XcnNaCJX0rGWH) Modify the script above to display the color before and after the change. ```javascript let colorBefore = document.body.style.backgroundColor; let color = window.prompt("What color should I set the background to?", colorBefore); document.body.style.backgroundColor = color; window.alert("The color has been changed from " + colorBefore + " to " + color); ``` ### window\.confirm method ![](/files/-M_bIV-YbXJZABuLyoyp) **confirm(message)** - shows a modal dialog with a message and waits for the user to click Ok or Cancel. The function will return true if the user clicks Ok, and false if the user clicks Cancel. In the script below, on line 3, we've added a call to the window\.confirm method to ask whether the user wants to change the background color. But we're not doing anything with the return value. But we're not using the answer to decide whether to change the color. ```javascript let colorBefore = document.body.style.backgroundColor; let answer = window.confirm("Do you want to change the background color?"); let color = window.prompt("What color should I set the background to?", colorBefore); document.body.style.backgroundColor = color; window.alert("The color is: " + color); ``` ### Conditional Statements Here, we are testing the answer to see if it is true, and if it is, then we prompt to ask for a color to change. ```markup ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://chnn-anne.gitbook.io/javascript/introducing-scripts.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.