Chapter 09. JS 선행
1. 개요
속성(Properties)
🎈 표기법
-
dash-case(kebab-case)- HTML, CSS
ex) the-quick-brown-fox-jumps -
snake_case- HTML, CSS
ex) the_quick_brown_fox_jumps -
camelCase- JS ⭐️
ex) theQuickBrownFoxJumps -
ParscelCase- JS
ex) TheQuickBrownFoxJ umps
JS에서 new 키워드를 가지는 생성자함수에서 사용
🎈 Zero_based Numbering
0부터 숫자 시작
// 0부터 시작 예제
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'
console.log(new Date('2021-01-30').getDay()); // 6, 토요일
console.log(new Date('2021-01-31').getDay()); // 0, 일요일
console.log(new Date('2021-02-01').getDay()); // 1, 월요일🎈 주석 (Comments)
// 한 줄 메모
/* 한 줄 메모 */
/**
* 여러 줄
* 메모1
* 메모2
*/2. 데이터 종류 (자료형)
🎈 String
// String (문자 데이터)
// 따옴표를 사용한다.
let myName = "HEROPY"
let email = 'kdasunb6@gmail.com'
let hello = `Hello ${myName}?!` // 보간🎈 Number
/// Number (숫자 데이터)
// 정수 및 부동소수점 숫자를 나타낸다.
let number = 123;
let opacity = 1.57;🎈 Boolean
// String (문자 데이터)
// 따옴표를 사용한다.
let myName = "HEROPY"
let email = 'kdasunb6@gmail.com'
let hello = `Hello ${myName}?!` // 보간🎈 Undefined
// Undefined
// 값이 할당되지 않은 상태
let undef;
let obj = { abc: 123 };
console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined🎈 Null
// Null
// 어떤 값이 의도적으로 비어있음을 의미한다.
let empty = null;
console.log(empty); // null🎈 Object
// Object(객체 데이터)
// 여러 데이터를 Key:Value 형태로 저장한다. { }
let user = {
// Key : Value,
name: 'Ogu',
age: 24,
isValid: true
}🎈 Array
// Array(배열 데이터)
// 여러 데이터를 순차적으로 저장한다. [ ]
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'3. 변수
데이터를 저장하고 참조(사용)하는 데이터의 이름
var,let,const
🎈 변수 선언
// 재사용이 가능!
// 변수 선언!
let a = 2;
let b = 5;🎈 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.🎈 예약어
특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
Reserved Word
let this = 'Hello'; // SyntaxError
let if = 123; // SyntaxError
let break = true; // SyntaxError4. 함수
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
function
🎈 함수 선언, 호출
// 함수 선언
function helloFunc() {
// 실행 코드
console.log(1234);
}
// 함수 호출
helloFunc(); //1234🎈 함수 리턴
function returnFunc() {
return 123;
}
let a = returnFunc();
console.log(a);🎈 매개변수와 인수
// 함수 선언
function sum(a,b) { // a와 b는 매개변수 (Parameters)
return a+b;
}
// 재사용
let x = sum(1, 2); // 1과 2는 인수(Argument)
let y = sum(7, 12);
let z = sum(2, 4);
console.log(a, b, c); // 3, 19, 6🎈 기명 함수와 익명 함수
// 기명(이름이 있는) 함수
// 함수 선언!
function hello() {
console.log('Hello~');
}
// 익명(이름이 없는) 함수
// 함수 표현
let world = function() {
console.log('World~');
}
// 함수 호출!
hello(); // Hello~
world(); // World~🎈 객제 데이터와 메소드(Method)
// 객체 데이터
const ogu = {
name: 'Ogu',
age: 24,
// 메소드(Method)
getName: function() { // 함수의 표현
return this.name;
}
};
const hisName = ogu.getName();
console.log(hisName); // Ogu
// 혹은
console.log(ogu.getName()); // Ogu5. 조건문
조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문
if, else
🎈 if문
let isShow = true;
let checked = false;
if (isShow) {
console.log('Show!'); // Show!
}
if(checked) {
console.log('Checked!');
}🎈 if-else문
let isShow = true;
if(isShow) {
console.log('Show!');
} else {
console.log('Hide?');
}6. DOM API
Document Object Model, Application Programming Interface
🎈 script태그의 defer속성
html코드를 다 읽은 상태로 다시 main.js 코드를 실행한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./main.js"></script>
</head>
<body>
<div class="box">Box!!</div>
<!-- <script src="./main.js"></script> -->
</body>
</html>// javascript
let boxEl = document.querySelector('.box');
console.log(boxEl);🎈 QuerySelector
가장 첫 번째 요소를 찾는다.
// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box'); // 찾으려고 하는 요소의 CSS 선택자🎈 addEventListener
1번째 이벤트가 발생하면 2번째 인수를 실행시킨다.
// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box'); // 찾으려고 하는 요소의 CSS 선택자
// HTML 요소에 적용할 수 있는 메소드!
boxEl.addEventListener();
// 인수(Arguments)를 추가 가능
boxEl.addEventListener(1,2);
// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
console.log('Click~!');
});🎈 classList
요소의 클래스 정보 객체를 활용한다.
// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box');
// 요소의 클래스 정보 객체 활용!
// boxEl에서 classList클래스 정보를 가지고 있는 객체 내부에서 'active'클래스가 contains(포함)되어있는지
// 검사한 후 있으면 isContains에 true를, 없으면 false를 반환
boxEl.classList.add('active'); // active 클래스 추가
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true
boxEl.classList.remove('active'); // active 제거
isContains = boxEl.classList.contains('active');
console.log(isContains); // falseex) 예제
let boxEl = document.querySelector('.box');
console.log(boxEl);
boxEl.addEventListener('click', function () {
console.log('Click!!');
boxEl.classList.add('active');
console.log(
boxEl.classList.contains('active')
);
boxEl.classList.remove('active');
console.log(
boxEl.classList.contains('active')
);
});🎈 forEach
찾은 요소들을 반복해서 함수를 실행한다.
// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
// 찾은 요소들 반복해서 함수 실행
// 익명 함수를 인수로 추가
boxEls.forEach(function () {}); // 배열 데이터로 만들어짐(유사배열, Array-like)
// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});
// 출력!
boxEls.forEach(function (boxEl, index) {
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEls);
}); 🎈 textContnet
Getter, Setter 역할 가능
const boxEl = document.querySelector('.box');
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!, content 중에서 text로만 이루어진 내용만 반환이 된다.
// Setter, 값을 지정하는 용도
boxEl.textContent = 'Ogu?!';
console.log(boxEl.textContent); // Ogu?!7. 메소드 체이닝
Method Chaining
메소드들을 체인형식으로 나열
const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝..
console.log(a); // Hello~
console.log(b); // ~olleH
Hello! I am Ogu, a developer who loves learning and sharing! 🐤🐤 <br> こんにちは！学ぶことと共有することが好きな開発者のOguです！🐤