The Arc Challenge: PHP and JavaScript

Take the Arc Challenge. For the lazy, here is the problem:

Write a program that causes the url said (e.g. http://localhost:port/said) to produce a page with an input field and a submit button. When the submit button is pressed, that should produce a second page with a single link saying “click here.” When that is clicked it should lead to a third page that says “you said: …” where … is whatever the user typed in the original input field. The third page must only show what the user actually typed. I.e. the value entered in the input field must not be passed in the url, or it would be possible to change the behavior of the final page by editing the url.

I ignored the part about what the URL has to be, because that would just be annoying. The point of Arc is to write things in the most efficient way possible, and the whole language is built around helping you do that. The point of this problem is to illustrate that Arc does this very well.

In Arc, a solution looks like this:

(defop said req
  (aform [onlink "click here" (pr "you said: " (arg _ "foo"))]
    (input "foo")
    (submit)))

In PHP:

session_start();

if (isset($_SESSION['said'])) {
	echo 'You said: ' . htmlentities($_SESSION['said']); //prevent XSS lol
	unset($_SESSION['said']);
} else if (isset($_POST['said'])) {
	$_SESSION['said'] = $_POST['said'];
	echo '<a href="">Click here!</a>';
} else {
	echo '<form method="post" action=""><input type="text" name="said"/><input type="submit"/></form>';
}

And in JavaScript:

function getCookie(name) {
	var cookies = document.cookie.split(";");
	for (var i = 0, len = cookies.length, cookieParts; i < len; i++) {
		cookieParts = cookies[i].trim().split("=");
		if (cookieParts[0] === name) {
			return cookieParts[1];
		}
	}

	return null;
}

var said = getCookie("said"), page = parseInt(getCookie("page"));
if (said === null) {
	var input = document.createElement("input");
	input.type = "text";
	var button = document.createElement("button");
	button.appendChild(document.createTextNode("Submit"));
	button.onclick = function() {
		document.cookie = "said=" + input.value;
		document.cookie = "page=2";
		window.location.href = window.location.href;
	}

	document.body.appendChild(input);
	document.body.appendChild(button);
	document.cookie = "page=1";
} else if (page === 2) {
	document.cookie = "page=3";
	var link = document.createElement("a");
	link.href = "";
	link.appendChild(document.createTextNode("Click here"));
	document.body.appendChild(link);
} else {
	document.body.appendChild(document.createTextNode("You said: " + said));
	var expires = new Date();
	expires.setDate(expires.getDate() - 100);
	expires = expires.toGMTString();
	document.cookie = "said=;expires=" + expires;
	document.cookie = "page=1";
}

The cookie handling could probably be more compact, but whatever; the hideousness of that is far outstretched by the hideousness of the DOM. Try each of them out here:

Arc seems like a cool language. Too bad it’s based on Lisp, which means it will never get any traction in the demographics that don’t wear suspenders.

December 20, 2009   Posted in: javascript, php

Leave a Reply