You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
41
43
42
-
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.
44
+
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.
43
45
44
-
In addition to the famous, console.log() method, the console provides other more methods methods.
46
+
In addition to the famous, console.log() method, the console provides other more methods methods.
45
47
46
48
### console.log()
47
49
48
50
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.
49
51
50
52
- Showing output on browser console
51
-
53
+
52
54
```js
53
55
console.log('30 Days of JavaScript')
54
56
```
@@ -72,17 +74,26 @@ console.log('%d %s of JavaScript', 30, 'Days')
72
74
We can style logging message using css. Copy the following code and paste it on browser console to see the result.
73
75
74
76
```js
75
-
console.log('%c30 Days Of JavaScript','color:green') // log output is green
76
-
console.log('%c30 Days%c %cOf%c %cJavaScript%c','color:green','', 'color:red', '', 'color:yellow') // log output green red and yellow text
77
+
console.log('%c30 Days Of JavaScript', 'color:green') // log output is green
78
+
console.log(
79
+
'%c30 Days%c %cOf%c %cJavaScript%c',
80
+
'color:green',
81
+
'',
82
+
'color:red',
83
+
'',
84
+
'color:yellow'
85
+
) // log output green red and yellow text
77
86
```
78
87
79
88
### console.warn()
80
89
81
-
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.
90
+
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.
82
91
83
92
```js
84
93
console.warn('This is a warning')
85
-
console.warn('You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!')
94
+
console.warn(
95
+
'You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!'
96
+
)
86
97
console.warn('Warning is different from error')
87
98
```
88
99
@@ -110,77 +121,85 @@ Let us also check the result of an object. This creates table with two columns:a
110
121
111
122
```js
112
123
constuser= {
113
-
name:'Asabeneh',
114
-
title:'Programmer',
115
-
country:'Finland',
116
-
city:'Helsinki',
117
-
age:250
124
+
name:'Asabeneh',
125
+
title:'Programmer',
126
+
country:'Finland',
127
+
city:'Helsinki',
128
+
age:250
118
129
}
119
130
console.table(user)
120
131
```
121
132
122
133
Check the rest of the examples by copying and paste on the browser console.
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.
@@ -294,7 +316,7 @@ It prints the number of time this console.count() is called. It takes a string l
294
316
295
317
```js
296
318
constfunc= () => {
297
-
console.count('Function has been called')
319
+
console.count('Function has been called')
298
320
}
299
321
func()
300
322
func()
@@ -311,27 +333,26 @@ Function has been called: 3
311
333
312
334
The console.clear() cleans the browser console.
313
335
314
-
🌕 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.
336
+
🌕 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.
315
337
316
338
## Exercises
317
339
318
340
### Exercises:Level 1
319
341
320
-
1. Display the countries array as a table
321
-
2. Display the countries object as a table
322
-
3. Use console.group() to group logs
342
+
1. Display the countries array as a table
343
+
2. Display the countries object as a table
344
+
3. Use console.group() to group logs
323
345
324
346
### Exercises:Level 2
325
347
326
-
1. 10 > 2 * 10 use console.assert()
348
+
1. 10 > 2 \* 10 use console.assert()
327
349
2. Write a warning message using console.warn()
328
350
3. Write an error message using console.error()
329
351
330
352
### Exercises:Level 3
331
353
332
354
1. Check the speed difference among the following loops: while, for, for of, forEach
333
355
334
-
335
356
🎉 CONGRATULATIONS ! 🎉
336
357
337
-
[<< Day 12](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) | [Day 14>>](#)
358
+
[<< 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)
0 commit comments