Lesson 6

.js files

Place scripts in their own file:


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

Open Windows

Beware that the browser may block this!
Use the window.open method:


myWindow = window.open("lesson6.html", "MyNewWindow", "left=10,top=40,width=200,height=400,titlebar=yes,toolbar=no");

Work with other windows:

First we store the popup window in a variable:


myWindow = window.open("", "MyNewWindow",
                       "left=10,top=40,width=200,height=400,titlebar=yes,toolbar=no");

Now we can check that it opened: if (!myWindow) alert("Window failed to open!");

Work with its document object:
myWindow.document.write("We Made This With JavaScript!"); myWindow.document.write("We Made This With JavaScript!"); myWindow.document.write("\n\n");

move/resize the window: myWindow.moveTo(200,200); myWindow.resizeTo(400,200);

Or close it: if (myWindow) myWindow.close(); Note the 'if' to protect against the case where the window was never created.

Make things move

We can move and resize elements using CSS style-sheets and JavaScript. First we must give them a position using style:
<img id="plane" src="aeroplane.gif" style="position:relative; top:0; left:0;" >
This will just stick the image where it would normally go!
But now we can change it with JavaScript:


aeroplane = document.getElementById('plane');

aeroplane.style.left = 200;

Click to make the plane fly off