자바스크립트란?
- Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당
- 웹 페이지가 동작하는 것을 담당
→ "웹 페이지에 생동감을 불어 넣기 위해 만들어진 언어"
자바스크립트는?
- 웹의 요소 제어
• HTML, CSS로 처리할 수 없는 것들을 JS로 처리- 다양한 프레임워크, 라이브러리 사용
- 다양한 프레임워크, 라이브러리 사용
• React (오픈 소스 자바스크립트 라이브러리),
• Vue (자바스크립트로 개발된 프론트엔드 프레임워크)
- 백엔드(서버) 개발
• Node JS - Express JS
* Node JS: 브라우저 안에서만 작동하던 JavaScript를 브라우저 외의 환경에서 작동할 수 있게 만들어 준 런타임 환경
* ExpressJS: Node.js 환경을 기반으로 만들어진 웹 애플리케이션 프레임워크. 주로 JavaScript로 백엔드를 개발할 때 사용
자바스크립트 사용
1. HTML 내부
자바스크립트 코드는 ＜script＞태그를 HTML 문서 안에 넣어서 사용
보통 HTML문서가 전부 로드 되고 나서인 ＜body＞ 아래에 사용
<script>
console.log("Hello World");
</script>
2. HTML 외부
자바스크립트 파일을 HTML과 별개인 .js 확장자의 파일로 저장한 후 사용
＜script＞의 src 속성으로 HTML 문서 위치의 기준 파일 경로를 입력하여 사용
<body>
<script srt="test.js"></script>
</body>
//test.js
console.log("Hello World");
자바스크립트 문법
- 자바스크립트 실행문은 ;(세미콜론)으로 구분
let str1 = "Hello";
let str2 = "World!";
console.log('${str2} ${str2}');
- 주석
• 자바스크립트 코드를 설명하고 더 읽기 쉽게 만드는 데 사용
• 대체 코드를 테스트 할 때 실행을 방지하는 데 사용
• 주석은 오류 검색을 위한 디버깅에 좋음
let a; // 주석은 실행할 때 무시
let /* 여러 줄
주석 */ b;
- 변수 선언
• 변수 선언 방법
1. var (함수 스코프)
2. let (블록 스코프)
3. const (블록 스코프)
var 변수1 = "var 사용은 권장되지 않음";
let 변수2 = "변수 선언시 let 사용 권장";
const 상수 = "상수 선언시 const 사용";
• 변수 이름(식별자) 규칙
1. 예약어(if, for 등) 사용 금지
2. 문자, _ , $, 숫자 사용 가능
3. 숫자는 맨 앞 불가능
- 변수 스코프
• 스코프란?
: 변수를 사용할 수 있는 유효 범위
자바스크립트에는 2가지의 스코프가 있음
1. 전역변수(global): 모든 곳에 사용 가능
2. 지역변수(local): { } 안에서만 사용 가능, { } 밖에서는 사용 불가능 ex) 함수, if문, for문 등
let a = 1;
if (true) {
let b = 2;
// a 접근 가능, b 접근 가능
} /* a 접근 가능, b 접근 불가능
a: 전역 변수, b: 지역 변수 */
- 타입
• Number
자바스크립트는 독특하게 하나의 숫자 타입만 존재
자바스크립의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리
• String
문자열(String) 타입은 텍스트 데이터를 나타내는데 사용
작은 따옴표('')또는 큰 따옴표 ("")안에 텍스트를 넣어 생성
• Boolean
논리적 참, 거짓을 나타내는 true와 false뿐
조건문에서 자주 사용
• Array
배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용
let a = 1; // Number 타입
let b = "abc" // String 타입
let c = true; // Boolean 타입
let d = [1, "abc", false] // Array 타입
- 연산자
1. 대입
let a;
a = 2 // 대입 연산자
2. 산술 연산자
• ＋ : 두 값을 더한다.
• － : 앞의 값에서 뒤의 값을 뺀다.
• × : 두 값을 곱한다.
• / : 앞의 값을 뒤의 값으로 나눈다.
• % : 앞의 값을 뒤의 값으로 나눈 나머지 값
let a = 2;
console.log(a + 1); // 산술 연산자 더하기
console.log(a - 1); // 산술 연산자 빼기
console.log(a * 1); // 산술 연산자 곱하기
console.log(a / 1); // 산술 연산자 나누기
console.log(1 % 1); // 산술 연산자 나머지
3. 비교 연산자
• 동등 연산자 ( == ) : x와 y의 값이 같다.
• 부등 연산자 ( != ) : x와 y의 값이 다르다.
• x > y : x의 값이 y의 값보다 크다.
• x >= y : x의 값이 y의 값보다 크거나 같다.
• x < y : x의 값이 y의 값보다 작다.
• x <= y : x의 값이 y의 값보다 작거나 같다.
let a = 2;
console.log(a == 1); // 같으면 true
console.log(a != 1); // 다르면 true
console.log(a > 1); // a가 1보다 크면 true
console.log(a >= 1); // a가 1보다 크거나 같으면 true
console.log(a < 1); // a가 1보다 작으면 true
console.log(a <= 1); // a가 1보다 작거나 같으면 true
- 조건문
• 조건문이란?
JavaScript의 비교, 논리 연산자와 boolean 데이터 타입을 이용하여 조건문을 사용
• if 문
if뒤 괄호에 조건이 오고, 조건이 될 수 있는 값은 boolean
값이 true면 if문의 내용이 실행, false면 else문의 내용이 실행, 또 그렇지 않으면 else if문의 내용이 실행
if (/* 조건문 A */) {
// 조건문이 참이면 실행
} else if (/* 조건문 B */) {
// 조건문이 A가 거짓이고 조건문 B가 참이면 실행
} else {
// 조건문이 모두 거짓이면 실행
}
- 반복문
• 반복문이란?
시작점과 종료시점을 지정해줘야 무한 loop를 돌지 않음
break: 중간에 반복문 종료
continue:가운데 조건만 빠지고 처음부터 끝까지 반복
• while문
while 위에 시작점이 있고 while뒤의 괄호에 조건이 오고, while 안에 증감이 있음
조건이 true인 동안에 반복해서 실행이 되고, 조건이 false가 되면 반복문이 종료
시작점
while (/* 조건문 */) {
/* 반복할 내용 */
/* 증감; */
}
• for문
for 괄호 안에 시작점, 조건, 증감을 써줌
조건이 true인 동안에 반복해서 실행이 되고, 조건이 false가 되면 반복문이 종료
for (/* 초기식 */; /* 조건식 */; /* 증감식 */) {
// 조건식이 참일 때 계속 반복 실행
}
함수
• 함수 선언문
앞에 function을 써주고 용도에 맞는 함수명을 지어줌
매개변수는 필요에 의해 작성
자바스크립트의 매개변수는 앞에 데이터 타입을 적어주지 않아도 됨
function 함수명 (/* 함수 안에서 사용할 */) {
/* 함수 내용 */
return 반환값;
}
Event 속성
<element
onclick = ""
onfocus = ""
onsubmit = ""
onerror = ""
•••
}
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 강보경 #3주차 (0) | 2024.05.13 |
|---|---|
| [2024 신입부원 기초 스터디] 황수민 #3주차 (0) | 2024.05.13 |
| [2024 신입부원 기초 스터디] 박건민 #3주차 (0) | 2024.05.12 |
| [2024 신입부원 기초 스터디] 김규현 #3주차 (0) | 2024.05.12 |
| [2024 신입부원 기초 스터디] 김지나 #3주차 (0) | 2024.05.12 |
