{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# HTML, CSS, and JavaScript Basics\n",
    "This an example showing the basics of using the HTML, CSS, JavaScript technology."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The basic structure of an HTML page\n",
    "1. Above the HTML there can be a doctype declaration (which html standard you are using)\n",
    "2. The outer element is html\n",
    "2. There is a head and a body\n",
    "3. There are a lot of other tags that specify the content, layout and behavior of the page. Collectively all of these are referred to as the DOM or document object model.  \n",
    "\n",
    "```html\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "    <head>\n",
    "    </head>\n",
    "    <body>\n",
    "    </body>\n",
    "</html>\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Everything that sets the page up is in the head. That is the title, any metadata, any format commands and any loading of external scripts.\n",
    "\n",
    "+ For example if you want to load an external set of format commands in the css syntax \n",
    "\n",
    "```html\n",
    "<head>\n",
    "    <link href=\"./css/literallycanvas.css\" rel=\"stylesheet\" />\n",
    "</head>\n",
    "```\n",
    "\n",
    "+ We could have used a `<style>` tag and put all of our definitions there to create the same effect. The only difference is the who gets executed last. The precedence is first to apply all the styles imported from a file (in the order listed), then apply the styles defined in the head or body in a style tag, and finally any style in a html tag that is an attribute.\n",
    "\n",
    "```html\n",
    "<head>\n",
    "    <link href=\"./css/literallycanvas.css\" rel=\"stylesheet\" />\n",
    "    <style>\n",
    "        p {font-weight:bold;}\n",
    "    </style>\n",
    "</head>\n",
    "```\n",
    "+ This would apply the style sheet specified by the href attribute, and then make all the `<p></p>` elements bold after applying the style sheet.\n",
    "\n",
    "+ If we wanted a single `<p></p>` tag to not be bolded we can specify that in the style attribute\n",
    "```html\n",
    "<html>\n",
    "    <head>\n",
    "        <link href=\"./css/literallycanvas.css\" rel=\"stylesheet\" />\n",
    "        <style>\n",
    "            p {font-weight:bold;}\n",
    "        </style>\n",
    "    </head>\n",
    "    <body>\n",
    "        <p> A bolded paragraph </p>\n",
    "        <p stlye=\"font-weight:normal\"> A normal weight paragraph </p>\n",
    "    </body>\n",
    "</html>\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "### Loading of external JavaScript or defining your own\n",
    "Much like the css commands that describe the formatting and presentation specifics, scripts that execute when the page is loaded can be included in the `<head>` section of the html document. Also like css, the syntax is different from html. \n",
    "\n",
    "+ For example, to load an external JavaScript program or library use the script tag, and use the src attribute to point to the \n",
    "file. It is common to see a cdn (content delivery network) url here, it is just pointing to the text file that has the code in it.\n",
    "```html\n",
    "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\n",
    "```\n",
    "\n",
    "+ You may also define your own program in JavaScript in the head element. This will be executed before the rest of the page loads, so it is common to see the `<script>` tag in both the head (before loading) and the body (after loading) to optimize load speed.\n",
    "```html\n",
    "<script>\n",
    "// My JavaScript function\n",
    "// output to the browser console\n",
    "console.log('My desired output: You find it by looking at inspect element, or f12 in the browser');\n",
    "// output to a window that pops up\n",
    "alert('My desired output: just pops up in your face');\n",
    "</script>\n",
    "```\n",
    "\n",
    "+ The script tag is actually legal in any part of the html document, and JavaScript has a few weird rules about moving function definitions and variable definitions around after executing them. This is known as Hoisting see for examples http://www.w3schools.com/js/js_hoisting.asp\n",
    "\n",
    "+ JavaScript is a mix of syntaxes but resembles java in some ways. Its main purpose is to alter the html on the client side, as such its basic language components are centered around finding a tag, extracting content and putting it a changed version back in.\n",
    "\n",
    "+ Since all browsers implement some subset of JavaScript or ECMA Script, there are an infinite number of libraries to make things easier. Two of the most important libraries are [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming) and [JQUERY](http://jquery.com/). [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming) is based on getting information from a server and updating a single piece of the html without reloading the entire page and [JQUERY](http://jquery.com/) is about making the selection of tags easier and more consistent with the CSS syntax. Other JavaScript libraries that are popular are [Bootstrap][bs] (about layout and buttons etc), [React.js][react] (some extra tools for making user interfaces), [Angular][Angular] (helps in web apps). These are all programmed in JavaScript and are typically executed in the head section by linking to the library through a cdn or serving the library file yourself.  \n",
    "\n",
    "[bs]:http://getbootstrap.com/\n",
    "[react]:https://facebook.github.io/react/\n",
    "[Angular]:https://angularjs.org/"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Everything that gets displayed is in the body.\n",
    "All of the content that is actually displayed on your web browser is in the body. The body contains a lot of markup that determine how the content is displayed and when put together with all the set of up in the head gives you the final product.\n",
    "\n",
    "+ There are several specifications of what the tags mean, and the current most advanced version is HTML 5. Unlike XHTML (HTML 4) the specification does not require HTML to be a proper subset of XML. \n",
    "\n",
    "+ Two of the most important inclusions in HTML 5 are the `<canvas></canvas>` and `<svg></svg>` markups. These allow complex dynamic graphics in html.\n",
    "\n",
    "+ The are 3 principal components to any of the markup tags in the head or body. This is the tag name, the attributes, and the tag content. HTML is comprised of specific tags (unlike xml), most with certain common attributes that have defined values and the content is changed to fit the purpose of the page. There are a few standard attributes like 'id' and 'class' that JavaScript and css use to select elements of pages.\n",
    "\n",
    "```html\n",
    "<html>\n",
    "    <head>\n",
    "        <style>\n",
    "        .important-paragraph {color:red;font-size:22pt;}\n",
    "        </style>\n",
    "    </head>\n",
    "    <body>\n",
    "        <p id=\"first-paragraph\" class=\"important-paragraph\"> My First Paragraph </p>\n",
    "        <script>\n",
    "            var myP = document.getElementById(\"first-paragraph\")\n",
    "            alert(myP.innerHTML);\n",
    "        </script>\n",
    "    </body>\n",
    "</html>\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Remember current HTML is really 3 different syntaxes\n",
    "1. HTML - The markup that looks like `<tag_name attribute='value'> content </tag_name>`.\n",
    "Example:\n",
    "```html\n",
    "<img src=\"./myImage.png\" />\n",
    "<h3 id=\"section-III\"> My third level heading </h3>\n",
    "```\n",
    "2. CSS - Stuff inside of `<style></style>` that is in the form `css_selector {css_attribute:css_value; css_attribute:css_value;}`. Note this can be imported using the link tag or put in the html using the style attribute of the html tag.\n",
    "Example:\n",
    "```html\n",
    "<style>\n",
    "    #section-III {color:green;\n",
    "                  font-weight:bold;\n",
    "                  font-size:22pt}\n",
    "</style>\n",
    "```\n",
    "or\n",
    "```html\n",
    "<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>\n",
    "```\n",
    "or \n",
    "```html\n",
    " <h3 id=\"section-III\" style=\"color:green;font-weight:bold;font-size:22pt\"> My third level heading </h3>\n",
    " ```\n",
    " \n",
    "3. JavaScript (ECMA Script) - Stuff inside of the `<script></script>` tag. This can be loaded from an external file using the src attribute. Its main purpose is to change the content of html dynamically. The syntax looks like C with the naming conventions similar to java. \n",
    "Example:\n",
    " ```html\n",
    " <script>\n",
    "     // A program that uses a loop to build a list and then outputs the list to an element chosen by its id\n",
    "     /* Also we could \n",
    "     use the block comment.\n",
    "     */\n",
    "     \n",
    "     // intialize an empty list\n",
    "     var myList=[];\n",
    "     \n",
    "     // run a for loop and put in new values for list elements\n",
    "     for(i=0;i<=12;i++){\n",
    "     myList.push('My new line number '+ i);\n",
    "     }\n",
    "     \n",
    "     // Flatten the list into a string (yes I know we could have just done a string in the first place)\n",
    "     var outString=\"\"\n",
    "     \n",
    "     for(i=0,i<=myList.length,i++){\n",
    "     outString=outString+myList[i]\n",
    "     }\n",
    "     \n",
    "     document.getElementById('section-III').innerHTML=outString;\n",
    " </script>\n",
    " ```\n",
    " or \n",
    " ```html\n",
    " <script src=\"./myMagic.js\"></script>\n",
    " ```\n",
    " \n",
    "     \n",
    "                  \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## View Source, Inspect Element and What You See in The Browser\n",
    "Every browser (Internet Explorer, Edge, Safari, Chrome, Firefox) acts as a complier, integrated development environment and complex graphic rendering program for all three syntaxes. The pieces of this that one sees most often is the end result of compiling and running all the JavaScript, rendering of the css and html. But hidden along with this is the \"source code\" and the new markup after running all of the code, and the displayed result. \n",
    "1. __View Source__: Right Click on Windows, Apple-Click on Mac\n",
    "    Shows the source of the page. This is before any JavaScript has been executed.\n",
    "2. __Inspect or Inspect Element__:  Right Click on Windows, Apple-Click on Mac sometimes F12. This shows the markup after running the JavaScript on the page once. Now these elements can change if you press a button, fill out a text box, etc. This is a combination of the output of console.log() and the markup in real time.\n",
    "3. __Final result in the browser__: This is a little different for each browser, but in principal it should be close. Internet Explorer is infamous for not adhering to the standards for JavaScript, etc.  In addition, there are a few browser specific commands (should not be but still are) and several standards that are not implemented across the board.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Common Patterns in HTML, CSS, JavaScript\n",
    "\n",
    "There are a series of patterns that if you look at the source of most websites you will see over and over. In addition, there are a few tricks that are commonly applied. \n",
    "\n",
    "1. Using the `<div></div>` tag to output the results of some complicated JavaScript function. This is usually accomplished by setting the id or class attributes of the tag and then using some function that overwrites them. \n",
    "\n",
    "2. Using information in the `<meta content=\"\" name=\"\"/>` tags in `<head></head>` to input into functions\n",
    "\n",
    "3. Talking with a server through forms. Forms are special tags that are meant as input to a server, they collect a set of inputs and send them to a server all at once, the page that they submit them to \n",
    "\n",
    "4. Having so much JavaScript and css that the source of the page is unreadable. \n",
    "\n",
    "5. The \"this\" pattern in JavaScript.\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## A basic example of a plot with a fancy equation\n",
    "<a href=\"./SVG_MathJax_Example_20160202_001.html\"> Open the file to see it for yourself </a>\n",
    "\n",
    "```html\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<head>\n",
    "    <!-- Metadata Tag Specifying the Character Set Used -->\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <!-- Metadata Tag For a Description and Author -->\n",
    "    <meta name=\"description\" content=\"An HTML page that illustrates SVG, Ploting and Latex.\"/>\n",
    "    <meta name=\"author\" content=\"Aric Sanders\">\n",
    "\n",
    "    <!--  Tag to Add an Icon to the Browser Tab -->\n",
    "    <link rel='shortcut icon' type='image/ico' href='/favicon.ico'>\n",
    "\n",
    "    <!-- Title, It Will Appear in The Browser Tab -->\n",
    "    <title>SVG, Ploting and Latex</title>\n",
    "\n",
    "    <!-- Load a set of external javascript functions from the file found at\n",
    "    https://cdn.mathjax.org/mathjax/latest/MathJax.js, this is the library that does the latex magic -->\n",
    "    <script type=\"text/x-mathjax-config\">\n",
    "    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']]}});\n",
    "    </script>\n",
    "    <script type=\"text/javascript\" async\n",
    "    src=\"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML\">\n",
    "    </script>\n",
    "\n",
    "    <!-- Load a set of external javascript functions from the file found at\n",
    "    https://cdn.plot.ly/plotly-latest.min.js, this is the library that plots data using javascript to define\n",
    "     an svg interactive plot-->\n",
    "  <script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>\n",
    "\n",
    "  <!-- both of these libraries could be copied and stored in a different location. If they in the same folder and\n",
    "  referenced with src=\"./plotly-latest.min.js\" in theory your browser does not even have to have an internet connection.\n",
    "  Sometimes this fails because of browser security settings. -->\n",
    "\n",
    "\n",
    " <!-- css styles are defined inside of the css tag where everything has a different syntax-->\n",
    "  <style>\n",
    "    /* css comments only use the block comment form from c */\n",
    "\n",
    "      /* this  statement chooses anything with the tag line and makes it red. Note\n",
    "      since these are part of an svg tag you need to look up the attributes that you can\n",
    "      change see for example https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line */\n",
    "      line {stroke:red};\n",
    "\n",
    "      /* this  statement says any time you hover over a line make it thicker */\n",
    "      line:hover {stroke-width:5;}\n",
    "\n",
    "\n",
    "      /* this selector statement chooses anything with the class myGroupOfCircles, or when you hover over <p></p>\n",
    "      or <h1></h1> or an <a></a> tag */\n",
    "      .myGroupOfCircles, p:hover, h1:hover, a:hover {\n",
    "    background-color: yellow;\n",
    "        }\n",
    "\n",
    "      /* Example for the tag name circle */\n",
    "      circle {fill:blue;}\n",
    "\n",
    "      /* Example for the anything with class attribute set to myGroupOfCircles and when the mouse is hovering over it*/\n",
    "      .myGroupOfCircles:hover {fill:yellow;opacity:.3;}\n",
    "\n",
    "      /* Example for anything with the id attribute set to myParticularCircle */\n",
    "      #myParticularCircle {opacity:.5}\n",
    "\n",
    "  </style>\n",
    "</head>\n",
    "<body>\n",
    "\n",
    "    <h1>The SVG  to make a few circles and lines between them</h1>\n",
    "\n",
    " <!-- Display the SVG (an xml based vector graphics format)\n",
    " if you want to make really elaborate svg's use Inkscape -->\n",
    "<svg height=\"250\" width=\"250\">\n",
    "    <!-- Definitions of markers for lines-->\n",
    "    <defs>\n",
    "        <marker id='head' orient='auto' markerWidth='1' markerHeight='2'\n",
    "            refX='0.1' refY='2'>\n",
    "            <path d='M0,0 V4 L2,2 Z' fill='red' />\n",
    "        </marker>\n",
    "    </defs>\n",
    "    <!-- little g stands for group -->\n",
    "    <g>\n",
    "        <!-- This makes the line a hyperlink. Inside of the SVG you have to give the hyperlink a namespace so it knows\n",
    "        that you did not make up another tag with attribute href. This is why inside of the svg tag you need to\n",
    "         put xlink:href-->\n",
    "       <a xlink:href=\"http://example.com/link/\">\n",
    "           <!-- the line tag works the way you would expect it to, it has a lot of optional attributes-->\n",
    "           <line x1=\"50\" y1=\"50\" x2=\"200\" y2=\"50\" stroke=\"black\" stroke-width=\"3\"/>\n",
    "       </a>\n",
    "       <line x1=\"50\" y1=\"50\" x2=\"200\" y2=\"200\" stroke=\"black\" stroke-width=\"2\"/>\n",
    "\n",
    "       <!-- The path tag is magic. It is effectively the turtle in LOGO with extra magic\n",
    "       , M stands for move, L stands for line\n",
    "       you can make curves, arcs etc. The d attribute is the key  M50,50 is move to 50,50,\n",
    "       L100,100 is Line to 100,100. The syntax for curves and arcs gets a little more involved see\n",
    "       https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d. for examples.\n",
    "       https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path-->\n",
    "      <path\n",
    "      id='arrow-line'\n",
    "      marker-mid='url(#head)'\n",
    "      marker-end='url(#head)'\n",
    "      stroke-width='3'\n",
    "      fill='none' stroke='black'\n",
    "      d='M50,50 L100,100 L200,200'/>\n",
    "\n",
    "\n",
    "    <!-- Circle just requires a center cx=,cy=  and a radius which I specifiy in pixels like the size of the svg tag -->\n",
    "    <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" />\n",
    "\n",
    "    <!-- Circle with a hyperlink and some attributes defined locally -->\n",
    "    <a xlink:href=\"http://example.com/link/\">\n",
    "        <circle class=\"myGroupOfCircles\" cx=\"200\" cy=\"50\" r=\"20\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" />\n",
    "    </a>\n",
    "    </g>\n",
    "    <!-- Circle with an id -->\n",
    "    <circle class=\"myGroupOfCircles\" cx=\"200\" cy=\"200\" r=\"20\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" id=\"myParticularCircle\"/>\n",
    "\n",
    "    <!-- Here it is important to note that in order to use css to alter the svg, it has to be an svg tag. If\n",
    "    you use <img src=\"mySVG.svg\" /> the svg will display properly (it gets converted to a raster image) but\n",
    "    the css and internal hyperlinks will not work. -->\n",
    "</svg>\n",
    "\n",
    " <!-- Now for the plot. In the source you only have this lowly div tag, but when the javascript at the end of the page\n",
    " gets run it replaces the div tag with an svg. The javascript at the end of the page uses the functions and classes\n",
    " defined by the <script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script> tag in the head.\n",
    "  You can see the resulting svg by using inspect element on your\n",
    " browser usually F12 or right click-->\n",
    "     <h1>The plotly plot</h1>\n",
    " <div id=\"myDiv\" style=\"width: 480px; height: 400px;\"><!-- Plotly chart will be drawn inside this DIV --></div>\n",
    "\n",
    "\n",
    "<!-- Now for the latex. When the script tag\n",
    " <script type=\"text/javascript\" async  src=\"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML\"></script>\n",
    " runs, it looks through the source, after the rest of the page is loaded, looking for any $$. If it finds them\n",
    " it assumes it is Latex. see https://www.mathjax.org/ just because 3 syntaxes were not enough.\n",
    " -->\n",
    "<h1>The Mathjax latex</h1>\n",
    "<p>When $a \\ne 0$, there are two solutions to \\(ax^2 + bx + c = 0\\) and they are\n",
    "$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$</p>\n",
    "\n",
    "\n",
    "<!-- By tradition, scripts in the body are usually put at the very bottom so that the page loads\n",
    "    and then the scripts run. Inside the script tag we change our syntax to JavaScript -->\n",
    "\n",
    "<script>\n",
    "  // We define a variable that is a class in JavaScript,\n",
    "  // that has pretty much the same form as a dictionary in Python.\n",
    "  // Unlike CSS, we have both line and block comments.\n",
    "  var trace1 = {\n",
    "  x: [1, 2, 3, 4],\n",
    "  y: [10, 15, 13, 17],\n",
    "  type: 'scatter'\n",
    "   };\n",
    "  // This format is dictated by the plotly.js library see https://plot.ly/\n",
    "  // There are a bunch of javascript plotting libraries I just choose plotly because it had a cdn and a python counterpart\n",
    "var trace2 = {\n",
    "  x: [1, 2, 3, 4],\n",
    "  y: [16, 5, 11, 9],\n",
    "  type: 'scatter'\n",
    "};\n",
    "// data is a list or array of traces\n",
    "var data = [trace1, trace2];\n",
    "\n",
    "// This class method lives someplace in the plotly-latest.min.js it\n",
    "// uses the id on my div to replace it with the plot\n",
    "Plotly.newPlot('myDiv', data);\n",
    "\n",
    "</script>\n",
    "\n",
    "</body>\n",
    "</html>\n",
    "```"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
