[JavaScript] 001. 자바스크립트 개요 및 기본 문법, 관찰

JavaScript

• 실습 전 환경 세팅

WebApp03 생성 후 서버에 올리기

※ 서버를 여러개 올려둬도 상관없지만, 실습 환경을 쾌적하게 하기 위해 하나만 올려둔다

Javascript 개요 및 기본 문법

■■■ JavaScript 개요 및 기본 문법 ■■■

○ 개요
   컴파일 과정이 필요없거나 처리 과정이 적은 프로그램에 유리한 스크립트 언어로
   다른 언어에 비해 소스코드의 수정 및 유지보수가 간편한 편이다.
   HTML 코딩에서 자바스크립트 소스의 명시만으로 웹 브라우저가 자동 실행한다.

   자바스크립트는 웹 페이지에서 가장 많이 사용되는 스크립팅(Scripting) 언어로
   스크립팅(Scripting) 언어는 크게 나누면
   자바스크립트나 DHTML, Visual Basic 등과 같은 브라우저 스크립팅(Browser Scripting),
   JSP, ASP, PHP 와 같은 서버 스크립팅(Scripting) 언어로 구분할 수 있다.

   특히, 자바스크립트는 서버 스크립팅(Server Scripting) 언어와 연동되어
   입력한에 입력한 값이 제대로 된 값인지의 여부 등을 테크하는
   상호작용(Interactive)적 요소와 웹 페이지에 동적(Dynamic)인 효과 등을
   적용하는 부분에 사용되며, 그 밖에도 많은 기능을 사용자가 추가하여
   사용하는 매우 중요한 요소라고 할 수 있다.

   ※ Javascript 는 HTML 문서에
      상호작용(Interactive)하는 요소와 동적(Dynamic)인 요소를
      추가하기 위해 사용하는 언어이다.
---------------------------------------------------------------------------------------------
○ HTML 문서에 Javascript 추가

   1. Inline JavaScript(HTML Tag 속에 지정하여 사용)
      <a href="javascript:location.herf='http://naver.com'">네이버</a>

   2. Embeded Javascript 와 Script Block(Script Block 속에 일괄 지정하여 사용)
      <Script type ="text/javascript">
	  document.write("어쩌구저쩌구");
      </script>

   ※ document 는 HTML 문서에 Object 를 의미하며
      write() 함수는 document Object 에 출력하는 것을 의미한다.

   3. Linked Javscript(외부 파일을 링크하여 여러 개의 파일에 일괄 지정하여 사용)
      <Script type="text/jacascript" src="url경로지정"></script>
---------------------------------------------------------------------------------------------
○ Javascript 의 기초 구문과 주요 데이터 타입

   1. Javascript 의 주석문(Commnet)
      라인 단위 주석문의 경우 2개의 slash(『//』)를 주석문 앞에 붙여 사용하고
      블럭 단위 주석문의 경우 『/* 여러줄 주석*/』과 같이 사용한다.

   2. Javascript 의 명령 line 처리
      2개 이상의 script 명령을 사용할 경우 『;(세미콜론)』으로 구분해 줄 수 있도록 한다.
      (개행 역시 구분자의 역할을 수행하지만 『;』을 붙여서 종결의 의미로 사용할 수 있도록 한다.)

   3. Javascript 에 사용되는 주요 데이터 타입
      정수 : 0 ~ 9 사이의 각 자릿수에 해당하는 음수와 양수
            따옴표 속에 넣지 않는다.
      실수 : 0 ~ 9 사이의 각 자릿수에 해당하는 음수와 양수를 포함한 부동 소수
            따옴표 속에 넣지 않는다.
      Boolean (true or false) : true 와 false 의 논리형
      String : 사용 가능한 모든 문자.
            따옴표(『""』나『''』) 속에 넣어서 사용한다.
---------------------------------------------------------------------------------------------
○ Javascript 배열
   1. 1차원 배열 선언 - 크기 지정 없이 선언 가능

      var 변수명 = new Array();
      변수명[0] = 값1;
      변수명[1] = 값2;
      변수명[2] = 값3;
      ...
      var 변수명 = new Array(값1, 값2, 값3, ...);
      var 변수명 = [값1, 값2, 값3, ...];

   2. 2차원 배열 선언 - 크기 지정 없이 선언 가능 
      var 변수명 = new Array();
      변수명[0] = new Array();
      변수명[1] = new Array();
      변수명[2] = new Array();
      ...
      변수명[0][0] = 값1;
      변수명[0][1] = 값2;
      변수명[0][2] = 값3;
      ...
      var 변수명 = new Array(new Array(), new Array(), ....);
      변수명[0][0] = 값1;
      변수명[0][1] = 값2;
      변수명[0][2] = 값3;
      ...
      var 변수명 = [[값1, 값2, 값3, ...], [], [], [], ...];

   3.문자열.sprit(구분자)
      var str = "1 2 3 4 5";
      var arr =  str.split(""); //-- 1차원 배열 반환
      for(var n=0; n<arr.length; n++)
      {
         document.getElementById("result").value += arr[n] + " " ; 
      }
      //--==>> 1 2 3 4 5

• 프레젠테이션

PART11

---

01 자바스크립트 기본 용어와 출력 방법
- 표현식
- 문장 : 코드의 최소 단위
- 종결 : 문장 마지막에 세미콜론(;) 또는 줄바꿈
            (되도록이면 세미콜론을 붙이는 것이 좋다)
- 키워드 : 자바의 예약어 개념
- 식별자 (네이밍 룰은 모든 언어들이 비슷하다)
   └ 식별자 생성 규칙 : 생성자 함수 이름은 항상 대문자로 시작, 변수 등 나머지는 항상 소문자, 파스칼표기법 사용
- 주석 (자바와 동일)
- alert (기본 출력)

---

02 자료형과 변수
※ JavaScript 엔진 : 자바의 jvm 과 유사
- 숫자 : 가장 기본적인 자료형, 정수와 실수 구분X
- 문자열 : '작은따옴표' "큰따옴표" 둘 다 사용 , 문자열 연결은 '+', 이스케이프 문자 '\'
                └ 이후 『\'』 『 \"』 등에 관해서는 별도 설명
                 ※ JavaScript 에서는 여러 프로그램 언어를 섞어서 사용하게 되는 경우가 종종 있음
                  ex) "abcdefg='kkkkkkk' " , 'abcdefg="kkkkkk" ', "abc\''def\"&ghi" 의 형태로 사용하게 됨
- 불(bool) - 참, 거짓
- 비교연산자  : >= , != 등... 자바와 유사
- 논리연산자 
- 변수 : 값을 저장할 때 사용하는 식별자
            └ 데이터 타입이 존재함에도 불구하고 특정 자료형을 담는 형태의 변수라고 선언하지 않음.
                var(iable) pi = 3.14xxxx;
                 pi = 3.14xxxx ; (var 조차도 없이 사용하는 경우도 있음 - 문법이 조금 다르다고는 함)

---

03 조건문과 반복문
- 조건문 : if, if~else 등 java와 유사하게 중첩도 가능
- 반복문
   └ 배열 : 배열 내부에 다양한 자료형 입력 가능(자바와 다른 점) 
   └ while, for, do~while 등 존재

---

04 함수
└ 자바에서는 메소드(함수가 독립적으로 존재할 수 없기 때문에(클래스의 일부임))라고 부르나,
    JavaScript 에서는 함수가 주인공인 경우가 많다. 또한 객체 개념은 존재하나 클래스는 존재하지 않는다.
- 선언과 호출, 실행 우선순위
   └ 익명함수 function() {}  << 이름이 없는데 어떻게 호출해서 사용하지?
   └ 선언적 함수 function 함수() {}
- 매개변수와 반환 값 (반환자료형은 없는데, 반환값은 있다)
  function 함수이름(매개변수, ..) {
   return 반환 값}
- 콜백함수 : 보통 함수는 불러서 사용하는 건데, 역으로 불려지게 끔 하는 함수

---

05 객체
var product = {
         속성 = 속성값, 
         속성 = 속성값 ...
          method: function() {
           }
}; 
- 객체.속성 으로 사용
- 속성 안에 메서드도 넣을 수 있음
- this 키워드 : 객체를 표현

PART12

---

01) 문서 객체 모델의 기본용어와 개념 (문객체, DOM 이라고도 부름)
- 문서객체 조작 = 태그 
- 요소노드 : <h1>태그와 <script> 태그처럼 요소를 생성하는 노드
- 텍스트노드 : 화면에 출력되는 문자열
- 정적 생성 : HTML 페이지 생성
- 동적 생성 : 웹페이지 실행중에 JavaScript 통해 문서 객체 생성

---

02) 문서 객체 선택
- 1개 선택
document.getElementById(아이디)
document.getquerySelector(선택자)
- 다중 선택
documet.getElementsByName
documet.getElementsByClass
...

---

03) 문서 객체 조작
- 글자 조작 : 글자 속성 조작 textContent, innerHTML 로 변경 가능
- 스타일 조작
   └ 자바스크립트로 CSS 속성 값을 추가/제거/변경 가능
※ JavaScript는 특수문자 '-' 를 사용할 수 없으므로 ex) background-color → backgroundColor 와 같이 변경
    JavaScript는 기능 동작 행위를 수행하는 것이지만,
   해당 기능을 수행하면서 색상이 변한다든가 하는 것을 제어해야하므로 css 를 사용한다.
    (단, css 로 처리 이후에 동작을 하면서 변경하는데에 적용하는 것이 바람직.)
- 속성 조작

---

04) 이벤트
- 이벤트 용어 정리
  ⊙ 이벤트 속성 : 모든 것이 이벤트 onload
  ⊙ 이벤트 이름 또는 이벤트 타입:  on 을 제외한 load
  ⊙ 이벤트 리스너, 이벤트 핸들러 : 이벤트 속성에 넣는 함수
- 기본적으로 지원하는 이벤트 : 마우스, 키보드 ~ 터치 등등  : ~ 했을 때 하고 표현 해준다
- 이벤트 연결 : 문서 객체에 이벤트를 연결하는 방식 - 브라우저 마다 이벤트를 처리하는 방식이 달라질 수 있다.

PART13

---

자바스크립트

- 장점? 특징?
  ⊙ 웹 브라우저 자체에서 자바스크립트를 지원한다.
  ⊙ 함수를 사용하기 편리하다.
  ⊙ 소스를 활용하기가 쉽다.
  → 다만, 자바스크립트는 언어적으로 구분되어야 할 경계가 모호하기 때문에 바람직한 언어는 아니나
      위의 특징으로 인해서 많이 사용하게 되며, 호환성이 굉장히 뛰어나게 됨. → 절.대.못.버.려....
- document. 으로 사용
- 지역변수와 전역변수가 있음
- 내장함수(Built-in 함수) 와 사용자 정의 함수 
- 객체
  : 생성자 함수
 구성하지 않더라도 배열객체 date객체 function 객체, String(문자열)객체, Math 객체 등... 존재
- JavaScript 에서도 객체 안에 넣은 함수는 메소드라고 표현함
- 웹 브라우저 객체 : Window 객체 (Browser Object Model, BOM) : 이걸 기반으로 DOM 을 운용

---

JavaScript 관찰 실습

• Test001

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test001.html</title>
</head>
<body>

<!-- 내용 확인 -->

<script type="text/javascript">
//--자바스크립트 소스 코드가 시작된다는 선언

	/* 2023년 5월의 어느 날 */ //--블록단위 주석문
	
	document.write("2023년 5월의 어느 날");
	//-- 출력을 지시하는 자바스크립트 명령어
	//   출력 내용 : 문자열, 변수명, 연산결과 등...

// 자바스크립트 소스 코드가 끝났다는 선언
</script>

</body>
</html>

---

• Test002

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test002.html</title>
</head>
<body>

<script type="text/javascript">
	document.write("<h1>2023년 5월의 어느 날...</h1>");
	//document.write("이름");
	//document.write("<br>2023년 5월의 어느 날...");
	document.write("<br>2023년 5월의 어느 날...<br>");
	document.write("이름");
	
	// 개행
	// 개행
	// 개행
	
	document.write("<h2>");
	document.write("기운냅시다");
	document.write("</h2>")
	
	
	// 문자열 결합
	document.write("<h3>"+"소리도 잘 안들리고 확인도 안하고 넘어가시네"+"</h3>");
</script>

</body>
</html>

---

• Test003

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test003.html</title>

<script type="text/javascript">

	/* 2023년 5월의 어느 날...  */
	document.write("2023년 5월의 어느날");
	
</script>


</head>
<body>

<!-- body 영역에는 아무 내용도 존재하지 않음 → 주석 처리 -->

</body>
</html>

---

• Test004

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test004.html</title>

<script type="text/javascript" src="js/jsTest.js"></script>
<!-- 『jsTest.js』라는 파일을 호출하는 형식을 취하고 있다.
      호출하는 대상 파일의 경로 포함 파일명을 src 속성을 통해 명시하게 되며
      이 때, 자바스크립트 파일의 확장자는 반드시 『.js』이어야 한다. -->

</head>
<body>

</body>
</html>

/**
 * jsTest.js
 */


document.write("2023년 5월의 어느 날...");

---

• Test005

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test005.html</title>

<script type="text/javascript">

	num1=10;					// 변수 선언 및 초기화(변수 선언 과정이 특별히 존재하지 않음) → var num1=10;
	document.write("num1=");	// 단지 문자열 출력 → "num1"
	document.write(num1);		// write() 함수에 num1 이라는 변수명을 넘겨주는 상황
								// → num1 에 담겨있는 값 출력
								
	document.write("num1");

</script>

</head>
<body>

</body>
</html>

---

• Test006

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test006.html</title>

<script type="text/javascript">

	num1=10;						//-- 변수 num1 에 10 대입
	document.write("num1=");		//-- 문자열 출력
	document.write(num1);			//-- 변수 출력
	
	num1=100;						//-- 변수 num1 에 100 대입
	//document.write("\n num1=");	//-- 문자열 출력	-- 개행 안됨 check!
	document.write("<br> num1=");	//-- 문자열 출력	-- 개행을 위해 사용한 <br>
	document.write(num1);			//-- 변수 출력

	num1="2023년 5월의 어느날...";	//-- 변수 num1 에 문자열 대입(문자열)
	document.write("<br> num1=");	//-- 문자열 출력
	document.write(num1);			//-- 변수 출력

	num1=200;						//-- 변수 num1 에 다시 200 대입(정수)
	document.write("<br> num1=");	//-- 문자열 출력
	document.write(num1);			//-- 변수 출력
	
</script>

</head>
<body>

</body>
</html>

---

• Test007

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test007.html</title>

<script type="text/javascript">
	num1=10;
	
	var num2;
	num2=20;
	
	var num3=30;
	
	document.write("num1="+num1);
	document.write("<br>num2="+num2);
	document.write("<br>num3=");
	document.write(num3);
</script>

</head>
<body>

</body>
</html>

---

• Test008

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test008.html</title>

<script type="text/javascript">
	num1=7;
	num2=3;
	
	res = num1 + num2;					//-- 덧셈 연산
	document.write("num1 + num2 = ");
	document.write(res);
	
	res = num1 - num2;					//-- 뺄셈 연산
	document.write("<br>num1 - num2 = ");
	document.write(res);
	
	res = num1 * num2;					//-- 곱셈 연산
	document.write("<br>num1 * num2 = ");
	document.write(res);
	
	res = num1 / num2;					//-- 나눗셈 연산
	//check~ 							//   → 결과 값으로 반환되는 데이터 형태 관찰 
	document.write("<br>num1 / num2 = ");	
	document.write(res);
	
	res = num1 % num2;					//-- 나머지(나눗셈 연산)
	document.write("<br>num1 % num2 = ");
	document.write(res);
</script>

</head>
<body>

</body>
</html>

---

• Test009

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test009.html</title>
</head>
<body>

<script type="text/javascript">
	num1 = 7;
	num2 = 3;
	
	document.write("원래의 num1 : ");
	document.write(num1);
	
	++num1;
	document.write("<br>첫 번째 ++num1 : ");
	document.write(num1);
	
	++num1;
	document.write("<br>두 번째 ++num1 : ");
	document.write(num1);
	
	document.write("<br>원래의 num2 : ");
	document.write(num2);
	
	--num2;
	document.write("<br>첫 번째 --num2 : ");
	document.write(num2);
	
	--num2;
	document.write("<br>두 번째 --num2 : ");
	document.write(num2);
</script>


</body>
</html>

---

• Test010

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test010.html</title>

<script type="text/javascript">
	num1 = 7;
	num2 = 3;	
	num1 += num2;
	document.write("num1 += num2 → ");
	document.write(num1);
	
	num1 = 7;
	num2 = 3;	
	num1 -= num2;
	document.write("<br>num1 -= num2 → ");
	document.write(num1);
	
	num1 = 7;
	num2 = 3;	
	num1 *= num2;
	document.write("<br>num1 *= num2 → ");
	document.write(num1);
	
	num1 = 7;
	num2 = 3;	
	num1 /= num2;
	document.write("<br>num1 /= num2 → ");
	document.write(num1);
	
	num1 = 7;
	num2 = 3;	
	num1 %= num2;
	document.write("<br>num1 %= num2 → ");
	document.write(num1);
	
</script>

</head>
<body>

</body>
</html>

---

• Test011

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test011.html</title>

<script type="text/javascript">
	num1 = 7;
	num2 = 3;
	
	res = (num1 == num2);
	document.write("num1 == num2 → ");
	document.write(res);	
	
	res = (num1 >= num2);
	document.write("<br>num1 >= num2 → ");
	document.write(res);
	
	res = (num1 <= num2);
	document.write("<br>num1 <= num2 → ");
	document.write(res);
	
	document.write("<br><br><hr><br><br>");
	
	res=(num1 < 10 && num2 < 10);
	document.write("<br>num1 < 10 && num2 < 10 → ");
	document.write(res);
	
	res=(num1 > 10 && num2 > 10);
	document.write("<br>num1 > 10 && num2 > 10 → ");
	document.write(res);
	
	res=(num1 < 10 || num2 < 10);
	document.write("<br>num1 < 10 || num2 < 10 → ");
	document.write(res);
	
	res=(num1 > 10 || num2 > 10);
	document.write("<br>num1 > 10 || num2 > 10 → ");
	document.write(res);
	
	res !=(num1 == num2);
	document.write("<br>!(num1 == num2) → ");
	document.write(res);
	
	document.write("<br><br><hr><br><br>");
	
	human = "연인";
	
	res = (human == "연인") ? "사랑" : "우정";
	document.write("<br>res = ");
	document.write(res);

	human = "친구";
	
	res = (human == "연인") ? "사랑" : "우정";
	document.write("<br>res = ");
	document.write(res);
	

</script>


</head>
<body>

</body>
</html>

---

• Test012

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test012.html</title>

<script type="text/javascript">
	
	message = "<h1>Hello~!!!</h1>";
	document.write(message);
	
	alert(message);
</script>

<script type="text/javascript" src="js/alertTest.js"></script>

<script type="text/javascript">
	// Date 내장 객체 : 현재 시스템의 날짜와 시간
	// var dt = Date().toString(); -- 자바문법으로 보자면 이런 형태!
	var dt = String(Date());	//-- String (대문자 시작. 즉, 생성자 함수)
	document.write(dt);
</script>

</head>
<body>

</body>
</html>

/**
 * alertTest.js
 */


alert(message);

---

• Test013
  - 이벤트 등록방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test013.html</title>

<script type="text/javascript">

	/* 이벤트 등록 방법② */
	document.onload = windowOnload();

	// 사용자 함수 정의
	function windowOnload()
	{
		alert("경고창 출동~");
	}
	
	
</script>

</head>

<!-- 이벤트 등록 방법 ① -->
<!-- <body onload="windowOnload()"> -->
<!-- 바디 태그 내에서 load event 발생 시 함수 호출 - 잘 사용되지 않는 방법 -->
<body>

<h1>키배리</h1>
<h2>배부르다!</h2>
<h3>졸리다!</h3>

</body>
</html>

---

• Test014
  - 전역변수 , 지역변수 차이

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test014.html</title>

<script type="text/javascript">

	// 자바스크립트 코드 작성
	
	// msg 변수 → 함수 밖에서 선언 → 모든 함수에서 접근 가능한 전역 변수
	msg =  "2023년 5월을 시작하는 길목에서..감성충만....";
	//-- 『var』키워드 사용 여부와 관계없이 전역변수의 형태로 기능하고 있는 상황임을 확인
	
	function btnOnclick1()
	{
		// 테스트
		//alert("첫 번째 버튼 클릭 확인")
		alert(msg);
		
		// 『var』 키워드 포함 → name 변수 → 함수 내부에 선언 → 지역 변수
		//var name = "메타몽루피";
		
		// 『var』 키워드 생략 → name 변수 → 함수 내부에 선언 → 상황에 따른 지역/전역 변수 활용 
		name = "메타몽루피";
		
		document.write("이름 : " + name);
	}
	
	function btnOnclick2()
	{
		// 테스트
		//alert("두 번째 버튼 클릭 확인")	
		alert(msg);
		
		document.write("이름 : " + name);
	}
	
<!--
//--> 
//어떠한 브라우저에서 해당 코드가 안 돌아갈 경우를 대비해서 해당 부분은 생략하고 레이아웃만 표시되게 하라는 옛날 주석 표기 방법 중 하나.

</script>

<noscript>
	클라이언트의 브라우저에 의해 자바스크립트가 사용되지 못할 경우 표현되는 영역
</noscript>

</head>
<body>
<!-- input 타입 안에 이벤트 핸들러 삽입 -->
<input type="button" id="btn01" value="Button1" onclick="btnOnclick1()">
<br><br>

<input type="button" id="btn02" value="Button2" onclick="btnOnclick2()">
<br><br>


</body>
</html>

---

• Test015
  - Number()
  - parseInt()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test015.html</title>

<!-- ② CSS 로 디자인 -->
<style type="text/css">
	*
	{
		color : #343;
		font-family: 맑은 고딕;
	}
	input.box:focus
	{
		background-color: yellow;
	}
	input.btn:hover
	{
		color: orange;
		font-weight: bold;
	}
	
	input.numberBox
	{
		width: 50px;
		text-align: right;
	}
	
</style>

<!-- ③ Script 로 동작 -->
<script type="text/javascript">
	/* 3-ⓐ 함수 정의 */
	/* 3-ⓒ 테스트 주석 후 함수 기능 정의*/
	function actionBtnA()
	{
		// 테스트
		//alert("A버튼 클릭 확인");
		//console("내용"); -- alert 와 같이 테스트에 자주 쓰이는 구문
		
		//alert(document.getElementById("txtLeft"));		//-- 좌측 박스 객체 가져오기
		//alert(document.getElementById("txtLeft").value);	//-- 좌측 박스에 담긴 값 가져오기
		
		/* var txt01 = document.getElementById("txtLeft").value;
		// 테스트(변수에 제대로 값이 담겼는지 확인)
		alert(txt01); */
		// 위와 동일한 구문
		var txt01 = document.getElementById("txtLeft");
		// 테스트(변수에 제대로 값이 담겼는지 확인)
		//alert(txt01.value); 
		var leftStr = txt01.value;
		
		var txt02 = document.getElementById("txtRight"); //-- 우측 박스 가져오기
		
		txt02.value = leftStr;		//-- 우측 박스 값에 left 값 넣기
	}
	
	function actionBtnB()
	{
		// 테스트
		//alert("B버튼 클릭 확인");
		
		var txtR = document.getElementById("txtRight").value;
		var txtL = document.getElementById("txtLeft");
		txtL.value = txtR;
	}
	
	function actionBtnResult()
	{
		//테스트
		//alert("함수 호출 확인");
		
		var num1 = document.getElementById("txtNumber01").value;	//-- 기본적으로 받아오는 값은 문자열형태
		var num2 = document.getElementById("txtNumber02").value;
		
		// 확인
		//alert("num1 : " + num1 + "/ num2 : " + num2);
		
		// var result = num1 + num2; 		//-- 문자열 결합
		
		// ※ parseInt() 
		// var result = parseInt(num1 + num2); 			//-- 문자열 결합된 결과물을 정수 형태로 변환
		var res = document.getElementById("txtResult");
		res.value = parseInt(num1) + parseInt(num2);	//-- 연산을 위해서 정수형으로 변환하여 계산
		//			-------------    -------------
		//			Number(num1) + Number(num2) 		//-- parseInt와 동일
		//          ------ 생성자 함수
		
		// 위의 처리 내용과 같은 결과
		/*
		document.getElementById("txtResult").value 
		= parseInt(document.getElementById("txtNumber01").value) 
		+ parseInt(document.getElementById("txtNumber02").value);
		*/
	}
</script>

</head>
<body>

<div>
	<h1>자바스크립트 기본 관찰</h1>
	<hr>
</div>

<div>
	<!-- ① HTML 로 레이아웃 -->
	<br>
	<input type="text" class="box" id="txtLeft">
	<!-- 3-ⓑ 함수 호출 -- click 시에 실행 -->
	<input type="button" value="A버튼" class="btn" id="btnA" onclick="actionBtnA()">
	<input type="button" value="B버튼" class="btn" id="btnB" onclick="actionBtnB()">
	<input type="text" class="box" id="txtRight">
	<br>
	<hr>
	<br>
	
	
	<input type="text" class="numberBox" id="txtNumber01">
	+
	<input type="text" class="numberBox" id="txtNumber02">
	
	<input type="button" value=" = " class="btn" id="btnResult" onclick="actionBtnResult()">
	
	<input type="text" class="numberBox" id="txtResult">
	
</div>

</body>
</html>

---

• Test016
  - 계산기 기능 페이지 스크립트 작성 실습
  - this 객체로 넘겨받기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test016.html</title>

<style type="text/css">
	*
	{
		color: #223322;
		font-family: 나눔고딕코딩;
		font-weight: bold;
	}
	input:focus
	{
		background-color: #eeeedd	
	}
	input.btn
	{
		width: 80px;
		font-weight: bold;
		font-family: 맑은 고딕;
	}
	input.btn:hover
	{
		color:orange;
	}
	input.btn:active
	{
		color:red;
	}
	.txtNum
	{
		width: 80px;
	}
</style>

<script type="text/javascript">
	/*-- 버튼별로 함수 정의
	function plus()
	{
		var num1 = parseInt(document.getElementById("num1").value);
		var num2 = parseInt(document.getElementById("num2").value); 
		
		document.getElementById("result").value = num1 + num2;
	}
	function minus()
	{
		var num1 = parseInt(document.getElementById("num1").value);
		var num2 = parseInt(document.getElementById("num2").value); 
		
		document.getElementById("result").value = num1 - num2;
	}
	function multi()
	{
		var num1 = parseInt(document.getElementById("num1").value);
		var num2 = parseInt(document.getElementById("num2").value); 
		
		document.getElementById("result").value = num1 * num2;
	}
	function devide()
	{
		var num1 = parseInt(document.getElementById("num1").value);
		var num2 = parseInt(document.getElementById("num2").value); 
		
		document.getElementById("result").value = num1 / num2;
	}
	*/
	//-- 분기문을 통해서 함수 하나로 해결하기
	/*
	function cal(num)
	{
		var num1 = parseInt(document.getElementById("num1").value);
		var num2 = parseInt(document.getElementById("num2").value); 
		
		switch (num)
		{
		case 1:
			document.getElementById("result").value = num1 + num2;
			break;
		case 2:
			document.getElementById("result").value = num1 - num2;
			break;
		case 3:
			document.getElementById("result").value = num1 * num2;
			break;
		case 4:
			document.getElementById("result").value = num1 / num2;
			break;

		default:
			break;
		}
	}
	*/
	
	function test(obj) // 객체를 넘긴다는 것을 표현하기 위해 그냥 obj 로 표현
	{
		//alert(obj);
		//alert(obj.type);
		//alert(obj.class);
		//alert(obj.value);
		
		var vNum1 = document.getElementById("num1").value;
		var vNum2 = document.getElementById("num2").value; 
		var vResult = 0;
		
		if (obj.value == "더하기")	//자바스크립트는 문자열도 비교연산자로 비교 가능
		{
			//alert("덧셈 연산 수행");
			vResult = parseInt(vNum1) + parseInt(vNum2);
			
		} else if (obj.value == "빼기")
		{
			//alert("뺄셈 연산 수행");
			vResult = parseInt(vNum1) - parseInt(vNum2);
			
		} else if (obj.value == "곱하기") 
		{
			//alert("곱셈 연산 수행");
			vResult = parseInt(vNum1) * parseInt(vNum2);			
			
		} else if (obj.value == "나누기") 
		{
			//alert("나눗셈 연산 수행");
			vResult = parseInt(vNum1) / parseInt(vNum2);			
		}
		
		// 최종 연산 결과를 페이지에 반영
		document.getElementById("result").value = vResult;
		
	}
</script>

</head>
<body>

<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>

<div>
	<p>사용자로부터 두 개의 정수를 입력받고</p>
	<p>합, 차, 곱, 몫을 연산하여 연산 결과를 페이지에 출력할 수 있도록 한다.</p>
	<p>html, css, javascript 를 활용하여 처리한다.</p>
</div>

<div>
	<form>
		정수1 <input type="text" id="num1" class="textNum">
		정수2 <input type="text" id="num2" class="textNum">
		<br><br>
		
	<!-- 기능별 정의하였을 때 -->	
	<!-- 
		<input type="button" class="btn" value="더하기" onclick="plus()">
		<input type="button" class="btn" value="빼기" onclick="minus()">
		<input type="button" class="btn" value="곱하기" onclick="multi()">
		<input type="button" class="btn" value="나누기" onclick="devide()">
		<br><br>
	 -->
	
	<!-- 분기문 통해서 함수 작성했을 때 -->	
	<!-- 
		<input type="button" class="btn" value="더하기" onclick="cal(1)">
		<input type="button" class="btn" value="빼기" onclick="cal(2)">
		<input type="button" class="btn" value="곱하기" onclick="cal(3)">
		<input type="button" class="btn" value="나누기" onclick="cal(4)">
		<br><br>
	-->
	
	<!-- 객체를 넘겨주는 방법 -->
	<!-- test 함수를 호출하면서 this(해당 객체)를 넘긴다 -->
		<input type="button" class="btn" value="더하기" onclick="test(this)">
		<input type="button" class="btn" value="빼기" onclick="test(this)">
		<input type="button" class="btn" value="곱하기" onclick="test(this)">
		<input type="button" class="btn" value="나누기" onclick="test(this)">
		<br><br>
	
	
	
		결과 <input type="text" id="result" class="textNum" disabled="disabled">
		
		<input type="reset" class="btn" value="다시입력">
	</form>
</div>

</body>
</html>