2025-01-24T02:27:50

.idea/.gitignore

@@ -1,3 +0,0 @@
-# 디폴트 무시된 파일
-/shelf/
-/workspace.xml

.idea/copyright/Elex_Project.xml

@@ -1,6 +0,0 @@
-<component name="CopyrightManager">
-  <copyright>
-    <option name="notice" value="Copyright (c) &amp;#36;originalComment.match(&quot;Copyright \(c\) (\d+)&quot;, 1, &quot;-&quot;, &quot;&amp;#36;today.year&quot;)&amp;#36;today.year. Elex. All Rights Reesrved.&#10;https://www.elex-project.com/" />
-    <option name="myName" value="Elex Project" />
-  </copyright>
-</component>

.idea/copyright/profiles_settings.xml

@@ -1,7 +0,0 @@
-<component name="CopyrightManager">
-  <settings>
-    <module2copyright>
-      <element module="Project Files" copyright="Elex Project" />
-    </module2copyright>
-  </settings>
-</component>

.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/javascript-examples.iml" filepath="$PROJECT_DIR$/javascript-examples.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

Writerside/c.list

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE categories
-        SYSTEM "https://resources.jetbrains.com/writerside/1.0/categories.dtd">
-<categories>
-    <category id="wrs" name="Writerside documentation" order="1"/>
-</categories>

Writerside/cfg/buildprofiles.xml

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-  ~ Copyright (c) 2024. Elex. All Rights Reesrved.
-  ~ https://www.elex-project.com/
-  -->
-
-<buildprofiles xsi:noNamespaceSchemaLocation="https://resources.jetbrains.com/writerside/1.0/build-profiles.xsd"
-               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-
-    <variables></variables>
-    <build-profile instance="j">
-        <variables>
-            <noindex-content>true</noindex-content>
-        </variables>
-    </build-profile>
-
-</buildprofiles>

Writerside/j.tree

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-  - Copyright (c) 2024. Elex. All Rights Reesrved.
-  - https://www.elex-project.com/
-  -->
-
-<!DOCTYPE instance-profile
-        SYSTEM "https://resources.jetbrains.com/writerside/1.0/product-profile.dtd">
-
-<instance-profile id="j"
-                 name="JavaScript"
-                 start-page="starter-topic.md">
-
-    <toc-element topic="starter-topic.md">
-        <toc-element topic="Datatype.md"/>
-        <toc-element topic="Flow-Control.md"/>
-        <toc-element topic="Function.md"/>
-        <toc-element topic="Operator.md"/>
-        <toc-element topic="Number.md"/>
-        <toc-element topic="Date.md"/>
-        <toc-element topic="String.md"/>
-        <toc-element topic="Regular-Expression.md"/>
-        <toc-element topic="Array.md">
-            <toc-element topic="Array-2.md"/>
-        </toc-element>
-        <toc-element topic="Object.md"/>
-        <toc-element topic="Iterator.md"/>
-        <toc-element topic="Module.md"/>
-        <toc-element topic="Promise.md"/>
-        <toc-element topic="This.md"/>
-        <toc-element topic="DocumentObjectModel.md"/>
-        <toc-element topic="Browser-Object-Model.md"/>
-        <toc-element topic="Ajax.md"/>
-        <toc-element topic="Web-Socket.md"/>
-        <toc-element topic="Canvas.md"/>
-    </toc-element>
-    <toc-element topic="JS-Cheet-Sheet.md"/>
-</instance-profile>

Writerside/redirection-rules.xml

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-  ~ Copyright (c) 2024. Elex. All Rights Reesrved.
-  ~ https://www.elex-project.com/
-  -->
-
-<!DOCTYPE rules SYSTEM "https://resources.jetbrains.com/writerside/1.0/redirection-rules.dtd">
-<rules>
-    <!-- format is as follows
-    <rule id="<unique id>">
-        <accepts>page.html</accepts>
-    </rule>
-    -->
-    <rule id="538983bd">
-        <description>Created after removal of "기본 타입" from JavaScript</description>
-        <accepts>Type.html</accepts>
-    </rule>
-    <rule id="56175d84">
-        <description>Created after removal of "Typescript" from JavaScript</description>
-        <accepts>TypeScript.html</accepts>
-    </rule>
-</rules>

Writerside/v.list

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE vars SYSTEM "https://resources.jetbrains.com/writerside/1.0/vars.dtd">
-<vars>
-    <var name="product" value="Writerside"/>
-</vars>

Writerside/writerside.cfg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-  - Copyright (c) 2024. Elex. All Rights Reesrved.
-  - https://www.elex-project.com/
-  -->
-
-<!DOCTYPE ihp SYSTEM "https://resources.jetbrains.com/writerside/1.0/ihp.dtd">
-
-<ihp version="2.0">
-    <topics dir="topics" web-path="topics"/>
-    <images dir="images" web-path="images"/>
-    <instance src="j.tree"/>
-</ihp>

app.sh

@@ -0,0 +1,10 @@
+#! /usr/bin/env bash
+
+case $1 in
+  gitup)
+    echo "Pushing to git"
+    git add -A
+    git commit -m $(date "+%Y-%m-%dT%H:%M:%S")
+    git push origin
+    ;;  
+esac

doc/00_javascript.md

@@ -0,0 +1,136 @@
+# 자바 스크립트
+
+## 자바스크립트의 역사와 발전
+자바스크립트는 1995년 넷스케이프 커뮤니케이션즈의 브렌던 아이크에 의해 개발된 스크립팅 언어입니다. 처음에는 LiveScript라는 이름으로 불렸지만, 당시 인기 있던 자바와의 유사성을 강조하기 위해 자바스크트라는 이름으로 바뀌었습니다.
+
+* 초기: 웹 페이지에 동적인 요소를 추가하기 위한 간단한 언어로 시작되었습니다.
+* 성장: ECMAScript 표준화를 통해 체계적인 발전을 이루었고, Node.js의 등장으로 서버 사이드 개발까지 영역을 확장했습니다.
+* 현재: 웹 개발의 필수 언어로 자리 잡았으며, 프론트엔드뿐만 아니라 백엔드, 모바일 앱 개발 등 다양한 분야에서 사용되고 있습니다.
+
+## 웹 브라우저에서의 역할
+자바스크립트는 웹 브라우저에서 실행되는 유일한 프로그래밍 언어입니다. HTML과 CSS로 구성된 정적인 웹 페이지에 동적인 기능을 부여하여 사용자와 상호 작용하는 풍부한 웹 애플리케이션을 개발할 수 있도록 합니다.
+
+* DOM 조작: HTML 문서의 구조를 변경하고 스타일을 조작하여 웹 페이지의 모습을 실시간으로 바꿀 수 있습니다.
+* 이벤트 처리: 사용자의 클릭, 마우스 이동 등 다양한 이벤트를 감지하고, 이에 대한 반응을 처리할 수 있습니다.
+* 비동기 처리: 서버와의 통신, 타임아웃 등 비동기적인 작업을 처리하여 웹 페이지의 응답성을 높일 수 있습니다.
+
+## HTML 문서에 스크립트 포함하는 방법
+HTML 문서에 자바스크립트 코드를 포함시키려면 `<script>` 태그를 사용합니다. 이 태그를 통해 웹 페이지에 동적인 기능을 부여하고 사용자와 상호 작용할 수 있는 풍부한 웹 애플리케이션을 개발할 수 있습니다.
+
+`<script>` 태그는 크게 세 가지 방식으로 사용할 수 있습니다.
+
+### 인라인 스크립트 (Inline Script)
+HTML 문서 내에 직접 자바스크립트 코드를 작성하는 방법입니다. 간단한 코드를 추가할 때 유용하지만, 코드가 길어지거나 복잡해질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다.
+```html
+<body>
+  <p>클릭하면 색깔이 바뀝니다.</p>
+  <button onclick="changeColor()">색깔 변경</button>
+
+  <script>
+    function changeColor() {
+      document.body.style.backgroundColor = 'skyblue';
+    }
+  </script>
+</body>
+```
+
+### 내부 스크립트 (Internal Script)
+`<head>` 또는 `<body>` 태그 내에 `<script>` 태그를 이용하여 자바스크립트 코드를 삽입하는 방법입니다. 인라인 스크립트보다는 코드를 관리하기 쉽지만, 여전히 HTML 문서와 자바스크립트 코드가 섞여 있어 가독성이 떨어질 수 있습니다.
+```html
+<head>
+  <script>
+    // 전역 변수나 함수를 선언하는 경우에 유용합니다.
+  </script>
+</head>
+
+<body>
+</body>
+```
+
+### 외부 스크립트 (External Script)
+자바스크립트 코드를 별도의 .js 파일로 만들어 src 속성을 이용하여 HTML 문서에 연결하는 방법입니다. 코드의 재사용성이 높고, HTML과 자바스크립트 코드를 분리하여 관리할 수 있어 가독성과 유지보수성이 뛰어납니다.
+```html
+<head>
+  <script src="script.js"></script>
+</head>
+```
+```javascript
+function changeColor() {
+  document.body.style.backgroundColor = 'skyblue';
+}
+```
+
+일반적으로 외부 스크립트 방식을 사용하는 것이 권장됩니다. 코드를 분리하여 관리하면 HTML과 자바스크립트 코드를 각각 집중해서 개발할 수 있으며, 코드의 재사용성을 높일 수 있습니다.
+
+### script 태그
+* `<script>` 태그는 `<head>` 또는 `<body>` 태그 내 어디든 위치할 수 있지만, 일반적으로 `<body>` 태그 바로 앞에 위치시키는 것이 좋습니다.
+* defer 속성을 사용하면 스크립트가 HTML 파싱이 완료된 후에 실행됩니다.
+* async 속성을 사용하면 스크립트가 다른 작업과 병렬로 실행됩니다.
+
+
+
+
+---
+
+자바스크립트 기본 문법
+
+2.3 제어문
+조건문 (if, else if, else)
+반복문 (for, while, do while)
+2.4 함수
+함수 선언과 호출
+매개변수와 반환값
+화살표 함수
+3. 객체지향 프로그래밍
+3.1 객체와 프로토타입
+객체 생성
+프로퍼티와 메소드
+프로토타입 체인
+3.2 생성자 함수와 클래스
+생성자 함수 작성
+클래스 문법
+상속
+3.3 this 키워드
+this의 의미와 활용
+함수 호출 방식에 따른 this의 값
+4. DOM 조작
+4.1 DOM 소개
+DOM 트리
+노드 종류
+4.2 DOM 선택
+getElementById
+querySelector
+querySelectorAll
+4.3 DOM 조작
+요소 추가, 삭제, 수정
+스타일 변경
+이벤트 처리
+5. 비동기 프로그래밍
+5.1 비동기의 필요성
+동기와 비동기의 차이
+5.2 콜백 함수
+콜백 함수의 개념
+콜백 지옥
+5.3 Promise
+Promise 생성과 처리
+then, catch, finally
+5.4 async/await
+비동기 코드 동기화
+await 키워드
+6. 고급 자바스크립트
+6.1 모듈
+모듈 시스템 (CommonJS, ES Modules)
+import, export
+6.2 클로저
+클로저의 개념과 활용
+6.3 고차 함수
+map, filter, reduce 등
+6.4 디자인 패턴
+자주 사용되는 디자인 패턴 소개
+7. 실전 예제
+7.1 웹 페이지 동적 구성
+AJAX를 이용한 데이터 가져오기
+웹 페이지 요소 동적으로 변경
+7.2 간단한 웹 애플리케이션 만들기
+To-Do List 만들기
+간단한 게임 만들기

doc/01_변수와_데이터_타입.md

@@ -0,0 +1,71 @@
+# 자바스크립트의 변수와 자료형
+자바스크립트에서 변수는 데이터를 저장하는 공간입니다. 우리가 프로그램을 만들 때 다양한 종류의 데이터(숫자, 문자, 등)를 사용하게 되는데, 이러한 데이터를 변수에 저장하여 필요할 때마다 사용할 수 있습니다.
+
+## 변수 선언
+변수를 선언할 때는 let, const, var 키워드를 사용합니다.
+
+* let: 가장 많이 사용되는 키워드로, 변수의 값을 재할당할 수 있습니다.
+* const: 상수를 선언할 때 사용하며, 한 번 값을 할당하면 변경할 수 없습니다.
+* var: 예전부터 사용되던 키워드이지만, let과 const의 등장으로 인해 사용이 줄어들었습니다. var로 선언된 변수는 함수 범위 내에서 유효하며, 재할당이 가능합니다.
+
+```javascript
+let age = 30; // let 키워드로 변수 선언
+const name = "홍길동"; // const 키워드로 상수 선언
+var city = "서울"; // var 키워드로 변수 선언
+```
+
+## 자료형
+자바스크립트에서 사용되는 주요 자료형은 다음과 같습니다.
+
+* Number: 숫자를 나타냅니다. 정수, 소수점, 무한대 등을 표현할 수 있습니다.
+* String: 문자열을 나타냅니다. 작은따옴표(')나 큰따옴표(")로 감싸서 표현합니다.
+* Boolean: 참(true) 또는 거짓(false)을 나타냅니다.
+* null: 값이 없음을 나타내는 특별한 키워드입니다.
+* undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
+* Object: 복잡한 데이터를 저장하기 위한 객체를 나타냅니다.
+* Symbol: 고유한 값을 생성하기 위한 자료형입니다.
+
+```javascript
+let num = 10; // 숫자
+let str = "hello"; // 문자열
+let isTrue = true; // 불리언
+let person = { name: "홍길동", age: 30 }; // 객체
+```
+
+## 자료형 변환
+자바스크립트는 동적 타이핑 언어이므로, 변수의 자료형이 실행 중에 변경될 수 있습니다.
+```javascript
+let x = 10; // x는 숫자
+x = "Hello"; // x는 문자열로 변환
+```
+
+## typeof 연산자
+변수의 자료형을 확인하려면 typeof 연산자를 사용합니다.
+```javascript
+let num = 10;
+console.log(typeof num); // "number" 출력
+```
+
+## 변수 범위
+* 전역 변수: 어디서든 접근 가능한 변수입니다.
+* 지역 변수: 함수 내에서만 사용 가능한 변수입니다.
+
+```javascript
+let globalVar = "전역 변수"; // 전역 변수
+
+function myFunction() {
+  let localVar = "지역 변수"; // 지역 변수
+  console.log(localVar); // 지역 변수 출력
+  console.log(globalVar); // 전역 변수 출력
+}
+```
+
+## 상수 (const)
+한 번 값을 할당하면 변경할 수 없는 값을 저장하는 데 사용됩니다.
+
+```javascript
+const PI = 3.14159;
+// PI = 3.1416; // 오류 발생 (상수의 값을 변경할 수 없음)
+```
+
+

doc/02_연산자.md

@@ -0,0 +1,75 @@
+# 연산자
+
+자바스크립트에서 연산자는 데이터를 가지고 다양한 연산을 수행하는 데 사용됩니다. 덧셈, 뺄셈과 같은 간단한 계산부터 복잡한 논리 연산까지, 연산자는 프로그램의 핵심적인 역할을 합니다.
+
+자바스크립트에서 사용되는 연산자는 크게 다음과 같이 분류할 수 있습니다.
+
+## 산술 연산자
+* 덧셈: +
+* 뺄셈: -
+* 곱셈: *
+* 나눗셈: /
+* 나머지: %
+* 증가: ++
+* 감소: --
+
+```javascript
+let x = 10;
+let y = 5;
+
+console.log(x + y); // 15
+console.log(x - y); // 5
+console.log(x * y); // 50
+console.log(x / y); // 2
+console.log(x % y); // 0
+```
+
+## 할당 연산자
+* 단순 할당: =
+* 복합 할당: +=, -=, *=, /=, %=
+
+```javascript
+let a = 10;
+a += 5; // a = a + 5; 와 같음
+console.log(a); // 15
+```
+
+## 비교 연산자
+* 같음: == (형 변환 후 비교), === (형 변환 없이 비교)
+* 다름: !=, !==
+* 크다: >
+* 작다: <
+* 크거나 같다: >=
+* 작거나 같다: <=
+
+```javascript
+let b = 10;
+console.log(b == "10"); // true (형 변환 후 비교)
+console.log(b === "10"); // false (형 변환 없이 비교)
+```
+
+## 논리 연산자
+* AND: &&
+* OR: ||
+* NOT: !
+
+```javascript
+let c = true;
+let d = false;
+console.log(c && d); // false
+console.log(c || d); // true
+console.log(!c); // false
+```
+
+## 문자열 연결 연산자
+* 문자열 연결: +
+```javascript
+let str1 = "Hello";
+let str2 = " World";
+console.log(str1 + str2); // Hello World
+```
+
+## 연산자 우선순위
+연산자는 각각 우선순위가 있으며, 우선순위가 높은 연산자가 먼저 계산됩니다.
+
+괄호를 사용하여 연산 순서를 변경할 수 있습니다.

javascript-examples.iml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="GENERAL_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>