https://kelly-chui.github.io/tags/dom/Recent content in DOM on Kelly DevHugoen-usMon, 09 Jun 2025 00:00:00 +0000https://kelly-chui.github.io/posts/javascript-basics-06-browser-and-document-object/Fri, 06 Jun 2025 00:00:00 +0000https://kelly-chui.github.io/posts/javascript-basics-06-browser-and-document-object/<h2 id="브라우저-객체-모델">브라우저 객체 모델</h2> <ul> <li>웹 브라우저와 관련된 객체의 집합</li> <li>대표적인 브라우저 객체 모델 <ul> <li>window, location, navigator, history, screen, document…</li> </ul> </li> </ul> <img alt="Screenshot 2025-06-06 at 12.30.02\u202fPM.png" loading="lazy" src="https://kelly-chui.github.io/posts/javascript-basics-06-browser-and-document-object/image-001-optimized-image.webp"><h3 id="window-객체"><code>window</code> 객체</h3> <p>브라우저 기반 자바스크립트의 최상위 객체</p> <ul> <li><code>alert()</code>, <code>prompt()</code>함수 모두 window 객체의 메소드</li> <li><code>open(URL, name, features, replace)</code>메소드를 통해서 window 객체 생성 가능 <ul> <li><code>URL</code>: 열고자 하는 HTML 페이지의 URL</li> <li><code>name</code>: 윈도우 간 통신하는 데 사용하는 윈도우 이름</li> <li><code>features</code>: 윈도우 출력 모양을 지정하는 옵션 <ul> <li><code>height</code>: 새 윈도우의 높이</li> <li><code>width</code>: 새 윈도우의 너비</li> </ul> </li> <li><code>replace</code>: URL이 새로운 것인가, 기존의 문서를 대체할 것인가를 나타내는 부울리언 값</li> </ul> </li> <li>window 객체는 자신의 형태와 위치를 변경할 수 있도록 메소드 제공 <ul> <li><code>moveBy(x, y)</code>: 윈도우의 위치를 상대적으로 이동합니다.</li> <li><code>moveTo(x, y)</code>: 윈도우의 위치를 절대적으로 이동합니다.</li> <li><code>resizeBy(x, y)</code>: 윈도우의 크기를 상대적으로 지정합니다.</li> <li><code>resizeTo(x, y)</code>: 윈도우의 크기를 절대적으로 지정합니다.</li> <li><code>close()</code>: 윈도우를 닫습니다.</li> </ul> </li> </ul> <h3 id="screen-객체"><code>screen</code> 객체</h3> <p>웹 브라우저의 화면이 아닌 운영체제 화면의 속성을 가치는 객체</p>https://kelly-chui.github.io/posts/javascript-basics-07-errors-and-events/Mon, 09 Jun 2025 00:00:00 +0000https://kelly-chui.github.io/posts/javascript-basics-07-errors-and-events/<h2 id="예외-처리">예외 처리</h2> <ul> <li>예외 → 실행에 문제가 발생하면 자동 중단됨</li> <li>예외 처리 → 오류에 대처할 수 있게 하는 것</li> </ul> <h3 id="예외와-기본-예외-처리">예외와 기본 예외 처리</h3> <ul> <li>TypeError 기본 예외 처리 <ul> <li>사전에 해당 데이터가 <code>undefined</code>인지 조건문으로 확인</li> </ul> </li> </ul> <h3 id="고급-예외-처리">고급 예외 처리</h3> <ul> <li><code>try</code>, <code>catch</code>, <code>finally</code> 구문</li> </ul> <div class="code-theme-github"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 예외 발생 </span></span></span><span class="line"><span class="cl"><span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">exception</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 예외 처리 </span></span></span><span class="line"><span class="cl"><span class="p">}</span> <span class="k">finally</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 무조건 실행 </span></span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div> <p><code>catch</code>구문, <code>finally</code>구문 생략 가능</p> <h3 id="예외-객체">예외 객체</h3> <p>예외가 발생하면 어떤 예외가 발생했는지 정보를 전달함, <code>catch</code> 구문의 괄호 안의 변수</p>