JavaScript의 기초
자바스크립트
자바스크립트는 웹페이지에서 보조 기능을 위해 개발된 프로그래밍 언어
- HTML, CSS를 프로그래밍적으로 제어 가능
- 웹 브라우저가 실행할 수 있는 유일한 프로그래밍 언어 (과거)
- 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 됨
- 서버 프로그래밍, 모바일 웹, 게임 프로그래밍 등 다양한 분야에서도 사용
자바스크립트의 등장과 변천사
- 1995년 넷스케이프 사(현 모질라)에서 브랜든 아이크가 개발되었으며, 초기 이름은 모카(Mocha)에서 라이브 스크립트(LiveScript)로 변경되었다가, 최종적으로 자바스크립트(JavaScript)로 출시
- 자바스크립트와 자바는 관계가 없음
자바스크립트로 동적인 기능 추가하기
- 데이터 처리
◽ 데이터 저장 : 다양한 형태의 값을 저장하고 사용
◽ 연산을 통해 값을 계산하고 처리
- 사용자와 상호작용
◽ 이벤트 감지 : 사용자의 동작을 감지
◽ 브라우저에서 제공하는 기능을 이용
- 화면 조작
◽ HTML과 CSS를 조작하여 결과값을 화면에 반영
- 다른 컴퓨터와 통신
◽ AJAX, Fetch
◽ 필요한 부분만 통신하여 사용자 경험을 향상
JavaScript 실행하기
브라우저에서 실행
◽ VSC 활용하여 작성하고 실행
◽ 크롬 -> 개발자도구
코드작성
1. HTML 태그를 통해 삽입
<button onclick="window.alert('hello world');">Click me!</button>
2. script 태그를 통해 삽입
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<!-- script 태그는 body 하단에 위치합니다 -->
<script>
console.log('hello world!');
</script>
</body>
</html>
3. 외부파일로 저장하고 파일로드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
console.log('hello console');
출력하기
console.log(); // 콘솔에 로그 메시지 출력
console.error(); // 에러 메시지 출력
console.warn(); // 경고 메시지 출력
console.table({ 'a' : 10 , 'b': 20 }); // 테이블 형태로 값을 출력
BOM (Brower Object Model) API
브라우저에서 제공하는 다양한 기능을 사용할 수 있도록 도와주는 역할
window.alert(); // 브라우저에 메시지 다이얼로그 출력
window.confirm(); // 사용자의 응답(확인/취소) 값을 가져올 수 있는 다이얼로그 출력
window.prompt(); // 사용자의 입력 데이터를 받아올 수 있는 입력창 출력
변수 (Variable)
변수 선언과 사용
변수
- 변할 수 있는 수 / 변할 수 있는 정보
변수선언에 쓰이는 키워드
- var,let, const
◽ var, let : 변경가능한 변수를 선언할 때 사용
◽ const : 변경할 수 없는 변수를 선언할 때 사용
var a; // 선언
let b = 10; //선언 + 할당
const name = 'weniv';
변수명 작성 규칙
- 변수 이름에는 문자, 숫자 언더바(_), 달러($)만 사용가능
- 숫자로는 시작 X
- 예약어 사용 X
- 대소문자 구분
- 유니코드 문자를 허용하기 때문에 한글이나 일본어 변수 사용 가능하지만 권장X
네이밍 규칙
- 카멜케이스 : 첫 글자는 수문자, 각 단어의 첫 글자는 대문자 (firstName / totalCount / userAge)
- 스네이크 케이스 : 각 단어를 언더바(_)로 연결 (first_name / total_count / user_age)
- 파스칼 케이스 : 단어의 첫 글자는 대문자 (FirstName / TotalCount / UserAge)
- 헝가리안 케이스 : 변수명에 타입 종류를 함께 작성 (strUserName / $submitButton)
변수 키워드와 특징
var | let | const | |
재선언 | O | X | X |
재할당 | O | O | X |
* 변수의 키워드를 생략하고 선언과 할당을 해도 오류가 발생하지 않음
valueA = 10;
console.log(valueA);
엄격모드(strict mode)에서는 변수의 키워드를 생략하면 오류가 발생함으로 권장X
// 엄격모드
"use strict";
valueA = 10;
console.log(valueA);
재선언
// 재선언
var valueB = 20;
var valueB = 30;
let valueC = 10;
let valueC = 20; // 재선언 오류 발생
재할당
// 재할당
var valueVar = 15;
valueVar = 25;
let valueLet = 20;
valueLet = 30;
const valueLet = 5;
valueLet = 10; // 재할당 오류 발생
메모리 저장 방식
- 변수를 선언하면 값뿐만 아니라 변수의 이름도 메모리에 저장됨
- 변수의 이름과 할당된 값이 메모리에 각각 저장됨
스코프
전역 스코프
- 어디서든 접근 가능한 변수 영역
함수 스코프
- 함수 내에서만 접근 가능한 변수 영역
- var로 선언한 변수는 함수 스코프를 갖음
var a = 10;
let b = 20;
const c = 30;
function funcScope() {
console.log("----- Function Scope ------");
console.log("전역변수: ", a, b, c);
var fA = 40;
let fB = 50;
const fC = 60;
console.log("함수 내부: ", fA, fB, fC);
}
funcScope();
// console.log("함수 변수", fA, fB, fC);
블록 스코프
- 중괄호로 감싸진 코드 블록 단위로 접근 가능한 변수 영역을 나타냄
- let과 const로 선언한 변수는 블록 스코프를 갖음
{
console.log("----- Block Scope ------");
console.log("전역변수: ", a, b, c);
var bA = 70; // 함수 스코프이기 때문에 전역 변수가 됩니다.
let bB = 80;
const bC = 90;
console.log("블록 내부: ", bA, bB, bC);
}
console.log("블록 변수: ", bA, bB, bC);
출처 - 위니브(Weniv)
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
[EST] 240709 JavaScript-03 (0) | 2024.07.12 |
---|---|
[EST] 240708 JavaScript-02 (0) | 2024.07.09 |
[EST] 240627 Figma-01 / CSS-10 (0) | 2024.07.01 |
[EST] 240626 Tailwind / Bootstrap (1) | 2024.07.01 |
[EST] 240625 GitHub-01 (0) | 2024.07.01 |