JavaScript Exercises

Basic JavaScript Examples & ES6+ Theory for Modern Web Development

📖 Index

📂 Moden JS ES6+

• 👀 Main Reference : 드림코딩 by 엘리

• 👀 Reference Modern JavaScript Tutorial

1. course 1 : 'use strict'
2. course 2

• bigInt
• template literal

3. course 3 - operator.js

• String concatenation
• Numeric operators
• Increment and decrement operators
• Assignment operators
• Logical OR operators nullish_coalescing_op.js
• Equality (==, ===)
• Conditional Operators
• Ternary operator
• Loops (break, continue operator)
• nullish coalescing operator nullish_coalescing_op.js

4. course 4 - function.js

• function
• parameters
• default parameters
• Rest parameters, for .. of, forEach
• Local scope
• Decorators
• call()/apply()

functionExpression.js

• anonymous function
• named function
• arrow function
• IIFE (Immediately Invoked Function Expression)

functionDeclaration.js

• local variable, outer variable
• parameter
• default value
• return value
• function naming

5. course 5 :

• What is Class class.md, class.js
• class declaration
• Getter and Setter
• Fields (Public, Private) 👀
• Static properties and methods 👀
• Inheritance class_inheritance.js
  • class_task.js, class_task2.js, class_task3
• instanceof operator

6. course 6

object.js : 👀 참고한 블로그 글

• literals and properties
• property value shorthand
• constructor
• in operator
• for .. in, for.. of
• cloning

🎯 Modern_tutorial_Objects: the basics

1. objects
2. Objects reference and copying
3. Garbage collection
4. Object methods, 'this'
5. Constructor, operator 'new'
6. Optional Chaining : ?
7. Symbol type 7_Symbol_Type
8. Object to primitive conversion

Array : 👀 참고한 블로그 글

• array_quiz.js, array-api.js
• array_useful.js (find, map, some, every, reduce, reduceRight, filter)
• array.js (Declaration, Index position, length property, Sparce Array, forEach, for of, add and remove, indexOf, lastIndexOf, array-like object, join)
• 📂 Array : splice_ex.js (slice, splice, join, filter 예제)

7. course 7

• JSON

8. course 8

• async await promise

9. course 9 : Advanced working with functions

• Rest parameters and spread syntax rest_parameter.js, spread_syntax.js
• "argument" variable arguments_variable.js

10. course 10 : Module System

11. course 11 : Browser and data storage in browser : How to handle page in a browser

• Document browser_events.md
• Introduction to Events
• UI Events
  • arguments.callee의 대안
• Forms and Controls form_and_control (tabindex, focus/blur, focusin/focusout)
• Document and Resource Loading
• Miscellaneous
• Web storage webStorage.html
  • 브라우저에 데이터 저장하기 : WebStorage(localStorage와 SessionStorage) & Cookie #1
  • 브라우저에 데이터 저장하기 : WebStorage(localStorage와 SessionStorage) & Cookie #2
• History, Hash : vanilla_routing.md

12. course 12 : 🎯 Modern_tutorial_Data types : More Data Structure and more in-depth study of the types

    1. Methods of primitives
    2. Numbers
    3. Strings
    4. Arrays
    5. Array methods
    6. Iterables
    7. Map and Set
    8. WeakMap and WeakSet
    9. Object.keys, values, entries
    10. Destructuring assignment 10_destructuring assignment
    11. Date and time
    12. JSON methods, toJSON

13. course 13 : Error Handling

📂 JavaScript-Excercises, Practice, Solution

👀 Reference w3resource

1. Write a JavaScript program to display the current day and time in the following format. setInterval, querySelector, date

---

1. 30s_01.js : Write a JavaScript program to compare two objects to determine if the first one contains equivalent property values to the second one. Object.keys, hasOwnProperty(), every()

📂 Accessibility

웹 접근성에 관한 자바스크립트 및 HTML 예제

1. 탭 인덱스(tabindex) | tabindex.html
2. 대체 텍스트 | Alt Text

📂 Algorithm

1. 나눗셈을 뺄셈으로 계산하는 알고리즘 (3-1-1.html)
2. 나눗셈을 뺄셈으로 계산하는 알고리즘 (소수점 이하 계산 허용) (3-1-2.html)
3. 문자열 검색 알고리즘의 두 가지 방법 (4-1-1.html)