Javascript - Difference between "window." and "document."?

[donalall]

Hi,

I'm a Javascript newbie that's just finished by first Captivate (CP9) screen (HTML5) using Javascript.

A slide with multiple text entry boxes (TEBs) and one Submit button, which runs a function to validate the TEBs (Thanks David for getting me started).

I call the function in the Submit button's script window and have the Javascript in the Index file.

In the Javascript i have used both "windows." and "document." (not sure if i have used them correctly but the Javascript works)

I don't really know the difference between them.

In Javascript I know that window is loaded into browser first, then document is loaded into window.

It’s like window is your browser's window and document is the HTML page inside it.

Also you can use each one to access specific properties - and window has a global context.

Here's examples from my javascript:

• window.cpAPIInterface.setVariableValue("q1_fback", "");         - clearing a feedback message (text caption with variable) associated with a TEB
• document.getElementById("Text_Entry_Box1_inputField").style.border = "medium solid red";  - changing the border of a TEB object to incorrect (red)

My question is:

1. What's the difference between "window." and "document." in a Captivate context?

I'll will be posting more questions to find out how to:

1. use loops to cut down my code

2. reuse the same function across other slides

Regards

Donal.

[TLCMediaDesign · Accepted solution]

Your assumptions are correct.

the cpAPIInterface is in the window.

The Text_Entry_Box1_inputField is in the document, not the window, although you could use:

window.document.getElementById("Text_Entry_Box1_inputField").style.border = "medium solid red";

Scope of variables depends on when and how they are declared and it is usually best to limit their scope and not use them globally in the window object. CPs variables all seem to be available in the window.

[donalall]

Hi,

Thanks for the clarification.

Adobe provides very little info on the JS interface so i have a few more questions.

1. Is "setVariableValue" just used to set a value or can you configure a variable's properties with it?

2. You say that CPs variables all seem to be available in the window. So how do i know what variables etc relate to the document?

3. Can you give some examples when "... document." is used in a Captivate context i.e what you can do with it?

TEB_input_field - border colour, style etc

Text - font colour, style, family,

........

Thanks

Donal.

[TLCMediaDesign]

setVariableValue is a function built by Captivate so it only pertains to variables.

I always access the variables through the window object. If you are trying to access a variable and it is not in the window, you'd need to sift through the code and find it's scope and reference it that way.

Most objects are available through the document.getElementById or classname and can then be styled using document.getElementById('object').style.color = "FFFFFF" as well as most CSS properties.

Changing font is a completely different issue as Captivate converts text to png images. It's difficult to determine exactly when the actual text is rendered instead of the image.

[donalall]

Thanks for the answers.