Author: Dave

// Document structure: HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Program title</title>
<meta name="author" content="your name">
<meta charset="UTF-8">
<!-- Program description
Created: -date-
-->
<style> /* CSS style info in here */
h1 { /* applies to <h1></h1> */
font-family: ‘Arial’;
color: Red;
text-size: 16px;
}
#outputId { /* applies to id=“outputId” */
font-weight: bold;
font-style: italic;
width: 700px;
}
.cloudClass { /* applies to class=“cloudClass” */
position: absolute;
top: 15px;
left: 15px;
}
</style>
</head>
<body> <!-- HTML user interface in here -->
<h1>Heading text</h1>
<p>
<img src=“filename.jpg”> <br> <!-- an image -->
<strong>Image created by: </strong> <!-- bold text -->
<a href=“linkToPage.html”>Link to page</a> <!-- link --> </p>
<p>
Input a name: <!-- creates an input line -->
<input id=“inputId” type=“text” size=“5”>
<button id=“buttonId”>
Click me! <!-- a clickable button -->
</button><br>
Results: <span id=“outputId”></span> <!-- output here -->
</p>
<ul> <!-- unordered list, or <ol> for ordered -->
<li>Item #1</li> <!-- list item -->
<li>Item #2</li>
</ul>
<table id=”tableId”> <!-- make a table -->
<tr> <!-- new table row -->
<th>Heading one</th> <!-- new table data cell -->
<th>Heading two</th>
</tr>
<tr>
<td>Table data one</td>
<td>Table data two</td>
</tr>
</table>
<script> <!-- Javascript in here -->
</script>
</body>
</html>

// Program structure
<script>
function mainProcedure() {
// basic function pipeline
var input =getInput();
var result =processInput( input );
outputResult( result );
// basic function pipeline with object constructors
var myObject =new ObjectConstructor( “this”, “that” );
var theList =myObject.makeTheCharacteristicList();
myObject.outputTheList( theList );
}
function getInput () { //INPUT: get the input from id=“inputId”
var input =document.querySelector( '#inputId' ).value;
return input;
}
function processInput ( input ) { //PROCESS: format the result into HTML var result =“”;
result =“The result is: ” + input;
return result;
}
function outputResult ( result ) { //OUTPUT: put the result into #outputId
document.querySelector( '#outputId' ).innerHTML =result;
}
function ObjectConstructor ( firstCharacteristic, secondCharacteristic ) {
//INIT: set up the internal variables for this object
this.characteristicOne =firstCharacteristic;
this.characteristicTwo =secondCharacteristic;
this.makeTheCharacteristicList =function () { //PROCESS: make list var output =“List of characteristics: ”
+ this.characteristicOne
+ “, “ + this.characteristicTwo
return output;
}
this.outputTheList =function ( output ) { //OUTPUT: output list
document.querySelector( '#outputId' ).innerHTML =output;
}
}
</script>

// INIT: and variables
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
var stringVar =""; // define as an empty string
var numberVar =0; // define as an empty number
var exampleArr =[]; // define as an empty array
var example2Arr =[ 1, 2, 3, 4 ];
var nameArr ="Will, Rasim, Nick, Steve".split(", ");
var studentObj ={}; // define as an empty object
studentObj.firstName ="Tayvon";
studentObj[ "lastName" ] ="West";
var teacherObj ={
firstName ="Dave",
lastName ="Drapak",
age =47
};
</script>

// INPUT:
<script>
window.onkeydown = function ( keyEvent ) {
var unicodeNumber =keyEvent.which || keyEvent.keyCode;
mainProcedure( unicodeNumber );
}
//INPUT: read from the input line at #inputId
var input =document.querySelector( '#inputId' ).value;
var rightNow =new Date();
document.body.onload = mainProcedure;
document.querySelector( '#buttonId” ).onclick = mainProcedure;
document.querySelector( '#inputId” ).onchange = mainProcedure;
document.querySelector( '#imageId” ).onmouseover = mainProcedure;
document.querySelector( '#imageId” ).onmouseout = mainProcedure;
</script>

// PROCESS:
var twoToThePowerOfSix = Math.pow( 2, 6 );
var valueOfPi = Math.PI;
var squareRootOfFour = Math.sqrt( 4 );
var biggestNumberOfTheList = Math.max( 4, 6, 8 );
var smallestNumberOfTheList = Math.min( 4, 6, 8) ;
Var getTheFirstNumberInTheString = parseInt( “47 years old”) ;
var roundNormally = Math.round();
var roundDownToNearestInteger = Math.floor();
var roundUpToNearestInterger = Math.ceil();
var randomDecimalFromZeroToOne = Math.random();
var dieRoll = Math.ceil( Math.random() *6 ); // die roll from 1 to 6
var joinedString = “Hello” + “ “ + “world!”;
var primaryColourArr = “Cyan, Yellow, Magenta”.split( “, ” );
var secondaryColourArr = [ “Green”, “Orange”, “Purple” ];
var secondaryListString = secondaryColourArr.join( “, ”) ;
// remember to use var rightNow = new Date() in the input function
var dateOfTheMonth = rightNow.getDate(); // 1-31
var dayOfTheWeek = rightNow.getDay(); // 0-6
var year = rightNow.getFullYear();
var month = rightNow.getMonth(); // 0 –11
var hour = rightNow.getHours(); // 0 –23
var minutes = rightNow.getMinutes(); // 0 –59
var seconds = rightNow.getSeconds(); // 0 –59
for ( i in exampleArr ) {
// loop through each index of exampleArr
}
for ( count=1; count <= 10; count = count +1 ) {
// loop starting at 1, stopping at 10, and adding 1 at the end of each loop
}
//IF: the name typed in is “Ben”
if ( inputName == 'Ben' ) {
// do something
//IF: the name typed in is ‘Zoe’
} else if ( inputName == 'Zoe' ) {
// do something else
//ELSE: for every other name...
} else {
// do something by default
}

// OUTPUT:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
// put Hi! Inside the element with id=“outputId”
document.querySelector( '#outputId' ).innerHTML = “Hi!”;
document.querySelector( '#outputId' ).style.fontSize = 14 + "px";
document.querySelector( '#outputId' ).style.color = "Red";
document.querySelector( '#outputId' ).style.width = 100 + "px";
document.querySelector( '#outputId' ).style.position ="absolute";
document.querySelector( '#outputId' ).style.top = 50 + "px";
document.querySelector( '#outputId' ).style.left = 35 + "px";
document.querySelector( '#outputId' ).style.visibility = "hidden";
document.querySelector( '#outputId' ).style.opacity = 0.5;
document.querySelector( '#imageId' ).src = "newimage.png";
// remember to load the jQuery library (look up) in order to use animation
// also remember to set #animationId to “position: absolute;”
$("#animationId").animate(
{width: 50 + "px"},
{duration: 400}
);
$("#animationId").animate(
{top: "+=50px", right: “-=50px” },
{duration: fast},
{easing: swing}
);
$("#animationId").animate(
{left: "+=50px"},
{duration: slow},
{easing: linear},
{complete: functionToCallWhenAnimationIsFinished() }
);
</script>

// Good programming style
Start each program with:
Your name
A description of the program
The date created,
Dates modified and an explanation of daily changes
Make sure that you have a descriptive comment for every function & method
Make sure that you have a descriptive comment for every if statement and loop
Use descriptive, full language names for functions and variables
Use camelCaseLettering for variables and functions
Use UpperCaseFirst for object constructors
Avoid lines that scroll off the screen (longer than 95 characters)
If a function or method is longer than 20 lines, make a sub-function for legibility
Indent your code with every block
Organize your code into: INIT: → main → INPUT: → PROCESS: → OUTPUT:
Organize your object constructors into: INIT: → INPUT: → PROCESS: → OUTPUT:
Separate your HTML clearly into <head> (<meta>/<script>/<style>) and <body>