|03||Booleans, Operators, Date|
|09||Higher Order Functions|
|10||Sets and Maps|
|11||Destructuring and Spreading|
|13||Console Object Methods|
|20||Writing Clean Code|
|22||Manipulating DOM Object|
|24||Mini Project: Solar System|
|25||Mini Project: World Countries Data Visulalization 1|
|26||Mini Project: World Countries Data Visulalization 2|
|27||Mini Project: Portfolio|
|28||Mini Project: Leaderboard|
|29||Mini Project:Animating characters|
- Introduction to Data types
- Checking Data Types
- Comments Again
💻Day 1: Exercises
📔 Day 1
No prior knowledge of programming is required to follow this challenge. You need only:
- A computer
- A browser
- A code editor
I believe you have the motivation and a strong desire to be a developer, a computer and Internet. If you have those, then you have everything to get started.
You may not need node.js right now but you may need it for later. Install node.js.
After downloading double click and install
We can check if node is installed on our local machine by opening our device terminal or command prompt.
asabeneh $ node -v v12.14.0
When making this tutorial I was using node version 12.14.0, but now the recommended version of node.js for download is 12.17.0.
There are many browsers out there. However, I strongly recommend Google Chrome.
Installing Google Chrome
Opening Google Chrome Console
You can open Google Chrome console either by clicking three dots at the top right corner of the browser, selecting More tools -> Developer tools or using a keyboard shortcut. I prefer using shortcuts.
To open the Chrome console using a keyboard shortcut.
Mac Command+Option+J Windows/Linux: Ctl+Shift+J
Writing Code on Browser Console
Mac Command+Option+I Windows: Ctl+Shift+I
Console.log with Multiple Arguments
The conole.log() function can take multiple parameters separated by comma. The syntax looks like as follows:console.log(param1, param2, param3)
As you can see from the snippet code above, console.log() can take multiple arguments.
Example: Single Line Comment
// This is the first comment
// This is the second comment
// I am a single line comment
Example: Multiline Comment
This is a multiline comment
Multiline comments can take multiple lines
I made a deliberate mistake. As a result, the console raises syntax errors. Actually, the syntax is very informative. It informs what type of mistake was made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors:
console.log('Hello, World!') console.log('Hello, World!')
So far, we saw how to display text using the console.log(). If we are printing text or string using console.log(), the text has to be inside the single quotes, double quotes, or a backtick quotes. Example:
console.log('Hello, World!') console.log('Hello, World!') console.log(`Hello, World!`)
console.log(2 + 3) // Addition console.log(3 - 2) // Subtraction console.log(2 * 3) // Multiplication console.log(3 / 2) // Division console.log(3 % 2) // Modulus - finding remainder console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3
Installing Visual Studio Code
Visual studio code is a very popular open-source text editor. I would recommend to download Visual Studio Code, but if you are in favor of other editors, feel free to follow with what you have.
If you installed Visual Studio Code, let us start using it.
How to Use Visual Studio Code
Open the Visual Studio Code by double-clicking its icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.
- Inline script
- Internal script
- External script
- Multiple External scripts
Create a project folder on your desktop or in any location, name it 30DaysOfJS and create an index.html file in the project folder. Then paste the following code and open it in a browser, for example Chrome.
Now, you just wrote your first inline script. We can create a pop up alert message using the alert() built-in function.
The internal script can be written in the head or the body, but it is preferred to put it on the body of the HTML document. First, let us write on the head part of the page.
Open the browser console to see the output from the console.log()
External scripts in the head:
External scripts in the body:
Open the browser console to see the output of the console.log()
Multiple External Scripts
<!DOCTYPE html> <html> <head> <title>Multiple External Scripts</title> </head> <body> <script src="./helloworld.js"></script> <script src="./introduction.js"></script> </body> </html>
Your main.js file should be below all other scripts. It is very important to remember this.
Introduction to Data types
- Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
- Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
A collection of one or more characters between two single quotes, double quotes, or backticks. Example:
A boolean value is either True or False. Any comparisons return a boolean value, which is either true or false.
A boolean data type is either a true or false value.
true // if the light on ,the value is true false // if the light off, the value is false
let firstName console.log(firstName) //not defined, because it is not assigned to a value yet
let emptyValue = null
Checking Data Types
To check the data type of a certain variable, we use the typeof operator. See the following example.
console.log(typeof 'Asabeneh') // string console.log(typeof 5) // number console.log(typeof true) // boolean console.log(typeof null) // object type console.log(typeof undefined) // undefined
- Single line commenting
- Multiline commenting
// commenting the code itself with a single comment // let firstName = 'Asabeneh'; single line comment // let lastName = 'Yetayeh'; single line comment
/* let location = 'Helsinki'; let age = 100; let isMarried = true; This is a Multiple line comment */
Variables are containers of data. Variables are used to store data in a memory location. When a variable is declared, a memory location is reserved. When a variable is assigned to a value (data), the memory space will be filled with that data. To declare a variable, we use var, let, or const keywords.
For a variable that changes at a different time, we use let. If the data does not change at all, we use const. For example, PI, country name, gravity do no change, and we can use const. We will not use var in this challenge and I don't recommend you to use it. It is error prone way of declaring variable it has lots of leak. We will talk more about var, let, and const in detail in other sections (scope). For now, the above explanation is enough.
firstName lastName country city capitalCity age isMarried first_name last_name is_married capital_city num1 num_1 _num_1 $num1 year2020 year_2020
The first and second variables on the list follows the camelCase convention of declaring in JavaScrip. In this material, we will use camelCase variables.
Example of invalid variables:
first-name 1_num num_#_1
Let us declare variables with different data types. To declare a variable, we need to use let or const keyword before the variable name. Following the variable name, we write an equal sign (assignment operator), and a value(assigned data).
// Syntax let nameOfVariable = value
Examples of declared variables
// Declaring different variables of different data types let firstName = 'Asabeneh' // first name of a person let lastName = 'Yetayeh' // last name of a person let country = 'Finland' // country let city = 'Helsinki' // capital city let age = 100 // age in years let isMarried = true console.log(firstName, lastName, country, city, age, isMarried)
Asabeneh Yetayeh Finland Helsinki 100 True
// Declaring variables with number values let age = 100 // age in years const gravity = 9.81 // earth gravity in m/s2 const boilingPoint = 100 // water boiling point, temperature in oC const PI = 3.14 // geometrical constant console.log(gravity, boilingPoint, PI)
9.81 100 3.14
// Variables can also be declaring in one line separated by comma let name = 'Asabeneh', // name of a person job = 'teacher', live = 'Finland' console.log(name, job, live)
Asabeneh teacher Finland
When you run index.html file in the 01-Day folder you should get this:
💻 Day 1: Exercises
Write a single line comment which says, comments can make code readable
Write a multiline comment which says, comments can make code readable, easy to reuse and informative
Create a variable.js file and declare variables and assign string, boolean, undefined and null data types
Declare four variables without assigning values
Declare four variables with assigned values
Declare variables to store your first name, last name, marital status, country and age in multiple lines
Declare variables to store your first name, last name, marital status, country and age in a single line
Declare two variables myAge and yourAge and assign them initial values and log to the browser console.
I am 25 years old. You are 30 years old.