js importing problem

S

sidney

Hi there,

I am a brand new in Javascript. These days, I met a problem and can not
solve it. I hope somebody here can give me a hand. Any advice are
appreciated.

-----------------------------------------------------------------------------------------
HTML

Part:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Example</title>
<script type="text/JavaScript" src="exampleFindElements.js">
</script>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<h2>Subheading</h2>
<ul id="eventsList">
<li>List 1</li>
<li>List 2</li>
<li><a href="http://www.google.com">Linked List Item</a></li>
<li>List 4</li>
</ul>
<p>Paragraph</p>
<p>Paragraph</p>
</body>
</html>

------------------------------------------------------------------------------------------
JS

Part:

function findElements()
{
var listElements = document.getElementsByTagName('li');
var paragraphs = document.getElementsByTagName('p');
var msg = 'This document contains ' + listElements.length + ' list items\n';
msg += 'and ' + paragraphs.length + ' paragraphs.';
alert(msg);
}
window.onload = findElements;

-------------------------------------------------------------------------------------------

I

am sure that the filename is correct, and two files are in the same
directory.But the problem is when I open the html file, no popup window
with the message appear, but the content of the html display normally.
So I guess maybe the javascript file fail to be imported into the html.
How can I solve it?
 
T

The Natural Philosopher

sidney said:
Hi there,

I am a brand new in Javascript. These days, I met a problem and can not
solve it. I hope somebody here can give me a hand. Any advice are
appreciated.

-----------------------------------------------------------------------------------------

HTML
Part:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Example</title>
<script type="text/JavaScript" src="exampleFindElements.js">
</script>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<h2>Subheading</h2>
<ul id="eventsList">
<li>List 1</li>
<li>List 2</li>
<li><a href="http://www.google.com">Linked List Item</a></li>
<li>List 4</li>
</ul>
<p>Paragraph</p>
<p>Paragraph</p>
</body>
</html>

------------------------------------------------------------------------------------------

JS
Part:

function findElements()
{
var listElements = document.getElementsByTagName('li');
var paragraphs = document.getElementsByTagName('p');
var msg = 'This document contains ' + listElements.length + ' list
items\n';
msg += 'and ' + paragraphs.length + ' paragraphs.';
alert(msg);
}
window.onload = findElements;

-------------------------------------------------------------------------------------------


I
am sure that the filename is correct, and two files are in the same
directory.But the problem is when I open the html file, no popup window
with the message appear, but the content of the html display normally.
So I guess maybe the javascript file fail to be imported into the html.
How can I solve it?
Click to expand...
Im no expert, but shouldn't that be

window.onload = findElements();
 
T

Tim Down

[snip]
I

am sure that the filename is correct, and two files are in the same
directory.But the problem is when I open the html file, no popup window
with the message appear, but the content of the html display normally.
So I guess maybe the javascript file fail to be imported into the html.
How can I solve it?
Click to expand...


Works perfectly for me in Firefox 3 and IE 7. Is the file name of
exampleFindElements.js capitalised that way on the file system?

Tim
 
S

sidney

[snip]
I

am sure that the filename is correct, and two files are in the same
directory.But the problem is when I open the html file, no popup window
with the message appear, but the content of the html display normally.
So I guess maybe the javascript file fail to be imported into the html.
How can I solve it?
Click to expand...


Works perfectly for me in Firefox 3 and IE 7. Is the file name of
exampleFindElements.js capitalised that way on the file system?

Tim
Click to expand...

Hi Tim,

my environment is Mac OS X 10.4.11, editor is Coda, and tested by
Safari, Firefox for mac and coda embed browser.
 
M

Matthias Reuter

The said:
Im no expert, but shouldn't that be

window.onload = findElements();
Click to expand...

No, definitely not. window.onload should be a reference to a function.
findElements returns undefined, so in your approach window.onload is
undefined.

I noticed, the OP wrote type="text/JavaScript". I would try that in
lowercase, i.e. type="text/javascript".

Matt
 
T

Tim Down

Hi Tim,

my environment is Mac OS X 10.4.11, editor is Coda, and tested by
Safari, Firefox for mac and coda embed browser.
Click to expand...

You need to test whether exampleFindElements.js is being included at
all (try replacing all the JavaScript code in exampleFindElements.js
with a simple alert). If not, the simplest explanation would be
different capitalisation in the file name on the file system to that
in the file name in the <script> tag.

Tim
 
T

Thomas 'PointedEars' Lahn

sidney said:
[...]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Click to expand...
^
That's not Valid said:
<title>DOM Example</title>
Click to expand...

DOM Example of what? said:
<script type="text/JavaScript" src="exampleFindElements.js">
Click to expand...

Although the `type' attribute of the SCRIPT element is specified as
case-insensitive (CI), your UA might have difficulties with
"text/JavaScript"; try "text/javascript" instead, exactly as registered at IANA.

<http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1>
[...]
function findElements()
{
var listElements = document.getElementsByTagName('li');
var paragraphs = document.getElementsByTagName('p');
var msg = 'This document contains ' + listElements.length + ' list items\n';
msg += 'and ' + paragraphs.length + ' paragraphs.';
Click to expand...

Avoid concatenation with `+='.
alert(msg);
Click to expand...

Should be

window.alert(msg);
}
window.onload = findElements;
Click to expand...

Forget about the proprietary window.onload, use

<body onload="findElements()">

instead.

[fixed word wrap]
[...]
I am sure that the filename is correct, and two files are in the same
directory. But the problem is when I open the html file, no popup window
with the message appear, but the content of the html display normally.
So I guess maybe the javascript file fail to be imported into the html.
Click to expand...

Stop guessing, start testing: <http://getfirebug.com/>

Safari (which you should have told about in the first place) has a Developer
Console and there's Firebug Lite, too.

How can I solve it?
Click to expand...

Provided that the script resource is loaded, and that not using
`window.onload' and using window.alert() and debugging does not help, you
might not be able to solve this with alert(). That the alert message is not
shown may as well be the effect of a built-in popup blocker; alert()
messages are supposed to be displayed on user interaction (if that), not
when a document was loaded.

You might be more successful with W3C DOM Level 2 methods that create and
add an element with the corresponding content, either document.write() (you
need to do that within the `body' element, after the other elements), or
probably more reliable in terms of counting:

function findElements()
{
var listElements = document.getElementsByTagName('li');
var paragraphs = document.getElementsByTagName('p');
var msg = 'This document contains '
+ listElements.length + ' list items\n<br>'
+ 'and ' + paragraphs.length + ' paragraphs.';

var span = document.createElement("span");
span.appendChild(document.createTextNode(msg));
var div = document.createElement("div");
div.appendChild(span);
document.body.appendChild(div);
}

You should add some feature tests if this is going to be cross-browser, of
course.


PointedEars
 
S

sidney

Hi there,

I am a brand new in Javascript. These days, I met a problem and can not
solve it. I hope somebody here can give me a hand. Any advice are
appreciated.

----------------------------------------------------------------------------------------- HTML
Part:

<!DOCTYPE

HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Example</title>
<script type="text/JavaScript" src="exampleFindElements.js">
</script>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<h2>Subheading</h2>
<ul id="eventsList">
<li>List 1</li>
<li>List 2</li>
<li><a href="http://www.google.com">Linked List Item</a></li>
<li>List 4</li>
</ul>
<p>Paragraph</p>
<p>Paragraph</p>
</body>
</html>

------------------------------------------------------------------------------------------ JS
Part:

function

findElements()
{
var listElements = document.getElementsByTagName('li');
var paragraphs = document.getElementsByTagName('p');
var msg = 'This document contains ' + listElements.length + ' list items\n';
msg += 'and ' + paragraphs.length + ' paragraphs.';
alert(msg);
}
window.onload = findElements;

-------------------------------------------------------------------------------------------
I
am

sure that the filename is correct, and two files are in the same
directory.But the problem is when I open the html file, no popup window
with the message appear, but the content of the html display normally.
So I guess maybe the javascript file fail to be imported into the html.
How can I solve it?
Click to expand...

Thank everybody have replied this post. What amazing is the popup
window appeared normally in my Safari just now, but still NOT work
under the embed browser of Coda. So I think the code above really work
(I read it from a book), and all the advice is really appreciated
 
S

sidney

No, definitely not. window.onload should be a reference to a function.
findElements returns undefined, so in your approach window.onload is
undefined.

I noticed, the OP wrote type="text/JavaScript". I would try that in
lowercase, i.e. type="text/javascript".

Matt
Click to expand...

Hi Matt,

I tried your method changing JavaScript into lowercase, but the result
is the same.

Thank you for your advice.
 
S

sidney

HTML
Part:

<!DOCTYPE

HTML JS
Part:

function

findElements()
{
var
I
am

sure

Thank everybody have replied this post. What amazing is the popup
window appeared normally in my Safari just now, but still NOT work
under the embed browser of Coda. So I think the code above really work
(I read it from a book), and all the advice is really appreciated
Click to expand...

sorry everyone, I just made a mistake, after my dinner, I forgot I had
copied all the code in .js file into the html body, so in safari, it
work. but after I removed them, the situation comes back.

I have tried to use a simple alert and put all the other code in it to
test weather the .js file has been imported into the html , and the
answer is the poor NO. any other way to import the .js file into html?
 
T

Thomas 'PointedEars' Lahn

sidney said:
Thank everybody have replied this post. What amazing is the popup
window appeared normally in my Safari just now, but still NOT work
under the embed browser of Coda.
Click to expand...

There is nothing amazing about it, alert() is a host method. If the host
environment does not provide the method, or if it employs means to suppress
its outcome, then there is no alert message.

However, that would contradict this statement on <http://www.panic.com/coda/>:

"You’re writing code; you want to see what it looks like. Thanks to Apple’s
WebKit, we’ll show your site exactly as it looks like in Safari, even as you
type."

Perhaps it boils down to the 239th Rule of Acquisition: "Never be afraid to
mislabel a product."
So I think the code above really work
Click to expand...

I have already told you that this is a bad idea.
(I read it from a book),
Click to expand...

Mark my words: That it is from a book means that it is not supposed to work.
There are just too many bad books out there.
and all the advice is really appreciated
Click to expand...

You don't appear to have read it all yet.

Learn to quote. <http://jibbering.com/faq/#posting>


PointedEars
 
R

rf

Tim said:
You need to test whether exampleFindElements.js is being included at
all (try replacing all the JavaScript code in exampleFindElements.js
with a simple alert). If not, the simplest explanation would be
different capitalisation in the file name on the file system to that
in the file name in the <script> tag.
Click to expand...

Or try looking at the firebug net tab to see if there is a 404 status code
involved.
 
S

sidney

There is nothing amazing about it, alert() is a host method. If the host
environment does not provide the method, or if it employs means to suppress
its outcome, then there is no alert message.

However, that would contradict this statement on <http://www.panic.com/coda/>:

"You’re writing code; you want to see what it looks like. Thanks to Apple’s
WebKit, we’ll show your site exactly as it looks like in Safari, even as you
type."

Perhaps it boils down to the 239th Rule of Acquisition: "Never be afraid to
mislabel a product."


I have already told you that this is a bad idea.


Mark my words: That it is from a book means that it is not supposed to work.
There are just too many bad books out there.


You don't appear to have read it all yet.

Learn to quote. <http://jibbering.com/faq/#posting>


PointedEars
Click to expand...

yes, Mr. PointedEars, I must apologize for missing your reply. I am
checking my code according your advice, and Thank you very much, really!
 
J

Jeremy J Starcher

Why is that?
Click to expand...

Efficiency reasons.

var msg = "Hello";
msg += " ";
msg += "there";

is computationally expensive because string objects are created and
destroyed with each step. From the way I read the specs, this isn't any
better.

var msg = "Hello" +
" " +
"there";


However, this tends to be the fastest in most user agents (particularly
if the resultant string is quite large).

var msgs = []
msgs.push("Hello");
msgs.push(" ");
msgs.push("there");
msg = msgs.join("");
 
J

Jorge

(...)
However, this tends to be the fastest in most user agents (particularly
if the resultant string is quite large).

  var msgs = []
  msgs.push("Hello");
  msgs.push(" ");
  msgs.push("there");
  msg = msgs.join("");
Click to expand...

AFAIK, this crap applies only to the crappiest of browsers: *IE*.
 
J

Jorge

(...)
However, this tends to be the fastest in most user agents (particularly
if the resultant string is quite large).
Click to expand...
  var msgs = []
  msgs.push("Hello");
  msgs.push(" ");
  msgs.push("there");
  msg = msgs.join("");
Click to expand...

AFAIK, this crap applies only to the crappiest of browsers: *IE*.
Click to expand...


http://jorgechamorro.com/cljs/053/

function add () {
var text= "", n= txt.length;
while (n--) {
text+= txt[n];
}
}

function join () {
var text= txt.join('');
}

Results:

MSIE 6.0 on Windows NT
add 58 (17.24ms)
join 1553 ( 0.64ms) <- 26x times faster !

Safari 3.2.2 on Windows NT
add 856 (1.17ms)
join 2768 (0.36ms) <- 3.25x times faster

Chrome 1.0.154.53 on Windows NT
add 5111 (0.20ms)
join 3016 (0.33ms) <- slower

Opera 9.64 on Windows NT
add 585 (1.71ms)
join 410 (2.44ms) <- slower

Firefox 3.0.7 on Windows NT
add 573 (1.75ms)
join 754 (1.33ms) <- 1.3x times faster
 
J

Jeremy J Starcher

(...)
However, this tends to be the fastest in most user agents
(particularly if the resultant string is quite large).
Click to expand...
  var msgs = []
  msgs.push("Hello");
  msgs.push(" ");
  msgs.push("there");
  msg = msgs.join("");
Click to expand...

AFAIK, this crap applies only to the crappiest of browsers: *IE*.
Click to expand...


http://jorgechamorro.com/cljs/053/

function add () {
var text= "", n= txt.length;
while (n--) {
text+= txt[n];
}
}

function join () {
var text= txt.join('');
}

Results:

MSIE 6.0 on Windows NT
add 58 (17.24ms)
join 1553 ( 0.64ms) <- 26x times faster !

Safari 3.2.2 on Windows NT
add 856 (1.17ms)
join 2768 (0.36ms) <- 3.25x times faster

Chrome 1.0.154.53 on Windows NT
add 5111 (0.20ms)
join 3016 (0.33ms) <- slower

Opera 9.64 on Windows NT
add 585 (1.71ms)
join 410 (2.44ms) <- slower

Firefox 3.0.7 on Windows NT
add 573 (1.75ms)
join 754 (1.33ms) <- 1.3x times faster
Click to expand...


My tests are showing very similar results.

(Truth be told, most of the time I will go ahead and concatenate strings
because I find the code easier to read and in most cases, the difference
doesn't matter that much. However, when I know that I'll be dealing with
more than about a dozen values, I'll use the push/join.)


JSLitmus eh? First time I've run across that particular gem. I think I
have a new hobby.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Not sure why drop-down is not working. 2
Working on mobile css menu with plenty of frustration! 2
Align separate li to right 2
Only one table shows up with the information 2
JavaScript code not working!! 6
I need help making an html website 2
Dropdown menu in a fixed navbar 2
Need help with code on website (noob) 2

Members online

No members online now.
Total: 82 (members: 0, guests: 82)
Robots: 475

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,818
Latest member
Brigette36

Latest Threads

Top