By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,480 Members | 1,743 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,480 IT Pros & Developers. It's quick & easy.

How to outsource Javascript code from html code ?

P: n/a
Is there a way of extracting the Javascript code from the "normal" HTML code
(e.g. similar to CSS code which can be put into a separate file) ?

If you offer a solution: can I determine in your solution where and which part
of the code should be placed/inserted in the main HTML code?

Sometimes a Javascript functionality is split up to several parts and/or
it makes a big difference where the Javascript code should run/be called
(e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.
.....)

Arty

Jul 20 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
In article <bs*************@news.t-online.com>, ar***@redseven.com
says...
Is there a way of extracting the Javascript code from the "normal" HTML code
(e.g. similar to CSS code which can be put into a separate file) ?

If you offer a solution: can I determine in your solution where and which part
of the code should be placed/inserted in the main HTML code?

Sometimes a Javascript functionality is split up to several parts and/or
it makes a big difference where the Javascript code should run/be called
(e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.


<script src="myfile.js" type="text/javascript"></script>

--
Hywel I do not eat quiche
http://hyweljenkins.co.uk/
http://hyweljenkins.co.uk/mfaq.php
Jul 20 '05 #2

P: n/a
DU
Arthur Connor wrote:
Is there a way of extracting the Javascript code from the "normal" HTML code
(e.g. similar to CSS code which can be put into a separate file) ?

I'm not sure what you mean with "extracting".

There is a bookmarklet available which will allow you to view all
javascript code in a given HTML page.

You can put all script functions and code into a single external
javascript file.
If you offer a solution: can I determine in your solution where and which part
of the code should be placed/inserted in the main HTML code?

Again, your question is a bit fuzzy.

If you use a customized bookmarklet, then yes you can figure out inline
scripts and scripts coming from an external file.

One can figure out where in a given HTML document the functions are called.

Sometimes a Javascript functionality is split up to several parts and/or
it makes a big difference where the Javascript code should run/be called
(e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.
....)

Arty


That's because of some desired effects or because some functions should
be executed before some others (like for rollover images) or because
some functions should be executed while the page is loading (e.g.:
document.write() calls) or because some other functions should be
executed only once the page has finally and completely loaded (with the
defer attribute or with the onload attribute of the body element or
window object), etc... It all depends on the whole code, the targeted
effects/results, etc.. There is no single and unique rule here.
Overall, it is best to modularize javascript code into defined functions
and it is best to stay away from document.write() calls.
In general, I think it is best to create a single unique external
javascript file so that
- your code can be reused
- your code can be cached and reused in the same session, reducing http
downloads and parsing again, making script functions a bit more
responsive, snappy.

DU
Jul 20 '05 #3

P: n/a
"Arthur Connor" <ar***@redseven.com> wrote in message
news:bs*************@news.t-online.com...
Is there a way of extracting the Javascript code from the "normal" HTML code (e.g. similar to CSS code which can be put into a separate file) ?

If you offer a solution: can I determine in your solution where and which part of the code should be placed/inserted in the main HTML code?

Sometimes a Javascript functionality is split up to several parts and/or
it makes a big difference where the Javascript code should run/be called
(e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.
....)

Arty

I guess it depends on what your exact usage is. At my site I have two
different applications for js. One handles image swapping and popup display
and depends on having functions defined in advance of them being used so I
have the definitions included right before the end of the <head> as shown in
this scrap:
....
<title>
Bodger's New Day
</title>
<!-- insert image routines -->
<script type="text/javascript" src="theimager.js">
</script>
<!-- end of insert -->
</head>
....

And the actual call is made when a reader clicks on an image of a button and
looks like this:

....
<a href=
"javascript: newWindow = openWin( 'gallery/gallery-01-small.jpg',
600, 424 ); newWindow.focus()">
<img src="button/small.gif" class="gbutt" alt="" title="" width="30"
height="20" /></a>
....

where openWin() is defined earlier and is called with the required
parameters here to create a new window with an image in it and the focus()
pops the new window up over the parent.

In the second main application there is no function definition so nothing
needs to appear in the <head> so the code is placed where it is needed
inline like this:

....
<!-- Start of TheCounter.com Code -->
<script type="text/javascript" src="thecounter.js">
</script>
<!-- End of TheCounter.com Code -->
....

This is done because the js provided by thecounter.com is pretty ugly and
totally blows away any attempts at validation.

Is this what you were looking for?
--
John McGaw
[Knoxville, TN, USA]

Return address will not work. Please
reply in group or through my website:
http://johnmcgaw.com

Jul 20 '05 #4

P: n/a
"Arthur Connor" <ar***@redseven.com> wrote in message
news:bs*************@news.t-online.com...
Is there a way of extracting the Javascript code from the "normal" HTML code (e.g. similar to CSS code which can be put into a separate file) ?
outsourced java script looks like the following:

<script src="script/rollover.js" type="text/javascript"></script>

just put your java script code (between the script tags) into a .txt file
and rename it to a .js file
Sometimes a Javascript functionality is split up to several parts and/or
it makes a big difference where the Javascript code should run/be called
(e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.


as far as i know (i am not very good at java script) that depends of the
type of java script you are using...

hope i could help.

martin
Jul 20 '05 #5

P: n/a
Where ever you use the <script> tag use it like this:

<script src="myjavascriptfile.js">
</script>

I think this is the right syntax, I know I'm on the right line!

Chris
Jul 20 '05 #6

P: n/a
ar***@redseven.com (Arthur Connor) wrote in
news:bs*************@news.t-online.com:
Is there a way of extracting the Javascript code from the "normal"
HTML code (e.g. similar to CSS code which can be put into a separate
file) ?
Yup. Anywhere you can write

<script type="text/javascript">some script</script>

you can also write

<script src="urlforscript" type="text/javascript"></script>

In addition to making your code more maintainable, linking to external
scripts also speeds things up because browsers will cache the scripts
rather than reloading them for each page.
If you offer a solution: can I determine in your solution where and
which part of the code should be placed/inserted in the main HTML
code?
Same as if you were inlining the scripts.
Sometimes a Javascript functionality is split up to several parts
and/or it makes a big difference where the Javascript code should
run/be called (e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.


You just have to give each section of script its own URL.
Jul 20 '05 #7

P: n/a
Arthur Connor wrote:
Is there a way of extracting the Javascript code from the "normal" HTML code
(e.g. similar to CSS code which can be put into a separate file) ?


Of course.

<script type="text/javascript" src="blah.js"></script>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Jul 20 '05 #8

P: n/a
While the city slept, Arthur Connor <ar***@redseven.com> feverishly typed:
Is there a way of extracting the Javascript code from the "normal"
HTML code (e.g. similar to CSS code which can be put into a separate
file) ?


Take the existing javascript code from your page (minus the opening <script
....> and closing </script>) and save that as a file with extension .js. eg,
if you have the following...

<script type="text/javascript">
<!-- Hide

function myFunction()
{
// code here
}

// Dunhidin -->
</script>

.... cut everything from <!--Hide to // Dunhidin --> and save that as, for
example, "myJavascript.js". Then add the following to your script tag...

<script type="text/javascript" src="myJavascript.js">

Hope that help,
Nige

--
Nigel Moss.

Email address is not valid. ni***@nigenetDOG.org.uk. Take the dog out!
http://www.nigenet.org.uk | Boycott E$$O!! http://www.stopesso.com
In the land of the blind, the one-eyed man is very, very busy!
Jul 20 '05 #9

P: n/a
JRS: In article <bs*************@news.t-online.com>, seen in
news:comp.lang.javascript, Arthur Connor <ar***@redseven.com> posted at
Tue, 30 Dec 2003 19:46:07 :-
Is there a way of extracting the Javascript code from the "normal" HTML code
(e.g. similar to CSS code which can be put into a separate file) ?


See <URL:http://www.merlyn.demon.co.uk/js-other.htm#Effy>, subsection
"Include :- *.js files".

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 20 '05 #10

P: n/a
Arthur Connor wrote:
Is there a way of extracting the Javascript code from the "normal"
HTML code (e.g. similar to CSS code which can be put into a separate
file) ?

If you offer a solution: can I determine in your solution where and
which part of the code should be placed/inserted in the main HTML
code?

Sometimes a Javascript functionality is split up to several parts
and/or
it makes a big difference where the Javascript code should run/be
called (e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.
....)

Arty


Yes, you can do this.

Add a line in the head of your code such as the following;

<script language="JavaScript" src="include/bfinclude.js"></script>

(this includes a javascript file which is located in the directory
'include')

Note that the above looks very similar to the existing markers for inline
javascript code; instead of having the routines listed, it uses the 'src'
parameter to locate a source file. The contents of the javascript file
should be just javascript, nothing else.

For example, the code below would be the entire content of the bfinclude.js
file (including the html comments)

<!--
function MM_reloadPage(init) { // Reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
history.go(0);
}
-->

HTH,

Pete.
--

Peter Connolly | Macromedia Certified Dreamweaver MX Developer
http://www.acutecomputing.co.uk
Derby
UK

Jul 20 '05 #11

P: n/a
In article <bs*******************@news.demon.co.uk>, "Peter Connolly"
<no*************@nospamrequired.com> writes:
Add a line in the head of your code such as the following;

<script language="JavaScript" src="include/bfinclude.js"></script>
It is wiser to use type="text/javascript" than it is language="javascript" [1]
(this includes a javascript file which is located in the directory
'include')

Note that the above looks very similar to the existing markers for inline
javascript code; instead of having the routines listed, it uses the 'src'
parameter to locate a source file. The contents of the javascript file
should be just javascript, nothing else.

For example, the code below would be the entire content of the bfinclude.js
file (including the html comments)
1) The "html comments" are not needed in any browser less than 10 years old.
2) They are not "html comments", they are part of the script block and as such
are part of the script.
<!--
function MM_reloadPage(init) { // Reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4) ) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
history.go(0);
}
-->


[1] Now I remember why I don't use Dreamweaver, I prefer reliable code.

See the FAQ with regards to object detection.
--
Randy
Jul 20 '05 #12

P: n/a
HikksNotAtHome wrote:
It is wiser to use type="text/javascript" than it is
language="javascript" [1]

1) The "html comments" are not needed in any browser less than 10
years old. 2) They are not "html comments", they are part of the
script block and as such are part of the script.

Fair comment, and good advice. Thanks.

See the FAQ with regards to object detection.


Thanks, but I do very little with Javascript, so I'm not staying around! I
only dropped in to see where my response had disappeared to, as it didn't
show up in the newsgroup I had replied to; the OP had cross-posted, but I
didn't notice at the time - I normally remove cross-postings before
replying.

Regards,

Pete.
--

Peter Connolly | Macromedia Certified Dreamweaver MX Developer
http://www.acutecomputing.co.uk
Derby
UK

Jul 20 '05 #13

P: n/a
You certainly can, its called a .JS file - see
http://www.javascript-fx.com/general...aljs/help.html or search the web
for more info.

Arthur Connor wrote:
Is there a way of extracting the Javascript code from the "normal" HTML code
(e.g. similar to CSS code which can be put into a separate file) ?

If you offer a solution: can I determine in your solution where and which part
of the code should be placed/inserted in the main HTML code?

Sometimes a Javascript functionality is split up to several parts and/or
it makes a big difference where the Javascript code should run/be called
(e.g.
- in the <HEAD>....</HEAD> or
- at the beginning just behind the <BODY> tag
- at the end just before the </BODY> tag.
....)

Arty


Jul 20 '05 #14

P: n/a
JRS: In article <20***************************@mb-m25.aol.com>, seen in
news:comp.lang.javascript, HikksNotAtHome <hi************@aol.com>
posted at Wed, 31 Dec 2003 23:57:27 :-
In article <bs*******************@news.demon.co.uk>, "Peter Connolly"
<no*************@nospamrequired.com> writes:

For example, the code below would be the entire content of the bfinclude.js
file (including the html comments)


1) The "html comments" are not needed in any browser less than 10 years old.
2) They are not "html comments", they are part of the script block and as such
are part of the script.


A) They may be useful if the page is being processed by software other
than a browser.

B) They are HTML comments, since they are for use when the script tag is
not recognised.

<!--
function MM_reloadPage(init) { // Reloads the window if Nav4 resized
if (init==true) with (navigator) {if

if (init) ... should suffice.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 20 '05 #15

P: n/a
In article <y7**************@merlyn.demon.co.uk>, Dr John Stockton
<sp**@merlyn.demon.co.uk> writes:
1) The "html comments" are not needed in any browser less than 10 years old.
2) They are not "html comments", they are part of the script block and assuch
are part of the script.


A) They may be useful if the page is being processed by software other
than a browser.


Agreed that they may be useful in software other than a browser. But that still
doesn't change the content type of a script block.
B) They are HTML comments, since they are for use when the script tag is
not recognised.


http://tinyurl.com/27c6l

Leads to a discussion not long ago (Nov 9, 2003) about whether they are HTML
comments or part of the script block. To quote Jim Ley:

<quote>
That's a javascript comment, not an HTML one, and it can cause no harm
(in XHTML things are different of course)


The string "<!--" begins an HTML comment.


The content model of SCRIPT is CDATA - you're not allowed comments
inside it, therefore that must be part of the script, and passed to
the script engine. Certainly it's not part of ECMAScript, but that is
not an HTML comment - they're not legal inside SCRIPT blocks (this is
the change with XHTML of course where the content model of script
changed to PCDATA which allows comments.)

It's either a javascript comment, or something that the javascript
engine accepts as if it was a comment - it's passed as is via the HTML
parser.

Jim.
</quote>

So, they are part of the script block, and not an HTML comment.
--
Randy
Jul 20 '05 #16

P: n/a
hi************@aol.com (HikksNotAtHome) writes:
So, they are part of the script block, and not an HTML comment.


The point that Dr. Stockton made, and that I wish I had made to Jim
Ley then, is that whether it is part of the script block or an HTML
comment depends on 1) the version of HTML and 2) the browser.

The reason to put the <!-- there at all, is that *some* browsers treat
it as the start of an HTML comment. Other browsers treat it as part
of the script block (and actually break ECMAScript compliance to do it:
var x = 2;
if (1 <!-- x
) { alert("foul");}
is a valid syntactically correct ECMAScript program that should not
call the function "alert", but does in the browsers I checked - IE 6,
Opera 7 and Moz FB).

But the reason to write the <!-- at all, is to have it interpreted as
an HTML comment. So, at least partially, it *is* an HTML comment.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #17

P: n/a
In article <r7**********@hotpop.com>, Lasse Reichstein Nielsen <lr*@hotpop.com>
writes:
But the reason to write the <!-- at all, is to have it interpreted as
an HTML comment. So, at least partially, it *is* an HTML comment.


No, its part of a script block that is interpreted as an HTML comment not a
true HTML comment.

All of it is purely semantical though until you escape the HTML world.
--
Randy
Jul 20 '05 #18

P: n/a
hi************@aol.com (HikksNotAtHome) writes:
No, its part of a script block that is interpreted as an HTML comment not a
true HTML comment.
To Netscape 1, it is an HTML comment, because that browser doesn't
know what a script block is. As a well behaved HTML client, it ignores
unknown tags and finds the HTML comment inside.

The reason to add the <!-- and //--> is to make Netscape 1 and
contemporary browsers treat it as an HTML comment. Later browsers
gracefully ignores <!-- and --> inside script blocks, since they are
not placed there for these, smarter, browsers. It is added for one
purpose only: To be used as an HTML comment.
All of it is purely semantical though until you escape the HTML world.


To where? :)

The problem might be that it is the difference between HTML syntax and
actual browser semantics.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.