@scriptnode

Should be:

@<href="http://twitter.com/scriptnode">scriptnode</a>

Which looks like:

@scriptnode

And here’s how to do it in PHP and JavaScript:

PHP

<br /> $text = preg_replace(’#@([a-z0-9_]+)#i’, ‘@<a href=”http://twitter.com/\\1″>\\1</a>’, $text);<br />

That was easy! Now let’s get to the more interesting JavaScript, which allows us to test inline!

JavaScript

<br /> text = text.replace(/@([a-z0-9_]+)/gi, ‘@<a href=”http://twitter.com/$1″>$1</a>’);<br />

You can run this code right here:

Format

I’m awful at regular expressions; please do let me know if I could optimize somewhere or if I missed something.
Edit: + instead of *

<br /> animate = (function() {</p> <p> var busy;</p> <p> return function(id) {</p> <p> if (busy) return;</p> <p> busy = true;<br /> var width = 0;<br /> var interval = setInterval(function() {</p> <p> var el = document.getElementById(id);<br /> el.innerHTML = ‘@% <div style="width: @px;"><span>@%</span></div> <p>‘.replace(/@/g, width);</p> <p> if (width++ >= 100) {<br /> busy = false;<br /> clearInterval(interval);<br /> }</p> <p> }, 50);</p> <p> };</p> <p>})();<br />

You can view this by itself in the lab.

When I started my new job, I had to make the transition from YUI to jQuery. I’d seen some jQuery code before (in fact, its terseness and use of $ as both an object and a function were easy to spot), but I wasn’t familiar with it. I actually thought that the query part of jQuery meant there was some kind of Standard Query Language interface. There isn’t, but there is a really cool CSS3 selector instead.

Turns out, I was a little disappointed; I wanted to use something query-based. So, I started to throw this script together. I call it JSQL. Below are some quick examples of what it looks like in action:

<br /> var results = JSQL(’SELECT * FROM #ft WHERE nodeName = “LI”);<br />

JSQL always returns an object with an error property that’s either Boolean false or a String stating what error occurred (for example, “Unknown command UPDAT3″). If it successfully retrieves or operates on elements, it returns a count:Number property with the number of elements and an elements:Array property with those elements.

Here are some interactive examples:

Example 1: Checkboxes

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = true WHERE type = “checkbox”‘);<br />

Set Checked

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = false WHERE type = “checkbox”‘);<br />

Uncheck

Example 2: Form Validation

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “error” WHERE value = “”‘);<br />

Highlight empty fields

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “” WHERE value = “”‘);<br />

Reset

Example 3: Removing Elements

<br /> JSQL(’DELETE FROM #jsql-example-3 WHERE nodeName = “STRONG”‘);<br />

Remove strong tags

In the spirit of jQuery, I also stuck in a quick each method which you can use to iterate through the returned elements immediately instead of setting up your own loop. The context is the current element (like jQuery) and the return value is still the same:

Example 4: Selecting Elements

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ‘#ffff00′;<br /> });<br />

Select & Operate

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ”;<br /> });<br />

Undo

I started coding this several months ago, and just recently decided to revisit it. I found the code hard to read myself when making some modifications before publishing it here. That typically means it’s poorly written. And I’m admittedly lousy at writing parsing code… so there’s that. I also doubt it’s realistic for any real-world websites (other libraries handle those jobs quite well), but I thought it would be fun to play with.

Some noticeable features lacking are equivalents to ALTER and INSERT INTO. I’ve also got it up on GitHub, so feel free to fork it, and maybe add those methods yourself!

• [Download jsql.js] (11k)
• [Download jsql-min.js] (3,661 bytes)

<br /> myArray.push(thevalue);<br />

Easy stuff. What’s unfortunate, though, is when the questions are a bit more involved, and these developers have already searched around a bit and found lousy code to read and learn from. The problem is that there’s much ancient, awful JavaScript code out there, and when performing simple search queries, these sites come up. My goal is to improve this process.

One common topic is that of cookies. Dealing with cookies is really basic stuff, but hey, that’s what the novice category is for. So here’s a simple script to assist with managing cookies:

<br /> /**<br /> * Global cookies object to manage cookies<br /> * @return {Object} The exposed methods<br /> * @public<br /> */<br /> var cookies = (function() {</p> <p> /**<br /> * Gets a cookie’s value<br /> * @param {String} name The name of the cookie to get<br /> * @return {String} The cookie’s value, or false if it can’t find the cookie<br /> * @member cookies<br /> * @public<br /> */<br /> var get = function(name) {</p> <p> var cookie = document.cookie,<br /> end,<br /> pre = name + ‘=’,<br /> begin = cookie.indexOf(’; ‘ + pre);</p> <p> if (begin == -1) {<br /> begin = cookie.indexOf(pre);<br /> if (begin !== 0) return false;<br /> } else {<br /> begin += 2;<br /> }</p> <p> end = document.cookie.indexOf(’;', begin);<br /> if (end == -1) end = cookie.length;</p> <p> return decodeURIComponent(cookie.substring(begin + pre.length, end));</p> <p> };</p> <p> /**<br /> * Removes a cookie that has already been set<br /> * @param {String} name The name of the cookie to remove<br /> * @param {String} path The path of the cookie to remove<br /> * @param {String} domain The domain of the cookie to remove<br /> * @member cookies<br /> * @public<br /> */<br /> var remove = function(name, path, domain) {</p> <p> var cookie = name + ‘=’;</p> <p> if (!get(name)) return;<br /> if (path) cookie += ‘; path=’ + path;<br /> if (domain) cookie += ‘; domain=’ + domain;<br /> cookie += ‘; expires=Thu, 01-Jan-70 00:00:01 GMT’;</p> <p> document.cookie = cookie;</p> <p> };</p> <p> /**<br /> * Tells the browser to set a cookie<br /> * @param {String} name The name of the cookie to set<br /> * @param {String} value The value to set in the cookie<br /> * @param {String} expires The date that the cookie expires (must be a valid date string)<br /> * @param {String} path The path of the cookie to set<br /> * @param {String} domain The domain of the cookie to set<br /> * @param {Boolean} secure Whether to make the cookie secure or not<br /> * @member cookies<br /> * @public<br /> */<br /> var set = function(name, value, expires, path, domain, secure) {</p> <p> var cookie = name + ‘=’ + encodeURIComponent(value);</p> <p> if (expires) cookie += ‘; expires=’ + expires.toGMTString();<br /> if (path) cookie += ‘; path=’ + path;<br /> if (domain) cookie += ‘; domain=’ + domain;<br /> if (secure) cookie += ‘; secure’;</p> <p> document.cookie = cookie;</p> <p> };</p> <p> return {<br /> get : get,<br /> remove : remove,<br /> set : set<br /> };</p> <p>})();<br />

You can download this script below:

• [Download cookies.js] (2,160 bytes)
• [Download cookies-min.js] (634 bytes; compressed)

Also, PPK has an in-depth article about cookies. His code examples get the job done, but unfortunately create too many functions in the global scope (which, as we all know, should be avoided).

The Script

<br /> var loadCSS = function(file) {<br /> var link = document.createElement(’link’);<br /> link.href = file;<br /> link.rel = ’stylesheet’;<br /> link.type = ‘text/css’;<br /> document.getElementsByTagName(’head’)[0].appendChild(link);<br /> };</p> <p>var loadJS = function(file) {<br /> var script = document.createElement(’script’);<br /> script.src = file;<br /> script.type = ‘text/javascript’;<br /> document.getElementsByTagName(’head’)[0].appendChild(script);<br /> };<br />

Example 1 – JavaScript

First let’s load up a JavaScript file. Here’s what the external JS file looks like:

<br /> alert(’Loaded!’);<br />

And by using the above script, loading it is easy:

<br /> loadJS(’/assets/misc/dynamic-load/example-1.js’);<br />

Load JS file

Example 2 – CSS

Loading CSS is not much different. Here are the contents of the external CSS file:

<br /> body {<br /> border: 3px solid red;<br /> }<br />

Note that you can also use relative URLs or even files on another server:

<br /> loadCSS(’http://scriptnode.com/assets/misc/dynamic-load/example-2.css’);<br />

Load CSS file

This has been tested and works in all of the standard browsers including
Firefox, Chrome, Internet Explorer, Opera and Safari.

Many JavaScript libraries support the evaluating of data returned via XHR. Some, like YUI, do not (yet). In other cases, folks have rolled their own “AJAX library” but still want this behavior. The below script supports searching HTML for scripts and evaluating them:

<br /> /**<br /> * Evaluate the passed content for <script> tags<br /> * @param {String} html The string to parse<br /> */<br /> var evalHTML = function(html) {</p> <p> var piece,<br /> res = html.split(/<script/);</p> <p> res.shift();</p> <p> for (var i = 0, len = res.length; i < len; i++) {</p> <p> (piece = res[i].split(/>/)).shift();</p> <p> try {<br /> eval(piece.join(’>').split(’</scr’ + ‘ipt>’).shift());<br /> } catch (e) {}</p> <p> }</p> <p>};<br />

You can execute some examples yourself below:

<br /> // Example 1 – script inside of a div<br /> evalHTML(’<div><scr’ +<br /> ‘ipt>alert(”Hello, JavaScript!”);</scr’ +<br /> ‘ipt>’);<br />

Execute example 1

<br /> // Example 2 – script sets a global variable then displays it<br /> evalHTML(’<scr’ + ‘ipt>var foo = “bar”;</scr’ +’ipt>’ +<br /> ‘<scr’ + ‘ipt>alert(foo);</scr’ +’ipt>’);<br />

Execute example 2

• [Download eval.js] (376 bytes)
• [Download eval-min.js] (214 bytes; compressed)

Update 9/28/08: Fixed a bug thanks to Isaac Schlueter (see comments).

When modifying the framework I had built, I noticed that the old database class I was using was a little out of date. PHP5 is the new standard, shouldn’t we all
be using PDO? So I added migrating to PDO to my to-do list. But really, the class
is a pretty good one. It’s certainly been useful to me for, well, almost a few years now, give or take a few dozen tweaks.

So given the longevity of the script, I thought I’d offer it up for this week’s Script Sunday:

<br /> /**<br /> * Database constructor<br /> */<br /> class Database {</p> <p> protected<br /> $connection,<br /> $debug,<br /> $debug_func;</p> <p> /**<br /> * Constructor method. Connects to the database<br /> * @public<br /> */<br /> function __construct() {</p> <p> $this->debug = Array();<br /> $this->debug_func = ‘debugNone’;</p> <p> }</p> <p> /**<br /> * Gets the number of affected rows from the last query<br /> * @return integer Number of affected rows<br /> * @public<br /> */<br /> function affectedRows() {<br /> return mysql_affected_rows($this->connection);<br /> }</p> <p> /**<br /> * Checks a table to see if a key/value pair exists<br /> * @param string table The table to check<br /> * @param string field The field in the table<br /> * @param string value The value of the field to check<br /> * @return bool Returns true if it found a matching row<br /> * @public<br /> */<br /> function checkField($table, $field, $value, $and = ”) {</p> <p> $qry = sprintf(’<br /> SELECT<br /> %s<br /> FROM<br /> %s<br /> WHERE<br /> %s = “%s”<br /> %s<br /> ‘,<br /> $field,<br /> $table,<br /> $field,<br /> $value,<br /> $and<br /> );</p> <p> $res = $this->query($qry);<br /> $row = $this->fetchRow($res);</p> <p> return ($row ? true : false);</p> <p> }</p> <p> /**<br /> * Cleans a value for the DB<br /> * @param str $value The value to clean<br /> * @return str The cleaned string<br /> */<br /> function clean($value) {</p> <p> $value = stripslashes($value);<br /> $value = trim($value);<br /> $value = str_replace(”‘”, “\’”, $value);</p> <p> return $value;</p> <p> }</p> <p> /**<br /> * Connect to the database<br /> * @param string db_server The database server to connect to (often localhost)<br /> * @param string db_user The user to send to the server<br /> * @param string db_password The user’s password<br /> * @param string db_name The name of the database to use<br /> * @public<br /> */<br /> function connect($db_server, $db_user, $db_password, $db_name) {</p> <p> $this->connection = mysql_connect($db_server, $db_user, $db_password);<br /> $this->select($db_name, $this->connection);</p> <p> return ($this->connection ? true : false);</p> <p> }</p> <p> function debugNone() {}</p> <p> /**<br /> * Adds a debug message to $debug<br /> * @param str The debug message<br /> * @public<br /> */<br /> function debugPut($debug) {<br /> $this->debug[] = $debug;<br /> }</p> <p> /**<br /> * Deletes rows from the database<br /> * @param string table The table to query<br /> * @param string where There WHERE clause in the query<br /> * @param integer limit How many rows to limit (default is 1)<br /> * @return integer Number of affected rows<br /> * @public<br /> */<br /> function deleteRows($table, $where, $limit = 1) {</p> <p> $limit = ($limit ? ‘LIMIT ‘ . $limit : ”);</p> <p> $qry = ‘DELETE FROM ‘ . $table . ‘<br /> WHERE ‘ . $where . ‘<br /> ‘ . $limit;</p> <p> $this->query($qry);</p> <p> return $this->affectedRows();</p> <p> }</p> <p> /**<br /> * Retrieves a row from the database<br /> * @param string result The result set returned from the query<br /> * @return array Associatve index of the retrieved row<br /> */<br /> function fetchRow($res) {<br /> return @mysql_fetch_assoc($res);<br /> }</p> <p> /**<br /> * Get a single row from the database<br /> * @param qry The query to send<br /> * @return array Associative array of the row<br /> */<br /> function getRow($qry) {</p> <p> $res = $this->query($qry);<br /> $row = $this->fetchRow($res);</p> <p> return $row;</p> <p> }</p> <p> /**<br /> * Retreive rows from the database<br /> * @param qry The query to get the rows<br /> * @param array Numeric array of the rows<br /> */<br /> function getRows($qry) {</p> <p> $rows = Array();<br /> $res = $this->query($qry);</p> <p> while ($row = $this->fetchRow($res)) {<br /> $rows[] = $row;<br /> }</p> <p> return $rows;</p> <p> }</p> <p> /**<br /> * Format a query for insertion into the database<br /> * @param string table The table to insert into<br /> * @param array pairs Key value pairs of the fields and values to insert<br /> * @return string The prepared query, ready to insert<br /> */<br /> function formatInsert($table, $pairs) {</p> <p> foreach ($pairs as $field => $value) {</p> <p> $fields .= $field . ‘,’;</p> <p> if (!is_numeric($value)) {<br /> $value = $this->clean($value);<br /> }</p> <p> $values .= “‘$value’,”;</p> <p> }</p> <p> $fields = substr($fields, 0, -1);<br /> $values = substr($values, 0, -1);</p> <p> $qry = sprintf(”<br /> INSERT INTO<br /> $table<br /> ($fields)<br /> VALUES<br /> ($values)<br /> “);</p> <p> return $qry;</p> <p> }</p> <p> /**<br /> * Formats an update query based on a key/value array<br /> * @param string table The name of the table<br /> * @param array pairs The key/value pair of the fields/values<br /> * @param string where The WHERE clause of the array (default: 1)<br /> * @param integer limit The limit on tbe query<br /> * @return string The prepared query<br /> */<br /> function formatUpdate($table, $pairs, $where = ‘1′, $limit = false) {</p> <p> foreach ($pairs as $key => $value) {</p> <p> if (!is_numeric($value)) {<br /> $value = $this->clean($value);<br /> }</p> <p> $set .= “$key = ‘$value’, “;</p> <p> }</p> <p> $set = substr($set, 0, -2);<br /> $limit = ($limit ? ‘ LIMIT ‘ . $limit : ”);</p> <p> $qry = sprintf(”<br /> UPDATE<br /> $table<br /> SET<br /> $set<br /> WHERE<br /> $where<br /> $limit<br /> “);</p> <p> return $qry;</p> <p> }</p> <p> /**<br /> * Get the id of the last inserted row<br /> * @return integer They id (if it exists) of the last inserted row<br /> */<br /> function getID() {<br /> return mysql_insert_id($this->connection);<br /> }</p> <p> /**<br /> * Inserts rows into the database<br /> * @param string table The table to send the query to<br /> * @param array pairs The key/value pairs to insert into the database<br /> * @return integer Number of affected rows<br /> */<br /> function insertRows($table, $pairs) {<br /> return $this->query($this->formatInsert($table, $pairs));<br /> }</p> <p> /**<br /> * Gets the number of rows from a result set<br /> * @return integer Number of rows<br /> */<br /> function numRows($res) {<br /> return mysql_num_rows($res);<br /> }</p> <p> /**<br /> * Send a query to the database<br /> * @param string qry The query to send<br /> * @return string A reference to the result set<br /> */<br /> function query($qry) {</p> <p> $func = $this->debug_func;<br /> $this->$func($qry);</p> <p> return mysql_query($qry, $this->connection);</p> <p> }</p> <p> /**<br /> * Select a database on the server<br /> * @param string db_name The name of the database<br /> * @return bool Returns true on success and false on failure<br /> */<br /> function select($db_name, $connection = null) {</p> <p> if ($connection) {<br /> $this->connection = &$connection;<br /> }</p> <p> return mysql_select_db($db_name, $this->connection);</p> <p> }</p> <p> /**<br /> * Turns on or off the debug option<br /> * @param bool debug The new value of the debug option<br /> */<br /> function setDebug($debug) {<br /> if ($debug) {<br /> $this->debug_func = ‘debugPut’;<br /> } else {<br /> $this->debug_func = ‘debugNone’;<br /> }<br /> }</p> <p> /**<br /> * Updates rows in the database<br /> * @param string table The table to send the query to<br /> * @param array pairs The key/value pairs to insert into the database<br /> * @param string where The WHERE clause of the array (default: 1)<br /> * @param integer limit The limit on tbe query<br /> * @return integer Number of affected rows<br /> */<br /> function updateRows($table, $pairs, $where = ‘1′, $limit = false) {<br /> return $this->query($this->formatUpdate($table, $pairs, $where, $limit));<br /> }</p> <p>}<br />

And here’s a quick example of how to use it:

<br /> $db = new Database();<br /> $db->connect($server, $user, $password, $db_name);</p> <p>$query = ‘SELECT * FROM users’;<br /> $users = $db->getRows($query);</p> <p>foreach ($users as $user) {<br /> echo ‘Username: ‘ . $user['username'] . ‘<br>’;<br /> }<br />

• [Download database.php.txt] (6,848 bytes)
• [Download db-class.zip] (1,966 bytes)

./clh.php local-site.com/public_html/

Note: you must be root to run it

Given this command, the script will change DocumentRoot to local-site.com/public_html/ and restart apache2.
I work on a lot of websites (developing most of them on my laptop running apache2)
so I use this script constantly.

Here’s the code:

<br /> #!/usr/bin/php<br /> <?php</p> <p>/*<br /> ChangeLocalHost v0.1 – last updated Mar 07 2007<br /> Must be root to execute. Alters the DocumentRoot in Apache2’s conf file, then restarts Apache2.<br /> */</p> <p>$obj_clh = new ChangeLocalHost(’/etc/apache2/sites-available/’, ‘default’, ‘/home/www/’);</p> <p>$obj_clh->setArgs($_SERVER['argv']);<br /> $obj_clh->run();</p> <p>/**<br /> * CLH class constructor<br /> * @constructor<br /> */<br /> class ChangeLocalHost {</p> <p> private $arr_args,<br /> $bit_msgs,<br /> $str_dir,<br /> $str_file,<br /> $str_pre;</p> <p> protected $str_version;</p> <p> /**<br /> * Constructor method<br /> * @param string str_dir The location of the Apache conf file to mod<br /> * @param string str_file The name of the Apache conf file to mod<br /> * @param string str_pre The needle to search for in the conf file<br /> */<br /> function __construct($str_dir, $str_file, $str_pre) {</p> <p> $this->str_version = ‘ChangeLocalHost v0.1′;</p> <p> $this->arr_args = Array();<br /> $this->bit_msgs = true;<br /> $this->str_dir = $str_dir;<br /> $this->str_file = $str_file;<br /> $this->str_pre = $str_pre;</p> <p> }</p> <p> /**<br /> * Modify Apache’s DocumentRoot<br /> * @param string str_file The (conf) file to mod<br /> * @param string str_new_dir The new directory to set as DocumentRoot<br /> * @private<br /> */<br /> private function alterLocalHost($str_file, $str_new_dir) {</p> <p> $str_contents = file_get_contents($str_file);</p> <p> if (!$str_contents) {<br /> $this->showError(’Could not read ‘ . $str_file);<br /> }</p> <p> $int_begin = strpos($str_contents, $this->str_pre);<br /> $int_end = strpos(substr($str_contents, $int_begin), “\n”);<br /> $str_search = substr($str_contents, $int_begin, $int_end);<br /> $str_contents = str_replace($str_search, $str_new_dir, $str_contents);<br /> $bit_written = file_put_contents($str_file, $str_contents);</p> <p> if ($bit_written) {<br /> $this->showMessage(’Successfully set DocumentRoot to ‘ . $str_new_dir);<br /> } else {<br /> $this->showError(’Could not write ‘ . $str_file);<br /> }</p> <p> }</p> <p> /**<br /> * Validates the new directory to set<br /> * @param string str_new_dir The potential new directory<br /> * @private<br /> */<br /> private function checkLocalHost($str_new_dir) {</p> <p> $str_set_to = $this->str_pre . $str_new_dir;</p> <p> if (is_dir($str_set_to)) {</p> <p> $this->setLocalHost($str_set_to);<br /> $this->restartApache2();</p> <p> } else {<br /> $this->showError($str_set_to . ‘ is not a valid directory.’);<br /> }</p> <p> }</p> <p> /**<br /> * Ensures this app is being executed as root<br /> * @private<br /> */<br /> private function checkRoot() {</p> <p> // Make sure user is root<br /> $str_command = ‘whoami’;</p> <p> exec($str_command, $arr_output, $int_return);</p> <p> if ($arr_output[0] != ‘root’) {<br /> $this->showError(’You must be root to run this program.’);<br /> }</p> <p> }</p> <p> /**<br /> * Makes a backup of the Apache conf file<br /> * @param string str_source The original to copy<br /> * @param string str_new The location of the backup<br /> * @return bool Whether the copy was successful or not<br /> * @private<br /> */<br /> private function makeCopy($str_source, $str_new) {</p> <p> $bit_copy = copy($str_source, $str_new);</p> <p> if (!$bit_copy) {<br /> $this->showError(’Could not make copy of ‘ . $str_source);<br /> }</p> <p> return true;</p> <p> }</p> <p> /**<br /> * Restarts Apache2<br /> * @private<br /> */<br /> private function restartApache2() {</p> <p> $str_command = ‘apache2ctl restart’;</p> <p> exec($str_command, $arr_output, $int_return);</p> <p> if ($int_return > 0) {<br /> $this->showError(’Could not restart Apache2.’ . $str_source);<br /> }</p> <p> $this->showMessage(’Successfully restarted Apache2.’);</p> <p> }</p> <p> /**<br /> * Executes the script<br /> */<br /> function run() {</p> <p> $this->checkRoot();</p> <p> $str_new_dir = $this->arr_args[1];</p> <p> switch ($this->arr_args[1]) {</p> <p> case ‘-c’ :<br /> case ‘–current’ :<br /> $this->showCurrent();<br /> break;</p> <p> case ” :<br /> case ‘-h’ :<br /> case ‘–help’ :<br /> $this->showHelp();<br /> break;</p> <p> case ‘-q’ :<br /> case ‘–quiet’ :<br /> $str_new_dir = $this->arr_args[2];<br /> $this->bit_msgs = false;<br /> break;</p> <p> case ‘-v’ :<br /> case ‘–version’ :<br /> $this->showVersion();<br /> break;</p> <p> default :<br /> break;</p> <p> }</p> <p> $this->checkLocalHost($str_new_dir);<br /> exit(0);</p> <p> }</p> <p> /**<br /> * Create a copy of the arguments global<br /> * @param array array_args The arguments to set<br /> */<br /> function setArgs($arr_args) {<br /> $this->arr_args = &$arr_args;<br /> }</p> <p> /**<br /> * Call the other methods to initiate the altering of the DocumentRoot<br /> * @param string str_new_dir The new value of DocumentRoot<br /> * @private<br /> */<br /> private function setLocalHost($str_new_dir) {</p> <p> $str_ext = ‘.bak’;<br /> $str_file = ($this->str_dir . $this->str_file);<br /> $str_backup = $str_file . $str_ext;</p> <p> if (is_file($str_file)) {</p> <p> if ($this->makeCopy($str_file, $str_backup)) {<br /> $this->showMessage(’Copied backup of ‘ . $this->str_file . ‘ to ‘ . $this->str_file . $str_ext);<br /> }</p> <p> $this->alterLocalHost($str_file, $str_new_dir);</p> <p> } else {<br /> $this->showError($str_file . ‘ cannot be found.’);<br /> }</p> <p> }</p> <p> /**<br /> * Show what DocumentRoot is currently set to<br /> * @private<br /> */<br /> private function showCurrent() {</p> <p> $str_file = ($this->str_dir . $this->str_file);</p> <p> if (is_file($str_file)) {</p> <p> $str_contents = file_get_contents($str_file);</p> <p> if (!$str_contents) {<br /> $this->showError(’Could not read ‘ . $str_file);<br /> }</p> <p> $int_begin = strpos($str_contents, $this->str_pre);<br /> $int_end = strpos(substr($str_contents, $int_begin), “\n”);<br /> $str_search = substr($str_contents, $int_begin, $int_end);</p> <p> $this->showMessage(’The current DocumentRoot is: ‘ . $str_search);<br /> exit;</p> <p> } else {<br /> $this->showError($str_file . ‘ cannot be found.’);<br /> }</p> <p> }</p> <p> /**<br /> * Display a message and exit<br /> * @param string str_error The message to display<br /> * @private<br /> */<br /> private function showError($str_error) {</p> <p> echo ‘Error: ‘ . $str_error . “\n”;</p> <p> exit(1);</p> <p> }</p> <p> /**<br /> * Show the help text and exit<br /> * @private<br /> */<br /> private function showHelp() {</p> <p> $str_help .= ‘Usage: clh [DIRECTORY]… [OPTIONS]‘ . “\n”;<br /> $str_help .= ‘Alter the DocumentRoot in Apache2.’ . “\n”;<br /> $str_help .= “\n”;<br /> $str_help .= ‘ -c, –current display current DocumentRoot and exit’ . “\n”;<br /> $str_help .= ‘ -h, –help display this help and exit’ . “\n”;<br /> $str_help .= ‘ -q, –quiet suppress most messages’ . “\n”;<br /> $str_help .= ‘ -v, –version output version information and exit’ . “\n”;<br /> $str_help .= “\n”;<br /> $str_help .= ‘Report bugs to <scriptnode@gmail.com>.’ . “\n”; // Hahahaha</p> <p> echo $str_help;</p> <p> exit(0);</p> <p> }</p> <p> /**<br /> * Display a message to the user<br /> * @param string str_message The message to show<br /> * @private<br /> */<br /> private function showMessage($str_message) {</p> <p> if ($this->bit_msgs) {<br /> echo $str_message . “\n”;<br /> }</p> <p> }</p> <p> /**<br /> * Attempt to be more like a real application by displaying the version<br /> * @private<br /> */<br /> private function showVersion() {</p> <p> echo $this->str_version . “\n”;</p> <p> exit(0);</p> <p> }</p> <p>}<br />

You’ll notice that the script is at least a year and a half old.
Usually if code of mine is more than a year old, it’s completely unusuable because my habits change pretty often.
But I think I’ve finally gotten to that sweet spot where it’s not total garbage, it just needs tweaking.

I was surprised that the code isn’t too bad really. It’s easily readable and well organized. There are many things that I wouldn’t have done were I to write this again;
for example, I stopped using type prefixes long ago (such as an array of users as $arr_users). I understand why I used to do this, but it’s not necessary
and only clutters up the code.

Anyway, I find this script useful and I thought someone else might too. Enjoy!

• [Download clh.php.txt] (6,614 bytes)
• [Download clh.zip] (1,975 bytes)

<br /> /**<br /> * Global Shark constructor<br /> * Options for ops: dir, speed, url, x, y, zIndex<br /> * @constructor<br /> * @public<br /> */<br /> Shark = function(ops) {</p> <p> var Y = YAHOO.util,<br /> DEFAULT_SPEED = 2,<br /> DEFAULT_ZINDEX = 1000,<br /> DELAY = 25,<br /> LEFT = ‘l’,<br /> RIGHT = ‘r’,<br /> SCREEN_WIDTH = Y.Dom.getViewportWidth(),<br /> SCREEN_HEIGHT = Y.Dom.getViewportHeight(),<br /> SHARK_WIDTH = 242,<br /> SHARK_HEIGHT = 82;</p> <p> var interval,<br /> that = this;</p> <p> that.active = true;<br /> that.dir = LEFT;<br /> that.el = {};<br /> that.onOutLeft = function(){};<br /> that.onOutRight = function(){};<br /> that.x = 0;<br /> that.y = 0;</p> <p> /**<br /> * Initializes the shark variables<br /> * @private<br /> */<br /> var init = function() {</p> <p> ops = ops || {};<br /> ops.speed = ops.speed || rand(DEFAULT_SPEED, (DEFAULT_SPEED * 2));<br /> ops.url = ops.url || ‘./’;<br /> ops.zIndex = ops.zIndex || DEFAULT_ZINDEX;</p> <p> if (ops.dir) {<br /> that.dir = ops.dir;<br /> } else {<br /> that.dir = [LEFT, RIGHT][rand(0, 1)];<br /> }</p> <p> if (ops.x === undefined) {<br /> if (that.dir == LEFT) {<br /> that.x = (SCREEN_WIDTH – 1);<br /> } else {<br /> that.x = -SHARK_WIDTH;<br /> }<br /> } else {<br /> that.x = ops.x;<br /> }</p> <p> that.el = document.createElement(’div’);<br /> that.el.className = ’shark’; // Doesn’t do anything. Just in case you want to use it<br /> that.el.style.position = ‘absolute’;<br /> that.el.style.height = SHARK_HEIGHT + ‘px’;<br /> that.el.style.zIndex = ops.zIndex;</p> <p> Y.Event.addListener(that.el, ‘click’, onclick);</p> <p> document.body.appendChild(that.el);<br /> reset();</p> <p> if (ops.y !== undefined) {<br /> that.y = ops.y<br /> plot();<br /> }</p> <p> that.start();</p> <p> };</p> <p> /**<br /> * Kills the shark<br /> * @param {Boolean} fade Whether to fade the shark in or not<br /> */<br /> that.kill = function(fade) {</p> <p> that.active = false;</p> <p> var done = function() {<br /> document.body.removeChild(that.el);<br /> stop();<br /> };</p> <p> if (fade) {</p> <p> var anim = new Y.Anim(that.el, {opacity : {to : 0}}, 0.5);</p> <p> anim.onComplete.subscribe(done);<br /> anim.animate();</p> <p> } else {<br /> done();<br /> }</p> <p> };</p> <p> /**<br /> * Move the shark<br /> */<br /> var move = function() {</p> <p> if (!that.active) {<br /> return;<br /> }</p> <p> if (that.dir == LEFT) {</p> <p> that.x -= ops.speed;</p> <p> if (that.x < -SHARK_WIDTH) {<br /> that.dir = RIGHT;<br /> that.onOutLeft();<br /> reset();<br /> }</p> <p> } else {</p> <p> that.x += ops.speed;</p> <p> if (that.x > (SCREEN_WIDTH – 1)) {<br /> that.dir = LEFT;<br /> that.x = (SCREEN_WIDTH – 1);<br /> that.onOutRight();<br /> reset();<br /> }</p> <p> }</p> <p> if (that.x > (SCREEN_WIDTH – SHARK_WIDTH)) {<br /> that.el.style.width = (SHARK_WIDTH – (that.x – (SCREEN_WIDTH – SHARK_WIDTH))) + ‘px’;<br /> } else {<br /> that.el.style.width = SHARK_WIDTH + ‘px’;<br /> }</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Kills the shark. Note: intended to be overwritten<br /> */<br /> var onclick = function() {<br /> that.onclick();<br /> };</p> <p> /**<br /> * Default onclick behavior<br /> */<br /> that.onclick = function() {<br /> that.kill(true);<br /> };</p> <p> /**<br /> * Moves the shark element to the XY coordinates<br /> */<br /> var plot = function() {<br /> that.el.style.left = that.x + ‘px’;<br /> that.el.style.top = that.y + ‘px’;<br /> };</p> <p> /**<br /> * Returns a random number<br /> * @param {Number} from The starting point<br /> * @param {Number} to The stopping point<br /> * @return {Number} A random number within the range<br /> */<br /> var rand = function(from, to) {<br /> return (from + Math.floor((to – from + 1) * Math.random()));<br /> }; </p> <p> /**<br /> * Sets the background based on direction and randomizes the Y position<br /> */<br /> var reset = function() {</p> <p> that.el.style.background = ‘url(’ + ops.url + ’shark_’ + that.dir + ‘.gif)’;<br /> that.y = rand(0, (SCREEN_HEIGHT – SHARK_HEIGHT – 1));</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Starts the move interval<br /> */<br /> that.start = function() {</p> <p> if (interval) {<br /> return;<br /> }</p> <p> interval = setInterval(move, DELAY);</p> <p> };</p> <p> /**<br /> * Stops the move interval<br /> */<br /> that.stop = function() {<br /> if (interval) {<br /> clearInterval(interval);<br /> interval = false;<br /> }<br /> };</p> <p> init();</p> <p>};<br />

You can create new sharks like this:

<br /> var myShark = new Shark();</p> <p>// Or setup some basics, like having him swim to the left<br /> var anotherShark = new Shark({dir : ‘l’});<br /> anotherShark.onclick = function() {<br /> alert(”I’m a shaaaaaaark!”);<br /> myShark.kill(true); // Kill it with a fade<br /> };</p> <p>// You may also want to host the shark images yourself:<br /> var hostedShark = new Shark({url : ‘http://mydomain.com/shark/’});<br />

The last example above shows setting a custom URL for the shark images. You can download those here:

There are a few different events you can subscribe to including onclick, onOutLeft and onOutRight, which I think are pretty self-explanatory.
Using these events, I put together a very simple game involving sharks, clicking and hopelessly trying to save a doomed diver. The ocean graphics came from one of my favorite CSS Zen Garden examples.

The shark script requires YUI (Animation, DOM and Event). I’ve included it in the third download option below:

• [Download shark.js] (3,747 bytes)
• [Download shark-min.js] (1,550 bytes; compressed)
• [Download shark-min-yui.js] (46k; compressed with YUI)

I’d love to see if anybody else has cool ideas of what to do with the shark script!

Here’s the source code:

<br /> /**<br /> * Bresenham’s line algorithm function<br /> * by Matt Hackett [scriptnode.com]<br /> * @param {Object} el The element to target (accepts both strings for id’s and element objects themselves)<br /> * @param {Number} x1 The starting X coordinate<br /> * @param {Number} y1 The starting Y coordinate<br /> * @param {Number} x2 The finishing X coordinate<br /> * @param {Number} y2 The finishing Y coordinate<br /> * @param {Object} params Additional parameters [delay, onComplete, speed]<br /> */<br /> var bresenham = function(el, x1, y1, x2, y2, params) {</p> <p> var<br /> interval,<br /> b,<br /> m,<br /> sx,<br /> y;</p> <p> var init = function() {</p> <p> var dx, dy, sy;</p> <p> // Default parameters<br /> params = params || {};<br /> params.delay = params.delay || 10;<br /> params.onComplete = params.onComplete || function(){};<br /> params.speed = params.speed || 5;</p> <p> // No point in doing anything if we’re not actually moving<br /> if ((x1 == x2) && (y1 == y2)) {<br /> plot(x1, y);<br /> params.onComplete();<br /> return;<br /> }</p> <p> el = ((typeof el === ’string’) ? document.getElementById(el) : el);</p> <p> // Initalize the math<br /> dx = x2 – x1;<br /> sx = (dx < 0) ? -1 : 1;<br /> dy = y2 – y1;<br /> sy = (dy < 0) ? -1 : 1;<br /> m = dy / dx;<br /> b = y1 – (m * x1);</p> <p> interval = setInterval(next, params.delay);</p> <p> };</p> <p> /**<br /> * Execute the algorithm and move the element<br /> */<br /> var next = function() {</p> <p> y = Math.round((m * x1) + b);<br /> plot(x1, y);<br /> x1 += (sx * params.speed);</p> <p> if (x1 >= x2) {<br /> clearInterval(interval);<br /> params.onComplete();<br /> }</p> <p> };</p> <p> /**<br /> * Move the target element to the given coordinates<br /> * @param float x The horizontal coordinate<br /> * @param float y The vertical coordinate<br /> */<br /> var plot = function(x, y) {<br /> el.style.left = x + ‘px’;<br /> el.style.top = y + ‘px’;<br /> };</p> <p> init();</p> <p>};<br />

The parameters are self-explanatory except for the (optional) params object. Here’s a breakdown:

• delay: The interval that the setInterval call uses [default: 10]
• onComplete: An optional function to call when the algorithm is finished
• speed: How quickly to move the element down the line [default: 5]

I’m not sure how much use this has in the “real world” but it’s typically pretty neat to see elements dancing around the page,
and I always love to see classic algorithms put to good use.
Enjoy!

• [Download bresenhams-line-algorithm.js] (1,769 bytes)
• [Download bresenhams-line-algorithm-min.js] (516 bytes; compressed)