**Congratulations** for deciding to participate in a 30 days of JavaScript programming challenge . In this challenge you will learn everything you need to be a JavaScript programmer and in general the whole concepts of programming. In the end of the challenge you will get a 30DaysOfJavaScript programming challenge certificate. Join the [telegram group](https://t.me/ThirtyDaysOfJavaScript).
**Congratulations** for deciding to participate in a 30 days of JavaScript programming challenge . In this challenge you will learn everything you need to be a JavaScript programmer and in general the whole concepts of programming. In the end of the challenge you will get a 30DaysOfJavaScript programming challenge certificate. Join the [telegram group](https://t.me/ThirtyDaysOfJavaScript).
**A 30DaysOfJavaScript** challenge is a guide for both beginners and advanced JavaScript developers. Welcome to JavaScript. I enjoy using and teaching JavaScript and I hope you will do so. JavaScript is the language of the browser.
**A 30DaysOfJavaScript** challenge is a guide for both beginners and advanced JavaScript developers. Welcome to JavaScript. I enjoy using and teaching JavaScript and I hope you will do so. JavaScript is the language of the browser.
@ -60,7 +76,7 @@ You use JavaScript **_to add interactivity to websites, to develop mobile apps,
**_JavaScript (JS)_** has increased in popularity in recent years and has been the leading
**_JavaScript (JS)_** has increased in popularity in recent years and has been the leading
programming language for four consecutive years and is the most used programming language on
programming language for four consecutive years and is the most used programming language on
Github.
Github.
# Requirements
## Requirements
No prior knowledge of programming is required to follow this challenge. You need only:
No prior knowledge of programming is required to follow this challenge. You need only:
1. Motivation
1. Motivation
2. Computer
2. Computer
@ -68,10 +84,10 @@ No prior knowledge of programming is required to follow this challenge. You need
4. Browser
4. Browser
5. Code Editor
5. Code Editor
# Setup
## Setup
I believe you have the motivation and a strong desire to be a developer, computer and Internet. If you have those, then you have everything.
I believe you have the motivation and a strong desire to be a developer, computer and Internet. If you have those, then you have everything.
## Install Node.js
### Install Node.js
You may not need it right now but you may need it for later. Install [node.js](https://nodejs.org/en/).
You may not need it right now but you may need it for later. Install [node.js](https://nodejs.org/en/).
@ -88,14 +104,14 @@ v12.14.0
```
```
I am using node version 12.14.0, which is the recommended version of node.
I am using node version 12.14.0, which is the recommended version of node.
## Browser
### Browser
There are many browsers out there. However, I strongly recommend Google Chrome.
There are many browsers out there. However, I strongly recommend Google Chrome.
### Installing Google Chrome
#### Installing Google Chrome
Install [google chrome](https://www.google.com/chrome/) if you do not have one yet. We can write small JavaScript code on the browser console, but we do not use the browser console to develop applications.
Install [google chrome](https://www.google.com/chrome/) if you do not have one yet. We can write small JavaScript code on the browser console, but we do not use the browser console to develop applications.
### Opening Google Chrome Console
#### Opening Google Chrome Console
You can open Google Chrome either by clicking three dots at the top right corner of the Chrome browser or using a shortcut. I prefer using shortcuts.
You can open Google Chrome either by clicking three dots at the top right corner of the Chrome browser or using a shortcut. I prefer using shortcuts.
@ -115,7 +131,7 @@ Let us write a JavaScript code on the Google Chrome console:
### Writing Code on browser Console
#### Writing Code on browser Console
We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using:
We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using:
```sh
```sh
Mac
Mac
@ -124,12 +140,12 @@ Command+Option+I
Windows:
Windows:
Ctl+Shift+I
Ctl+Shift+I
```
```
#### Console.log
##### Console.log
To write our first JavaScript code, we used a builtin function **console.log()**. We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function.
To write our first JavaScript code, we used a builtin function **console.log()**. We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function.
```js
```js
console.log('Hello, World!')
console.log('Hello, World!')
```
```
#### Console.log with multiple arguments
##### Console.log with multiple arguments
The console.log(param1, param2, param3), can take multiple arguments.
The console.log(param1, param2, param3), can take multiple arguments.
As you can see from the above snippet code, *console.log()* can take multiple arguments.
As you can see from the above snippet code, *console.log()* can take multiple arguments.
Congratulations! You wrote your first JavaScript code using *console.log()*.
Congratulations! You wrote your first JavaScript code using *console.log()*.
#### Comment
##### Comment
We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code. Any text starts with // in JavaScript is a comment or anything enclose like this /* */ is a comment.
We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code. Any text starts with // in JavaScript is a comment or anything enclose like this /* */ is a comment.
Example: Single Line Comment
Example: Single Line Comment
@ -157,7 +173,7 @@ Example: Multiline Comment
JavaScript is the language of the web
JavaScript is the language of the web
*/
*/
#### Syntax
##### Syntax
JavaScript is a programming language. As a result, it has its syntax like other programming languages. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.
JavaScript is a programming language. As a result, it has its syntax like other programming languages. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.
We can write our codes on the browser console, but it won't be for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days python JavaScript challenge, we will use visual studio code.
We can write our codes on the browser console, but it won't be for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days python JavaScript challenge, we will use visual studio code.
### Installing Visual Studio Code
#### Installing Visual Studio Code
VVisual studio code is a very popular open-source text editor. I would recommend to [download](https://code.visualstudio.com/) visual studio code, but if you are in favor of other editors, feel free to follow with what you have.
VVisual studio code is a very popular open-source text editor. I would recommend to [download](https://code.visualstudio.com/) 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.
If you installed visual studio code, let us start using it.
### How to use visual studio code
#### How to use visual studio code
Open the visual studio code by double-clicking the visual studio icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.
Open the visual studio code by double-clicking the visual studio icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.
@ -211,7 +227,7 @@ Open the visual studio code by double-clicking the visual studio icon. When you
JavaScript can be added to a web page in three different ways:
JavaScript can be added to a web page in three different ways:
- **_Inline script_**
- **_Inline script_**
- **_Internal script_**
- **_Internal script_**
@ -220,7 +236,7 @@ JavaScript can be added to a web page in three different ways:
The following sections show different ways of adding JavaScript code to your web page.
The following sections show different ways of adding JavaScript code to your web page.
## Inline Script
### Inline Script
Create a folder on your desktop and call it 30DaysOfJS or in any location and create an **_index.html_** file in the project folder. Then paste the following code and open it in a browser, either in [Chrome](https://www.google.com/chrome/).
Create a folder on your desktop and call it 30DaysOfJS or in any location and create an **_index.html_** file in the project folder. Then paste the following code and open it in a browser, either in [Chrome](https://www.google.com/chrome/).
@ -237,7 +253,7 @@ Create a folder on your desktop and call it 30DaysOfJS or in any location and c
```
```
Now, you wrote your first inline script. We can create a pop up alert message using the built-in *alert()* function.
Now, you wrote your first inline script. We can create a pop up alert message using the built-in *alert()* function.
## Internal script
### Internal script
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.
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.
First, let us write on the head part of the page.
@ -274,7 +290,7 @@ This is how we write the internal script most of the time. Writing the JavaScrip
Open the browser console to see the output from the console.log()
Open the browser console to see the output from the console.log()
## External script
### External script
Similar to the internal script, the external script link can be on the header or body, but it is preferred to put it in the body.
Similar to the internal script, the external script link can be on the header or body, but it is preferred to put it in the body.
First, we should create an external JavaScript file with .js extension. Any JavaScript file ends with .js. Create a file introduction.js inside your project directory and write the following code and link this .js file at the bottom of the body.
First, we should create an external JavaScript file with .js extension. Any JavaScript file ends with .js. Create a file introduction.js inside your project directory and write the following code and link this .js file at the bottom of the body.
```js
```js
@ -309,7 +325,7 @@ External scripts in the body
</html
</html
```
```
Open the browser console to see the output from the console.log()
Open the browser console to see the output from the console.log()
## Multiple External scripts
### Multiple External scripts
We can link multiple external JavaScript files to a web page.
We can link multiple external JavaScript files to a web page.
Create a helloworld.js file inside the 30DaysOfJS folder and write the following code.
Create a helloworld.js file inside the 30DaysOfJS folder and write the following code.
```js
```js
@ -331,9 +347,10 @@ console.log('Hello, World!')
Your main.js file should be below all other scripts. Watch out your exercise needs to understand this line.
Your main.js file should be below all other scripts. Watch out your exercise needs to understand this line.
# Introduction to Data types
## Introduction to Data types
In JavaScript and also other programming languages, there are different kinds of data types. The following are JavaScript primitive data types:_String, Number, Boolean, undefined, Null_, and _Symbol_.
In JavaScript and also other programming languages, there are different kinds of data types. The following are JavaScript primitive data types:_String, Number, Boolean, undefined, Null_, and _Symbol_.
## Number
### Number
- Integer: Integer(negative, zero and positive) numbers
- Integer: Integer(negative, zero and positive) numbers
Example:
Example:
@ -342,7 +359,7 @@ In JavaScript and also other programming languages, there are different kinds of
Example
Example
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
## String
### String
A collection of one or more characters under a single quote, double-quote, or backtick.
A collection of one or more characters under a single quote, double-quote, or backtick.
**Example:**
**Example:**
@ -355,7 +372,7 @@ A collection of one or more characters under a single quote, double-quote, or ba
`We can also create a string using a backtick`
`We can also create a string using a backtick`
```
```
## Booleans
### Booleans
A boolean value is either true or false. Any comparisons return a boolean value, which is either true or false.
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.
A boolean data type is either a True or False value.
@ -367,7 +384,7 @@ A boolean data type is either a True or False value.
false # if the light off, the value is False
false # if the light off, the value is False
```
```
## Undefined
### Undefined
In JavaScript, if we don't assign a value to a variable, the value is undefined. In addition to that, if a function is not returning anything, it returns undefined.
In JavaScript, if we don't assign a value to a variable, the value is undefined. In addition to that, if a function is not returning anything, it returns undefined.
```js
```js
@ -375,7 +392,7 @@ let firstName;
console.log(firstName); //not defined, because it is not assigned to a value yet
console.log(firstName); //not defined, because it is not assigned to a value yet
```
```
## Null
### Null
Null in JavaScript means an empty value.
Null in JavaScript means an empty value.
## Checking Data types
## Checking Data types
@ -389,7 +406,7 @@ console.log(typeof null) // object type
console.log(typeof undefined) // undefined
console.log(typeof undefined) // undefined
```
```
# Comments
## Comments
Commenting in JavaScript is similar to other programming languages. Comments are important in making your make code more readable.
Commenting in JavaScript is similar to other programming languages. Comments are important in making your make code more readable.
There are two ways of commenting:
There are two ways of commenting:
- _Single line commenting_
- _Single line commenting_
@ -410,7 +427,7 @@ Multiline commenting:
*/
*/
```
```
# Variables
## Variables
Variables are _containers_ of data. Variables 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. We will talk more about var, let, and const in detail in other sections (scope). For now, the above explanation is enough.
Variables are _containers_ of data. Variables 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. We will talk more about var, let, and const in detail in other sections (scope). For now, the above explanation is enough.
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*.
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*.
@ -502,11 +519,12 @@ When you run the files on 01-Day folder you should get this:
```
```
# 📔 Day 2
# 📔 Day 2
# Data types
## Data types
In the previous section, we mentioned a little bit about data types. Data or values have data types. Data types describe the characteristics of data. Data types can be divided into two
In the previous section, we mentioned a little bit about data types. Data or values have data types. Data types describe the characteristics of data. Data types can be divided into two
1. Primitive data types
1. Primitive data types
2. Non-primitive data types(Object References)
2. Non-primitive data types(Object References)
### Primitive Data Types
Primitive data types in JavaScript includes:
Primitive data types in JavaScript includes:
1. Numbers
1. Numbers
@ -545,7 +563,7 @@ let lightOn = true
let lightOff = false
let lightOff = false
console.log(lightOn == lightOff) // false
console.log(lightOn == lightOff) // false
```
```
### Non-Primitive Data Types
*Non-primitive* data types are modifiable or mutable. We can modify the value of non-primitive data types after it gets created.
*Non-primitive* data types are modifiable or mutable. We can modify the value of non-primitive data types after it gets created.
Let us see by creating an array. An array is a list of data values in a square bracket. Arrays can contain the same or different data types. Array values are referenced by their index. In JavaScript array index starts at zero. I.e., the first element of an array is found at index zero, the second element at index one, and the third element at index two, etc.
Let us see by creating an array. An array is a list of data values in a square bracket. Arrays can contain the same or different data types. Array values are referenced by their index. In JavaScript array index starts at zero. I.e., the first element of an array is found at index zero, the second element at index one, and the third element at index two, etc.
If you have a hard time understanding the difference between primitive data types and non-primitive data types, you are not the only one. Calm down and just go to the next section and try to come back after some time. Now let us start the data types by number type.
If you have a hard time understanding the difference between primitive data types and non-primitive data types, you are not the only one. Calm down and just go to the next section and try to come back after some time. Now let us start the data types by number type.
# Numbers
## Numbers
Numbers are integers and decimal values which can do all the arithmetic operations.
Numbers are integers and decimal values which can do all the arithmetic operations.
Lets' see some examples of Numbers.
Lets' see some examples of Numbers.
## Declaring number data types
### Declaring number data types
```js
```js
let age = 35
let age = 35
@ -605,7 +623,7 @@ const boilingPoint = 100 // temperature in oC, boiling point of water which is a
const bodyTemp = 37 // oC average human body temperature, which is a constant
const bodyTemp = 37 // oC average human body temperature, which is a constant
In JavaScript the Math Object provides a lots of methods to work with numbers.
In JavaScript the Math Object provides a lots of methods to work with numbers.
```js
```js
const PI = Math.PI
const PI = Math.PI
@ -645,7 +663,7 @@ Math.cos(0)
Math.cos(60)
Math.cos(60)
```
```
# Strings
## Strings
Strings are texts, which are under **_single_** or **_double_** quote. To declare a string, we need a variable name, assignment operator, a value under a single quote, double-quote, or backtick.
Strings are texts, which are under **_single_** or **_double_** quote. To declare a string, we need a variable name, assignment operator, a value under a single quote, double-quote, or backtick.
Lets' see some examples of string:
Lets' see some examples of string:
@ -660,7 +678,7 @@ let language = 'JavaScript'
let job = 'teacher'
let job = 'teacher'
```
```
## String Concatenation
### String Concatenation
Connect two or more strings together is called concatenation.
Connect two or more strings together is called concatenation.
```js
```js
@ -683,7 +701,7 @@ console.log(fullName);
Asabeneh Yetayeh
Asabeneh Yetayeh
```
```
We can concatenate string in different ways.
We can concatenate string in different ways.
### Concatenating using addition operator
#### Concatenating using addition operator
Concatenating using the addition operator is an old way. This way of concatenating is tedious and error-prone. It is good to know how to concatenate this way, but I strongly suggest to use the second way.
Concatenating using the addition operator is an old way. This way of concatenating is tedious and error-prone. It is good to know how to concatenate this way, but I strongly suggest to use the second way.
```js
```js
// Declaring different variables of different data types
// Declaring different variables of different data types
@ -702,7 +720,7 @@ console.log(personInfoOne)
```sh
```sh
Asabeneh Yetayeh. I am 250. I live in Finland
Asabeneh Yetayeh. I am 250. I live in Finland
```
```
### Template Literals(Template Strings)
#### Template Literals(Template Strings)
To create a template string, we use back two backticks. We can inject data as expression inside a template string. To inject data, we enclose the expression with a curly bracket({}) followed by a $ sign. See the syntax below.
To create a template string, we use back two backticks. We can inject data as expression inside a template string. To inject data, we enclose the expression with a curly bracket({}) followed by a $ sign. See the syntax below.
```js
```js
//Syntax
//Syntax
@ -746,7 +764,7 @@ console.log(`${a} is greater than ${b}: ${a > b}`)
```sh
```sh
2 is greater than 3: false
2 is greater than 3: false
```
```
## String Methods
### String Methods
Everything in JavaScript is an object. A string is a primitive data type that means we can not modify once it is created. The string object has many string methods. There are differnt string methods that can help us to work with strings.
Everything in JavaScript is an object. A string is a primitive data type that means we can not modify once it is created. The string object has many string methods. There are differnt string methods that can help us to work with strings.
1. *length*: The string *length* method returns the number of characters in a string included empty space.
1. *length*: The string *length* method returns the number of characters in a string included empty space.
A boolean data type represents one of the two values:_true_ or _false_. Boolean value is either true or false. The use of these data types will be clear when you start the comparison operator. Any comparisons return a boolean value which is either true or false.
A boolean data type represents one of the two values:_true_ or _false_. Boolean value is either true or false. The use of these data types will be clear when you start the comparison operator. Any comparisons return a boolean value which is either true or false.
@ -1029,7 +1048,7 @@ let isHungery = false;
let isMarried = true;
let isMarried = true;
```
```
### Undefined
## Undefined
If we declare a variable and if we do not assign a value, the value will be undefined. In addition to this, if a function is not returning the value will be undefined.
If we declare a variable and if we do not assign a value, the value will be undefined. In addition to this, if a function is not returning the value will be undefined.
```js
```js
@ -1037,23 +1056,27 @@ let firstName;
console.log(firstName); //not defined, because it is not assigned to a value yet
console.log(firstName); //not defined, because it is not assigned to a value yet
```
```
### Null
## Null
```js
```js
let empty = null;
let empty = null;
console.log(empty); // -> null , means no value
console.log(empty); // -> null , means no value
```
```
# Operators
## Operators
## Assignment operators
### Assignment operators
An equal sign in JavaScript is an assignment operator. It uses to assign a variable.
An equal sign in JavaScript is an assignment operator. It uses to assign a variable.
The following symbols are the common logical operators:
The following symbols are the common logical operators:
&&(ampersand) , ||(pipe) and !(negation).
&&(ampersand) , ||(pipe) and !(negation).
@ -1153,10 +1176,39 @@ let isLightOn = true;
let isLightOff = !isLightOn; // -> false
let isLightOff = !isLightOn; // -> false
let isMarried = !false; // -> true
let isMarried = !false; // -> true
```
```
### Increment Operator
In JavaScrip we use the increment operator to increase a value stored in a variable. The increment could be pre or post increment. Let us see each of them:
1. Pre-increment
```js
let count = 0
console.log(++count) // 1
console.log(count) // 1
```
2. Post-increment
```js
let count = 0
console.log(count++) // 0
console.log(count) // 1
```
We use most of the time post-increment. At leas you should remember how to use post-increment operator.
### Decrement Operator
In JavaScrip we use the decrement operator to decrease a value stored in a variable. The decrement could be pre or post decrement. Let us see each of them:
1. Pre-decrement
```js
let count = 0
console.log(--count) // -1
console.log(count) // -1
```
2. Post-decrement
```js
let count = 0
console.log(count--) // 0
console.log(count) // -1
```
### Operator Precendence
I would like to recommend you to read about operator precendence from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
# 💻 Day 2: Exercises
# 💻 Day 2: Exercises
## Exercises: String Part
## Exercises: String Part
1. Declare a variable name challenge and assign it to an initial value **'30 Days Of JavaScript'**.
1. Declare a variable name challenge and assign it to an initial value **'30 Days Of JavaScript'**.
Asabeneh
5 years ago
