Changing Web Page Items Using JavaScript

I recently had a client who wanted a page with a SWF movie that could be changed to a different SWF by clicking on a button on the page. A while back, I did a project where the user could click a link and change the source of an image on the page using JavaScript, but changing an entire SWF seemed a little more difficult. The code to change the image to a different image looked like this:

<image id=”imagetochange” src=”pic1.jpg”>
<a href=”#” onclick=”imagetochange.src=’pic2.jpg'”>Change image</a>

This code was simple enough, so I tried modifying it to change the source of the SWF when I clicked the link. My code now looked like this:

<object id=”changemovie” type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
<param id=”changethis” name=”movie” value=”flashmovie1.swf” />
</object><a href=”#” onclick=”changemovie.data=’flashmovie2.swf’; changethis.value=’flashmovie2.swf’;”>Change movie</a>

This worked in some browsers but it didn’t work in others, so I was forced to come up with a different solution. After some research, I was reminded of two JavaScript items that eventually made the whole thing possible: getElementById and innerHTML. After some tweaking, I ended up with a code that looked something like this:

<script type=”text/javascript”>
function changeText() {
document.getElementById(‘flashitem’).innerHTML = ‘<object type=”application/x-shockwave-flash” data=”flashmovie2.swf” width=”640″ height=”400″> <param name=”movie” value=”flashmovie2.swf” /> </object>’;
}
<div id=”flashitem”>
<object type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
<param name=”movie” value=”flashmovie1.swf” />
</object>
</div>
<a href=”#” onclick=”changeText();”>Change movie</a>

First, I created a JavaScript function called changeText(). Inside the function, I placed “document.getElementByID(‘flashitem’)”. This calls a function which searches the page for an element with the id of “flashitem”. Then I added “.innerHTML”, which tells the program that we are doing something with the innerHTML property of the specified element. I then set the value of the innerHTML property to the code for the SWF object I wanted to replace the original SWF, and closed the changeText() function. Now when the function is called, it will change the HTML inside a div with the id of “flashitem” to the code to place the new SWF on the Web page. Now I just needed to create the div and the link.

I created a new div with the code for the original SWF object inside and gave the div an id of “flashitem”. Outside the div, I then created a link to call the function changeText(), and it worked perfectly.


Variables and Data Types in JavaScript

Continued from Understanding Variables:

Like other languages, JavaScript variables must also conform to certain rules. Variable names must start with either a letter or an underscore, but they can contain numbers later on in the name. JavaScript variables are also case-sensitive.

As in ActionScript, JavaScript variable types do not need to be specified when they are created and data types are converted automatically as needed.

JavaScript has several built-in data types:

  • Boolean – a data type with only two possible values: true or false
  • Null – a special data value that has no value and means nothing; not the same as zero
  • Number – any series of numeric values, including integers and floating point numbers; can be expressed in decimal ( base 10 ), hexadecimal ( base 16 ), or octal ( base 8 )
  • Object – built-in or user-defined classes of data; a collection of properties or attributes
  • String – a series of alphanumeric characters, numbers, and punctuation marks
  • Undefined – a special data value representing an absence of data; default value for variables declared without a value

When using integers in the Number data type, a leading 0 ( zero ) is used to specify that the integer is octal, and a leading 0x or 0X is used to specify hexadecimal. A floating point number can contain a either a decimal or an “e” to represent “ten to the power of” in scientific notation, or both.

Continued in:


Understanding Variables

While not technically tutorials, I have decided to post a series of articles about variables for Web programming newbies. Variables are an essential element for anyone wishing to do Web programming. They are also an integral part of many technologies, including JavaScript, ActionScript, and PHP.

To begin with, what is a variable? A technical definition would be somewhere along the lines of : A pointer to a location in memory where a temporary value can be stored for use in a program. To the common person that may not make much sense, so I prefer a different definition: A container which holds a value that can be changed. Simply put, a variable is a key word that represents a temporary value. If it helps, you can think of variables as having a variable value. Generally, this value can be changed through instructions given by a program, but some variables are unchangeable depending on the scripting language in use. Many languages have built-in variables which keep a constant value.

Most scripting languages also have some sort of method for deciding the pattern of variable names. In general, variable names may contain letters, numbers, underscores, and dollar signs, but they cannot start with a number. They also cannot contain spaces. While variable names can generally be of any length, if they are too long they become unmanageable.

Many languages are case-sensitive, so it is also a good idea to pay attention to whether your variable names include capital or lowercase letters. In languages where variable names are not case-sensitive, a program may confuse one variable with another if care is not taken during naming. A variable named my_var will look exactly the same as a different variable named My_Var. As a rule of thumb, I never create variables using capital letters. That way, regardless of the language I’m using I will never have conflicting variable names.

In the continuation of my Variables series, I plan on looking at the use of variables in a couple of different coding languages; specifically ActionScript, JavaScript, and PHP. Stay tuned for more.

Continued in: