HTML/CSS/JS로 만드는 스타벅스 웹사이트
JS 선행
개요
표기법
-
dash-case(kebab-case)
단어와 단어 사이를 dash(-)로 이어준다. 띄어쓰기 대신 dash(-)
HTML, CSS 에서 주로 사용한다. -
snake_case
단어와 단어 사이를 under bar(_) 로 이어준다. 띄어쓰기 대신 under bar(_)
HTML, CSS 에서 주로 사용한다. -
camelCase
띄어쓰기 대신 대문자. 가장 첫 글자는 소문자.
JS에서 주로 사용한다. -
PascalCase
띄어쓰기 대신 대문자. 가장 첫 글자도 대문자.
JS에서 주로 사용한다.
Zero-based Numbering
번호는 0부터 세기!
주석
//이것은 주석이다
/*이것은 주석이다*/
/**
* 이것은
* 여러줄
* 주석이다
*/데이터 종류
- string
문자 데이터
따옴표(", ', `)를 사용한다.
let hello = `hello ${name}`-
number
숫자 데이터
정수 및 부동소수점 숫자를 나타낸다. -
boolean
불린 데이터
true, false 두 가지 값만 가지는 논리 데이터이다. -
undefined
값이 할당되지 않은 상태를 나타낸다. -
null
어떤 값이 의도적으로 비어있음을 의미한다. -
object
객체 데이터
여러 데이터를 Key:Value 형태로 저장한다. { }
let user = {
name: 'bang';
age: 26;
isValid: true
};
console.log(user.name); //bang
console.log(user.age); //26- array
배열 데이터
여러 데이터를 순차적으로 저장한다. [ ]
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0], fruits[1]);변수
데이터를 저장하고 참조(사용)하는 데이터의 이름
-
var
-
let
재사용, 값의 재할당이 가능하다. -
const
값의 재할당이 불가능하다.
Reserved Word
예약어. 특별한 의미를 가지고 있어서 변수나 함수 이름으로 사용할 수 없는 단어.
언어 자체에서 따로 쓰임이 있어서 이름으로는 사용할 수 없다.
ex) this, if, break, ...
함수
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
//함수 선언
function helloFunc() {
//실행 코드
console.log(1234);
}
//함수 호출
helloFunc(); //1234
//반환값 있는 함수
function returnFunc() {
return 123;
}
//a에 returnFunc 함수의 반환값 저장
let a = returnFunc();
console.log(a); //123
//매개 변수 있는 함수
function sum(a, b) { //a, b는 매개변수(parameter)
return a+b;
}
let a = sum(1, 2); //1, 2는 인수(argument)
let b = sum(3, 4);
console.log(a, b); //3, 7
//기명 함수(이름이 있는)
//함수 선언!
function hello() {
console.log('hello~');
}
//익명 함수(이름이 없는)
//함수에 이름이 없기 때문에 변수에 선언
//함수 표현!
let world = function() {
console.log('world~');
}
//객체 데이터
const heropy = {
name: 'HEROPY',
age: 85,
//method 메소드
getName: function() {
return this.name;
}
};
const hisName = heropy.getName();
console.log(hisName); //HEROPY조건문
조건의 결과에 따라 다른 코드를 실행하는 구문(if, else)
true(참) 이면 실행된다.
let isShow = true;
let checked = false;
if (isShow) {
console.log('Show!'); //Show!
if (checked) {
console.log('Checked!'); //실행 안됨
}DOM API
Document Object Model(DOM)
Application Programming Interface(API)
HTML의 내용을 제어하는 명령들
<script defer src="./main.js"></script> defer 없이 head 태그 내에 들어가있으면 js 코드가 제대로 실행되지 않을 수 있다.
* defer : 가져온 JS 파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성
//HTML 요소(Element) 1개 검색/찾기
//제일 먼저 찾아지는 요소 1개
const boxEl = document.querySelector('.box');
//HTML 요소에 적용할 수 있는 메소드
boxEl.addEventListener();
//인수를 추가 가능
boxEl.addEventListener(1, 2);
//1. 이벤트
boxEl.addEventListener('click', 2);
//2. 핸들러(실행할 함수)
boxEl.addEventListener('click', function() {
console.log('Click!');
});
//요소의 클래스 정보 객체 활용하기
//boxEl에 'active'라는 클래스를 추가
boxEl.classList.add('active');
//boxEl에 'active'가 있니?
let isContains = boxEl.classList.contains('active');
console.log(isContains); //true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); //false
//찾은 요소들 반복해서 함수 실행
//익명 함수를 인수로 추가
boxEls.forEach(function() {});
//첫번째 매개변수: 반복중인 요소
//두번째 매개변수: 반복중인 번호
boxEls.forEach(function(boxEls, index) {} );
//출력
boxEls.forEach(function(boxEls, index) {
boxEls.classList.add(`order-${index}`);
console.log(`${boxEls.textContent} index`);
})
//Getter, 값을 얻는 용도
console.log(boxEl.textContent);
//Setter, 값을 지정하는 용도
boxEl.textContent = 'Hi';
console.log(boxEl.textContent); //HiMethod Chaining
메소드 체이닝.
const a = 'Hello';
//split: 문자를 인수 기준으로 쪼개서 배열로 반환.
//reverse: 배열을 뒤집기
//join: 배열을 인수 기준으로 문자로 병합해 반환.
//Hello를 문자 하나하나 쪼개서 뒤집고 문자로 병합했다.
const b = a.split('').reverse().join(''); //메소드 체이닝
console.log(a); //Hello
console.log(b); //olleH