게시판 구현문제 (부족한 내용이 조금 있네요ㅜ)
게시판을 등록하고나서, 정렬할때 몰아서 정렬된다.
구체적인 문제내용은 다음과 같다.
반복{
0. emp id 태그에 다음과 같이 입력: 공백 중단
1. emp id태그에 다음과 같이 입력하고 100:이사원-56000,교육부
2. 등록 버튼을 클릭하면 insertEmp함수를 호출한다.
3. 입력 데이터를 사번:사원명-급여,부서명의 형식으로 분류하여 Employee타입의 객체로 생성한다.
(String.split(/, 또는: 또는-/) )
이 때, 등록날짜는 현재 시간으로 생성된다.
4. 3의 객체를 empArray 배열에 저장한다.
}
5. empArray를 급여순으로 정렬한다.6. empArray를 result id를 가진 태그 자리에 출력한다.
우선, 기본적인 틀을 만들어야겟죠?
이번에는 body태그안에서 기본틀과 기능들을 다 만들어보려고합니다.
우선, 기본적인 틀은 아래와 같습니다.
|
1
2
3
4
|
<input type=text id="emp">
<input type=button value="등록" onclick="insertEmp()">
<input type=button value="정렬" onclick="printEmp()">
<div id="result"></div>
|
값을 입력할 Text창 1개
등록버튼 1개
정렬버튼 1개
결과가 나타날 div태그 1개를 만들었습니다.
|
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
|
<script>
var empArray = [];//전역변수
var Employee = function(id, name, salary, dept) {
this.id = id;
this.name = name;
this.salary = salary;
this.dept = dept;
this.time = new Date();
this.toString = function() {
return this.id + ":" + this.name + ":" + this.salary + ":"
+ this.dept + ":" + this.time.toLocaleString();
}
}
function insertEmp() {
var emp = document.getElementById("emp").value;
if (emp == "") {
alert("등록완료");
return;
}
"jaba JavaScript".match(/java/ig);
var EmpInform = emp.split(/:|,|-/);
var e1 = new Employee(EmpInform[0], EmpInform[1], EmpInform[2], EmpInform[3]);
empArray.push(e1);
}
function printEmp() {
empArray.sort(function(x, y) {
return y.salary - x.salary;
});
var result = "";
for ( var i in empArray) {
result += "<h3>" + empArray[i] + "</h3>";
}
document.getElementById("result").innerHTML = result;
}
</script>
|
Employee라는 사용자정의 생성자를 만듭니다.
사용자정의인건 function내부에 this로 정의된 맴버들이 있다면 사용자정의 생성자라고 볼 수 있습니다.
그렇다면, Employee라는 생성자안에서 id, name, salary, dept를 초기화하고, toString을 미리만들어놓습니다.
그리고 insertEmp라는 함수안에서 input입력값을 emp에 저장했을때에,
공백이면 alert("등록완료"); 실행한다.
아니라면, split로 구분된 값을 생성자를 통해 하나의 객체로 만들어서 비어있는 배열안에 push한다.
또한, printEmp라는 함수안에서 내림차순정렬을 해주고, 반복을 통해 div안에서 출력되도록 한다.
<최종 구현코드>
|
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
|
<body>
<script>
var empArray = [];//전역변수
var Employee = function(id, name, salary, dept) {
this.id = id;
this.name = name;
this.salary = salary;
this.dept = dept;
this.time = new Date();
this.toString = function() {
return this.id + ":" + this.name + ":" + this.salary + ":"
+ this.dept + ":" + this.time.toLocaleString();
}
}
function insertEmp() {
var emp = document.getElementById("emp").value;
if (emp == "") {
alert("등록완료");
return;
}
"jaba JavaScript".match(/java/ig);
var EmpInform = emp.split(/:|,|-/);
var e1 = new Employee(EmpInform[0], EmpInform[1], EmpInform[2],
EmpInform[3]);
empArray.push(e1);
//printEmp();
}
function printEmp() {
empArray.sort(function(x, y) {
return y.salary - x.salary;
});
var result = "";
for ( var i in empArray) {
result += "<h3>" + empArray[i] + "</h3>";
}
document.getElementById("result").innerHTML = result;
}
</script>
<input type=text id="emp">
<input type=button value="등록" onclick="insertEmp()">
<!-- 등록 버튼 클릭 이벤트(키보드,마우스)가 발생하면 insertEmp를 호출해라 -->
<input type=button value="정렬" onclick="printEmp()">
<!-- 1.자바스크립트 원하는 시점 호출:
2.태그 클릭 동작 시점 호출:반복 동작
3.시간 경과 / 반복 주기 호출
:setInterval / setTimeout
-->
<div id="result"></div>
</body>
|
<코드결과>
값을 등록한 수만큼, 정렬할때 출력된다.
(1)
(2)
'WEB 기초 > Script' 카테고리의 다른 글
| 20. 이벤트 & window객체 (0) | 2018.04.15 |
|---|---|
| 19. Dom (document object model 문서객체모델)이란? (0) | 2018.04.15 |
| 17. 주소 공백 분할(String 내부객체) (0) | 2018.04.12 |
| 16. 다양한 객체변환 (0) | 2018.04.12 |
| 15. 예외처리란, (0) | 2018.04.12 |