Hey Brian? — Portfolio

JavaScript / AJAX

In addition to improving load time and multi-platform compatibility, JavaScript and AJAX create a dynamic Web 2.0 user experience. It’s true: JavaScript can change the way you live your life. The following are JavaScripts I wrote from scratch and modified:

• Zapatec Ajax Forms · 2
• My JavaScripts
• % increase / decrease calculator
• Pay calculator, adjusted for overtime
• Fahrenheit | Celsius
• Drop down menu jump navigation
• Random phrase generator

JavaScript and AJAX Toolkit

• JavaScript forum — webdeveloper.com
• JavaScript reference — W3 Schools
• JavaScript tutorial — W3 Schools
• Special characters (JavaScript)
• Event handlers
• Pop-up window generator
• Collapsible Divs (IE & Firefox)
• overLIB popup information boxes (tooltips)
• jQuery JavaScript Library
• Dojo JavaScript Toolkit
• MochiKit JavaScript Library
• Yahoo YUI Library

Debugging

JavaScript can be a pain debugging. Although loosely typed and forgiving with syntax, there are still a number of issues that will frustrate. To start:

Add in an alert box to make sure statements work alert("Test");

Determine if targeting is correct by parsing the value
if alert == to None, then it is finding.
If alert == undefined, then it is not finding. alert("form.Node=" + form.Node.value);

Basic JavaScripts

Closes browser window with link<a href="javascript:window.close()">
Close this window</a>

Send browser back one page <a href="javascript:history.back(1)">Go back</a>

Hard reload of current page <a href ="javascript:location.reload()" target="_self">Reload</a>

Print current page <a href="javascript:window.print()">Print this page</a>

Change cursor onmouseover="this.style.cursor='pointer';"
Cursors: crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait, inherit

OS detection // This script sets OSName variable as follows:
// "Windows" for all versions of Windows
// "MacOS" for all versions of Macintosh OS
// "Linux" for all versions of Linux
// "UNIX" for all other UNIX flavors
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

Conditional commments (browser detection)<!--[if !IE]><!-->
<a href="#" onclick="alert('Use IE');">Text</a>
<![endif]-->
<!--[if IE]>
<a href="url">Text</a>
<![endif]-->

Allow user to clear radio buttons, check boxes, form data function clear() {
  for (var i=0;i<document.forms[0].elements.length;i++) {
   if (document.forms[0].elements[i].type == "text" || document.forms[0].elements[i].type == "textarea")
    document.forms[0].elements[i].value = "";  
   else if (document.forms[0].elements[i].type == "select-one")
    document.forms[0].elements[i].selectedIndex = 0;
   else if (document.forms[0].elements[i].type == "checkbox")
    document.forms[0].elements[i].checked = false;
  }
}

Small pop-up box (for stock quotes, definitions, etc.) function openpopup(url, windowtarget)
{
winContent = window.open(
url,
windowtarget,
'width=200, height=250, toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=1, resizable=0'); winContent.focus()
}

<a href="form_definitions.htm" target="formpop" OnClick="openpopup(this.href, 'formpop'); return false;">What’s This?</a>

Loads a new Web page when user closes current page var should_pop=true;
function do_exit_pop() {
if (should_pop) {
win=window.open("http://wwwurl.com/" );
//win2=window.open("http://www.url.com" );
if (!win.opener) { win.opener=self; }
}

Writes a line of text document.writeln ("<q>Text here.</q>");
document.write("<q>Text here.</q>\r\n");


Creates a JavaScript prompt var data = prompt("Ask for data" ,"Type data here" );

Text funvariable.fontcolor("red");
variable.italics();
variable.toUpperCase();

back to top