표기법
HTML,CSS에서 사용하는 표기법
-
dash-case(kebab-case)
-
snake_case
JS에서 사용하는 표기법
-
camelCase
=거의 대부분 카멜케이스를 사용한다. -
ParcelCase
= NEW생성자 사용 시 사용합니다.
Zero-based Numbering
- 0기반 번호 매기기
- 특수한 경우를 제외하고 0부터 숫자를 시작합니다.
변수 할당
let , const , var
let은 재할당이 가능하지만
const는 재할당이 불가능합니다.
var은 사용하지 않는걸 권장합니다.
예약어
특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
this, if, for... 등
SyntaxError에러가 납니다.
함수
function sum(a,b) { // a와 b는 매개변수
return a + b;
}
let a = sum(1,2); // 1과 2는 인수입니다.
console.log(a) // 3const heropy = {
name: 'HEROPY',
age:85, //속성
getName: function () { // 메소드
return this.name;
}
}
const hisName = heropy.getName();
console.log(hisname);
console.log(heropy.getName());객체안에 속성의 데이터가 함수라면 우리는 속성말고 메소드라고 부릅니다.
DOM API
Document Object Model
Document란 HTML에 들어있는 여러 가지 object model을 애기하는데 대표적으로 div,span,input 요소들을 말하는데 이러한 요소들을 우리는 document에 들어있는 object model이라고 애기합니다.
이러한 내용을 줄여서 dom이라고 합니다.
Application Programming Interface
API라고 부르며, 웹사이트가 동작하기 위해서 입력하는 프로그래밍 명령이라고 말하고, 결국 API는 자바스크립트에서 HTML을 제어하는 여러 가지 명령들이라고 생각하면 편합니다.
즉, DOM은 HTML 내용들을 의미하고, API는 그 HTML을 제어하는 여러 명령들입니다. 그래서 DOM API는 HTML의 내용을 제어하는 명령이라고 생각하시면 됩니다.
defer
script 태그를 작성할 때 헤더에 위치에 있을경우 body내용을 읽지 못하고 자바스크립트 내용이 실행되지 않는 경우가 있는데 이러한 경우 defer라는 명령어를 사용하여 body내용까지 읽은 후 자바스크립트 파일을 실행하라는 속성입니다.
이벤트
// HTML 요소 (Element) 1개 검색 / 찾기
let 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~!');
});
메소드 체이닝(Method Chaining)
const a = "Hello~";
// split: 문자를 인수 기준으로 쪼개서 배열로 전환.
// reverse: 배열을 뒤집기.
// join: 배열을 인수 기준으로 문자로 병합해 반환.
const b = a.split('').reverse().join(''); // 메소드 체이닝...
console.log(a); // Hello~
console.log(b); // ~olleH