[자바스크립트 기초] 26.09.26
[복습 노트] HTML & 자바스크립트 기초
1. HTML 메타 태그 (meta property)
웹페이지 링크를 카카오톡, 페이스북 등 소셜 미디어에 공유할 때 표시되는 미리보기(오픈 그래프) 데이터 설정.
og:title: 링크 공유 시 표시되는 제목og:description: 제목 아래에 표시되는 요약 설명og:image: 함께 표시되는 썸네일 이미지 주소
2. 자바스크립트 함수(Function) 작성 시 문법 주의사항
- 매개변수 이름 규칙: 변수명은 숫자로 시작할 수 없음.
- ❌
function mmath(2a) - ⭕
function mmath(a)
- 연산자 생략 불가: 수학식처럼 문자와 숫자를 기호 없이 붙여 쓸 수 없음.
- ❌
2f - ⭕
2 * f
- 변수 할당 연산자: 변수에 값을 넣을 때는 반드시 등호(
=)를 사용해야 함. - ❌
let temp x * y; - ⭕
let temp = x * y;
3. 함수 호출 vs 변수 호출
함수 내부에서 계산 결과를 담아둔 지역 변수는 함수 외부에서 호출할 수 없음. 결과를 얻으려면 자판기 본체 격인 함수 자체를 호출해야 함.
const add = (x, y) => {
let temp = x * y;
return temp;
};
// ❌ 잘못된 호출 (temp는 변수이므로 함수처럼 호출 불가)
temp(3, 4); // ReferenceError 발생
// ⭕ 올바른 호출 (함수 add를 호출)
add(3, 4); // 결과: 12
4. 화살표 함수 (=>)
함수를 선언하는 최신 단축 문법. function 키워드 대신 => 기호를 사용하여 코드를 간결하게 작성함.
- 기존 방식:
const add = function(x, y) { ... } - 화살표 방식:
const add = (x, y) => { ... }
5. 콘솔 (console.log)
개발자가 코드의 실행 결과나 에러를 웹 화면으로 구현하기 전, 즉각적으로 확인하기 위해 사용하는 개발자용 출력 도구(테스트용 연습장).
- 사용법:
console.log("확인할 내용 또는 변수");
6. for 반복문
특정 코드를 원하는 횟수만큼 반복해서 실행할 때 사용하는 기본 문법.
for (let i = 0; i < 3; i++) {
console.log(i);
}
let i = 0;(시작 조건): 변수i를 0부터 시작함.i < 3;(반복 조건):i가 3보다 작을 때까지만 실행함 (0, 1, 2 → 총 3번 실행).i++(증감식): 한 번 실행이 끝날 때마다i값을 1씩 증가시킴.
[주의] 따옴표 유무에 따른 차이:
console.log(i)➡️ 숫자0,1,2가 차례로 출력됨 (변수 취급).console.log("i")➡️ 문자"i"가 3번 반복 출력됨 (문자 데이터 취급).
