JavaScript - 문제 미리보기
문제 782
hard
jQuery와 JavaScript로 같은 작업을 수행하는 코드입니다. 빈칸에 들어갈 올바른 조합은?
```javascript
// jQuery
$(document).ready(function() {
var myElements = _______("p");
_______("demo").text("First paragraph: " + myElements[0].innerHTML);
});
// JavaScript
const myElements = document.getElementsByTagName("p");
document.getElementById("demo")._______ = "First paragraph: " + myElements[0].innerHTML;
```
정답: C
jQuery와 JavaScript의 요소 선택과 내용 설정 방법을 비교하는 종합 문제입니다.
코드 분석:
jQuery 부분:
```javascript
$(document).ready(function() {
// $("p") - 모든 p 태그 선택
var myElements = $("p");
// $("#demo") - ID가 demo인 요소 선택
// .text() - 텍스트 내용 설정
$("#demo").text("First paragraph: " + myElements[0].innerHTML);
});
```
JavaScript 부분:
```javascript
// getElementsByTagName으로 p 태그들 선택
const myElements = document.getElementsByTagName("p");
// getElementById로 demo 요소 선택, innerHTML로 내용 설정
document.getElementById("demo").innerHTML = "First paragraph: " + myElements[0].innerHTML;
```
텍스트 설정 방법:
```javascript
// jQuery
$("#demo").text("텍스트만"); // HTML 태그 무시
$("#demo").html("HTML"); // HTML 태그 해석
// JavaScript
element.textContent = "텍스트만"; // HTML 태그 무시
element.innerHTML = "HTML"; // HTML 태그 해석
```
현대적 JavaScript 대안:
```javascript
// DOMContentLoaded 이벤트 사용
document.addEventListener('DOMContentLoaded', function() {
const myElements = document.querySelectorAll("p");
document.getElementById("demo").innerHTML =
"First paragraph: " + myElements[0].innerHTML;
});
```
jQuery의 장점과 JavaScript의 발전:
• jQuery 시대: 브라우저 호환성 문제 해결, 간단한 문법
• 현재: 표준 JavaScript 기능 향상, jQuery 의존도 감소
• 선택 기준: 프로젝트 규모, 팀 선호도, 레거시 코드 고려
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.