JavaScript Year 11 Recap

Creating your first App

1.) Create an index.html using brackets.io as if you are making a webpage.

2.) Create a heading that says "My First App"

It should look like this:
4.) type inbetween the script tags
alert("Hello World!");

5.) Save it and refresh the page

Congratulations you have made your first "app", Now try and change the message.

Important Note: All JavaScript commands should end with a ;
In order to create any programming we use script tags they look like this:
<script> </script>

3.) Add:  <script>

</script>

Brief: A series of notifications

Create a series of notifications that seem like a scam from a website:

"I just want to contact you about your cars extended warranty".

​You should have 5 notifications

Creating a Button

Lets create a button that changes some HTML

First create an HTML page

and type the following

<button> Click Me </button>

Add these two properties to the button
type="button" onClick="sayHi()"

What we want to do is make the button alert the user with a message when they click onto it.

Under the Script tags type the following:
function sayHi() {
    
}

Within that function alert the user with a message that says "hi"
Task: Create a second button that says bye to the user when clicked.

Brief: Create 5 buttons

Create 5 buttons that either insult you are compliment you.

Variables Recap

Variables are used to store data from the user,

In JavaScript we will be using 3 differing types:
  • Boolean (true/false) :
         let isGreen = true
  • Number:
        let price = 5.23;
  • String (Text)
        let firstName = "steve";

We can use a prompt to ask the user for a string

let firstName = prompt("what is your Name?");

Task: Use and manipulate variables.

1.) Ask the user two questions,
   - What is your Name?
   - What is your age?
2.) Change their name to upper case
(use toUpper).
3.) You will need to use the Number() command to convert the answer into a number.
4.) Add 5 to their age store in a new variable
5.) minus 5 from their age, store in a new variable
6.) Using the 4 different variables alert the user with a statement like this:

`Hi ${firstName} you are currently ${age} years old. In 5 years you will be ${newAge} years old. 5 years ago you were ${oldAge} years old.`

Brief: Calculator

Create two buttons one called "minus" and the other called "add"

When clicked both buttons will ask you for 2 numbers and then either add them together or minus them from each other.
Bonus: ​Do multiply and divide also.

Variable Error Checking

Capitals matter in JavaScript

for example sayhi() and sayHi() are recognized as different functions

let x = 5
let X = 10

both x variables are recognized as different.

In JavaScript it is recommended that if you are combining two words together you  make sure that any future words are capitalized.

e.g. newPrice, sayHi, howIsItGoing

Task: Fix the Bugs

1.) Download the HTML file linked below
2.) Fix the Incorrect Capitalization
3.) Fix the spelling errors
4.) Fix the syntax errors (missing ; { or })
errorslet.zip
File Size: 0 kb
File Type: zip
Download File
Hints: code should look like this:

prompt("what is your age");

function sayHi {
  alert("hi");
}

Right clicking and inspecting element can give you helpful error codes.

If Statements

We are now going to create an app that checks to see if you are old enough to play GTA using IF STATEMENTS!!!!

If statements are used to take action depending on what was entered.

For example if you are a member of the countdown card club thingi, prices might be cheaper.

An if statement looks like this:

password = prompt("what is the password?");
   if (password == "weetbix") {
        alert("Yes");
    } else if (password == "fruitloops") {
       alert("that was your last password");
    }  else {
        alert("yeah nah");
    }

We can also use this command isNaN() in order to tell if something is or is not a number.

if(isNaN(age) {
  alert("please enter an actual number!");
}

Task: Using the flowchart on the right check to see if someone is either too old or too young to play GTA V.


Additional information on isNaN

Task: Using a similar process create a password app that asks for the correct user name and password to continue.

Use the && to make sure they have entered both correctly
if they enter one correctly tell them (use ||)

Brief: Rank the names

Ask for a name.

Give 3 names an individual statement
“i.e. Steve is the name of a stupid person”

Anyone else say
“Meh”

If they don’t enter a name berate them.

Code Sandwiches

So by now you would have noticed the Symbols { and } come up a lot.

These symbols are essiential and you need to make sure you get them in the right place.

For Example compare these two programs:

 if (password == "help") {
  alert("The secret is cheese");
} 
if (password == "help") {}
  alert("The secret is cheese");

Question: What is the difference between each program, what is each one going to do?

Also consider these two programs

 if (password == "help")
  alert("The secret is cheese");
}
 if (password == "help") {
  alert("The secret is cheese");

Both of these programs would not work, in fact the whole program would not do anything. Why? What is wrong with them.

Code Sandwiches

Using the concept of a code sandwich

You must have a top bun that look like this:
if (guess != 22) {

And a bottom bun that looks like this:
}

The content all goes in the middle

Keep in mind you can have a sandwich inside a sandwich!
Activity: Download file and solve the problems with all the programs
activities_bug_finding_if_statements.zip
File Size: 2 kb
File Type: zip
Download File

While Loops

While loops are exactly like if statements except you can't use else.

While loops will keep on working until you hit the value to make it stop.

While loops look like this:
let answer = 0;
while (answer != 7) {
 answer = prompt("what is the answer?");
}
alert("you got the right answer");

Task: Make an app that will keep on asking you for the password until you get it right.

If the user hits cancel it should stop the loop
A.) Add "&& answer == null" to the while loop condition.
B.) Add an if statement so that if the user hit cancel then it runs the command "break;

Brief: While Loop Game

Create a button that links to a function called Guessing Game.
Ask the user for some points. Only allow them to enter a number between 1-7.
Keep asking if they do not enter a number between these two.

Every time they enter a correct number add it to their score.

Have a score limit, lets say 28

If the score goes over that number, reset their score and tell them to try again.

If they hit cancel at any time end the program. Use Return to end the function

Code Formatting

What is Better? What does each program do?
function funApp () {
  let a = 4;
  let b = prompt("how many sheep do you own?");

  if (isNaN(b)) {
    alert("Enter a Number!");
  } else if(b <= 0){
    alert("You are too poor to own sheep");
  } else if ( b > 1000000) {
    alert("You have too many sheep");
  } else {
    var c = a * b;
    alert("you have " + c + " sheep legs");
  }
}
function answerCheck() {let a=2;let b=prompt("How Many Kids do you have?");if(isNaN(b)){alert("Enter a Number!");}else if(b<=0){alert("Well Hurry up then!");}else if(b>40){alert("You have too many kids");
}else{var c=a*b;alert("you have access "+c+" spare kidneys");}}
Task: Format the code
1.) Read through the code and try to figure out what each lot of code does.
a.) Which is easier to read?
b.) Why?
2.) Create an HTML file with 2 buttons that call each code. Do they both function?
3.) Read through the standards found on this website
4.) Format the unformatted code as per the standards.
5.) Once you have completed it, ask yourself why it is important to format code correctly, check your formatting with your neighbors, is it different? if so who is wrong and who is right?

For Loops

For loops are like while loops except they only work for a limited amount of times. While loops go forever.

For loops are especially useful when it comes to arrays, something you will need to learn about.

A for loop looks like this:
for (let i = 1; i < 5; i++) {
        alert(i)
 }

Task: Run the code above and see what happens.

Task: Create a for loop that counts from 10 down to 5
(alert the user)
hint you will need i--

Brief: For Loop Gimmie 5;

Create a button called Gimmie five
​It should ask how many five's you would like to receive
Then using a for loop, for each five it will say:

"I have given you 1 five, that is 5"
...
...
"I have given you 4 fives that is 20" 

​etc.

Code Commenting

One of the requirements for NCEA is that you annotate your code with comments.

For Merit you will need to annotate very well. (functional and behavioral comments).

In order to write a single line of code comments we use //
Notice that it grays out the line.

In order to write a whole bunch of comments we use /* and */
Task: Comment your previous work
1.) Open up your the previous exercise
2.) Add /* */ comments to describe what each function does and why it does it
3.) add // comments to describe what each 1-3 lines of code state

4.) Check your code comments with someone else, have you done enough?

5.) Get the teacher to check and sign you off.
Why is it important?

In the corporate world you are normally not programming by yourself. You usually work with others.

Assassins creed IV had over 1000 people working on it, a good chunk would have been programmers. They have to look over each others code constantly.

In order to understand what they have written, code comments can help aid everyone else.

Final Task - Name Checker

Task: Create a name validator
Combing all the skills you have learned, create a program that checks as to whether someones name is valid based of these five specifications:
  • The name cannot be below 3 characters
  • The name cannot be above 16 characters
  • If the name is wrong the program needs to keep asking
  • You need to enter 3 valid names for the program to be complete
  • If the use hits cancel it should stop the entire app.

You will need:
  1. A variable to store the name
  2. A for loop to ask for 3 valid names.
  3. A while loop inside the for loop to keep asking for a valid name.
  4. An if statement, if they hit cancel it stops the program
  5. Code commenting and correct code formatting.