Set Source | Table O Contents

Place the introducing line of text ie.) the ‘tagline’ here …

Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.

Folder Src

Hint. The src folder of your Javascript project holds the many and various Javascript programs your team may develop.

More to come …

How to Set the Source src folder

More to come …

File Name

The File Name of each program should reflect the underlying Javascript code (.js) file.

For example, if you name your program Alterconstant, then the reader of your program will expect some type of Javascript code in the accompanying (.js) file that works with methods designed to alter constants.

And, the name of the accompanying (.js) file may reflect the same expectation, as well.

As follows,


alter-constant.js

Note. The placement of the (.js) file should be within the working js folder of the program.

Folder js

The folder js holds the accompanying Javascript code file for each program …

While the (.html) index page of the program resides directly in the program root folder.

Note. You may place a <script> reference to the underlying Javascript code at the bottom of your (.html) index page, as follows:


<!-- Place all scripts above the closing body tag -->
<script src="../js/alter-constant.js"></script> -->
</body>
</html>

Program Root

In the root folder of the Javascript program, in addition to the js sub-folder, the index file and the favicon file reside.

Note. These are the only files required to interface with the Brackets IDE.

Open Folder

From the main menu of the Brackets IDE, the end-user selects File, Open Folder to select the program to expose.

Note. Remember, the program files are stored within the src folder of your Javascript project.

Live Preview

After successfully loading the target program folder into the Brackets IDE, the Live Preview feature ie.) the lightening bolt symbol of the Brackets IDE may be clicked and engaged.

Instantly, the Brackets IDE raises a Chrome browser window and displays the rendered (.html) output from the now generated DOM Tree.

If you have placed a <script> reference to the underlying Javascript code at the bottom of your (.html) index page, but before the closing </body> tag, then your script page (.js) will execute, as well.

Thus, altering the DOM Tree as you have planned.

Note. At the browser address line you will see the random, temporary URL that the Brackets IDE program has invoked for your rendition, as follows:


http://127.0.0.1:54818/index.html

Not yet secure, but sufficient for testing your Javascript code blocks back-and-forth from Chrome browser window to (.js) file.

Css

Can you toss some css into the mix?

Sure, if you place the appropriate link in the head section of your (.html) index page to the css folder that houses your local (.css) file.

Note. Preferably as a Sub-folder of your program’s root directory under the assets folder.

Script Reference

The placement of the Script Reference is important.

You, as developer, wish to have your Javascript code engage the flow of the program after all of the accompanying assets have been loaded into the DOM Tree.

This way, you are assured of manipulating the DOM Tree from its first finalized view.

Note. The view you have programmed will replace the first finalized view of the DOM Tree after the result of your Javascript code is rendered.

Last Subtitle

More to come …


Note. The above synopsis was derived from an article written by Blank Author [1].

  1. A Narrative of Psychology by Blank Author, Jan #1999

Support

Please support the co-workers who aggregate the Source Links for our projects.

Patreon

Like what you see in this project? If so, then support the authors and machine-elves who aggregate the source links and pages for our projects via Patreon.