Let's write some code!
Once you're ready you'll see a little arrow > with a text field. This is where you type your command.
Let's try something fun!
You must have seen alert boxes popping up on web pages. Alert creates a pop up with a message and a button which says "Ok". Prompt is similar to an alert box but it also has a text field where one can enter some text.
Try typing the following on the console and hit enter
alert("Hello World!");prompt("What is your name??");
Let's say you want to welcome a user to your website. Try typing the following on the console and hit enter
alert("Welcome, " + prompt("What is your name?"));
What does this display?
Welcome, <whatever is entered in the prompt text box>
A sequence of characters is called a string. Here "Welcome" is a string. We'll learn more about strings, numbers and operations in this tutorial.
Let's now type some math in the console, like 2 + 3 and hit enter.
> 2 + 3< 5
- 3 + 4 - 5
- 5 * 4 / 2
Nice! See how the answer popped out?
To perform exponential calculation, say 2 raised to the power 3, we type:
> 2 ** 3< 8
Have fun with this for a little while and then get back here :)
Each of the lines above that you typed into the console is called an expression. Expressions can be much longer too. For example, try this:
> (5 + 2) * (7 - 1) / 3< 14
Expressions enclosed in parentheses get evaluated first. After all the parenthesized expressions are evaluated, the standard operator precedence is followed.
Here's a step-by-step breakdown of how the above expression is evaluated.
(5 + 2) * (7 - 1) / 3=> (7) * (7 - 1) / 3=> 7 * (7 - 1) / 3=> 7 * (6) / 3=> 7 * 6 / 3=> 42 / 3=> 14
A sequence of characters is called a string. A string should also be enclosed within open and close inverted commas (" ") or (' '). Both opening and closing quotes should be the same for a string to be valid. For example,
- "teststring" and 'teststring' are strings
- while notastring and 'teststring" are not strings
Strings can be joined together. This is called concatenation of strings:
> 'Hello ' + 'World!'< "Hello World!"
Notice how we had to end the first string ('Hello ') with a space (' '). If we did not, then our result would be 'HelloWorld!', which isn't what we want.
If you need to put an apostrophe inside your string, you have two ways to do it.
Using double quotes:
> "Runnin' down the hill"< "Runnin' down the hill"
or escaping the apostrophe with a backslash (\):
> 'Runnin\' down the hill'< "Runnin' down the hill"
Nice, huh? To see your name in uppercase letters, simply type:
> 'Commonlounge'.toUpperCase()< "COMMONLOUNGE"
> 'Hello'.repeat(3)< "HelloHelloHello"
You can combine concatenation and repetition to form more complex strings
> 'Hello' + '!'.repeat(3)< "Hello!!!"
Wonder why sometimes you call functions with a . at the end of a string (like "Commonlounge".toUpperCase() and '!'.repeat(3)) and sometimes you first call a function and place the string in parentheses (like alert("Hello World!") and prompt("What is your name??"))? Well, in some cases, functions belong to objects, like toUpperCase(), which can only be performed on strings. In this case, we call the function a method. Other times, functions don't belong to anything specific. That's why we're giving "Hello World!" as a parameter to the alert function.
If you want to know the number of characters in a string, you can use the length attribute of a string.
> 'Hello world!'.length< 12
Let's try finding the number of digits in a number
> 215125.length< Uncaught SyntaxError: Invalid or unexpected token
We got an error saying Invalid or unexpected token. We got this error because numbers don't have a length attribute.
So what can we do? Since, we know that we can find length of a string, it makes sense to write our number as a string.
> '215125'.length< 6
There's another way to do this. We can use the String() function to convert a number to a string.
> String(215125)< "215125"> String(215125).length< 6
Similarly, there's also a parseInt() function to convert from string to number (Int stands for integer).
> parseInt("1256")< 1256> parseInt("1256") + 55< 1311
What if we give it something that's not a number? Let's try:
> parseInt("hello")< NaN
NaN stands for Not a Number. It appears when we give a string to parseInt that cannot be converted to a number.
Numbers with a decimal point are called floating point numbers or float for short. Similar to parseInt(), parseFloat() converts the given string to a float.
OK, enough of strings. So far you've learned about:
- operators – like + and *, combine values to produce a new one
- functions and attributes – like .repeat(), .length and alert()
These are the basics of every programming language you learn. Ready for something harder? We bet you are!
Operator | Example | Result | Description---------|---------|--------|------------------------------------------------+ | 4 + 5 | 9 | addition- | 4 - 5 | -1 | subtraction* | 4 * 5 | 20 | multiplication/ | 8 / 3 | 2.666 | division% | 14 % 3 | 2 | modulo (remainder left after division)** | 5 ** 2 | 25 | exponent
Play around with the functions that you've learned about in the above sections. Try the following and try to explain the output.