{
  "version": "https://jsonfeed.org/version/1.1",
  "title": "chem-bla-ics",
  "description": "Chemblaics (pronounced chem-bla-ics) is the science that uses open science and computers to solve problems in chemistry, biochemistry and related fields.",
  "home_page_url": "https://chem-bla-ics.linkedchemistry.info/",
  "feed_url": "https://chem-bla-ics.linkedchemistry.info/2013/10/12/programming-in-life-sciences-6-functions.json",
  "icon": "https://chem-bla-ics.linkedchemistry.info/assets/images/chem-bla-ics_logo.png",
  "language": "en",
  "authors": [
    {
      "name": "Egon Willighagen",
      "url": "https://orcid.org/0000-0001-7542-0286",
      "_orcid": "0000-0001-7542-0286"
    }
  ],
  "items": [

    {
      "id": "https://doi.org/10.59350/hrzhb-m7g26",
      "url": "https://chem-bla-ics.linkedchemistry.info/2013/10/12/programming-in-life-sciences-6-functions.html",
      "title": "Programming in the Life Sciences #6: functions",
      "content_html": "<p>One key feature of programming languages is the following: first, there is linearity. This is an important point\nthat is not always clear to students who just start to program. In fact, ask yourself what the algorithm is for\ncounting the chairs in the room where you are now sitting. Could a computer do that in the same way? How should\nyour algorithm change? A key point is, is that the program is run step by step, in a linear way.</p>\n\n<p>However, we very easily jump to functions. In fact, we use so many libraries nowadays, this linearity is not so\nclear anymore. Things just happen with magic library calls. But at the same time, the library calls make our life\na lot easier: by using functions, we group functionality in easy to read and easier to understand blobs.</p>\n\n<p>OK, the previous example showed that we could use the HTML <code class=\"language-plaintext highlighter-rouge\">@onClick</code> attribute to provide further detail.\nBut I did not show how. This is how:</p>\n\n<div class=\"language-javascript highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nx\">html</span> <span class=\"o\">+=</span> <span class=\"dl\">\"</span><span class=\"s2\">Name: &lt;span onClick=</span><span class=\"se\">\\\"</span><span class=\"s2\">showDetails('</span><span class=\"dl\">\"</span> <span class=\"o\">+</span>\n  <span class=\"nf\">escape</span><span class=\"p\">(</span><span class=\"nx\">dataJSON</span><span class=\"p\">)</span> <span class=\"o\">+</span> <span class=\"dl\">\"</span><span class=\"se\">\\</span><span class=\"s2\">')</span><span class=\"se\">\\\"</span><span class=\"s2\">&gt;</span><span class=\"dl\">\"</span> <span class=\"o\">+</span> \n  <span class=\"nx\">response</span><span class=\"p\">[</span><span class=\"nx\">i</span><span class=\"p\">].</span><span class=\"nx\">prefLabel</span> <span class=\"o\">+</span> <span class=\"dl\">\"</span><span class=\"s2\">&lt;/span&gt;</span><span class=\"dl\">\"</span><span class=\"p\">;</span>\n</code></pre></div></div>\n\n<p>This code adds the <code class=\"language-plaintext highlighter-rouge\">@onClick</code> attribute and a function call to the <code class=\"language-plaintext highlighter-rouge\">showDetails()</code> method which takes one parameter,\nwhere we pass escaped JSON. That is non-trivial, I understand, and may be due to my limited knowledge of JavaScript.\nThe escaping of the JSON is needed to make quotes match in the generated HTML. In the function later, we can unescape\nit and get the original JSON again. Importantly, the dataJSON data contains all the details I like to show.</p>\n\n<p>Now, this functions needs to be defined. Yes, plural, because two functions are used in this code snippet: <code class=\"language-plaintext highlighter-rouge\">showDetails()</code>\nand <code class=\"language-plaintext highlighter-rouge\">escape()</code>. The last is defined by one of the used libraries. The <code class=\"language-plaintext highlighter-rouge\">showDetails()</code> function, however, I made up.\nSo, I had to define it elsewhere in the HTML document, and it looks like:</p>\n\n<div class=\"language-javascript highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">var</span> <span class=\"nx\">showDetails</span> <span class=\"o\">=</span> <span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">dataJSON</span><span class=\"p\">){</span>\n  <span class=\"nx\">data</span> <span class=\"o\">=</span> <span class=\"nx\">JSON</span><span class=\"p\">.</span><span class=\"nf\">parse</span><span class=\"p\">(</span><span class=\"nf\">unescape</span><span class=\"p\">(</span><span class=\"nx\">dataJSON</span><span class=\"p\">));</span>\n  <span class=\"nb\">document</span><span class=\"p\">.</span><span class=\"nf\">getElementById</span><span class=\"p\">(</span><span class=\"dl\">\"</span><span class=\"s2\">details</span><span class=\"dl\">\"</span><span class=\"p\">).</span><span class=\"nx\">innerHTML</span> <span class=\"o\">=</span>\n    <span class=\"nx\">data</span><span class=\"p\">.</span><span class=\"nx\">_about</span><span class=\"p\">;</span>\n<span class=\"p\">};</span>\n</code></pre></div></div>\n\n<p>This example actually gives the exact same output as the code in the previous post, but with one major difference.\nWe now can extend the function as much as we like, but the code to output the list of found compounds does not have\nto get more complex than it already is.</p>",
      "summary": "One key feature of programming languages is the following: first, there is linearity. This is an important point that is not always clear to students who just start to program. In fact, ask yourself what the algorithm is for counting the chairs in the room where you are now sitting. Could a computer do that in the same way? How should your algorithm change? A key point is, is that the program is run step by step, in a linear way.",
      
      "date_published": "2013-10-12T00:00:00+00:00",
      "date_modified": "2025-02-15T00:00:00+00:00",
      "tags": ["pra3006","javascript","html"],
      
      
      
      
      
      
        "authors": [ { "name": "Egon Willighagen", "url": "https://orcid.org/0000-0001-7542-0286" } ]
      
    }

  ]
}
