The most daunting ‘learning experience’ for developing developers is to make the jump from the HTMLs and the CSSs of the world to web scripting. It looks good from the outside – all that added interactivity and animation and cool effects and features – oh my. But for some designers, it proves to be a difficult lesson to learn, as scripting can require more focus, logic, and organization than the coding that you are used to.

Getting on Your Feet Fast

Let’s take a look at bulletproof ways to ease into Javascript at an accelerated pace. Javascript is the perfect place to start to learn scripting because it is generally less complex than other scripting languages, and is client-side – meaning that you will be able to test your scripts on your computer as you script it, in real time, without setting up servers or putting forth any more effort than you really need to. However you code pages now is great – don’t do anything differently to accommodate Javascript – she’s easy to get along with.

The first place I start when looking to learn anything new is on the web – makes sense to learn the web from the web, right? Yeah, books are nice, and they can make you look intelligent, but the truth of the matter is that you’ll find most (if not all) of that same information out on the web, and, out on the web, you can find the most updated tutorials. If books suit you, there are a plethora of books out there on Javascript – feel free to help yourself to any of them.

Websites That Teach Javascript

Something to remember about Javascript websites as you scour the web for help – there are essentially two types of Javascript websites; those that are focused on scripts, and those that are focused on teaching Javascript. I say this because I’ve worked with a lot of students that have stumbled across script websites, started reading scripts on those pages as if they were tutorials and then got confused and discouraged when they couldn’t follow the code – this would be akin to trying to read Braille by shouting at it.

Javascript learning sites spend more time on simple logic and processes. Stuff you will never really do on a website (as you’ll see below) but it will get you into the scripting mindset and help you ease into the building blocks that will creep into every script you work with.

Let’s take a look at two ‘learning’ Javascript sites.

Tizag.com

I don’t know where this site came from or remember how I found it, but I constantly reference Tizag for many of their tutorials. They are straightforward and direct, but move through the topic in a way that makes it easy to understand. Their lessons aren’t too long, giving you just enough to take out and test before returning for the next lesson.

W3schools.com

This site is a step up from the rest in teaching you Javascript (or anything for that matter) and there’s one really simple reason why – they let you try it for yourself right there in the tutorial. A lot of people don’t like learning from books because you can’t try it for yourself; that is unless, of course, you find some ridiculous way to prop the book up against your monitor, so you can read it without holding it open and type all at once, but that’s not very conducive to being able to focus on the script at hand.

About.Com

About.com offers premium advice and tutorials on just about anything for free. It’s pretty much to a multi-information oriented site. Fortunately, here you’ll be able to find a variety of tutorials and workshops focused on begginer to advanced JavaScript users.

Academic Tutorials

The Academic Tutorials site is very similar to the W3 schools learning center. It provides extensive and well organized facts on JavaScript. You will also find yourself with more hands-on experience than you thought, since almost every tutorial has various examples.

Learn-JavaScript-Tutorial.com

This site contains front-line examples and begginer JavaScript experiences for the novice of users. Tutorials showcase several useful scripts and images that aid you in the advancement of your skills as a designer.

Walk Before You Can Run

Let’s try it ourselves! In Javascript, the word ‘document’ refers to the current page. The word ‘write’ allows me to write text on the page. In the majority of cases, your scripts will be included in a script tag – this is how the browser identifies that you’ve switched gears. It’s just like the style tag, but it happens whenever you need javascript (even in the body tag) and uses a type of text/javascript instead of the more familiar text/css. So, if I wanted to build a script to put my name on the screen it would look like this…

document.write(“My name is Matt”);

It’s that simple – as you learn more, you’ll do more impressive things, but, hey, we all have to start somewhere, right? Consider ‘document.write’ like the fast food job you had in high school. It’s probably not something you will impress your friends with, but once you’re an investment banker, you’ll look back on it with nostalgia.

Head out to w3schools.com, get into their Javascript tutorial, and choose the first example – use this and build your first script for yourself! Replace the text with whatever text you want, or add additional ‘document.write’ commands to put more text in your page.

Subtleties of JS

Keep in mind that Javascript is like an oompa loompa in your web factory – its not building the page, its helping you build the code. So, when you put text on the screen, the script you wrote is not putting text directly on the screen… its putting text in the code, and the browser is displaying it as it normally would. Don’t believe me? Try this:

Add a second ‘document.write’ command. You should notice that the two pieces of text follow directly after one another on your webpage.

Now, between the “quotes” where your text is, add HTML tags. Add a paragraph tag on each command. You should have something like this:

document.write("<p>My name is Matt</p>");
document.write("<p>This is my first script</p>");

Because the Javascript will write this directly into the code, you can use things like HTML tags because the browser will be able to interpret and display them!

As you get to more and more complicated topics, the value of being able to code alongside the tutorials on w3schools.com will be invaluable to your ability to learn Javascript fast and feel comfortable doing so.

Put It to Use

The best way to motivate yourself is to see what you could do if you put the time into learning Javascript. While there are a ton of ways to enhance your HTML, I’ve included some tutorials and demos below that will show you how Javascript can play nice with your CSS to create some pretty impressive results, relying a lot on your current skill to help enhance the Javascript you are learning.

Suckerfish Dropdowns

As you learn Javascript, you should know about suckerfish dropdowns. Essentially, these dropdowns use a lightweight combination of both CSS and Javascript to create accessible menus that can be used to add additional links to your navigation.

What’s interesting about this is that the Javascript is literally adding a class to the elements – so, think about it like this – you’ve set up a class that determines a specific look and feel… but Javascript plays the role in ‘invoking’ that class – creative uses of such a trick like this could yield some very interesting results. Here it is being used to apply hover effects to specific elements, but the application of this technique could be limitless.

Switching Stylesheets

You probably already know that you can use alternate style sheets on a page, but didn’t know how to switch them on the fly – Javascript will help you do this. If you had different colored themes that you wanted your users to be able to customize, you could use Javascript to switch between the two. You could even get creative – create a different theme for different times of day (morning, day, night) and display a stylesheet based on the user’s local time.

Improved Current Field Highlighting

This tutorial from CSS-Tricks shows us a way that we can use Javascript to change the way we are highlighting active fields in forms. So, generally, the cursor blinks in that form field, and some browsers have taken it upon themselves to do something a little different, but this tutorial takes a look at how we can use Javascript and jQuery to improve the highlighting with a little style.

JavaScript Folder Collapser for Dynamic Content

This tutorial will show you how to create a group of collapsible folders using JavaScript and some elements of JQuery. The code will be featured in a way that allows for ease of implementation into a dynamic page — in this situation, the number of folders may be unknown.

JavaScript Progress Bar

Within this tutorial you’ll be able to walk through the configuration and structuring of a javascript based progress bar that can be triggered by a variety of things. For example, you could have it triggered by the progress of a sign-up sheet, or even by the amount of checkboxes that are checked.

Password Verification and Strength Checker

This tutorial will aid you in creating a registration form that includes a password strength checker to tell the user how strong (security wise) their password is. This form will also include several boxes for password use and other vital information.

The End of Our Road – Javascript Frameworks

jQuery is what is called a ‘Framework’. Frameworks contain sets of pre-written controls which make it easier and more efficient for you to develop your scripts. Instead of rewriting the same basic scripts over and over, or managing your own library, javascript frameworks such as jQuery, prototype, script.aculo.us, mootools, and others exist to save you the time. In most cases, these frameworks are extended in ways that add more functionality.

Unfortunately, a complete discussion on Javascript frameworks comparing the functions included in each is a discussion for another time, but its something to know is out there.

Check it out for Yourself: jQuery for Designers

And the Best Way of All to Learn Javascript…

From http://www.noupe.com

It can be very helpful to any developer who wants to get the PHP functions on static pages, get the extra functionality (like being able to use file_get_contents(), mktime(), serialize() ) & take the load off the server.

Currently ~400 functions are ported & there are still ones being experimented or waiting to be included. But it is possible to find the most popular ones (even md5()).

The download packages can be totally customized & it is possible to get only the functions you need besides all of them.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://phpjs.org/
Download: http://phpjs.org/packages/index

Some of the new exciting features of HTML5 are the audio and video tag. This could potentially, in the long term, replace flash on the video level. I wanted to use the audio tag in one of my experiemental project, there is little information about how to manipulate the audio tag, and tought it would be great to have a starter guide.

One thing clear is this is still an early implementation, which also means it is a bit buggy. I had a strange bug where if I had a song playing and had javascript throw errors at the same time (not related together), I could not terminate the song. Closing the tab would not stop it, I had to restart Firefox. Which lead me to think that the process is still not completely linked only to the tab (in Firefox at least).

I used jquery in my demo because the application I developing is wrapped around it, but this is not necessary.

View demo
(Only consisting of 5 buttons)

What I learned

The API is somewhat easy to work with, as it should be, play(), pause(), want to stop the volume? audioElement.volume=0. Want to start playing at 55 seconds? audioElement.currentTime = 55. Pretty cool stuff.

The default html audio player controls are added automatically with a simple: controls=”true”, it has good and bad sides. You don’t have to worry about it, but at the same time, for now, you cannot modify the player style. Also when you right click you have a nice contextual menu where you can save the file in ff3.5.

A normal audio tag

Your browser does not support the audio tag.

Add and play a sound via JavaScript

Get the song filepath and duration

Load a sound

Stop a song

Change volume

Play at exactly 35 seconds in the song

The bad parts

No stop(), only pause(), I really do not know what stopped them to put stop() in the API.
No way to get the songs name.
The only accessible format are ogg and wav, no mp3 love. It also means that you will have to convert all your sounds in ogg.
As I said this is a bit buggy but understandable, the specs are not even finished.
Microsoft will probably implement the audio and video tag in 2022.

The good parts

The API is easy to use, you can have a song playing in no time.
You do not need to parse the audio object in the HTML body, you can have it played directly in your script.
In the end, I’m really happy on how this turned out.

Download the source code View demo

Tested on:
Firefox 3.5

Ressources

http://hacks.mozilla.org/2009/06/exploring-music-audio/
https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox
http://webkit.org/blog/140/html5-media-support/

When I last wrote the Tech Times I was quite excited about starting my first AIR application, called Harpoon, using only HTML, CSS, and JavaScript. One of the features I ran out of time to discuss was the way you can use an XML file to store and retrieve application preferences.

If you downloaded and installed Harpoon you may have noticed the Preferences panel with the select list.

Here’s the HTML for that field and its label:

<label>Refresh every (minutes)</label>
<select id="pref_refresh" name="pref_refresh">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  ...
  <option value="10">10</option>
</select>

If you recall, Harpoon is destined to be an auction watching application for the Flippa site. Eventually this will control how often Flippa is checked for new auctions matching your query. Of course you’d want Harpoon to remember this setting, so we’ll store the selected value in an XML file.

Our task is this:

• When Harpoon is opened we check to see if the preferences file is available.
• If unavailable Harpoon should create the file and write the default value.
• If available Harpoon should read it and set the field value.
• Whenever the field value is changed Harpoon should write the new value to the preferences file.

This sounds way more complicated than it really is. Let’s dive in so I can show you.

First some adjustments to our Harpoon object. (If you need to prod your memory, take a detour and refer back to my previous article.) We want to store the refresh value, and a couple of other important values within the Harpoon object:

var Harpoon = {
  ...
  prefsFile : null,
  storePath : null,
  prefs : {
    refresh : 10
  }
}

I’ll address prefsFile and storePath in a moment, but you can also see the prefs object that has one property called refresh. This is where we’ll store the refresh value, and it’ll be accessible within our application from Harpoon.prefs.refresh.

Now we come back to the prefsFile and storePath properties. For security reasons each AIR application is given its own storage directory from which it can read and write files. This is where our preferences file will reside. These two properties will store the path to the application storage directory and the path to the preferences file. If you remember from the previous article Harpoon has an init function for initialisation, where we placed that call to the setupWindow function. We’ll add a few lines of code to that:

init : function() {
  Harpoon.setupWindow();
  Harpoon.storePath =
      air.File.applicationStorageDirectory;
  Harpoon.prefsFile =
      Harpoon.storePath.resolvePath("prefs.xml");
  Harpoon.getPrefs();
  ...
},

We use the air.File.applicationStorageDirectory to obtain Harpoon’s storage directory. Then we use the resolvePath method to retrieve the path to the preferences file prefs.xml and store it as a File object. The next line, Harpoon.getPrefs(), is a call to a new function we shall write, after the break!

JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user’s experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the environment it runs in: the Web browser. JavaScript’s popularity is evident in emerging technologies, such as Adobe AIR, which use it as a supported language for creating desktop-based applications.

Below, you’ll find 50 excellent tools to help you achieve various tasks involved in authoring JavaScript code. You’ll find useful tools to speed up your coding processes, including debugging tools to hunt down places where your scripts break, unit testing and validation tools to test your scripts in various situations, security vulnerability scanners and code optimization tools to make sure your scripts are light as a feather.

You’ll also find a few new and alternative JavaScript and AJAX frameworks to help you explore options beyond the big names (i.e. MooTools, jQuery, YUI, Dojo, Prototype), in addition to useful scripts to help you accomplish a host of design and development tasks related to JavaScript.

Also, be sure to check out the following related posts:

• 75 (Really) Useful JavaScript Techniques
• 60 AJAX- and Javascript Solutions For Professional Coding
• jQuery and JavaScript Coding: Examples and Best Practices
• 50 Extremely Useful And Powerful CSS Tools

JavaScript/AJAX Authoring Tools

• jQuery UI
  The jQuery UI allows you to design custom user interfaces for Web applications using the jQuery library. With jQuery UI, you can reduce the amount of code you write for common rich interactive features and website widgets. Be sure to check out the jQuery UI Demo page, which showcases some of the things you can accomplish using jQuery UI.
• Google Web Toolkit
  The Google Web Toolkit (commonly referred to as GWT) is a framework for developing complex and fully featured AJAX-based Web applications. You write front-end code in Java that is later compiled into optimized and cross-browser-friendly JavaScript. GWT puts the focus on Web application development by reducing the need for testing and debugging JavaScript for browser quirks.
• Jx
  Jx is a JavaScript library for creating graphical user interfaces written on top of the MooTools framework. Jx is distributed with an MIT license and is well documented. Numerous examples as well as thorough and well-organized API documentation is available on the website.
• Freestyle Webtop Toolkit
  Freestyle aims to reduce the complexity and time involved in deploying Web-based user interfaces by eliminating the separation of client-side and server-side development. With Freestyle, you focus on programming logic and UI design, and it handles the rest (i.e. cross-browser compatibility and DHTML and AJAX development).
• Script#
  Script# is an AJAX and JavaScript authoring tool that allows developers to write in C#. It also allows .NET developers to leverage their existing knowledge and provides powerful tools associated with the .NET framework.
• Aptana Jaxer
  Aptana Jaxer is the first “AJAX server” that allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create fully featured server-side-powered Web applications. With Jaxer, you can even write database queries in JavaScript syntax. Jaxer integrates very well with popular JavaScript libraries such as jQuery, Dojo and Ext JS.
• JS Regex Generator
  JS Regex Generator helps JavaScript developers write Regular Expressions for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.
• WaveMaker
  WaveMaker is open-source software for complete Web application development and deployment. You can find a host of demo applications built and deployed using WaveMaker on the Demo Applications page.

Documentation Tools

• JSDoc Toolkit
  JSDoc Toolkit makes code documentation a breeze. Written in JavaScript, it helps developers automatically generate templates for JavaScript comments. It’s a great tool for managing large-scale applications developed by teams of developers who have different coding styles.
• jGrouseDoc
  jGrouseDoc is an open-source project distributed through Google Code under a modified BSD license. It lets developers document and manage their code comments using a format similar to Javadoc’s.

JavaScript Debugging Tools

• Firebug
  Firebug is an extremely popular and well-regarded front-end debugging tool. It has all the features you’d expect from a JavaScript debugging tool, such as the ability to set breakpoints in your code so that you can step through your script. For people developing outside of Mozilla-based browsers, check out Firebug Lite, which is a JavaScript library you can include in your Web pages to access some of the features of Firebug.
• Venkman JavaScript Debugger
  Venkman is Mozilla’s JavaScript debugger and an add-on for Gecko-based browsers. Venkman is a robust and fully featured JavaScript debugging environment, with a host of useful features and options, such as code profiling to inspect your script’s performance.
• Drosera
  Drosera is an excellent debugging tool for Safari and WebKit-based browsers.
• Opera Dragonfly
  Opera Dragonfly is a robust debugging environment for the Opera browser. Dragonfly allows you to view and inspect errors, debug your scripts and inspect and edit the DOM and CSS on the fly.
• NitobiBug
  NitobiBug is a browser-based JavaScript object logger and inspector. It runs on numerous browsers, including IE, Safari, Opera and Firefox. It is a powerful tool in helping developers build rich interactive AJAX applications.
• DebugBar
  DebugBar is an in-browser front-end debugger for Internet Explorer. Much like its Firefox counterparts, it has a robust set of features, such as DOM, JavaScript and cookie inspection. Be sure to check out Companion JS, which is a JavaScript debugging library to be used alongside DebugBar.
• Internet Explorer Developer Toolbar
  Similar to Firebug, IE Developer Toolbar is an in-browser tool to help you debug front-end code in Internet Explorer. It’s especially handy as a debugging and inspection alternative to Firefox when you’re developing and testing in IE.

JavaScript Testing and Validation Tools

• Test – JavaScriptMVC
  Test is a JavaScriptMVC component for easily setting up automated unit testing for JavaScript code. It lets you effectively test for DOM events (such as a key press or form submission), thereby lessening development time, oversight and errors associated with manual testing.
• JsUnit
  JsUnit is a popular unit testing framework for JavaScript code. It’s a JavaScript port from another unit testing framework for Java called JUnit. JsUnit allows you to write test cases and provides tools for automated code execution.
• JSLint
  JSLint is a Web-based tool for verifying your JavaScript code for errors. It has a ton of features and settings that you can use to customize verification algorithms to suit your needs.
• Crosscheck
  Crosscheck is an open-source testing framework for JavaScript. Crosscheck is unique because it works independent of environment: you can run tests outside of a Web browser, which avoids discrepancies that occur when testing in various browsers.
• YUI Test
  YUI Test is a suite of testing utilities that’s part of the YUI library developed by Yahoo!. It has numerous features, such as easy creation of test cases through an intuitive syntax, advanced failure detection and the ability to organize test cases by grouping them into test suites.
• J3Unit
  J3Unit is an excellent object-oriented unit-testing framework for JavaScript. It gives you a host of options for writing automated test cases and has three modes: Static Mode, Local Browser Mode and Remote Browser Mode.
• Regular Expression Tool
  The Regular Expression Tool is an online utility that allows you to test your RegEx code against a sample test. It’s a handy tool to have around when you want to quickly test the efficacy of your regular expressions in a variety of example texts.
• JavaScript Regular Expression Tester
  This is another handy tool for testing regular expressions within the Web browser.
• JSLitmus
  JSLitmus is a lightweight tool for creating JavaScript benchmarks and performance tests, using an intuitive API.

Security Tools

• AttackAPI
  AttackAPI is a framework for writing test cases of potential JavaScript exploits and vulnerabilities.
• jsfuzzer
  jsfuzzer is a fuzzing tool to help you write (and test for) attack vectors in JavaScript.

New and Alternative JavaScript and Ajax Development Frameworks

• Clean AJAX
  Clean AJAX is an open-source framework for creating AJAX-based applications. Check out the demo page to see it in action.
• SAJAX
  SAJAX is an excellent toolkit for developing AJAX-based applications. It supports PHP, Perl and Python.
• JavaScriptMVC
  JavaScriptMVC is a Web application framework based on the MVC software architectural pattern. It speeds up Web development processes and lays down best practices, maintainability and standards as principles in a project’s development.
• qooxdoo
  qooxdoo is a simple and intuitive AJAX application framework. Be sure to check out the Demo Browser, a Web-based application that allows you to view demos of qooxdoo at work.
• SimpleJS
  SimpleJS is a small and lightweight JavaScript library that provides developers with useful JavaScript functions for working with AJAX.

Image Manipulation and Graphing

• Reflection.js
  Reflection.js automatically adds reflections to your images unobtrusively. Also check out instant.js, a similar script that adds an image border and tilts images on a Web page.
• typeface.js
  typeface.js allows you to embed custom fonts on Web pages, freeing you from having to create images for HTML text.
• CanvasGraph.js
  CanvasGraph.js is a simple JavaScript library that lets you construct bar, line and pie charts using HTML’s canvas element.
• flot
  flot is a JavaScript library for plotting data and has been tested to work in most modern Web browsers.
• JavaScript Diagram Builder
  The JavaScript Diagram Builder is a JavaScript library that consists of a variety of objects and functions for constructing diagrams.
• The Dojo Charting Engine
  The Dojo Charting Engine is a robust utility for creating components for data visualization, written on top of the Dojo Toolkit.

Useful Utilities and JavaScript Scripts

• Processing.js
  Processing.js is a JavaScript port of Processing, the open-source data-visualization programming language. Check out examples that use Processing.js.
• AJAX Libraries API
  Google’s AJAX Libraries API allows you to serve popular JavaScript libraries using its CDN, which reduces the server load on your website.
• DamnIT
  DamnIT is an error-reporting service that allows you to gather feedback from beta testers after they’ve encountered a JavaScript error. This is perfect for live production testing and as a monitoring tool that helps you track errors and weak spots in your Web applications.
• ie7-js
  ie7-js is a JavaScript library that forces Internet Explorer to behave like a standards-based browser (like Firefox or Opera). It automatically fixes IE browser quirks and deviations from Web standards, as in the case of its box model.
• Lazy loader
  Lazy loader is a jQuery plug-in that delays the loading of images so that text content can load first, thereby making image-heavy pages load faster.

JavaScript Code Optimization and Minification Tools

• JS Minifier
  JS Minifier is a Web-based tool for shrinking your JavaScript code to make it as lightweight as possible.
• JSMIN
  JSMIN is a popular JavaScript minifier that removes unneeded characters (like spaces and tabs) and comments, thus reducing your script’s file size.
• YUI Compressor
  The YUI Compressor is another well-regarded JavaScript code-optimization tool developed by Yahoo!.
• Scriptalizer
  Scriptalizer is a helpful online tool for combining JavaScript files to reduce HTTP requests.
• ShrinkSafe
  ShrinkSafe is a compression tool that reduces JavaScript file sizes.
• SlickSpeed Selectors Test
  SlickSpeed is a Web page for comparing the performance of the DOM object selection of various popular frameworks like MooTools and jQuery.