Because I am new to programming and trying to learn several languages at once, I made a series of files in one folder in order to test how these different languages/technologies work together. In the folder I have two php files (including the main file I am testing; 'index.php'), a css file, a json file and two javascript files. The problem is that when I run it in the browser using a XAMPP apache server, the scripts that refer to the files 'script.js' and 'secondscript.js' on the 'index.php' file seem to be executing in the wrong order depending on the situation. I expected them to both be executed in the order in which they appeared on the file but if I use Chrome, 'secondscript.js' is always executed first even if I swap the order that they are written in the file and if I use Firefox, 'script.js' is always executed first. Here is the code:
index.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- ADD CSS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ADD JQUERY -->
<script> window.jQuery || document.write('<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"><\/script>')</script> <!-- ADD JQUERY BACKUP -->
<script src="secondscript.js"></script>
<!-- ADD JQUERY TEST -->
<script src="script.js"></script>
<!-- ADD JAVASCRIPT -->
</head>
<body>
<div id="ajaxdiv"></div>
<!-- ADD AJAX TEST -->
<?php include 'server.php'?>
<!-- ADD PHP -->
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<!-- ADD BACKUP FOR JSLESS BROWSER -->
</body>
</html>
script.js:
document.write("<h1>Header</h1>")
Request = new XMLHttpRequest()
Request.open('GET', 'json.json')
Request.onload = function (){
Data = JSON.parse(Request.responseText)
p = document.createElement('p')
node = document.createTextNode(Data[1].Three)
p.appendChild(node)
document.getElementById("ajaxdiv").appendChild(p)
}
Request.send()
secondscript.js:
$(function() { alert('Alert') })
server.php:
<?php echo 'PHP TEST'?>
style.css:
body {background-color: pink}
h1 {color: red}
p {color: purple}
json.json:
[{"One": "A", "Two": "B"}, {"Three": "C", "Four": "D"}]
edit: by 'execute first' I mean it seems that way to me because the 'C' that appears via ajax appears before or after the alert message depending on the browser.
