* JavaScript 안내서 - JavaScript | MDN (mozilla.org)
JavaScript 안내서 - JavaScript | MDN
JavaScript 안내서에서 JavaScript 언어 개요와 사용법을 알아보세요. 언어 기능에 대해 상세한 정보가 필요하면 JavaScript 참고서를 방문하세요.
developer.mozilla.org
* visual studio code에서 open folder에서 course에 js 폴더 추가해서 거기로 폴더 선택하면 저장 위치 변경 가능
- 실행 순서
1. 자바스크립트의 기본 구조
- <script> 태그를 사용하여 HTML 문서에 코드를 작성한다.
- type 속성값으로 "text/javascript"를 입력(HTML5에서는 생략 가능)
2. 자바스크립트를 외부 파일로 사용되는 경우 (CSS의 외부스타일 시트방법과 동일)
- 태그 부분이든 기능을 구현할 곳에 삽입 외부 파일 자바스크립트의 확장자는 "js"
- script element의 src 속성값이 호출할 자바스크립트의 파일명
- 사용 방법
<script type = "text/javascript" src = "호출할 자바 스크립트 파일명.js"></script>
- 자바스크립트 파일 안에는 <script> 태그를 포함할 수 없습니다.
3. 변수
- 자바스크립트 구문: 문장 끝에 세미콜론(;)을 입력한다. 구문 사이를 구분하기 위해 사용. 생략해도 무관하나 오류방지를 위해 권장한다.
- 자바스크립트 주석 : // : 한 줄 주석 처리. 프로그램 코드 끝에 사용 /* ~ */ : 한 줄 이상의 주석 처리
- 변수 선언
1) var 키워드 이용: 자바스크립트에서 변수의 스코프(scope)는 코드 블록({ })이 아닌 함수 단위
2) let키워드 이용(ES6문법에 추가된 변수): var는 동일 변수의 중복을 허용하지만 let은 중복 변수의 선언을 허용하지 않습니다.
4. 출력
- 자바 스크립트는 문법이 틀리면 화면상에 표시되지 않습니다.
- 개발자 도구 F12에서 확인해야 합니다
- 콘솔의 결과도 개발자 도구에서 확인합니다
* 예제 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--외부 js링크(상대 or 절대 경로)-->
<!--js 링크 순서는 반드시 head 있는 것은 아니고, 파일에 렌더링 순서에 따라 달라질 수 있습니다.-->
<script src ="index01.js"></script>
</head>
<body>
<script>
//동일 변수의 선언이 가능하나 주의
var a = 10;
var a = 20;
a = 100; //변수의 변경
console.log(a); //콘솔 출력
document.write(a); //html 화면으로 출력(많이 사용되지 않습니다.)
// alert(a); //경고창
confirm(a); //확인창(확인과 취소가 둘 다 나옴) - 경고창이랑 둘 다 하면 순서대로 나옴
</script>
</body>
</html>
5. 데이터 타입
1) 기본타입
- 숫자(number): 정수, 실수 구분 없음
- 문자열(string): 문자, 문자열 구분 없음 쌍따옴표("") 로 묶어도 되고, 홑따옴표(‘’)로 묶어도 됨
- 불린(boolean) 타입: true/false 비교 결과가 0, null, ""(빈 문자열), false, undefined, NaN으로 판단되면 false, 나머 진 true 동등 비교를 할 경우 타입도 같이 비교해 주는 === 사용을 권장
- undefined: 변수는 선언했으나 초기화를 하지 않은 경우 자동 저장됩니다. 불린형은 false로 반환, 숫자는 NaN, 문자열은 "undefined"로 반환됨(얘도 타입으로 봄)
- null: 값은 저장했으나 존재하지 않을 때 나타납니다
* 예제 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = "10"; //문자 Ok
var num2 = '10'; //문자
var num3 = 10; //숫자
//변수의 변경 - 타입을 지키지 않아도 됩니다.
num1 = 3.14;
num2 = 10;
num3 = '10';
//숫자 + 숫자 = 숫자, 숫자 + 문자 = 문자(자바와 동일)
var result = num1 + num2 + num3;
console.log(result);
console.log(10 + 3.14); //13.14
console.log(20 + '20'); //2020
console.log(10 + undefined); //잘못된 숫자 연산에서는 NaN
//데이터 타입 number, str, boolean, undefined, null
var bool = true; //false
console.log(bool);
//undefined - 초기값을 지정하지 않으면 나타납니다.
var un;
console.log(un);
//null - 초기값을 지정 했는데, 없는 경우
var tag = document.getElementById("a");
console.log(tag);
//키워드 - typeof(변수의 타입이 뭔지 알 수 있다)
console.log( typeof num1 );
console.log( typeof num3 );
console.log( typeof bool );
console.log( typeof un );
console.log( typeof tag ); //객체인데 값이 없음
</script>
</body>
</html>
2) 참조타입
- 배열 [ ]
- 객체 {}로 생성
6. 연산자
- 기본적으로 자바와 동일하다. 단 === !== 는 타입도 비교하는 연산자 이다
* 예제 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = "10";
var num2 = 10;
console.log( num1 == num2); //t(값만 비교)
console.log( num1 != num2); //f
console.log( num1 === num2 ); //f(값과 타입까지 비교)
console.log( num1 !== num2 ); //t
var a;
var b = null;
console.log(a, b, a == b); //t - 값만 비교
console.log(a, b, a != b); //f
console.log(a, b, a === b); //f - 값과 타입 비교
console.log(a, b, a !== b); //t
</script>
</body>
</html>
7. 배열
- 자바 스크립트의 배열은 [ ] 로 묶어 주기만 하면 됩니다. 자바 스크립트의 배열은 저장은 자바와 다르게 타입과 상관없습니다.
* 예제 4, 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//배열의 선언 방법 1
//[]로 표현합니다
var arr = [1, 2, 3];
console.log(arr);
var arr2 = ['a', 'b', 'c'];
console.log(arr2);
var arr3 = [1, 2, 3, 'a', 'b', 'c'];
console.log(arr3);
//배열의 사용
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
arr[0] = 100; //값의 변경
console.log(arr)
console.log('--------------------------------------------');
//배열의 선언 방법2
var arr = new Array(); //빈 배열
console.log(arr);
var arr2 = new Array(10); //크기가 10인 배열
console.log(arr2);
var arr3 = new Array(1, 2, 3); //크기가 3, 초기값 1,2,3
console.log(arr3);
//배열의 길이 확인
console.log( '배열의 길이:', arr3.length );
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//배열을 조작하는 다양한 함수
//MDN
var arr = [1, 2, 3, 4, 5];
//배열 마지막에 추가 push()
arr.push(6);
console.log(arr);
//배열 마지막 요소 제거 pop()
arr.pop();
console.log(arr);
//배열의 첫번째 요소 추가 unshift()
arr.unshift(10);
console.log(arr);
//배열의 첫번째 요소 제거 shift()
arr.shift();
console.log(arr);
//배열의 중간의 추가 삭제 splice()
arr.splice(2, 1); //2번 인덱스의 1개 삭제
console.log(arr);
arr.splice(2, 1, 'a'); //2번 인덱스의 1개 삭제, a 추가
console.log(arr);
arr.splice(2, 0, 'b'); //2번 인덱스 1개 삭제, b 추가
console.log(arr);
//배열 정렬 → 사전 등재순
arr.sort();
console.log(arr);
arr.reverse();
console.log(arr);
//배열의 탐색
console.log( arr.indexOf('a') ); //발견된 위치
console.log( arr.indexOf('a', 2) ); //2번째 위치에서부터 a를 탐색, 값이 없다면 -1 반환
if(arr.indexOf('a') != -1) {
}
//배열 합치기 {good}
var arr2 = ['가', '나', '다'];
var newArr = arr.concat(arr2);
console.log(newArr);
//filter, foreach, join, map 등등 자주 사용 됨.
</script>
</body>
</html>
