자바 스크립트로 무엇을 할까
1. 웹요소 제어
- 웹요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음
- 웹 사이트 UI 부분에 많이 활용
ex) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴
한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠
2. 웹 어플리케이션을 만듦
- 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고받으며 애플리케이션처럼 동작
ex) 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스, 공개된 API를 활용한 다양한 서비스
3. 다양한 라이브러리를 사용할 수 있음
- 웹을 중심으로 하는 서비스가 늘어나면서 브라우정서 처리해야 할일이 늘어남
-> 라이브러리와 프레임워크가 계속 등장
4. 서버를 구성하고 서버용 프로그램을 만들 수 있음
웹 브라우저가 자바스크립트를 만났을 때
웹 문서 안에 자바스크립트 작성하기
- 웹 문서 안의 어디든 위치할 수 있지만, 주로
</body>태그 앞에 작성 - 자바스크립트 소스가 있는 위치에서 실행됨.
자바 스크립트를 작성하는 방식
- HTML 태그에 직접 사용( 인라인 방식, 우선순위 가장 위 )
- 최근에는 주로
<head>태그 내의<script>태그와</script>태그 사이에 자바스크립트 소스 작성 - 외부 파일 방식 ( 내 컴퓨터 / 외부 서버 연결 )
외부 스크립트 파일 연결해서 작성하기
- 자바스크립트 소스를 별도의 파일(*.js) 로 저장한 후 웹 문서에 연결
- 기본형 :
<script src = "외부 스크립트 파일 경로"></script>
자바스크립트를 입력하는 방식 3가지
<head>
1. html 파일에 자바스크립트를 포함해서 사용하는 방식---------------------------------
<script>
window.addEventListener("DOMContentLoaded", function() {
var btn = document.getElementById("btn-click02");
btn.addEventListener("click", function() {
alert("두번째 버튼 클릭했습니다.");
});
});
</script>
</head>
<body>
2. 인라인 방식----------------------------------------------------------------------
<button onclick="alert('클릭했습니다.')">클릭하세요</button>
<button id="btn-click02">클릭하세요</button>
<button id="btn-click03">3번째 버튼 클릭하세요</button>
<button id="btn-click04">네번째 버튼을 클릭하세요</button>
<script>
var btn3 = document.getElementById("btn-click03")
btn3.onclick = function() {
alert("세번째 버튼을 클릭했습니다.")
}
</script>
3. 외부 파일 방식----------------------------------------------------------------------
<script src="study01.js"></script>
</body>외부파일 : study01.js
var btn4 = document.getElementById("btn-click04");
btn4.addEventListener("click", function () {
alert("네번째 버튼을 클릭했습니다.");
});함수를 이용한 자바스크립트 작성 예시
<head>
<title>Document</title>
<script>
window.addEventListener("DOMContentLoaded", function () {
var btnalert = document.querySelector("#btn-click01");
var btnconfirm = document.querySelector("#btn-click02");
var btnprompt = document.querySelector("#btn-click03");
var btnwrite = document.querySelector("#btn-click04");
var btnlog = document.querySelector("#btn-click05");
btnalert.addEventListener("click", function () {
alert("alert()를 사용합니다.");
});
btnconfirm.addEventListener("click", function () {
var confirmValue = confirm("confirm을 사용합니다.");
alert(confirmValue);
});
btnprompt.addEventListener("click", function () {
var promptValue = prompt("prompt를 사용합니다.", "이것은 기본값");
alert(promptValue);
});
btnwrite.addEventListener("click", function () {
document.write("<h1>document.write()를 사용합니다.</h1>");
});
btnlog.addEventListener("click", function () {
console.log("console.log()를 사용합니다.");
});
});
</script>
</head>
<body>
<button id="btn-click01">alert 출력</button>
<button id="btn-click02">confirm 출력</button>
<button id="btn-click03">prompt 출력</button>
<button id="btn-click04">write 사용</button>
<button id="btn-click05">console.log 사용</button>
</body>btnalert.addEventListener("click", function () { alert("alert()를 사용합니다."); });
btnconfirm.addEventListener("click", function () { var confirmValue = confirm("confirm을 사용합니다."); alert(confirmValue); });
btnprompt.addEventListener("click", function () { var promptValue = prompt("prompt를 사용합니다.", "이것은 기본값"); alert(promptValue); });
btnwrite.addEventListener("click", function () { document.write("<h1>document.write()를 사용합니다.</h1>"); });
btnlog.addEventListener("click", function () { console.log("console.log()를 사용합니다."); });
자바스크립트 스타일 가이드
- 코드를 보기 좋게 들여쓴다.
- 세미콜론으로 문장을 구분한다.
- 공백을 넣어 읽기 쉽게 작성한다.
- 소스 코드를 잘 설명하는 주석을 작성한다.
- 식별자는 정해진 규칙을 지켜 작성한다.
- 예약어는 식별자로 사용할 수 없다.
변수
변수 선언의 규칙
- 변수 이름 규칙 : 자바와 동일
- 영어 대소문자를 구별함
- 카멜 선언법 이용하여 변수명 설정
변수 선언하기
var뒤에 변수 이름 작성- 데이터타입 구분하지 않음 -> 데이터가 변수에 저장될 때 데이터 타입 자동 확인
- 자바스크립트의 변수는 모든 데이터 타입 저장 가능
- var를 한번만 쓰고 뒤에 여러 개의 변수를 한꺼번에 선언할 수도 있음
var 변수명 - ES6에서 추가된 키워드 :
let(변수),const(상수)
변수에 값 할당
=기호 다음에 값을 저장
JS 변수 입/출력
- 기본 자료형 7가지
var num1 = 10;
var str1 = "문자열";
var bool1 = true;
var arr1 = [1, 2, 3];
var obj1 = {key1: "value1", key2: "value2"};
var undefined1;
var null1 = null;
console.log(num1);
console.log(str1);
console.log(bool1);
console.log(arr1);
console.log(obj1);
console.log(undefined1);
console.log(null1);
- 숫자형 데이터가 있던곳에 문자열 넣기 가능
num1 = "숫자형 데이터가 있던 곳에 문자열 넣기";
console.log(num1);- let 과 const의 차이점
거의 동일함. let은 변수, const는 상수
let num2 = 100;
const num3 = 1000;
let str2 = "두번째 문자열";
const str3 = "const를 사용한 문자열";
let bool2 = false;
const bool3 = false;
let arr2 = [1, 2, 3];
const arr3 = [1, 2, 3];
let obj2 = {"key1": 100, "key2": true};
// key는 큰따옴표 붙여줘도 되고 안붙여줘도 됨(보통 안붙이는것이 관례)
const obj3 = {key1: "값1", key2: "값2"};
let null2 = null;
const null3 = null;
console.log(num2);
console.log(num3);
console.log(str2);
console.log(str3);
console.log(bool2);
console.log(bool3);
console.log(arr2);
console.log(arr3);
console.log(obj2);
console.log(obj3);
console.log(null2);
console.log(null3);
let undefined2;
console.log(undefined2);-
let: ES6 버전에서 새로 추가된 변수 선언 키워드, 변수가 메모리 상에 살아있는 범위가 코드 블럭을 기준으로 함.
동일한 이름의 변수를 재정의 할 수 없음.XXX -
const: ES6 버전에서 새로 추가된 상수 선언 키워드, 상수가 메모리 상에 살아있는 범위가 코드 블럭을 기준으로 함.
선언과 동시에 한번만 데이터가 들어갈수 있음.
선언 이후에는 undefined로 선언했어도 데이터 못넣음.
상수로 선언하고 데이터를 초기화하지 않고 재사용(입력)하면 오류 발생. -
변수의 사용 범위
function func1() {
var varValue1 = 10;
let letValue1 = 100;
if(true) {
var varValue2 = 20;
let letValue2 = 200;
}
console.log("변수 varValue1 : " + varValue1);
console.log("변수 letValue1 : " + letValue1);
console.log("변수 varValue2 : " + varValue2);
ㅡㅡㅡㅡㅡㅡㅡ let으로 if내에서 선언된걸 밖에서 호출 불가능 ㅡㅡㅡㅡㅡㅡㅡ
// console.log("변수 letValue2 : " + letValue2);
}
var varValue3 = 30;
let letValue3 = 300;
varValue3 = 40;
letValue3 = 400;
ㅡㅡㅡㅡㅡㅡㅡ var를 통해 생성한 변수는 재정의 가능 => 프로그램의 불안정성 올라감
(재정의 : 앞에 형식(var) 들어간 코드를 의미) ㅡㅡㅡㅡㅡㅡㅡ
var varValue3 = 3000;
ㅡㅡㅡㅡㅡㅡㅡlet를 통해 생성한 변수는 재정의 불가능 ㅡㅡㅡㅡㅡㅡㅡ
// let letValue3 = 40000;
func1();
ㅡㅡㅡㅡㅡㅡㅡ 함수 내부의 변수를 함수 외부에서 접근할 수 없음. ㅡㅡㅡㅡㅡㅡㅡ
// console.log(varValue1);
// console.log(letValue1);
// console.log(varValue2);
// console.log(letValue2);자료형 (7개)
- 기본 유형
- 숫자형(Number) : 따옴표 없이 숫자로만 표기
var birthYear = 2000; - 문자형(String) : 작은 따옴표나 큰따옴표로 묶어서 표기
var greeting = "Hello!"; - 논리형(bool) : true / false
var isEmpty = true;
- 숫자형(Number) : 따옴표 없이 숫자로만 표기
- 복합 유형
- 배열(Array) : 하나의 변수에 여러 개의 값을 저장, 자바처럼 크기 지정해줄필요 없음
var seasons = ['봄', '여름', '가을', '겨울']; - 객체(Object) : 함수와 속성을 함께 포함
var date = new Date();
- 배열(Array) : 하나의 변수에 여러 개의 값을 저장, 자바처럼 크기 지정해줄필요 없음
- 특수 유형
- undefined : 자료형이 지정되지 않았을때의 상태. 변수 선언만 하고 값을 할당하지 않은 상태.
- null : 값이 유효하지 않을 때의 상태
배열
- 자바의 배열과 기본 사용법 동일
- 자바스크립트의 배열은 가변형(크기가 늘었다 줄었다 가능)
자바는 배열의 크기가 고정되어있음.
배열 관련 함수
toString(): 지정한 배열을 쉼표로 데이터를 구분한 문자열로 변환
사용법 :
배열명.toString();
const fruits = ["바나나", "오렌지", "망고", "파인애플"];
console.log(fruits);
const fruitsText = fruits.toString();
console.log(fruitsText);join(): toString()과 동일한 기능을 제공, 매개변수를 추가하면 추가한 문자로 데이터를 구분하여 문자열로 변환해줌.
사용법 :
배열명.join();,배열명.join("$");<- $ : 지정한 문자열
console.log("원본 배열 : " + fruits);
const fruitsText2 = fruits.join();
const fruitsText3 = fruits.join("$");
console.log("join() 사용 : " + fruitsText2);
console.log("join(\"$\") 사용 : " + fruitsText3);
const fruitsText4 = fruits.join('');
console.log("join('') 사용 : " + fruitsText4);push(): 기존 배열의 끝에 데이터를 추가함
let numArr = [10, 20, 30, 40];
console.log("원본 배열 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
numArr.push(50);
numArr.push(60);
console.log("push() 사용 후 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);pop(): 기존 배열의 마지막 데이터를 삭제함, 삭제한 데이터를 반환함.(= 잘라낸 데이터를 다른 변수에 넣을수가 있음)
사용법 :
배열명.pop();:삭제만 하는것
변수 = 배열명.pop();: 삭제한것을 다른 변수에 넣기
console.log("원본 배열 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
numArr.pop();
numArr.pop();
console.log("pop() 사용 후 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
let tmp = numArr.pop();
console.log("pop() 사용 후 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
console.log("pop()을 사용하여 가져온 데이터 : " + tmp);shift(): 지정한 배열의 첫번째 데이터를 삭제
사용법 :
배열명.shift();
변수 = 배열명.shift();<- 삭제한 데이터를 다른 변수에 집어넣을수있음.
console.log("원본 배열 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
numArr.shift();
console.log("shift() 사용 후 : ")
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
tmp = numArr.shift();
console.log("shift() 사용 후 : ")
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
console.log("shift()를 사용하여 가져온 데이터 : " + tmp);unshift(): 지정한 배열의 처음부분에 데이터를 추가
사용법 :배열명.unshift(데이터);
console.log("원본 배열 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);
numArr.unshift(100);
numArr.unshift(200);
console.log("unshift() 사용 후 : ");
console.log(numArr);
console.log("배열 numArr의 크기 : " + numArr.length);- concat() : 기존의 배열에 다른 배열을 연결하여 하나의 배열로 만듦, 원본은 그대로 두고 새로운 배열을 반환
사용법 :
변수 = 배열1.concat(배열2);
새 배열명 = 배열1.concat(배열2, 배열3, ... );
const arrNum1 = [10, 20, 30];
const arrNum2 = [40, 50, 60];
console.log("원본 배열 arrNum1");
console.log(arrNum1);
console.log("원본 배열 arrNum2");
console.log(arrNum2);
let arrResult1 = arrNum1.concat(arrNum2);
console.log("concat() 사용 후 ");
console.log(arrResult1);
const arrNum3 = [70, 80, 90];
arrResult1 = [];
console.log("원본 배열 arrResult1 : ");
arrResult1 = arrNum1.concat(arrNum2, arrNum3);
console.log("concat() 사용 후");
console.log(arrResult1);
console.log();splice(): 배열의 지정한 index에 데이터를 추가, 수정, 삭제
사용법 :배열명.splice(index, 삭제 수, 추가할 데이터, … );
let numArr2 = [10, 20, 30, 40, 50];
console.log("원본 배열 numArr2 : ");
console.log(numArr2)
console.log("numArr2의 크기 : " + numArr2.length);
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ데이터 추가ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
numArr2.splice(1, 0, 15);
numArr2.splice(3, 0, 25);
console.log("splice()로 데이터 추가 후 ");
console.log(numArr2);
console.log("배열 numArr2의 크기 : " + numArr2.length);
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ데이터 수정ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
numArr2.splice(5, 2, 35, 40);
console.log("splice()로 데이터 수정 후 : ");
console.log(numArr2);
console.log("배열 numArr2의 크기 : " + numArr2.length);
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ데이터 삭제ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
numArr2.splice(2, 2);
console.log("splice()로 데이터 삭제 후 : ");
console.log(numArr2);
console.log("배열 numArr2의 크기 : " + numArr2.length);slice(): 기존 배열의 일부를 잘라서 새로운 배열로 반환, 원본은 그대로 남겨둠
사용법 :
새 배열명 = 배열명.slice(시작번호, 끝번호);
새 배열명 = 배열명.slice(시작번호);
console.log("원본 배열 numArr2 : ");
console.log(numArr2);
console.log("배열 numArr2의 크기 : " + numArr2.length);
const newArr1 = numArr2.slice(3);
console.log("slice()를 사용하여 가져온 배열 : ");
console.log(newArr1);
console.log("배열 newArr1의 크기 : " + newArr1.length);
console.log("slice() 사용 후 원본 배열 : ");
console.log(numArr2);
const newArr2 = numArr2.slice(1, 3);
console.log("slice(1, 3)를 사용하여 가져온 배열 : ");
console.log(newArr2);
console.log("배열 newArr2의 크기 : " + newArr2.length);-
length : 지정한 배열의 크기를 알려주는 명령어
사용법 :배열명.length; -
delete : 배열의 지정된 index 의 데이터를 삭제, index 자체가 사라지는것이기 때문에 사용 자제.
사용법 :delete 배열명[index];
디버깅 하는 방법?
방법 1. 결과만 보고 소스코드 확인
방법 2. 중간중간에 console.log 찍어보고 확인
방법 3. 툴 사용
node.js
NVM
업데이트가 빠르기때문에 node.js 전용 버전관리 프로그램이 필요함
https://github.com/coreybutler/nvm-windows/releases
설치 후 cmd -> mvn -version 으로 정상적으로 설치되었는지 확인 가능
관리자권한으로 실행
-> nvm list
-> nvm list
버전 확인
테스트
경로 복사
이제 인텔리이제이에서 js파일을 바로 실행 가능함!
