JavaScript code and PHP

PHP code is executed on the server side and output data are transmitted to Web browser.
JavaScript script code is executed by the browser on user's computer.
Combining these two web programming languages, JavaScript scripts can achieve dynamic results based on data received and processed by the server. Thus, the same web page can contain a JavaScript code for a user and other JS code for another user.

- There are two ways to combine PHP with JavaScript to achieve a dynamic and personalized result:

      1) By writing the entire JS script within PHP code and adding it to the web page with PHP function "echo" (or "print").
echo '<script type="text/javascript"> // JS code ... </script>';
- The string returned by 'echo' must be a JS code with correct syntax.

      2) By adding in the JS script within the HTML document only the necessary data processed by PHP.
<script type="text/javascript">
var var_js = <?php echo $var_php; ?>;
• Both versions must be written into .php files that can be processed by the PHP module.

1. Alert window with the user name

In a web site with authentication system to be displayed an alert window with the user name, after he logged in.
In this case we assume that the username is stored in a session variable ($_SESSION['name']).
Using the first method, would be the following PHP code:
// ... php code ...
echo '<script type="text/javascript">alert("Welcome '. $_SESSION['nume']. '");</script>';

Or the second way:
<?php session_start(); ?>
<!-- HTML code -->
<script type="text/javascript">
alert("Welcome <?php echo $_SESSION['nume']; ?>");

2. Clock with server time

A clock made with JavaScript and added in a web page will display the visitor's computer time. If you want to display the same time for all visitors, you can add and use the server time in the JS script, as it is in the following example:
<div id="tag_ora"></div>
<script type="text/javascript"><!--
// Clock script server-time,

// use php to get the server time
var serverdate = new Date(<?php echo date('y,n,j,G,i,s'); ?>);

var ore = serverdate.getHours();       // hour
var minute = serverdate.getMinutes();     // minutes
var secunde = serverdate.getSeconds();     // seconds

// function that process and display data
function ceas() {
  if (secunde>59) {
    secunde = 0;
  if (minute>59) {
    minute = 0;
  if (ore>23) {
    ore = 0;

  var output = "<font size='4'><b><font size='1'>Ora server</font><br />"+ore+":"+minute+":"+secunde+"</b></font>"

  document.getElementById("tag_ora").innerHTML = output;

// call the function when page is loaded and then at every second
window.onload = function(){
  setInterval("ceas()", 1000);
- Test it yourself, in a .php file, on the server.

3. Displaying data from PHP with JavaScript, according to a URL

Maybe you have seen in sites for traffic or banner that is necessary to add a little JavaScript code in the page with a specific "src" attribute.
They use the same principle, to combine PHP with JavaScript.
The URL in the JS code added in the web page calls a PHP script. The PHP script uses $_GET to get the parameters from the received URL. According to those parameters, the PHP processes data on the server and return a HTML and JavaScript code that can display in your page what they want, the traffic site, a banner, ....
To understand better, try the following example:

      a) Create a php file on the server (named "phpjs_test.php") and add the following code:
$ids = array(1=>'php-mysql', 2=>'javascript', 3=>'html');

// gets the id from URL
if (isset($_GET['id'])) {
  if ($sir = $ids[$_GET['id']]) {
    // return a string with a JS instruction that will display a link
    echo 'document.write("<a href=\''. $sir. '\'>'. $sir. ' course</a>");';

      b) In the same folder on the server create a html file (ex. "test_jsphp.html") where you add the fallowing code:
<script type="text/javascript" src="phpjs_test.php?id=2"></script>

- Call this html file on the server. The result will be a link (written by "document.write()") defined in php script, based on the 'id' added in the URL in "src" attribute.