How do I work on a site without affecting or damaging the site

The trouble is, every time you work on the site (yours or your client's), little errors creep in, or you can't sufficiently undo what you started or, well, something else has happened.

You're losing control of your site and it's becoming a hassle.

The thing you need is to consider setting up Environments: Development, Test, and Production.

Development
The Development environment is your sandbox. This is where you play with your code, dink around with your settings, and monkey with your .js files. Do anything you want in the Development environment. As a rule, the Development environment is empty, unless you decide you want to play. Then, you copy the contents of your Production environment into your Development environment. Then play as you wish. Never go the other way. Never, never, never transfer anything from Development to Production. If you've played around in Development and you think you now have something better than when you started, you transfer the entire contents of Development to...

Test
The Test environment, like the Development environment, is usually empty. The only time anything goes into it is when you're suddenly really happy about what you've got goin' on in the Development environment. The Test environment simulates as closely as possible your actual Production environment. In the case of a website, the Test environment is probably out on the server: http://www.YourWackyDomain.com/Test/
You copy the entire contents of Development to the Test environment and then you run the heck out of it. You test everything you can think of, and at least three things you can't. When you are satisfied that everything operates according to what you want in the Test environment, then you prepare to load Production. Back-up the entire contents of your Production environment (it is usually sufficient to copy all files into a directory such as http://MyWackyDomain.com/ProdBackup20030507/ ), and then transfer the contents of the Test environment to the Production environment. Test again and if at any moment it doesn't work, then copy the entire contents of your ProdBackup back to the production location and go back into the Test environment and keep troubleshooting.

Production
In your case, the Production environment is the place out on the web that contains your files. A website is a bunch of different files, including .html, .jpg, .js, etc. They're all in the same environment and should be treated (usually) as a unit. The Production environment should be sacrosanct. What this means practically is that you don't be uploading willy-nilly stuff into it. Leave it alone. I mean it.

-=-=-=-=-=-=-=-=-=-=-=-=-

So, let's say you're being very good and you have all this set up perfectly. It should look like this:

Development Environment: empty
Test Environment: empty
Production Environment: contains one website
Archives: contain previous versions of website.

You decide you want to tweak some code. So...
1. Copy Production Environment content to Development Environment
2. Tweak code and test
3. If code passes, copy contents of Development Environment to Test Environment and test more thoroughly.
4. If code passes, copy Production Environment to Archive and move contents of Test Environment to Production Environment. Test the crap out of it.
5. If code passes, flush contents of Test Environment and Development Environment.

If at any point the code does not pass tests, then roll back to the previous step, reversing as you go.

This will keep to a minimum adverse effects on your users and/or your website.

Hope this helps!

Cheers,

Edward