1차원 배열 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>literal Demo </title>
</head>
<body>
<script>
var array = [1,2,3,4,5];
document.write("<p style='font-size:30pt'>");
for(var i = 0 ; i < array.length; i++){
document.write(array[i] + " ");
}
document.write("</p>");
</script>
</body>
</html>
---------------------
2차원 배열 출력 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Array Initializer Expressions </title>
</head>
<body>
<script>
var clouds = ["cumulus", "nimbus", "cirrus"];
var str="";
for(var i = 0; i<clouds.length; i++){
str+="I wandered lonely as a " + clouds[i] + "\n";
}
alert(str);
document.write("<table>");
document.write("<tr>");
document.write("<th>No.</th><th>Name</th><th>Age</th>");
document.write("</tr>");
var cards = [[1,"Michael",30],[2,"Sujan",25],[3,"Sally",45]];
for(var i = 0 ; i < cards.length; i++){
document.write("<tr>");
for(var j = 0 ; j < cards[i].length ; j++){
document.write("<td>" + cards[i][j] + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
--------------------------
2차원 배열 출력 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Array Initializer Expressions </title>
</head>
<body>
<script>
var clouds = ["cumulus", "nimbus", "cirrus"];
var str="";
for(var i = 0; i<clouds.length; i++){
str+="I wandered lonely as a " + clouds[i] + "\n";
}
alert(str);
document.write("<table>");
document.write("<tr>");
document.write("<th>No.</th><th>Name</th><th>Age</th>");
document.write("</tr>");
var cards = [[1,"Michael",30],[2,"Sujan",25],[3,"Sally",45]];
for(var i = 0 ; i < cards.length; i++){
document.write("<tr>");
for(var j = 0 ; j < cards[i].length ; j++){
document.write("<td>" + cards[i][j] + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
값 접근
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>literal Demo </title>
</head>
<body>
<script>
var obj = {hakbun:1101, irum:"한송이", kor:90, eng:80, mat:100};
obj.sum = obj.kor + obj.eng + obj.mat;
obj.avg = obj.sum / 3.;
document.write("<h2>Sungjuk</h2>");
document.write("<ol>");
document.write("<li>학번 : " + obj.hakbun);
document.write("<li>이름 : " + obj["irum"]);
document.write("<li>국어 : " + obj["kor"]);
document.write("<li>영어 : " + obj["eng"]);
document.write("<li>수학 : " + obj["mat"]);
document.write("<li>총점 : " + obj.sum);
document.write("<li>평균 : " + obj.avg);
document.write("</ol>");
</script>
</body>
</html>
// .으로 접근하든지 []로 접근하든지 모두 가능.
------------------------
associative array 값 접근 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>literal Demo </title>
</head>
<body>
<script>
var employee = {empno:7788, ename:"Scott",
hiredate : new Date(), //현재날짜 및 시간 찍힘
hobby : ["음악감상", "독서", "농구"],
mycar : "Sonata"};
document.write("사번 : " + employee.empno + "<br>");
document.write("이름 : " + employee["ename"] + "<br>");
document.write("입사날짜 : " + employee.hiredate + "<br>");
document.write("취미 : ");
for(var i = 0 ; i < employee.hobby.length ; i++){
document.write(employee.hobby[i] + ", ");
}
</script>
</body>
</html>
출력:
사번 : 7788
이름 : Scott
입사날짜 : Wed May 28 2014 11:08:16 GMT+0900 (Korea Standard Time)
취미 : 음악감상, 독서, 농구,
//따라서 .은 [''] 나 [""] 와 같다.
따라서 다음 세가지는 같다.
picture.details.type
picture.details['type']
picture['details']['type']
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Function literal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>literal Demo </title>
</head>
<body>
<script>
var aaa = function(a, b){ //aaa는 함수의 주소를 가지고 있다고 생각하면 됨.
return a + b;
};
document.write(aaa(5, 9));
</script>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
delete : 멤버를 없애는 연산자.(내가만든건 없앨 수 있고 미리만들어진 것은 없앨 수 없음. 지워도 공간은 남음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> delete Operators </title>
</head>
<body>
<script>
var o = {x:1, y:2};
document.write("<p>delete o.x = " + (delete o.x) + "</p>");
document.write("<p>\"x\" in o = " + ("x" in o) +"</p>");
var a=[1,2,3];
document.write("<p>delete a[2] = " +(delete a[2]) + "<p>"); /* 값만 지우고 공간은 지우지 않음 */
document.write("<p>a.length = " + a.length + "<p>");
for(var i = 0; i < a.length ; i++){
document.write(i+"="+a[i]+"<br>");
}
</script>
</body>
</html>
출력:
delete o.x = true
"x" in o = false
delete a[2] = true
a.length = 3
0=1
1=2
2=undefined
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
in : (데이터가 아닌) 멤버가 있으면 true 없으면 false. 숫자일때는
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var point ={x:1,y:1};
document.write("<p>\"x\" in point = "+ ("x" in point)+"</p>"); //멤버 "x"가 있으므로 true
document.write("<p>\"z\" in point = "+ ("z" in point)+"</p>");
document.write("<p>\"toString\" in point = "+ ("toString" in point)+"</p>"); //toString은 point의 멤버이므로 true
var data=[7,8,9]; //숫자는 index로 해서, index까지 있으면 true
document.write("<p>\"0\" in data = "+ ("0" in data)+"</p>"); //"0"=0으로 생각해서 0번째 index가 있으므로 true
document.write("<p>1 in data = "+ (1 in data)+"</p>");
document.write("<p>3 in data = "+ (3 in data)+"</p>"); //index가 2번째까지밖에 없으므로 false
</script>
</body>
</html>
출력:
"x" in point = true
"z" in point = false
"toString" in point = true
"0" in data = true
1 in data = true
3 in data = false
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
성적관리 프로그램
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 성적관리프로그램 </title>
<script src="js/student.js"></script>
<script>
window.addEventListener("load", init, false);
function init(){
document.getElementById('btnInput').addEventListener("click", click, false);
}
function click(){
var chulsu = new Student(
document.getElementById('hakbun').value,
document.getElementById('irum').value,
parseInt(document.getElementById('kor').value),
parseInt(document.getElementById('eng').value),
parseInt(document.getElementById('mat').value)
);
calc(chulsu);
output(chulsu);
}
function output(s){
var str = "학번 : " + s.getHakbun() + "\n" +
"이름 : " + s.getIrum() + "\n" +
"국어 : " + s.getKor() + "\n" +
"영어 : " + s.getEng() + "\n" +
"수학 : " + s.getMat() + "\n" +
"총점 : " + s.getSum()+ "\n" +
"평균 : " + s.getAvg() + "\n" +
"학점 : " + s.getGrade();
alert(str);
}
function calc(s){
var sum = s.getKor() + s.getEng() + s.getMat();
var avg = sum / 3.;
s.setSum(sum);
s.setAvg(avg);
var grade = getGrade(avg);
s.setGrade(grade);
}
function getGrade(avg){
var grade = 'F';
switch(parseInt(avg / 10)){
case 10:
case 9 : grade = 'A'; break;
case 8 : grade = 'B'; break;
case 7 : grade = 'C'; break;
case 6 : grade = 'D'; break;
default : grade = 'F';
}
return grade;
}
</script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>성적관리프로그램</h1>
<table>
<form>
<tr><th><label for="hakbun">학번</label></th>
<td><input type="text" id="hakbun" autofocus></td>
</tr>
<tr><th><label for="irum">이름</label></th>
<td><input type="text" id="irum"></td>
</tr>
<tr><th><label for="kor">국어</label></th>
<td><input type="text" id="kor"></td>
</tr>
<tr><th><label for="eng">영어</label></th>
<td><input type="text" id="eng"></td>
</tr>
<tr><th><label for="mat">수학</label></th>
<td><input type="text" id="mat"></td>
</tr>
<tr><td colspan="2"><input type="button" id="btnInput" value="입력하기">
<input type="reset" value="다시하기"></td>
</tr>
</form>
</table>
</body>
</html>
student.js
var Student = function(hakbun, irum, kor, eng, mat){
var hakbun = hakbun;
var irum = irum;
var kor = kor;
var eng = eng;
var mat = mat;
var sum;
var avg;
var grade;
this.getHakbun = function() { return hakbun; };
this.getIrum = function() { return irum; };
this.getKor = function() { return kor; };
this.getEng = function() { return eng; };
this.getMat = function() { return mat; };
this.getSum = function() { return sum; };
this.getAvg = function() { return avg; };
this.setSum = function(total){ sum = total; };
this.setAvg = function(average){ avg = average; };
this.getGrade = function(){ return grade;};
this.setGrade = function(hakjum) { grade = hakjum; };
};
style.css
* {
margin:0;
padding:0;
}
body{
font-size:1.5em;
}
h1{
text-align:center;
margin-top:30px;
margin-bottom:20px;
}
table{
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
border:3px solid orange;
padding:5px;
}
th,td{
padding:5px;
border:0px solid black;
}
th{
background-color:yellow;
width:100px;
}
input[type="text"]{
font-size:1.5em;
width:300px;
}
input[type="button"], input[type="reset"]{
font-size:1.5em;
width:150px;
background-color: maroon;
}
tr:last-child > td {
text-align:center;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
practice 계절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Switch Statement Demo </title>
</head>
<body>
<script>
var season = prompt("당신은 어느 계절을 좋아하시나요?(spring | summer | fall | winter)");
switch(season){
case "spring" : alert("개나리, 진달래"); break;
case "summer" : alert("장미, 아카시아"); break;
case "fall" : alert("백합, 코스모스"); break;
case "winter" : alert("동백, 매화");
}
</script>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
소수 구하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 소수 구하기 </title>
</head>
<body>
<script>
for(var i = 2 ; i < 51 ; i++){
if(isPrime(i)){
document.write(i + ", ");
}
}
function isPrime(number){
var aaa = true;
for(var i = 2 ; i < number ; i++){
if(number % i == 0) {
aaa = false;
break;
}
}
return aaa;
}
</script>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
구구단
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 구구단 </title>
<style>
table{
border-collapse: collapse;
margin:auto;
width:800px;
}
th{
border:2px solid white;
font-size:1.5em;
background-color: blue;
color:white;
height:50px;
}
td{
border:2px solid orange;
font-size:0.8em;
height:180px;
text-align:center;
}
</style>
</head>
<body>
<h1>구구단</h1>
<script>
document.write("<table>");
document.write("<thead>");
document.write("<tr>");
for(var i = 2 ; i < 10 ; i++){
document.write("<th>" + i + "단</th>");
}
document.write("</tr>");
document.write("<thead>");
document.write("<tbody>");
document.write("<tr>");
for(var j = 2 ; j < 10 ; j++){
document.write("<td>");
for(var k = 1 ; k < 10 ; k++){
document.write(j + " x " + k + " = " + k * j + "<br>");
}
document.write("</td>");
}
document.write("</tr>");
document.write("</tbody>");
document.write("</table>");
</script>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
성적프로그램 : 여러명 입력 가능하게해서
sungjukmgmt.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 성적관리프로그램 </title>
<script src="js/student.js"></script>
<script src="js/input.js"></script>
<script src="js/calc.js"></script>
<script src="js/sort.js"></script>
<script src="js/output.js"></script>
<script>
window.addEventListener("load", init, false);
var array = new Array();
function init(){
document.getElementById("btnInput").disabled = false;
document.getElementById("btnCalc").disabled = true;
document.getElementById("btnSort").disabled = true;
document.getElementById("btnOutput").disabled = true;
document.getElementById('btnInput').addEventListener("click", input, false);
document.getElementById('btnCalc').addEventListener("click", calc, false);
document.getElementById('btnSort').addEventListener("click", sort, false);
document.getElementById('btnOutput').addEventListener("click", output, false);
}
</script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>성적관리프로그램</h1>
<table>
<form>
<tr><th><label for="hakbun">학번</label></th>
<td><input type="text" id="hakbun" autofocus></td>
</tr>
<tr><th><label for="irum">이름</label></th>
<td><input type="text" id="irum"></td>
</tr>
<tr><th><label for="kor">국어</label></th>
<td><input type="text" id="kor"></td>
</tr>
<tr><th><label for="eng">영어</label></th>
<td><input type="text" id="eng"></td>
</tr>
<tr><th><label for="mat">수학</label></th>
<td><input type="text" id="mat"></td>
</tr>
<tr><td colspan="2"><input type="button" id="btnInput" value="입력하기">
<input type="button" id="btnCalc" value="계산하기">
<input type="button" id="btnSort" value="정렬하기">
<input type="button" id="btnOutput" value="출력하기">
</td>
</tr>
</form>
</table>
<hr>
<div id="result"></div>
</body>
</html>
student.js
var Student = function(hakbun, irum, kor, eng, mat){
var hakbun = hakbun;
var irum = irum;
var kor = kor;
var eng = eng;
var mat = mat;
var sum;
var avg;
var grade;
this.getHakbun = function() { return hakbun; };
this.getIrum = function() { return irum; };
this.getKor = function() { return kor; };
this.getEng = function() { return eng; };
this.getMat = function() { return mat; };
this.getSum = function() { return sum; };
this.getAvg = function() { return avg; };
this.setSum = function(total){ sum = total; };
this.setAvg = function(average){ avg = average; };
this.getGrade = function(){ return grade;};
this.setGrade = function(hakjum) { grade = hakjum; };
};
input.js
function input(){
var chulsu = new Student(
document.getElementById('hakbun').value,
document.getElementById('irum').value,
parseInt(document.getElementById('kor').value),
parseInt(document.getElementById('eng').value),
parseInt(document.getElementById('mat').value)
);
array.push(chulsu);
document.getElementById("hakbun").value = "";
document.getElementById("irum").value = "";
document.getElementById("kor").value = "";
document.getElementById("eng").value = "";
document.getElementById("mat").value = "";
alert("잘 입력됐습니다.");
document.getElementById("btnCalc").disabled = false;
document.getElementById("btnOutput").disabled = false;
}
calc.js
function calc(){
for(var i = 0 ; i < array.length ; i++){
var sum = array[i].getKor() + array[i].getEng() + array[i].getMat();
var avg = sum / 3.;
array[i].setSum(sum);
array[i].setAvg(avg);
var grade = getGrade(avg);
array[i].setGrade(grade);
}
}
function getGrade(avg){
var grade = 'F';
switch(parseInt(avg / 10)){
case 10:
case 9 : grade = 'A'; break;
case 8 : grade = 'B'; break;
case 7 : grade = 'C'; break;
case 6 : grade = 'D'; break;
default : grade = 'F';
}
return grade;
}
sort.js
function sort(){
for(var i=0; i < array.length; i++){
for(var j=0; j<array.length-1-i; j++){
if(array[j].getSum()<array[j+1].getSum()){
var temp = array[j];
array[j]=array[j+1];
array[j+1]=temp;
}
}
}
output.js
function output(){
var str = "<table align='center' border='1' cellspaciing='0'><thead><tr><th>학번</th><th>이름</th>" +
"<th>국어</th><th>영어</th><th>수학</th><th>총점" +
"</th><th>평균</th><th>학점</th></tr></thead><tbody>";
for(var i = 0 ; i < array.length ; i++){
str += "<tr>";
str += "<td>" + array[i].getHakbun() + "</td>";
str += "<td>" + array[i].getIrum() + "</td>";
str += "<td>" + array[i].getKor() + "</td>";
str += "<td>" + array[i].getEng() + "</td>";
str += "<td>" + array[i].getMat() + "</td>";
str += "<td>" + array[i].getSum() + "</td>";
str += "<td>" + array[i].getAvg() + "</td>";
str += "<td>" + array[i].getGrade() + "</td>";
str += "</tr>";
}
str += "</tbody></table>";
document.getElementById("result").innerHTML = str;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
환자 관리 프로그램
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 환자관리프로그램 </title>
<script src="js/patient.js"></script>
<script src="js/input.js"></script>
<script src="js/calc.js"></script>
<script src="js/sort.js"></script>
<script src="js/output.js"></script>
<script>
window.addEventListener("load", init, false);
var array = new Array();
function init(){
document.getElementById("btnInput").disabled = false;
document.getElementById("btnCalc").disabled = true;
document.getElementById("btnSort").disabled = true;
document.getElementById("btnOutput").disabled = true;
document.getElementById('btnInput').addEventListener("click", input, false);
document.getElementById('btnCalc').addEventListener("click", calc, false);
document.getElementById('btnSort').addEventListener("click", sort, false);
document.getElementById('btnOutput').addEventListener("click", output, false);
}
</script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<fieldset>
<table>
<legend>환자데이터입력</legend>
<form>
<tr><th><label for="hakbun">번호</label></th>
<td><input type="text" id="bunho" autofocus></td>
</tr>
<tr><th><label for="irum">진료코드</label></th>
<td><input type="text" id="code"></td>
</tr>
<tr><th><label for="kor">입원일수</label></th>
<td><input type="text" id="days"></td>
</tr>
<tr><th><label for="eng">나이</label></th>
<td><input type="text" id="age"></td>
</tr>
<tr><td colspan="2"><input type="button" id="btnInput" value="입력하기">
<input type="button" id="btnCalc" value="계산하기">
<input type="button" id="btnSort" value="정렬하기">
<input type="button" id="btnOutput" value="출력하기">
</td>
</tr>
</form>
</table>
</fieldset>
<br><br>
<div id="result"></div>
</body>
</html>
patient.js
/**
* @author Instructor
*/
var Patient = function(bunho, code, days, age){
var bunho = bunho;
var code = code;
var days = days;
var age = age;
var 진찰부서;
var 진찰비;
var 입원비;
var 진료비;
this.getBunho = function() { return bunho; };
this.getCode = function() { return code; };
this.getDays = function() { return days; };
this.getAge = function() { return age; };
this.get진찰부서 = function() { return 진찰부서; };
this.get진찰비 = function() { return 진찰비; };
this.get입원비 = function() { return 입원비; };
this.get진료비 = function() { return 진료비; };
this.set진찰부서 = function(department){ 진찰부서 = department; };
this.set진찰비 = function(fee){ 진찰비 = fee; };
this.set입원비 = function(done){ 입원비 = done;};
this.set진료비 = function(money) { 진료비 = money; };
};
input.js
/**
* @author Instructor
*/
function input(){
var chulsu = new Patient(
document.getElementById('bunho').value,
document.getElementById('code').value,
parseInt(document.getElementById('days').value),
parseInt(document.getElementById('age').value)
);
array.push(chulsu);
document.getElementById("bunho").value = "";
document.getElementById("code").value = "";
document.getElementById("days").value = "";
document.getElementById("age").value = "";
alert("잘 입력됐습니다.");
document.getElementById("btnCalc").disabled = false;
document.getElementById("btnSort").disabled = false;
document.getElementById("btnOutput").disabled = false;
}
calc.js
/**
* @author Instructor
*/
function calc(){
for(var i = 0 ; i < array.length ; i++){
var dayone = (array[i].getDays() <= 3) ? 30000 : 25000; //1일 입원비
var totalfee = dayone * array[i].getDays(); //총입원비
var fee = totalfee * getRate(array[i].getDays()); //입원비
var money = getFee(array[i].getAge()) + fee; //진료비
var department = getDepartment(array[i].getCode()); //진찰부서
array[i].set진찰부서(department);
array[i].set진찰비(getFee(array[i].getAge()));
array[i].set입원비(parseInt(fee));
array[i].set진료비(parseInt(money));
}
}
function getDepartment(code){
var department;
switch(code){
case "MI": department = "외과"; break;
case "NI" : department = "내과"; break;
case "SI" : department = "피부과"; break;
case "TI" : department = "소아과"; break;
case "VI" : department = "산부인과"; break;
case "WI" : department = "비뇨기과"; break;
}
return department;
}
function getFee(age){
var fee;
if(age < 10) fee = 7000;
else if(age >= 10 && age < 20) fee = 5000;
else if(age >= 20 && age < 30) fee = 8000;
else if(age >= 30 && age < 40) fee = 7000;
else if(age >= 40 && age < 50) fee = 4500;
else fee = 2300;
return fee;
}
function getRate(days){
var rate;
if(days < 10) rate = 1.0;
else if(days >= 10 && days < 15) rate = 0.85;
else if(days >= 15 && days < 20) rate = 0.8;
else if(days >= 20 && days < 30) rate = 0.77;
else if(days >= 30 && days < 100) rate = 0.72;
else rate = 0.68;
return rate;
}
sort.js
/**
* @author Instructor
*/
function sort(){
for(var i = 0 ; i < array.length - 1 ; i++){
for(var j = 0 ; j < array.length - 1 - i ; j++){
if(array[j].get진료비() < array[j+1].get진료비())
swap(j, j+1);
}
}
}
function swap(a, b){
var temp = array[a];
array[a] = array[b];
array[b] = temp;
}
output.js
/**
* @author Instructor
*/
function output(){
var str = "<table><caption><<병원관리프로그램>></caption><thead><tr><th>번호</th><th>진찰부서</th>" +
"<th>진찰비</th><th>입원비</th><th>진료비</th></tr></thead><tbody>";
for(var i = 0 ; i < array.length ; i++){
str += "<tr>";
str += "<td>" + array[i].getBunho() + "</td>";
str += "<td>" + array[i].get진찰부서() + "</td>";
str += "<td>" + array[i].get진찰비() + "</td>";
str += "<td>" + array[i].get입원비() + "</td>";
str += "<td>" + array[i].get진료비() + "</td>";
str += "</tr>";
}
str += "</tbody></table>";
document.getElementById("result").innerHTML = str;
}
style.css
* {
margin:0;
padding:0;
}
body{
font-size:1.5em;
}
fieldset{
margin-top:30px;
margin-left:auto;
margin-right:auto;
padding:30px;
width:450px;
}
form > table{
margin:auto;
border-collapse: collapse;
border:3px solid orange;
padding:10px;
}
form th,td{
padding:5px;
border:0px solid black;
}
form th{
background-color:yellow;
width:100px;
}
input[type="text"]{
font-size:1.5em;
width:300px;
}
input[type="button"]{
font-size:0.9em;
width:100px;
}
tr:last-child > td {
text-align:center;
}
div table{
margin:auto;
border-collapse: collapse;
border:3px solid green;
padding:10px;
width:500px;
font-size:0.8em;
}
div table th,td{
padding:5px;
border:0px solid black;
text-align:center;
}
div table th{
background-color:lightblue;
width:100px;
}
'Java & Oracle' 카테고리의 다른 글
| array : join, sort, concat, slice, push, unshift, 성적관리프로그램, RegExp (0) | 2014.05.30 |
|---|---|
| 자바스크립트 for ~ in, email형식, 객체만들기, 출력을 새창으로, number, string, 달력, date, 시계, math, d-day 계산기 (0) | 2014.05.29 |
| 자바 스크립트 기본 (0) | 2014.05.27 |
| layout, navigation, clipping, border-shadow (0) | 2014.05.26 |
| font-family, vertical-align, list-style-type 이미지로, position, float (0) | 2014.05.23 |