| Lesson 1: Global Today we will learn how to use data across various levels of the scope chain, and even from one page to the another across frames. The ability to pass data between pages allows for a CGI like ability to manipulate data and files (files in the form of data contained on documents, limited, but files all the same). All data in JavaScript is stored in some sort of variable and it's availability is dependant upon the scope chain. At the top of the scope chain is the top level window or frame. 1) Definitions Determine Scope [Note- I recomend you review previous threads in the B2B series for excellent scope and global info!] The way in which the variable is defined determines where it's value can be accessed from. Outside of any function, defining a variable makes it a global variable. Inside a function or other object, a variable declared with the keyword var will only be accessible within that funtion/object, but one declared without the keyword var will either change the global variable of the same name, or create a new global variable of that name. Notice the differences in the following examples: Example 1 "stuff" inside and outside the function is the same global variable Example 2 "stuff" inside the function is global only to the scope of the function, and is a different global variable outside the function. In Example1, the global variable is changed by the function due to the lack of the var keyword when declaring the variable stuff inside the function. In Example2, the global variable is not changed by the function due to the use of the var keyword creating a local (within the function's scope) variable stuff seperate from the global variable stuff. The global variable stuff can still be accessed using it's complete reference using the global object or window, such as: window.stuff 2) Accessing Data Across Frames/Windows The window object is the top level or global object. Each frame or window has a window object of it's own, each with it's own global properties. Included in the references to various properties of the window object is an array of all the frames which make up a window. All data declared/defined with a global scope is accessible across frames/windows (in most cases all documents must be of the same domain, otherise you run into "data tainting" which is a security issue, more in future threads) by reference via the frames array and the window object. So, if you have a frames page containing two frames, you can pass the value of variables from one to the other via the top level window's frames array. Example: Frameset Document1 Document2 [Note-the parent is the window containing all other frames and windows, and is the top level of any spawned child windows created by window.open() with all scope chains leading eventually to the parent or top.] The ability to share data between pages across frames/windows, and the scope of the data on the individual pages allows you to create functions on one page manipulating data from another page, while calling the same data to yet another page without worry of it's value being changed till you call for it to be. Each page can manipulate the data within the confines of it's own scope chain, with the top level window object tying it all together through the frames array. 3) Complex Nesting Calls When dealing with frames and arrays of window objects, it is easy to become confused by the array numbering system, as with all object arrays. Just as naming form elements or other objects in the DOM, naming your frames in your frameset (see above example) allows you to reference your arrays in a more intuitive and hopefully less confusing way. In the above examples, the onLoad statement of the body tag in the second document references the frames array to reach across the frameset to the first document and grab the value of a variable. Since the frame has been named on the frameset page, this syntax would work as well: parent.first.firstpage In complex multi-frame and or multi-embed document configurations, naming will make your referencing much easier. Compare the two following statements, and note how much easier reading the second is to reading the first: a=parent.frames[0].document.embeds[3].document.forms[2].elements[4].value; a=parent.first.document.response.document.likes.choices.value; You may not have any problem understanding the first line, but the second line would have much more recognizable elements via their names, and is therefor much easier to work with. The first line is only speakable by a fluent scripter, but the second line can almost be translated into a normal sentence: From the window, go to the first page and find the object "response" and get the value of the "likes" form's "choices" element. Using the basic three page frameset above, add functions and other objects, then practice referencing them back and forth, paying close attention to the values. Remember, if you get an undefined value, it may be the special "undefined" value of a declared variable! |