Tweaked {JavaScript, TypeScript, HTML} code to encapsulate the application members.

javascript/qrcodegen-demo.js

@@ -24,7 +24,9 @@
 "use strict";
 
 
-function initialize() {
+var app = new function() {
+	
+	function initialize() {
 		var elems = document.querySelectorAll("input[type=number], textarea");
 		for (var i = 0; i < elems.length; i++) {
 			if (elems[i].id.indexOf("version-") != 0)
@@ -34,10 +36,10 @@ function initialize() {
 		for (var i = 0; i < elems.length; i++)
 			elems[i].onchange = redrawQrCode;
 		redrawQrCode();
-}
+	}
 	
 	
-function redrawQrCode() {
+	function redrawQrCode() {
 		// Show/hide rows based on bitmap/vector image output
 		var bitmapOutput = document.getElementById("output-format-bitmap").checked;
 		var scaleRow = document.getElementById("scale-row");
@@ -140,10 +142,10 @@ function redrawQrCode() {
 		stats += "error correction = level " + "LMQH".charAt(qr.errorCorrectionLevel.ordinal) + ", ";
 		stats += "data bits = " + qrcodegen.QrSegment.getTotalBits(segs, qr.version) + ".";
 		document.getElementById("statistics-output").textContent = stats;
-}
+	}
 	
 	
-function handleVersionMinMax(which) {
+	this.handleVersionMinMax = function(which) {
 		var minElem = document.getElementById("version-min-input");
 		var maxElem = document.getElementById("version-max-input");
 		var minVal = parseInt(minElem.value, 10);
@@ -157,7 +159,8 @@ function handleVersionMinMax(which) {
 		minElem.value = minVal.toString();
 		maxElem.value = maxVal.toString();
 		redrawQrCode();
-}
+	}
 	
 	
-initialize();
+	initialize();
+}

javascript/qrcodegen-js-demo.html

@@ -95,8 +95,8 @@
 			<tr>
 				<td>Version range:</td>
 				<td>
-					Minimum = <input type="number" value="1"  min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="handleVersionMinMax('min');">,
-					maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="handleVersionMinMax('max');">
+					Minimum = <input type="number" value="1"  min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="app.handleVersionMinMax('min');">,
+					maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="app.handleVersionMinMax('max');">
 				</td>
 			</tr>
 			<tr>

typescript/qrcodegen-demo.ts

@@ -24,26 +24,24 @@
 "use strict";
 
 
-{
-	const myWindow = window as any;
-	
+namespace app {
 	
 	function initialize(): void {
 		let elems = document.querySelectorAll("input[type=number], textarea");
 		for (let el of elems) {
 			if (!el.id.startsWith("version-"))
-				(el as any).oninput = myWindow.redrawQrCode;
+				(el as any).oninput = redrawQrCode;
 		}
 		elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
 		for (let el of elems)
-			(el as HTMLInputElement).onchange = myWindow.redrawQrCode;
-		myWindow.redrawQrCode();
+			(el as HTMLInputElement).onchange = redrawQrCode;
+		redrawQrCode();
 	}
 	
 	
 	/*---- Functions called from HTML code ----*/
 	
-	myWindow.redrawQrCode = function(): void {
+	function redrawQrCode(): void {
 		// Show/hide rows based on bitmap/vector image output
 		const bitmapOutput: boolean = getInput("output-format-bitmap").checked;
 		const scaleRow : HTMLElement = getElem("scale-row");
@@ -150,7 +148,7 @@
 	}
 	
 	
-	myWindow.handleVersionMinMax = function(which: "min"|"max"): void {
+	export function handleVersionMinMax(which: "min"|"max"): void {
 		const minElem: HTMLInputElement = getInput("version-min-input");
 		const maxElem: HTMLInputElement = getInput("version-max-input");
 		let minVal: number = parseInt(minElem.value, 10);
@@ -163,7 +161,7 @@
 			minVal = maxVal;
 		minElem.value = minVal.toString();
 		maxElem.value = maxVal.toString();
-		myWindow.redrawQrCode();
+		redrawQrCode();
 	}