LAYOUT

12COMP

programming

database

P5 play mini skills

handy code

ES6 modules

FILES

When developing more complex programs, it is common to:

Split up the program based on purpose/function and write the code in separate files.
Use sensibly named folders to group files.

Below are two examples of a folder structure for the same project

Grouping based on games

expand the 1st level ==>

<== expand the bb_ folder

Grouping based on function

expand the 1st level ==>

<== 1st level continued

naming standards

When you have multiple JavaScript files it is important to think about how another person will know which module a variable or function is defined in.

One way is to prefix the JavaScript module, its variables and its functions with a common code. EG:

module prefixes

ad_ for ADmin manager
fb_ for FireBase code
ca_ for Catch the Alien

modules

ad_manager.js
fb_io.js
ca_game.js

variables

ad_user
fb_result
ca_score

functions

ad_init()
fb_login()
ca_load()

fb_io.js
reg.js
bb_game.js

firebase I/O
registration code
the Bouncing Ball game

html naming convention

When developing JavaScript code which updates a number of html elements, it soon becomes apparent you should have a naming convention for the html elements. Here is a suggested naming convention:

element type_name where element type is p for paragraph, b for button, d for division, i for input

EG:

p_name contains user's name
p_age contains user's age
b_start start button
i_name input box for user's name

html

From skillcrush:

It is a best practice to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML.

The reason for this is that HTML loads from top to bottom.

The head loads first, then the body, and then everything inside the body. If we put our JavaScript links in the head section, the entire JavaScript file will load before loading any of the HTML, which could cause a few problems.

Specifying html paths

In HTML, the src attribute is used to specify the path to an external resource. Some examples are:

/ (Root-relative path): This prefix points to the root directory of the website. EG; src="/images/pic.jpg" looks for the pic.jpg file in the images folder located at the root of the website.
./ (Current directory): This prefix refers to the current directory where the HTML file is located. EG; src="./images/pic.jpg" looks for the pic.jpg file in the images folder within the same directory as the HTML file.
../ (Parent directory): This prefix moves up one directory level. EG; src="../images/pic.jpg" looks for the pic.jpg file in the images folder located one level up from the current directory.
No prefix: When you don't use any prefix, the path is considered relative to the current directory. EG; src="images/pic.jpg" looks for the pic.jpg file in the images folder within the same directory as the HTML file.

Summary in code form: