* 구분하기 (매개변수/인수)
매개변수 : 함수 안에서 데이터를 받아주는 매개가 되는 변수
함수 안에서만 사용 가능
인수: 매개변수가 받아줄 특정한 데이터들
꼭 숫자가 아니더라도 문자, 숫자, 불린, undefined, null, 객체, 배열 데이터 모두 가능
기명(이름이 있는) 함수
함수 선언
function hello( ) {
console.log('Hello~');
}
익명(이름이 없는) 함수
함수 표현
let world = function ( ) {
console.log('World~');
}
함수 호출
hello( ); // Hello~
world( ); // World~
* 구분하기(선언/ 표현)
function 키워드에 이름을 직접적으로 명시하는 것은 함수의 선언
이름의 명시 없이 변수에 할당해서 사용하는 것은 함수의 표현
함수의 선언, 함수의 표현 모두 함수 호출 가능
객체 데이터
const heropy = {
name: 'HEROPY',
age: 85,
}
메소드(Method)
: 객체 데이터 내부의 속성부분에 일반적인 데이터가 아닌 함수가 할당되어 있으면 메소드(Method)라고 부름
getName: function( ) {
return this.name;
//여기에서 말하는 this는 this가 속해있는 객체 데이터를 의미
객체데이터 속에 있는 name이라는 속성이 가지고 있는 값을 의미
}
};
const hisName = heropy.getName( );
console.log(hisName); //HEROPY
//혹은
console.log(heropy.getName( )); // HEROPY
변수 이름(hisName) 쓸 때에는 뒤에 ( )안붙임
함수(getName( ))만 붙임
조건문
: 조건의 결과(thruthy, falsy)에 따라 다른 코드를 실행하는 구문
if, else
if ( 조건문 ) { 실행내용 } 형식으로 작성
조건문이 참이면 실행내용을 실행하고, 거짓이면 실행하지 않음
let isShow = true;
if (isShow) {
console.log('Show!');
} else {
console.log('Hide?');
}
위 경우 isShow가 true기 때문에 if문의 console.log('Show!');가 실행이 되고,
else문은 실행이 안됨
만약 isShow가 false면 if문은 실행되지않고, else문이 실행됨
DOM API
: 자바스크립트에서 HTML을 제어하는 여러가지 명령들
DOM은 Document Object Model을 의미
여기에서 Document는 HTML 내용들 의미하고
Object Model은 DIV, SPAN, INPUT 요소들을 의미함
API는 Applicatiion Programming Interface
웹사이트가 동작하기위해 입력하는 명령
defer
코드를 다 읽은 상태에서 다시 실행
코드는 위에서부터 읽기 때문에 아직 어떠한 정보가 명시되지 않은 상태에서 먼저 읽으라고 하면 오류가 남
이때 방법은 두가지가 있는데,
하나는 필요한 정보가 명시된 다음으로 코드를 옮기는 방법이고
두번째는 defer를 넣어주어 나중에 다시 실행하도록 하는 방법임
두번째 방법을 더 권장함
HTML 요소(Element) 1개 검색/찾기
: const boxEl = document.querySelector('.box);
=> boxEl이라는 변수를 const를 통해 선언하고, document라는 객체 안의 querySeelector라는 메소드를 사용하는데, 메소드의 인수로 찾으려고 하는 CSS의 속성인 '.box'를 명시함
찾으려고하는 CSS의 선택자에 맞게 HTML에서 찾아서 반환해주는데, 반환되는 값을 boxEl에 집어 넣음 (변수는 하나의 요소임)
querySelector는 찾으려고 하는 변수 중 가장 먼저 찾는 변수 하나만 반환함
HTML 요소에 적응할 수 있는 메소드
boxEl.addEventListener( );
인수(Arguments)를 추가 가능
boxEl.addEventListener( 1, 2 );
=> 여기에서 1, 2는 데이터가 아니라 두개의 인수를 넣을 수 있다는 의미
1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
2 - 핸들러(Handler, 실행할 함수) : 지정하는 익명의 함수
boxEl.addEventListener('click', function ( ) {
console.log('Click~!');
});
HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box');
요소의 클래스 정보 객체 활용
boxEl,classList.add('active');
let isContains = boxEl.classList.contains('active');
console.og(isContains); // true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false
