You may be wondering where all of this code is placed. Should you put all your HTML, CSS, and JavaScript code in the same file or split them into separate files? For very simple applications and examples, it is not uncommon for all the code to be placed into a single file with an extension of .html or .htm. In this case, the CSS and JavaScript code will reside in the <head> section of your HTML page.
However, the preferred way of creating an application is to separate the presentation from the content and behavior. The user interface items for your application should reside in an HTML page that contains only tags used to define the content of the application, along with references to any CSS (presentation) or JavaScript (behavior) files that are part of the application. The end result is a single HTML page and one or more CSS and JavaScript files. This would result in a folder structure similar to that shown in the following screenshot where we have a single file called index.html and several folders that hold CSS, JavaScript, and other resources such as images.
The css and js folders will contain one or more files:
CSS files can be linked into an HTML page with the <link> tag. In the following you will see a code example that shows you how to use the <link> tag to import a CSS file. Links to CSS files should be defined in the <head> tag of your HTML page:
<!DOCTYPE html>
<html>
<head>
<title>GeoRanch Client Portal</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
</body>
</html> JavaScript files are imported into your HTML page with the <script> tag as seen in the following code example. These <script> tags can be placed in the <head> tag of your web page, as seen with the reference to the ArcGIS API for JavaScript near the end of the page just before the ending </body> tag, as has been done with the creategeometries.js file:
<!DOCTYPE html>
<html>
<head>
<title>GeoRanch Client Portal</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script src="https://js.arcgis.com/3.20/"></script>
</head>
<body>
<script src="js/creategeometries.js"></script>
</body>
</html> Some developers recommend importing your JavaScript files close to the ending </body> tag. This is because, when rendering an HTML page, the browser considers each line of HTML in turn and does not proceed to the next line until the current one has been processed. If you load large external JavaScript files in the <head> section, then the user will just see a blank page until the script has fully loaded. Their rationale is that if these files are loaded last, the user will at least see something rendered on the page while they are being downloaded. In the authors' opinion, this is not usually a problem for most users because connection speeds are normally so good that even large external files are downloaded almost instantaneously. Do bear it in mind though.
Putting a <script> in the <head> section is recommended when using JavaScript libraries like Dojo that must be parsed before they can interact with HTML elements in the <body> section. That's why we always reference the ArcGIS API for JavaScript in the <head> section.
Note
The Dojo Toolkit is an open source modular JavaScript library, designed to enable the rapid development of web applications. The ArcGIS API for JavaScript is built upon Dojo, so we will be talking about it extensively in this book. Find out more about Dojo here: https://dojotoolkit.org/.