Screen Output & Keyboard Input

The JavaScript model for the HTML document is the Document object
The model for the browser display window is the Window object
- The Window object has two properties, document and window, which refer to the document and window objects, respectively
The Document object has a method, write, which dynamically creates content
- The parameter is a string, often catenated from parts, some of which are variables
  e.g., document.write("Answer: " + result + "<br />");
The Window object has three methods for creating dialog boxes, alert, confirm, and prompt
The default object for JavaScript is the Window object currently being displayed, so calls to these methods need not include an object reference.
1. alert("Hej! \n");
  - Parameter is plain text, not HTML
  - Opens a dialog box which displays the parameter string and an OK button
2. confirm("Do you want to continue?");
  - Opens a dialog box and displays the parameter and two buttons, OK and Cancel
3. prompt("What is your name?", "");
  - Opens a dialog box and displays its string parameter, along with a text box and two buttons, OK and Cancel
  - The second parameter is for a default response if the user presses OK without typing a response in the text box (waits for OK)

<!DOCTYPE html>
<!-- roots.html 
     A document for roots.js
     -->
<html lang = "en">
  <head>
    <title> roots.html </title>
    <meta charset = "utf-8" />
  </head>
  <body>
    <script type = "text/javascript"  src = "roots.js" >
    </script>
  </body>
</html>

// roots.js 
//   Compute the real roots of a given quadratic
//   equation. If the roots are imaginary, this script
//   displays NaN, because that is what results from 
//   taking the square root of a negative number

// Get the coefficients of the equation from the user


var a = prompt("Find the solution for ax^2 + bx +c \n What is the value of 'a'? \n", "");
var b = prompt("What is the value of 'b'? \n", "");
var c = prompt("What is the value of 'c'? \n", "");

// Compute the square root and denominator of the result

var root_part = Math.sqrt(b * b - 4.0 * a * c);
var denom = 2.0 * a;

// Compute and display the two roots

var root1 = (-b + root_part) / denom;
var root2 = (-b - root_part) / denom;
document.write("The first root is: ", root1, "<br />");
document.write("The second root is: ", root2, "<br />");

Exercise for you

Create a webpage with JavaScript to ask user entering width and length of a rectangle. Take the user's answers and display the area and perimeter of the rectangle.