Wouldn't be convenient to put all the pieces together and illustrate how the news ticker does its job? I totally agree. In a step-by-step sequence, here's our functional example:
Google expands its search capabilities adding video searching. Are you ready to submit your personal video?
PHP hits new levels of performance with PHP5. Visit www.php.net to find out more!
Want to be completely protected from Internet attacks? Disconnect your computer right now!
Interview with possible alien creature! He said they're using MySQL to store world domination plans.
Monkey proved to be a lot smarter as a Linux system administrator in weird experiment. Oops, we're lost!
<?php
// include the PHP function
require_once('createjavascript.php');
// generate the "news" JavaScript array, populating it with news data file
// here is where the PHP-JavaScript interaction takes place
echo createJavaScript('news.txt','news');
// display a regular HTML page including the JavaScript functions to generate the news ticker
?>
<html>
<head>
<title>CLIENT-SIDE NEWS TICKER</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
var numNews,counter;
// count number of news
numNews=news.length;
// initialize news counter
counter=0;
createNewsDiv=function(){
// create news containing <div> element
var newsDiv=document.createElement('div');
newsDiv.id='news';
// insert news <div> into document structure
document.body.appendChild(newsDiv);
}
rotateNews=function(){
// get news containing <div>
var newsDiv=document.getElementById('news');
if(!newsDiv){return;}
// create new <div> element
var div=document.createElement('div');
div.id='news';
// create paragraph for each news line
var p=document.createElement('p');
// style <p> element
p.style.fontFamily='Verdana';
p.style.fontSize='11px';
p.style.fontWeight='bold';
p.style.color='#c00';
if(counter==numNews){counter=0;}
p.appendChild(document.createTextNode(news[counter]));
// insert paragraph into <div> news
div.appendChild(p);
// replace old <div> node with new <div> node
newsDiv.parentNode.replaceChild(div,newsDiv);
counter++;
// rotate news every 10 seconds
setTimeout('rotateNews()',10*1000);
}
// execute functions when page is loaded
window.onload=function(){
if(document.getElementById){
createNewsDiv();
rotateNews();
}
}
</script>
<style type="text/css">
/*define style for news container*/
#news {
background: #eee;
padding: 2px 0px 2px 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
</body>
</html>
That's all we need. Our news JavaScript ticker is running smoothly! Of course the above list is a rough presentation. We might move the JavaScript functions out to an external file, as well as our brief CSS rules. What's more, the complete Web page can be generated by using a template file, which rapidly separates content from logic and visual presentation. What else can we ask for?
In this second part, we've demonstrated how to use PHP-JavaScript interaction for building a nice extensible news ticker, hopefully showing that this kind of process is relatively easy to manipulate for specific purposes. But the best part is still coming! In the last part of this series, we'll move one step beyond using this approach by building a complete record paging system, all without getting our head into the server. To find out more, stay tuned!
/ 15 
