01. Javascript Basic Notes.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Javascript Basic Notes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Sections\n",
    "\n",
    "- [Javascript on Jupyter](#Javascript-on-Jupyter)\n",
    "- [Data Types](#Data-Types)\n",
    "- [Comparisons](#Comparisons)\n",
    "- [Variables](#Variables)\n",
    "- [Conditionals](#Conditionals)\n",
    "- [Logical Operators](#Logical-Operators)\n",
    "- [Functions](#Functions)\n",
    "- [Data Structures](#Data-Structures)\n",
    "- [Loops](#Loops)\n",
    "- [Javascript Keywords](#Javascript-Keywords)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Javascript was created by netscape.\n",
    "netscape subbmited to ECA international\n",
    "\n",
    "ECMAScript === javascript\n",
    "ECMAScript 6 is the version of the Javascript\n",
    "Today version 5 and 6 are being used mostly, but there are newer. Each version brings new added funtionalities.\n",
    "\n",
    "[Babel](#https://babeljs.io/) helps translating code between versions\n",
    "\n",
    "new features added (const, let)\n",
    "\n",
    "Wilth let we can create variables inside a if statement, that will create a variable inside the if expresion.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "inside true\n",
      "outside false\n"
     ]
    }
   ],
   "source": [
    "let experience = 100;\n",
    "let wizardLevel = false;\n",
    "\n",
    "if (experience > 90) {\n",
    "    // we create this variable just for this if scope\n",
    "    let wizardLevel = true;\n",
    "    console.log(\"inside\", wizardLevel);\n",
    "}\n",
    "console.log(\"outside\", wizardLevel);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "inside true\n",
      "outside true\n"
     ]
    }
   ],
   "source": [
    "let experience = 100;\n",
    "var wizardLevel = false;\n",
    "\n",
    "if (experience > 90) {\n",
    "    // we create this variable just for this if scope\n",
    "    var wizardLevel = true;\n",
    "    console.log(\"inside\", wizardLevel);\n",
    "}\n",
    "console.log(\"outside\", wizardLevel);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "// Use Const for variables that will not change \n",
    "const player = \"Bobby\";\n",
    "// const player = \"Sally\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{ player: 'Bobby', experience: 90, wizardLevel: false }"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// you can change properties in case is an object\n",
    "const user = {\n",
    "    player: \"Bobby\",\n",
    "    experience: 100,\n",
    "    wizardLevel: false\n",
    "}\n",
    "user.experience = 90\n",
    "user"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Javascript on Jupyter\n",
    "\n",
    "in order to enable Javascript on Jupyer Noteboks, run the following commands on Anaconda prompt terminal:\n",
    "\n",
    "```bash\n",
    "conda install nodejs\n",
    "npm install -g ijavascript\n",
    "ijsinstall\n",
    "```\n",
    "The you will have the option to choose Javascript (Node.js) instead of Python for your Jupyter Notebook.\n",
    "\n",
    "Writting comments on Javascript code can have "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "<!-- A comment in Javascript -->"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [],
   "source": [
    "// Also this is a comment"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello\n"
     ]
    }
   ],
   "source": [
    "console.log(\"Hello\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Another thing writing Javascript code is the use of \";\", it usually represents the end of an expression."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Data Types\n",
    "- 1. Number\n",
    "- 2. String\n",
    "- 3. Boolean\n",
    "- 4. Undefined (a variable with no value)\n",
    "- 5. Null (for empty objects)\n",
    "- 6. Symbol\n",
    "- 7. Object"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can perform several operation swith Javascript Data Types."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "7"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "<!-- Only numbers -->\n",
    "3 + 4"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'534'"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "<!-- Numbers and strings -->\n",
    "5 + \"34\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "1"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "<!-- Numbers and strings -->\n",
    "5 - \"4\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "<!-- Reminder operation -->\n",
    "10 % 5"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "5"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "<!-- Reminder operation -->\n",
    "5 % 10"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'JavaScript'"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\"Java\" + \"Script\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'What\"s the matter with you'"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\"What\\\"s the matter with you\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'  '"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\" \" + \" \""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "' 0'"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\" \" + 0"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In Javascript Booleans are all lower case letters."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "2"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "true + true"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "1"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "true + false"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "1"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "false + true"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "-1"
      ]
     },
     "execution_count": 17,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "false - true"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "-1"
      ]
     },
     "execution_count": 18,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "3 - 4"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "NaN"
      ]
     },
     "execution_count": 19,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\"Bob\" - \"bill\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Comparisons\n",
    "- `!==`: not equal\n",
    "- `===`: equal\n",
    "- `>=` : greater or equal\n",
    "- `<=` : lower or equal\n",
    "- `>`  : greater than\n",
    "- `<`  : lower than"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "true"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "<!-- Examples  -->\n",
    "5 >= 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "false"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "0 === 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "false"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "4 <= 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "false"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "1 != 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "false"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\"A\" > \"B\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "true"
      ]
     },
     "execution_count": 26,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\"B\" < \"C\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "true"
      ]
     },
     "execution_count": 27,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\"a\" > \"A\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "false"
      ]
     },
     "execution_count": 28,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "\"b\" < \"A\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "false"
      ]
     },
     "execution_count": 29,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "true === false"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "false"
      ]
     },
     "execution_count": 30,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "true != true"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Variables\n",
    "Variables can hold any type of data type\n",
    "\n",
    "Variables usually use camel case name convention with thefirst letter in lowercase. in some cases underscore and\n",
    "- `var`\n",
    "- `let` (new)\n",
    "- `const` (new)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "23"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Evaluate this question. What is a + b?\n",
    "var a = 34;\n",
    "var b = 21;\n",
    "a = 2;\n",
    "a + b                // what is the answer here?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "// What is c equal to?\n",
    "var c;\n",
    "c                   // it is undefined"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The are funtion similar to Python to enter text, like in python we have input, here in Javascript is prompt().\n",
    "Unfurtunatly, i have not been able to make them work here in Jupyter. The usage is very similar (and also expects text):\n",
    "```javascript\n",
    "prompt(\"What is your name. \")\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can change text to number with the function\n",
    "```javascript\n",
    "Number(variable)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Print in Python is very similar to alert\n",
    "```javascript\n",
    "alert(variable)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A program that could run in a fully functional Javascript Console:\n",
    "```javascript\n",
    "var firstNumber = prompt(\"Please provide the first number\"); \n",
    "var secondNumber = prompt(\"Please provide the second number\"); \n",
    "alert(Number(firstNumber) + Number(secondNumber));\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Conditionals\n",
    "\n",
    "- `if`\n",
    "- `else`\n",
    "- `else if`\n",
    "- ternary operator\n",
    "- switch"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```js\n",
    "// Example\n",
    "var age = prompt(\"What is your age?\");\n",
    "\n",
    "if (Number(age) < 18) {\n",
    "\talert(\"Sorry, you are too yound to drive this car. Powering off\");\n",
    "} else if (Number(age) > 18) {\n",
    "\talert(\"Powering On. Enjoy the ride!\");\n",
    "} else if (Number(age) === 18) {\n",
    "\talert(\"Congratulations on your first year of driving. Enjoy the ride!\");\n",
    "} else {\n",
    "    alert(\"I do not know\");\n",
    "}\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Logical Operators\n",
    "\n",
    "- `&&` : and\n",
    "- `||` : or\n",
    "- `!`  : not"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```js\n",
    "// Example\n",
    "\n",
    "var name = prompt(\"What is your name?\");\n",
    "var age = prompt(\"What is your age?\");\n",
    "\n",
    "if (Number(age) < 18  && name===\"Ann\") {\n",
    "\talert(\"Sorry, you are too yound to drive this car. Powering off\");\n",
    "} else if (Number(age) > 18 || name===\"Peter\") {\n",
    "\talert(\"Powering On. Enjoy the ride!\");\n",
    "} else if (Number(age) === 18 ! name===\"John\") {\n",
    "\talert(\"Congratulations on your first year of driving. Enjoy the ride!\");\n",
    "}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Functions\n",
    "\n",
    "Javascript has several builtin functions, like:\n",
    "\n",
    "- `alert()`\n",
    "- `prompt()`\n",
    "\n",
    "But we can create our own functions in several ways:\n",
    "\n",
    "- `function name() {}` This is called funtion declaration\n",
    "- `var name = function () {}` This is called function expression\n",
    "\n",
    "The return keyword allos a function to return a value\n",
    "- `return`  (our function return undefined if no return keyword is used)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello\n"
     ]
    }
   ],
   "source": [
    "// With this option we named the function\n",
    "function sayHello() {\n",
    "    console.log(\"Hello\");\n",
    "}\n",
    "sayHello()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "hello world\n"
     ]
    }
   ],
   "source": [
    "// We can pass arguments\n",
    "function say(sayit) {\n",
    "    console.log(sayit);\n",
    "}\n",
    "say(\"hello world\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "12"
      ]
     },
     "execution_count": 29,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "function multiply(a,b) {\n",
    "    return a * b\n",
    "}\n",
    "multiply(3,4)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Good Bye\n"
     ]
    }
   ],
   "source": [
    "// In this case we did not named the function, we assigmend the function a variable name\n",
    "var sayBye = function sayHello() {\n",
    "    console.log(\"Good Bye\");\n",
    "}\n",
    "sayBye()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```js\n",
    "// Example\n",
    "function checkDriverAge() {\n",
    "\tvar age = prompt(\"What is your age?\");\n",
    "\tif (Number(age) < 18) {\n",
    "\t\talert(\"Sorry, you are too yound to drive this car. Powering off\");\n",
    "\t} else if (Number(age) > 18) {\n",
    "\t\talert(\"Powering On. Enjoy the ride!\");\n",
    "\t} else if (Number(age) === 18) {\n",
    "\t\talert(\"Congratulations on your first year of driving. Enjoy the ride!\");\n",
    "\t}\n",
    "}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Advanced Functions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hi\n"
     ]
    }
   ],
   "source": [
    "// newer advanced syntax in functions\n",
    "\n",
    "const first = () => {\n",
    "    const greet = \"Hi\";\n",
    "    const second = () => {\n",
    "        console.log(greet);\n",
    "    }\n",
    "    return second;\n",
    "}\n",
    "const newFunc = first();\n",
    "newFunc();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "15"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Curryng\n",
    "\n",
    "const multiply = (a,b) => a * b;\n",
    "const curriedMultiply = (a) => (b) => a * b;\n",
    "const multiplyBy5 = curriedMultiply(3);\n",
    "multiplyBy5(5);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "7"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Compose\n",
    "\n",
    "const compose = (f,g) => (a) => f(g(a));\n",
    "const sum = (num) => num + 1;\n",
    "compose(sum, sum)(5);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Data Structures\n",
    "\n",
    "- Array\n",
    "- Object"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Arrays\n",
    "\n",
    "Arrays are very similar to lists in Python."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {},
   "outputs": [],
   "source": [
    "// Using this array \n",
    "var myArray = [\"Banana\", \"Apples\", \"Oranges\", \"Blueberries\"];"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Apples\n"
     ]
    }
   ],
   "source": [
    "// Arrays support indexing\n",
    "console.log(myArray[1])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Arrays support several methods, some examples:\n",
    "- shift()\n",
    "- pop()\n",
    "- push()\n",
    "- concat()\n",
    "- sort()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'Banana'"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Remove Banana from the array.\n",
    "myArray.shift();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[ 'Apples', 'Blueberries', 'Oranges' ]"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Sort the array in order. \n",
    "myArray.sort();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "4"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Put \"Kiwi\" at the end of the array.\n",
    "myArray.push(\"Kiwi\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[ 'Apples' ]"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Remove \"Apples\" from the array.\n",
    "myArray.splice(0, 1);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[ 'Kiwi', 'Oranges', 'Blueberries' ]"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Sort the array in reverse order. \n",
    "myArray.reverse();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "// Using this array, \n",
    "var myArray2 = [\"Banana\", [\"Apples\", [\"Oranges\"], \"Blueberries\"]];"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'Oranges'"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Access \"Oranges\".\n",
    "myArray2[1][1][0];"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Objects\n",
    "\n",
    "Objects are very similar to dictionaries in Python. Objects store properties."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 35,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'John'"
      ]
     },
     "execution_count": 35,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Define a user object\n",
    "var user = {\n",
    "    name: \"John\",\n",
    "    age: 34,\n",
    "    hobby: \"Soccer\",\n",
    "    isMarried: false,\n",
    "};\n",
    "user.name"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{ name: 'John',\n",
       "  age: 34,\n",
       "  hobby: 'Soccer',\n",
       "  isMarried: false,\n",
       "  favouriteFood: 'Spinach' }"
      ]
     },
     "execution_count": 36,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Expand the user object\n",
    "user.favouriteFood = \"Spinach\";\n",
    "user"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'Sally'"
      ]
     },
     "execution_count": 37,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Create an array called \"newsfeed\" which contains 3 objects with properties \"username\" and \"timeline\".\n",
    "var newsFeed = [\n",
    "  {\n",
    "    username: \"Bobby\",\n",
    "    timeline: \"So exited!\"\n",
    "  },\n",
    "  {\n",
    "    username: \"Sally\",\n",
    "    timeline: \"JS is sooooo cool!\"\n",
    "  },\n",
    "  {\n",
    "    username: \"Mitch\",\n",
    "    timeline: \"JS is preeetyy cool!\"\n",
    "  }\n",
    "];\n",
    "newsFeed[1].username"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Objects also have methods like:\n",
    "- pop()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Loops\n",
    "\n",
    "- `for`\n",
    "- `while`\n",
    "- `do` \n",
    "- `forEach` (new) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "0 'Clean!'\n",
      "1 'Wash!'\n",
      "2 'Drive!'\n",
      "3 'Buy!'\n",
      "4 'Work!'\n"
     ]
    }
   ],
   "source": [
    "// for example\n",
    "var toDos = [\n",
    "    \"Clean\", \n",
    "    \"Wash\", \n",
    "    \"Drive\", \n",
    "    \"Buy\", \n",
    "    \"Work\"\n",
    "];\n",
    "for (var i=0; i < toDos.length; i++) {\n",
    "    console.log(i,toDos[i]+\"!\");\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "0\n",
      "1\n",
      "2\n",
      "3\n",
      "4\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "4"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// while example\n",
    "var counterOne = 0;\n",
    "while (counterOne < 5) {\n",
    "    console.log(counterOne);\n",
    "    counterOne++             // increases counterOne by one\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "5\n",
      "4\n",
      "3\n",
      "2\n",
      "1\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "1"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// do example\n",
    "var counterTwo = 5;\n",
    "do {\n",
    "    console.log(counterTwo);\n",
    "    counterTwo--;\n",
    "} while (counterTwo > 0);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Clean 0\n",
      "Wash 1\n",
      "Drive 2\n",
      "Buy 3\n",
      "Work 4\n"
     ]
    }
   ],
   "source": [
    "// forEach example\n",
    "var toDos = [\n",
    "    \"Clean\", \n",
    "    \"Wash\", \n",
    "    \"Drive\", \n",
    "    \"Buy\", \n",
    "    \"Work\"\n",
    "];\n",
    "\n",
    "function logToDos(toDo, index) {\n",
    "    console.log(toDo, index);\n",
    "}\n",
    "\n",
    "toDos.forEach(logToDos);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Ternary Operator"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'You may enter'"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// If the condition is true, uses expresion 1, if it is false, it uses expression 2\n",
    "// condition ? expression 1 : expression 2\n",
    "\n",
    "function isUserValid(bool) {\n",
    "    return bool;\n",
    "}\n",
    "var answer = isUserValid(true) ? \"You may enter\" : \"Access denied\";\n",
    "answer"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Switch statement"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'You run into a troll'"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// \n",
    "function moveCommand(direction) {\n",
    "    var whatHappens;\n",
    "    switch (direction) {\n",
    "        case \"forward\":\n",
    "            whatHappens = \"You encounter a monster\";\n",
    "            break;\n",
    "        case \"back\":\n",
    "            whatHappens = \"You arrived home\";\n",
    "            break;\n",
    "        case \"right\":\n",
    "            whatHappens = \"You found a river\";\n",
    "            break;\n",
    "        case \"left\":\n",
    "            whatHappens = \"You run into a troll\";\n",
    "            break;\n",
    "        default:\n",
    "            whatHappens = \"Please enter a valid direcction\"\n",
    "    }\n",
    "    return whatHappens;\n",
    "}\n",
    "moveCommand(\"left\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Javascript Keywords\n",
    "\n",
    "- break\n",
    "- case\n",
    "- catch\n",
    "- class\n",
    "- const\n",
    "- continue\n",
    "- debugger\n",
    "- default\n",
    "- delete\n",
    "- do\n",
    "- else\n",
    "- export\n",
    "- extends\n",
    "- finally\n",
    "- for\n",
    "- function\n",
    "- if\n",
    "- import\n",
    "- in\n",
    "- instanceof\n",
    "- new\n",
    "- return\n",
    "- super\n",
    "- switch\n",
    "- this\n",
    "- throw\n",
    "- try\n",
    "- typeof\n",
    "- var\n",
    "- void\n",
    "- while\n",
    "- with\n",
    "- yield"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Go back](#Sections)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The Document Object Model\n",
    "\n",
    "- JavaScript can change all the HTML elements in the page\n",
    "- JavaScript can change all the HTML attributes in the page\n",
    "- JavaScript can change all the CSS styles in the page\n",
    "- JavaScript can remove existing HTML elements and attributes\n",
    "- JavaScript can add new HTML elements and attributes\n",
    "- JavaScript can react to all existing HTML events in the page\n",
    "- JavaScript can create new HTML events in the page"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can type document on the console and you have access to the DOM\n",
    "\n",
    "> doument\n",
    "> document.write(\"Hello\");\n",
    "\n",
    "There is a parent object, window, and document is a property of the window\n",
    "\n",
    "> window\n",
    "> window.alert(\"hey, hey\");\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### DOM Selectors\n",
    "\n",
    "- getElementsByTagName\n",
    "> document.getElementByTagName(\"h1\");\n",
    "\n",
    "- getElementsByClassName\n",
    "> document.getElementsByClassName(\"class-name\");\n",
    "\n",
    "- getElementById\n",
    "> document.getElementById(\"id-name\");\n",
    "\n",
    "- querySelector\n",
    "> document.querySelector(\"li\");\n",
    "\n",
    "- querySelectorAll\n",
    "> document.querySelectorAll(\"li\");\n",
    "\n",
    "- getAttribute (get the value of the attribute)\n",
    "> document.querySelector(\"li\").getAttribute(\"attribute-name\");\n",
    "\n",
    "- setAttribute\n",
    "> document.querySelector(\"li\").setAttribute(\"attribute-name\", new_value);\n",
    "\n",
    "\n",
    "### Changing Styles\n",
    "\n",
    "- style.{property} // ok for a simple things\n",
    "> document. querySelector(\"h1\").style.background = \"yellow\":\n",
    "\n",
    "- className //best\n",
    "> document.querySelector(\"h1\").className = \"class_name\";\n",
    "\n",
    "- classList //best\n",
    "> document.querySelector(\"li\").classList = \"class_name\";\n",
    "\n",
    "- classList.add\n",
    "> document.querySelector(\"li\").classList.add(\"class_name\");\n",
    "\n",
    "- classList.remove\n",
    "> document.querySelector(\"li\").classList.remove(\"class_name\");\n",
    "\n",
    "- classList.toggle\n",
    "> document.querySelector(\"li\").classList.toggle(\"class_name\");\n",
    "\n",
    "\n",
    "### Bonus\n",
    "\n",
    "- innerHTML //DANGEROUS\n",
    "> document. querySelector(\"h1\").innerHTML = \"Strong\"\n",
    "- parentElement\n",
    "> document. querySelector(\"li\").parentElement.parentElement...\n",
    "- children\n",
    "> document. querySelector(\"li\").parentElement.parentElement.children...\n",
    "\n",
    "__It is important to CACHE selectors in variables__"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### DOM Events\n",
    "\n",
    "Javascript can listen to events in the browser, like mouse clicks and enter keyboard clicks.\n",
    "\n",
    "// Mouse events\n",
    "\n",
    "> var button = document.getElementsByTagName(\"button\")[0];\n",
    "> button.addEventListener(\"click\", function() {\n",
    "    console.log(\"Click!!!\");\n",
    "  })\n",
    "> button.addEventListener(\"mouseleave\", function() {\n",
    "    console.log(\"Click!!!\");\n",
    "  })\n",
    "> button.addEventListener(\"mouseenter\", function() {\n",
    "    console.log(\"Click!!!\");\n",
    "  })\n",
    "  \n",
    "> var button = document.getElementsById(\"enter\");\n",
    "> var input = document.getElementsById(\"userinput\");}\n",
    "> var ul = document.querySelector(\"ul\");\n",
    "\n",
    "> button.addEventListener(\"click\", function() {\n",
    "    var li = document.createElement(\"li\");\n",
    "    li.appendChild(document.createtextNode(\"testing\"));\n",
    "    ul.appendChild(li);\n",
    "  })\n",
    "  \n",
    "> input.addEventListener(\"keypress\", function() {\n",
    "    ;\n",
    "  })"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Javascript (Node.js)",
   "language": "javascript",
   "name": "javascript"
  },
  "language_info": {
   "file_extension": ".js",
   "mimetype": "application/javascript",
   "name": "javascript",
   "version": "10.13.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}