array

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>Array Demo</title>

    </head>

    <body>

        <script>

            var array = [1, "two", {three:3}, [4,5], 

                              function(a,b){ return a * b; },

                              3 + 4, true];

            document.write("<p>" + array[2].three + "</p>");

            document.write("<p>" + array[3][1] + "</p>");      

            document.write("<p>" + array[4](4, 9) + "</p>");  //함수는 ()를 빼먹지 말고 써야함.       

            var aaa = array[4];   //함수포인터, 함수 변수

            document.write("<p>" + aaa(7,8) + "</p>");                 

            document.write("<ul>");                              

            for(var i in array){

                document.write("<li>" + i + " --> " + array[i] + "</li>");

            }

            document.write("</ul>");

        </script>

    </body>

</html>

출력:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>Array Demo</title>

    </head>

    <body>

        <script>

            var array = [1, "two", {three:3}, [4,5], 

                              function(a,b){ return a * b; },

                              3 + 4, true];

            document.write("<p>" + array[2].three + "</p>");

            document.write("<p>" + array[3][1] + "</p>");      

            document.write("<p>" + array[4](4, 9) + "</p>");  //함수는 ()를 빼먹지 말고 써야함.       

            var aaa = array[4];   //함수포인터, 함수 변수

            document.write("<p>" + aaa(7,8) + "</p>");                 

            document.write("<ul>");                              

            for(var i in array){

                document.write("<li>" + i + " --> " + array[i] + "</li>");

            }

            document.write("</ul>");

        </script>

    </body>

</html>

출력:

3


5


36


56


0 --> 1

1 --> two

2 --> [object Object]

3 --> 4,5

4 --> function (a,b){ return a * b; }

5 --> 7

6 --> true

----------------------------------------

array

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            var array = [1,2,3,[4,5,6],7];

            document.write("<p>" + array.length + "</p>");

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

                if(i == 3){

                    document.write("[");

                    for(var j = 0 ; j < array[3].length ; j++){

                        document.write(array[3][j] + "\t");

                    }

                    document.write("]<br>");

                }else{

                    document.write(array[i] + "<br>");

                }

            }

        </script>

    </body>

</html>

출력:

5


1

2

3

[4 5 6 ]

7

----------------------------------

array

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            /*var first = [1,2,3,4,5];

            var second = first;

            first[0] = 100;

            document.write(second[0]);*/  //배열은 주소복사 이므로 100이 출력됨.

            //var array = [1,2,3,4,5];

            //array[array.length] = 6;

            //document.write(array.toString());  //1,2,3,4,5,6

            

            var array = [1,2,3,4,5];

            array[-1] = "zero";

            for(var i in array){

                document.write("<p>" + i + " --> " + array[i] + "</p>");

            }

        </script>

    </body>

</html>

출력:

0 --> 1


1 --> 2


2 --> 3


3 --> 4


4 --> 5


-1 --> zero

------------------------------

array : join 사용 (배열의 연결을 무엇을 써서 할 것인지)

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>          

            var array = [1,2,3,4,5];

            document.write("<p>" + array.toString() + "</p>");

            document.write("<p>" + array.join() + "</p>");

            document.write("<p>" + array.join(" - ") + "</p>"); 

        </script>

    </body>

</html>

출력:

1,2,3,4,5


1,2,3,4,5


1 - 2 - 3 - 4 - 5

------------------------------

array : sort

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            var array = [4,2,5,8,3];

            array.sort();

            document.write("<p>" + array.toString() + "</p>");

            document.write("<hr>");

            array.sort(function(a, b){ return b - a; });

            document.write("<p>" + array.toString() + "</p>");

        </script>

    </body>

</html>

출력:

2,3,4,5,8


8,5,4,3,2

------------------------------

array : concat

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

           var array = [1,2,3];

           var array1 = new Array(4,5);

           var array2 = array.concat(array1);

           document.write(array2.toString());

        </script>

    </body>

</html>

출력:

1,2,3,4,5

----------------

array : concat 2

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

           var array = ["hello", "world", "Java", "Oracle"];

           document.write(array.concat([true, false], [2,3,4,5,6], [89.5, 3.14]).toString());

           

        </script>

    </body>

</html>

출력:

hello,world,Java,Oracle,true,false,2,3,4,5,6,89.5,3.14

--------------------

array : slice

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            var array = new Array(1,2,3,4,5,6,7,8,9);

            var demo1 = array.slice(4);

            var demo2 = array.slice(4,6);

            var demo3 = array.slice(4, -2);

            document.write("<p>" + demo1.join() + "</p>");

            document.write("<p>" + demo2.join() + "</p>");

            document.write("<p>" + demo3.join() + "</p>");

        </script> 

    </body>

</html>

출력:

5,6,7,8,9


5,6


5,6,7

---------------------------

array : splice

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            var array = [1,2,3,4,5,6,7,8,9];

            var demo = array.splice(4, 3, "five", ["six", "seven"]);

            document.write("<p>" + demo.toString() + "</p>");

            document.write("<p>" + array.toString() + "</p>");

        </script>

    </body>

</html>

출력:

5,6,7


1,2,3,4,five,six,seven,8,9

//잘라낸 array에 대체된 것을 넣는게 아니고 demo는 걍 뽑아낸 것만 들어가네... 원본에서 그 값이 바뀌는거고.. 어렵군

--------------------------

array : push pop  뒤에서 이루어지는 입력 출력

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            var array = new Array(1,2,3);

            array.push(4,5);

            document.write("<p>" + array.toString() + "</p>");

            document.write("<p>" + array.pop() + "</p>");

            document.write("<p>" + array.toString() + "</p>");

        </script>

    </body>

</html>

출력:

1,2,3,4,5


5


1,2,3,4

-------------------

array : unshift shift 앞에서 이루어지는 입력 출력

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            var array = new Array(1,2,3);

            //array.push(4,5);

            array.unshift(-2,-1, 0);

            array.push(4,5);

            document.write("<p>" + array.toString() + "</p>");

            array.shift();

            document.write("<p>" + array.toString() + "</p>");

            //document.write("<p>" + array.pop() + "</p>");

            //document.write("<p>" + array.toString() + "</p>");

        </script>

    </body>

</html>

출력:

-2,-1,0,1,2,3,4,5


-1,0,1,2,3,4,5

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

성적관리프로그램 : 파일을 읽어와서 평균, 합계 구하는

arraydemo7.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

        <script src="js/main.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 src="js/student.js"></script>

    </head>

    <body>

        <form>

            <p><label>File : <input type="file" id="myfile"></label>&nbsp;&nbsp;

            <input type="button" value="결과보기" id="output"></p>

            <hr>

        </form>

        <script>

            var myfile = document.getElementById('myfile');

            myfile.onchange = function (){

                var str = myfile.value;   //c:\fakepath\filename

                var filename = str.slice(str.lastIndexOf("\\") + 1);

                var files = this.files;

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

                    var file = files.item(i);

                    var reader = new FileReader();

                    reader.onload = function(){

                        var data = reader.result;

                        input(data);

                        calc();

                        //sort();

                    };

                    reader.readAsText(file);

                }        

            };

        </script>

    </body>

</html>


main.js

window.addEventListener("load", setup, false);

var array;

function setup(){

    array = new Array();

    document.getElementById('output').addEventListener("click", output, false);    

}

     

student.js

var Student = function(hakbun, irum, kor, eng, mat, edp){

    var hakbun = hakbun;

    var irum = irum;

    var kor = kor;

    var eng = eng;

    var mat = mat;

    var edp = edp;

    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.getEdp = function() { return edp; };

    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(data){

    var array1 = data.split("\n");

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

        var student = array1[i];  //1101     한송이     78     87     83    78

        var sArray = student.split("    ");

        var chulsu = new Student(sArray[0], sArray[1], 

                           parseInt(sArray[2]), parseInt(sArray[3]),

                           parseInt(sArray[4]), parseInt(sArray[5]));

        array.push(chulsu);  

    }

}


calc.js

function calc(){

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

        var sum = array[i].getKor() + array[i].getEng() + array[i].getMat() + array[i].getEdp();

        var avg = sum / 4.;

        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;

}


output.js

function output(){

    var str = "<!DOCTYPE html><html lang=\"ko\"><head><meta charset=\"utf-8\">";

    str += "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\">";

    str += "<title> 성적관리프로그램 </title></head><body>"; 

    str += "<table id=\"resulttable\"><caption>&lt;&lt;성적관리프로그램&gt;&gt;</caption><thead><tr><th>학번</th><th>이름</th>" +

                  "<th>국어</th><th>영어</th><th>수학</th>";

    str += "<th>전산</th><th>총점</th><th>평균</th><th>학점</th>";

    str += "</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].getEdp() + "</td>";

        str += "<td>" + array[i].getSum() + "</td>";

        str += "<td>" + array[i].getAvg() + "</td>";

        str += "<td>" + array[i].getGrade() + "</td>";

        str += "</tr>";

    }                      

    str += "</tbody></table></body></html>";

    var w = window.open();

    w.document.open();

    w.document.write(str);

    w.document.close();             

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

array 와 function : 숫자 입력후 sort되는

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> Array Demo </title>

    </head>

    <body>

        <script>

            function input(a){

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

                    a[i] = parseInt(prompt("숫자를 넣어주세요"));     

                }

            };

            function sort(a){

                a.sort();

            };

            function output(a){

                document.write("<p>" + a.join() + "</p>");

            };

            var array = new Array();

            array.length = 5;

            input(array);

            document.write("<p>Before Sort</p>");

            output(array);

            sort(array);

            document.write("<p>After Sort</p>");

            output(array);

        </script>

    </body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

RegExp

우편번호 형식 검사하기

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title> RegExp Demo </title>

        <script>

            window.addEventListener("load", setup, false);

            

            function setup(){

                document.getElementById('mybtn').addEventListener("click", mytest, false);

            }

            function mytest(){

                var userStr = document.getElementById('zippost').value;

                var pattern = /^\d{3}-?\d{3}$/;

                if(pattern.test(userStr)){

                    alert("형식에 잘 맞습니다.");

                }else{

                    alert("우편번호 형식에 일치하지 않습니다.");

                }

            }

        </script>

    </head>

    <body>

        <form>

            <p><label>우편번호 : <input type="text" id="zippost"></label></p>

            <p><input type="button" id="mybtn" value="검사하기"></p>

        </form>

    </body>

</html>

----------------

RegExp

var pattern = /(fox|dog)/g;

                var str = "The quick lightbrown fox jumps over the blue dog.";

                document.write("<p>" + str.replace(pattern, "cat") + "</p>");

fox나 dog 가 나오는 것을 모두 바꿈
















+ Recent posts