Section 01, Learning JavaScript.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "ce82b35e",
   "metadata": {},
   "source": [
    "#### Execute this cell before running any code in this file..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7de9eb6f",
   "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": "567e8153",
   "metadata": {},
   "source": [
    "# Section 1: Introduction to Javascript\n",
    "\n",
    "Goals: \n",
    " - Learn how programs are implemented in Javascript. \n",
    " - Learn how to create variables.\n",
    "\n",
    "Before we can learn how to code a game, we need to learn how to code! We'll be using Javascript to code our game, so that is the language we will focus on.\n",
    "     \n",
    "## What interprets Javascript?\n",
    "\n",
    "Your web browser comes with a Javascript interpreter. Websites use this to generate dynamic content.\n",
    "\n",
    "You can access a Javascript console on any website by pressing `CTRL+SHIFT+I`. This opens the browser's dev tools console.\n",
    "\n",
    "## Subsection A: A Program\n",
    "\n",
    "### Your First Program: Hello World.\n",
    "\n",
    "This simple program displays `Hello World!` inside of a dialog. Run it below to see!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dd689a44",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Ignore the above line... Tells notebook to run javascript in browser instead of python on server.\n",
    "\n",
    "alert(\"Hello World!\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "76a7dbf0",
   "metadata": {},
   "source": [
    "The above program is made up a single statement: `alert(\"Hello World\");` which tells the program to display a dialog with the message `Hello World!`. \n",
    "\n",
    "___Challenge Exercise: Change the message to `Hello Montana!`.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cffd8407",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Place your code below...\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "75c23b41",
   "metadata": {},
   "source": [
    "### Custom Extensions: Printing results in the notebook.\n",
    "\n",
    "Some extensions have been added to allow for showing results in the notebook! Just replace `alert` with `element.println`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5e9b6c95",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// See result below this cell...\n",
    "element.println(\"Hello World!\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "976b113b",
   "metadata": {},
   "source": [
    "### Code Structure and Flow: Multiple Statements\n",
    "\n",
    "Javascript programs, like programs in nearly all programming languages, are made up of statements. A statement executes a specific action. Each statement in Javascript is terminated by a semicolon (`;`). Statements are executed in the order they are listed...\n",
    "\n",
    "Programs can be made up of multiple statements, like the one below:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "53fcc301",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Three statements below...\n",
    "let i; \n",
    "i = 10 + 4;\n",
    "element.println(i);\n",
    "\n",
    "// This is also valid, ';' indicate command seperation (Considered bad practice.) Why, what do you think?\n",
    "let j; j = 10 + 25; element.println(j);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5b0b434b",
   "metadata": {},
   "source": [
    "### Comments\n",
    "\n",
    "Javascript programs support comments. Comments are ignored by the interpreter, and can be used to document or describe what code is doing."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ba9bcd97",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// This is a single line comment, rest of this line after `//` is ignored.\n",
    "let i = 0;  // This is also valid...\n",
    "\n",
    "/* This is a multiline comment,\n",
    "everything is ignored until \n",
    "closing star-dash is found\n",
    "*/ \n",
    "element.println(\"i is \" + i); // Now back to code..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "40751240",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Comment the code below describing what it does.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e7444d94",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Place your comment below:\n",
    "\n",
    "element.println(\"Become A Game Designer!\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cc12b399",
   "metadata": {},
   "source": [
    "## Subsection B: Variables and Types\n",
    "\n",
    "Often, a program wants to store and work with information. But how do we store it? Javascript provides variables for doing this.\n",
    "\n",
    "### Creation and Assignment (Declaration and Initialization)\n",
    "\n",
    "We can use the `let` keyword to declare, or create a variable.\n",
    "\n",
    "```javascript\n",
    "let info; // Creates variable named 'info'. \n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6b2fa65c",
   "metadata": {},
   "source": [
    "To assign the variable a value, or initialize it, we can use the assignment operator."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c3b44170",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let info; // Creates variable 'info'. \n",
    "// ASSIGNMENT:\n",
    "info = 5; // Stores the value 5 to info.\n",
    "\n",
    "// This will info, which is 5...\n",
    "element.println(info);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b248d040",
   "metadata": {},
   "source": [
    "Declaration and assignment can be done together using the shorthand form below:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1e493387",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let info = 5; // Creates variable 'info' and gives it a value of 5. \n",
    "\n",
    "// This will info, which is 5...\n",
    "element.println(info);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f5ef8de9",
   "metadata": {},
   "source": [
    "__Note: Assignment can happen any number of times, but declaration can only happen once.__\n",
    "\n",
    "```javascript\n",
    "let i;\n",
    "let j = 0;\n",
    "let i; // ERROR!!!\n",
    "let j = 1; // ERROR!!!\n",
    "j = 1; // Ok, did not redeclare...\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8dc5ce14",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Modify above program so info is 10 instead of 5.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8e365b53",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Place your code here...\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "884b89b8",
   "metadata": {},
   "source": [
    "### Javascript Variable Names\n",
    "\n",
    "Javascript variables must follow the following rules to be valid:\n",
    " - Must be made only of letters, numbers, `$`, and `_`.\n",
    " - Must not start with a number.\n",
    " - Must not match one of Javascript's reserved keywords. (Like `let`, `for`, `const`, etc.)\n",
    " \n",
    "___Challenge Exercise: Identify the following variable names as valid or invalid.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "15a150e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Place a comment at the end of each like shown below\n",
    "let user = \"foo\"  // Valid\n",
    "let let = false  // Invalid\n",
    "let 2id = [24, 25];  //\n",
    "let finally = true;  // \n",
    "let _store_manager_ = \"Billy\"  //\n",
    "let $money$ = 1000;  // \n",
    "let _8TooMuch$tuff = true  //\n",
    "let +var3able- = 100;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2e86c074",
   "metadata": {},
   "source": [
    "### Javascript `const` keyword.\n",
    "\n",
    "A programmer may desire that a value not be changed once assigned. This can be done by using the `const` keyword:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9e883d32",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "const PI = 3.141592  // We don't want this to change.\n",
    "element.println(PI);  // Can still read and use it..\n",
    "\n",
    "PI = 3  // This will throw an error."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a92e73d8",
   "metadata": {},
   "source": [
    "### Javascript Dynamic Typing\n",
    "\n",
    "Javascript allows variables to be assigned to any type of value, and therefore is described as a dynamically typed language. The contrast to this is statically typed languages, which require the type of a variable to be explicitly stated, and don't allow it to change.\n",
    "\n",
    "The following example is from Java, a statically typed language.\n",
    "```java\n",
    "int message; // Must explicitly specify i as an integer.\n",
    "message = 0;\n",
    "message = \"This is a string.\"; // ERROR! i is an integer, can't be a string!\n",
    "```\n",
    "and now the same Javascript (What do you think will happen?):"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ebb34af3",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let message;\n",
    "message = 0; // Ok, cool...\n",
    "message = \"This is a string\";\n",
    "element.println(message); // Do we get an error?"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "40dea49c",
   "metadata": {},
   "source": [
    "Javascript variables can be seen simply as 'named references' that point to data. In the case above, the reference is simply redirected to another piece of data, which happens to have a different type. Javascript doesn't care.\n",
    "\n",
    "![Caption 1](./images/variable_assignment_example.svg)\n",
    "\n",
    "_Caption 1: Variable is declared and points to `unassigned`. When assigned to `0`, it is redirected, and undefined can be deleted. When assigned to `\"This is a string\"`, reference is moved and 0 is deleted._\n",
    "\n",
    "### Javascript Types\n",
    "\n",
    "Javascript has the following primitives/types.\n",
    " - `number`: Represents a number of any kind, both integer and decimal. (1, 2, 3 or numbers like 3.145). Numbers are limited to a size of $\\pm (2^{53}-1)$ due to how they are implemented internally.\n",
    "```javascript\n",
    "let n1 = 1;\n",
    "let n2 = 3.527;\n",
    "let n4 = 1e6;\n",
    "```\n",
    "   - _Special Values for Numbers:_\n",
    "       - `Infinity, -Infinity`: Special value, greater (or less) than any other value. Caused by division by 0.\n",
    "       - `NaN`: Not a Number. Indicates error in computation occurred. Propagates through all operations. Has the odd property of not being equal to itself.\n",
    " - `bigint`: For numbers too big to be represented by `number`. Newer to the language and not supported by all browsers.\n",
    "```javascript\n",
    "// A very big number.\n",
    "let bigN1 = 1234567890123456789012345678901234567890n;\n",
    "```\n",
    " - `string`: A ordered collection of characters, represents text. Can be created by enclosing text in single or double quotes.\n",
    "```javascript\n",
    "let exampleStr = 'Some text.';\n",
    "let exampleStr2 = \"Some double quoted text.\"; \n",
    "```\n",
    " - `boolean`: Can be one of two values, `true` or `false`. Used when checking conditions, as the two values act like on and off, or right and wrong.\n",
    "```javascript\n",
    "let bool = true;\n",
    "let bool2 = false;\n",
    "```\n",
    " - `null`: A single value. Often a value is set to this when it is unknown or empty.\n",
    "```javascript\n",
    "let unknown = null;\n",
    "```\n",
    " - `undefined`: A single value. Used by language to for declared but not assigned variables.\n",
    "```javascript\n",
    "let justMade; // Currently set to 'undefined'\n",
    "let explicit = undefined; // We can manually set, but not recommended.\n",
    "```\n",
    " - `object`: We'll learn about these later! Allow for clustering of data through accessible attributes or properties.\n",
    "```javascript\n",
    "let user = {\n",
    "    name: \"Bob\",\n",
    "    age: 25\n",
    "}\n",
    "```\n",
    " - `symbol`: Used for unique identifiers, not used in this class.\n",
    " \n",
    "### Get the Type of Primitive: `typeof` keyword.\n",
    "\n",
    "Javascript provides the `typeof` keyword, which prints the type of a variable."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "38cf2fc9",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Both with and without () is valid...\n",
    "element.println(typeof \"Hello\");\n",
    "element.println(typeof(\"Hello\"));\n",
    "\n",
    "element.println(typeof(5.2));\n",
    "element.println(typeof(false));\n",
    "element.println(typeof({name: \"Bob\", age: 25}));\n",
    "element.println(typeof(null)); // Error kept in for backward compatibility...\n",
    "element.println(typeof(alert)) // Functions are objects, this result is only kept for backward compatibility...\n",
    "element.println(typeof(undefined));"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2db7f64b",
   "metadata": {},
   "source": [
    "## Final Exercises/Questions\n",
    "\n",
    "2.) Each Javascript is made up of `__________`. Each statement is separated by a `__________`.\n",
    "\n",
    "\n",
    "3.) How do you create comments in Javascript?"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d9140dbd",
   "metadata": {},
   "source": [
    "4.) Create variables for the following situations, and print them to the console. \n",
    " - A variable to refer to the user of the system, Jane.\n",
    " - A variable which should refer to the user's age, `33.5`.\n",
    " - A variable referring to the user's address, which happens to be unknown.\n",
    " - A variable to store if the current user is over 65.\n",
    " - A global constant that should never change, representing the fill-in name of `John Smith`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9fe7bebc",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// Code here!\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
}