JavaScript

About

JavaScript (JS) is an computer programming language interpreted by all modern web browsers and used within HTML pages in web development. Implementations allow client-side scripts to interact with the user, alter the displayed page content, communicate asynchronously and control the browser. Sadly there are subtle differences in the language between different browsers, meaning libraries like jQuery and Google Closure have become popular to make sure code work across all major browsers.

Child Pages

Related/Child Pages:

• JavaScript - Shortcut Keys - shows how to setup shortcut keys in JavaScript.
• JavaScript - Geometry - some code for dealing with longitude/latitude calculations.
• JavaScript - Image Pan and Zoom Demo - image pan and zoom with 'draggable' and JavaScript on mouse drag and the scroll wheel.
• JavaScript - Closure TabBar - a simplified example of Google's public 'TabBar' object.
• JavaScript - Fancy Dropdown with Images - shows a popup menu (potentially with images) using the display property.
• JavaScript - Synchronize Two Scroll Areas - scrolling one div also scrolls another div.
• JavaScript - Regex - demos the printing of regex matches using JavaScript regex match.
• JavaScript - Extract Command Line Flags - does some string modification using regex.
• JavaScript - Enlarged Image Rollover - hover your mouse over any image to see an enlarged version.
• JavaScript - Url Forwarder - an example of forwarding (changing the webpage/url) from JavaScript using `window.location.href`.
• JavaScript - InnerHtml - A few notes about innerHTML / textContent.
• JavaScript - Resize Images with a Slider - Exactly what it sounds like.
• JavaScript - Generating Image Boxes from a Text Area (aka: Ack Slides) - I used a longer version of this code at Google to generate Acknowledgement slides.
• JavaScript - Binding - Some notes on binding.
• JavaScript - Sort Tables by any Header Column - concise JavaScript that allows you to click any table header column to sort rows.
• JavaScript - Video Thumbnails and Control - some tricks to affect video playback and a hack to render still "thumbnails".
• JavaScript - Zippy - A simple show/hide expander with a plus/minus arrow. We call this a "zippy".

Text Conversion:

• JavaScript - Simple Converter - simple one-file miles to kilometers converter which you can add to for your own conversions.
• JavaScript - Tabular Text to CSV Converter - takes set of entries in itemized format (eg: "name: john, age: 21") and turns it into a CSV style string.

Syntax Highlighting:

• JavaScript - Syntax Highlighting - my investigations into syntax highlighting.
  • JavaScript - Text Areas with Code Syntax Highlighting - links to some libraries for syntax highlighting the contents of an editable area of text.
  • JavaScript - Syntax Highlighting - CodeMirror Hello World - I played with [CodeMirror] syntax highlighter and made a very quick hello world example which load the SQL module into an existing textarea and you can resize the area nicely.
  • JavaScript - Syntax Highlighting - Customizable TextArea Words - Based on highlight-within-textarea v2 by Will Boyd - modified to let you specify custom words more easily.

Drawing:

• SVG - Percent Ring - Percent ring using JavaScript and Scalable Vector Graphics (SVG).

Common JavaScript Code

JavaScript Tags Within HTML

These tags are used for the bulk of your JavaScript scripts. Typically functions are written in the head tags, although most work within the body as well.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
function displayError(errorString) {
  window.alert("ERROR:" + errorString);
}
</SCRIPT>

Now you can call this function from a hyperlink:

<a href="#" onClick="displayError('sorry, this link does not work');" >click here</a>

.... or other objects like buttons:

<input type="button" value="Test" onDblClick="displayError('do not double click me')" >

Windows Alert

window.alert("This is an alert box - annoying but sometimes useful");

Array Declaration

myArray1 = ['0','1','2'];            // Array with length 3 and 3 strings.
myArray2 = new Array(0,1,2);         // Array with length 3 and 3 numbers.

myArray3 = new Array(3);             // Empty array with 3 elements.
myArray3[0] = 'one';
myArray3[1] = 'two';
myArray3[2] = 'three';

Status Bar

window.status = 'This text will appear in the bottom status bar';

Output Text

document.write('Hello there');

Open Window of Fixed Size

<a href="http://www.google.com/" target="Search" 
onClick="var W = window.open('', 'Search', 'width=400,height=200,menubar=0,scrollbars=0,resizable=1'); if (W) { W.focus(); }">
google search </a>

see also: dottor web reference for window.open w3schools - Window open() Methodd

Yes/No Dialog

The 'confirm' dialog displays an 'ok' or 'cancel' option

if (confirm('Are you \n sure?')) {
  document.form1.submit();
}

See Also

• HTML
• CSS

Links

• Wikipedia entry - very good overview of javascript syntax
• Google JavaScript Style Guide
• FreeFormatter.com > JavaScript Beautiful - great to copy and paste code to make it formatted all pretty.