기억하기 위한 기록

기본개념 본문

Front-end/js

기본개념

곽구 2021. 11. 18. 23:42

1. sum (2,4) ;

함수가 호출될 때 2,4를 뭐라고 부르는가? 인수

함수가 호출될 때 함수 내부로 들어가지는 데이터를 인수라고 한다. 인수는 데이터를 의미한다.

 

 

2. function sum (a,b) {

   return a+b;

}

함수선언에 function키워드가 붙어있고, 함수선언의 a,b와 같이 함수호출에서 전달받은 인수를 함수 내부로 전달하기 위한 변수를 무엇이라 하는가 ? 매개변수(파라미터)

함수가 호출될때 인수라고 부르는 데이터가 들어오니까, 들어오는 데이터를 매개체역할을 하여서 받아서 내부에서 사용하겠다는 의미를 가지고 있다.

 

3. 이름이 없는 함수는 ? 익명함수 (anonymous Function)

 

4. 함수 선언, 함수표현

const hello = function() {};

hello();

 

5. const user = {

     getName : function( ) { }

}

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

 

중괄호가 열리고 닫히면 객체데이터

getName이라는 이름의 속성을 만든 뒤, key와 value의 값으로 익명의 함수를 할당하고 있다.

메소드는 결과적으로 하나의 함수이며, 메소드로 호출하는것은 함수로 호출하는것이고 결국 함수가 어떤 객체의 속성에 할당되어있다는 점.

 

 

 

6. 조건이 참인 조건문을 작성하시오.

if (true) {

 

}

 

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

defer를 부여해야지만 js파일에서 body부분에 있는 내을 제대로 찾아서 동작시킬 수 있다.

 

8. <div class="box">Box!!</div>

위 html요소의 내용(content)을 콘솔에 출력해보자.

 

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

console.log(boxEl.textContent);

 

const를 통해 하나의 변수를 만들고 , box라는 클래스를 가진 부분을 할당해준다.

찾아진 boxEl부분에서 textContent라는 속성을 이용해서 반환된 값을 콘솔에 출력해준다.

.textContent 요소가가진 텍스트값을 확인.

 

 

9. 값을 재할당할 목적의 변수 선언 키워드는? let

 

일반적으로 변수는 const로 할당하지만, 재할당 될 변수들은 let을 이용해 선언해준드ㅏ.

 

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

box클래스를 클릭하면 콘솔에 헬로를 찍어보아라

 

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

      console.log('Hello~');

}

 

11. <div>1</div> <div>2</div>위 2개의 div요소에 js로 class="hello" 를 추가해보자

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

divEls.forEach(function(divEls){

     divEl.classList.add('hello');

});

변수를 하나 만들고, 검색되는 모든것을 찾는 querySelectorAll 이라는 DOM API를 이용해 div 태그선택자를 찾아서 할당해준다.
이것은 찾아진 여러 요소의 유사 배열 요소이기 떄문에 요소들의 인수로 익명의 함수를 추가해준다.
forEach
divEl 반복되는 요소들의 이름을 매개변수로 받을 수 있다. 매개변수의 이름은 직접 지을수있지만 직관적인것으로!
 
 
11. const boxEl = document.querySelector('.box');
위 코드의 boxEl 요소에 HTML 클래스 속서의 값으로 'active'가 포함되어있으면, 콘솔에 '포함됨!' 을 출력하시오.
- 조건이 들어가있음.
if(boxEl.classList.contains('active')){
  console.log('포함됨);
}

contains 메소드에서 false or true 값으로 확인할 수 있다.

active가 호팜되어있으면 true 아니면 false