Table of Contents
After an Intro that was more about theory and preparation, in this part we will jump right into programming and write our first commands. I suppose that you already have some software for writing you code, so let’s look at our first subject – basic methods.
To write the code I suggest you to use sites like Codepen or JSFiddle and then open the Developer Tools (in Chrome) or Firebug in Firefox and turn on the console. They are web-based IDE and you will see how your code works immediately. You can as well write your code in this console instead of an IDE. End every command you write with semicolon, it tells JavaScript were the command ends.
Basic methods
First we have to learn is a couple of methods first. These methods will help you for example to “print” the content of variables you defined. Don’t worry, you don’t need any printer or other stuff. Here is what I mean by print …
Console.log
This is the first method we will talk about. Console.log allows us to print data on the screen. It will display anything you put inside the parentheses. Everything you print will be displayed in console (Developer tools). For example to display number write:
JS:
console.log(5); // print 5
If you want to display some text you have to put it inside the quotes. It doesn’t matter if you use single or double quotes because JavaScript make no difference between them. However, starting and ending quotes must be the same. This rule of consistency apply to every method we will use.
JS:
console.log('dog'); // print dog
console.log("house"); // print house
If you use different ending quotes than beginning:
console.log('house"); // print error - Unexpected token
If you omit the quotes and try to print some word, JavaScript will think that you want to access some variable. This means that previous commands will not work without quotes. We will talk about variables later on.
JS:
console.log(dog); // print error - dog is not defined
Alert
Do you like that pop-up windows? I guess not. Do you want to know how to create them? Hmm… To display display this pop-up, just use “alert()” method. Anything that you write between parentheses will be displayed in the pop-up window.
JS:
alert(13); // pop-up window containing number 13
alert("Hello world!"); // pop-up window containing string (sentence) Hello world!
Confirm
Another method is confirm(). It contains text and two buttons – OK and cancel. Also, if you will look at the console, you can see that it actualy return something. If you chose OK, returned value is true, otherwise it is false.
JS:
confirm("Do you feel awesome?"); // pop-up window with defined question
confirm("Do you like comics?");
Prompt
The last method you can use prompt(). This method is great for asking user for some input. You can use it to ask the user for his name, age or whatever you want, simple write the question inside the parentheses (don’t forget the quotes). Like confirm, this method also return data. Anything that user write inside the input field will be displayed in console.
JS:
prompt("What's your name?");
prompt("How old are you?");
prompt("Do you like Star Wars or Star Trek?");
Summary
Today, we discussed methods you can use to display information like numbers, words and other stuff. In the next part we will take a look at variables and also what data types available in JavaScript.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
