JavaScript
•
dash-case(kebab-case)
프로그래밍의 표기법중 하나
•
snake_case
언더바가 들어가 있는 형태
•
camelCase
첫단어는 소문자 두번째는 첫글자가 대문자
•
ParcelCase
카멜과 유사하지만 첫번째 단어의 첫글자가 대문자이다.
참고로 자바스크립트도 숫자를 0부터 새기 시작한다.
변수 선언시에는 let을 사용한다.
net Date라는 함수로 getDate를 얻게 되는데 0번째가 일요일이다.
주석
데이터 종류
•
String
// String(문자 데이터)
// 따옴표를 사용합니다. 큰거 작은거를 구분하지 않는다.
let myName = "tonyhan18";
let email = 'ourclub7279@gmail.com';
// `기호를 사용할 수 있다. 이 문자열에 추가적인 내용을 보간할 수 있다.
let hello = `Hello ${myName}?!`
console.log(myName); // tonyhan18
console.log(email); // ourclub7279@gmail.com
console.log(hello); // Hello tonyhan18?!
Plain Text
복사
•
Number
// Number(숫자 데이터)
// 정수 및 부동소수점 숫자를 나타냅니다.
let number = 123;
let opacity = 1.57;
console.log(number); // 123
console.log(opacity); // 1.57
Plain Text
복사
•
Boolean
// Boolean(불린 데이터)
// true, false 두 가지 값밖에 없는 논리 데이터입니다.
let checked = true;
let isShow = false;
console.log(checked); // true
console.log(isShow); // false
Plain Text
복사
•
Undefined
// Undefined
// 값이 할당되지 않은 상태를 나타냅니다.
let undef;
let obj = { abc: 123 };
console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined
Plain Text
복사
•
Null
// Null
// 어떤 값이 의도적으로 비어있음을 의미합니다.
let empty = null;
console.log(empty); // null
Plain Text
복사
•
Object
// Object(객체 데이터)
// 여러 데이터를 Key:Value 형태로 저장합니다. { }
let user = {
// Key: Value,
name: 'HEROPY',
age: 85,
isValid: true
};
console.log(user.name); // HEROPY
console.log(user.age); // 85
console.log(user.isValid); // true
Plain Text
복사
•
Array
// Array(배열 데이터)
// 여러 데이터를 순차적으로 저장합니다. [ ]
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry
Plain Text
복사
변수
var, ket, const가 존재하는데 가급적 var은 사용금지
// 값(데이터)의 재할당 가능!
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
Plain Text
복사
변수이름으로 예약어 사용금지
함수
/* 함수 선언과 호출 */
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,
Plain Text
복사
기명함수와 익명함수
// 기명(이름이 있는) 함수
// 함수 선언!
function hello() {
console.log('Hello~');
}
// 익명(이름이 없는) 함수 -> 대충변수에 저장해서 사용한다.
// 함수 표현!
let world = function () {
console.log('World~');
}
// 함수 호출!
hello(); // Hello~
world(); // World~
Plain Text
복사
멤버 함수
// 객체 데이터
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
Plain Text
복사
조건문
let isShow = true;
if (isShow) {
console.log('Show!');
} else {
console.log('Hide?');
}
Plain Text
복사
DOM API
자바스크립트에서 html을 제어하는 여러가지 명령들
위와 같이 작성하면 null이 나온다.
이것을 해결하기 위해 scrip부분을 아래로 내리자
하면 성분이 그대로 찍히는 것을 확인할 수 있다.
물론 defer 속성으로 이러한 문제를 해결할 수 있다.
이러한 문제가 생기는 이유는 브라우저는 순차적으로 읽기 때문에 main.js를 만나는 순간 box class를 찾게된다. 그래서 null 문자가 나온것이다.
// HTML 요소(Element)중 처음 찾은 1개만 반환
const boxEl = document.querySelector('.box');
// HTML 요소에 적용할 수 있는 메소드!
boxEl.addEventListener();
// 인수(Arguments)를 추가 가능! 1번에는 이벤트 2번은 핸들러
boxEl.addEventListener(1, 2);
// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
console.log('Click~!');
});
Plain Text
복사
실재로 box를 누르면 콘솔에 click이 출력된다.
// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box');
// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
//active라는 클래스가 있는지 확인한다.
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true
//active라는 클래스를 제거해버린다.
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false
Plain Text
복사
실재로 클래스에 active라는 클래스가 추가된것을 확인할 수 있다.
// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEls.forEach(function () {});
// 첫 번째 매개변수(boxEl): 반복 중인 요소.
// 두 번째 매개변수(index): 반복 중인 번호
// 두개다 이름을 직접 지을 수 있지만 보통 두 번째는 그냥 index 사용
boxEls.forEach(function (boxEl, index) {});
// 출력!
boxEls.forEach(function (boxEl, index) {
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});
Plain Text
복사
index 0번 부터 시작해서 쭉 찾아온것을 확인할 수 있다.
add를 이용해서 클래스를 추가한 모습이다.
const boxEl = document.querySelector('.box');
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!
// Setter, 값을 지정하는 용도
boxEl.textContent = 'tonyhan18';
console.log(boxEl.textContent); // tonyhan18
Plain Text
복사
위와 같이 1이 출력된다음 내용이 바뀐것을 확인할 수 있다.
메소드 체이닝
const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환.
// reverse: 배열을 뒤집기.
// join: 배열을 인수 기준으로 문자로 병합해 반환.
const b = a.split('').reverse().join(''); // 메소드 체이닝...
console.log(a); // Hello~
console.log(b); // ~olleH
Plain Text
복사
뭐 대충 위와 같이 함수를 타고 타서 출력한다.
