30:T110c,md`## The Glue That Holds it Together --- So now that we have a place to work and build applications in, we need to look at the tools that enpower us to create these apps. This toolkit will give you the capability to do a good deal of client-side development without having to own a server or manage a huge cloud deployment. ### Toolkit: - [Github](http://github.com) - Code repository that allows you to serve your app from Github Pages. - Top Editors * [Atom](http://atom.io) - Customizable IDE with plug-ins, Syntax highlighting, and debugging. * [Visual Studio Code](https://code.visualstudio.com/) - Another customizable IDE with plug-ins, Syntax highlighting, and debugging. * [WebStorm](https://www.jetbrains.com/webstorm/) - Top heavy IDE that has many of the features of the others built in and is a paid product. - [Observable](http://observablehq.com) - Web-based notebook that allows collaborative work on code snippets and sharing examples. - [Stack Overflow](https://stackoverflow.com/) - One of the best sites for asking questions and searching for answers to many programming questions. Anytime you have a question, this should be your goto destination for a solution. - [Javascript](https://www.w3schools.com/js/) - This is the glue... For all of the exercises in this assignment we will use Observable and enter our code here on the code areas. For the last exercise you will also need to answer a few questions in that section. ## The Language of the Web --- The web has grown and changed drastically over its lifetime. In the beginning we were given static text, enhanced sightly over time by tags that became the html standard. Later, programs written in languages such as perl and c ran directly on the web servers, generating pages based on information sent to the server via get or post methods. These methods are different than the RESTful methods of the same name. Server based applications allowed for a more interactive experience and took the burden of processing off of the clients, which were slow underpowered devices. As devices became more powerful and users needed more resposive web pages, a means was necessary to work and manipulate the client side: the browser. JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications. During the early years of the browser wars the standard grew and developed along with the DOM to give us a powerful environment to comunicate and display data in many ways. Today we have a need for web apps that appear no different than desktop applications. Mobile sites need to act and work like native apps and work offline for times when you're don't have a connection. The answer is JavaScript. So what is the question? The simplist one is, "How can I programatically build logic into and manipulate static HTML pages?" In the 17 years since it was created, the environment has grown and developed a life of its own. In addition to manipulating the client side of the web, it is now used to run server based APIs, cloud-based functions as a service, and even cross platform desktop apps that can use the same frameworks you use on the web. JavaScript has become the de-facto standard programming language of the Web, not only because of its first-mover advantage, but because it is open, standardized, and, most importantly a very good language; well-suited to the Web with its dynamic nature and tight integration with the DOM. The terrific trio of HTML5, CSS3, and Javascript has brought on an age of progressive web apps that run anywhere on any device. ![alt text](https://thebhwgroup.com/sites/default/images/HTML_CSS_JS.png "html5-css-js") ## Valuable Resources --- To complete this assignment you will need to refresh yourself on Javascript and its syntax. If you're feeling good about it, then jump right in and start the exercises. If not, then check out the links below: - [freecodecamp.org](https://www.freecodecamp.org/) - [Javascript.com](https://www.javascript.com/) - [Stack Overflow](https://stackoverflow.com/) (VERY IMPORTANT) If you feel confident to move on, this link is a good resource for reference. You can choose particular topics and search for syntax or a keyword: - [W3C Javascript Tutorial](https://www.w3schools.com/js/) - This site has tons of useful reference info on Javascript, HTML, and CSS. `31:T7aa,md` ## Reusable Code --- ### Reuse, reuse, reuse... To make our coding easier and to maximize the use of our code we need to be able to create section of code that can be reused without have to retype or copy it. Copying code could lead to sections that don't get updated or fixed for bugs, while other sections are. This can lead to disasterous results with crashed apps or even worse, inaccurate results that could be misleading. So we need a simple way to do this and still get the functionality we need. ### Fun, fun, fun(ctions) So the easiest way to reuse code, is to use functions. A JavaScript function is a block of code designed to perform a particular task. Functions can take parameters or not and should return a value. That value can be used as data, an error code, or ignored. A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: {} ---

function name(parameter1, parameter2, parameter3) {
    code to be executed
}

--- To create a simple addition function we would use: ---

function add(x, y) {
    return(x+y);  // Return the sum of the two parameters
}

--- Now you can take a repetative task and write it once and use it everywhere. But there is more to come. ### Have Some Class Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations. One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class ("Rectangle" here). `32:[] 2e:{"title":"Assignment1","cells":[{"id":178,"value":"md`# Assignment1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`\n![BMI Stony Brook](https://bmi.stonybrookmedicine.edu/sites/default/files/webfiles/stony-brook-university-bmi-300.png)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# BMI-512 Programming Project 1\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## The Web - Our Future OS\n***\nAs web technology has advanced, the gap between your native OS on your devices and progressive web apps written in Javascript, has become blurred. These apps are agile, light, and appear for all purposes to be native on your devices. In addition, manufacturers are increasingly giving us access to the devices lower level hardware. This allows us to write powerful applications that have access to the devices' resources, can be distributed by a dereferenceable link, and can be managed through a simple manifest file that defines the app to your devices. These apps are the tools we can provide to doctors, researchers, and students to improve and facilitate their activities. The more we can do to make the adoption of these apps seamless, the better the users experience. It will be important to use standards and tools that make this easy to accomplish.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`\n ## Requirements\n---\nFor this assignment please follow these steps:\n1. Get a github account if you don't have one.\n2. Pick a development environment (editor) and set it up on your laptop/notebook. If you have any questions contact me. [Mail me](mailto:joseph.balsamo@stonybrookmedicine.edu)\n3. Set up an account using your github on [Observable](http://observablehq.com) and when you get the link for this notebook, click fork at the top of the page to make a copy in your account. This is where you will do the assignment and add notes or comments after each section. **If you don't fork it, you won't get credit for it.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`\n## Time to Work\n---\nSo what can we do with Javascript? More things than we can cover in one document. Lets look some simple things you can do.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"html`\n

Header 1

\n This is some text.\n

footer text

\n action bar\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`\nSo given the above HTML, we can use a few commands to get and manipulate the page.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"// First we can getan element like a div or span.\ndocument.getElementById('test1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"// Next we can getan element like a div or span, then get its children and view the text.\ndocument.getElementById('myfooter').childNodes[1].innerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"md`\nSo now lets move on to the exercises. Before you do them please read the [DOM pages](https://www.w3schools.com/jsref/dom_obj_attributes.asp) at W3C to learn the commands necessary to move forward. Please pay particular attention to the Attribute, Document, and Element pages.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"html`\n\n\t\n\n\n\t

\n\t\t

Example 1

\n\t

\n\t\tHello, world!\n\t

\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`\n## Exercise 1a\nIn **example 1**, we see the classic \"Hello,world!\" program. For this exercise, please start by writing code to change the text in the span to your name. Click on the asterisk next to the code area below to edit it. You will need to get the element from the DOM by its ID and change its text content. If you're unsure on how to do this, check with the reference sites you were given. Specifically working with the DOM. Use the ID's from the elements in Example 1 to do your work. To view the ID's and HTML in Example 1, click on the asterisk next to the code area for that example.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"//Exercise 1a - answer here\n{\n // Code goes here\n return(\"Exercise 1a\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"md`\n## Exercise 1b\nNow by writing code, change the style of the text in the span by adding color. Then alter the size of the text in the div \"hw\". Once again you will need to get the elements from the DOM by their ID and change its styles.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"// Exercise 1b Solution\n{\n return(\"Exercise 1b code\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`\n## Exercise 1c\nUse Javascript code to add a \"highlight\" class to the span \"demoName\". Once again you will need to get the element from the DOM by its ID to apply the class.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"// Exercise 1c code\n{\n\treturn(\"Exercise 1c code\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"html`\n\n

\n\t

\n\t\tThe quick brown fox jumped over the lazy dog.\n\t

\n\t

\n\t\t\n\t

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`\nIf you have any questions about the functions, objects, and tasks requested here in this exercise, search on the [W3SCHOOLS site](https://www.w3schools.com/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`\n## Exercise 2a\nLook at the html code for Example 2 and note the div with the id \"myForm\". Add a button labeled \"Update\" to the the \"myForm\" div using the appendChild() method. Then add a click event for that button, that pops up an alert window that states \"Under construction\" when clicked.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"// Exercise 2a code.\n{\n return(\"Exercise 2a code\"); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`\n## Exercise 2b\nUse javascript to the following items:\n\n- add a radio button group labeled \"speed\" with several choices in addition to \"Quick\"\n- add a dropdown option select box with several colors in addition to \"Brown\".\n- add a group of checkboxes, with several other animals in addition to a \"Fox\".\n\nMake sure to add them to the \"myForm\" div, right before the Update button using the insertBefore() method. Place the code in the Exercise 2b section below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"// Exercise 2b code\n{\n return(\"Exercise 2b code\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`\n## Exercise 2c\nCreate a new event handler so that when you click the update button, the appropriate text spans are updated with the currently selected items. Be aware that the checkboxes can give you multiple values returned. Choose how you will deal with it and give your reasoning in a comment preceded by \"//\".\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"// Exercise 2c code\n{\n return(\"Exercise 2c code\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"class Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n // Getter\n get area() {\n return this.calcArea();\n }\n // Method\n calcArea() {\n return this.height * this.width;\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"{\n const square = new Rectangle(10, 10);\n return(square.area); // 100\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`\nIf that was all you get out of classes, then it would not be much. Classes have another super power. Classes can be extened as in the example below. The Dog class extends the Animal class. As such, all the attributes and methods of the original class are available to the extended class.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"class Animal { \n constructor(name) {\n this.name = name;\n }\n \n speak() {\n return(this.name + ' makes a noise.');\n }\n \n moves() {\n return(this.name + 'moves a step.');\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`\nThe class Dog overloads the function speak to make a dog bark. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"class Dog extends Animal {\n speak() {\n return(this.name + ' barks.');\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"{\n var a = new Animal('Rex');\n return(a.speak()); // Rex speaks.\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"{\n var d = new Dog('Mitzie');\n return(d.speak()); // Mitzie barks.\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`\nAs you can see in the code above, each speak call returns the appropriate values for the class. Classes are now the swiss army knife of the Javascript world.\n\n### Exercise 3\n---\nNow that we have looked at classes, we want you to create a set of classes that represent a patient and the tasks you would perform with them. Start with three classes: Person, Staff, and Patient. Staff and Patient are extended versions of person. Make the methods of your class return an appropriate value indicating which class and function you are performing. You will need to create a constructor, get, set, and a function specific to each class. Also there should be a method in Person commen to all three. These functions will be used to test the validity of your class and if inheritance is working. Click the plus below the first code section to add more code and tests.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"// Exercise 3\n{\n return(\"Exercise 3 Code\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`\n## Visualizing Data\n---\nOne of the most frequent programming tasks in Clinical Informatics is taking raw data and visualizing it in different ways. Sometimes it is just outputing a table or report. Other times you may be requested to provide graphs based on data provided to you. Pease start by looking at this Live Notebook at https://beta.observablehq.com/@jonasalmeida/plotly by Prof. Jonas Almeida. \n\n### Exercise 4\n---\nUnderstand how plotly works in the examples, look at the documentation links, and then choose a dataset to use. Choose the appropriate graph type for displaying your data and create a plot using your dataset. In choosing a dataset keep it small until you are sure it works. Please choose data that lends itself to visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"{\n return(\"Exercise 4 Code\");\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}