함수-confirm, escape, isFinite, eval, split/ innerHTML

티스토리 뷰

web/javascript

함수-confirm, escape, isFinite, eval, split/ innerHTML

자벌레 2018. 2. 22. 12:58

2. 매개변수(Parameter, 함수로 전달 값)가 있는 함수의 호출

>>>>> /javascript/function/fun02.html

<head>

font-family: gulim;

font-size: 22px;

}

</style>

// pl 함수의 정의

function pl(str){ // String str, str:String

document.write (str + "<br/>");

}

</SCRIPT>

</head>

<body>

<H2>

temp1=10;

temp2="안녕하세요";

pl("두번째 함수예제입니다.");

pl(temp1); // 숫자

pl(temp2); // 문자열

pl(10.5); // 실수

pl(true); // 논리값

</script>

</H2>

</body>

3. 함수 실행 후 반환값이 있는 함수의 호출

- return 타입을 명시하지 않습니다.

>>>>> /javascript/function/fun03.html

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

// 함수의 정의, return type이 없음

function adding(x,y){

//입력된 값의 합을 계산

var z=x+y;

return z;

}

//print 함수의 정의

function pl(str){

//입력된 값과 <BR>태그를 연결하여 출력

document.write (str + "<br>");

}

</SCRIPT>

</head>

<body>

<H2>

var a=10;

var b=20;

var c = adding(a, b); // 숫자 전달시는 계산

pl("두 변수의 합은 " + c);

a = "야식이 건강 해치는 진짜 이유";

b = "<br>-소화 불량, 숙면 방해, 비만 유발, 식도염 발생, 신진 대사 방해";

c = adding(a, b); // 문자열 전달시는 연결이 됨

pl("두 변수의 합은 " + c);

</script>

</H2>

</body>

</html>

4. confirm() 내장함수

- API: http://www.w3schools.com/jsref/obj_window.asp
- 사용자가 확인이나 취소버튼을 클릭할 경우 true나 false를 리턴하는 함수입니다.

>>>>> /javascript/function/fun04.html
----------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

</HEAD>

<BODY>

<H2>confirm의 사용 예제</H2>

var temp;

temp=window.confirm("확인 또는 취소를 선택하세요");

//temp값은 true 또는 false

if (temp == true){

pl("확인을 선택하셨군요: " + temp);

}else{

pl("취소를 선택하셨군요: " + temp);

}

</script>

</BODY>

</HTML>

5. escape(), unescape() 내장 함수

- 숫자, 영문자를 제외한 한글등을 16진수 Unicode 형태로 인코딩(변환)하여 서버로 전송함, 변환을 하지 않으면 한글이 깨짐.

>>>>> /javascript/function/fun05.html

<BODY>

<H2>escape와 unescape</H2>

var temp1, temp2;

// 문자열을 인코딩(암호화, 한글과 특수문자만 변경됨, 16진수)

document.write("원본: " + "123-ABC-abc-미합중국/러시아/중국-!?#$%" + "<br><br>");

temp1=escape("123-ABC-abc-미합중국/러시아/중국-!?#$%");

// 인코딩된 문자열을 다시 디코딩(복호화, 원본으로 복구)

temp2=unescape(temp1);

document.write("escape: " + temp1 + "<br><br>");

document.write("unescape: " + temp2);

</script>

</BODY>

6. isFinite() 내장 함수

- 정상적인 숫자가 입력되면 true를 그렇지 않고 문자등이 입력되면 false를 리턴

>>>>> /javascript/function/fun06.html

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

</HEAD>

<BODY>

<H2>isFinite<br>

var temp1, temp2;

temp1=prompt("값을 입력하세요", 100);

// 숫자인지 검사

if (isFinite(temp1) == true){

pl(temp1 + "은 유한한 숫자");

}else{

pl(temp1 + "은 무한대이거나 숫자가 아님");

}

</script>

</H2>

</BODY>

</HTML>

7. isNaN() 내장 함수

- 입력된 값이 문자이면 true를 반환하고 그렇지 않고 숫자이면 false를 리턴

>>>>> /javascript/function/fun07.html

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

</HEAD>

<BODY>

var temp1;

// 숫자 형태는 전부 숫자임.

// temp1=prompt("값을 입력하세요", "100.5");

temp1=prompt("값을 입력하세요", 100.5);

// 문자열 형태

// temp1=prompt("값을 입력하세요", "백");

if (isNaN(temp1) == true){

document.write(temp1 + "은 문자임<br>");

}else{

document.write(temp1 + "은 숫자임<br>");

}

</script>

</BODY>

</HTML>

8. eval()내장 함수

- 문자열 형태인 코드를 자바스크립트 코드로 변경하여 줍니다.

- 문자열을 객체로 변환하는 기능을 가지고 있음.

eval 적용:

미적용:

>>>>> /javascript/function/fun08.html

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

</HEAD>

<BODY>

<H2>

var temp1, temp2;

temp1=prompt("수식을 입력하세요", "(10+20)/2"); // 입력값을 문자열 처리

->이걸 안하면 계산이 안되고 그냥 '문자열'로 처리함

// 문자열이 명령어로 전환, 문자열을 스크립트로 형 변환함, 연산 가능 숫자로 변경

temp2="계산결과는 " + eval(temp1) + " 입니다";

pl('temp2: ' + temp2);

</script>

</H2>

</BODY>

</HTML>

9. 문자열 관련 함수 응용

>>>>> /javascript/function/fun09.html

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

</head>

<body>

var wc="KOREA VICTORY";

var prn = wc.charAt(0); // 0번째 문자 추출

p("<h2>");

pl(prn); // K

pl(wc.charAt(1)); // O

pl(wc.charAt(2)); // R

pl(); // 라인 변경

pl("V의 위치: " + wc.indexOf("V")); // 6

pl("R이 마지막으로 나타난 위치: " + wc.lastIndexOf("R")); // 11

pl("문자열의 길이:" + "대한민국 WBC".length); //8

var tot=10;

pl("tot+tot: " + (tot+tot));

pl("parseInt: " + (parseInt('10')+parseInt('10')));

p("</h2>");

</Script>

</body>

</html>

10. 입력 값의 이동

- API: http://www.w3schools.com/jsref/dom_obj_document.asp

>>>>> /javascript/function/value.html

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

var oldVal = ''; // 전역 변수

var newVal = '';

// JSP의 내부 객체처럼 자동으로 자바 스크립트 객체 document가 생성됨.

function ok(f){ // f == this.form == document.frm 모두 같은 태그를 나타내는 객체

if(oldVal == "" && newVal == "" ){ // JAVA: equals()로 비교

// document.frm.keyword.value == f.keyword.value;

newVal = f.keyword.value; // input 태그에 입력된 값을 newVal 변수에 저장

} else if(f.keyword.value == "") {

return;

} else {

oldVal = newVal; // 현재 값을 다른 변수로 이동

newVal = f.keyword.value; // 새로운 값을 변수에 할당

}

// 자바 스크립트는 태그를 검색, 생성, 삭제, 변경이 가능합니다.

// 태그의 id가 'panel'인 HTML 태그를 찾아서 변수에 할당

// 태그의 id는 하나의 문서에서 고유해야 합니다.

var divTag = document.getElementById('panel');

// 출력할 문자열 조합

var str = 'oldVal: ' + oldVal + ' / newVal: ' + newVal;

// DIV태그에 값을 할당하는 속성: innerHTML (div에 내용이 '추가'됨)

divTag.innerHTML = divTag.innerHTML + '<br>' + str;

}

</script>

</head>

<body>

<!--

HTML → onclick → javascript

onclick : 마우스 이벤트, HTML과 Javascript의 연결 고리 역활

this 객체: <input type='button' 태그 자신

this.form: 현재 태그가 속한 <form name='frm' 폼태그 ok(this.form): ok 함수로 this.form 객체 전달, Call By Reference -->

</form>

</body>

</html>

11. split() 함수 응용

>>>>> /javascript/function/splitexam.html
----------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

font-family: gulim;

font-size: 22px;

}

</style>

</head>

<body>

<H2>split() 함수</H2>

<HR>

var DTOlist = '가길동, 100, 90/나길동, 70, 95/다길동, 88, 91'; //문자열임

var arrayDTO = DTOlist.split('/'); // /로 나눠서 배열형태로 만들어 줌

for(var i = 0; i < arrayDTO.length; i++){

document.write(arrayDTO[i] + '<br>');

}

document.write("<HR>");

document.write('<br>성적 계산 목록' + '<br><br>');

for(i = 0; i < arrayDTO.length; i++){

var dto = arrayDTO[i]; //배열에 들어있는 것들을 변수 하나에 담아줌, 그 안의 내용을 다시 , 로 나눔

var str = dto.split(',');

document.write('성명: ' + str[0] + '<br>');

document.write('영어: ' + str[1] + '<br>');

document.write('수학: ' + str[2] + '<br>');

var eng = parseInt(str[1]);

var mat = parseInt(str[2]);

document.write('총점: ' + (eng + mat) + '<br>');

document.write('평균: ' + ((eng + mat)/2) + '<br>');

document.write('------------------------------<br>');

}

</script>

</body>

</html>

저작자표시

'web > javascript' 카테고리의 다른 글

SELECT ~ OPTION 태그 Event의 처리 (0)	2018.02.26
CHECKBOX, RADIO 태그의 Event 처리 (0)	2018.02.23
BUTTON, SUBMIT 태그의 Event 처리 (0)	2018.02.23
제어문, break, javascript 파일의 include 사용 (0)	2018.02.22
javascript 개념, Data Type, Variable, Operator(연산자) (0)	2018.02.21

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

준빡블로그

TAG more

« 2025/04 »
일	월	화	수	목	금	토
		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	26
27	28	29	30

글 보관함

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

자바칩 푸라푸치노

티스토리 뷰

함수-confirm, escape, isFinite, eval, split/ innerHTML

'web > javascript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역