If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

How to run/test JavaScript?

It only actually tells users how to run JS code on page 311, where users are told of the following solutions:

"Client-side JavaScript code is embedded within HTML documents in four ways:

Inline, between a pair of <script> and </script> tags

From an external file specified by the src attribute of a <script> tag

In an HTML event handler attribute, such as onclick or onmouseover

In a URL that uses the special javascript: protocol

."

I was wondering what professional JS developers use to write and test their code: Do they use a good text editor with syntax high-lighting + autocompletion, hit F5 in the browser to reload the page every time they make a change, and use some add-on in the browser to investigate errors? Or are there full-fledged IDE's similar to MS VisualStudio for non-web languages?

Thank you.
--------
Edit: For instance, I wrote this piece of code, which doesn't work (nothing displayed on screen when calling index.html), but Firefox doesn't display any error. How would I go trying to understand why it's not working?

You can use any text editor - preferably one that highlights code. That way you see ahead of time if there might be an error. I actually use DreamWeaver, but I don't use any of the menus. I just like the highlighting and autocomplete. Although, there are many text editors that do this. But typically, yes, I make a change and refresh the page - just jumping back and forth between DreamWeaver and the browser. You should also get FireBug for Firefox. It's great for debugging. In regards to your code, you need to set your "type" in your script reference in the <head> section. You actually don't need to spec the "language" anymore. The function you have in your body should technically be in your <head>. With that said, there's nothing ever calling your script to execute. You can have an onclick event on some element to call it, or you can call it immediately with <body onload="myfunc()">.

You can use any text editor - preferably one that highlights code. That way you see ahead of time if there might be an error. I actually use DreamWeaver, but I don't use any of the menus. I just like the highlighting and autocomplete.

Thanks for the info. I'll see if there are any good free editors for Windows that support JS highlighting + autocomplete, or get a commercial alternative if not.

Originally Posted by Javaboey

Although, there are many text editors that do this. But typically, yes, I make a change and refresh the page - just jumping back and forth between DreamWeaver and the browser.

Ok. I was wondering if people used a better alternative, but I'll get used to this then.

Originally Posted by Javaboey

You should also get FireBug for Firefox. It's great for debugging.

Good to know. I'm used to Chrome though, so will check if there's a similar add-on for that browser.

Originally Posted by Javaboey

In regards to your code, you need to set your "type" in your script reference in the <head> section. You actually don't need to spec the "language" anymore.

Thanks for pointing this out: I should use "<script type="text/javascript">" (source)

Originally Posted by Javaboey

The function you have in your body should technically be in your <head>. With that said, there's nothing ever calling your script to execute. You can have an onclick event on some element to call it, or you can call it immediately with <body onload="myfunc()">.

Actually, the problem went away when I removed the "<script>" and "</script>" in the JS file. This was shown by Firebug. That's why I was looking for tools that help JS developers write and debug code faster.

Chrome and safari both share the same javascript console / CSS & DOM inspector, triggered from the right-click context menu, under 'inspect element' (I think the safari version isn't enabled by default, you might have to go into the advanced settings and find the 'enable developer menu' checkbox). Opera has a similar tool called firefly, triggered in the same way - right-click context menu, then 'inspect element'.