function C(i)
{
return document.getElementsByClassname(i)
}
function S(i)
{
return O(i).style
}
function O(i)
{
return typeof i == 'object' ? i : document.getElementById(i)
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Animation</title>
<script src='OSC.js'></script>
<style>
#box {
position :absolute;
background:orange;
border :1px solid red;
}
</style>
</head>
<body>
<div id='box'></div>
<script>
SIZE = LEFT = 0
setInterval(animate, 30)
function animate()
{
SIZE += 10
LEFT += 3
if (SIZE == 200) SIZE = 0
if (LEFT == 600) LEFT = 0
S('box').width = SIZE + 'px'
S('box').height = SIZE + 'px'
S('box').left = LEFT + 'px'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Using setInterval</title>
<script src='OSC.js'></script>
</head>
<body>
The time is: <span id='time'>00:00:00</span><br>
<script>
setInterval("showtime(O('time'))", 1000)
function showtime(object)
{
var date = new Date()
object.innerHTML = date.toTimeString().substr(0,8)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Adding Elements</title>
<script src='OSC.js'></script>
</head>
<body>
This is a document with only this text in it.<br><br>
<script>
alert('Click OK to add an element')
newdiv = document.createElement('div')
newdiv.id = 'NewDiv'
document.body.appendChild(newdiv)
S(newdiv).border = 'solid 1px red'
S(newdiv).width = '100px'
S(newdiv).height = '100px'
newdiv.innerHTML = "I'm a new object inserted in the DOM"
tmp = newdiv.offsetTop
alert('Click OK to remove the element')
pnode = newdiv.parentNode
pnode.removeChild(newdiv)
tmp = pnode.offsetTop
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Non-inline JavaScript</title>
<script src='OSC.js'></script>
</head>
<body>
<img id='object' src='apple.png'>
<script>
O('object').onmouseover = function() { this.src = 'orange.png' }
O('object').onmouseout = function() { this.src = 'apple.png' }
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript</title>
</head>
<body>
<img src='apple.png'
onmouseover="this.src='orange.png'"
onmouseout="this.src='apple.png'">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Accessing CSS Properties</title>
<script src='OSC.js'></script>
</head>
<body>
<div id='object'>Div Object</div>
<script>
S('object').border = 'solid 1px red'
S('object').width = '100px'
S('object').height = '100px'
S('object').background = '#eee'
S('object').color = 'blue'
S('object').fontSize = '15pt'
S('object').fontFamily = 'Helvetica'
S('object').fontStyle = 'italic'
</script>
</body>
</html>
function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
function S(i) { return O(i).style }
function C(i) { return document.getElementsByClassName(i) }
function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
function S(i) { return O(i).style }
function C(i) { return document.getElementsByClassname(i) }