###########################################################################
###########################################################################
1장. JS 개요
###########################################################################
1. (Vanilla) Javascript(JS) 개요
- Java 언어와 무관
- 웹브라우저에서 실행됨 ( JS 엔진 )
크롬의 JS 엔진: v8
html 랜더링 기능: 랜더링 엔진
- V8엔진을 크롬 브라우저뿐만 아니라 일반 서버에서도 실행될 수 있도록 만듬.
==> node.js
클라이언트 서버
(크롬브라우저:V8) (node.js:V8)
- JS 라이브러리
==> jQuery
- JS 프레임워크 (프런트 앤드 기술 )
=> React.js (*, 페이스북)
=> Vue.js ( 중국계 미국인 )
=> Angular ( 구글 )
- React 종류 3가지
가. React.js
- CSR ( Client Side Rendering )
나. Next.js
- SSR ( Server Side Rendering )
다. React Native
- 모바일 용
- JS 표준화 ==> ES6 ( ECMAScript 6: 2015 년 )
일반적인 JS는 ES5 의미한다.
- TypeScript (******)
JS + 타입지정 ==> 개발향상 기대
2. JS 특징
- 인터프린터 언어 (컴파일 없이 한줄씩 실행)
- 대소문자 구별함.
- JS 엔진에서 실행됨.
- html 태그에 포함되어 정의함.
가. <head></head> 태그안에 JS 정의가능
- <script></script> 태그 이용
나. <body></body> 태그안에 JS 정의가능
- <script></script> 태그 이용
- 주석문은 자바와 동일 ( // 한줄주석, /* 여러줄주석 */)
<!DOCTYPE html>
<html lang="en">
<head>
<title>js01_사용방법1_head태그안</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
alert("hello");
console.log("콘솔에출력1", 10, 20);
console.log("콘솔에출력2");
</script>
</head>
<body>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>js01_사용방법1_head태그안2_외부파일</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- external 형식 -->
<script src="external.js"></script>
<!-- internal 형식 -->
<script>
alert("hello");
console.log("콘솔에출력1", 10, 20);
console.log("콘솔에출력2");
</script>
</head>
<body>
</body>
</html>// external.js
console.log("external.js");
---------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>js01_사용방법2_body태그안</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
alert("hello");
console.log("콘솔에출력1", 10, 20);
console.log("콘솔에출력2");
</script>
</body>
</html>
###########################################################################
###########################################################################
2장. 식별자
###########################################################################
1. 식별자(identifier)
- JS 문법에 지정하는 영단어.
- 대소문자 구별
- 첫글자는 반드시 영문자 또는 _ 또는 $ 만 가능.
이후에 숫자지정 가능.
- 자바와 비슷하게 시스템 정의 식별자(예약어,키워드) 와 사용자 정의 식별자가 있음.
2. 데이터 종류(*)
가. 기본 데이터형
- 수치데이터: 정수와 실수 포함
- 문자데이터: 문자와 문자열 포함
ex> '홍길동'
- 논리데이터: true / false (일반데이터도 boolean 값으로 처리 가능)
- undefined: 변수 초기화가 안된 상태 의미.
- null: 초기화는 되었는데 값(객체)없음 의미.
- NaN: Not a Number
ex> Number.parseInt("홍길동"); ==> NaN 발생
자바: Integer.parseInt("123"); ==> 123
Integer.parseInt("홍길동"); ==> 에러
나. 참조 데이터형(객체데이터 의미)
- 배열(객체): [값, 값2, ..]
- JSON(객체): {key:value, key:value}
- 함수(function): 기능처리(*)
ex> function fun() {}
==> 함수가 데이터란 의미는 함수를 변수에 저장할 수 있음을 의미한다.
- 클래스(class):
class Cat{
생성자
메서드(함수문법)
function fun() {}
}
3. typeof 연산자
- 데이터타입을 알수있다.
- 반환값은 문자열로 반환.
- 문법: typeof();
<!DOCTYPE html>
<html lang="en">
<head>
<title>js02_데이터종류</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 1. 기본형
console.log("수치 데이터(정수): ", 100);
console.log("수치 데이터(실수): ", 3.14);
console.log("문자 데이터: ", '홍길동', "홍길동");
console.log("문자 데이터(escape문자): ", '홍길\t동', "홍길\n동", "홍길\'동", '홍길\"동');
console.log("논리 데이터:", true, false);
console.log("undefined: ", undefined);
console.log("null: ", null);
console.log("NaN: ", NaN);
console.log("------------------------")
// 2. 참조형
console.log("배열(객체):", [10, 20, 30]);
console.log("JSON(객체):", { "name": "홍길동", "age": 20 })
console.log("함수(객체):", function () { });
class Cat { }
console.log("클래스(객체):", new Cat);
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js02_데이터종류2_typeof</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 1. 기본형
console.log("수치 데이터(정수): ", 100, typeof 100); // "number"
console.log("수치 데이터(실수): ", 3.14, typeof 3.14); // "number"
console.log("문자 데이터: ", '홍길동', "홍길동", typeof "홍길동"); // "string"
console.log("논리 데이터:", true, false, typeof false); // "boolean"
console.log("undefined: ", undefined, typeof undefined); // "undefined"
console.log("null: ", null, typeof null); // "object"
console.log("NaN: ", NaN, typeof NaN); // "number"
console.log("------------------------")
// 2. 참조형
console.log("배열(객체):", [10, 20, 30], typeof [10, 20, 30]); // "object"
console.log("JSON(객체):", { "name": "홍길동", "age": 20 },
typeof { "name": "홍길동", "age": 20 }); // "object"
console.log("함수(객체):", function () { }, typeof function () { }); // "function"
class Cat { }
console.log("클래스(객체):", new Cat, typeof new Cat); // "object"
</script>
</head>
<body>
</body>
</html>
###########################################################################
###########################################################################
3장. 변수와 상수
###########################################################################
1. 변수 용도
- 데이터 저장
2. 변수 특징
- 데이터형을 지정하지 않는다.(*)
변수에 저장되는 데이터 종류(데이터타입)을 제한안함.
즉, 하나의 변수에 모든 데이터를 저장할 수 있음.
3. 문법
가. var 키워드 이용 (OLD 방법)
- var 변수명; // 변수선언
변수명 = 값; // 초기화
- var 변수명 = 값;
특징:
변수명 중복가능.
함수 스코프를 따른다. (함수(function)가 아닌 {} 에서는 외부에서도 사용 가능)
ex> if(true) {
var n = 10;
}
console.log(n); // 사용 가능
function fun() {
var n2 = 10;
}
console.log(n2); // 사용 불가능
나. let 키워드 이용(ES6 지원)
- let 변수명; // 변수선언
변수명 = 값; // 초기화
- let 변수명 = 값;
특징:
변수명 중복불가능.
블럭 스코프를 따른다.
ex> if(true) {
var n = 10;
}
console.log(n); // 사용 불가능
function fun() {
var n2 = 10;
}
console.log(n2); // 사용 불가능
4. 형변환
1> + 를 제외한 나머지 산술연산자(-, *, /, %)는 문자열이
자동으로 수치로 형변환되어 연산됨.
+ 는 연결처리됨.
2> 일반 데이터가 boolean 으로 처리
- false 로 처리되는 일반 데이터
0
""(빈문자열)
undefined
null
NaN
- true 로 처리되는 일반 데이터
==> 위의 false 로 처리되는 5가지를 제외한 나머지 데이터 모두 true 로 처리됨.
// JS 에서 가능한 표현식
if (10) {
console.log("10은 true");
}
5. 기본형 변수 vs 참조형 변수
1> 기본형 변수
- 기본형 데이터를 저장하는 변수
ex>
let n = 10;
let n2 = n;
n2 값을 변경해도 n 값에는 변경이 안된다.
2> 참조형 변수
- 참조형 데이터를 저장하는 변수
ex>
let x = [10,20,30];
let x2 = x;
x2 값을 변경하면 x값도 변경이 됨.
<!DOCTYPE html>
<html lang="en">
<head>
<title>js03_변수1_var</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// var 키워드
/*
- 변수명 중복가능
- 함수 스코프를 따름
*/
var n;
console.log(n); // undefined (*) / 선언만 되어있고 초기화가 안되어있을시 undefined 발생
n = 10;
console.log(n); // 10
// 변수명 중복가능
var n = 3.14;
console.log(n); // 3.14
// 함수 스코프
if (true) {
var n2 = 100;
}
console.log(n2); // 100
function fun() {
var n3 = 200;
}
// console.log(n3); // n3 is not defined
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js03_변수2_let</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// let 키워드
/*
- 변수명 중복 불가능
- 블럭 스코프를 따름
*/
let n;
console.log(n); // undefined (*) / 선언만 되어있고 초기화가 안되어있을시 undefined 발생
n = 10;
console.log(n); // 10
// 변수명 중복 불가능
// let n = 3.14;
// console.log(n); // 3.14
// 블럭 스코프: 모든 블럭밖에서 사용 불가
if (true) {
let n2 = 100;
}
// console.log(n2); // n2 is not defiend
function fun() {
let n3 = 200;
}
// console.log(n3); // n3 is not defined
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js03_변수3_형변환1_산술연산식</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 1. + 를 제외한 나머지 산술연산자(-, *, /, % ) 는 문자열이 자동으로 수치로
// 형변환되어 연산됨.
console.log("10" + 20); // 1020
console.log("10" - 20); // -10
console.log("10" * 20); // 200
console.log("10" / 20); // 0.5
console.log("10" % 20); // 10
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js03_변수3_형변환2_boolean으로처리</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 2. 일반데이터가 논리값으로 처리
// false 로 처리되는 데이터
console.log(!0); // true
console.log(!""); // true
console.log(!undefined); // true
console.log(!null); // true
console.log(!NaN); // true
// true 로 처리되는 데이터
console.log("#########");
console.log(!10); // false
console.log(!"홍길동"); // false
// JS 에서 가능한 표현식
if (10) {
console.log("10은 true");
}
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js03_변수4_기본형_참조형</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 기본형 변수
let n = 10;
let n2 = n;
n2 = 20;
console.log(n, n2); // -> n 에는 영향이 없다.
// 참조형 변수
let x = [10, 20, 30];
let x2 = x;
x2[0] = 100;
console.log(x, x2); // -> x 에는 영향이 있다.
</script>
</head>
<body>
</body>
</html>
6. 상수
- const 키워드 이용
- 문법:
const 상수명 = 값;
- 값 변경이 불가
- let 키워드 문법을 따름 (중복불가, 블럭스코프를 따름)
* 주의할 점
const NUMS = [10,20,30];
NUMS[0] = 100;
NUMS 는 주소값을 가지고 있고 주소값 자체가 변경되는 것이 아니기 때문에
위 코드는 에러없이 동작이 된다.
즉, 변경전과 변경후의 배열의 주소값은 동일함.
단지, 배열의 요소가 달라진 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>js04_상수</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 상수
const NUM = 10;
console.log(NUM);
// NUM = 20; // TypeError: Assignment to constant variable.
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js04_상수2_요소값은 변경가능</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 상수
/*
NUMS 는 주소값을 가지고 있고 주소값 자체가 변경되는 것이 아니기 때문에
위 코드는 에러없이 동작이 된다.
즉, 변경전과 변경후의 배열의 주소값은 동일함.
단지, 배열의 요소가 달라진 것이다.
*/
const NUMS = [10, 20, 30];
NUMS[0] = 100;
console.log(NUMS);
// NUMS = [20, 30, 40]; // Assignment to constant variable.
</script>
</head>
<body>
</body>
</html>'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 2일차 - 1일차 정리 (0) | 2024.05.03 |
|---|---|
| js 1일차 - 연산자, 문장, 객체 (1) | 2024.05.02 |
| CSS 총정리 (2) | 2024.05.02 |
| CSS 5일차 - Grid(3) item 속성 (0) | 2024.05.02 |
| CSS 5일차 - Grid(2) Gap, 정렬, auto-rows (0) | 2024.05.02 |
