Patterns

A pattern is a common way of doing things. Here are the patterns on this site.

Pattern Keywords Situation Actions Referenced in
Accumulate HTML HTML, JavaScript

Some HTML will get longer and longer as things happen on the page.

When something relevant happens, append HTML to a variable. Inject the variable into the page.

 Better pig (function arguments)

Pigs' houses (string arguments)
Click-change-show Events, JavaScript, Namespace

You want something on the page to change with the user clicks something.

Code in an element's click event calls a JS function in your namespace

 Team scores (buttons, events, variables)
Flag JavaScript

You want to keep track of whether something happened. For example, whether one of several input errors happened.

Use a variable as a flag. Write code that initializes it, sets it if some condition occurs, then checks it.

 Course score (input, validation, flags)

Security
Multiway if

You have several tests that you want to apply in a row. All have to pass to proceed. Often used in validation, and with the flag pattern.

Chain together a sequence of else ifs.

 Course score (input, validation, flags)
Namespace JavaScript, Namespace

You have different code from different sources, like jQuery, Bootstrap, and a mapping library. You want to ensure that your own code doesn't interfere with other code.

Create a namespace for your own code.

 The template
Record set Data objects, JSON

You want to store a bunch of records in JS. Each record has the same fields.

Use a record set. Make a JS array. Each element is a JS object, with the same properties.

 Course catalog: many courses
Show record set Data objects, HTML, JavaScript, Loop, Record set, Table

You have a record set. You want to show it to the user.

Create HTML that uses the <table> tag. Use .forEach() to loop across the record set. Create HTML for each record. Accumulate the HTML.

 Course catalog: many courses

Courses and dogs
Wrapper HTML

You want to apply an effect to a group of HTML elements.

Wrap them in a container tag. Give the wrapper an id.

 Wrapping winners (wrappers)