Table of Contents - ict4u.net · Web viewJavaScript file s CSS files Any pictures or graphics used Challenge work book etc Set up your folders like this: Javascript html Includes

JavaScript Programming

Challenges

Series 1& 2

Workbook and Tracker

Name:

Class:

Page 1 of 61

Table of ContentsTable of Contents...................................................................1Before You Start....................................................................3

Folder Structure.............................................................................................3What is an algorithm?.....................................................................................3Pseudocode....................................................................................................3Link to Script File............................................................................................3Getting Help...................................................................................................3Link to CSS File...............................................................................................3Link to JQuery library......................................................................................4

Progress Summary.................................................................5Series 1 – Sequence & Selection..............................................6

1. Hello World 62. Hello User 73. AreaCalc 94. Perimeter Calc 115. Largest Number 136. Favourite Month 157. Mini-Calc 188. Mega Sale 219. Happy! 2310 Mobile Phone Costs 2511Calorie Advisor 2812. Restaurant Tip 3113. Sports Team 3514. Login Check 37

Series 2 – Loops...................................................................4015. For loops 4016. Times Table 4217 While loop 4518 Do While Loop 4719 Guess the Number 4920 . Squares and Cubes 52

Programming Showcase.......................................................55Hand in Documentation 56

Design Template..................................................................57Useful Resources.................................................................60

Background Reading.....................................................................................60Programming Tutorials.................................................................................60Programming Challenges..............................................................................60Documentation.............................................................................................60

AJK Nov 2014 Page 2 of 61

Before You Start Folder StructureSet up your folders like this:

What is an algorithm?An algorithm is a set of set by step instruction to solve a problem.

In this document when you are writing your algorithms, think “how can I explain this to another person so that they know what to do without knowing what the end result is supposed to be.”

A good algorithm is one that has a series of high level statements that you can convert into pseudocode

Pseudocode Pseudocode is a universal programming language. It fits in between an algorithm and a real programming language such as JavaScript or PHP. It should make programming you solution in a real life language easier!

Link to Script FileIn the Head section of your HTML page make sure you have a link to your JavaScript file:

<script type="text/javascript" src="Includes/code.js"></script>

Getting HelpUse the tryouts shown on the website below if you are unsure how to do something in Javascript:


Javascript

html

Includes

Images

DocumentationChallenge work book etc

Any pictures or graphics used

JavaScript file sCSS files

All webpages

This MUST be the name of YOUR JavaScript file

http://tinyurl.com/lbm6wjb or (http://www.ict4u.net/ComputerScience/JavaScript/Tryouts/index.html)

Link to CSS FileIf you have styled your page using CSS you must have a link to it in the Head section of your HTML page :

<link rel="stylesheet" href="Includes/JSExamples.css">

Link to JQuery library If you have JQuery references (they always start with a $ e.g.

($('input[name=gender]:checked').val() == "male") in your JS you must have a link to a JQuery Library it in the Head Section of your HTML page :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


This MUST be the name of YOUR CSS file

Make sure you copy this reference accurately

http://tinyurl.com/lbm6wjb

Progress Summary

Program Focus

Des

igne

d Code

d

Test

ed

1. Hello World Sequence

2. Hello User Sequence, strings3. Area Calc Sequence, simple

maths4. Perimeter Calc Sequence, simple

maths5. Largest Number Selection6. Favourite Month Selection7. Mini Calc Sequence, simple

maths8. Mega Sale Sequence, simple

maths9. Happy! Selection,10.Mobile Phone

CostsSelection, simple maths

11.Calorie Advisor Selection12.Restaurant Tip Selection, simple

maths13.Sports Team Selection, simple

maths14.Top Marks Selection

(Advanced)15.For loops Iteration16.Times Table Iteration , simple

maths17.While loop Iteration18.Do While Loop Iteration19.Guess the

Number Iteration, selection20.Squares and

CubesIteration, selection, simple maths


Series 1 – Sequence & Selection1. Hello WorldDesign and implement a program that displays the message “Hello World” when the page loads

Pseudocode:On page load

Output “Hello World”

Explain these terms:Form: Event

:

Button: Label:

Implement your program!

TestingHow do you know whether your program works?

EvidenceInclude a print out of your commented code here


Input Screen Output

2. Hello UserDesign and implement a program that allows the user to enter their name and then displays the message Hello username where username is the value that the user entered.

Pseudocode:

Variables and Other Data StructuresName Datatype Typical Value Minimum

ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank LinesNo Input Expected Output Actual Output Comments

1 Jenny2 1003456


Input Screen Output

Explain these terms:

Textbox: Property:

String: Concatenation:




3. AreaCalcDesign and implement a program that allows the user to enter 2 numbers representing the width and length of a rectangle. The program calculates and displays the area of the rectangle.

Pseudocode:

Algorithm:


Input Screen

DifferentiationStage1 Use alert and prompt popup windows for input and

outputStage 2 Validate the input to ensure the program works

reliably UseStage 3 HTML for input and outputStage 4 Format the interface using CSS


ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank LinesNo Input Expected Output Actual Output Comments1 2, 32 100, 1003 4.2, 1.84 1m, 356

Implement your program!TestingUse the table above to identify any issues with your program

Explain these terms

Constant Variable

IntegerReal Number

Array Index



Pseudocode

4. Perimeter CalcDesign and implement a program that allows the user to enter 2 numbers representing the width and length of a rectangle. The program calculates and displays the perimeter of the rectangle.

What is the purpose of the 4th and 5th tests in the test plan?


Output Screen

Input Screen

Algorithm


outputStage 2

Validate the input to ensure the program works reliably Use

Stage 3 HTML for input and outputStage 4 Format the interface using CSSVariables and Other Data StructuresName Datatype Typical Value Minimum

ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank LinesNo Input Expected Output Actual Output Comments

1 2, 32 100, 1003 4.2, 1.84 1m, 35 1, 3m6

TestingUse the table above to identify any issues with your program

Evidence Include screen shots of your input and output screens

Include a print out of your commented code here


5. Largest NumberDesign and implement a program that allows the user to enter 3 numbers in any order. The program displays the largest number. (Note this challenge is not to be solved using a JS property)


ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank LinesNo Input Expected Output Actual Output Comments1 100, 4, 472 4.2, 1.8, 53 1, 0, -14 5, 8, 556

What is the purpose of 5th test in the test plan?





Output Screen

Input Screen


outputStage 2

Validate the input to ensure the program works reliably

Stage 3 Use HTML for input and outputStage 4 Format the interface using CSS

6. Favourite MonthDesign and implement a program that allows the user to enter his/her favourite month as a three letter abbreviation (e.g. jan) When the input button is clicked the program responds with the full month name e.g. January)


DifferentiationStage1 Use prompt popup windows for input and outputStage 2 Validate the input to ensure the program works reliablyStage 3 Use HTML for input and outputStage 4 Format the interface using CSS


ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank Lines. Remember to include Valid and Invalid dataNo Input Expected Output Actual Output Comments1 Jan2 may3 November456

Implement your program! Hint:You may choose to use If. (test value){.......} statements

You may choose to use a Switch (test value){...Case...} statement



Selection:

Alternative Route

Valid data

Error Checking

Invalid data: Validation:





Algorithm

7. Mini-CalcDesign and implement a program that allows the user to enter 2 numbers and choose a mathematical operation (+ - * /). The program calculates the result and displays the answer as a full equation (e.g. the user enters 4 and 10 and chooses +. The program displays 4 + 10 = 14


Output Screen

Input Screen


outputStage 2 Include validation to ensure the program works reliablyStage 3 Use HTML for input and output

Stage5 Format the interface using CSS

Pseudocode



ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank Lines. Remember to include Valid and Invalid dataNo Input Expected Output Actual Output Comments1 10 + 32 23 - 73 3 * 94 48 / 856TestingUse the table above to identify any issues with your program



Variable: Initialise

Constant Integer

Floating Point:

Double:



Pseudocode

8. Mega SaleA local shop is having a promotion. If you spend £10 or more you will get a £1 voucher to spend next time you come in the store. If you spend £20 or more you get a £3 voucher.

Generate a random number between 1 and 50 to simulate the amount spent by the customer. Your program will tell the sales assistant which voucher to give the customer.


Output Screen

Input Screen

Algorithm





ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank Lines. Remember to include Valid and Invalid dataNo Input Expected Output Actual Output Comments1 102 153 204 2556

Complete this table

Operator Example Is Equivalent to

*= K*=5 K = K * 5

/= k/=5

%= K%=5

+= K+=5

-= K-=5





Pseudocode

9. Happy! This program will give the user a message depending upon how happy they say they are.

The user enters a number between 1 and 10 to rate how happy they feel.

If the reply is 3 or less it gives one message. Between 4 and 7 (including these numbers) they get another message. 8 and above they get a third message. .

Decide what the

messages will be but try to write them so that they will feel happy all day long!


Algorithm


outputStage 2 Use HTML for input and outputStage 3 Include validation to ensure the program works reliably



ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank Lines. Remember to include Valid and Invalid dataNo Input Expected Output Actual Output Comments1 12 43 84 1056





10 Mobile Phone CostsThis program will work out whether it’s better to use pay as you go or have a contract for a mobile phone. The charges are: Pictures (£0.35), Texts (£0.10) Data (£2.50 for 500MB).

Write a program that asks the user for how many pictures, texts and data they normally use each month. It should then calculate a total bill for the month.

If the total

comes to more than £10 they are advised to get a contract, otherwise they should use pay as you go.


Algorithm


outputStage 2 Include validation to ensure the program works reliablyStage 3 Use HTML for input and outputStage 4 Format the interface using CSS


Algorithm

Pseudocode


ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank Lines. Remember to include Valid and Invalid dataNo Input Expected Output Actual Output Comments1 3, 5, 82 8, 10, 203 20, 30, 50456






11Calorie AdvisorYour program will advise the user (a teenage boy) how many calories they can consume during a day. The rules are:


Age Calories12 222013 241014 263015 2820


outputStage 2 Include validation to ensure the program works reliablyStage 3 Use HTML formatting for input and outputStage 4 Format the interface using CSS

Pseudocode



ValueMaximum Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank Lines. Remember to include Valid and Invalid dataNo Input Expected Output Actual Output Comments1 Boy, 102 Girl, 123 Girl, 15456





12. Restaurant TipTwo people eat dinner at a restaurant and want to split the bill.

The total comes to £100 and they want to leave a 15% tip. How much should each person pay?


Output Screen

Input Screen

Algorithm


outputStage 2

The program ask how many people there are, what percentage the tip should be and how much the bill comes to

Stage 3 Use HTML for input and outputStage 4 Include validation to ensure the program works reliably


PseudocodeVariables and Other Data StructuresName Datatype Typical Value Minimum Value Maximum

Value


Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank lines.

No Input Expected Outputs Actual Outputs Comments1 100, 152 120,5345678






13. Sports TeamWrite a program for the sports department that allows them to work out how many netball teams they can make from a given number of volunteers.

Your program will allow them enter the number of volunteers and it

responds with the number of teams and the number held in reserve


DifferentiationStage1 Use alert and prompt popup windows for input and outputStage 2 Include validation to ensure the program works reliablyStage 3

Allow the user to choose what type of sport they are making a team for


Variables and Other Data StructuresName Datatype Typical Value Minimum Value Maximum

Value

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. Add your own tests in the blank lines.

No Inputs Expected Output

Actual Outputs Comments1 82 73 44 22567891011

Implement your program! Hint:With HTML You may choose to use a drop-down list for the 4 mathematical operations.





14. Login CheckWrite a program to check for a valid username and password combination.

If the Username is “Harry”, and the password is Potter the message “Access granted” should be displayed otherwise display “Username not recognised” or “Wrong password” depending on which part was incorrect


Output ScreenInput Screen

AlgorithmStage 1





Value


Test PlanComplete the Test Plan BEFORE implementation.

No Inputs Expected Output Actual Outputs Comments

1 Harry, potter

2 Amina, Saddik

3

4

5






Pseudocode

Series 2 – Iteration15. For loopsWrite a program using a for loop that displays numbers from 10 to 100 in steps of 5.


Output Screen

Algorithm

DifferentiationStage1 Use alert window for outputStage 2 Include validation to ensure the program works reliablyStage 3 Use HTML for outputStage 4 Format the interface using CSS


Value


No Expected Output Actual Outputs Comments

1

2

3






16. Times TableWrite a program that displays the 5 times table for numbers from 1-12


Output Screen

Algorithm

DifferentiationStage1 Use alert window for outputStage 2

Allow the user to choose the number for the table and the start and values

Stage 3 Include validation to ensure the program works reliablyStage 3 Use HTML for input and outputStage 4 Format the interface using CSS

PseudocodeVariables and Other Data StructuresName Datatype Typical Value Minimum Value Maximum Value



1

2







Pseudocode

17 While loopUsing a WHILE loop, write a program to produce the output shown below:


Loop Starting…Looping –count 1Looping –count 2Looping –count 3Looping –count 4Looping –count 5Looping –count 6Looping –count 7Looping –count 8Looping –count 9Looping –count 10Loop Ended

Output Screen

Algorithm


Value



1






Pseudocode

18 Do While Loop

Write a program using a Do While loop to produce the following output:


Loop StartingCurrent Count : 0Loop Ended!

Output Screen

AlgorithmStage 1


Value



1






19 Guess the NumberWrite a program that generates a random number between 1 and 100. The user has to guess what the number is. The program ends when the

user

guesses the correct number.


DifferentiationStage1 Use alert window for output and prompt window for

inputStage 2 Include validation to ensure the program works reliablyStage 3

Give a hint to let the user know whether the guess was too high or too low



Value

Test Plan

Complete the Test Plan BEFORE implementation.


1

2

3

4

5

Implement your program!Hint: use Math.floor(Math.random() * ((100-1)+1) + 1)

to generate the random number






20 . Squares and CubesThe squared number sequence starts: 1, 4, 9, 16, 25. The cubed number sequence starts: 1, 8, 27, 64.,125 Write a program to that allows the user to choose how many numbers they want to see (the sequences above show 5) and the sequence (e.g. squared or cubed )


Output ScreenInput Screen

AlgorithmStage 1

DifferentiationStage1 Use alert window for output and prompt window for

inputStage 2 Include validation to ensure the program works reliablyStage 3 Use HTML for input and outputStage 4 Format the interface using CSS


Value




1

2

3

4

5






Programming ShowcaseA Programming Showcase is a formal document showing how you progressed through all of the stages in the development process. It will use some of the design, development and testing work you have completed in this booklet as well as a detailed narrative of what you did at each stage, and, more importantly, why and how you did it. It will also include a full evaluation of the final version of your program and incorporate feedback and thoughts from other people (e.g. members of your class).

The showcase will be marked using the AQA’s guidelines for Controlled Assessment Projects.

The Showcase should cover the following main points:

Aim Description of program's main purposes(s). You could paraphrase the task's

instructions.

Design and Planning I->P-O diagram Flowchart Pseudocode Variables/data structures needed (and validation) For the highest grades, remember to discuss why you are using a particular

approach

Test Plan Detailed testing strategy – how will you know if your program works? Detailed

testing table – what data will you use to test your program? Valid, invalid and extreme data

Development Annotated screenshots showing stages of development Discussion of any problems you encountered and how you fixed them (or didn't!)

Explicit, detailed discussion of changes made to your code following alpha testing Full code listing for the final program Code should be commented, indented, use sensible variable names etc.

Testing Completed test plan with appropriate comments and evidence (screenshots?)

Evaluation Discuss good/bad aspects Feedback from others Suggestions for further improvement Note how the following evaluation paragraphs each cover a Fact, an Opinion and an

improvement (F-O-I)

Improvement (F->O->I)The interface for the program uses drop-down lists so the user can choose the items bought. This is good because it prevents the user from entering invalid spellings or non-existent items. When the program first loads up, the drop-down lists always shows “coffee”. I could set them to be blank so the user doesn't have to change them to blank if fewer than 5 items are bought.

The program correctly works out the student's average score in most cases. However, the maximum score for each test is supposed to be 20 and it is possible to enter higher scores than this. I could add some error-handling to prevent the user from entering


invalid numbers,

e.g.:

repeatinput scoreuntil score>-1 and score<21


Algorithm

Purpose Brief description of the purpose of the program – rewording of the requirements

Program Code

Pseudocode

Hand in Documentation


Fully commented code

That is clear and readable

Print screens of inputs and outputs

Design TemplateTitlePurpose of program:

............................................................................................

............................................................................................

............................................................................................

............................................................................................


Input Screen

Flowchart/PseudocodeInclude here the logic of your program described using a flowchart or Pseudocode


Value


Output Screen

Test PlanComplete the first 2 columns of the following Test Plan BEFORE implementation. As usual, include valid, invalid and extreme data.


Implement your program! Test your program! Evaluate your program!


Useful ResourcesBackground Readinghttp://www.i-programmer.info/babbages-bag.html http://computer.howstuffworks.com/ http://www.howitworks.net/

Programming Tutorialshttp://www.codecademy.com/en/tracks/javascript http://www.codeproject.com/Articles/755/JavaScript-For-Beginners http://www.tizag.com/phpT/ http://www.w3schools.com/sitemap/default.asp#examples http://www.w3schools.com/php/default.asp http://www.w3schools.com/sql/default.asp http://www.youtube.com/user/Axsied http://www.tech-recipes.com/rx/category/computer-programming/

Programming Challenges http://coderbyte.com/CodingArea/Challenges/ https://projecteuler.net/ http://www.olympiad.org.uk/problems.html http://bebras.org/?q=examples

Documentationhttp://www.gliffy.com


http://www.gliffy.com/

http://bebras.org/?q=examples

http://www.olympiad.org.uk/problems.html

https://projecteuler.net/

http://coderbyte.com/CodingArea/Challenges/

http://www.tech-recipes.com/rx/category/computer-programming/

http://www.youtube.com/user/Axsied

http://www.w3schools.com/sql/default.asp

http://www.w3schools.com/php/default.asp

http://www.w3schools.com/sitemap/default.asp#examples

http://www.tizag.com/phpT/

http://www.codeproject.com/Articles/755/JavaScript-For-Beginners

http://www.codecademy.com/en/tracks/javascript

http://www.howitworks.net/

http://computer.howstuffworks.com/

http://www.i-programmer.info/babbages-bag.html

Documents

Table of Contents - ict4u.net · Web viewJavaScript file s CSS files Any pictures or graphics used Challenge work book etc Set up your folders like this: Javascript html Includes