Programming JS Lesson-1

Javascript Coding:

"Lesson 1"
 
var lessons = [ { Explanation: "

Keyword return

"+ "

The keyword return finishes the program and returns a result.

"+ "

For example, the program:

"+ "
return \"School of the West\"
"+ "

Will return School of the West

"+ "

Exercice

"+ "

Type your code in the box on the left.

"+ "

When you are ready, click on Run.

"+ "

The result of your code will appear in the box on the right.

"+ "

Write a program that returns \"Hello world!\"

"+ "

Tip: only the exact text is a correct answer! Make sure to be precise with spaces.

" ,List:[ {o:"Hello world!"}, ] }, { Explanation: "

Math expressions

"+ "

Just like a calculator, code can do any mathematic calculation you give it

"+ "

These are the symbols you can use for it:

"+ "
    "+ "
  • + for sum
  • "+ "
  • - for subtraction
  • "+ "
  • * for multiplication
  • "+ "
  • / for division
  • "+ "
"+ "

For example, the program:

"+ "
return 6*7
"+ "

Will return 42

"+ "

Exercice

"+ "

Anne had 100 books.

"+ "

Anne gave Bob 38 books.

"+ "

Charles gave Anne 15 books.

"+ "

Write a program that calculates how many books Anne has now

"+ "

Tip: remember to use the keyword return

" ,List:[ {o:77,c:["+","-"]} ] }, { Explanation: "

Priority in math

"+ "

In math expressions, operations will run from left to right, first multiplications and divisions, then sums and substractions.

"+ "

Just like a scientific calculator, math expressions will run first if you use parenthesis ( )

"+ "

For example, the program:

"+ "
return (10*6)+2
"+ "

Will return 62, because it will calculate first 10*6 and then add 2

"+ "

But the program:

"+ "
return 10*(6+2)
"+ "

Will return 80, because it will calculate first 6+2 and then multiply by 10

"+ "

Exercice

"+ "

Anne had 20 coins.

"+ "

Bob gave Anne 10 coins.

"+ "

Charles took half of Anne's coins.

"+ "

Write a program that calculates how many coins Anne has now

" ,List:[ {o:15,c:["(",")"]} ] }, { Explanation: "

Number comparisons

"+ "

Comparison operators can be used to compare numbers.

"+ "

These are the symbols you can use for it:

"+ "
    "+ "
  • < means smaller than
  • "+ "
  • > means larger than
  • "+ "
  • == means equal to
  • "+ "
  • <= means smaller or equal to
  • "+ "
  • >= means larger or equal to
  • "+ "
"+ "

You can compare numbers directly, or use the result of a math expression.

"+ "

For example, the program:

"+ "
return 6+2 > 8-4
"+ "

Will return true, because it will calculate first 6+2, then 8-4, and finally compare the results

"+ "

Exercice

"+ "

Anne had 500 flowers.

"+ "

Anne gave Bob half of her flowers.

"+ "

Charles had 200 flowers.

"+ "

Dave gave Charles 20 flowers.

"+ "

Write a program that checks if Anne has more flowers than Charles

" ,List:[ {o:true,c:["/",">"]} ] }, { Explanation: "

Variables

"+ "

You can think of variables as little boxes where a value is hold.

"+ "

You can create as many variables as you want and give them the names you want (without spaces).

"+ "

To create a variable, use the keyword var.

"+ "

You can give value to a variable with the operator =

"+ "

You can use the value of the variable by just calling its name.

"+ "

For example, the program:

"+ "
var BooksOfAnne
"+ "
BooksOfAnne = 5
"+ "
BooksOfBob = 2
"+ "
return BooksOfAnne + BooksOfBob
"+ "

Will return 7

"+ "

Since we cannot use spaces, we can use a capital letter to separate words in variable names.

"+ "

It is important that you give your variables meaningful names, to make your code more readable

"+ "

Exercice

"+ "

Anne had 20 coins.

"+ "

Bob gave Anne 10 coins.

"+ "

Charles took half of Anne's coins.

"+ "

Write a program that calculates how many coins Anne has now, uisng variables instead of parenthesis

" ,List:[ {o:15,c:["var"],nc:["("]} ] }, { Explanation: "

Simple types

"+ "

Variables can have 3 different simple types.

"+ "

If you completed the previous lessons, you have already seen all of them

"+ "

Number

"+ "

The number type can contain any number.

"+ "

So far you have seen only integer numbers, but negative numbers and decimals are also allowed, using the symbols - and ..

"+ "

For example:

"+ "
var SurfaceOfTheEarthInKm2 = 510067420
"+ "
var DepthOfTheMarianaTrenchInFeet = -36201
"+ "
var FeetInAKilometer = 3280.84
"+ "

String

"+ "

The string type can contain a text of any lenght.

"+ "

It must be surrounded by the characters \"\".

"+ "

For example:

"+ "
var SomeNiceText = \"School of the west rocks!\"
"+ "

Strings can be concatenated using the symbol +. You can also concatenate numbers to a string.

"+ "

For example:

"+ "
var Distance = 2000
"+ "
var UnitOfMeasurement = \"km\"
"+ "
return Distance + UnitOfMeasurement
"+ "

Will return 2000km

"+ "

Boolean

"+ "

The boolean type can only the value true or false.

"+ "

It can be created directly, and also be the result of a number comparison.

"+ "

For example:

"+ "
var DoesSchoolOfTheWestRock = true
"+ "
var Is2GreaterThan4 = 2>4
"+ "

They are named in honor of George Boole, a 19th century english mathematician, philosopher and logician.

"+ "

Exercice

"+ "

Anne had 15 coins.

"+ "

She gave half of them to Bob.

"+ "

Write a program that writes:

"+ "
Anne has X dollars
"+ "

But instead of X print the correct amount.

"+ "

Tip: you will have to concatenate a string, a number and another string.

"+ "

Tip: only the exact text is a correct answer! Make sure to be precise with spaces.

" ,List:[ {o:"Anne has 7.5 dollars"} ] }, { Explanation: "

Input parameters

"+ "

Programs start becoming more useful when you can give them some input.

"+ "

In the following exercices, we will use the keyword INPUT to pass an input to your program.

"+ "

Your program will be tested for several values of INPUT.

"+ "

For example:

"+ "
var InputPlusTwo = INPUT+2
"+ "
return InputPlusTwo
"+ "

Will add 2 to any given input

"+ "

Exercice

"+ "

Write a program that returns true if the given INPUT is larger or equal than 42

" ,List:[ {i:1,o:false,c:["INPUT"]}, {i:42,o:true,c:["INPUT"]}, {i:100,o:true,c:["INPUT"]}, ] }, ] </script)

Well done!


var lesson = -1 function AddResult(input,content,color){ var result = "
"+content+"
" var extra = "full" if (input){ extra = "" result = "
Given input: "+input+"
"+result } return "
"+result+"
" } function CheckIfProgramContains(program,list){ for(var i=0;i<list.length;i++){ if(!program.includes(list[i])){ return false } } return true } function Run(){ error_container.style.display = "none" var raw = input_container.value var correct = true output_container.innerHTML = "" for(var i=0;i<lessons[lesson].List.length;i++){ var input = lessons[lesson].List[i].i var content = "" var color = "green" var error = "" try{ var result = eval("function f(INPUT){"+raw+"} f("+input+")") if(result===undefined){ error += "Your program didn't return anything. Did you forget the return keyword?
" } else{ content = result if(result!=lessons[lesson].List[i].o){ error = "Your program works, but does not return the correct solution.
" } else if(lessons[lesson].List[i].c && !CheckIfProgramContains(raw,lessons[lesson].List[i].c)){ error = "Your program returns the correct solution, but it's not doing what the exercice requests.
" } else if(lessons[lesson].List[i].nc && CheckIfProgramContains(raw,lessons[lesson].List[i].nc)){ error = "Your program returns the correct solution, but it's not doing what the exercise requests.
" } } } catch(e){ content = e error = "Your program returned an error.
" } if (error){ color = "red" correct = false error_container.innerHTML = error error_container.style.display = "block" } output_container.innerHTML += AddResult(input,content,color) } if(correct){ completed_container.style.display = "block" } window.scrollTo(0,document.body.scrollHeight); } function Next(){ lesson++; output_container.innerHTML = "" input_container.value = "" completed_container.style.display = "none" if(lessons.length!=lesson){ explanation_container.innerHTML = lessons[lesson].Explanation } else{ alert("All lessons completed!") } } Next()


ABOUT THE AUTHOR: Iberian Rider xxxxxxxxxxxx.