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.
Grouping based on games
expand the 1st level ==>
<== expand the bb_ folder
Grouping based on function
expand the 1st level ==>
<== 1st level continued
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:
ad_ for ADmin manager
fb_ for FireBase code
ca_ for Catch the Alien
ad_manager.js
fb_io.js
ca_game.js
ad_user
fb_result
ca_score
ad_init()
fb_login()
ca_load()
fb_io.js
reg.js
bb_game.js
firebase I/O
registration code
the Bouncing Ball game
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
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.
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:
<img src="images/pic.jpg" alt="Root-relative path">
<img src="./images/pic.jpg" alt="Current directory">
<img src="../images/pic.jpg" alt="Parent directory">
<img src="images pic.jpg" alt="No prefix">