"I would imagine there is still a lot you can do without Javascript" - funny, not so long ago we did everything without javascript.
The best approach is what's known as 'progressive enhancement'. The principle is to make something that works without JavaScript, and then 'layer' on additional behaviours by binding the JavaScript to the objects. Libraries such as jQuery make this straightforward, as they support CSS-style selectors. That way you can apply JS behaviours almost the same way you would apply CSS (OK, a slight exaggeration).
Some thought needs to be taken to think about what's a good baseline and how pages should be changed.
Often the real extra work is at the server-side, where you may have to have multiple request processing systems. It's a bit of a big field to address in one little response!
Also, it's worth thinking about who and why users are not using javascript. Here's something I wrote a while ago on the subject should you be interested.
An example? Take something simple, eg. you want to display nice 'tooltips' by form fields when the user mouses to them. In the HTML, these could (for example) be marked up as paragraphs:
<label for="username">User name</label><input type="text" id="username" />
<p>Username must be between 6-8 characters</p>
For non JS users, the prompt can simply be displayed as a nice paragraph. So you style this with CSS. Have additional CSS for JS users, which hides the paragraph by default. So: 2 sets of CSS, one overrides the other.
non JS:
form p {
margin: 10px 0 0 0;
border-bottom: 1px solid grey;
}
js:
form p {
position: absolute; display: none;
width: 180px;
background-image: url(nice-bubble.gif);
padding: 10px;
}
How you apply CSS for JS/non JS situations is up to you. There are numerous options. Personally I like to code for JS in the CSS and have a noscript.css variant (i.e. working backwards) in a tag. Which isn't valid XHTML, but works nicely.
Then, have some JS which looks for the elements and manages the display code for the tooltips. eg:
$(document).ready(function() {
$('form input').focus(function() {...display paragraph...});
// etc;
})
That's bogus code, but you get the picture. What you end up with is 1 set of HTML, with 2 presentations, and additional behaviours, and no JS tangled up in your HTML itself.