프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균
이번 장에서는 무엇을 다룰까요? 자바스크립트를 작성 기초
강의 주제 및 목차 자바스크립트 기초 강의 주제 자바스크립트 기본 형식 목 차 입출력과 자료처리 함수(Function) 1 2 목 차 2 입출력과 자료처리 3 함수(Function)
1. 자바스크립트 기본 형식
자바스크립트의 특징 자바스크립트? 자바스크립트의 특징 썬마이크로시스템과 넷스케이프 커뮤니케이션에서 공동 제작한 웹 브라우저용 언어 객체지향 프로그램 언어 독립적으로 실행되지 않고, 주로 HTML 언어에 포함되어 실행(홈페이지 제작에 주목적) 자바스크립트의 특징 브라우저의 인터프리터가 소스코드를 실행. 번역기(Compiler) 불필요 다른 언어로 작성된 프로그램(Java, PHP, HTML 등)들에 포함되어서 실행 클라이언트에서 실행되어 N/W을 통한 데이터 전송 없이 작업 처리 가능 변수를 선언할 때 자료형 구분 없이 예약어 var로 선언
자바스크립트 기본 형식 자바스크립트 기본 형식 HTML문서 안에서 <script>태그를 사용하여 코딩 사용 스크립트가 javascript임을 명시적으로 선언
자바스크립트 기본 형식 자바스크립트 기본 형식 (외부의 자바스크립트 파일) JavaScript 소스 코드를 외부에 파일(*.js)로 저장해 두고 HTML문서에 포함시켜 사용할 것임을 선언
자바스크립트 기본 형식 자바스크립트 실습 (1) BODY내 <SCRIPT>태그에서 JavaScript 직접 작성하는 예제 <html> <head> <title>BODY에서 자바스크립트 태그 사용</title> </head> <body> <h1>BODY에서 자바스크립트 태그 사용 실습</h1> <SCRIPT> document.write("<H2>BODY에서 자바스크립트 태그 출력 결과</H2>"); document.write("자바스크립트 사용 성공<BR>"); </SCRIPT> </body> </html> [실행 결과]
자바스크립트 기본 형식 자바스크립트 실습 (2) HTML 문서에 외부의 JavaScript 파일(*.js)을 사용할 것을 선언하는 예제 <html> <head> <title>BODY에서 자바스크립트 외부파일 선언</title> </head> <body> <h1>BODY에서 자바스크립트 파일 선언 실습</h1> <SCRIPT LANGUAGE = "JavaScript" SRC="test1.js"> </SCRIPT> </body> </html> document.write("<H2>test1.js 파일 출력 결과</H2>"); document.write("외부 스크립트 연동 성공<BR>"); [test1.js 파일] [실행 결과]
자료형 변수에 저장되는 자료형은 정수, 실수, 문자, 논리형 등으로 구분 자료형 변환
3. 입출력과 자료 처리
자료의 입력 키보드로 자료를 입력 받을 때 : prompt()함수 prompt() 함수 - 형식 : var 변수명 = prompt(“메시지”, “초기값”); - prompt()함수는 문자열 형태의 자료 입력만 받게 되므로 숫자를 입력하여도 문자열로 처리된다. var name; name = prompt(“이름을 입력해 주세요”);
자료의 입력 실습) 키보드로 두 수를 입력 받아 합을 출력하는 예제 왜 이런 결과가 나왔을까??? <html> <head> <title>prompt()함수 실습(1)</title> </head> <body> <SCRIPT> var num1, num2, sum; num1 = prompt("첫번째 숫자를 입력하세요"); num2 = prompt("두번째 숫자를 입력하세요"); sum = num1 + num2; document.write("두 수의 합 = " +sum); </SCRIPT> </body> </html> 왜 이런 결과가 나왔을까???
자료 변환 처리 parseInt( ) : 지정된 변수나 문자열을 정수로 변환 시키는 함수 score = prompt(“점수를 입력하세요”); // 변수 score에는 문자열이 저장된다. n = parseInt(“100”); // 변수 n에 정수 100으로 변환되어 저장된다. score = parseInt(prompt(“점수를 입력하세요”)); // 괄호 안의 prompt()함수를 먼저 실행하여 입력 받은 값을 문자열로 입력 받은 후, // parseInt() 함수를 실행하여 문자열을 정수로 변환한 후 변수 score에 저장한다.
자료 변환 처리 parseInt( ) 사용 예 사용자가 숫자 80을 입력하면 변수 score1에 문자열 “80”이 저장되고, 함수 parseInt(score1)에서 변수 score1에 저장된 문자열 “80”을 숫자 80으로 변환하여 변수 score2에 저장한다. 위 문장은 아래와 같이 간단히 표현할 수 있다. var score1, score2; score1 = prompt(“점수를 입력하세요”); score2 = parseInt(score1); var score; score = parseInt(prompt(“점수를 입력하세요”));
자료 변환 처리 ParseFloat( ) : 지정된 변수나 문자열을 실수로 변환 시키는 함수 예를 들어 사용자가 체중을 73.5를 입력하였다면, 변수 weight에 “73.5”가 저장된다. 문자열은 산술연산이 불가능하게 된다. 따라서, parseFloat(“73.5”)는 문자열 “73.5”를 실수 73.5로 변환 시킨다. var weight = prompt(“체중(Kg)를 입력하세요.”); var weight = parseFloat((prompt(“체중(Kg)를 입력하세요.”));
자료의 출력 (document.write()) document.write( ) 함수 : 화면에 값을 출력할 때 사용 - document.write() 함수는 문자나 숫자, 변수의 값을 화면에 출력한다 - 출력할 숫자는 괄호( ) 안에 그냥 기술하고, 문자열은 큰 따옴표 안에 반드시 표시한다. - 출력할 문자열들을 문자열 결합 연산자인 ‘+’ 연산자를 사용하여 서로 연결하여 표현 한다.
자료의 출력 실습) 두 수의 합을 출력하는 예제이다. 출력 결과를 예측해 보세요. <html> 실습) 두 수의 합을 출력하는 예제이다. 출력 결과를 예측해 보세요. <html> <head> <title>두 수의 합을 출력하는 예제 실습)</title> </head> <body> <SCRIPT> document.write(“결과1 = " +100 + 200); document.write(“<BR>”); document.write(“결과2 = " +(100 + 200)); </SCRIPT> </body> </html>
자료의 출력 (alert()) alert( ) 함수 : 경고 창에 메시지를 출력할 때 사용 - 경고 창에 표시할 메시지의 내용을 문자열 매개변수로 받음 - “메시지” : 경고 창에 표시할 내용
4. 연산자와 수식 표현
산술연산자 산술 연산자의 종류 연산자 사용 예 설명 + sum = 30 + 4; 덧셈 (sum = 34) - sub = 30 – 4; 뺄셈 (sub = 26) * mul = 30 * 4; 곱셈 (mul = 120) / div = 30 / 4; 나눗셈 (div = 7.5) % rem = 30 % 4; 나머지 (rem = 2) ++ var a = 30; a++; 증가 (a = 31) -- a--; 감소 (a = 29)
산술연산자 산술 연산자 실습 <script> var a, b, sum, sub, mul, div, rem; sum = a + b; sub = a - b; mul = a * b; div = a / b; rem = a % b; document.write("덧셈 = " +sum +"<BR>"); document.write("뺄셈 = " +sub +"<BR>"); document.write("곱셈 = " +mul +"<BR>"); document.write("나눗셈 = " +div +"<BR>"); document.write("나머지 = " +rem +"<BR>"); </script>
산술연산자 증가연산자(increment operator) : ++ 따라서 아래와 같은 프로그램이라 할 수 있다. var a; a = 10; a++; document.write(“a = “ +a); var a; a = 10; ++a; document.write(“a = “ +a); var a; a = 10; a = a + 1; document.write(“a = “ +a);
산술연산자 증가연산자(increment operator) - 증가(++)연산자가 다른 연산자와 같이 사용하면 증가연산자의 위치에 따라 연산 우선순위가 다르다. (예2) b = a++; 문장은 먼저 a의 값을 b에 저장한 후, a++; 문장을 수행한다. (결과) var a, b; a = 10; b = a++; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); var a, b; a = 10; b = a; a = a + 1; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); a = 11 b = 10
산술연산자 (예3) var a, b; var a, b; a = 10; a = 10; a = a + 1; b = ++a; b = ++a; 문장은 먼저 a의 값을 1 증가한 후, a의 값을 b에 저장한다. (결과) var a, b; a = 10; b = ++a; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); var a, b; a = 10; a = a + 1; b = a; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); a = 11 b = 11
산술연산자 증가연산자 실습 아래 두 프로그램의 출력 결과는 어떻게 되겠는가? a = ? b = ? a = ? b = ? var a, b; a = 10; b = a++ + 20; document.write("a = " +a +"<BR>"); document.write("b = " +b +"<BR>"); a = ? b = ? var a, b; a = 10; b = ++a + 20; document.write("a = " +a +"<BR>"); document.write("b = " +b +"<BR>"); a = ? b = ?
산술연산자 감소연산자(decrement operator) : -- 따라서 아래와 같은 프로그램이라 할 수 있다. var a; a = 10; a--; document.write(“a = “ +a); var a; a = 10; --a; document.write(“a = “ +a); var a; a = 10; a = a - 1; document.write(“a = “ +a);
산술연산자 감소연산자(decrement operator) - 감소(--)연산자가 다른 연산자와 같이 사용하면 감소연산자의 위치에 따라 연산 우선순위가 다르다. (예2) b = a--; 문장은 먼저 a의 값을 b에 저장한 후, a--; 문장을 수행한다. (결과) var a, b; a = 10; b = a--; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); var a, b; a = 10; b = a; a = a - 1; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); a = 9 b = 10
산술연산자 (예3) var a, b; var a, b; a = 10; a = 10; a = a - 1; b = --a; b = --a; 문장은 먼저 a의 값을 1 감소한 후, a의 값을 b에 저장한다. (결과) var a, b; a = 10; b = --a; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); var a, b; a = 10; a = a - 1; b = a; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b); a = 9 b = 9
산술연산자 감소연산자 실습 아래 두 프로그램의 출력 결과는 어떻게 되겠는가? a = ? b = ? a = ? b = ? var a, b; a = 10; b = a-- + 20; document.write("a = " +a +"<BR>"); document.write("b = " +b +"<BR>"); a = ? b = ? var a, b; a = 10; b = --a + 20; document.write("a = " +a +"<BR>"); document.write("b = " +b +"<BR>"); a = ? b = ?
산술연산자 복합 연산자의 종류 연산자 사용 예 설명 += a += b; a = a + b; -= a -= b; *= a *= b; a = a * b; /= a /= b; a = a / b; %= a %= b; a = a % b; <<= a <<= b; a = a << b; >>= a >>= b; a = a >> b;
산술연산자 복합 연산자 실습 <script> var sum, n; sum = 30; n = 4; sum += n; document.write("sum = " +sum +"<BR>"); sum -= n; sum *= n; sum /= n; sum %= n; </script>
논리연산자 논리연산자(logical operator) - 피연산자에 대한 연산 결과로 true 또는 false의 논리 값을 반환한다. (예) (결과) var a, b, c; a = !true; b = (10 != 20) || false; c = 100 > 50; d = true && false; document.write(“a = “ +a +”<BR>”); document.write(“b = “ +b +”<BR>”); document.write(“c = “ +c +”<BR>”); document.write(“d = “ +d +”<BR>”); a = false b = true c = true d = false
조건연산자 조건연산자 - 변수 = (조건식) ? 식1 : 식2; - 조건식이 참이면 식1을, 거짓이면 식2를 변수에 할당한다. 조건연산자 - 변수 = (조건식) ? 식1 : 식2; - 조건식이 참이면 식1을, 거짓이면 식2를 변수에 할당한다. (예) max = (a > b) ? a : b; 변수 a, b에 저장된 값을 비교하여, a가 b보다 크다면 a의 값을 max에 할당하며, a가 b보다 크지 않다면 작은 값인 변수 b에 저장된 값을 max에 저장한다. 따라서 위 문장은 변수 a, b에 저장된 값 중 큰 수를 max에 저장하는 문장이다. (예) var num1, num2, max; num1 = parseInt(prompt("첫 번째 수를 입력하시오")); num2 = parseInt(prompt("두 번째 수를 입력하시오")); max = (num1 > num2) ? num1 : num2; document.write("maximum value : " +max +"<BR>");
산술연산자 비트 연산자(Bitwise Operator) 연산자 설명 사용 예 ~ 비트 NOT ~12 12 00000000 00001100 ~12 11111111 11110011 연산결과 : -13 & 비트 AND 12 & 20 20 00000000 00010100 12&20 00000000 00000100 연산결과 : 4 | 비트 OR 12 | 20 12 | 20 00000000 00011100 연산결과 : 28 ^ 비트 XOR 12 ^ 20 12 ^ 20 00000000 00011000 연산결과 : 24
산술연산자 쉬프트 연산자(Shift Operator) 연산자 설명 사용 예 >> Shift Right 12>>2 12 00000000 00001100 Shift Right 00000000 00000110 Shift Right 00000000 00000011 연산결과 : 3 << Shift Left 12<<3 Shift Left 00000000 00011000 Shift Left 00000000 00110000 Shift Left 00000000 01100000 연산결과 : 96 -9>>2 -9 11111111 11110111 Shift Right 11111111 11111011 Shift Right 11111111 11111101 연산결과 : -3
산술연산자 비트/쉬프트 연산자 실습 <script> var a=12, b=20; y = ~a; document.write("~12 = " +y +"<BR>"); y = a & b; document.write("12 & 20 = " +y +"<BR>"); y = a | b; document.write("12 | 20 = " +y +"<BR>"); y = a ^ b; document.write("12 ^ 20 = " +y +"<BR>"); y = a >> 2; document.write("12 >> 2 = " +y +"<BR>"); y = a << 3; document.write("12 << 3 = " +y +"<BR>"); </script>
토론 및 질문하기 오늘 배운 내용을 옆의 학우와 간단히 이야기를 나누어 보세요!