diff --git a/03_Day/03_booleans_operators_date.md b/03_Day/03_booleans_operators_date.md index d4a890d3..b080789c 100644 --- a/03_Day/03_booleans_operators_date.md +++ b/03_Day/03_booleans_operators_date.md @@ -64,8 +64,8 @@ let isLightOn = true let isRaining = false let isHungry = false let isMarried = true -let truValue = 4 > 3 // true -let falseValue = 3 < 4 // false +let truValue = 4 > 3 // true +let falseValue = 4 < 3 // false ``` We agreed that boolean values are either true or false. diff --git a/11_Day/11_day_destructuring_and_spread.md b/11_Day/11_day_destructuring_and_spread.md index 44bf4ff0..60234bd4 100644 --- a/11_Day/11_day_destructuring_and_spread.md +++ b/11_Day/11_day_destructuring_and_spread.md @@ -13,7 +13,7 @@ -[<< Day 10](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/09_Day/09_day_Set_and_Map.md) | [Day 12>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) +[<< Day 10](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/10_Day/10_day_Set_and_Map.md) | [Day 12>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) ![Day 11](../images/banners/day_1_11.png) @@ -691,4 +691,4 @@ const users = [ ``` 🎉 CONGRATULATIONS ! 🎉 -[<< Day 10](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/09_Day/09_day_Set_and_Map.md) | [Day 12>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) \ No newline at end of file +[<< Day 10](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/10_Day/10_day_Set_and_Map.md) | [Day 12>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) \ No newline at end of file diff --git a/13_Day/13_day_console_object_methods.md b/13_Day/13_day_console_object_methods.md index 6026bd5a..a0fa4937 100644 --- a/13_Day/13_day_console_object_methods.md +++ b/13_Day/13_day_console_object_methods.md @@ -7,15 +7,17 @@ Twitter Follow - Author: - Asabeneh Yetayeh
- January, 2020 - +Author: +Asabeneh Yetayeh
+ January, 2020 + + -[<< Day 12](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) | [Day 14>>](#) +[<< Day 12](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) | [Day 14>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_error_handling.md) ![Thirty Days Of JavaScript](../images/banners/day_1_13.png) + - [Day 13](#day-13) - [Console Object Methods](#console-object-methods) - [console.log()](#consolelog) @@ -39,16 +41,16 @@ In this section, we will cover about console and console object methods. Absolute beginners usually do not know which to use: console.log(), document.write() or document.getElementById. -We use console object methods to show output on the browser console and we use document.write to show output on the browser document(view port). Both methods used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. We use document.getElementById() when we like to interact with DOM try using JavaScript. We will cover DOM in another section. +We use console object methods to show output on the browser console and we use document.write to show output on the browser document(view port). Both methods used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. We use document.getElementById() when we like to interact with DOM try using JavaScript. We will cover DOM in another section. -In addition to the famous, console.log() method, the console provides other more methods methods. +In addition to the famous, console.log() method, the console provides other more methods methods. ### console.log() We use console.log() to show output on the browser console. We can substitute values and also we can style the logging out put using %c. - Showing output on browser console - + ```js console.log('30 Days of JavaScript') ``` @@ -72,17 +74,26 @@ console.log('%d %s of JavaScript', 30, 'Days') We can style logging message using css. Copy the following code and paste it on browser console to see the result. ```js -console.log('%c30 Days Of JavaScript','color:green') // log output is green -console.log('%c30 Days%c %cOf%c %cJavaScript%c','color:green','', 'color:red', '', 'color:yellow') // log output green red and yellow text +console.log('%c30 Days Of JavaScript', 'color:green') // log output is green +console.log( + '%c30 Days%c %cOf%c %cJavaScript%c', + 'color:green', + '', + 'color:red', + '', + 'color:yellow' +) // log output green red and yellow text ``` ### console.warn() -We use console.warn() to give warning on browser. For instance to inform or warn deprecation of version of a package or bad practices. Copy the following code and paste it on browser console to see warning messages. +We use console.warn() to give warning on browser. For instance to inform or warn deprecation of version of a package or bad practices. Copy the following code and paste it on browser console to see warning messages. ```js console.warn('This is a warning') -console.warn('You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!') +console.warn( + 'You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!' +) console.warn('Warning is different from error') ``` @@ -110,11 +121,11 @@ Let us also check the result of an object. This creates table with two columns:a ```js const user = { - name:'Asabeneh', - title:'Programmer', - country:'Finland', - city:'Helsinki', -age:250 + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 } console.table(user) ``` @@ -122,65 +133,73 @@ console.table(user) Check the rest of the examples by copying and paste on the browser console. ```js -const countries = [['Finland', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo']] +const countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'] +] console.table(countries) ``` ```js const users = [ -{ - name:'Asabeneh', - title:'Programmer', - country:'Finland', - city:'Helsinki', - age:250 -}, -{ - name:'Eyob', - title:'Teacher', - country:'Sweden', - city:'London', - age:25 -}, -{ - name:'Asab', - title:'Instructor', - country:'Norway', - city:'Oslo', - age:22 -}, -{ - name:'Matias', - title:'Developer', - country:'Denmark', - city:'Copenhagen', - age:28 -} + { + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 + }, + { + name: 'Eyob', + title: 'Teacher', + country: 'Sweden', + city: 'London', + age: 25 + }, + { + name: 'Asab', + title: 'Instructor', + country: 'Norway', + city: 'Oslo', + age: 22 + }, + { + name: 'Matias', + title: 'Developer', + country: 'Denmark', + city: 'Copenhagen', + age: 28 + } ] console.table(users) ``` ### console.time() + Starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started. ```js -const countries = [['Finland', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo']] +const countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'] +] console.time('Regular for loop') -for(let i = 0; i < countries.length; i++) { - console.log(countries[i][0], countries[i][1]) - +for (let i = 0; i < countries.length; i++) { + console.log(countries[i][0], countries[i][1]) } console.timeEnd('Regular for loop') console.time('for of loop') -for(const [name, city] of countries) { +for (const [name, city] of countries) { console.log(name, city) } console.timeEnd('for of loop') console.time('forEach loop') -countries.forEach(([name, city])=> { +countries.forEach(([name, city]) => { console.log(name, city) }) console.timeEnd('forEach loop') @@ -222,9 +241,9 @@ console.assert(4 > 3, '4 is greater than 3') // no result console.assert(3 > 4, '3 is not greater than 4') // Assertion failed: 3 is not greater than 4 for (let i = 0; i <= 10; i += 1) { - let errorMessage = `${i} is not even`; - console.log('the # is ' + i); - console.assert(i % 2 === 0, {number: i, errorMessage: errorMessage}) + let errorMessage = `${i} is not even` + console.log('the # is ' + i) + console.assert(i % 2 === 0, { number: i, errorMessage: errorMessage }) } ``` @@ -234,43 +253,47 @@ The console.group() can help to group different log groups. Copy the following c ```js const names = ['Asabeneh', 'Brook', 'David', 'John'] -const countries = [['Finland', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo']] +const countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'] +] const user = { - name:'Asabeneh', - title:'Programmer', - country:'Finland', - city:'Helsinki', -age:250 + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 } const users = [ -{ - name:'Asabeneh', - title:'Programmer', - country:'Finland', - city:'Helsinki', - age:250 -}, -{ - name:'Eyob', - title:'Teacher', - country:'Sweden', - city:'London', - age:25 -}, -{ - name:'Asab', - title:'Instructor', - country:'Norway', - city:'Oslo', - age:22 -}, -{ - name:'Matias', - title:'Developer', - country:'Denmark', - city:'Copenhagen', - age:28 -} + { + name: 'Asabeneh', + title: 'Programmer', + country: 'Finland', + city: 'Helsinki', + age: 250 + }, + { + name: 'Eyob', + title: 'Teacher', + country: 'Sweden', + city: 'London', + age: 25 + }, + { + name: 'Asab', + title: 'Instructor', + country: 'Norway', + city: 'Oslo', + age: 22 + }, + { + name: 'Matias', + title: 'Developer', + country: 'Denmark', + city: 'Copenhagen', + age: 28 + } ] console.group('Names') @@ -285,7 +308,6 @@ console.group('Users') console.log(user) console.log(users) console.groupEnd() - ``` ### console.count() @@ -294,7 +316,7 @@ It prints the number of time this console.count() is called. It takes a string l ```js const func = () => { - console.count('Function has been called') + console.count('Function has been called') } func() func() @@ -311,19 +333,19 @@ Function has been called: 3 The console.clear() cleans the browser console. -🌕 Keep up the good work. Keep pushing, the sky is the limit! You have just completed day 13 challenges and you are 13 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. +🌕 Keep up the good work. Keep pushing, the sky is the limit! You have just completed day 13 challenges and you are 13 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. ## Exercises ### Exercises:Level 1 - 1. Display the countries array as a table - 2. Display the countries object as a table - 3. Use console.group() to group logs +1. Display the countries array as a table +2. Display the countries object as a table +3. Use console.group() to group logs ### Exercises:Level 2 -1. 10 > 2 * 10 use console.assert() +1. 10 > 2 \* 10 use console.assert() 2. Write a warning message using console.warn() 3. Write an error message using console.error() @@ -331,7 +353,6 @@ The console.clear() cleans the browser console. 1. Check the speed difference among the following loops: while, for, for of, forEach - 🎉 CONGRATULATIONS ! 🎉 -[<< Day 12](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) | [Day 14>>](#) \ No newline at end of file +[<< Day 12](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) | [Day 14>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_error_handling.md)