Embedded Files
modules
modules
When developing more complex programs, it is common to split up the program based on purpose/function and write the code in separate modules. EG:
landingPage.js
login.js
bouncingBall.js
manages the landing page
manages the login procedure
is the bouncing ball game
naming standards
naming standards
When you have multiple JavaScript modules 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
module prefixes
lp for landing page
lg for login
bb for bouncing ball
modules
modules
lp_manager.js
lg_manager.js
bb_game.js
variables
variables
lp_run
lg_result
bb_start
functions
functions
lp_init()
lg_login()
bb_setup()
html naming convention
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
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.
linking & file paths
linking & file paths
<img src="picture.jpg">
<img src="images/picture.jpg">
The "picture.jpg" file is located in the same folder as the current page
The "picture.jpg" file is located in the images folder in the current folder
development
development
One way to simplify code development is to:
code the basic skeleton outline.
get the basic outline working.
then develop one function before moving on to the next one.
EG the Level 1 rental program could:
EG the Level 1 rental program could:
on clicking the RENT button:
asks & validates the user's name.
asks & validates the user's age.
rent loop until user is satisfied with the selection:
asks & validates the number of car seats required.
allocates the most suitable car.
calculates the rental cost.
asks the user to confirm if they want to rent the car or select another:
clicking CANCEL continues the rent loop.
clicking OK exits the rent loop.
say thanks for renting with us.
Version 1
Version 1
This code is just the skeleton outline of the program which uses console.log to indicate if a function was called.
Note: The start of each function should have a comments section, but comments are not included here to keep the screenshot small.
Example of comments at the start of the function:
Version 2: develop the askName function
Version 2: develop the askName function
Version 3: develop the askAge function
Version 3: develop the askAge function
etc...
etc...
Page updated
Report abuse