Sparta 챌린지 반 - 기본 실력 체크 2탄

1. DOM 조작

• DOM이 무엇인지 설명할 수 있다.
  • DOM이란 The Document Object Model로 HTML, XML 문서의 프로그래밍 interface이다.
  • DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
  • 이것을 풀어서 설명하자면 웹 페이지는 일종의 문서(Document)이다.
    이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.
    
  • DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
  • DOM은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
  • 결국, DOM은 HTML문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조이다.
• 기본적인 DOM 메서드 (ex: getElementById, querySelector)의 사용법을 안다.
  • getElementById는 태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수입니다.
  • querySelector는 특정 name, id, class를 제한하지않고 특정 요소에 접근하기 위해 css선택자를 사용하여 요소를 찾습니다.
  • 사용법은 밑에 적겠습니다.

//HTML
<button id="jsmode">바뀌기 전 text</button>

//JS
const mode = document.getElementById("jsmode");
mode.addEventListener("click", function() {
  if (mode.innerText === "바뀌기 전 text") {
    mode.innerText = "바뀐 text!";
  } else {
    mode.innerText = "바뀌기 전 text";
  }
});

// querySelector 기본 사용법
querySelector(#id) => id 값 id를 가진 요소를 찾습니다.
querySelector(.class) => class 값 class를 가진 요소를 찾습니다.

// querySelectorAll 사용법
querySelectorAll("#id,.class");

// 예시로 버튼을 누르면 버튼 글자가 바뀌는 스크립트입니다.
// HTML
<div id="sections">
  <ol class="section">
    1
    <li>1-1</li>
    <li>1-2</li>
    <li>1-3</li>
  </ol>

  <ol class="section">
    2
    <li>2-1</li>
    <li>2-2</li>
    <li>2-3</li>
  </ol>
</div>

// Js(querySelector)
var section = document.querySelector("#sections .section");

section.style.border = "1px solid #ff0000";

• DOM 요소의 속성과 스타일을 변경하는 방법을 안다.

// 요소의 내용 변경: innerHTML 또는 textContent 속성을 사용하여 
// 요소의 내용을 변경할 수 있습니다.
let element = document.getElementById('myId');
element.innerHTML = '새로운 내용';
또는
let element = document.getElementById('myId');
element.textContent = '새로운 내용';

// 요소의 속성 변경: setAttribute() 메서드를 사용하여 요소의 속성을 변경할 수 있습니다.
let element = document.getElementById('myId');
element.setAttribute('바꿀속성명', '바꿀속성값');

<button>Hello World</button>

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

// 클래스 추가/삭제: classList 객체의 add(), remove(), toggle() 메서드를 사용하여 
// 요소의 클래스를 추가, 삭제 또는 토글할 수 있습니다.
let element = document.getElementById('myId');
element.classList.add('myClass'); // 클래스 추가
element.classList.remove('myClass'); // 클래스 제거
element.classList.toggle('myClass'); // 클래스 토글

// 요소의 스타일 변경: style 속성을 사용하여 요소의 CSS 스타일을 변경할 수 있다.
let element = document.getElementById('myId');
element.style.color = 'blue';

2. 이벤트

• JavaScript에서 이벤트가 무엇인지 설명할 수 있다.
  • 이벤트란 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말한다.
  • 즉, 웹 페이지에서 무언가가 일어났다! 라는 신호이다.
  • 이벤트란 우리가 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 겁니다.
• 기본적인 이벤트 리스터 (예: addEventListener)의 사용법을 안다.

//HTML
<button id="jsmode">바뀌기 전 text</button>

//JS
const mode = document.getElementById("jsmode");
mode.addEventListener("click", function() {
  if (mode.innerText === "바뀌기 전 text") {
    mode.innerText = "바뀐 text!";
  } else {
    mode.innerText = "바뀌기 전 text";
  }
});

 

3. 오류 처리

• try, catch, finally 구문의 사용법을 안다.
  • try catch문은 예외발생 상황 지정입니다.
  • 즉, try문안에서 예외가 발생하면 즉시 catch문에 들어와 에러에 관한 코드가 실행됩니다.
  • finally는 예외 발생여부와 상관없이 무조건적으로 실행되는 코드입니다.
  • try... catch
  • try ... finally
  • try ... catch ... finally

try {
  alert('문제없이 실행됐습니다.');
  정의되지않은문장;	// err발생 부분
  alert('무시되는 코드');
} catch (err) {
  alert('문제가 있네요?');
}


try {
  alert('문제없이 실행됐습니다.');
} catch (err) {
  alert('무시된 블럭입니다.');
} finally {
  alert('실행을 마칩니다.');
}

• 오류 객체 (Error object)를 생성하고 처리하는 방법을 안다.
  • 오류 객체는 Error 생성자를 말한다.
  • 오류 객체의 매개변수로는 message, fileName, lineNumber가 있습니다.

// 생성방법
new Error();
new Error(message);
new Error(message, fileName);
new Error(message, fileName, lineNumber);

try {
	let user = JSON.parse(json); // 서버에서 사용자 정보를 가져오는 코드
    	
    if(!user.name) {
      	throw new SyntaxError('불완전한 데이터: 이름 없음'); // 에러 생성
    }
} catch(e) {
  	alert('JSON Error: ' + e.message); // JSON Error: 불완전한 데이터: 이름 없음
}

• throw 키워드를 사용하여 예외를 발생시킬 수 있다.
  • 위의 예시로 해결이 되었다고 봅니다.

 

이걸로 챌린지반 기초는 해결했습니다.

다음 TIL은 챌린지반 심화로 오겠습니다.