JavaScript 선행 학습 간단 질문

Q. 1

The quick brown fox 를 camelCase(낙타 표기법)로 작성하시오.

A. theQuickBrownFox

 

Q. 2

let fruit = ['Apple', 'Banana', 'Cherry']; 데이터를 활용해 'Banana'를 콘솔출력하시오.

A. console.log(fruit[1]);

 

Q 3

불린 데이터(Boolean)에서 거짓을 의미하는 데이터는?

A. false

 

Q. 4

값이 의도적으로 비어있음을 나타내는 데이터는?

A. null

 

Q. 5

{ } 이 데이터의 종류는?

A. Object(객체 데이터)

 

Q. 6

let obj = { abc: 123 };

console.log(obj.xyz);

위 코드를 통해 콘솔에 출력될 값(데이터)은?

A. Undefined

 

Q. 7

값(데이터)을 재할당할 수 없는 변수선언 키워드는?

A. const

 

Q. 8

이름이 없는 함수와 이름이 있는 함수를 각각 무엇이라 하는가?

A. 익명함수, 기명함수

 

Q. 9

hello 이름의 함수 표현을 작성하고 호출하시오.

A.

const hello = function () {};

hello();

 

Q. 10

const user = {

  getName: function ( ) { }

}

위 코드의 getName과 같이 함수가 할당된 객체 데이터의 속성(Property)을 무엇이라 하는가?

A. 메소드(Method)

 

Q. 11

조건이 참(true)인 조건문을 작성하시오.

A. if (true) { }; // true, 1, 2, { } 가능

 

Q. 12

가져온 JS 파일을 HTML 문서 분석 이후에 실행되도록 지시하는 HTML 속성(Attribute)은?

A. defer // <script defer src='./main.js'></script>

 

Q. 13

<div class="box">Box!!</div> 해당 HTML 요소의 내용(Content)을 콘솔 출력 하시오!

A.

const boxEl = document.querySelector('.box');

console.log(boxEl.textContent);

 

Q. 14

const boxEl = document.querySelector('.box');

위 코드의 boxEl 요소에 클릭(Click) 이벤트를 추가해, 클릭 시 'Hello~'를 콘솔 출력하시오

A.

boxEl.addEventListener('click', function () {

  console.log('Hello~');

});

 

Q. 15

<div>1</div>

<div>2</div>

위 2개의 DIV 요소에 JS로 class = "hello"를 추가하시오

A.

const divEls = document.querySelectorAll('div');

divEls.forEach(function (divEl) {

  divEl.classList.add('hello');

});

 

Q. 16

const boxEl = document.querySelector('.box');

위 코드의 boxEl 요소에 HTML 클래스 속성의 값으로 'active'가 포함되어 있으면, '포함됨!'을 콘솔 출력하시오

A.

if (boxEl.classList.contains('active')) {

  console.log("포함됨!");

}