5일차_Javascript개요
------------------------------
Javascript
1. HTML 페이지 내부에서 HTML 페이지의 동적 기능을 부여하기 위한 프로그래밍 언어.
HTML, CSS -> 정적 페이지 -> 요청시 매번 동일한 결과, 액션 처리 불가.
HTML, CSS, Javascript -> 부분적인 동적 페이지 -> 사용자의 액션에 따라서 다른 결과 페이지.
2. 변수, 연산자, 제어문, 함수 등의 기능을 제공한다. 객체 지향의 개념 일부 제공.
//날짜 시간을 출력하는 자바스크립트 샘플
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 자바스크립트를 위한 영역을 <script> 태그로 지정 -->
<!-- <head> 태그 내부에 지정 -->
<script type="text/javascript">
/* 자바스크립트 영역 내에서만 자바스크립트 작성 가능 */
/* 자바스크립트는 함수의 집합체이다.
function 함수이름(매개변수) {
//자바스크립트 코드
}
*/
function myFunction() {
//내장객체 document 는 현재 브라우저의 HTML 문서를 지정.
//하위 멤버(태그)를 접근하는 메소드 제공.
//특정 태그의 내용에 대해서 특정 액션을 지정할 수 있다.
//특정 멤버(태그)를 접근하는 방법
//document.getElementById("아이디식별자");
//속성(Property) 또는 메소드를 이용해서 특정 멤버(태그)의 상태값을 변경하는 액션을 주로 한다.
//특정객체.속성명 = 값;
document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<div>
<!-- 자바스크립트를 이용해서 상태값을 바꾸기를 원하는 특정 객체 -->
<p id="demo">Click Date to display current day, date, and time.</p>
<!-- 자바스크립트 함수를 호출하려면 사용자의 액션이 필요하다. -->
<!-- onclick="myFunction()" 부분이 사용자 액션(click)에 의해 함수를 호출하는 과정이다. 이벤트 핸들러. -->
<form>
<input type="button" value="Date" onclick="myFunction()">
</form>
</div>
<!-- 자바스크립트를 위한 영역을 <script> 태그로 지정 -->
<!-- <body> 태그 내부 가장 마지막 위치에 지정 -->
<script type="text/javascript">
</script>
</body>
</html>
---------------------------------------------------
자바스크립트의 속성(Property)과 자바에서의 getter, setter 비교
자바에서는 객체의 상태를 읽거나, 쓰기 위한 용도로 getter, setter를 작성한다.
class 클래스명 {
private String 멤버변수;
public void 멤버변수setter(매개변수) {
멤버변수 = 매개변수;
}
public String 멤버변수getter() {
return 멤버변수;
}
}
준비된 getter, setter를 가지고 객체의 상태를 읽거나, 쓰게 된다.
객체의 현재 상태를 출력하려면 객체변수.get메소드();
객체의 상태를 변경하려면 객체변수.set메소드(값);
자바스크립트에서는 속성(property)로 대체된다. 미리 준비된 내장객체의 속성을 이용해서 객체의 상태를 읽거나, 쓰게 된다.
객체의 현재 상태를 출력하려면 객체변수.속성;
객체의 상태를 변경하려면 객체변수.속성 = 값;
예를 들어,
document 객체(HTML 문서 자체를 뜻하는 객체)가 가지고 있는 하위 멤버의 상태를 변경하려면
document.getElementById("아이디명").속성 = 값;
document.getElementById("demo").innerHTML = "Hello JavaScript";
<p id="아이디명">기존데이터부분</p>
->
<p id="아이디명">새로운 데이터로 교체</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 자바스크립트 코드 작성 영역 */
function changeImage() {
/* 화면에 보이는 그림의 상태를 바꾸기 위한 함수 정의 */
/*
특정 객체의 속성에 새로운 값을 지정-> 상태 바꾸는 방법
특정 객체를 찾는 과정->식별자 이용
속성->특정 객체가 가지고 있는 고유 속성. <img> 태그라면 src="" 속성.
특정객체.속성 = 새로운값;
*/
//특정 객체를 찾은 다음 임시 변수에 저장
var obj = document.getElementById("myImage");
//특정 객체의 특정 속성의 값에 "on" 문자열 포함 여부 확인
if (obj.src.match("on")) {
//off 이미지 지정
obj.src="pic_bulboff.gif";
} else {
//on 이미지 지정
obj.src="pic_bulbon.gif";
}
}
</script>
</head>
<body>
<div>
<!-- 이미지 객체는 src="" 속성에서 그림을 지정한다. -->
<!-- id="" 속성은 자바스크립트에서 해당 객체를 접근하기 위한 식별자 -->
<!-- onclick="" 이벤트핸들러는 자바스크립트 함수를 호출하기 위한 속성 -->
<!-- 사용자는 화면에 보이는 그림을 클릭(click) 함으로써
이벤트를 발생시키고 자바스크립트 함수를 실행하게 된다. -->
<p><img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180"></p>
<p>Click the light bulb to turn on/off the light</p>
</div>
</body>
</html>
-----------------------------------------
자바스크립트를 이용해서 특정 객체의 CSS 속성 값 변경.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 자바스크립트에서 함수에 매개변수 지정시 자료형은 없다. */
/* function 함수명(변수명) {} */
function changeColor(obj) {
//특정 객체를 찾은 다음 임시 변수에 저장
var box = document.getElementById("box");
//특정 객체의 style 속성을 찾고,
//style 중에서 backgroudColor 속성의 값을 새로운 값으로 지정
//box.style.backgroundColor = "#FF0000"; //white(#FFFFFF)->red(#FF0000)
//매개변수를 통해서 전달 받은 객체의 value 속성 값을 가지고
//특정 객체의 CSS 속성 값을 변경.
box.style.backgroundColor = obj.value;
}
</script>
</head>
<body>
<div>
<form>
<!-- 함수 호출시 매개변수와 매핑되는 값 지정 가능 -->
<!-- this는 이벤트가 발생한 객체 자신을 지칭하는 키워드 -->
<input type="button" value="white" onclick="changeColor(this)">
<input type="button" value="red" onclick="changeColor(this)">
<input type="button" value="blue" onclick="changeColor(this)">
</form>
<!-- id="" 속성은 자바스크립트에서 해당 객체를 접근하기 위한 식별자 -->
<div id="box" style="border:1px solid black; width:300px;height:200px; background-color: white;"></div>
</div>
</body>
</html>
------------------------------------
데이터에 대한 유효성 검사 (숫자 검사)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myFunction() {
/* 사용자가 입력한 텍스트 데이터에 대해서 검증하는 과정 추가 */
/* 검증 대상 -> 빈 칸 검사, 유효성 검사, 범위 검사 */
//<input> 태그를 접근하는 과정
var numbObj = document.getElementById("numb");
//<input> 태그에서 사용자가 입력한 데이터를 확인하는 과정
//->value 속성으로 확인
var numbVal = numbObj.value;
//빈 칸 검사, 유효성 검사(숫자), 범위 검사
//trim() 메소드 적용시 문자열 데이터의 공백을 제거한다.
//isNaN(대상) 함수 적용시 숫자가 아닌 데이터인 경우 true 반환.
//parseInt() 함수 적용시 문자열 숫자를 숫자 자료형으로 변환.
if (numbVal.trim() == ""
|| isNaN(numbVal)
|| (parseInt(numbVal)<0 || parseInt(numbVal)>100) ) {
//에러 메시지 출력 -> 실행 중단
//document.getElementById("demo").innerHTML = "잘못된 데이터가 입력되었습니다.";
alert("잘못된 데이터가 입력되었습니다.");
return;
}
document.getElementById("demo").innerHTML = "정상적인 데이터가 입력되었습니다.";
}
</script>
</head>
<body>
<div>
<p>Please input a number(0~100) :</p>
<form>
<!-- <input> 태그에서 type="text" 속성을 지정하면
사용자에게 텍스트 데이터를 입력 받을 수 있다. -->
<input id="numb" type="text" value="">
<button type="button" onclick="myFunction()">Click Me!</button>
</form>
<p id="demo"></p>
</div>
</body>
</html>
-------------------------------------
자바스크립트 문법
1. <script> ~ </script> 태그 안에 자바스크립트 코드 작성.
예를 들어,
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "My First JavaScript Function";
}
</script>
2. <head> ~ </head> 영역 안에 표기하거나, <body> ~ </body> 영역 안에 표기할 수 있다.
예들 들어,
<head>
<meta ... >
<style ....>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
3. 자바스크립트 소스 코드를 외부 파일로 저장하고 연결할 수 있다.
예를 들어,
<script src="myScript.js"></script>
//test.js
/**
*
*/
function myFunction() {
//Get the value of input field with id="numb"
var val = document.getElementById("numb").value;
//Get the element with id="demo"
var elem = document.getElementById("demo");
//If value is space or not a number
if ((val.trim() == "") || isNaN(val)) {
elem.innerHTML = "Not a Number";
} else {
elem.innerHTML = "Input OK";
}
}
//Sample25.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 외부 자바스크립트 파일 연결 -->
<script src="test.js"></script>
</head>
<body>
<div>
<p>Please input a number:</p>
<form>
<input id="numb" type="text" value="">
<button type="button" onclick="myFunction()">Click Me!</button>
</form>
<p id="demo"></p>
</div>
</body>
</html>
4. 자바스크립트 실행 결과를 메시지로 출력하는 경우는 innerHTML 속성 이용.
예를 들어,
<p id="demo">My First Paragraph</p>
document.getElementById("demo").innerHTML = "Paragraph changed.";
<img src="">데이터</img> -> X
<input type="" ...>데이터</input> -> X
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 사용자 정의 함수 추가 */
function myFunction() {
/* 메시지 출력1 */
//alert("Hello, Javascript World!");
/* 메시지 출력2 */
document.getElementById("msg").innerHTML = "Hello, Javascript World!";
}
</script>
</head>
<body>
<div>
<!--
자바스크립트 메시지 출력 테스트
1. alert() -> HTML 태그(객체) 필요 X
2. innerHTML -> HTML 태그(객체) 필요 O
-->
<form>
<!-- 이벤트(click)가 발생하는 경우에만 자바스크립트 함수 실행 -->
<input type="button" value="인사말"
onclick="myFunction()">
</form>
<!-- 자바스크립트 메시지 출력을 위한 전용 태그 지정 -->
<p id="msg"></p>
</div>
<script type="text/javascript">
/* 이벤트 없이 자동 실행 되기를 원하는 경우 이 위치에 작성. */
/* 사용자 정의 함수 지정을 하지 않아야 한다. */
/* 메시지 출력1 */
//alert("Hello, Javascript World!");
/* 메시지 출력2 */
document.getElementById("msg").innerHTML = "Hello, Javascript World!";
</script>
</body>
</html>
---------------------------------------------------
숫자 2 개를 입력 받아서 산술 연산의 결과 출력하는 자바스크립트 작성.
실행 예.
숫자1 : 10 -> <input type="text">
숫자2 : 20 -> <input type="text">
더하기 빼기 곱하기 나누기 -> <input type="button">
결과 => 30 -> <p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myFunction(key) {
//자바스크립트 내부에서 임시 변수 선언시 var 키워드 사용
var result = 0;
//value 속성을 이용해서 데이터를 읽어오면 내부적으로 자료형이 문자열이 된다.
var op1 = document.getElementById("num1").value; //첫 번째 수
var op2 = document.getElementById("num2").value; //두 번째 수
switch (key) {
//case 1: result = op1 + op2; break; //-> 문자열 결합
case 1: result = parseInt(op1) + parseInt(op2); break; //덧셈 연산 -> 수동 형변환
case 2: result = op1 - op2; break; //뺄셈 연산 -> 자동 형변환
case 3: result = op1 * op2; break; //곱셈 연산 -> 자동 형변환
//자바스크립트는 정수/정수 연산시 실수 결과
//자바스크립트 몫 연산 -> parseInt(op1/op2)
case 4: result = op1 / op2; break; //나눗셈 연산 -> 자동 형변환
}
//결과 메시지 출력
document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<div>
<h1>숫자 2 개를 입력 받아서 산술 연산의 결과 출력하는 자바스크립트 작성</h1>
<form>
<p>
<!-- <input type="text"> 태그는 웹에서 텍스트 문자열을 입력받는 폼 태그 -->
<!-- id="" 속성은 자바스크립트에서 접근하기 위한 식별자 -->
<!-- value="" 속성은 자바스크립트에서 해당 객체를
접근한 후 입력된 문자열 데이터를 확인할 수 있는 속성 -->
숫자1 <input type="text" id="num1" value="10">
숫자2 <input type="text" id="num2" value="">
</p>
<p>
<!-- value="" 속성에 문자열을 표기한 경우 초기값을 사용된다. -->
<!-- onclick="" 속성은 이벤트 핸들러를 이용해서 자바스크립트 함수 연결 -->
<input type="button" value="산술 연산 ( + )"
onclick="myFunction(1)">
<input type="button" value="산술 연산 ( - )"
onclick="myFunction(2)">
<input type="button" value="산술 연산 ( * )"
onclick="myFunction(3)">
<input type="button" value="산술 연산 ( / )"
onclick="myFunction(4)">
</p>
</form>
<p id="result">결과 : </p>
</div>
</body>
</html>
-----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 사용자 정의 함수 추가 */
function myFunction() {
/* 사용자가 입력한 메시지를 누적해서 출력 */
//사용자가 입력한 메시지 읽어오는 과정
var msg = document.getElementById("msg").value;
//메시지를 기존의 메시지와 누적한 다음 출력하는 과정
//<br> 태그는 줄바꿈 처리 전용 태그
document.getElementById("result").innerHTML += msg + "<br>";
//사용자가 입력한 메시지를 삭제하고 폼을 초기화하는 과정
document.getElementById("msg").value = "";
}
</script>
</head>
<body>
<div>
<!-- 문자열 결합 및 반복문 테스트 -->
<form>
<!-- size="글자수" 속성은 폼의 너비 지정 -->
메시지 : <input type="text" id="msg" size="50">
<input type="button" value="전송" onclick="myFunction()">
</form>
<p>메시지 결과</p>
<p id="result"></p>
</div>
</body>
</html>
-----------------------------------------------
구구단 숫자를 입력 받아서 결과 출력하는 자바스크립트. for문 이용. 문자열 결합 + 연산자 이용.
실행 예)
숫자 : 5 -> <input type="text">
결과 -> <input type="button">
----------------- -> <div> 또는 <p>
5 * 1 = 5
5 * 2 = 10
...
5 * 9 = 45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
function myFunction() {
//사용자가 입력한 값을 읽어오는 과정
var num = document.getElementById("num").value; //문자열
//임시 변수 선언
var result = "";
//반복문으로 구구단 연산을 하는 과정
for (var i=1; i<=9; ++i) {
//문자열 결합을 이용해서 구구단 메시지 만들어가는 과정
result += num + " * " + i + " = " + (num*i) + "<br>";
}
//결과 출력
document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<div>
<!-- 구구단 출력 -->
<form>
숫자 : <input type="text" id="num">
<input type="button" value="구구단 출력"
onclick="myFunction()">
</form>
<p id="result"></p>
</div>
</body>
</html>
------------------------------------------------------
문제) 1부터 100까지의 수를 모두 더한 값(5050)을 출력.
문제) 1부터 10까지의 수를 모두 곱한 값을 출력.
문제) 1부터 100까지의 수를 모두 더한 값(5050)을 출력.
10 단위마다 중간 결과값도 같이 출력합니다.
문제) 1부터 100까지의 수를 출력하되 10단위마다 줄바꿈 처리.
문제) 1부터 100까지의 수를 출력하되 10단위마다 줄바꿈 처리.
출력시 중간 합 결과가 같이 출력되도록 한다.
과제) 1부터 100까지의 수를 모두 더한 값(5050)을 출력.
10 단위마다 중간 결과값도 같이 출력합니다.
1 단위 숫자도 같이 출력합니다. (for 구문 이용)
실행 예)
1 2 3 4 5 6 7 8 9 10 => 55
1 2 3 4 ... 19 20 => 210
...
1 2 3 4 ... 98 99 100 => 5050
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myFunction(key) {
var result = "";
switch (key) {
case 1: break;
case 2: break;
case 3: break;
case 4: break;
case 5: break;
case 6: result = submenu6(); break;
}
document.getElementById("result").innerHTML = result;
}
function submenu6() {
var temp = "";
for (var b=1; b<=10; ++b) {
var c = 0;
for (var a=1; a<=(b*10); ++a) {
c += a;
//System.out.printf(" %d", a);
temp += " " + a;
}
//System.out.printf(" => %d %n", c);
temp += " => " + c + "<br><br>";
}
return temp;
}
</script>
</head>
<body>
<div>
<form>
<input type="button" value="문제1"
onclick="myFunction(1)">
<input type="button" value="문제2"
onclick="myFunction(2)">
<input type="button" value="문제3"
onclick="myFunction(3)">
<input type="button" value="문제4"
onclick="myFunction(4)">
<input type="button" value="문제5"
onclick="myFunction(5)">
<input type="button" value="문제6"
onclick="myFunction(6)">
</form>
<p id="result"></p>
</div>
</body>
</html>