※ 자바스크립트
node.js : 종합적인 프로그램 관리 도구
※ 개발 환경 구성
1. vscode 설치
2. Node.js 설치
https://nodejs.org/ko/download/
다운로드 | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
2. vscode에서 node.js 설치 확인
터미널 클릭
node -v
npm -v
입력 후 제대로 설치됐는지 확인
3. vscode Extention 설치
※ 자바스크립트 기본 문법
1. 자바스크립트 작성 위치
- head, body 의 마지막쪽에 작성 (효율적인 관리를 위해)
- head에 작성하면
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
document.write("자바스크립트 head에 위치 1<br>");
</script>
</head>
<body>
<script>
document.write("자바스크립트 head에 위치 2<br>");
</script>
</body>
</html>2. HTML파일 실행
2-1) 콘솔
<script>
document.write("정상적인 코드 이용");
document.wirte("잘못된 코드 이용");
console.log("콘솔창에 출력하기");
</script>
* js 코드 에러
- 코드에 에러가 생기면 다음 코드가 실행되지않음
* 여러개의 인자를 한번에 출력할 수 있다. ↓
console.log("콘솔창에 출력하기", 1, true, [], {});
* log level 정리 필요
4. 주석처리
- 자바랑 같음
- 일반주석 / , 범위주석 /* */, 문서주석 /** */ 등
5. 변수와 상수
5-1) 변수
- 자바스크립트에서는 데이터/오브젝트/함수를 변수로 선언해서 사용할 수 있다. (충격적임)
- var, let 키워드 사용
5-2) 상수
- const 키워드 사용
5-3) 공통사항
- 자바나 c같은 플그래밍 언어는 변수를 선언할 때 변수에 담을 데이터에 따라 변수를 선언하는 방식이 다르지만, 자바스크립트는 데이터 타입에 상관없이 동일한 변수 선언자를 사용할 수 있다.
5-4) 변수 선언 형식
- 변수 선언자, 변수명, 할당값 형식으로 선언
- 지역변수는 의미가 크게 상관없지만, 전역변수의 변수명은 어떤 용도로 사용될지 알 수 있도록 하는것이 매우중요
5-5) 변수명 작성 규칙
-
6. var 선언자
- var는 중복선언이 가능함
- let은 변수의 중복선언을 막아줌
var x = 5;
var y = 6;
var x = 10;
var z = x+y;
console.log(z)
let a = 5;
let b = 6;
let a = 10;
let c = a+b;
console.log(c)
7. let 선언자
- 블록기반 scope 사용
- ↓ 에러 발생
{
let a = 10;
}
console.log(a);
8. const선언자 (상수)
- 스코프 및 사용방법은 let과 동일
- 변수명은 대문자를 사용 (소문자는 비초기화상수)
-
9. 데이터 타입
- String (문자열)
- Number (숫자/범위는 double과 비슷함)
- Boolean(참/거짓)
- Undefined
- Null
- Symbol
9-1) String
- 쌍따옴표, 홑따옴표를 사용해 변수에 할당 할 수 있음
- 문자열 데이터 안에 쌍따옴표를 사용하려면 문자열을 홑따옴표를 이용해서 할당해야 하고
데이터안에 홑따옴표를 이용하려면 문자열을 쌍따옴표를 이용해서 할당해야함
- 자바의 문자열 사용법도 사용가능
예제)
let single = "He is called 'johnny'";
let double = 'He is called "johnny"';
let double2 = "He is called \"johnny\""; // 자바의 문자열 사용법
console.log(single)
console.log(double)
console.log(double2)
// 영어, 숫자, 한글 전부 1글자
console.log(single.length);
let mixedStr = 'abcd가나다';
console.log(mixedStr.length);
console.log(mixedStr.substring(4, 5));
console.log(mixedStr[4]);
9-2) Number
- 정수만 사용하는걸 권장 (실수는 오차가 발생할 수 있음)
let x1 = 34;
let x2 = 34.12;
//데이터 타입 확인
console.log(typeof mixedStr);
console.log(typeof x1);
x1 = '1234';
console.log(typeof mixedStr);
console.log(typeof x1);
console.log(Number.MAX_VALUE);
* 부동소수점
- 2진화에서 문제가 발생 (정수 문제가 없지만 실수에서 2진화 과정중에 문제가 발생한다.)
9-4) Boolean
- 자바와 같음
9-5) Undefined (정의되지 않음)
- 변수를 선언하고 값을 할당하지 않은상태
var val = undefined;
console.log(val);
// not defined = 선언하지 않은 상태
console.log(aaa);
9-7) Null
- null은 object type이다.
- js에서는 null이라고 명시해두지않으면 자바와 다르게 null을 보기 힘들다
- null은 개발자가 의도해서 사용하는 경우라고 보면 된다. (Undefined도 같음)
-
var val = undefined;
var n = null;
console.log(typeof val);
console.log(typeof n);
9-8) Symbol
- 나중에함
* js는 모든 데이터 타입이 참조형으로 관리된다
9-9) Objects
- 자바스크립트의 모든것은 객체(Object)이다.
- 모든 오브젝트는 요소가 있음
- map, object
9-9-1) Object
-
// {} = 오브젝트 리터럴
let obj = {a:10, b:'abcd', c:{a:10, b:20}};
// 데이터 변경
obj.a = 20;
// 데이터 추가
obj.d = 50;
// 데이터 삭제
delete obj.a;
console.log(obj);
console.log(obj.b);
console.log(obj["b"]);
console.log(obj.c.b);
9-10) Array (배열)
- 하나이상의 다중 데이터를 저장할 수 있음. (자바랑 같음)
- 인덱스 순번은 0번부터 시작됨(자바랑 같음)
- 아무타입(문자, 숫자, 객체(Object), 함수 등등 섞어서 저장할 수 있음 (자바랑 다른점)
- 자바에서의 list와 비슷함
let arr = [10, 30, 50, "a", true, {}, [1, 2, 3]];
console.log(arr);
console.log(arr.length);
console.log(arr[3]);
// 배열 수정
arr[3] = 100;
console.log(arr[3]);
let students = [
{no:1, name:"홍길동", kor:90},
{no:2, name:"김길동", kor:70}
];
console.log(students);
console.log(students[1].name);
* 호출스택중 push, pop 정리 필요
9-11) typeof
- 변수의 데이터 타입을 알아낼 수 있음.
10. 64비트 부동소수점
- 浮動소수점
- 어.... 공부하자..
11. 연산자
- 산술, 비교, 논리, 문자열
11-1) 할당연산자 (대입연산자)
p. 66 표 삽입 필요
console.log("12"+3);
console.log("12"-3);
console.log("12"*3);
console.log("12"/3);
console.log("a"/3);
11-2) 비교연산자
// 비교연산
num = 10;
let str = "10";
console.log(num == str);
// === 피연산자의 수치값만 비교하는것이 아닌 타입까지 비교
console.log(num === str);
//
console.log(num !== str);총 정리본 (보고 정라해둘것)
// 대입
// <<
let num = 10;
num <<=3;
console.log(num);
num = 3 ** 4 ;
console.log(num);
// 비교연산
num = 10;
let str = "10";
console.log(num == str);
// === 피연산자의 수치값만 비교하는것이 아닌 타입까지 비교
console.log(num === str);
//
console.log(num !== str);
// 산술연산
// + - * / %
// 단항 부호 연산 + -
// NaN : Not a Number
console.log(typeof NaN);
// 할수있을때 까지만 해줌
console.log(parseInt("123가나다"));
console.log(parseInt("a123가나다"));
console.log(+("123가나다"));
console.log(NaN == NaN);
console.log(3/0 == Infinity);
console.log(isNaN(NaN));
console.log(isFinite(Infinity));
//
console.log("12"+3);
console.log("12"-3);
console.log("12"*3);
console.log("12"/3);
console.log("a"/3);
// 이중부정
console.log(!!"");
console.log(!!0);
console.log(!!NaN);
console.log(!!Infinity);
console.log(!!undefined);
console.log(!!null);
console.log(!![]);
console.log(!!{});
console.log(!!" ");
let arr = [];
arr.length = 20;
console.log(arr[30]);
arr[30] = 1;
console.log(arr);
let sum = 0;
// for(let i=0; i<=100; i++) {
// sum += i
// }
for(let i=100; i-- ;){
sum += i+1
}
console.log(sum)
12. 조건문
예제)
<script>
// undefined alert('알림메세지') 알림
// String prompt('문구', '기본값'); 사용자 입력값
// boolean confirm('문구'); 선택(참/거짓)
// 사용자로부터 나이를 입력받아서 요금을 출력
// 7세이하 0원
// 어린이 8세이상 13세이하 450원
// 청소년 14세이상 19세이하 720원
// 일반 20세이상 1200원
// 노인 70세이상 0원
let age = prompt('나이를 입력하세요')
// age = 0;
let fare = 0;
if(age <= 7 || age >= 70) {
fare = 0;
}
else if (age <= 13) {
fare = 450;
}else if (age <= 19) {
fare = 720;
} else {
fare = 1200;
}
alert(fare + "원");
</script>13. switch
14. 반복문
- for-loop, for-in, for-of (향상포문과 같음), while
let arr = ['봄', '여름', '가을', '겨울'];
// console.log(arr[0]);
// console.log(arr[1]);
// console.log(arr[2]);
// console.log(arr[3]);
// for(let i=0; i<arr.length; i++) {
// console.log(arr[i]);
// }
let obj = {a:1, b:2, c:3};
// in 연산자
console.log('a' in obj);
console.log('d' in obj);
console.log(0 in arr);
console.log(4 in arr);
for(let i in arr) {
console.log(arr[i]);
}
for (let i in obj) {
console.log(obj[i]);
}
// for-of
// Array, Map, String등 반복가능한 객체에서 사용가능
for(let i of arr){
console.log(i);
}
'HTML5, CSS3 > Java Script' 카테고리의 다른 글
| window.onload(js)와 $(document).ready(jquery)의 차이 (0) | 2024.01.17 |
|---|---|
| 23-02-27 JS (0) | 2023.02.27 |
| 23-02-24 JS (0) | 2023.02.24 |
| 23-02-23 JS (0) | 2023.02.23 |