[프론트엔드 입문] 자바스크립트 JS 변수/예약어/함수 /DOM API_ Day+12
1. 변수
데이터를 저장하고, 저장된 데이터를 참조(사용)하는 데이터의 이름
e.g.) var, let, const...
- 변수를 여러 번 재사용이 가능함
- 원하는 이름의 변수를 선언함
let a = 2;
let b = 5;
console.log(a+b); // 7
console.log(a-b); // -3
console.log(a*b); // 10
console.log(a/b); // 0.4
let - 값(데이터)을 재할당 할 수 있음
let a = 12;
console.log(a); //12
a = 999;
console.log(a); // 999
const - 값(데이터) 재할당 불가능
const a = 12;
console.log(a); // 12
a = 999;
console.log(a); //TypeError: Assignment to constant variable.
변수 생성 시 기본적으로는 const입력, 일부 수정 필요한 변수 활용할 때만 let으로 코드 수정해서 사용
var는 사용안하는 것 추천
2. 예약어
특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어 (Reserved Word)
e.g. this, if, break... (일부 명령어들, 자주 사용하는 건 외워짐, 에디터에서 활용불가한 건 빨갛게 에러표시 남)
let this = 'Hello!' // SyntaxError
let if = 123; // SyntaxError
let break = true; // SyntaxError
3. 함수 (function)
특정 동작(기능)을 수행하는 일부 코드의 집합 (부분)
명령들을 감싸고 있는 일부 코드의 집합
// 함수 선언
function helloFunc() { 원하는 함수 이름 만들 수 있음
// 실행 코드
console.log(1234);
}
// 함수 호출
helloFunc(); // 1234
- 함수는 반환할 수 있음 (return)
function returnFunc() {
return 123;
}
let a = returnFunc(); returnFunc();에서 반환한 데이터를 'a' 변수가 받도록 하는 명령
console.log(a); //123 returnFunc()에서 내보내기된 데이터를 a가 받아서 출력한 값 123
- 함수 선언
function sum(a, b) { // a와 b는 매개변수 (parameters)
return a+b;
}
//재사용
let a = sum(1, 2); // 1과 2는 인수(Arguments)를 넣어서 sum함수를 호출
let b = sum(7, 12);
let c = sum(2, 4);
console.log(a,b,c); // 3, 19, 6
- 기명(이름이 있는) 함수 : 함수를 선언한다고 말한다.
function hello() {
console.log('Hello~');
}
- 익명(이름이 없는) 함수 (anonymous function) : 함수를 표현한다고 말함 (나중에 Hoisting에서도 참고)
- 데이터로 활용, 또는 변수에 할당해서 사용
let world = function() {
console.log('World~');
}
- 함수 호출
hello(); // Hello~
world(); // World~
// 객체 데이터
const hej = {
name : 'SWEDISH',
age : 20,
// 메소드(Method) >>>객체 내 속성 부분에 일반적 데이터 말고 함수가 할당되어 있으면, method
getName : function () { >>> 함수선언X. 함수의 표현O, function키워드 뒤에 이름이 없음.
return this.name; >>>this. 는 this가 소속된 데이터 내의 .name 값을 가져오는 것.
}
};
const hisName = hej.getName();
console.log(hisName); // SWEDISH
//혹은
console.log(hej.getName()); // SWEDISH
4. 조건문
조건의 결과(truthy, falsy) 에 따라 다른 코드를 실행하는 구문
e.g. if, else
let isShow = true;
let checked = false;
if (isShow) {
console.log('Show'); // Show
}
if (checked) {
console.log('Checked') ;
}
let isShow = true;
if (isShow) {
console.log('Show'); // Show
} else {
console.log('checked') //checked
}
5. DOM API (Document Object Model, Application Programming Interface)
정보 객체
Document (= HTML) 내 여러 Object Model들 (div, span, input요소들...)
API = 웹사이트가 동작하기 위해 html 제어하는 여러가지 명령들.
>>> script 태그에 defer 입력하거나, script 태그를 body 내에 넣어야 함.
HTML (body)
<div class="box">Box!!</div>
<script src="./main.js"></script>
JS
let boxEl = document.querySelector('.box');
code를 위에서 아래로 읽어나가기 때문에, main.js 사용한다는 script태그를 헤드에 입력할 경우,
body 내용을 알 수 없.
defer 속성은 html모든 내용 읽은 후 main.js를 읽겠다, 라는 구조 순서를 정의하는 속성임.
(가져온 JS파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성(attribute))
HTML
<head>
<script defer src="./main.js"></script>
</head>
<body>
<div class="box">Box!!</div>
</body>
JS
let boxEl = document.querySelector('.box');
addEventListener (DOM API)
1이라는 event가 일어나길 듣고 있다가, 일어나면 argument 2를 실행하는
// HTML 요소 (Element) 1개 검색/찾기
const로 변수 생성하는데, document 로 정의된 객체 내에 querySelector 메소드가 있고,
이 안에 html 선택자를 찾아서 반환되는 값을, boxEl이라는 변수에 넣음(요소 변수임을 알기 위해 boxEl이라는 이름지음)
const boxEl = document.querySelector('.box');
// HTML 요소에 적용할 수 있는 Method (addEvenetListener두 개의 인수를 추가 가능함,
boxEl.addEventListener();
// 인수(Arguments)를 추가 가능함
boxEl.addEventListener(1,2);
// 1 - 이벤트(Event, 상황) 1이라는 변수는 'click'이 일어나는 상황
boxEl.addEventListener('click',2);
// 2 - 핸들러 (Handler, 실행할 함수)
boxEl.addEventListener('click', function() {
console.log('Click~!');
} );
예제
let boxEl = document.querySelector('.box');
console.log(boxEl);
boxEl.addEventListener('click',function(){
console.log('Click!!');
});
classList (DOM API)
classList.add(); , classList.remove();
1이라는 event가 일어나길 듣고 있다가, 일어나면 argument 2를 실행하는
// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('box');
//요소의 클래스 정보 객체 활용 (DOM API) >> add 는 class에 추가하는 것, remove는 없애는 것.
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active'); // let 은 재할당 가능
console.log(isContains); //false
6. 메소드체이닝 (Method Chaining)
const a = 'Hello~';
// split : 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse : 배열을 뒤집기.
// join : 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse( ).join('') ; // 메소드 체이닝, (' ')는 빈 문자열_empty
console.log(a); // Hello~
console.log(b); // ~olleH
>>> 구체적인 사용법 등은 JS 나중에 추가 공부
+++
<div class="box">Box!!</div>
이 HTML요소의 내용(Content) 콘솔 출력하기
let boxEl = document.querySelector('.box');
console.log(boxEl.textContent);
<div>1</div>
<div>2</div>
각각 div요소에 JS로 class 추가하기
const divEls = document.querySelectorAll('div'); // 모든 요소 찾는 DOM API
divEls.forEach(function (divEl) { //forEach메소드,
// 익명의 함수에서 divEl이라는 매개변수(원하는 이름 지정)
divEl.classList.add('hello');
});
const boxEl = document.querySelector('.box');
위 코드의 boxEl 요소에 HTML 클래스 속성의 값으로 'active'가 포함되어 있으면,
'포함됨'을 콘솔출력
if(boxEl.classList.contains('active') {
console.log('포함됨');
}