Select Lesson
Coordinates
5 mins
Uses for coordinates
5 mins
Drawing graphics back to back activity
20 mins
Lesson 1. Coordinates Grid
15 mins
Tangram paper activity
15 mins
Sequence Grid Challenge Lesson 1. 1
15 mins
Battleships
10 mins
Robot Cup Stacking
20 mins
Sequences
5 mins
Write a sequence list
5 mins
Alert—alert('')
, new-line—\n
and commenting—//
5 mins
Lesson 2. Commands Grid
2 hrs
Lesson 3. Alert command
2 hrs
Moving robots
5 mins
Lesson 4. Robot challenge
2 hrs
Intro to Coding 1 Lesson 1. Intro to Coding 1
15 mins
Alerts Quiz
What are variables?
5 mins
Naming variables
5 mins
Datatypes and how to convert them (extra content)
5 mins
Constants
5 mins
Substitution age = whatever
5 mins
Silent Varia-ball
20 mins
Concatenation—joining messages
5 mins
Prompt
5 mins
Lesson 5. Variables Grid
2 hrs
Lesson 6. Variables & prompts
2 hrs
Intro to Coding 1 Lesson 1. Intro to Coding 1
15 mins
Ada Says
20 mins
If statements—if(true){}
5 mins
True
and False
5 mins
Lesson 7. If Statement Grid
2 hrs
Lesson 8. If statements
2 hrs
Variables can change
5 mins
Lesson 9. Increment Grid
2 hrs
Lesson 10. Number variables
2 hrs
Maths Quiz
JavaScript Intro
IntroCoordinates
5 mins
Uses for coordinates
5 mins
Drawing graphics back to back activity
20 mins
Lesson 1. Coordinates Grid
15 mins
Tangram paper activity
15 mins
Sequence Grid Challenge Lesson 1. 1
15 mins
Battleships
10 mins
Robot Cup Stacking
20 mins
Sequences
5 mins
Write a sequence list
5 mins
Alert—alert('')
, new-line—\n
and commenting—//
5 mins
Lesson 2. Commands Grid
2 hrs
Lesson 3. Alert command
2 hrs
Moving robots
5 mins
Lesson 4. Robot challenge
2 hrs
Intro to Coding 1 Lesson 1. Intro to Coding 1
15 mins
Alerts Quiz
What are variables?
5 mins
Naming variables
5 mins
Datatypes and how to convert them (extra content)
5 mins
Constants
5 mins
Substitution age = whatever
5 mins
Silent Varia-ball
20 mins
Concatenation—joining messages
5 mins
Prompt
5 mins
Lesson 5. Variables Grid
2 hrs
Lesson 6. Variables & prompts
2 hrs
Intro to Coding 1 Lesson 1. Intro to Coding 1
15 mins
Ada Says
20 mins
If statements—if(true){}
5 mins
True
and False
5 mins
Lesson 7. If Statement Grid
2 hrs
Lesson 8. If statements
2 hrs
Variables can change
5 mins
Lesson 9. Increment Grid
2 hrs
Lesson 10. Number variables
2 hrs
Maths Quiz
55 mins
Coordinates
Coordinates use a grid system and numbers to find locations easily. Usually, they use a group of numbers that indicate the horizontal and vertical position of a point.
Concepts
Coordinates
Coordinates are pairs of numbers, like (3,4). They help you find places on a grid.
The first number tells you the horizontal position of a point, it tells to you go across the x axis until you hit the number 3.
The second number tells you the vertical position of a point, it tells to you go down the y axis until you hit the number 4.
Coordinates are used in both mathematics and computer science, (as well as in geography, archeology, criminology, the army, and many other areas). But they are used in different ways.
Math uses an axis with 0, 0 in the middle, and counts across and up. Up from 0 are positive numbers on the y axis and when you count down from 0 you have negative numbers. The same is true for left and right. Left of 0 are negative numbers and right of 0 are positive numbers. The coordinates (0,0) or (3,4) give the location of a point. (shown in the image as the points where 2 lines cross)
Computer grids model a computer screen, which is made up of thousands of little squares called pixels.
You can't have negative pixels, so 0,0 starts in the top left corner of your screen.
When given computer coordinates you count across the x axis from left to right, just like reading a book and then down the y axis. The coordinates (0,0) or (3,4) point to a specific pixel. (shown in the image above as a square)
Imagine the above example is very [[zoomed in- pixels are tiny]]
The CA course Food Frenzy→ uses a grid to place game objects. You can change the numbers in the coordinates to change the location of the object.
Concepts
Uses for coordinates
Coordinates on a grid are really useful for mapping. It makes it easy to share directions, find out the distance of one place to another and decide how to use space.
GPS
A really large scale use of coordinates is the G.P.S, or global positioning system. GPS uses a triangulation of satellites to find your location and then overlays it onto a world-wide grid using longitude and latitude coordinates.
The world is broken into 360 slices vertically (north to south pole) and 180 rings horizontally (equator).
Each degree can be broken into 60 minutes ('). Each minute can be divided into 60 seconds (''). The Code Avengers head-quarters in New Zealand has the coordinates (37° 47' 39.60'' S, 175° 13' 59.08'' E), which is 37 degrees, 47 minutes and 39.60 seconds south of the equator and 175 degrees, 13 minutes and 59.08 seconds east of Greenwich, England. These coordinates are long and complicated, lets look at an easier example on a smaller scale.
Treasure hunt
On a much smaller scale, treasure hunts and scientific digs use grids and coordinates to track their findings.
You create your own grid of squares over a section of land .
We have a treasure hunt for buried coins on the beach.
We have a map with the treasure marked but we can't be sure where we have it buried. If we make a grid on the beach out of string and draw a matching grid on our map. Suddenly, it becomes much easier to use our map to find the hidden coins.
Activity
Drawing graphics back to back activity
This is a drawing activity on paper that is done in pairs. Learn about coordinates, grids, and being how those techniques help you to be precise. This activity is suitable for 8 year olds and up.
Objective
This pair-activity helps students to learn to give and follow precise instructions in order to draw simple graphics and demonstrate the precision of coordinates.
Background
All complex computer graphics start with instructing the computer to draw basic shapes at precise locations.
Coordinates
Learners should use coordinates to help them explain how to draw the pictures.
Coordinates are pairs of numbers, like (3,4). They help you find places on a grid.
The first number tells you the horizontal position of a point, it tells to you go across the x axis until you hit the number 3.
The second number tells you the vertical position of a point, it tells to you go down the y axis until you hit the number 4.
Below you can see the position of the coordinates (3,4).
Preparation
- Print off enough worksheets for each pair to have a copy.
- You can print 2 A4 pages or, to save paper, you can print of 1 A4 page that you will need to cut in half.
Instructions
Intro: Freehand Drawing (optional, extra 5 min)
All learners, either on a blank piece of paper (with no grids) or online on this blank drawing canvas at /javascript/94, will try to draw a simple picture that the instructor will make up and call out.
Example dialog:
- In the top left of the page draw a circle,
- In the middle of your page draw two squares stacked on top of each other.
- Add a bigger triangle on top.
- Add a small circle inside the top square, in the top right corner.
- Draw a long rectangle inside the bottom square, attached to the bottom.
- Add two lines to the bottom of the bottom square, going off the page.
The instructions create a very simple house
Get learners to compare their results- are they identical?
Is everything the same size and in the same place?
If not discuss why not.
Activity:
- Players will be in pairs, sitting back to back.
- Decide who is Player 1 and who is Player 2.
- Explain that the players are drawing images from instructions and these images have to be accurate.
There will be two rounds.
Round 1:
Player 1 will call instructions and Player 2 will draw.
Round 2
Then, Player 2 will call instructions and Player 1 will draw.
- Give Player 1 the Player 1 page and Player 2 the Player 2 page. They must not see each others page.
- To start, those with "Instruct 1" in the first grid are Player 1 and they will give clear instructions to Player 2 to draw image one.
For example;- "Player 2, in the DRAW 1 grid, draw shape A in the square (4, 0)."
- "Draw shape F in the bottom right corner of (1, 3)."
- Once the pair completes the 1st shape, they can swap roles. (Don't look yet!)
- Player 2 describing "Instruct 2" and Player 1 drawing in "Draw 2".
- Compare drawings.
- Ask questions about what happened and what worked/didn't work.
Was it more accurate than the house drawing in the intro?
Versions:
- Easy: Player 1 can tell Player 2 what the picture is of. You could also print a few copies of the bottom row of shapes and students can paste them rather than draw them.
- Medium: Students can only give instructions, not say what the image is.
- Hard: Cut off the shape directory at the bottom of the page and players must describe the shapes along with their sizes and orientations.
Answers
Find the answers here
JavaScript Intro Lesson
Lesson 1. Coordinates Grid
Activity
Tangram paper activity
A tangram is a puzzle that uses small, often brightly colored, wooden blocks to form different shapes. Here we will use coordinates to draw those small block shapes and create a picture.
This worksheet may be completed individually or in pairs and is suitable for ages 9 and up.
Objective
Draw, individually or in pairs, basic shapes by connecting points described by coordinates.
Background
A tangram is a Japanese game that uses regular shapes, like squares and triangles, to make larger shapes.
We can make those squares and triangles by marking down coordinates and connecting them together.
That is how computers can draw shapes, by using coordinates to draw lines on your screen.
Coordinates
Coordinates are pairs of numbers, like (5, 1). They help you find places on a grid.
The first number tells you the horizontal position of a point, it tells to you go across the x axis until you hit the number 5.
The second number tells you the vertical position of a point, it tells to you go down the y axis until you hit the number 1. (across, down)
In the image you can see the position of the coordinates (1, 1), (5, 1), (5, 5) that have been joined together to form a triangle.
Preparation
These puzzles are available in a print version or online.
- Print version: Tangrams Worksheet. Use a sheet per person or in a pair
- Online version: Tangrams online project - JavaScript 102
Requirements: Worksheet, pencil and ruler or a computer with Internet access
Optional: Colored pencils
This can be an individual or pair exercise.
Instructions
Drawing:
Place and connect the coordinates on the grid to make a shape:
- Read the first coordinate and find it on the grid
- Mark the first coordinate on the first grid with a small dot or x
- Read the second coordinate and find it on the grid
- Mark the second coordinate with a small dot or x
- Use the ruler to draw line between them.
- Find and mark the next coordinate
- Use a ruler to connect the second and third coordinates.
- Repeat for all coordinates in one shape.
- To complete the shape, connect the final coordinate with the first coordinate with a ruled line.
- Optional: Draw lightly in pencil and when all shapes are drawn, color the shapes in.
Online:
Click each coordinate on the grid to make a shape:
- Read the first coordinate and find it on the grid
- Click on the grid at the first coordinate to start drawing a line from that spot
- Read the second coordinate and find it on the grid
- Click on the grid at the second coordinate to make a line
- Find the third coordinate and click to make a second line
- Repeat with all the coordinates
- Select the first coordinate again to complete the shape
- Repeat process with next shape, if there is one
- Click the CHECK button (tick) to see if you are right
- Click the NEXT button (arrow) to go to the next puzzle
- Click the RESET button (circular arrow) to restart the puzzle
Example of dialog
To draw shape 1 in the first grid. (5, 2), (9, 6), (5, 10), and (1, 6):
- (5, 2)... Go across the grid to number 5, then go down the number 2. Make a mark where those lines meet.
- (9, 6)... Go across the grid to number 9, then go down the number 6. Make a mark where those lines meet.
- Rule a line between the two points.
- (5, 10)... Go across the grid to number 5, then go down the number 10. Make a mark where those lines meet.
- Rule a line between the two points, (9, 6) and (5, 10).
- (1, 6)... Go across the grid to number 1, then go down the number 6. Make a mark where those lines meet.
- Rule a line between the two points, (5, 10) and (1, 6).
- Rule a line between the two points, (1, 6) and (5, 2).
Variation
Easy: Let players refer to the answer sheet and see the shapes.
Medium: Tell players the rough shapes they are drawing, or let them see the answers before drawing.
Hard: Give no hint to the answer as players work through the instructions
Answers
Click here to see the tangram answers
JavaScript Intro Project
Sequence Grid Challenge Lesson 1. 1
Here is a practice project to prepare for the next lesson on sequences.
Extension: Activity
Battleships
If you have done everything else and want to practice using coordinates, here is a battleships game you could play. Battleship game
The game, Battleships uses coordinates to communicate where players are firing their shells. See the battleship game here. You can see how the ships align to the grid. To play you call a set of coordinates to check if your opponent has ships there. (D,5) means you go across to the column D and then down to row 5.
60 mins
1: Sequences
Sequences are lists that are in order. Things in a sequence have to be done one before the other in steps. Recipes are a good example of sequence.
Activity
1.1: Robot Cup Stacking
This is a fun physical team activity. This is suitable for ages 5 to 15 and is best in groups of 2 to 4.
Objective
Learn how to give precise instructions to make a robot/computer complete a task.
This game builds skills in thinking, relating to others, collaboration, communication and managing yourself in a team.
Background
Computers require clear exact instructions in the correct sequence to complete even simple tasks.
Sequences
A sequence is just a fancy name for a list that must be followed in order.
The computer needs to be told what to do in precise order.
Every step needs to be carefully written and in the proper order.
The most common example of sequence is writing a recipe.
In a recipe you complete each instruction before moving onto the next one and changing the order may change the results.
For example, you will have a very different cake if you added egg to the cake after baking it, instead of before baking it.
Preparation
Split your group into two or more teams.
Each team will need:
- 10 or 15 plastic or paper cups,
- a flat surface (table is good) and
- a blindfold
Instructions
Split your group into two or more teams.
Each team needs two or more people in it (max 8 but less is better).
A blindfolded team member takes the role of the robot.
The other team members are programmers and instruct the "robot" to move one cup at a time, with the goal of stacking all 10 or 15 cups in a pyramid.
One programmer is the safety officer. They must make sure the robot doesn't fall or get damaged.
You are groups of programmers competing in a pyramid stacking competition.
- Place the cups face down on the table.
- By giving verbal instructions your blind robot, you must stack cups into the shape of pyramid.
- Programmers must not touch the cups, unless the cups move out of reach of the robot or collapse on top of another cup and they need to be separated.
- If the pyramid falls, keep trying.
- When complete, quickly swap roles and pull down the pyramid so another player can be the blindfolded robot.
- First team to complete the pyramid of the last robot wins.
With a few teams it can become a challenging race.
Versions:
- Very Easy: Stack 10 cups with 2 hands
- Easy: Stack 15 cups with 2 hands
- Medium: Stack 15 cups with 1 hand only
- Hard: Stack 15 cups and have one person in the team give good advice and others give bad advice. This makes it more of a trust exercise than an algorithmic one.
Variation - Maze
This is an more active version of the game, and can be turned into a trust exercise if you wish.
Use furniture and objects around you to create a maze that the blind folded robots have to navigate.
The team members could write the code (instructions) before hand, test the code (run the robot through the maze) and then debug (fix anything that didn't work well)
The learning intention here is that basic code is run in a sequence and that you need to test and correct your code for it to work properly.
Concepts
1.2: Sequences
A sequence is just a fancy name for a list of instructions that must be followed in order.
Sequence is one of the three basic logic structures in computer programming. The other two logic structures are selection and loop.
Here is a very basic rundown of the three, you will learn more about each logic structure later:
- sequences happen in order; each line of code is executed in order, starting at the top of the page and ending at the bottom.
- selections will run one bit of code if it meets the required conditions (For example, while driving if the traffic light is green you go, otherwise you stop)
- loops (or iterations) repeat their code over and over again
Activity
1.3: Write a sequence list
Let's practice writing a sequence.
How did you get ready for your day today?
Write a list that covers your first few hours of a standard morning for you.
Start with waking up and use about 8 steps
Example list of my morning sequence
- Woke up
- Got out of bed
- Made bed
- Had a shower
- Put on clothes
- Made breakfast
- Ate breakfast
- Made lunch
- Packed bag
- Walked to work.
The most basic way to do things in coding is in sequence, one thing after the other, however the order is important. You can't skip steps or mix them up and still get the same result. If you want to message someone and say hello with their name, we have to first ask their name, store it and send it out. You can't send out a message with their name if you don't have the name stored.
Try lesson 3 of our programming languages course.
Concepts
1.4: Alert—alert('')
, new-line—\n
and commenting—//
Alert
An alert
is a JavaScript command that pops open a box with a message in it.
alert('Hello everyone')
It is usually used to give the user a reply or some information.
Messages always need to be in quote marks to make them strings of text.
" " or ' '
Commenting
//
, two of these forward-slashes will create a comment in the code that won't show on your webpage. The computer will ignore them so use them to label and leave messages for yourself and for other coders who might use your code, or to block out (hide) code you don't want the computer to run but that you don't want to delete either. You can use /*
and */
together to comment out (hide) code as well. /*hidden code*/
//This is a comment, used to explain code to other programmers
//a pop up to greet people
alert("Hello everyone,")
/*Don't delete, I will add this code in later
var time = 5
alert('The time is' + time)*/
alert("Welcome to the zone.")
Text on multiple lines \n
newline
When we are writing in code hitting ENTER
does not make text start on a new line.
So if you want to start a new line you have to use \n
(backslash not forward-slash).
Keyboards
There are two types of keyboards with the Latin Alphabet that you might have; a US (American) keyboard or a UK (British) keyboard. They have similar characters and symbols but they have a slightly different layout. Below we have highlights where to find the forward / and backward \ slashes.
JavaScript Intro Lesson
1.5: Lesson 2. Commands Grid
JavaScript Intro Lesson
1.6: Lesson 3. Alert command
Extension: Concepts
1.7: Moving robots
Computers needs to be told what to do with clear, step-by-step instructions.
In JavaScript, we give our instructions sensible names like MoveForward( )
instead of something like DoTheThing( )
, which would confuse anyone else looking at your code.
We are trying to move a robot down a path. It will only move one slab at a time. We have created some commands for it, it can move forward()
and move backward()
and turn 90 degrees right()
or turn 90 degrees left()
.
We have to tell the robot we want it to move by calling it by name. We say "robot, move forward" or robot.forward()
In the brackets we can repeat the instructions.
So if we want to go forward 3 squares we can write:
MoveForward( )
MoveForward( )
MoveForward( )
OR, more simply, we can write:
MoveForward(3)
We have a robot challenge below that is a lot of fun. The objective is to write instructions to the robot to move it to the red square. The more efficient the code the better, that means try to take the best path.
My code won't work elsewhere?
You can't just jump on any code editor and type in robot.forward()
and expect a robot to appear and move forward.
We have a bit of code in the background that sets the robot up for us so that you can learn the fun basics first.
We will explain more about how you can make the code yourself in the later courses, when you have learned a little more.
JavaScript Intro Lesson
1.8: Lesson 4. Robot challenge
If you have time complete lesson 4 and move the robot.
JavaScript 1 Project
1.9: Intro to Coding 1 Lesson 1. Intro to Coding 1
We have another project on sequences here, to be sure you have the concept...
60 mins
2: Variables and Prompts
Variables are items (data items) that store information . Prompts are lines of code that can ask the user questions (get input).
Code Avengers Quiz
2.1: Alerts Quiz
Concepts
2.2: What are variables?
Variables are items in your code that hold information.
Think of a variable as a box that can store information.
Your computer can store millions of these boxes, or variables, in it's memory.
Each box can store lots of different types of information, such as text and numbers. This information, or data, can be changed/updated/deleted and this makes variables very flexible.
Declaring and assigning variables
To make or declare a variable, it needs a name (a label on the box) and it is assigned (=) a value (what is in the box).
You also need to use the keyword var
the first time you use the variable.
//We declare that the variable named "age" exists
var age;
//We assign it the number 14
var age = 14;
//Let's declare a second variable named "name" and assign it the string of text "Fred"
var name = "Fred";
Reusing variables
Once a variable has been declared and assigned we can use the name over and over again.
var age = 3;
alert("My age is " + age);
alert (age + age + age);
age += 2;
alert("In two years my age will be " + age);
var doubleAge = age + age;
alert(doubleAge);
In our code above we have written only two numbers but here are the alerts we have made:
Alert 1: My age is 3
Alert 2: 9
Alert 3: In two years my age will be 5
Alert 4: 10
What has happened?
- The above code creates a variable called age and assigns it the number 3.
- Then it pops up an alert displaying the variable, "My age is 3".
- Another alert shows the added up the value of the three ages, 9.
- We change the variable to the variable + 2
- And display the new value that is in the variable, (age is holding the number 5 now).
- Finally, we have declared a new variable, which is double the variable age
- (doubleAge is holding the number 10).
But what do we use variables for?
- We use variables to make our program easy to modify in the future. (Especially when the same number is used to mean different things.)
- It makes your program easier to read than having numbers everywhere.
Here are some examples of how we use variables:
- We use them to store answers to questions we ask our users.
var age = prompt("How old are you?");
- We use them in equations,
age*2;
- We can use them as counters that go up by one each time the program is run (more on this and loops in JavaScript level 1)
age ++;
- We use them in equations,
- We can even use them to write interactive poetry and stories
var red = prompt('Name something red, (in plural)');
var blue = prompt('Name something blue, (in plural)');
alert(red + " are red, \n" blue + " are blue,\n you wrote this poem,\n just for you");
An example of easy modification;
It is better to write equations using variables because you can easily change them. For example, if you are writing a program to find the area of a rectangle it would be better to write:
var width = 40
than
var length = 56
var area = width * length
alert("The area is " + area + "m sq")var area = 40 * 56
alert("The area is " + area + "m sq")
It may seem like more work but it is much tidier. Also, as your code becomes more complex you might use width
in a lot of places. When you use a value instead of a variable, that is called hard-coding and can be a lot of work. If you use a number like 40
in all the places you are using width instead of using a variable, it can be very annoying to go back and change when you find out that the width was actually 36.9
, or you want to use the same program for finding the area of a different rectangle and you have to change your whole program. In the first example you can just change the number once and it will work fine.
Concepts
2.3: Naming variables
Each programming language you learn will have it's own conventions for naming variables. All variables should be long enough to be descriptive and not have any spaces. Most languages do not let you start with numbers or symbols, except $
and _
. There are some words that you can't use because they are reserved, like the keywords that we use in JavaScript.
Some examples of illegal names in JavaScript:
var var
var #time
var alert
var 91210
var *hi*
JavaScript uses lowerCamelCase to name variables. This means that the first word is in lowercase, then if you have more words you capitalize the following words to make it easy to read, (remember you are not allowed spaces). lowerCamelCase
is called that because the capitalization looks like a camel's humped back.
Here are some examples of lowerCamelCase
(Sometimes just called camelCase or mixedCase)
var lastName =
var thisIsTheRealLife =
var gameOfThrones =
var codeAvengers =
There are many other ways of writing names but below are three other common ways.
- UpperCamelCamel, where all the words are run together and capitalised:
(LastName
ThisIsTheRealLife
GameOfThrones
CodeAvengers
)
- lower_case_with_underscores, where everything is lower case and words are separated with underscores instead of spaces:
(last_name
this_is_the_real_life
game_of_thrones
code_avengers
)
Python conventionally prefers this way for writing basic variable names.
- lower_case_with_underscores, where everything is lower case and words are separated with underscores instead of spaces:
- ALL_UPPER_CASE_WITH_UNDERSCORES, where all letters are capitalized and the words broken up by underscore.
(PI
ADULT_AGE
FINGERS_ON_2_HANDS
)
Constants are written like this.
_
, not a number or symbol. Avoid using lowercase o,l, (oh, el), numbers zero, one, (0,1), or uppercase I (iy) to start names, as they are easily confused.
You don't have to use all lowercase or CamelCase. But it is good practice to follow the conventions of the programming language you are learning.
A convention is "the way it is done." For example, grading students work at school is conventionally done in red or green pen.
Be consistent, pick one way of naming variables and use only that way.Concepts
2.4: Datatypes and how to convert them (extra content)
Section
Variables can hold a lot of different types of data.
In programming, data types is an important concept.
To be able to use variables properly, it is important to know something about the type of data that is inside the variable.
datatype
Common types of data | Explanation | Example |
string | This represents text (including spaces, symbols and even numbers). Strings are enclosed in quotation marks " " or ' '
| var text = "Strings4life" or var text = 'Strings for the masses, #2all'
|
boolean | A boolean variable can only have two value: true or false | var lightOn = true; or var lightOn = false;
|
number | These are numbers, (surprise!), they can be written with or without decimals. | var year = 1920 or var money = 32.00
|
There are other datatypes that you will learn about later.
In Python, a decimal is called a floating point datatype (float), 3.00
, and a whole number is called an integer (int),3
.
When you ask for an input, they are automatically strings.
We can see that by testing the output
var test = prompt('Enter a number')//2
console.log(test + 3) //will output 23
console.log(2 + 3)// will output 5
You can practise this with JavaScript 1.9 Joining Strings And Numbers With +
String to number
To make sure we have the number datatype we add Number()
around the prompt (or around variable we want to use as a number)
var test = Number(prompt('Enter a number'));//2
console.log(test + 3);// will output 5
console.log(2 + 3);// will output 5
JavaScript 1.28 Lesson on Number() Weekly wage calculator
Null
If you run a prompt and the user clicks cancel the variable is set to null: a special value that means nothing or no value.
The code if (variable == null) checks if the user clicked cancel. No quotes are needed around null.
var test = prompt("What is your favourite number?")
if (test == null){//Don't want to use while so that people can escape the program when they click cancel.
test = prompt("Please answer: What is your favourite number?")
if (test == null){
console.log("You cancelled the question")//Display a error message
}
}
NaN
JavaScript 1.32 Handle Both Valid And Invalid User Input
NaN
If the user enters a string that can't be a number- "one", "tree", "$2" etc it will output NaN (Not a number)
var test = Number(prompt('Enter a number'));//$2
console.log(test + 3);// will output NaN
console.log(2 + 3);// will output 5
How to loop isNan()
to stop non-numbers coming through
JavaScript 1.33 Using IsNaN And Number Functions
In a program when you want a number inputted you can create a loop to repeat the question until a valid number is put in.
var test = Number(prompt('Enter a number'))//Two
while (isNaN(test)){//while loop will keep going until test is a number and not a "NaN"
test = Number(prompt('Sorry that was not a number\n Please enter a number')) //Will repeat until a number is added, I.E. 2
}
console.log(test + 3)//will output 5
console.log(2 + 3)//will output 5
Remember that isNaN(null) and isNaN('') are all false, because null and '' are automatically converted to the number 0.
Boolean to number
Booleans can also be turned into numbers
var boolean = Number(true);
console.log(boolean)//will output 1var boolean = false;
console.log(Number(boolean));//will output 0
Number to string
Adding a number to a string will turn it into a string.
var test = prompt('Enter a number')//2 (string)
console.log(test + 3) //will output 23 (string)
console.log(2 + 3)// will output 5 (number)
The toString()
also method converts a number to a string. You can even choose the counting system you want (choose between 2 and 36).
var test = 13;
console.log(test.toString()); //"13" in decimal (default)
console.log(test.toString(2)); //"1101" in binary
console.log(test.toString(16)); //d in hexadecimal
Number Systems: 10, 2 and 16
The number systems we often use are 10, 2 and 16.
Decimal (10) is the counting system you learned at school.
You can count up to ten numbers before adding a new digit.
- Nine has 1 digit (9).
- Ten has 2 digits (1 and 0).
- One hundred and thirty four has 3 digits (1, 3 and 4)
- Ten has 2 digits (1 and 0).
binary
- Zero has 1 digit (0),
- One has 1 digit (1),
- Two and 2 digits (1 and 0),
- Three has 2 digits (1 and 2)
- Two and 2 digits (1 and 0),
- One has 1 digit (1),
- Four has 3 digits (100)
- One hundred and thirty four has 8 digits (1,0,0,0,0,1,1, and 0)
hexadecimal
- Two has 1 digit (2)
- Nine has 1 digit (9)
- Thirteen has 1 digit (d)
- Sixteen has 2 digits (1 and 0)
- One hundred and thirty four has 2 digits (8 and 6)
Table of examples
Number | Binary | Decimal | Hexadecimal |
base 2 - 01 | base 10 - 0123456789 | base 16 0123456789abcdef | |
Zero | 0 | 0 | 0 |
One | 1 | 1 | 1 |
Two | 10 | 2 | 2 |
Three | 11 | 3 | 3 |
Four | 100 | 4 | 4 |
Nine | 1001 | 9 | 9 |
Ten | 1010 | 10 | a |
Thirteen | 1101 | 13 | d |
Fifteen | 1111 | 15 | f |
Sixteen | 10000 | 16 | 10 |
Twenty three | 10111 | 23 | 17 |
One hundred and thirty four | 10000110 | 134 | 86 |
Concepts
2.5: Constants
Constant variables are variables that we label differently to show that they don't change, their value is constant.
Some real world examples of constants are Pi (ratio of a circle), C (the speed of light) , or the Golden Ratio (a 'perfect' way to divide things).
Here, constants are just variables that won't change in our program.
Let's say we are writing a program to calculate how much money a person has to spend on things. There are lots of variables: food costs will vary, fuel costs will vary, power costs will vary. But BASE_INCOME and RENT will be constant week to week.
We often show this by naming it differently to normal variables. We use UPPERCASE_UNDERSCORE traditionally to name constants.
var HOURS_IN_A_DAY = 24
var MONTHS_IN_A_YEAR = 12
var SECOND_IN_A_MINUTE = 60
var DOZEN = 12
var PAIR = 2
var PI = 3.14159265359
Example of constants in a program
Let's use our money example from above, written as code.
//all variables are in dollars per week
var BASE_INCOME = 300;
var extraIncome = 15;
var fuel = 70;
var food = 50;
//keyword name = value
var RENT = 100;
var income = BASE_INCOME + extraIncome;
var costs = RENT + fuel + food;
var spendingMoney = income - costs;
alert("You have $" + spendingMoney);
Concepts
2.6: Substitution age = whatever
You have seen some examples above of how variables work but if you are still not sure how the variable age could hold different information at different times like, the age of a person or the lyrics to "Somewhere over the Rainbow" or even a complex equation. Remember that age is just the name or label of our variable box, and we can put anything we want into the box.
We actually use variables and substitution all the time in real life.
Lets look at this symbol #
, called a hash or pound key.
This symbol can stand for a few things. See if you can read the sentences below aloud:
"We're #1, We're #1"
"When writing pounds, some USA businesses use 300lb and some use 300#."
"The next note we play on the piano is an F#"
"Have you seen Twitter? #viralwaytowritethis"
How many did you know?
Here we can see that the hash symbol can be substituted for the words number, pounds, sharp or used to mark a hash-tag.
//# is actually an illegal symbol to use in a name in JavaScript, but just pretend.
var # = "number";
alert("We're " + # + " 1, We're " + # + " 1");
# = "pounds";
alert("When writing down weights, some USA businesses use 300lb and some use 300" + #);
# = "sharp";
alert("The next note we play on the piano is an F" + #);
# = "hash-tag:";
alert("Have you seen Twitter? " + # + "viralwaytowritethis"
In exactly the same way as the #
can mean a different thing in each context, a variable named age
can mean whatever we assign to it.
var age = 12;
alert("You are" + age);
age = "cheese";
alert("Old milk is" + age);
age = "bronze";
alert("The" + age + "age began when humans started to mix tin and copper together.");
Activity
2.7: Silent Varia-ball
This is a physical game played in a group and is a variation on the game Silent Ball.
Objective
The aim of this physical activity is to practice the concept that variables are simply named boxes that hold information, and that this information can be changed.
Background
Variable are great, they make it very easy to personalize messages, change calculations and they are a big part of what makes a program work and be interactive.
We can ask the user for an input, save their answer in a variable, and then print the variable, giving a personalized message output.
In the examples below we have created a variable by writing a name. We have assigned, (=), it the answer to the question "What is your favorite color?". Then we add the answer variable to our own string, creating a message that the user can see.
In JavaScript a variable looks like this: | In Python a variable looks like this: |
var favColor = prompt("What is your favorite color?")
| fave_color = input("What is your favorite color?")
|
User input = Blue → output: "Blue? Oh, that's cool" |
Preparation
Requires:
- A ball (or other throw-able object i.e. pencil case)
- Sturdy chairs for standing on. (If no sturdy chairs are available have players stand in an unbalanced way i.e. on one foot.)
Basic Game Instructions
Silent ball is a game where players stand on their chairs (NOT swivel computer chairs!) and silently pass a ball to each other.
The game should naturally get faster as they proceed.
Each individual plays until they are out, then they sit down and watch the others compete.
Players are out of the game if they:
- Miss catching a throw (Drop the ball),
- Lose their balance,
- Fail to follow commands,
- Speak (unless that is part the challenge).
The leader adds in commands to make the game more difficult. Players must follow that command until another command is given.
Example commands:
- "Catch the ball one-handed"
- "Raise one hand above your head"
- "Stand on one foot"
- "Call the name if the person you are throwing to"
- "Stand on one foot, close one eye and when you catch the ball say 'arrr'"
The winner is the last one standing.
Varia-ball Variation:
All leader commands are written as variables on the board.
Ideas:
- x = clap before catching the ball,
- b = stand on one leg,
- a = keep one eye closed
- c = hot potato (you have to throw the ball as soon as you catch it because it is 'hot!')
Example commands:
- "Do X." -players must clap before catching the ball,
- "Now you have to do x and b.", -players clap and stand on one leg
- "Now try only c."- players must throw the ball as soon as they catch it.
Change the variables occasionally to show that they can change.
- x = click fingers before catching the ball.
You want the game to go quickly so that people can join back in.
Concepts
2.8: Concatenation—joining messages
As you can see from our previous examples, you can join numbers and sentences and variables. We use a +
to join them. This is called concatenating, a technical word for linking together in a chain or series.
Below let's link, or concatenate, two lines of a poem
var line1 = "Roses are red, "
var line2 = "Violets are blue, "
alert (line1 + line2)Roses are red, Violets are blue,
Adding +"\n"
will break up the lines (remember newline works in a string).
alert (line1 +"\n"+ line2)
The best part of concatenating variables is that we can change the message easily, without changing the whole programme.
var line1 = "Carrots are orange, "
var line2 = "Spinach is green, "
alert (line1 + "\n" + line2)
Concepts
2.9: Prompt
Example of prompt code: prompt('What is your age?')
The prompt code opens a box similar to an alert, the difference is that a prompt asks for input from the user (it has a place that users can write in).
We can use prompt code to ask questions for the quiz.
JavaScript Intro Lesson
2.10: Lesson 5. Variables Grid
JavaScript Intro Lesson
2.11: Lesson 6. Variables & prompts
JavaScript 1 Project
2.12: Intro to Coding 1 Lesson 1. Intro to Coding 1
60 mins
3: If statements (Selection)
If statements are sections of code that run only when certain conditions are met.
Activity
3.1: Ada Says
This is a group activity that is a variation on the game Simon Says→.
All the code below is pseudocode unless otherwise stated.
This is appropriate for ages 5+ and up.
Who is Ada?
Ada Lovelace was born over 200 years ago into the nobility of England. Her father, Lord Byron, was a famous celebrity poet with an unstable lifestyle and her mother raised her as a mathematician to try to make sure Ada would not be like her father. Her life is a very interesting one, involving scandals, successes and a sharp intelligence. She is most famous for her friendship and collaborations with Charles Babbage. She died young at the age of 36 of cancer.
Image: The plans for Babbage's Difference Engine
In 1822, a man named Charles Babbage created the plan for a calculator, a very clever and complicated machine called the Difference Engine→.
Despite being a very valuable tool for a range of disciplines that used hand written mathematical tables, it was never complete. This was because it cost too much, the technology of the current materials were not precise enough and Babbage lost focus and began to work on the Analytical Engine, which also didn't get built.
But his plans have made him hailed as the "Father of computers".
He gave a seminar, which was recorded in French. A friend of Babbage asked Ada to translate the recording. She did and added her own notes to the paper that was later published. In her notes she theorised that computers could do more than just calculate numbers and wrote the first algorithm for Babbages' Analytical Engine to calculate a sequence of Bernoulli numbers→
If you want to know a little more read our CA blog→ about Ada
There is many wonderful steam punk style comics out if you want to laugh and learn.
Check out Sydney Pauls' The Thrilling Adventures of Lovelace and Babbage→
You can also celebrate the women in STEM whose work you admire or discuss research into equality and diversity on Ada Lovelace day.
Ada Lovelace Day is held every year on the second Tuesday of October. If you want to know more check out http://findingada.com/→
Objective
The aim of this activity is to practice if statements and encourage activity and movement.
The goal of the game is to correctly act out what the robots would do when instructions are given
Background
Basic code is run one line after the other in a sequence.
But sometimes we don't want a line of code to run all the time, only at certain times.
We can use if statements to easily do this by saying "only if this is true run this code".
A brief rundown on if statements
If statements are an example of conditional coding.
if (the condition written in here is true) {
run this code;
}
The statements written inside the curly braces are only selected to run if the condition (the bit in the brackets) is true. If the condition is false we don't run the code.
The program checks if the condition is true or false. If it is true then the program will run the code.
if (light is off and it is dark) {
turn on light;
}
Here is a real code example for part of a simple guessing game:
JavaScript | Python |
var guess = prompt('Can you guess the number from 1 to 5?:');
| guess = int(input("Can you guess the number from 1 to 5?:"))
|
else if and else: | elif and else: |
var guess = prompt('Can you guess the number from 1 to 5?:');
| guess = int(input("Can you guess the number from 1 to 5?:"))
|
Above you can see that you can add else if
to add more conditions and add else
to run something if the conditions are false.
Preparation
You will need:
- A writing place that all participants can see, like a whiteboard, to write instructions.
- Marker pen and eraser.
- A little bit of space around the players for them to move.
Write on board:
if ("Ada Says" is said) {
then follow the instructions }
else {
stay still }
Instructions
The group stands up with a little space for each to move around. The players are robots that have if statements in their programming.
The instructor is Ada Lovelace, the author of the first computer program.
Ada gives spoken commands for the robots to follow.
- A command starting with the phrase: "Ada says", must be followed.
- A command without the phrase: "Ada says", should not be performed.
Anyone who breaks one of these two rules is out of the game.
Ada can issue her commands faster or be repetitive to make the game harder.
Example Dialouge
Ada: "Ada says Arms up."
# Robots put arms up
Ada: "Ada says Arms down."
# Robots puts arms down
Ada: "Arms up."
# Robots remain still- Arms should remain down
Anyone who moves to put their arms up is out, because "Ada says" was not said.
Easy: Play this basic version of the game.
Medium: Add one of the following variations: "Else if statements" or "Embedded if statements" or ""Ada invariably says"
Hard: Add ALL the variations together in a Spaghetti Code
Elimination recap:
- Do the new action when "Ada says" was not said,
- Do not do the new action when "Ada says" was said,
- If they get the action wrong E.G. "Ada says: raise your right hand" and they raise their left.
The winner is the last robot standing or Ada, if all players are out.
Variations:
1. Else if statements
You can add more if statements or else if statements to make this harder.
if (Ada says){
follow instruction;
}
else if (Turing says){
do the opposite of the instruction (raise left hand, crouch rather than jump, spin in opposite direction);
}
else{
stay still;
}
2. Embedded if statements
Add conditions based on the people playing
if (Ada says){
if (you are condition){
do this;
}else {
spin clockwise;
}
}
else{
stay still
}
So "Ada say" is said and based on your condition follow either direction.
Ada: "Ada says if you are a boy jump"
#Boys jump
Others spin clockwise
- Ada:"Ada says wave hand"
#Robots spin clockwise
- Ada: "Ada says if your elbows are showing clap"
#Elbow baring robots clap,
Other robots spin clockwise"
- Ada:Spinclock wise
#Robots stay still
- Ada:Spinclock wise
- Ada: "Ada says if your elbows are showing clap"
People who are out can help call out others.
3. "Ada invariably says"
Write some variables on the board.
For example:
var x = clap
var b = stand on one foot
var 1 = jump var 2 = crouch
and play "Ada Says"
Ada will call out variables rather than (or as well as) full instructions:
Ada: "Ada says x"
#Robots clap
Ada:"Ada says wave hand"
#Robots wave
Ada: "Change to B"
#One robot stands on one foot and is out because Ada didn't say "Ada says."
Spaghetti Code Variation (HARDCORE MODE)
Throw together all the variations written above to create the most complicated game of "Simon says" ever played!
Write this (or something like this) on the board:
var a = jump (opposite is crouch)
var b = clap (opposite is stomp)
var c = raise right hand (opposite is raise left hand)
var 1 = right foot (stand on right foot only (opposite stand on left foot only))
var 2 = spin clockwise (opposite spin anticlockwise)
var 3 = pat head, rub circles on stomach (opposite rub circles on head pat stomach)
if (Ada says a letter){
if (you are wearing glasses){
do variable letterCalled;
}else {
"b";
}
}
else if (Turing says {
do opposite of action;
}
else{
remain still;
}
Whoa, that is a lot. And you can change it up as you like by replacing variables. You can even change the final else from "remain still" to clap or something.
Here is an example dialogue:
Ada: "Ada says 'a' "
#Robots with glasses jump
Other robots clap
Ada: "Ada says '1'
# Robots remain still
Ada: "Ada says jump"
# Robots remain still
Ada:"Turing says a"
#Robots crouch
Ada: "Turing says stand on right foot"
#Robots stand on left leg"
Ada: "Turada says jump"
#Robots remain still
Concepts
3.2: If statements—if(true){}
Every day we make decisions right from the moment our alarm goes off... for example one of the first decisions you make might look like this:
wake up
get out of bed
if (i am hungry) {
eat breakfast
}
have a shower
An if statement is a bit of code that has the following format (syntax):
if (condition) {
statements;
}
Let's break down the syntax:
A statement is a just a line of code. Here are 3 examples of statements that you have used;
var tree = "Oak";
.
alert(4 + 3);
var day = prompt{"What day of the month is it?";
If we have the statements written normally in code, they will be run in sequence, one line after the other. But the statements written inside the curly braces are only selected to run if the condition (the bit in the brackets) is true. If the condition is false we don't run the code.
The rule is
if (this condition) is true do {the stuff in curly braces}
A condition is a fancy word for what thing is the program checking. The program checks if the condition is true or false. If it is true then the program will run the code.
if (light is off and it is dark) {
turn on light;
}
Conditions—a computing example
Let's use an example of guess a number game.
var guess = prompt('I have a number in my head between 1 and 5, Can you guess it?');
if (guess == 4) {
alert('Correct, you are amazing!');
}
alert('Have a nice day.');
Simple Guess A Number Between Program
This code will run in sequence from Line 1 to Line 5.
A prompt (Line 1) will appear for the user to input their answer (either 2, 3 or 4) and this will be stored in guess
.
Unknown to the user, the correct answer is "4" (Line 2).
Based on the inputted answer, the computer proceeds to the if statement
to determine whether the code in the curly-braces (encompassing Line 3) should run or not.
If it is TRUE, (which means "4" was inputted), the congratulatory Line 3 alert statement will run followed by the Line 5 alert.
If "4" was not inputted, the computer determines it is FALSE and ignores the Line 3 alert but the Line 5 alert still works because it is outside the if statement
.
Concepts
3.3: True
and False
Computers function in a binary or 2 numbered system: 0 or 1, yes or no, true or false, on or off.
Be careful to use conditions that the computer can check as being true or false.
This is because, while humans can deal with conditions that are unclear, robots and computers can only check conditions that are clearly true or false.
Here are some examples of vague conditions that humans can deal with but a robot would need more information for.
- If your hair is too long, cut it. (What is too long?! How much do we cut?)
if (hair more than or equal to 7cm){cut hair to 4cm;}
is more specific.
- If car is running low on fuel then add more fuel. (How much is low? How much is more? Noo!?)
if (fuel in car is less than 1/16 full) {fill to full tank}
- If it is bad weather then take a coat. (Er, define bad weather?)
- A robot would need something like this:
if (it is raining){wear a raincoat}
. That is clear, a robot can check if it is raining or it is not.
- A robot would need something like this:
A typical human would have enough world knowledge to know what sort of bad weather requires a coat.
Robots would need all the forms of bad weather listed in a measurable way.
Bad weather measurements | |
It is raining | True/False |
The wind is above 30 knots | True/False |
It below 10° celsius | True/False |
In order to give this instruction to a robot you would need to give a precise definition of "bad weather."
JavaScript Intro Lesson
3.4: Lesson 7. If Statement Grid
JavaScript Intro Lesson
3.5: Lesson 8. If statements
Concepts
3.6: Variables can change
Variables do not always stay as one thing. They can be changed. You can change it by just writing the same variable name with different information.
For example:
- You can change the value of a variable.
var tree = "3m tall";
tree = "4m tall"; - You can set the value of variable to another variable
var donut = 1.40;
var totalCost = donut;
//totalCost is now storing the value 1.40 - You can increase and decrease the value of a variable
var countDown = 5;
//decrement (decrease by one)
countDown --;
//decrement (decrease by one)
countDown --;
//countDown is now storing the value 3var countUp = 5;
//increment (increase by one)
countUp ++;
//increment (increase by one)
countUp ++;
//countUp is now storing the value 7var count = 5;
count += 4;
//(count = count + 4)
//count is now storing the value 9
JavaScript Intro Lesson
3.7: Lesson 9. Increment Grid
Order of Operations
What are operations?
Warning:There might be a few words below that are new to you. Don't be confused, you probably know exactly what we are talking about. We are just adding some new vocabulary to describe it.
In the simplest terms an operation is doing something to a number with another number. (Or other values, see below)
The following arithmetic expression shows an example of operators and operands:
4 + 5 = 9
//operand operator operand solves to value
In the above example, '+' is the symbol for the operation called addition.
You need two operand inputs for an addition operation 4 +
is not a complete operation.
An operand, then, is also referred to as "one of the inputs for an operation".
Here are the basic arithmetic operators (or as you may know them, "basic math symbols")
+
plus (addition)−
minus (subtraction)×
times (multiplication)÷
obelus (division)
It is important to know how to solve an expression/equation because computers only work with values. A value is a something that can not be solved or simplified further. 4/8 is not a value because it can be simplified to 1/2. 4 - 2
is solved by the computer to give the value of the number 2
. Values can be boolean statements like true
or false
, numbers such as 2.09330
, -8
or 4
and single strings, so "The end"
could be simplified from "The " + "end"
Multiple operations
The above example has one operation, 4 + 5
, you can often have many operations in one expression.
4 + 5 + 2 + 1 = 12
//3 operations here
In this example we solve the first operation, 4 + 5
, and that answer (the value 9
) is then input as the first operand of the second operation
4 + 5 = 9... 9 + 2 = 10... 10 + 1 = 11
When mathematical and computing equations (or expressions) become longer and use different operators, +,/,*,...
, we need to know what order we solve the operations in
5 ** 6 + (4 - 3)/2 * 2 - 2 = ???
BEDMAS/PEMDAS/BODMAS/BIDMAS
These famous acronyms are taught in a wide range of schools across the world to remember the order of operations of our basic math equations.
PEMDAS - "Please Excuse My Dear Aunt Sally" [parenthesis, exponents, multiplication, division, addition, subtraction] is one of the memory tricks that are used to remember the order in which we solve operations.
If the order level is the same we solve from left to right, for example, subtract and addition are in the same order so we solve the four operations in 4 - 3 + 2 + 1 + 5
from left to right. 4 - 3 = 1, 1 + 2 = 3, 3 + 1 = 4, 4 + 5 = 9
.
But when there are operations that have different orders of importance you have to solve the highest order first. Look at the six operations here 5 + 4 - 2 * 3 /2 + (4 - 3)
, they are in 3 different orders of importance. We first solve the brackets, then the multiplications and divisions, then the additions and subtractions..
//Maths expression full of operators
5 + 4 - 2 * 3 /2 + (4 - 3)
//operation 1
(4 - 3) = 1
//operation 2
2 * 3 = 6
//operation 3
6 / 2 = 3
//operation 4
5 + 4 = 9
//operation 5, second input is from operation 2
9 - 3 = 6
//operation 6, first input is from operation 1 and the second input is from operation 5
6 + 1 = 7
Symbol | Name | Example |
PEMDAS or BEDMAS | The order in which you do basic mathematical operations: | |
()
| Brackets/Parentheses: Do all operations inside the brackets first | (3 + 4) x 2 = 7 x 2 = 14
|
x**p
| Exponents: Evaluate all powers/orders/indices/exponents (whichever you call them) next | 43 = 4 x 4 x 4 = 8 x 4 = 32
|
/ *
| Division / Multiply (from left to right) | 3 * 4/2 = 12/2 = 6
|
- +
| Addition/Subtraction (from left to right) | 3 + 4 - 2 = 7 - 2 = 5 |
Remember to perform divisions and multiplication from left to right and then perform addition and subtraction from left to right.
5* *3+(4-3)/10*2-2=123.2
5* *3+1/10*2-2=123.2
125+1/10*2-2=123.2
125+0.1*2-2=123.2
//left to right
125.2-2=123.2
123.2=123.2
Comparative operators: These are some common operators that compare equations.
Symbol | Name | Example |
<
| less than | 1 < 2
|
>
| greater than | 2 > 1
|
<=
| Less than or equal to | 1<=2, 2<=2
|
>=
| Greater than or equal to | 3>=2, 2>=2
|
Complete Computer Science order of operations
Order | Symbols | Names |
1 | () [] -> . :: | Function call, scope, array/member access |
2 | ! - + * & sizeof type cast ++ -- | (most) unary operators, sizeof and type casts (right to left) |
3 |
| Multiplication, division, modulo |
4 |
| Addition and subtraction |
5 | << >> | Bitwise shift left and right |
6 | < <= > >= | Comparisons: less-than, ... |
7 | = ! | Comparisons: equal and not equal |
8 | & | Bitwise AND |
9 | Bitwise exclusive OR (XOR) | |
10 | | | Bitwise inclusive (normal) OR |
11 | && | Logical AND |
12 | || | Logical OR |
13 | ? : | Conditional expression (ternary) |
14 | += -= *= /= %= &= |= = <<= >> | Assignment operators (right to left) |
15 | , | Comma operator |
JavaScript Intro Lesson
3.8: Lesson 10. Number variables
Lesson 10
Code Avengers Quiz
3.9: Maths Quiz
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F