dash-case(kebab-case)
, snake_case
, camelCase
, ParcelCase
HTML
, CSS
에서 자주 사용
ex) the-quick-brown-fox-jumps-over-the-lazy-dog
HTML
, CSS
에서 주로 사용
ex) the_quick_brown_fox_jumps_over_the_lazy_dog
JS
에서 주로 사용
ex) theQuickBrownFoxJumpsOverTheLazyDog
JS
에서 주로 사용
ex) TheQuickBrownFoxJumpsOverTheLazyDog
0
기반 번호 매기기!
// 한 줄 메모
/* 한 줄 메모 */
/**
* 여러줄
* 메모 1
* 메모 2
*/
String
, Number
, Boolean
, Undefined
, Null
, Object
, Array
자바스크립트는 데이터로 동작! (자료형으로 사고해야 한다!!)
// String(문자 데이터)
// 따옴표를 사용합니다.
let myName = "BYEOL";
let email = 'starggoggo@gmail.com';
let hello = `Hello ${myName}?!` //보간 해서 사용, 다른 형식도 글로 바꿔 표시가능.
console.log(myName); // BYEOL
console.log(email); // starggoggo@gmail.com
console.log(hello); // Hello BYEOL?!
// Number(숫자 데이터)
// 정수 및 부동소수점 숫자를 나타냅니다.
let number = 123;
let opacity = 1.57;
console.log(number); // 123
console.log(opacity); // 1.57
// Boolean(불린 데이터)
// true, false 두 가지 값 밖에 없는 논리 데이터입니다.
let checked = true;
let isShow = false;
console.log(checked); // true
console.log(isShow); // false
// Undefined
// 값이 할당되지 않은 상태를 나타냅니다.
let undef;
let obj = { abc: 123 };
console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined
// Null
// 어떤 값이 의도적으로 비어있음을 의미합니다.
// undefined와는 좀 다르다. 의도적으로 할당 안한 것.
let empty = null;
console.log(empty); // null
// Object(객체 데이터)
// 여러 데이터를 Key:Value 형태로 저장합니다. { }
let user = {
// Key: Value,
name: 'BYEOL',
age: 85,
isValid: true
};
console.log(user.name); // BYEOL
console.log(user.age); // 85
console.log(user.isValid); // true
// Array(배열 데이터)
// 여러 데이터를 순차적으로 저장합니다. [ ]
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'
데이터를 저장하고 참조(사용)하는 데이터의 이름 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 a = 12;
console.log(a); // 12
a = 999; // 재할당 가능
console.log(a); // 999
// 값(데이터)의 재할당 불가!
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; //SyntaxError
this, if, break 등은 이미 쓰려고 예약된 명명이기 때문에 에러가 나버린다. 자연스럽게 외워지는 거 말고는 에러표시나면 바꿔도 상관없을 것..
특정 동작(기능)을 수행하는 일부 코드의 집합(부분) function
// 함수 선언
function helloFunc () {
//실행 코드
console.log(1234);
}
// 함수 호출
helloFunc(); // 1234
함수는 소괄호, 중괄호가 들어가 있음 확인. 명령들을 감싸고 있는 집합처럼 생각!
// 반환하는 용도.
function returnFunc() {
return 123;
}
let a = returnFunc(); // 반환된 데이터를 변수에 할당해서 선언.
console.log(a); // 123
// 함수 선언!
function sum(a, b) { // a와 b는 매개변수(Parameters)
return a + b;
}
// 재사용
let a = sum(1, 2); // 1과 2는 인수(Arguments)
let b = sum(7, 12);
let c = 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~
함수 선언/표현 구분 -> 호이스팅(Hoisting)에서 중요
// 객체 데이터
const heropy = {
name: 'HEROPY',
age: 85,
// 메소드(Method) : 속성부분에 함수가 들어가있는 경우
getName: function () {
return this.name;
}
};
const hisName = heropy.getName();
console.log(hisName); //HEROPY
// 혹은
console.log(heropy.getName()); // HEROPY
조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 if
, else
let isShow = true;
let checked = false;
if (isShow) {
console.log('Show!'); // Show!
}
if (checked) {
console.log('Checked!'); // 출력안됨.(Fasle이므로)
}
let isShow = true;
if (isShow) {
console.log('Show!'); // Show!
} else {
console.log('Hide?');
}
let isShow = false;
if (isShow) {
console.log('Show!');
} else {
console.log('Hide?'); // Hide?
}
html은 위에서 부터 읽어들이기 때문에 head에 script 부분을 놓으면
body의 내용을 읽을 수가 없다.
따라서 script를 body 맨밑에 놓으면 읽을 수 있을 수 있기는 하나 정보에 해당하는 것은 head에 넣어주는 것이 좋다. body 구조안에 넣는 것이 아니라 다시 head에 놓고 script defer src="" 식으로 디퍼를 주면, 동일하게 읽어진다.
// HTML 요소(Element) 1개를 검색 / 찾기 (가장먼저찾은것 1개)
const boxEl = document.querySelector('.box');
// HTML 요소에 적용할 수 있는 메소드!
boxEl.addEventListener();
// 인수(Arguments)를 두개 넣을 수 있다.
boxEl.addEventListener(1, 2);
// 1번째 <- 이벤트(Event, 상황)를 기입
boxEl.addEventListener('click', 2); // 사용자가 클릭했을 때!
// 2번째 <- 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function () { // 익명 함수
console.log('Click~!');
});
브라우저가 이벤트를 감시(청취)하고 있다가, 이벤트 발생하면 익명 함수(Handler)를 실행한다!!
// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box');
// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active'); // active 라는 클래스 추가
let isConstains = boxEl.classList.contains('active');
// boxEl의 classlist에 active 라는 class가 있으면 true 반환, 없으면 false 반환
console.log(isContains); // true
boxEl.classList.remove('active'); // active class 제거
isContains = boxEl.classList.contains('active'); // 제거 시켰기 때문에 없을 것.
console.log(isContains); // false 반환
// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
// boxEls 는 복수로 '배열 데이터' 형태가 된다.
// 완벽하게 배열데이터는 아니므로 이런 형식을 '유사배열(Array-like)'이라 한다.
// 찾은 요소들 반복해서 돌려서 함수 실행!
// 익명 함수를 인수로 추가!
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);
});
const boxEl = document.querySelector('.box');
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!! 출력되며, 찾은 box class의 text부분을 얻을 수 있다.
// Setter, 값을 지정하는 용도
boxEl.textContent = 'HEROPY?!'; // text 부분 내용값 지정 가능.
console.log(boxEl.textContent); // HEROPY?!
const a = 'Hello~';
// split : 문자를 인수 기준으로 쪼개서 배열로 반환.
// reverse : 배열을 뒤집기.
// join : 배열을 인수 기준으로 문자로 병합해 반환.
const b = a.split('').reverse().join(''); // 메소드 체이닝...
// 빈문자
console.log(a); // Hello~
console.log(b); // ~olleH
출처 : fastcampus react & redux로 시작하는 웹 프로그래밍