1. Comment
Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.
There are two ways to write comments in JavaScript:
Using // will tell JavaScript to ignore the remainder of the text on the current line. This is an in-line comment:
So It won't show on the screen !
2. Declare JavaScript Variables
In computer science, data is anything that is meaningful to the computer. JavaScript provides eight different data types which are undefined, null, boolean, string, symbol, bigint, number, and object.
undefined: something that hasn't defined
null: means nothing. set it to be something which is nothing
boolean: true or false
string: string
symbol: A symbol is an immutable primitive value that is unique.
number: number
object: can store a lot of different key value pairs.
Variables allow computers to store and manipulate data in a dynamic fashion. They do this by using a "label" to point to the data rather than using the data itself. Any of the eight data types may be stored in a variable.
A variable is almost like a box. and you can fill it with anything. you'll fill it with the data that you want.
To declare the variable; USE "var", stands for variable.
var myName = "Beau" (you can set up anything)
myName = 8
There are 3 ways to declare a variable in JavaScript
Let out name = "free"
const pi = 3.14
The difference among var, let, lconst
A var is going to be able to be used throughout your whole program.
let will only be used within the scope of where you declared that.
const is a variable that should never change.
so I declared myName, but then we changed it. However. const you never change it, you'll get an ERROR otherwise.
3. Storing Values with the Assignment Operator
var a;
var b = 2;
a = 7; -> I've just assigned 7 to a
b = a -> now I've assigned a to b
console. log allows you to see things in the console.
so console.log(a) is going to show "7" here.
4. Initializing Variables with the Assignment Operator
It is common to initialize a variable to an initial value in the same line as it is declared.
var myVar = 0;
Creates a new variable called myVar and assigns it an initial value of 0.
5. Declare String Variables
Previously you used the following code to declare a variable:
var myName;
But you can also declare a string variable like this:
var myName = "your name";
"your name" is called a string literal. A string literal, or string, is a series of zero or more characters enclosed in single or double quotes.
6. Explore Differences Between the var and let Keywords
One of the biggest problems with declaring variables with the var keyword is that you can easily overwrite variable declarations:
var camper = "James";
var camper = "David";
console.log(camper);
In the code above, the camper variable is originally declared as James, and is then overridden to be David. The console then displays the string David.
In a small application, you might not run into this type of problem. But as your codebase becomes larger, you might accidentally overwrite a variable that you did not intend to. Because this behavior does not throw an error, searching for and fixing bugs becomes more difficult.
A keyword called let was introduced in ES6, a major update to JavaScript, to solve this potential issue with the var keyword. You'll learn about other ES6 features in later challenges.
If you replace var with let in the code above, it results in an error:
let camper = "James";
let camper = "David";
The error can be seen in your browser console.
So unlike var, when you use let, a variable with the same name can only be declared once.
7. Basic Math
var sum = 10 + 10;
console.log(sum)
answer will be 20
var difference = 40 - 10;
var product = 8 * 2;
var quotient = 66/33;
8. Increment a Number with JavaScript
You can easily increment or add one to a variable with the ++ operator.
i++;
is the equivalent of
i = i + 1;
Note: The entire line becomes i++;, eliminating the need for the equal sign.
myVar = myVar + 1;
is the equivalent of
myVar++;
9. Decrement a Number with JavaScript
You can easily decrement or decrease a variable by one with the -- operator.
i--;
is the equivalent of
i = i - 1;
Note: The entire line becomes i--;, eliminating the need for the equal sign.
10. Create Decimal Numbers with JavaScript
We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as floating point numbers or floats.
Note: Not all real numbers can accurately be represented in floating point. This can lead to rounding errors.
11. Multiply Two Decimals with JavaScript
In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.
Let's multiply two decimals together to get their product.
const product = 2.0 * 2.5;
12. Finding a Remainder in JavaScript
The remainder operator % gives the remainder of the division of two numbers.
Example
5 % 2 = 1 because
Math.floor(5 / 2) = 2 (Quotient)
2 * 2 = 4
5 - 4 = 1 (Remainder)
Usage
In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by 2.
17 % 2 = 1 (17 is Odd)
48 % 2 = 0 (48 is Even)
Note: The remainder operator is sometimes incorrectly referred to as the modulus operator. It is very similar to modulus, but does not work properly with negative numbers.
13. Compound Assignment With Augmented Addition
In programming, it is common to use assignments to modify the contents of a variable. Remember that everything to the right of the equals sign is evaluated first, so we can say:
myVar = myVar + 5;
to add 5 to myVar. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step.
One such operator is the += operator.
let myVar = 1;
myVar += 5;
console.log(myVar);
6 would be displayed in the console.
a = a + 12; shortcut a += 12;
b = 9 + b; b += 9;
c = c + 7; c += 7;
14. Compound Assignment With Augmented Subtraction
Like the += operator, -= subtracts a number from a variable.
myVar = myVar - 5;
will subtract 5 from myVar. This can be rewritten as:
myVar -= 5;
15. Compound Assignment With Augmented Multiplication
The *= operator multiplies a variable by a number.
myVar = myVar * 5;
will multiply myVar by 5. This can be rewritten as:
myVar *= 5;
16. Compound Assignment With Augmented Division
The /= operator divides a variable by another number.
myVar = myVar / 5;
Will divide myVar by 5. This can be rewritten as:
myVar /= 5;
17. Escaping Literal Quotes in Strings
When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: " or ' inside of your string?
In JavaScript, you can escape a quote from considering it as an end of string quote by placing a backslash (\) in front of the quote.
const sampleStr = "Alan said, \"Peter is learning JavaScript\".";
This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:
Alan said, "Peter is learning JavaScript".
18. Quoting Strings with Single Quotes
String values in JavaScript may be written with single or double quotes, as long as you start and end with the same type of quote. Unlike some other programming languages, single and double quotes work the same in JavaScript.
const doubleQuoteStr = "This is a string";
const singleQuoteStr = 'This is also a string';
The reason why you might want to use one type of quote over the other is if you want to use both in a string. This might happen if you want to save a conversation in a string and have the conversation in quotes. Another use for it would be saving an <a> tag with various attributes in quotes, all within a string.
const conversation = 'Finn exclaims to Jake, "Algebraic!"';
However, this becomes a problem if you need to use the outermost quotes within it. Remember, a string has the same kind of quote at the beginning and end. But if you have that same quote somewhere in the middle, the string will stop early and throw an error.
const goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"';
const badStr = 'Finn responds, "Let's go!"';
Here badStr will throw an error.
In the goodStr above, you can use both quotes safely by using the backslash \ as an escape character.
Note: The backslash \ should not be confused with the forward slash /. They do not do the same thing.
19. Escape Sequences in Strings
Quotes are not the only characters that can be escaped inside a string. There are two reasons to use escaping characters:
To allow you to use characters you may not otherwise be able to type out, such as a carriage return.
To allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean.
We learned this in the previous challenge.
Code Output
\' single quote
\" double quote
\\ backslash
\n newline
\r carriage return
\t tab
\b word boundary
\f form feed
Note that the backslash itself must be escaped in order to display as a backslash.
Assign the following three lines of text into the single variable myStr using escape sequences.
FirstLine
\SecondLine
ThirdLine
const myStr = "FirstLine\n\t\\SecondLine\nThirdLine";
You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.
Note: The indentation for SecondLine is achieved with the tab escape character, not spaces.
20. Concatenating Strings with Plus Operator
In JavaScript, when the + operator is used with a String value, it is called the concatenation operator. You can build a new string out of other strings by concatenating them together.
Example
'My name is Alan,' + ' I concatenate.'
Note: Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.
Example:
const ourStr = "I come first. " + "I come second.";
The string I come first. I come second. would be displayed in the console.
20. Generate Random Whole Numbers with JavaScript
It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.
Use Math.random() to generate a random decimal.
Multiply that random decimal by 20.
Use another function, Math.floor() to round the number down to its nearest whole number.
Remember that Math.random() can never quite return a 1 and, because we're rounding down, it's impossible to actually get 20. This technique will give us a whole number between 0 and 19.
Putting everything together, this is what our code looks like:
Math.floor(Math.random() * 20);
We are calling Math.random(), multiplying the result by 20, then passing the value to Math.floor() function to round the value down to the nearest whole number.
var randomNumberBetween0and19 = Math.floor(Math.random()*20);
function randomWholeNum() {
return Math.floor(Math.random() * 10);
}
console.log(randomWholeNum());
