Unit #2-03

Learning Outcome

At the end of this lesson, you will be able to:

• create the program that accepts user input

Review

• computers can do math, but what if we want to get some input from the user

Lesson

• go over what a variable is:

  • a value stored in the computer's memory that can be accessed by a name

  • before we can use it, we need to give it a name so we can refer to it

    • unlike math class, we DO NOT use single letters

      • we use word(s) that describe what is being held

      • ex. enterButton, firstName, ...

        • see "Different Naming Conventions" below: ↓

• in JS what is var, let and const:

  • see here for technical reasons

  • if you are never going to change the value again, make it a const

  • otherwise use let

  • never use var

function enterClicked() {

  // input

  const firstName = document.getElementById("first-name").value

  const userAge = parseInt(document.getElementById("age-entered").value)

  // output

  document.getElementById("user-info").innerHTML =

    "Your info is: " + firstName + ", age " + userAge + "."

}

• in PHP what is $:

  • see here for technical explanation

<?php

  $name = $_GET["name"];

  $age = $_GET["age"];

  echo "Your info is: " . $name . ", age " . $age . ".";

?>

• go over adding an HTML Input tag

  • they usually exist inside a form

  • note the different types of input you can accept

• getting input from a user, in JS:

<form>

  <!-- Simple Textfield -->

  <p>First Name</p>

  <div class="mdl-textfield mdl-js-textfield">

    <input class="mdl-textfield__input" type="text" id="first-name">

    <label class="mdl-textfield__label" for="sample1">Name here ...</label>

  </div>

  <!-- Numeric Textfield -->

  <p>Age</p>

  <div class="mdl-textfield mdl-js-textfield">

    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="age-entered">

    <label class="mdl-textfield__label" for="age-entered">Age here ...</label>

    <span class="mdl-textfield__error">Input is not a number!</span>

  </div>

  <br />

  <!-- Accent-colored raised button with ripple -->

  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"

    onclick="enterClicked()"

    type="button"
  >

    Enter

  </button>

</form>

• getting input from a user, in PHP:

<form action="answer.php" method="GET">

  <p>Name</p>

  <div class="mdl-textfield mdl-js-textfield">

    <input class="mdl-textfield__input" type="text" name="name">

    <label class="mdl-textfield__label" for="name-input">Name here ...</label>

  </div>

  <br />

  <p>Age</p>

  <div class="mdl-textfield mdl-js-textfield">

    <input class="mdl-textfield__input" type=" text" pattern="-?[0-9]*(\.[0-9]+)?" name="age">

    <label class="mdl-textfield__label" for="age-input">Age here ...</label>

    <span class="mdl-textfield__error">Input is not a number!</span>

  </div>

  <br />

  <!-- Accent-colored raised button with ripple -->

  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
    type="submit"

  >

    Calculate

  </button>

</form>

Activity

• go over the Name and Age program

  • see JavaScript Relpit below: ↓

  • see PHP Relpit below: ↓

    • NOTE: in PHP you usually pass info to another page to see the output

Daily Assignment

• create a web page that will do the following:

  • has standard HTML, CCS & JS files; with favicon and MDL

  • that accepts 2 inputs:

    • 1 number, that is the user's street number

    • 1 text, that is the street name

  • saves them to variables and then returns the values to the screen

    • see screenshot below: ↓

Extra

• recreate the above program in PHP

Different Naming Conventions

Output for Daily Assignment