Day34
2020. 11. 17. 15:30ㆍ교육과정/KOSMO
키워드 : 자바스크립트 기초 문법 / 달력만들기
****
1. 자바스크립트 데이터 타입
1) 데이터타입 + 변수
2) 연산자
3) 제어문
4) 유용한 객체 - String, Array, Math, Date, Map, Set
"자바스크립트는 자바스크립트이다."
| 현재 | 미래지향 | ||
| Presentation(UI) | HTML+CSS+JS | HTML+CSS+JS | => angular / react / vue |
| Application(Pg) | JSP(SAP, PHP) | nodeJS | (기본적으로 WebServer역할을 함) |
| Database | ORACLE | mongoDB | |
| --> 웹서버 프로그램이 별도로 필요함 |
--> 최신 JS로 만들어져 다소 어려움 |
(+) [도서] 함수형 자바스크립트 프로그래밍 + inflearn ( 무료 인강 )
* HTML5에 추가된 JavaScript API : Geolocation API (사용자의 지리적인 위치를 취득할 때) / Canvas (JavaScript로 동적인 이미지를 그릴 때) / FileAPI (로컬의 파일 시스템을 읽고 쓸 때) / Web Storage (로컬 데이터를 저장할 때) / Indexed Database (키/값의 세트로 JavaScript를 객체 관리할 때) / Web Workers (백그라운드에서 JavaScript를 병렬 실행할 때) / Web Sockets (클라이언트-서버 간의 쌍방향 통신을 실시하기 위한 API)
* JS의 유연성은 컴파일러가 깐깐하지 않기 때문이며 그로 인한 장단점이 있다. (버그나 보안상의 문제를 일으키기 쉬움)
* ECMAScript로 최신 개정판은 ES6이라고 한다. (관련 참고 도서 多)
* JS로 할 수 있는 일 : HTML 페이지 변경 / CSS 스타일 변경 / ★ form의 유효성 검증 ★ / 마우스와 키보드 이벤트에 대한 처리 / 웹 브라우저 제어 / 쿠키 처리 / 동적 효과 처리 / Ajax 기술로 웹 서버와 통신 (사용자 모르게 back에서 서버와 통신하는 것)
* 수업에서는 내부 스크립트로 사용하지만, 실무에서는 외부 스크립트로 사용하게 된다.
* 외부 + 내부 같이 기술하려면 일반적으로 외부스크립트를 먼저 기술한다.
* <body>나 <head> 태그 안 쪽에 JS의 <script> 태그가 자리한다.
* <!-- ~~~~~~~ --> 는 JS에서 주석이 아니다. 과거에는 JS를 인식하지 못 할 경우에 주석처리 되도록 한 것이나, 현재는 JS를 거의 다 인식하기 때문에, <!-- --> 안의 코드가 실행된다.
* 문장 끝에는 세미콜론( ; )을 붙인다.
* 문장 도중에 공백이나 개행을 포함하는 것도 가능하다.
* 대소문자를 구분한다.
* <script> 태그 안 쪽에서는 자바와 동일하게 //, /* */ 주석을 사용한다.
* 변수 선언 : var ............... let / const
var없이도 선언 가능하나 비추! ES5, ES6에서 추가된 변수, const는 변하지 않는 값(상수)일 때 사용하는 변수 / let은 변하는 값일 때 사용하는 변수
* 변수 명명 규칙 : 영문자, 숫자, _, $ 로 조합 / 첫번째 문자는 숫자 사용 불가 / 대소문자 구별 / 예약어 사용 불가
* 데이터 타입 : 1) 기본형 - 수치형(number) / 문자열(string) / 논리형(boolean) / 특수형 (null, undefined)
2) 참조형 - 배열(array) / 객체(object) / ★ 함수(function) ★
* JS 에러 여부 확인 : 웹 페이지에서 F12로 개발자 모드에 들어가면 우측 상단에 빨간 X-box 눌렀을 때 확인 가능
--> 매번 개발자모드 들어가서 확인하는 것이 번거로우므로 확장 프로그램을 설치하는 편이 좋다.
>> 더보기 - 도구 더보기 - 확장프로그램 - 좌측 메뉴 - Chrome 웹 스토어 열기 - JavaScript Error Notifier 검색 후 Chrome에 설치 - 개발하던 웹 페이지로 돌아왔을 때 에러상황을 하단에서 바로 알려줌
* JAVA의 경우 : String bs = "문자열"; 이라고 타입을 명시하고 값을 대입해야 함
* JS의 경우 : var bs = "문자열"; 이라고 타입 명시 없이 값을 대입 하는 순간 타입이 결정됨
* JAVA와 달리 같은 변수에 다른 데이터를 넣어도 에러가 발생하지 않는다.
* JS는 컴파일언어가 아닌 인터프리터 언어라서, 한 줄씩 읽고 수행하다가 도중에 문제가 발생한 시점부터 수행하지 않는다.
* let은 변수의 중복선언을 허용하지 않으며 블럭 범위(scope)로 인식하여, 코드에 문제가 있을 경우 컴파일 에러가 발생한다.
* const는 값을 재대입할 수 없는 상수 선언이며 명명할 때 모두 대문자에 단어 사이는 _로 표시하도록 권장된다.
* JS는 이진수 상태에서 계산하다보니 소숫점 연산이 정확하지 않다.
* const로 배열을 만들었을 경우, index가 바뀌지 않도록 내용물만 바꾸는 것은 가능하다.
* 리터럴 : 데이터형에 보관되는 값 그 자체 (숫자 리터럴, 문자열 리터럴, 배열 리터럴)
*undefined : 값이 아직 지정되지 않았을 때
...........NULL과는 다름!
* 자바스크립트에서 프린트 하는 방법
document.writeln(~~~~~~~~~~~) : 웹페이지에 출력
console.log(~~~~~~~~~~~~~~) : 웹페이지 개발자모드의 console에 출력
* other 연산자 (...) : 배열의 나머지 값들을 모두 모아서 하나로 담아냄
let data = [10, 20, 30, 40, 50];
let [v1, v2, ...v3] = data;
console.log(v1);
console.log(v2);
console.log(v3);출력결과 : 10, 20, 30,40,50
* 자바에서 두 값을 교환하기
let d1 = 100, d2 = 200;
[d2, d1] = [d1, d2]; // 두 값을 서로 교환할 때 JAVA에서는 임시변수가 필요했으나 JS는 바로 가능
console.log('d1:' + d1);
console.log('d2:' + d2);출력결과 : d1 : 200 / d2 : 100
* 객체 분할
* json 구조 -- json 구조로 DB에 저장하는 것을 mongoDB
* 객체에서는 멤버 이름으로 value를 출력할 수 있다.
let book = { title : "자바스크립트", publish : "코스모", price : 30000 };
let {title, publish} = book;
document.write(title + "<br/>");
document.write(publish + "<br/>");>> 멤버 이름으로 value를 출력할 수 있다.
<01_datatype.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 자료형</title>
<script type="text/javascript">
/* 자바 : 컴파일 언어 (컴파일 후의 파일 : class 파일)
자바스크립트 / 파이썬 : 인터프리터 언어
*/
/* 1. 자바스크립트는 데이터타입에 관대하다
변수를 선언할 때 데이타타입을 정하지 않는다
(1) 변수 선언 : var
*/
// JAVA의 경우 : String bs = "문자열"; 이라고 타입을 명시하고 값을 대입해야 함
// JS의 경우 : var bs = "문자열"; 이라고 타입 명시 없이 값을 대입 하는 순간 타입이 결정됨
var bs = "문자열";
document.writeln("변수의 값 : " + bs + "<br/>");
document.writeln("변수의 타입 : " + (typeof bs) + "<br/>");
// ln은 HTML 문서상의 개행으로 출력시 화면에 보이는 개행이 아니다. 따라서 별도로 개행 태그를 사용해줘야 한다.
console.log("변수의 값 : " + bs);
bs = 100;
document.writeln("변수의 값 : " + bs + "<br/>");
document.writeln("변수의 타입 : " + (typeof bs) + "<br/>");
// JAVA와 달리 같은 변수에 다른 데이터를 넣었음에도 에러가 발생하지 않는다.
/* (2) let (es6)
- 변수의 중복 선언을 허용하지 않는다
- 블럭 범위(scope)를 인식한다 -> 나중에 확인
*/
/* let msg = "기존";
msg = "변경";
document.writeln("변수의 값 : " + msg + "<br/>");
var bs = "새로운 값";
document.writeln("2. 변수의 값 : " + bs + "<br/>");
let msg = "새로운 값";
document.writeln("2. 변수의 값 : " + msg + "<br/>"); */
/* (3) const : 상수선언 (es6)
- 값을 재대입 금지
- 명명 권장 : 모두 대문자에 단어사이는 _로 표시
*/
/* const PI = 3.14;
let radium = 5;
PI = 1.11; // 컴파일 에러 발생함
let circumference = 2 * PI * radium;
document.writeln("원주율 : " + circumference + "<br/>"); */
// JS는 이진수 상태에서 계산하다보니 소숫점 연산이 정확하지 않다.
/* const data = [1, 2, 3];
//data = [11, 22, 33]; // 불가 (data의 index가 바뀌는 것)
data[1] = 2000; // 내용물 일부만 바꿔치기 하는 것은 가능하다. (참조형인 data의 index는 그대로임)
document.writeln("data : " + data + "<br/>"); */
//----------------------------------------------------------------
// 2. 리터럴 - 변수의 값
/* var arr = [ '안녕', 'Hello', 'Hola', '곤니찌와' ];
document.writeln("배열의 요소 : " + arr[1] + "<br/>");
var arr2 = [ '안녕', [ 'Hello', 'Hola' ], '곤니찌와' ];
document.writeln("배열의 요소2 : " + arr2[1][0] + "<br/>");
// json 구조 -- json 구조로 DB에 저장하는 것을 mongoDB
// 객체에서는 멤버 이름으로 value를 출력할 수 있다.
var obj = { x : '안녕', y : 'Hello' , z : '곤니찌와' };
document.writeln("obj : " + obj.y + "<br/>");
document.writeln("obj : " + obj['y'] + "<br/>");
obj=100; // 이전까지는 datatype이 object였으나 이후로 number로 바뀜
console.log( typeof arr );
console.log( typeof obj );
// undefined : 값이 아직 지정되지 않았을 때
// null과는 다름
var x;
console.log(x);
console.log(obj.a) */
//-------------------------------------------------------
/* 3. 분할 대입 (destructuring assignment) : (es6)
- 배열과 객체의 요소를 분할하는 부분
(1) 배열 분할
*/
let data = [10, 20, 30, 40, 50];
let a0 = data[0];
let a1 = data[1];
let a2 = data[2];
document.writeln(a0+ a1+ a2 + "<br/>");
console.log(a0, a1, a2 )
let [a, b, c, d, e] = data;
document.writeln(a+ b+ c + "<br/>");
console.log(a, b, c);
// others 연산자 ... : 나머지 값들을 모두 모아서 담아줌
let [v1, v2, ...v3] = data;
console.log(v1);
console.log(v2);
console.log(v3);
let d1 = 100, d2 = 200;
[d2, d1] = [d1, d2]; // 두 값을 서로 교환할 때 JAVA에서는 임시변수가 필요했으나 JS는 바로 가능
console.log('d1:' + d1);
console.log('d2:' + d2);
/* (2) 객체 분할
*/
let book = { title : "자바스크립트", publish : "코스모", price : 30000 };
let {title, publish} = book;
document.write(title + "<br/>");
document.write(publish + "<br/>");
</script>
</head>
<body>
</body>
</html>
2. 자바스크립트의 연산자
* 자바스크립트에서는 실수형을 2진수로 변환하여 저장하고 연산하기 때문에 부정확함
--> 이를 해결하기 위해 정수형으로 만든 뒤 연산해주면 된다.
document.write( 0.2 * 3 == 0.6 ); // false
document.write( 0.2*10 * 3 == 0.6*10 ); // true 정수형으로 만들어서 계산
* ==와 === 차이는?
==, != 는 값만 비교
===, !==는 값과 자료형 비교
var num = 10;
var str = '10';
if (num == str) document.write('같다' + "<br/>");
else (document.write('다르다<br/>'))
if (num === str) document.write('2.같다' + "<br/>");
else (document.write('2.다르다<br/>'))출력결과 : 같다(내용물은 10으로 같음) / 2.다르다 (데이터타입이 number와 string으로 다름)
* 기본형과 참조형
var a = 10;
var b = 10;
if ( a === b ) document.write('3.같다' + "<br/>");
else (document.write('3.다르다<br/>'))
var a = ['java', 'script'];
var b = ['java', 'script'];
if ( a === b ) document.write('4.같다' + "<br/>");
else (document.write('4.다르다<br/>'))출력결과 : 3.같다 (내용물과 데이터타입 모두 같음)
/ 4.다르다 (참조형은 인덱스가 달라서 값이 같아보여도 실제로는 아니다)
* boolean형 ( 0 : false , 1: true )
console.log(1 == true); // true
console.log(0 == true); // false
console.log(1 == false); // false
console.log(0 == false); // true
console.log(2 == true); // false
console.log(2 == false); // false<02_operation.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 연산자</title>
<script type="text/javascript">
//1. 실수형 계산에는 주의 -> 2진수로 변환하여 저장하고 연산하기 때문에 발생
document.write( 0.2 * 3 == 0.6 ); // false
document.write( 0.2*10 * 3 == 0.6*10 ); // true 정수형으로 만들어서 계산
//2.==와 === 차이는?
// ==, != 는 값만 비교
// ===, !==는 값과 자료형 비교
var num = 10;
var str = '10';
if (num == str) document.write('같다' + "<br/>");
else (document.write('다르다<br/>'))
if (num === str) document.write('2.같다' + "<br/>");
else (document.write('2.다르다<br/>'))
// 3. 기본형과 참조형
var a = 10;
var b = 10;
if ( a === b ) document.write('3.같다' + "<br/>");
else (document.write('3.다르다<br/>'))
var a = ['java', 'script'];
var b = ['java', 'script'];
if ( a === b ) document.write('4.같다' + "<br/>");
else (document.write('4.다르다<br/>'))
// 4. boolean형
// 0 : false , 1: true
console.log(1 == true); // true
console.log(0 == true); // false
console.log(1 == false); // false
console.log(0 == false); // true
console.log(2 == true); // false
console.log(2 == false); // false
</script>
</head>
<body>
</body>
</html>
3. 모양대로 출력되는 코드 작성하기
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 |
<script type="text/javascript">
document.write('<table border="2">');
for( var i=0; i<5; i++) {
document.write('<tr>');
for ( var j=1 ; j<6 ; j++) {
document.write('<td>' + (j+(i*5)) +'</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script><03_for연습.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 03_for연습.html </title>
<script type="text/javascript">
document.write('<table border="2">');
for( var i=0; i<5; i++) {
document.write('<tr>');
for ( var j=1 ; j<6 ; j++) {
document.write('<td>' + (j+(i*5)) +'</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</head>
<body>
</body>
</html>
4. 자바스크립트에서의 for 문
* 원래 for문
for ( var i=0 ; i<arr.length ; i++ ) {
document.write( arr[i] + "<br/>");
}
* [참고] 자바의 향상된 for 문.......................... for ( 요소타입 : 집합 ) { }
* for ... in 문 : 요소를 순서대로 처리
| for 요소 in 집합 요소 : 집합의 키 (배열: 인덱스, 객체: 멤버변수명) |
//집합이 배열인 경우
for ( var i in arr ) {
document.write( i + ":" + arr[i] + "<br/>");
}// 집합이 객체인 경우
var obj = { first: "길동", second: "홍" };
for (var j in obj) {
document.write( j + ":" + obj[j] + "<br/>");
}
(*) for ... of 문 : 열거형의 요소를 순서대로 처리하기 (es6)
--->>인덱스가 아니라 그 값을 가지고 옴
for ( var i of arr ) {
document.write( i + "<br/>");
}But!!!!!!!
//집합이 객체인 경우.. for of는 error 발생함
var obj = { first: "길동", second: "홍" };
for (var j of obj) {
document.write( j + "<br/>");
}<03_for_.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 새로운 for 문장 </title>
<script type="text/javascript">
var arr = ['송혜교', '김태희', '전지현' ];
// 0. 원래 for문
for ( var i=0 ; i<arr.length ; i++ ) {
document.write( arr[i] + "<br/>");
}
// [참고] 자바의 향상된 for 문
// for ( 요소타입 : 집합 ) { }
// 1. for...in : 요소를 순서대로 처리하기
/*
for 요소 in 집합
요소 : 집합의 키 (배열: 인덱스, 객체: 멤버변수명)
*/
// 집합이 배열인 경우
for ( var i in arr ) {
document.write( i + ":" + arr[i] + "<br/>");
}
/*
// 집합이 객체인 경우
var obj = { first: "길동", second: "홍" };
for (var j in obj) {
document.write( j + ":" + obj[j] + "<br/>");
}
*/
//----------------------------------------------------
// 2. for...of (es6) : 열거형의 요소를 순서대로 처리하기
// 인덱스가 아니라 그 값을 가지고 옴
for ( var i of arr ) {
document.write( i + "<br/>");
}
/*
//집합이 객체인 경우.. for of는 error 발생함
var obj = { first: "길동", second: "홍" };
for (var j of obj) {
document.write( j + "<br/>");
}
*/
</script>
</head>
<body>
</body>
</html>
5. 객체 함수
//////////////////////////////////////////////////////////////////////////////
// 내장형 객체 (String) //
//////////////////////////////////////////////////////////////////////////////
// 검색
indexOf (substr, s) // 1부터 시작하여 해당문자가 있는 위치
lastIndexcOf (substr, s) // 1부터 시작하여 해당문자가 마지막으로 있는 위치
// 부분 문자열
charAt (n) // 0부터 시작하여 n번째 문자 추출
slice (n) // 0부터 시작하여 n번째 문자부터 이후로 모두 추출
slice (n, m) // 0부터 시작하여 n번째 문자부터 m번재 이전까지 추출
substring (n, m) // 0부터 시작하여 n번째 문자부터 m번째까지 추출
substr (n, count) // 0부터 시작하여 n번째 문자부터 count갯수만큼 추출
split(str, limit) // 문자를 분할하여 배열로 출력 (limit은 최대 분할 수)
// 정규표현
match (reg) // 정규표현 reg로 검색하여 일치한 부분 문자열을 넘김
replace (reg, rep) // 정규표현 reg로 검색하여 일치한 부분 문자열을 rep로 대치
search (reg) // 정규표현 reg로 검색하여 일치한 맨 첫 문자의 위치를 넘김
// 대소문자
toLowerCase () // 소문자로 변경
toUpperCase () // 대문자로 변경
// 그 외
concat (str) // 문자열 뒤에 str을 추가(연결)
length // 문자열의 길이를 넘김
// 검색
startsWith (search, n) // 문자열이 search로 시작하는지 (n은 검색시작 위치)
endsWith (search, n) // 문자열이 search로 종료하는지 (n은 검색시작 위치)
includes (search, n) // 문자열이 search를 포함하는지 (n은 검색시작 위치)
// 코드 변환
codePointAt(n) // n번째 문자를 UTF-16 인코딩된 코드 포인트값으로 변환
fromCodePoint(num) // 코드 포인트값으로부터 문자열을 생성
// 그 외
repeat(num) // 문자열을 num 숫자만큼 반복한 것을 얻어옴
//////////////////////////////////////////////////////////////////////////////
// 내장형 객체 (Number) //
//////////////////////////////////////////////////////////////////////////////
// 프로퍼티
MAX_VALUE // 이용할 수 있는 최대값 1.79E+308
MAX_SAFE_VALUE // Number로 안전하게 표현할 수 있는 최대정수 값
MIN_VALUE // 최소값 (0에 가까운 값) 5.00E-324
MIN_SAFE_VALUE // Number로 안전하게 표현할 수 있는 최소정수 값
NaN // 수치가 아니다 (not a number)
NEGATIVE_INFINITY // 음수의 무한대
POGITIVE_INFINITY // 양수의 무한대
// ★ number 객체의 프로퍼티는 static 이다.
// 메소드
toExponential(dec) // 지수 형식으로 변환
toFixed(dec) // 소수점 이하의 행수 반올림
toPresicion(dec) // 지정 행수로 변환
inNaN(num) // NaN인지 판정
isFinite(num) // 유한값인지 판정
isInteger(num) // 정수값인지 판정
parseInt(str) // 문자열을 정수로 변환
parseFloat(str) // 문자열을 실수로 변환
//////////////////////////////////////////////////////////////////////////////
// 내장형 객체 (Array) //
//////////////////////////////////////////////////////////////////////////////
// 변환
concat (arr) // arr 배열을 현재의 배열에 연결
join (del) // 배열 내의 요소를 구분문자 del로 연결
slice (n, m) // 0부터 시작하여 n번째 문자부터 m번재 이전까지 추출
// 추가 / 삭제
pop () // 배열 끝의 요소를 얻어오고 삭제
push (data) // 배열 끝에 요소를 추가
shift () // 배열의 맨 앞에 요소를 얻어오고 삭제
unshift (data1, data2) // 배열의 맨 앞에 지정된 요소를 추가
// 정렬
reverse() // 역순으로 정렬
sort() // 요소를 오름차순으로 정렬
// 기타
length // 배열의 크기
toString() // 요소들을 문자열로 변환
// 기본
entries() // 모든 키/값을 반환
keys() // 모든 키를 반환
values() // 모든 값을 반환
// 가공
from(alike) // 배열과 비슷한 종류의 객체와 열거 가능한 객체를 배열로 변환(정적 메소드)
of (e1, ...) // 가변길이 인수를 배열에 변환 (정적 메소드)
copyWithin(target, start, end) // start ~ end-1번째의 요소를 tatget번째 위치부터 복사
fill (var, start, end) // 배열 내의 start ~ end-1번째의 요소를 var로 취환
var str = '너의 삶 속에 나의 삶을 넣어 삶을 영위하자';
var msg = '자바에서 웹프로젝트까지 열심히 하자!';
var text = '♡해yo';
<04_String.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> String 객체 </title>
<script type="text/javascript">
var str = '너의 삶 속에 나의 삶을 넣어 삶을 영위하자';
document.writeln( str.indexOf('삶') + '<br/>'); // 4
document.writeln( str.lastIndexOf('삶')+ '<br/>'); // 17
document.writeln( str.indexOf('삶을') + '<br/>'); // 11
document.writeln( str.length + '<br/>'); // 24
document.writeln( str.startsWith('삶') + '<br/>'); // false
document.writeln( str.endsWith('삶') + '<br/>'); // false
document.writeln( str.includes('삶') + '<hr/>'); // true
var msg = '자바에서 웹프로젝트까지 열심히 하자!';
document.writeln( msg.charAt(3)+ '<br/>'); // 서
document.writeln( msg.slice( 5, 12 )+ '<br/>'); // 웹프로젝트까지
document.writeln( msg.substring( 5, 12 )+ '<br/>'); //
document.writeln( msg.substr(5, 7 ) + '<br/>'); // 웹프로젝트
document.writeln( msg.split(' ')+ '<br/>'); // {자바에서, 웹프로젝트까지, 열심히, 하자!}
document.writeln( msg.concat('화이팅')+ '<br/>'); // 자바에서 웹프로젝트까지 열심히 하자! 화이팅
document.writeln( msg + '<hr/>');
var text = '♡해yo';
document.writeln( text.length + '<br/>'); // 한글도 1글자로 취급 // 4
document.writeln( text.repeat(2) + '<br/>'); // ♡해yo♡해yo
document.writeln( text.codePointAt(0) + '<br/>'); // 9825
document.writeln( String.fromCodePoint(9825) + '<br/>');
document.writeln( String.fromCodePoint(9826) + '<br/>');
// 서로게이트 페어 (Surrogate Pair)
// 유니코드는 2바이트를 한 글자로 표현해서 65535개의 문자를 표현하는데
// 문자수를 확장하고자 일부 문자를 4바이트로 표현하여 2문자로 취급한다.
</script>
</head>
<body>
</body>
</html>
* 형과 형 변환
<05_Number.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Number 형과 형변환 </title>
<script type="text/javascript">
// 1. 숫자 형식 메소드
/* var su = 123.456789;
document.writeln( su.toExponential(2) + "<br/>" ); // 10^n 지수형으로 출력
document.writeln( su.toFixed(3) + "<br/>" ); // 소숫점아래 n자리까리 출력
document.writeln( su.toFixed(7) + "<br/>" ); // 소숫점 아래 n자리까지 출력
document.writeln( su.toPrecision(6) + "<br/>" ); // 전체자리수 n개만큼 출력
document.writeln( su.toPrecision(10) + "<br/>" ); // 전체자리수 n개만큼 출력 */
//-------------------------------------------------
// 2. 형변환
var n = '0770';
document.writeln( typeof n + "<br/>"); // string
document.writeln( Number(n) + "<br/>"); // 770
document.writeln( parseInt(n) + "<br/>"); // 770
document.writeln( parseFloat(n) + "<br/>"); // 770
document.writeln( typeof parseInt(n) + "<br/>"); // number
var n = 'abc0770';
document.writeln( Number(n) + "<br/>"); // 불가 (NaN, Not a Number)
document.writeln( parseInt(n) + "<br/>"); // 불가
var n = '0770abc';
document.writeln( Number(n) + "<br/>"); // 불가
document.writeln( parseInt(n) + "<br/>"); // 문자를 빼고 나머지에 한해서 숫자로 형변환 됨
document.writeln( 123 + "4");
document.writeln( 123 - "4");
document.writeln( typeof(123 + "4"));
document.writeln( typeof(123 - "4"));
</script>
</head>
<body>
</body>
</html>
* 배열의 함수
<06_Array.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Array 객체 </title>
<script type="text/javascript">
// 1. 배열의 함수 확인
var arr = ['김태희','송혜교','전지현','김고은','임수정'];
document.writeln( arr + '<br/>'); // 김태희, 송혜교, 전지현, 김고은, 임수정
document.writeln( arr.join('/') + '<br/>'); // 김태희/송혜교/전지현/김고은/임수정
document.writeln( arr.slice(3) + '<br/>'); // 김고은,임수정
document.writeln( arr.slice(2,3) + '<br/>');// 송혜교,전지현
document.writeln( arr.reverse() + '<br/>'); // 임수정,김고은,전지현,송혜교,김태희
document.writeln( arr.sort() + '<br/>'); // 김고은,김태희,송혜교,임수정,전지현
document.writeln( arr + '<br/>'); // 김고은,김태희,송혜교,임수정,전지현
document.writeln( arr.pop() + '<br/>'); // 전지현.. 스택과 관련 함수
document.writeln( arr + '<br/>');
document.writeln( arr.shift() + '<br/>'); // 김고은.. 큐와 관련된 함수
document.writeln( arr + '<br/>');
// [주의] sort()
var arr2 = [5, 15, 20, 9];
document.writeln(arr2.sort() + '<br/>') // 결과 : 15, 20, 5, 9 .. 문자처럼 정렬해버림
// 2. 배열을 스택과 큐로 이용하기
var data = [];
data.push('박서준');
data.push('현빈');
data.push('박보검');
document.writeln( data.pop() + "<br/>"); // 스택,박보검
document.writeln( data.pop() + "<br/>"); // 현빈
document.writeln( data.pop() + "<br/>"); // 박서준
document.writeln( data.pop() + "<hr/>"); // undefined
var data2 = [];
data2.push('박소담');
data2.push('김고은');
data2.push('이지은');
document.writeln( data2.shift() + "<br/>"); // 큐, 박소담
document.writeln( data2.shift() + "<br/>"); // 김고은
document.writeln( data2.shift() + "<br/>"); // 이지은
document.writeln( data2.shift() + "<hr/>"); // undefined
// 3. es6
//-------------------------------------------- 나중에 함수부붙에서 하자
// 4. 콜백함수
// (1) forEach 메소드 : 배열의 내용을 순서대로 처리
// array.forEach(function(요소의값, 인덱스번호, 원래의배열){})
// (2) map 메소드 : 배열을 지정된 규칙으로 가공하기
// (3) some 메소드 : 배열에 조건이 일치하는 요소가 있는지 확인
// every 메소드 : 배열에 조건이 모든 요소에 일치하는지 확인
/* var data3 = [1, 3, 5, 7, 9];
var result = data3.some(function(value, index, array){
return value%3===0;
});
if (result){
document.writeln( " 3의 배수가 발견 <br/>");
}else{
document.writeln( " 3의 배수가 없음 <br/>");
}
var data3 = [3, 6, 9, 30];
var result = data3.every(function(value, index, array){
return value%3===0;
});
if (result){
document.writeln( " 모든 요소가 3의 배수 <br/>");
}else{
document.writeln( " 모든 요소는 3의 배수가 아님 <br/>");
} */
// (4) filter 메소드 : 배열의 내용을 특정의 조건으로 필터링
</script>
</head>
<body>
</body>
</html>
6. Date 객체
getFullYear() : 연도 출력
getMonth() : 월 출력
getDate() : 일 출력
getDay() : 요일 출력 (0~6)
setFullYear(2025) : 2025년으로 변경
setMonth(11) : 12월로 변경
setDate(25) : 25일로 변경
setDate(0) : 전 달의 마지막 날을 출력
<08_Date.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date 객체</title>
<script type="text/javascript">
/* var d = new Date('2023/08/15');
document.writeln( d + '<br/>');
document.writeln( d.getYear() + '<br/>'); // 2자리만 출력하면서 1900년도가 넘어서 앞에 1이 붙음
document.writeln( d.getFullYear() + '<br/>'); // 따라서, 연도를 출력하려면 getFullYear 사용!
document.writeln( d.getMonth() + '<br/>'); // **** 0부터 카운트하므로 정상적으로 출력하려면 +1 해줘야 함
document.writeln( d.getDate() + '<br/>');
document.writeln( d.getDay() + '<br/>'); // 일:0, 월:1, 화:2...
*/
var d = new Date();
// 2025년 12월 25일로 변경
d.setFullYear(2025);
d.setMonth(11);
d.setDate(25);
document.writeln( d + '<br/>');
document.writeln( d.toLocaleString() + '<br/>');
document.writeln( d.toGMTString + '<br/>');
document.writeln( d.toDateString + '<br/><hr/>');
// 날짜형 계산
document.writeln( d + '<br/>');
d.setMonth( d.getMonth() +3 );
document.writeln( d + '<br/><hr/>');
// 현재 날짜에서 20일 후의 날짜 출력
document.writeln( d + '<br/>');
d.setDate ( d.getDate() + 20 );
document.writeln( d + '<br/><hr/>');
d.setDate(0); // 전 달의 마지막날을 출력
document.writeln( d + '<br/>')
</script>
</head>
<body>
</body>
</html>
달력만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 03_for연습.html </title>
<script type="text/javascript">
// 월에 대한 설정
// 몇 월을 알고 싶니? 0~11
var wall = 11; // 12월의 정보를 알고자 함
var jinanDal = new Date(); // 지난달에 대한 정보를 가져올 Date객체
jinanDal.setMonth(wall); // 11+1월로 설정 = 12월
jinanDal.setDate(0); // 12월 0일로 설정
var lastday = jinanDal.getDay(); // 지난달의 마지막 요일
var wall2 = wall +1 ;
var ibunDal = new Date(); // 이번달에 대한 정보를 얻어올 Date객체
ibunDal.setMonth(wall2); // 11+1+1월로 설정 = 1월
ibunDal.setDate(0); // 1월 0일
var lastdate2 = ibunDal.getDate(); // 이번달의 마지막 날짜
//////////////////////////////////////////
// 테이블 시작
document.write(wall2 + '월 <br/>');
document.write('<table border="2">');
// 요일 출력 - 배열에 있는 요일 정보를 반복문을 이용하여 표 형태로 출력
var weekDay = new Array("일", "월", "화", "수", "목", "금", "토");
document.write( '<tr>' );
for (var i = 0; i <= 6; i++)
{ document.write('<td>' + weekDay[i] + '</td>'); }
document.write( '</tr>' );
//날짜 출력
var column = 0; // 7일 단위로 줄이 바뀌게 하기 위한 변수
document.write( '<tr>' );
// 이번달 1일 전에 들어갈 공백 수를 지난달의 요일로부터 받아옴
if (lastday == 6) {}
else if (lastday != 0) {
for (var i = 0; i<= lastday; i++) {
document.write('<td>' + '' + '</td>');
column++; // 공백의 수만큼 column증가
}
}
// 해당월의 마지막날짜(lastdate2)까지 증가하는 만큼 칸마다 숫자 넣음
for (var i=1; i<=lastdate2; i++ ) {
document.write('<td>' + i + '</td>');
column++;
if (column == 7) { // 줄이 바뀌게 하려고
document.write('</tr><tr>');
column = 0;
}
}
document.write( '</tr>' );
document.write('</table>');
</script>
</head>
<body>
</body>
</html>
반응형