Web page programing
c04/.DS_Store
c04/comparison-operator.html
Bullseye
c04/comparison-operator-continued.html
Bullseye
c04/css/c04.css
@import url(http://fonts.googleapis.com/css?family=Wellfleet); body { background-color: #523620; color: #fff; font-family: 'Wellfleet', times, serif; font-size: 150%; margin: 0px 0px 0px 0px;} h1 { background-image: url('../images/bullseye-logo.png'); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; height: 109px; width: 643px; margin: 40px auto;} #teacher { float:right; margin:0px 30px 0px 0px;} #teacher2 { float:right; margin:135px 30px 0px 0px;} #page1, #page2 { background-color: #fecc6f; height: 596px; padding: 10px; min-width: 779px;} #page2 { height: 730px;} #answer { border: 12px double #fff; color: #523620; text-align: left; padding: 20px; margin: 70px auto 10px auto; width: 250px; text-align: center;} #blackboard { background-color: #425a5a; border: 25px solid #523620; border-radius: 20px; padding: 40px 20px; margin: 0px auto; height: 600px; width: 600px; text-align: center;}
c04/do-while-loop.html
Bullseye
c04/example.html
Bullseye
c04/for-loop.html
Bullseye
c04/if-else-statement.html
Bullseye
c04/if-statement.html
Bullseye
c04/if-statement-with-function.html
Bullseye
c04/images/bullseye-logo.png
c04/images/teacher.png
c04/index.html
JavaScript & jQuery
Chapter 4: Decisions & Loops
| 1 | Using Comparison Operators | comparison-operator.html | comparison-operator.js |
| 2 | Using Comparison Operators Continued | comparison-operator-continued.html | comparison-operator-continued.js |
| 3 | Using Logical And | logical-and.html | logical-and.js |
| 4 | Using Logical Or and Logical Not | logical-or-logical-not.html | logical-or-logical-not.js |
| 5a | Using If Statements | if-statement.html | if-statement.js |
| 5b | If Statement with Function | if-statement-with-function.html | if-statement-with-function.js |
| 6 | Using If... Else Statements | if-else-statement.html | if-else-statement.js |
| 7 | Using Switch Statements | switch-statement.html | switch-statement.js |
| 8 | Using For Loops | for-loop.html | for-loop.js |
| 9 | Using While Loops | while-loop.html | while-loop.js |
| 10 | Using Do While Loops | do-while-loop.html | do-while-loop.js |
| 11 | Example | example.html | example.js |
c04/js/comparison-operator.js
var pass = 50; // Pass mark var score = 90; // Score // Check if the user has passed var hasPassed = score >= pass; // Write the message into the page var el = document.getElementById('answer'); el.innerHTML = 'Level passed: ' + hasPassed;
c04/js/comparison-operator-continued.js
var score1 = 90; // Round 1 score var score2 = 95; // Round 2 score var highScore1 = 75; // Round 1 high score var highScore2 = 95; // Round 2 high score // Check if scores are higher than current high scores var comparison = (score1 + score2) > (highScore1 + highScore2); // Write the message into the page var el = document.getElementById('answer'); el.innerHTML = 'New high score: ' + comparison;
c04/js/do-while-loop.js
var i = 1; // Set counter to 1 var msg = ''; // Message // Store 5 times table in a variable do { msg += i + ' x 5 = ' + (i * 5) + '<br />'; i++; } while (i < 1); // Note how this is already 1 and it still runs document.getElementById('answer').innerHTML = msg;
c04/js/example.js
var table = 3; // Unit of table var operator = 'addition'; // Type of calculation var i = 1; // Set counter to 1 var msg = ''; // Message if (operator === 'addition') { // Do addition while (i < 11) { msg += i + ' + ' + table + ' = ' + (i + table) + '<br />'; i++; } } else { // Do multiplication while (i < 11) { msg += i + ' x ' + table + ' = ' + (i * table) + '<br />'; i++; } } // Write the message into the page var el = document.getElementById('blackboard'); el.innerHTML = msg;
c04/js/for-loop.js
var scores = [24, 32, 17]; // Array of scores var arrayLength = scores.length;// Items in array var roundNumber = 0; // Current round var msg = ''; // Message // Loop through the items in the array for (var i = 0; i < arrayLength; i++) { // Arrays are zero based (so 0 is round 1) // Add 1 to the current round roundNumber = (i + 1); // Write the current round to message msg += 'Round ' + roundNumber + ': '; // Get the score from the scores array msg += scores[i] + '<br />'; } document.getElementById('answer').innerHTML = msg;
c04/js/if-else-statement.js
var pass = 50; // Pass mark var score = 75; // Current score var msg; // Message // Select message to write based on score if (score > pass) { msg = 'Congratulations, you passed!'; } else { msg = 'Have another go!'; } var el = document.getElementById('answer'); el.textContent = msg;
c04/js/if-statement.js
var score = 75; // Score var msg; // Message if (score >= 50) { // If score is 50 or higher msg = 'Congratulations!'; msg += ' Proceed to the next round.'; } var el = document.getElementById('answer'); el.textContent = msg;
c04/js/if-statement-with-function.js
var score = 75; // Score var msg = ''; // Message function congratulate() { msg += 'Congratulations! '; } if (score >= 50) { // If score is 50 or more congratulate(); msg += 'Proceed to the next round.'; } var el = document.getElementById('answer'); el.innerHTML = msg;
c04/js/logical-and.js
var score1 = 8; // Round 1 score var score2 = 8; // Round 2 score var pass1 = 6; // Round 1 pass mark var pass2 = 6; // Round 2 pass mark // Check whether user passed both rounds, store result in variable var passBoth = (score1 >= pass1) && (score2 >= pass2); // Create message var msg = 'Both rounds passed: ' + passBoth; // Write the message into the page var el = document.getElementById('answer'); el.innerHTML = msg;
c04/js/logical-or-logical-not.js
var score1 = 8; // Round 1 score var score2 = 8; // Round 2 score var pass1 = 6; // Round 1 pass mark var pass2 = 6; // Round 2 pass mark // Check whether user passed one of the two rounds, store result in variable var minPass = (score1 >= pass1) || (score2 >= pass2); // Create message var msg = 'Resit required: ' + !minPass; // Write the message into the page var el = document.getElementById('answer'); el.innerHTML = msg;
c04/js/switch-statement.js
var msg; // Message var level = 2; // Level // Determine message based on level switch (level) { case 1: msg = 'Good luck on the first test'; break; case 2: msg = 'Second of three - keep going!'; break; case 3: msg = 'Final round, almost there!'; break; default: msg = 'Good luck!'; break; } var el = document.getElementById('answer'); el.textContent = msg;
c04/js/while-loop.js
var i = 1; // Set counter to 1 var msg = ''; // Message // Store 5 times table in a variable while (i < 10) { msg += i + ' x 5 = ' + (i * 5) + '<br />'; i++; } document.getElementById('answer').innerHTML = msg;