주소 공백 분할 (String 내부객체).
String객체를 이용한 문제를 몆가지 풀어보려고 합니다.
String에 대해서는 java를 공부하면서 메서드를 많이 접해보셧을거에요. 그래서 풀면서 나오는 내용들을 설명해드리는 식으로 작성하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<head>
<script>
function check(){
var num= document.getElementById("in").value;
var result= num.match(/[0-9]+/ig); //null //match란 문자열안에서 일치하는 콘텐츠를 탐색하는데 사용된다.
document.getElementById("out").innerHTML=result;
// text 입력 검증버튼 클릭하면 숫자만으로 구성 검ㅈ증결과를 div 태그에 출력
}
</script>
</head>
<body>
<input type=text id="in">
<input type=button value="제출" onclick="check()">
<div id="out"> 검증되었습니다 </div>
</body>
|
우선, 위의 코드를 보시면 한줄의 출력결과를 innerHTML으로 사용할 div1개, text1개, 버튼1개 생성되어 있습니다.
버튼을 누르면 check()함수가 생성이 되도록 정의가 되어있습니다. 스크립트내에서의 check()함수가 정의된 것을 보도록 하겠습니다.
※ 참, 여기서 function이 함수인지, 생성자인지를 확인하는 방법은 function내부에 내부에 어떤 식이 있느냐에 따라서 결정됩니다. 생성자는 무조껀 맴버생성, 메서드 생성이 오기때문에 나머지 동작관련 문장들이 오면 다 함수라고 생각하시면 됩니다.
check()함수를 보시면, document.getElementById('in').value;가 있습니다. 텍스트 id값을 in이라고 정의했기때문에 해당 id를 찾아가보면 텍스트임을 알수 있고,그 텍스트에 입력되는 값(=value)을 num에 저장하는 코드입니다.그리고 num.match(/ ~~~~ /) 정규식표현이 있습니다. 대체적으로 정규식표현은 Html태그를 입력하면서 pattern=" "으로 작성하기도 하지만, 다음과 같이 스크립트내에서 변수나 함수등에서 사용할때 . match(/ ~~~/)의 형태로 사용되기도 합니다. 위의 정규식표현을 보자면, 0부터 9까지중 한 자리일때만 매치가 되도록 작성되있습니다. 또한, 뒤에 붙여지는 옵션을 설명해드리겠습니다.
g : 글로벌의 뜻. 전역 매칭을 한다. 처음부터가 아닌 전체에서 정규식이 맞는걸 찾는다.
i : case Insensitive, 대소문자 구별안함m : Multiline
그렇게 매치된 값을 result에 저장하게됩니다.
그리고 div의 id값이 out임을 확인하시고보면, document.getElementById('out').innerHTML=result에서 out의 innerHTML에 result를 대입하라는 코드라는 것을 알 수 있습니다. 여기서 out의 innerHTML이란, out이라는 id를 가진 div태그사이의 innerHTML공간에 result를 저장하라는 의미입니다.
다음으로는, 주소 공백 분할의 프로그램을 코드로 작성하려고 합니다. 우선 HTML틀을 text태그 1개, 버튼1개, div1개를 생성하였습니다.
그리고, 스크립트내에서 check()함수를 생성했습니다.
이때, check()함수란, id값이 addr인 텍스트의 입력값을 addr에 저장합니다.
저장된 변수를 split를 가지고 공백분할처리해서 새로운 배열에 저장합니다.
마지막으로, document.getElementById('out').innerHTML=addrArray.join("<br>");를 통해서 out이 지정하는 div의 innerHTML에 배열변수를 개행으로 join합쳐서 출력하는 코드입니다.
또한, 다음 코드는 String타입과 Object타입의 변수를 생성해서 changeStr(a,b)라는 함수의 매개변수에 넣을경우 둘 다 'java'라고 값이 변하는 것을 확인할 수 있는 간단한 코드입니다.
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 주소 공백 분할 </title>
<script>
function check(){
//주소 공백 분할 (____.value표현: input태그만 적용된다.)
var addr= document.getElementById("addr").value;
var addrArray= addr.split("");
document.getElementById("out").innerHTML=addrArray.join("<br>");
}
//앞으로 주소를 나눠서 출력하려면 태그에 아이디를 주고-> 아이디를 읽어서 -> 영역을 지정해서-> 출력한다.
//////////////////////////////////////////////////////////////////////////////////////////////////
function changeStr(a, b){
a='자바';
b='자바스크립트';
}
var s1="java";
var s2=new String("java"); //object
document.write(typeof(s1)+"<br>"); //String타입, s2.객체소유메소드 사용가능하다.
document.write(typeof(s2)+"<br>"); //object타입, s1.메소드사용안되는데===> 가능하도록 됐다.
changeStr(s1,s2); //함수호출
document.write(s1+"<br>");
document.write(s2+"<br>");
//////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
// function changeStr(a, b){
// a='자바';
// b='자바스크립트';
// return a;
// }
// var s1="java";
// var s2=new String("java"); //object
// document.write(typeof(s1)+"<br>"); //String타입, s2.객체소유메소드 사용가능
// document.write(typeof(s2)+"<br>"); //object타입, s1.메소드사용안되는데===> 가능하도록 됬다
// s1= changeStr(s1,s2); //함수호출 바꾸는 함수를 생성해서 호출했다.
// document.write(s1+"<br>");
// document.write(s2+"<br>");
//////////////////////////////////////////////////////////////////////////////////////////////////
</script>
</head>
<body>
<input type=text id="addr">
<input type=button value="주소분할" onclick="check()">
<div id="out"> 검증되었습니다 </div>
</body>
</html>
|
<코드결과>
'WEB 기초 > Script' 카테고리의 다른 글
| 19. Dom (document object model 문서객체모델)이란? (0) | 2018.04.15 |
|---|---|
| 18. 게시판 응용하기 (0) | 2018.04.15 |
| 16. 다양한 객체변환 (0) | 2018.04.12 |
| 15. 예외처리란, (0) | 2018.04.12 |
| 14. 배열 객체 연습 (0) | 2018.04.12 |