How is this not passing PHP values to JS and vice-versa?

tl;dr: PHP can generate Javascript, but the two cannot reciprocally or synchronously talk.

Here’s a simplified look at the chain of what happens when a request “involving” php and javascript is executed:

1. A request is sent to the server (ie the user types in the url of your script in his browser)
2. The server processes your php script entirely and spits out browser output: html and perhaps javascript.
3. The user browser (the client) gets the html, renders it in the user screen, and runs the javascript of the page if there’s any.

Each step happens only after the previous one is done, which means when javascript is executing PHP is already gone; there is no way for javascript to invoke a function declared in PHP.

HOWEVER, something important to realize here is that step 3 depends on step 2, that is, just like the final html depends on what PHP decides to output, so does the javascript. In other words, it is possible for PHP to dynamically generate javascript, and that is exactly what happens in the code of the question.

But let’s look at it from a more practical point of view. Let us walk through the request:

Step 1

The request is sent to the server. The following code is retrieved for execution:

<?php
$var1 = 300;
echo $var1.'echo_via_php...<br />'; //so far so good

?>
<script type="text/javascript">

document.write('PHP to JS -> <br />') ;
var x = '<?php echo $var1; ?>';
document.write('doc_write_java_X: <br />') ;
document.write(x) ;
document.write(' ( if = 300 its okay...i guess )<br />') ;

var php_y = '50'      ;

</script> 

</div>
<div>

<?php
echo '<br /><br />now js to PHP...';
/////////////////also works java to php...
$var2 = "<script>document.write(php_y)</script>";  
echo 'VAR2 is equal php_y: '.$var2;

?>

Step 2

PHP is processed and the following output is generated and sent to the client.

300echo_via_php...<br />
<script type="text/javascript">

document.write('PHP to JS -> <br />') ;
var x = '300';
document.write('doc_write_java_X: <br />') ;
document.write(x) ;
document.write(' ( if = 300 its okay...i guess )<br />') ;

var php_y = '50'      ;

</script> 

</div>
<div>

<br /><br />now js to PHP...
<script>document.write(php_y)</script>
VAR2 is equal php_y: <script>document.write(php_y)</script>

Step 3

The user browser collects the server output and runs the javascript, yielding:

300echo_via_php...<br />
<script type="text/javascript">

document.write('PHP to JS -> <br />') ;
var x = '300';
document.write('doc_write_java_X: <br />') ;
document.write(x) ;
document.write(' ( if = 300 its okay...i guess )<br />') ;

var php_y = '50'      ;

</script> 
PHP to JS -> <br />
doc_write_java_X: <br />
300
 ( if = 300 its okay...i guess )<br />

</div>
<div>

<br /><br />now js to PHP...
<script>document.write(php_y)</script>
50
VAR2 is equal php_y: <script>document.write(php_y)</script>
50

The example isn’t admittedly the easiest to follow because I used the code in the original question, but it hopefully illustrates the point: PHP is merely generating the output that will later be read by the client. It can be confusing for one language to generate the code of another, but it makes sense when you think of javascript as text, just like html.