/    Sign up×
Community /Pin to ProfileBookmark

Debugging Javascript/HTML

Copy linkTweet thisAlerts:
Jul 28.2007

Hi!

So, I have been beginning to learn HTML/JS to help build and maintain some websites for some organizations that I belong to.

I have written the html, and have tried to include some free JS scripts I have found. However, it is not quite working and that got me thinking about how to debug in these languages.

I used to program in a server-side language where I would set data in global variables which I would later check to see what my code was doing, and in VB where I could trace through the code step by step.

However, I have not yet been able to think of a way to do a similar thing in HTML/JS.

Thanks!

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 28.2007 — It's a long story. First at all, to use free js codes you still need to learn the language in order to avoid conflicts between them on the same page (same global variables or function name, multiple onload events, and so on).

Second, despite the fact that javascript is now stable, more or less standardized (ECMAScript, DOM) there are still some differences between browsers, which you must learn (and I mean not only javascript, but CSS and even HTML as well).

And third: javascript is not a class oriented language, it is a prototype one.

All these make quite difficult a debugg process. As far as I know, the best tool so far is the Mozilla's Firefox Error Console, which is able to show you with an acceptable precision, where the javascript/CSS error might be.

Regarding the javascript programmers tools, it is often useful to insert the alert() method/command from time to time, in order to check whether the code runs or if a certain object/variable is defined. And if you use a professional editor, the code coloring is a helpful tool as well (as in DW)
Copy linkTweet thisAlerts:
@AxanarauthorJul 28.2007 — Thanks!

Yea, JS is next on my list to learn better. I am only including one script, which leads me to believe the problem is in my interface between the HTML and the JS, I basically am just trying to test to see if the script gets called or not.
Copy linkTweet thisAlerts:
@KorJul 28.2007 — test it, and post here which problem you think it might be. It would be helpful not to post the entire code (if a long one) but the significant part of it. If you have a test page on a server, it would be even more helpful. Detail your problem, please.
Copy linkTweet thisAlerts:
@AxanarauthorJul 28.2007 — Sure!,

I am using a script to create a navigation bar, I created one using just HTML and CSS which seems to work great, but fellow students really would like it to be compact, yet expandable which requires some scripting, so the re-worked version is pretty much a wrapper around the javascript found at: http://javascript.internet.com/navigation/vb-menu.html

With the new version, the sidebar menu is not displaying. I am concerned that "theMenu.js" is not actually being called.

Old HTML:
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;

&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;MEDiC&lt;/title&gt;
&lt;link type="text/css" rel="stylesheet" href="MEDiC.css" /&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id="header"&gt;
&lt;p&gt;
&lt;img src="header.JPG" height="160" width="900" alt="MEDiC" /&gt;
&lt;/p&gt;
&lt;br /&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div id="sidebar"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="index.html" title="MEDiC"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="clinics.html" title="Clinics"&gt;Clinics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="read.html" title="Reach Out and Read"&gt;Reach Out and Read&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Volunteer.html" title="Volunteer"&gt;Volunteer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Calendar.html" title="Calendar"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="ClinicResources.html" title="Clinic Resources"&gt;Clinic Resources&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Donate.html" title="Donate"&gt;Donate&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Newsletter.html" title="Newsletter"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Handbook.html" title="MEDiC Handbook"&gt;MEDiC Handbook&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Contact.html" title="Contact Information"&gt;Contact Information&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div id="calendar"&gt;
&lt;p&gt;Calendar goes here&lt;/p&gt;
&lt;/div&gt;

<i> </i> &lt;div id="main"&gt;

<i> </i>&lt;h1&gt; Announcements&lt;/h1&gt;
<i> </i>&lt;ul&gt;
<i> </i>&lt;/ul&gt;

<i> </i>&lt;h1&gt; Mission Statement&lt;/h1&gt;

<i> </i>&lt;p&gt;
<i> </i>&lt;ul&gt;
<i> </i> &lt;li&gt;To provide quality health care services to the underserved&lt;/li&gt;
<i> </i> &lt;li&gt;To assist in the training and development of health professions students&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i>&lt;/p&gt;

<i> </i>&lt;br /&gt;
<i> </i>&lt;br /&gt;
<i> </i>&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


Old CSS:
<i>
</i>body {
margin: 0;
padding: 5px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 1.6em;
}

#sidebar {
float: left;
}

#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0;
width: 170px;
font-size: 100%;
}

#sidebar li {
margin: 0;
}

#sidebar a {
text-decoration: none;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
background-color: rgb(128,3,21);
color: rgb(255,255,255);
border-top: 1px solid rgb(205,40,15);
border-right: 1px solid rgb(120,40,55);
border-bottom: 1px solid rgb(120,40,55);
border-left: 1px solid rgb(205,40,15);
}

#sidebar a:hover {
background-color: rgb(210,40,20);
}

#sidebar a:active {
padding: 2px 13px 4px 7px;
background-color: rgb(255,40,45);
color: rgb(200,210,20);
border-top: 2px solid rgb(140,40,50);
border-right: 2px solid rgb(200,40,20);
border-bottom: 2px solid rgb(200,40,20);
border-left: 2px solid rgb(140,40,50);
}

#calendar {
float: right;
width: 160px;
height: 160px;
margin-left: 20px;
margin-bottom: 20px;
border: 2px ridge black;
background-color:rgb(220,215,25);
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 160px;
border-bottom: 5px ridge rgb(220,215,25);
}

#main {
margin-top: 5px;
float: right;
width: 800px;
}

h1 {
font-size: 1.5em;
background-color: rgb(128,3,21);
color: rgb(255,255,255);
border: 1px solid rgb(120,40,55);
}

h2 {
font-size: 1.2em;
color: rgb(50, 205, 50);
}

New HTML using aforementioned JS:
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;

&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;MEDiC&lt;/title&gt;
&lt;link type="text/css" rel="stylesheet" href="MEDiC.css" /&gt;
&lt;script type="text/javascript" src="vb_menu.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="header"&gt;
&lt;p&gt;
&lt;img src="header.JPG" height="160" width="900" alt="MEDiC" /&gt;
&lt;/p&gt;
&lt;br /&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div id="MenuLine" style="position:relative;"&gt;&lt;/div&gt;

&lt;script language="JavaScript" src="theMenu.js"&gt;&lt;/script&gt;

<i> </i> &lt;div id="calendar"&gt;
<i> </i> &lt;p&gt;Calendar goes here&lt;/p&gt;
<i> </i> &lt;/div&gt;


<i> </i> &lt;div id="main"&gt;

<i> </i>&lt;h1&gt; Announcements&lt;/h1&gt;
<i> </i>&lt;ul&gt;
<i> </i>&lt;/ul&gt;

<i> </i>&lt;h1&gt; Mission Statement&lt;/h1&gt;

<i> </i>&lt;p&gt;
<i> </i>&lt;ul&gt;
<i> </i> &lt;li&gt;To provide quality health care services to the underserved&lt;/li&gt;
<i> </i> &lt;li&gt;To assist in the training and development of health professions students&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i>&lt;/p&gt;

<i> </i>&lt;br /&gt;
<i> </i>&lt;br /&gt;

<i> </i>&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


New CSS file:
<i>
</i>body {
margin: 0;
padding: 5px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 1.6em;
}

a.MenuLink{
color:#1D2123;
width:100%;
text-decoration: none;
}

/* Menu Link when the mouse is over */
a.MenuLink:hover{
color:#AA0000;
background-color:#FFFF99;
text-decoration: underline;
}

/* First menu link element */
div.FirstMenuElement{
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
padding:3px;
width:130px;
text-align: center;
background-color:#82A6C4;
border: solid #475156 1px;
display:none;
}

/* commented sections from <a href="http://javascript.internet.com/navigation/vb-menu.html">http://javascript.internet.com/navigation/vb-menu.html</a> */
/* First menu link element when the mouse is over */
div.FirstMenuElementOver{
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
width:130px;
padding:3px;
text-align: center;
background-color:#FFFF99;
border: solid #475156 1px;
}

/* Menu link element */
div.MenuElement {
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
padding:3px;
width:150px;
background-color:#EFEFFF;
border: solid #475156 1px;
display:none;
}

/* Menu link element when the mouse is over */
div.MenuElementOver {
font: 12px Geneva, Arial, Helvetica, sans-serif;
position:absolute;
padding:3px;
width:150px;
background-color:#FFFF99;
border: solid #475156 1px;
}

#calendar {
float: right;
width: 160px;
height: 160px;
margin-left: 20px;
margin-bottom: 20px;
border: 2px ridge black;
background-color:rgb(220,215,25);
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 160px;
border-bottom: 5px ridge rgb(220,215,25);
}

#main {
margin-top: 5px;
float: right;
width: 800px;
}

h1 {
font-size: 1.5em;
background-color: rgb(128,3,21);
color: rgb(255,255,255);
border: 1px solid rgb(120,40,55);
}

h2 {
font-size: 1.2em;
color: rgb(50, 205, 50);
}


Thanks for the advice! I am certainly learning much not having an an academic computer background.
Copy linkTweet thisAlerts:
@KorJul 28.2007 — please, wrap your code using the wrap buttons of the editor (#) or use the [ code ] [ /code ] manually.

Now... is this the real code HTML/CSS/Javascript? Seems messed up, with the CSS written after the HTML end tag...
Copy linkTweet thisAlerts:
@AxanarauthorJul 28.2007 — Yep, sorry, neat, didnt know [code] existed. Thanks for the tip!.

The CSS is included in <head> as a separate css style sheet file. The "old" code I wrote works, so I know its calling the style sheet. I have made the CSS separate [code] sections to reflect them being distinctly separate files. the .js files are unchanged.
Copy linkTweet thisAlerts:
@FangJul 29.2007 — A link would be easier to find the problem.
×

Success!

Help @Axanar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...