How should I protect my website from hackers adding malicious code to my html files and js files
There is no one solution, security comes in layers - like an onion ;p
Follow best-practices for configuring the software suites and platforms you're using, keep everything updated (patch management) and design for robustness. Servers and operating systems have hardening guides, use them.
Learn, stay up to date in the industry of new and old threats, get experts to do real analysis and penetration testing. Rest assured that there's still no guarantee it's secure.
Educate all the people involved, someone calling say the hosting company and asking for a file change on your web site, impersonating a valid person like yourself, might be much easier than programatically attacking it.
Get a few scary but well-trained dogs.
Run automated test tools to start with like Nessus from some top ten list just to check for the obvious known vulnerabilities that automated attacks could be leveraging. Note that someone out to actually attack you for real won't rely on any of these known vulnerabilities (unless you've not protected against them).
When it comes to coding, use modern frameworks, don't write data access stuff by hand.
I think this should belong to Stack Overflow, but anyway, in generally:
You should do something like this: