표기법
dash-case(kebab-case): 단어 사이사이에 dash(-)를 넣음 → HTML, CSS 주로 사용
- ex)the-quick-brown-fox-jumps
snake_case: 단어 사이에 _를 넣음 → HTML, CSS 주로 사용
- ex) the_quick_brown_fox_jumps
camelCase: 첫단어는 소문자로 시작하고 그 다음에 오는 단어는 첫문자가 대문자로 시작 → JS 사용(JS에서는 주로 camelCase 사용)
- ex) theQuickBrownFoxJumps
PascalCase: 첫단어도 대문자로 시작하고 다음 단어도 대문자로 시작 → JS 사용
- ex) TheQuickBrownFoxJumps
Zero-based Numbering
- 0 기반 번호 매기기, 특수한 경우 제외하고 0부터 숫자 시작
let fruits = ["Apple", "Banana", "Cherry"];
// 배열이 있으면 0부터 시작
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry
// 요일은 0은 일요일을 의미 -> 0 부터 시작
console.log(new Date("2021-01-31").getDay()); // 0, 일요일주석
- 한 줄 메모:
// 주석 내용혹은/* 주석 내용 */ - 여러 줄 메모
/** * 메모1 * 메모2 * 메모3 */
데이터 종류(자료형)
String: 문자 데이터 → 따옴표 사용
let myName = "HELLO"; // 큰따옴표 사용
let email = "abc@gmail.com"; // 작음따옴표 사용
let hello = `Hello ${myName}`; // 백틱 사용(보간법) -> 문자열 사이에 다른 데이터 끼워 넣을 때Number: 숫자 데이터 -> 정수 및 부동 소수점 숫자 나타냄
let number = 123;
let opacity = 1.57;Boolean: 불린 데이터 -> true, false 두 가지 값밖에 없는 논리 데이터
let checked = true;
let isShow = false;
console.log(checked); // true
console.log(isShow); // falseUndefined: 값이 할당되지 않은 상태를 나타냄
let undef;
let obj = { abc: 123 };
console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefinedNull: 어떤 값이 의도적으로 비어있음을 의미
let empty = null;
console.log(empty); // nullObject(객체 데이터): 여러 데이터를 Key:Value형태로 저장 -> { }
let user = {
// Key: Value,
name: "Lala",
age: 85,
isValid: true,
};
console.log(user.name); //Lala
console.log(user.age); // 85
console.log(user.isValid); // trueArray(배열 데이터): 여러 데이터를 순차적으로 저장 -> [ ]
let fruitss = ["Apple", "Banana", "Cherry"];
console.log(fruitss[0]); // Apple
console.log(fruitss[1]); // Banana
console.log(fruitss[2]); // Cherry변수, 예약어
변수: 데이터를 저장하고 참조(사용)하는 데이터의 이름
var: 재 선언 O, 재 할당 O → 사용하지 않는 것을 권장!
let: 재 선언 X, 재 할당 O
let c = 12;
console.log(c); // 12
c = 999;
console.log(c); // 999const: 재 선언 X, 재 할당 X
let d = 12;
console.log(c); // 12
d = 999;
console.log(c); // TypeError예약어: 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
let this = 'Hello'; // SyntasError- let, const, if, break, this 등등
함수(function)
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
// 함수 선언
function helloFunc() {
// 실행 코드
console.log(1234);
}
// 함수 호출
helloFunc(); // 1234- return 키워드 사용하여 js 데이터를 반환하여 사용 가능
function returnFunc() {
return 123;
}
let a = returnFunc();
console.log(a); // 123- 매개변수(parameter)를 넘겨 재사용 가능
// 함수 선언!
function sum(a, b) {
// a와 b는 매개변수(파라미터)
return a + b;
}
// 재사용
let b = sum(1, 2); // 1과 2 는 인수(Arguments)
let c = sum(7, 12);
console.log(a, b); // 3, 19- 기명(이름이 있는) 함수 → 함수 선언
function hello() {
console.log("Hello");
}- 익명(이름이 없는) 함수: 변수에 할당해줘야 함 → 함수 표현
let world = function () {
console.log("World");
};
hello(); // Hello
world(); // World- 객체 데이터
const heropy = {
name: "LALA",
age: 85,
**// 메소드(Method)
getName: function () {
return this.name;
},**
};
const hisName = heropy.getName();
console.log(hisName); // LALA조건문
조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 → if, else
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");
}
// Show!DOM API
- Document Object Model, Application Programming Interface
- 브라우저는 코드를 위에서 아래로 읽어나가는데, : body 태그 아래에
<script>태그 작성<!DOCTYPE html> <html lang="en"> <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> </head> <body> <div class="box">Box</div> <script src="./main.js"></script> </body> </html> -
해결법2: head 태그 안에
defer속성 추가 → HTML 코드를 다 읽고 js파일을 읽음```html <!DOCTYPE html> <html lang="en"> <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" /> <script defer src="./main.js"></script> <title>Document</title> </head> <body> <div class="box">Box</div> </body> </html> ``` -
HTML 요소(Element) 1개 검색/찾기 → 먼저 찾아진 요소 반환
let boxEl = document.querySelector(".box");
addEventListener();// HTML 요소에 적용할 수 있는 메소드
boxEl.addEventListener();
// 인수(Arguments)를 추가 가능
boxEl.addEventListener(1, 2);
// 1 - 이벤트(Event, 상황)
boxEl.addEventListener("click", 2);
**// 2 - 핸들러(Handler, 실행할 함수(익명함수))) -> 완성본
boxEl.addEventListener("click", function () {
console.log("click");
});**// 요소의 클래스 정보 객체 활용!
boxEl.classList.add("active");
let isContains = boxEl.classList.contains("active");
console.log(isContains); // true
boxEl.classList.remove("active");
isContains = boxEl.classList.contains("active");
console.log(isContains); // false// 요소의 클래스 정보 객체 활용 → ddEventListener 사용
boxEl.addEventListener("click", function () {
console.log("Click");
boxEl.classList.add("active");
console.log(boxEl.classList.contains("actvie"));
boxEl.classList.remove("active");
});-
HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll(".box");// HTML 요소(Element) 모두 검색/찾기 const boxEls = document.querySelectorAll(".box"); console.log(boxEls); // 찾은 요소들 반복해서 함수 실행 // 익명 함수를 인수로 추가 boxEls.forEach(function () {}); // 첫 번재 매개변수(boxEl): 반복 중인 요소 // 두 번재 매개변수(index): 반복 중인 번호 boxEls.forEach(function (boxEl, index) {}); // 출력 **boxEls.forEach(function (boxEl, index) { boxEl.classList.add(`order-${index + 1}`); console.log(index, boxEl); });** -
값을 얻고(Getter), 지정(Setter)하는 용도 → textContent
const boxEl = document.querySelector(".box"); // Getter, 값을 얻는 용도 console.log(boxEl.textContent); // Box // Setter, 값을 지정하는 용도 boxEl.textContent = "Hello"; console.log(boxEl.textContent); // Hello
메소드 체이닝
js 명령들을 .(온점)으로 한꺼번에 작성
const a = "Hello";
const b = a.split("").reverse().join(""); // 메소드 체이닝
console.log(a); // Hello
console.log(b); // olleHsplit: 문자를 인수 기준으로 쪼개서 배열로 반환reverse: 배열 뒤집기join: 배열을 인수 기준으로 문자로 병합해 반환
