www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to run/test JavaScript?

  1. #1
    Join Date
    Jun 2009
    Posts
    28

    Question How to run/test JavaScript?

    Hello,

    I'm reading David Flanagan's "JavaScript: The Definitive Guide, 6th ed".

    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?

    //mycode.js
    Code:
    <script>
    	function myfunc(){
    		alert("hello");
    	}
    </script>
    //index.html
    Code:
    <html>
    	<head>
    		<script language="JavaScript" src="mycode.js"> 
    		</script> 		
    	</head>
    	<body>
    		<script language="JavaScript">
    			myfunc();
    		</script>
    	</body>
    </html>
    Thank you.
    Last edited by littlebigman; 12-17-2012 at 09:26 AM.

  2. #2
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    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()">.

  3. #3
    Join Date
    Jun 2009
    Posts
    28
    Quote Originally Posted by Javaboey View Post
    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.

    Quote Originally Posted by Javaboey View Post
    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.

    Quote Originally Posted by Javaboey View Post
    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.

    Quote Originally Posted by Javaboey View Post
    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)

    Quote Originally Posted by Javaboey View Post
    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.

    Thanks for the help.

  4. #4
    Join Date
    Oct 2012
    Posts
    41
    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'.

  5. #5
    Join Date
    Jun 2009
    Posts
    28
    Thanks for the infos.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles