Section 03, Comparisons, Conditionals, and Branching.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "0f9f9923",
   "metadata": {},
   "source": [
    "#### Execute this cell before running any code in this file..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b83d11ed",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import Javascript Libraries: Execute this cell...\n",
    "from IPython.display import Javascript\n",
    "\n",
    "display(Javascript(\"jupyter_lib.js\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "436584f8",
   "metadata": {},
   "source": [
    "# Section 3: Comparisons, Conditionals, and Branching"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "97f1a86e",
   "metadata": {},
   "source": [
    "We have learned how to store information, and manipulate information mathematically, but that raises the question: \"How do we make decisions in programs?\" To do so, Javascript provides comparison operators and conditional statements. \n",
    "\n",
    "Goals:\n",
    " - Learn how to compare values.\n",
    " - Learn how to execute code based on comparisons.\n",
    " - Learn how to combine multiple comparisons together.\n",
    "\n",
    "## The Comparison and Boolean Operators\n",
    "\n",
    "Javascript provides comparison operations, that allow us to compare two values. It also has a few operators for combining boolean results. The list of comparison operators is:\n",
    "\n",
    " - `==`: Equal to: Are the two values equal?\n",
    " - `!=`: Not Equal To.\n",
    " - `>`: Greater Than: Is the first value greater than the second?\n",
    " - `<`: Less Than: Is the first value less than the second?\n",
    " - `>=`: Greater Than or Equal To.\n",
    " - `<=`: Less Than or Equal To.\n",
    " - `===`: Strict Equal: Types must be identical also.\n",
    " - `!==`: Strict Not Equal: No type casting is done before comparison.\n",
    " \n",
    "As you may have already guessed, all of these operators return a boolean, indicating if the comparison was true or false.\n",
    "\n",
    "### Comparisons for Numbers\n",
    "\n",
    "Nothing special, numbers compare based on value."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "14434f29",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.println(5 == 5);\n",
    "element.println(5 >= 4);\n",
    "element.println(5 <= -1);\n",
    "element.println(5 < 10);\n",
    "element.println(5 > 5);\n",
    "element.println(5 != -1);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56b163a0",
   "metadata": {},
   "source": [
    "### Comparisons for Strings\n",
    "\n",
    "Strings are compared using dictionary or lexicographical order. They are compared character-by-character until the first mismatch in letters is found, in which case letters are compared based on there order in the alphabet."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e26308a0",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.println(\"A\" == \"A\");\n",
    "element.println(\"and\" >= \"band\");\n",
    "element.println(\"banana\" <= \"bananana\");\n",
    "element.println(\"yes\" < \"yep\");\n",
    "element.println(\"wow\" > \"cool\");\n",
    "element.println(\"cow\" != \"cows\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "85e0f3ce",
   "metadata": {},
   "source": [
    "### Comparisons of Different Types\n",
    "\n",
    "Javascript, as a dynamic language, allows the comparison of different types. When this happens, javascript converts both values to numbers."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "76d12bfd",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.println('2' < 1); // false, string '2' becomes the number 2.\n",
    "element.println( '01' == 1 ); // true, string '01' becomes the number 1."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2ca83efa",
   "metadata": {},
   "source": [
    "For booleans, Javascript converts true to 1 and false to 0."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ed03abe0",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.println(true == 1); \n",
    "element.println(false == 0);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bda00788",
   "metadata": {},
   "source": [
    "___NOTE: The values null and undefined equal == each other and do not equal any other value. But null is converted to 0 for comparison operators, and undefined to NaN.___"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "54362047",
   "metadata": {},
   "source": [
    "### Strict Equality"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6fb3d42d",
   "metadata": {},
   "source": [
    "Because of Javascript's type conversions, some surprising results can occur when doing equality comparisons:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b12806f7",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// ???\n",
    "element.println(\"       1       \" == 1);\n",
    "element.println(\"1\" == true);\n",
    "element.println(false == 0);\n",
    "element.println(undefined == null);\n",
    "element.println(\"0\" != false);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "22885428",
   "metadata": {},
   "source": [
    "To avoid these surprises, Javascript provides a way to compare values without them being automatically casted, using the strict equality operators (`===` and `!==`):"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4d009a69",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// These results likely make more sense to you.\n",
    "element.println(\"       1       \" === 1);\n",
    "element.println(\"1\" === true);\n",
    "element.println(false === 0);\n",
    "element.println(undefined === null);\n",
    "element.println(\"0\" !== false);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bce80038",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Attempt to guess the evaluation of the following comparisons below:___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e8ba9ae6",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Place your answers at the end of each line...\n",
    "element.println(5 == 5); //\n",
    "element.println(4 <= 3); //\n",
    "element.println(6 > 6); //\n",
    "element.println(5 != \"5\"); //\n",
    "element.println(5 !== \"5\"); //\n",
    "element.println(\"Hello\" < \"World\"); //\n",
    "element.println(\"Hi \" == \"Hi\"); //\n",
    "element.println(null == undefined) //\n",
    "element.println(\" 0 \" == false); //"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7b716657",
   "metadata": {},
   "source": [
    "## Conditionals and Branching\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8b47d92d",
   "metadata": {},
   "source": [
    "Now that we know how to perform comparisons, you might wonder how we can execute code based on those conditions. For this javascript provides conditionals, specifically the `if` statement."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "275afd1a",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let result = prompt(\"What is 2 + 2?\");\n",
    "\n",
    "if(result == 4) element.println(\"Your correct!\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "00a1bf59",
   "metadata": {},
   "source": [
    "Note, if you want multiple statements executed, you can place brackets after the `if` to indicate a block."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "db97ab36",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let result = prompt(\"What is 2 + 2?\");\n",
    "\n",
    "if(result == 4) {\n",
    "    element.println(\"Your correct!\");\n",
    "    element.println(\"The result is 4!\");\n",
    "} "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "50962268",
   "metadata": {},
   "source": [
    "#### `else` Block\n",
    "\n",
    "If the expression in the if statement resolves to false, the if statement is not executed. If we want an alternative statement to be executed when the statement is not true, we can add an `else` block after the initial if statement."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dacec22c",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let result = prompt(\"What is 2 + 2?\");\n",
    "\n",
    "if(result == 4) {\n",
    "    element.println(\"Your correct!\");\n",
    "    element.println(\"The result is 4!\");\n",
    "} \n",
    "else {\n",
    "    element.println(\"Your Wrong!\");\n",
    "    element.println(\"Off by: \" + (4 - result));\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e3ed08d5",
   "metadata": {},
   "source": [
    "#### `else if` Block.\n",
    "\n",
    "What if we want to check other conditions only if the first `if` statement fails? We can do so by adding `if else` statements, which allow us to check for additional conditions."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "016b168a",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let result = prompt(\"What is 2 + 2?\");\n",
    "\n",
    "if(result > 4) {\n",
    "    element.println(\"To High!\");\n",
    "} \n",
    "else if(result < 4) {\n",
    "    element.println(\"To Low!\");\n",
    "}\n",
    "else {\n",
    "    element.println(\"Correct!\");\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eadb9a4e",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Implement a password checker! Given a password, provide access to the secret if the password is correct.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4c7dfb91",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Implement your code here..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5dbb6b0b",
   "metadata": {},
   "source": [
    "## `? :` Operator\n",
    "\n",
    "There are many cases where we want to assign a value to a variable based on it's condition. This is possible using `if`/`else`, but it is lengthy."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "453c7cbe",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let result = prompt(\"Enter a number:\");\n",
    "let multiplier = 0;\n",
    "\n",
    "if(result > 0) {\n",
    "    multiplier = 1\n",
    "} \n",
    "else {\n",
    "    multiplier = -1\n",
    "}\n",
    "\n",
    "element.println(\"The positive version of your number is: \" + (multiplier * result));"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3320565b",
   "metadata": {},
   "source": [
    "So for cases of assigning to a variable, there is the option of using the `?:` operator, which allows returning a different expression for a given condition.\n",
    "```javascript\n",
    "(condition)?trueResult:falseResult;\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "16e060d6",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let result = prompt(\"Enter a number:\");\n",
    "let multiplier = (result > 0)? 1: -1;\n",
    "\n",
    "element.println(\"The positive version of your number is: \" + (multiplier * result));"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7a41425d",
   "metadata": {},
   "source": [
    "## Boolean Operators (Or: `||`, And: `&&`, and Not: `!`)\n",
    "\n",
    "We often want to check multiple conditions and see if they are all true, or if at least one of them is true. The boolean OR(`||`) and AND(`&&`) operations allow us to do this."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3850b215",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.println(\"OR Operator:\")\n",
    "element.println(false || false);\n",
    "element.println(false || true);\n",
    "element.println(true || false);\n",
    "element.println(true || true);\n",
    "\n",
    "element.println(\"AND Operator:\")\n",
    "element.println(false && false);\n",
    "element.println(false && true);\n",
    "element.println(true && false);\n",
    "element.println(true && true);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "52f66352",
   "metadata": {},
   "source": [
    "We also often want to invert a condition or boolean, the NOT operator `!` allows us to do this."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "57e055ca",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.println(\"NOT Operator:\")\n",
    "element.println(!false);\n",
    "element.println(!true);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8a850e48",
   "metadata": {},
   "source": [
    "Javascript's NOT always returns a boolean. AND and OR don't but rather return based on the following rules.\n",
    "\n",
    "- `&&`: If the first value evaluates to false, return it, otherwise, return the second value.\n",
    "- `||`: If the first value is true, return it, otherwise return the second value.\n",
    "\n",
    "This leads to some interesting behavior. It can be ignored if it is being used in a conditional statement, as the conditional statement will convert the final result to a boolean."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1f01407c",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.println(\"OR Operator:\")\n",
    "element.println(5 || 4);\n",
    "element.println(0 || 0);\n",
    "element.println(\"Wow\" || \"Cool\");\n",
    "element.println(0 || 5);\n",
    "\n",
    "element.println(\"AND Operator:\")\n",
    "element.println(5 && 4);\n",
    "element.println(0 && 0);\n",
    "element.println(\"Wow\" && \"Cool\");\n",
    "element.println(0 && 5);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "64d73558",
   "metadata": {},
   "source": [
    "## Final Exercises/Questions\n",
    "\n",
    "1.) List the javascript comparison operators. (Hint: There are 6, 2 Odd ones)\n",
    "\n",
    "2.) How are comparisons of strings performed?\n",
    "\n",
    "3.) Write a simple login checker. Ask for a user's username and password, if both match print a welcome message.\n",
    "\n",
    "_(Extra challenge: Write it using a single if statement)._"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "625fc4c7",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}