Update Day 1 (Introduction)

I corrected some typo and grammatical errors. 
Also added some few sentences for easier understanding. 
And finally, improved the formatting of some paragraphs for easy readability.
pull/356/head
Obatula Fuad Adebari 3 years ago committed by GitHub
parent 2d2baae288
commit 3b5929a04f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -119,6 +119,7 @@
In this step by step JavaScript challenge, you will learn JavaScript, the most popular programming language in the history of mankind.
JavaScript is used **_to add interactivity to websites, to develop mobile apps, desktop applications, games_** and nowadays JavaScript can be used for **_machine learning_** and **_AI_**.
**_JavaScript (JS)_** has increased in popularity in recent years and has been the leading
programming language for six consecutive years and is the most used programming language on
Github.
@ -184,7 +185,8 @@ Ctl+Shift+J
![Opening console](images/opening_chrome_console_shortcut.png)
After you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console. The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code.
After you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console.
The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code.
Let us write a JavaScript code on the Google Chrome console:
![write code on console](./images/js_code_on_chrome_console.png)
@ -211,7 +213,8 @@ console.log('Hello, World!')
##### Console.log with Multiple Arguments
The **`console.log()`** function can take multiple parameters separated by commas. The syntax looks like as follows:**`console.log(param1, param2, param3)`**
The **`console.log()`** function can take multiple parameters separated by commas.
The syntax looks like as follows:**`console.log(param1, param2, param3)`**
![console log multiple arguments](./images/console_log_multipl_arguments.png)
@ -227,7 +230,7 @@ Congratulations! You wrote your first JavaScript code using _`console.log()`_.
##### Comments
We can 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. In JavaScript, any text line starting with // in JavaScript is a comment, and anything enclosed like this `//` is also a comment.
We can 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. In JavaScript, any text line starting with // in JavaScript is a comment, and anything enclosed like this `/* */` is also a comment.
**Example: Single Line Comment**
@ -249,7 +252,9 @@ This is a multiline comment
##### Syntax
Programming languages are similar to human languages. English or many other language uses words, phrases, sentences, compound sentences and other more to convey a meaningful message. The English meaning of syntax is _the arrangement of words and phrases to create well-formed sentences in a language_. The technical definition of syntax is the structure of statements in a computer language. Programming languages have syntax. JavaScript is a programming language and like other programming languages it has its own syntax. 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.
Programming languages are similar to human languages. English or many other language uses words, phrases, sentences, compound sentences and other more to convey a meaningful message. The English meaning of syntax is _the arrangement of words and phrases to create well-formed sentences in a language_. The technical definition of syntax is the structure of statements in a computer language. Programming languages have syntax.
JavaScript is a programming language and like other programming languages it has its own syntax. 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.
![Error](images/raising_syntax_error.png)
@ -273,7 +278,8 @@ console.log(`Hello, World!`)
Now, let us practice more writing JavaScript codes using _`console.log()`_ on Google Chrome console for number data types.
In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations.
It is possible to write JavaScript code on Google Chrome console can directly without the **_`console.log()`_** function. However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.
It is possible to write JavaScript code on Google Chrome console directly without the **_`console.log()`_** function.
However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.
![Arithmetic](images/arithmetic.png)
@ -329,7 +335,8 @@ The following sections show different ways of adding JavaScript code to your web
### Inline Script
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](https://www.google.com/chrome/).
Create a project folder on your desktop or in any location, name it 30DaysOfJS and create an **_`index.html`_** file in the project folder.
Paste the following code in the **_`index.html`_**, save it, then open it in a browser, for example [Chrome](https://www.google.com/chrome/).
```html
<!DOCTYPE html>
@ -343,11 +350,12 @@ Create a project folder on your desktop or in any location, name it 30DaysOfJS a
</html>
```
Now, you just wrote your first inline script. We can create a pop up alert message using the _`alert()`_ built-in function.
Now, you just wrote your first inline script.
_`alert()`_ is a buit-in JavaScript function we can use to create a pop up alert message.
### 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 so that it won't affect the load speed of your website.
First, let us write on the head part of the page.
```html
@ -363,7 +371,9 @@ First, let us write on the head part of the page.
</html>
```
This is how we write an internal script most of the time. Writing the JavaScript code in the body section is the most preferred option. Open the browser console to see the output from the `console.log()`.
This is how we write an internal script most of the time. Open the browser console to see the output from the `console.log()`.
Writing the JavaScript code in the body section is the most preferred option.
```html
<!DOCTYPE html>
@ -387,11 +397,13 @@ Open the browser console to see the output from the `console.log()`.
### 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.
First, we should create an external JavaScript file with .js extension. All files ending with .js extension are JavaScript files. Create a file named 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. All files ending with .js extension are JavaScript files.
Create a file named introduction.js inside your project directory and write the following code:
```js
console.log('Welcome to 30DaysOfJavaScript')
```
You can link the .js file in the head or in the body as we've shown bellow.
External scripts in the _head_:
@ -432,7 +444,7 @@ Create a `helloworld.js` file inside the 30DaysOfJS folder and write the followi
```js
console.log('Hello, World!')
```
Then you can link the second .js file as we've done below;
```html
<!DOCTYPE html>
<html lang="en">
@ -456,10 +468,10 @@ In JavaScript and also other programming languages, there are different types of
### Numbers
- Integers: Integer (negative, zero and positive) numbers
- Integers: Integer (negative, zero and positive) numbers.
Example:
... -3, -2, -1, 0, 1, 2, 3 ...
- Float-point numbers: Decimal number
- Float-point numbers: Decimal numbers.
Example
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
@ -524,7 +536,7 @@ console.log(typeof null) // object type
console.log(typeof undefined) // undefined
```
## Comments Again
## Comments, Again
Remember that commenting in JavaScript is similar to other programming languages. Comments are important in making your code more readable.
There are two ways of commenting:
@ -553,7 +565,9 @@ Multiline commenting:
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 not 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.
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 and Gravity have values that do not change. So, we can use _const_ to declare the variables.
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.
A valid JavaScript variable name must follow the following rules:
@ -596,14 +610,15 @@ Example of invalid variables:
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).
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).
```js
// Syntax
let nameOfVariable = value
```
The nameOfVriable is the name that stores different data of value. See below for detail examples.
The nameOfVariable is the name that stores different data of value. See below for detailed examples.
**Examples of declared variables**
@ -628,7 +643,7 @@ Asabeneh Yetayeh Finland Helsinki 100 true
let age = 100 // age in years
const gravity = 9.81 // earth gravity in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
const Pi = 3.14 // geometrical constant
console.log(gravity, boilingPoint, PI)
```
@ -637,7 +652,7 @@ console.log(gravity, boilingPoint, PI)
```
```js
// Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
// Variables can also be declared in one line separated by comma. However, I recommend to use a seperate line to make code more readble
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
console.log(name, job, live)
```

Loading…
Cancel
Save