External js for a simple popup

Novice question

[rjohara]

I'm completely ignorant of javascript, and just have one piece on one page that I copied from another source; it's for a simple popup window that provides more information. I'd like to make this work on every page without having to copy the stuff in the HEAD of the single page into every page. This is what I have now:

In the HEAD of the page:

<script language="javascript" type="text/javascript">
<!--
function popup(){
newwin = window.open('','security','screenX=250,screenY=225,
left=250,top=225,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,
resizable=no,width=252,height=278');}
//-->
</script>

The anchor on the page:

<a href="/server/notice.html" target="notice" onclick="popup();">More info</a>

If I want to make this work on every page, I can move the <script> element in the HEAD to an external file, yes? Does that file have to have a particular name? Does it go in the root (along with robots.text, etc.)? Do I include the whole <script> element, or just the function part between the comments?

If I call the external file "pop.js", how do I change the anchor so it will know to look for the external .js file?

Many thanks for advising a js novice.

[Bernard Marx]

If I want to make this work on every page, I can move the <script> element in the HEAD to an external file, yes?

Yes.

Does that file have to have a particular name?

No. Call it anything you like, preferably with the extension, .js

Does it go in the root (along with robots.text, etc.)?

No. Put it anywhere you like. Many people put all their scripts all in the same folder. Sometimes it may make sense to keep it in another area.

Do I include the whole <script> element, or just the function part between the comments?

No tags, just Javascript, else you'll get an error.

If I call the external file "pop.js", how do I change the anchor so it will know to look for the external .js file?

You don't need to. All linked scripts, once downloaded, all add to the scripting "environment". If you have defined a function in a linked script, that function will be available.

[rjohara]

Many thanks, Bernard. I've got through the first steps, but there's something I'm obviously missing:

All linked scripts, once downloaded, all add to the scripting "environment". If you have defined a function in a linked script, that function will be available.

I'm missing the "linked" part - if I don't point to the .js file in the anchor, how does it find it?

[trialofmiles]

I think I understand where you're confused, so hopefully this is the answer you're looking for.

Assuming you put the popup method in a file called yourfile.js then put the following in the head of your html file.

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

Then you can reference the popup method as you would if the code were inline. The anchor syntax doesn't need to change.

[rjohara]

Great, it works - many thanks to all. I now see - the .js file is linked rather like a CSS file.

Since the <script></script> element is empty, I am surprised the usual XHTML syntax of <script /> doesn't seem work.

If I now create several popup scripts based on the original (call them big_popup, medium_popup, and small_popup), I assume I can put them all in the same external .js file (call it popups.js), rather than having to create three separate external .js files, yes?

[Bernard Marx]

Since the <script></script> element is empty, I am surprised the usual XHTML syntax of <script /> doesn't seem work

Mmm. S'funny that.

I can put them all in the same external .js file

Yes.

..although a more efficient coding strategy might be to use one single popup function, and determine the size by an argument ('small', 'medium', 'large' -perhaps).

[rocknbil]

Also if I understand the Q correctly, perhaps you're asking how to link to it from anywhere and have it work?

For example, if called from any of the below

test.html
data/test.html
data/some_other_dir/test.html

If the .js file is located in the root of the domain directory, the / before any path means "start at root of this domain." So if you use

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

That would work in any of the above examples. The same is true if you put it in the data directory

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

[Bernard Marx]

Setting paths from root can be painful if you're working without a server.
On Windows, you can get round this by turning the root folder of your site tree into a "virtual" drive (this can also make life easier in other ways too).

The SUBST command..

Open a command window, and type:

SUBST [new drive letter]: [path to root folder]

eg..

SUBST G: "C:\Documents and Settings\Eric\My documents\Website"

To remove the new drive:

SUBST G: /D

[rocknbil]

Mr. Marx, I have so many of your posts bookmarked I should compile a book. :-D +1 ...

[Bernard Marx]

Brave New Script?