Exercise 1

An introduction

Exercise 1

• learn browserify
• example use-case: NtSeq
  • build a small conversion tool (DNA -> AA)
• opt.: get in touch with BioJS parsers

Sneak

Our minimal HTML

<meta charset="UTF-8">
<script src="ntseq.js"></script>

HTML: input box

<meta charset="UTF-8">
<script src="ntseq.js"></script>

<textarea id="txt-input">
AAACCTTTTAAAAA
</textarea>

HTML: convert button

<meta charset="UTF-8">
<script src="ntseq.js"></script>
<textarea id="txt-input">
AAACCTTTTAAAAA
</textarea>

<p>
	<button id="btn-convert">Convert</button>
</p>

HTML: output box

<meta charset="UTF-8">
<script src="ntseq.js"></script>
<textarea id="txt-input">
AAACCTTTTAAAAA
</textarea>
<p>
  <button id="btn-convert">Convert</button>
</p>

<textarea id="txt-output">
</textarea>

JS: load dependencies

var nt = require("ntseq");

JS: querying the DOM

var nt = require("ntseq");

var input = document.getElementById("txt-input");
var output = document.getElementById("txt-output");
var btn = document.getElementById("btn-convert");

JS: adding events

var nt = require("ntseq");
var input = document.getElementById("txt-input");
var output = document.getElementById("txt-output");
var btn = document.getElementById("btn-convert");

input.addEventListener("change", updateBox);
btn.addEventListener("click", updateBox);

JS: parsing and updating

var nt = require("ntseq");
var input = document.getElementById("txt-input");
var output = document.getElementById("txt-output");
var btn = document.getElementById("btn-convert");
input.addEventListener("change", updateBox);
btn.addEventListener("click", updateBox);

function updateBox(){
  var seq = new nt.Seq();
  seq.read(i1.value);
  i2.value =  seq.translate();
}

Result

More about NTSeq

var seq = new nt.Seq()
seq.read(“ACG”)
seq.translate() // T

• complement()
• sequence() (raw seq. string)
• translate()
• translate(1) (1 nt offset)
• fractionalContent()

BioJS parsers

• parse (Str) ➙ Object
• read (URL) ➙ parse
• write (Object) ➙ (Str)