4주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트

표기법

dash-case(kebab-case)

• HTML, CSS
• the-quick-brown-fox

snake_case

• HTML, CSS
• the_quick_brown_fox

camelCase

• JS
• theQuickBrownFox

ParcelCase

• JS
• TheQuickBrownFox

---

Zero-Based Numbering

0기반 번호 매기기

특수한 경우를 제외하고 0부터 숫자를 시작함

---

JS 주석

// 한줄 메모
/* 한 줄 메모 */

/**
 * 여러 줄
 * 메모1
 * 메모2
 */

---

JS 데이터 종류

String(문자 데이터)

따옴표를 사용

let myName = "H.E";
let email = 'HE3010@gmail.com';
let hello = `Hello ${myName}!!`;

console.log(myName); //H.E
console.log(email); //HE3010@gmail.com
console.log(hello); //Hello H.E

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

어떤 값이 의도적으로 비어있음을 의미

let empty = null;

console.log(empty); //null

Object(객체 데이터)

여러 데이터를 Key:Valu 형태로 저장. { }

let user = {
  name: "H.E",
  age: 20,
  isValid: true,
};

console.log(user.name); //H.E
console.log(user.age); //20
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

---

JS 변수

데이터를 저장하고 참조(사용)하는 데이터의 이름

• var (X)
• let(재할당 가능)
• const(재할당 불가)

---

예약어(Reserved Word)

특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

---

JS 함수(function)

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

//함수 선언, helloFunc는 함수이름
function helloFunc() {
  //실행코드
  console.log(123);
  return 7;
}
//함수 호출
helloFunc(); //123

//기명(이름이 있는 함수)
//함수 선언
function hello() {
  console.log("Hello");
}
//익명(이름이 없는) 함수
//함수 표현
let world = function () {
  console.log("World");
};
//함수 호출
hello(); //Hello
world(); //World

---

JS 조건문

조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문

 

if

let isShow = true;
let checked = false;

if (isShow) {
  console.log("Show"); //Show
}
if (checked) {
  console.log("Checked");
}

else

let isShow = false;

if (isShow) {
  console.log("Show");	
} else {
  console.log("Hide?");	//Hide?
}