Javascript Lesson 2

We start together with three short live demos. After that you work through the page on your own: three checkpoints, then the lab.

1. Setup check, everyone at once. Open an HTML file in a real browser tab and open the console, so alert(), prompt() and console.log() all work before you start.
2. console is also where you get error messages
3. Idea of a variable
4. Go over the difference between numbers and strings
5. Go over prompt()
6. prompt() always hands back text. Type 12 into a prompt(), add 1 to it, and see what comes out. (Slide: Getting User Input: prompt())

Demo file: Samples/js_02_live_demo.html

<!DOCTYPE html>
<html>
<body>

<script>
  alert("Hello from alert()");

  let name = prompt("What is your name?");

  console.log("Hello from console.log()");
  console.log(name);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head></head>
<body>

  <script src="myscript.js"></script>

</body>
</html>

// content of myscript.js
console.log("hello");
alert("world");

<body>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  <!-- 1. from another server -->
  <script src="./js/myscript.js"></script>                             <!-- 2. local external file -->
  <script> alert('hello'); </script>                                    <!-- 3. embedded directly -->

</body>

• A statement is one complete instruction. It's like a sentence.
• JavaScript is case-sensitive: alert and Alert are different.
• Each statement ends with a semicolon ;

console.log('hello world');
alert('yikes');

let brushSize = 10;  // this is a single-line comment

/*
  This is a multi-line comment.
  Author: Jane Smith
  This script draws a grid of colored squares.
*/

Note: older JavaScript code uses var instead of let. They work similarly here, but let is the modern standard, so use it.

<!DOCTYPE html>
<html>
<body>
<script>
  let canvasWidth;          // declare: the container exists, but it is empty (undefined)
  console.log(canvasWidth); // what prints here?

  canvasWidth = 800;
  console.log(canvasWidth); // what prints here?

  canvasWidth = 1200;       // overwrite with a new value
  console.log(canvasWidth); // what prints here?

  // declare AND assign in one line
  let margin = canvasWidth * 0.1;
  console.log(margin);      // what prints here?

  // variables can hold text too, called a string
  let artworkTitle = "Blue Study";
  console.log(artworkTitle);
</script>
</body>
</html>

  let artworkTitle = "Blue Study";  // correct: text in quotes
  let artworkTitle = Blue Study;  // error! JS looks for two variables named Blue and Study

<!DOCTYPE html>
<html>
<body>
<script>
  let panelCount    = 2;      // a diptych: one painting split into two panels
  let paintingWidth = 24.5;   // inches
  let frameWidth    = 3.75;
  let totalWidth    = paintingWidth + frameWidth;

  console.log(totalWidth);   // what is this?

  let panelWidth = paintingWidth / panelCount;
  console.log(panelWidth);

  // operator precedence: * and / happen before + and -
  // use parentheses to control the order

  let a = 1;
  let b = 2;
  let c = 3;

  console.log( a + b + c / 3 );    // NOT the average. Why?
  console.log( (a + b + c) / 3 );  // the average. Why is this different?
</script>
</body>
</html>

  panelCount++;            // same as panelCount = panelCount + 1
  panelCount--;            // same as panelCount = panelCount - 1

  totalWidth += 5;         // same as totalWidth = totalWidth + 5
  totalWidth -= 2;         // same as totalWidth = totalWidth - 2

• Two numbers → addition
• At least one string → concatenation (join them together)

<!DOCTYPE html>
<html>
<body>
<script>
  let firstname = "Amanda";
  let lastname  = "Reed";

  alert(firstname + lastname);         // what does this show?
  alert(firstname + " " + lastname);   // and this?

  // mixing a string and a number
  let series = "Untitled #";
  let number = 3;
  alert(series + number);              // what does this show?

  // tricky: what about number + number when one is actually a string?
  let a = "5";
  let b = 3;
  alert(a + b);   // addition or concatenation? predict first
</script>
</body>
</html>

let name = prompt("What is your name?");
//  ^^^^                                  the variable catches what prompt() returns
//         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ prompt() shows this question and returns the answer

<!DOCTYPE html>
<html>
<body>
<script>
  let name  = prompt("What is your name?");
  alert(name + ", welcome to the studio!");

  let color = prompt("What color are you drawn to lately, " + name + "?");
  alert(color + "? Good choice for a first sketch.");

  let hours = prompt("How many hours a week do you spend making art?");

  // Note: prompt() always returns a string.
  // Number() converts it to a number so we can compare it.
  // (We will cover if/else properly in a later lesson.)
  if (Number(hours) < 5) {
    alert(hours + " hours? Every sketchbook starts somewhere.");
  } else {
    alert(hours + " hours? You have a real practice going!");
  }
</script>
</body>
</html>