Oh, I'm totally digging on the client-side operations. I started learning JavaScript completely separate from the web. I was staying at a friend's house out of town and, because I rarely sleep, I was looking for something to read. I found Flanagan's JavaScript book. No computer, just me curled up under a single light in an otherwise snore-filled house.
I really liked the sorts of things one could do with JavaScript, so I started experimenting. About this time, I already thought up an interesting project to do: A High Precision JavaScript Calculator. A calculator that would perform basic functions (and some rather advanced!) on numbers of as-large-a-precision-as-you-can-handle. Could I have picked a more interesting task? No way! First of all, JavaScript is untyped. Here I am, trying to make numbers work in a programming environment (typically, you don't see 20- or 300-digit numbers of any precision in programming), but then I'm complicating my life even further by doing it all as string manipulation. And JavaScript, being untyped, doesn't automatically know the difference between strings, numbers, Booleans, etc. Addition was hard. At least until I tried to do negative numbers. Then subtraction was pretty straightforward. But that was all pretty easy compared to Multiplication. And don't even get me started on the difficulties in Division!
Eventually, I was confident enough to unveil my JavaScript High Precision Calculator to the world. And so far, the world's been enjoying it very much! I receive the most interesting letters from people who use the Calculator! And I've added more functions, as well as done a couple of trades with other people for even more functions. Woo-hoo!
So, if you're a math nerd or an enginering nerd or just a really clever coder and you want to contribute to the Calculator's functions, by all means drop me a note!
A huge help in learning JavaScript for me was in helping others to learn. I had my Flanigan book and I had the Internet, but I needed something else. I needed some DMS (Dynamic Meat System) help. So I found the most terribly useful Tek-Tips site. I cannot recommend this site enough!
At Tek-Tips, I'd find a problem that looked interesting, then close my browser and figure out a solution. Then, I'd come back and compare my solution against the posted solutions. Eventually, I noticed that my solution was done sooner (not always, but often), so I started helping people, too. It was cool! Things would get progressively more challenging and I was almost always able to solve 'em. (don't ask me about disabling the right-mouse-click, or preventing image-download or I'll hire a thickly accented man to give you a disease you can't pronounce.)
While helping people solve their problms there, I saved up some of my more interesting solutions, which I present below. You are welcome to use the snippets and clips, but if you do, I'd appreciate a mention in your source code, with a link back to this site. They are numbered only for reference, not because of any particular order. The links are to Winzip archives containing all the necessary files and any instructions I felt were necessary. Pretty much the way to work 'em is to just open the archive and copy all files into the same directory. Note that I re-use filenames a lot (such as "Sample.html"), so don't just splatter all the archives together. Clever readers will note that not all of these are JavaScript bits. Some are just really clever HTML things I either picked up or figured out (it could be argued that there is nothing new under the sun). Regardless, enjoy!
- AddItemsToADropDown.zip This script shows you how to add items to a drop-down control on-the-fly.
- AddTwoFieldsOnBlur.zip Add two fields and sum them in a third field. Collect the data using the onBlur event.
- AutoFormatIPAddresses.zip If you enter a hyphenated IP address in one window, the address is converted to separated-by-colons in the next window. Likewise, if you enter a colon-formatted address in the colon window, it will show up as hyphenated in the hyphen window. (note that not all of these will prove massively useful -- they were snippets to solve a particular problem.)
- AutomaticallyUpdateDate.zip Shows how JavaScript can use the Date object and display it in a more-or-less meaningful fashion.
- BuildALinkOnTheFly.zip Builds a link on-the-fly using variables.
- BulletsWrapAroundImage.zip How to make a bulleted list wrap around an image. This is somewhat do-able with wrap directives, but the results are patchy and the browsers usually forget that the bullets head the list, so often the bullets overlay the image.
- ButtonOpensNewPage.zip How to use a button input object as a simple hyperlink.
- ChangeFocusOnReloadDependingOnSelect.zip Choose a Country from the drop-down menu. When you refresh the page, that choice is now reflected by the radio buttons.
- ChangingImageAttributesOnTheFly.zip Using events (button presses), you can dynamically change the height and width attributes of an image on a web page.
- CharEntitiesInPopup.zip I guess this is more HTML than JavaScript, but still, it's darn useful. This example shows how to insert various character entities into a JavaScript alert window.
- CharEntitiesInTooltips.zip Okay, this is pure HTML, but it's really very useful, once you see it! This shows how to include character entities in a span's "title". Basically, this is what pops up when you hover over something. In this example, there are linefeeds in the little pop-up box, which opens the door to all sorts of formatting evil.
- CheckboxMakesSelectionVisible.zip Click the checkbox on, and you get a list of options. Unclick the checkbox and the list goes away.
- CheckFirstChar.zip If the first character is a number, it tells you. If the first character is not a number, it tells you something else.
- Controls.zip A simple sample of building an exclusive radio button cluster, and a checkbox.
- CSSButtons.zip This is my strange attempt to simulate a button using only CSS.
- DropDownsThatChangeSize.zip As you tab though the drop-downs, notice that they change size to accomodate the tab in-focus. This allows you to put more tabs than could fit normally on a single page.
- GetAFileNoTextChange.zip This is very clever. This code allows you to use the browser's "Browse..." control to fish for a file, but it doesn't allow the User to change the text description of the file's location. In short, it assures that the only path + file entered into this box are as a result of browsing and not someone typing something crazy in the box.
- GraphicsUsingHTMLTable.zip This is a rudimentary example of how to do graphics using tables in HTML. Not as versatile as JavaScriptGraphicsImproved.zip.
- JavaScriptGraphics.zip Another rudimentary example of making a graphical display using JavaScript and HTML tables. Not as versatile as JavaScriptGraphicsImproved.zip.
- JavaScriptGraphicsImproved.zip This really is one of my most clever ideas. Sample.html will show you a collection of graphic images produced by the Sample.js graphics functions, which are driven by the base function in Grafix.js. Everything uses this base function. SampleMaths.html and SampleMaths.js use JavaScript to produce a mathematical circle, plot it out into 2D RGB space, and then draw the image. This is another example of using Grafix.js to draw a mathematical result. Very handy!
- JSWP_CreateTextFile.zip this module is one of the components of a special project. It creates either a text file containing whatever you like, or an HTML file containing whatever you like. You can then use the browser to save either file.
- MenuStaysIntact.zip Just a little example of making a table that keeps one column locked in width.
- MoveAroundTableWithArrowKeys.zip It's a 3x3 table, and the arrow keys let you move around in it. Of course, this breaks the right- and left-arrow functionality of moving though text, but the point of the exercise was to capture keystrokes and move the cursor accordingly. This could easily be reprogrammed to allow whatever keystrokes you prefer.
- NonscrollingBackground.zip This is just me trying to figure out how to lock a background into place -- make it nonscrolling.
- onUnloadEvent.zip Here's how this works: If you exit "legitimately", then everything's cool. If you try to bomb out of the window, then you receive a warning. NOTE: This only works in Microsoft browsers. ADDITIONAL NOTE: This bit of code denies the User their desire to close the window when they're done. Therefore, I brand this code: "evil".
- ParseUSPhoneNumbers.zip This take a ten-digit number and whatever else characters are in there and makes a number formatted the way most Americans format it, with parenthesis around the area code and a dash after the third non area code digit.
- ParseUSPhoneNumbersOnBlur.zip This does basically the same thing -- formatting a US phone number -- but it does so on the onBlur event, which can be sorta' convenient during high speed data entry.
- PasswordRequired.zip If you enter a username and a password, then you're fine. If either (or both!) are blank, then you get an alert.
- PopAMaxWindow.zip Another sign that I, at times, am "evil". Sample.html immediately opens a new window that bullies its way onto the screen and covers up everything else. Some controls are dropped, too.
- PopInWorksheet.zip Evidently what happens here is that you enter text into the "Add" window, press the button and it's appended to the contents of the text control. I have no recollection why I needed this, but it seems I did. And if I did, then perhaps you will, too.
- PopupWindowClosesParent.zip This is evil, too. It opens a new window and then, while you're distracted by the new window, it closes the original window. Basically, it performs a switcheroo. It only works in Internet Explorer, of course, because most well-behaved browsers don't truck with that sort of screwing around.
- Randomxdigitnumber.zip This produces a pseudo-random x-digit base-10 number. I wrote this to add to my JavaScript High Precision Calculator. It's pretty fast, but it assumes a few things. Think of it as a good proof-of-concept, but for real use in the Calculator, I'm going to have to replace certain structures with my own, such as DO-LOOPS, which don't do so well for very large numbers. Still, for rolling hit points, it can't be beat.
- ReformatContentOfTextarea.zip Using the onBlur vent, this strips out linefeeds from a textarea.
- Scroll.zip Slide the scrollbar wherever you like and then click in the document and it'll report back the position of the scrollbar.
- StripOutAllButTheFirstTwoUnderscores.zip If there are any underscore characters in this string, it strips them out -- except for the first two it encounters. It ignores the first two and then strips out the rest.
- stylelinks.zip Ordinary HTML with a stylesheet. This shows how to determine the styles of the various types of links.
- TableOfButtons.zip Different ways of stacking buttons.
- TableWithBorders.zip This is drawing a table and its borders using table tools other than "border", etc.
- TimedDurationWarningWindow.zip This pops open a warning window. The window will either dismiss itself after a few seconds, or immediately dismiss itself when you do so using the dismissal button.
- UglyBlinkingText.zip I'm frickin' evil, I tell you!
- UnderlineIndependentOfSuperscript.zip Most people know how to underline text in HTML (and those that don't need to be spanked repeatedly with a supercollider), but one of the tricky things is to maintain a consistent underline of superscripted (and subscripted) text. Using the ordinary underline tag underlines the superscripted letters, but it also superscripts the underline itself. Very ugly. Using this CSS class allows you to do a consistent underline.
- UpDownControlWidget.zip Okay, I didn't write this, and I can't remember exactly who did, but it's really, really handy. If you're the author, let me know and tell me where we met and I'll credit you right properly, 'cause you deserve it!
- UseEvalToMakeVariable.zip This script uses the "eval" command to make a variable of any name you like. There are certain applications where you might need variables of a variety of pre-programmed names.
- ValidateTime.zip Insists on having you put valid values for time.
- ValidateTime2.zip More like format time. Pops colons and a decimal in when appropriate.
- VerticalOrganizedTable.zip Tables are great ways to display data, but in some cases, a table must all fit in a rather narrow space. Because HTML or CSS doesn't allow for rotated text, this is the best way I could figure out how to organize a table of "fat" data in a narrow space.
- YesMan.zip Eliza always scared me, so I wrote a more positive-minded critter.
