JAVASCRIPT Archives - icodebroker

[JAVASCRIPT/WEB API] 웹 SQL 데이터베이스에서 데이터베이스 버전 업그레이드하기

■ 웹 SQL 데이터베이스에서 데이터베이스 버전을 업그레이드하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var db;

            var sqlArray =
            [
                'create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))', // 버전 1
                'alter table phonebook add column gender char',                                                       // 버전 2
                'alter table phonebook add column company varchar(64)'                                                // 버전 3
            ];

            function onLoad()
            {
                try
                {
                    this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);
                }
                catch(e)
                {
                    document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

                    return;
                }

                document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';
            }

            function showVersion()
            {
                document.getElementById('output').innerHTML = "현재 데이터베이스 버전 : " + this.db.version;
            }

            function upgradeVersion()
            {
                var message = '';
                var version = eval('0' + this.db.version);

                if(version < this.sqlArray.length)
                {
                    this.db.changeVersion
                    (
                        this.db.version,
                        String(this.sqlArray.length),
                        function(tx)
                        {
                            for(var i = version; i < this.sqlArray.length; i++)
                            {
                                tx.executeSql(this.sqlArray[i]);

                                message += 'version ' + (i + 1) + '로 업그레이드하였습니다.<br />';
                            }

                            document.getElementById('output').innerHTML = message;
                        }
                    );
                }
                else
                {
                    document.getElementById('output').innerHTML = '현재 버전(' + version + ')이 최종 버전입니다.';
                }
            }

            function resetVersion()
            {
                this.db.changeVersion
                (
                    this.db.version,
                    '',
                    function(tx)
                    {
                        tx.executeSql('drop table phonebook');
                    }
                );

                document.getElementById('output').innerHTML = '데이터베이스를 초기 상태로 설정했습니다.';
            }
        </script>
    </head>
    <body onload="onLoad();">
        <div id="output">데이터베이스 테스트입니다.</div>
        <p />
        <input type="button" value="현재 버전 조회"  onclick="showVersion();"    />
        <input type="button" value="버전 업그레이드" onclick="upgradeVersion();" />
        <input type="button" value="버전 초기화"     onclick="resetVersion();"   />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var db;

var sqlArray =

[

'create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))', // 버전 1

'alter table phonebook add column gender char', // 버전 2

'alter table phonebook add column company varchar(64)' // 버전 3

];

function onLoad()

{

try

{

this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);

}

catch(e)

{

document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

return;

}

document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';

}

function showVersion()

{

document.getElementById('output').innerHTML = "현재 데이터베이스 버전 : " + this.db.version;

}

function upgradeVersion()

{

var message = '';

var version = eval('0' + this.db.version);

if(version < this.sqlArray.length)

{

this.db.changeVersion

(

this.db.version,

String(this.sqlArray.length),

function(tx)

{

for(var i = version; i < this.sqlArray.length; i++)

{

tx.executeSql(this.sqlArray[i]);

message += 'version ' + (i + 1) + '로 업그레이드하였습니다.<br />';

}

document.getElementById('output').innerHTML = message;

}

);

}

else

{

document.getElementById('output').innerHTML = '현재 버전(' + version + ')이 최종 버전입니다.';

}

function resetVersion()

{

this.db.changeVersion

(

this.db.version,

'',

function(tx)

{

tx.executeSql('drop table phonebook');

}

);

document.getElementById('output').innerHTML = '데이터베이스를 초기 상태로 설정했습니다.';

}

</script>

</head>

<div id="output">데이터베이스 테스트입니다.</div>

<p />

</body>

</html>

[JAVASCRIPT/WEB API] 웹 SQL 데이터베이스에서 테이블 데이터 추가/삭제/조회하기

■ 웹 SQL 데이터베이스에서 테이블 데이터를 추가/삭제/조회하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var db;

            function onLoad()
            {
                try
                {
                    this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);
                }
                catch(e)
                {
                    document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

                    return;
                }

                document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';
            }

            function createCallback(tx)
            {
                tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');
            }

            function errorCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';
            }

            function successCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블을 생성했습니다.';
            }

            function createTable()
            {
                this.db.transaction(createCallback, errorCallback, successCallback);
            }

            function dropTable()
            {
                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('drop table phonebook');

                        document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';
                    }
                );
            }

            function insertData()
            {
                var name  = document.getElementById('name' ).value;
                var phone = document.getElementById('phone').value;

                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('insert into phonebook (name, phone) values (?, ?)', [name, phone]);
                    }
                );

                document.getElementById('output').innerHTML = '데이터를 추가했습니다.';

                document.getElementById('name' ).value = '';
                document.getElementById('phone').value = '';
            }

            function removeData(id)
            {
                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('delete from phonebook where id = ?', [id]);
                    }
                );

                document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';
            }

            function showData()
            {
                var message = '';

                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql
                        (
                            'select * from phonebook',
                            [],
                            function(tx, rs)
                            {
                                for(var i = 0; i < rs.rows.length; i++)
                                {
                                    var row = rs.rows.item(i);

                                    message = message + row['name'] + ', ' + row['phone'] + ', ' + '<a href="javascript:removeData(' + row['id'] + ');">삭제</a><br />';
                                }

                                document.getElementById('output').innerHTML = message;
                            }
                        );
                    }
                );
            }
        </script>
    </head>
    <body onload="onLoad();">
        <div id="output">데이터베이스 테스트입니다.</div>
        <p />
        <input type="button" value="테이블 생성" onclick="createTable();" />
        <input type="button" value="테이블 삭제" onclick="dropTable();"   />
        <p />
        이름 : <input type="text" id="name"  size="10" />
        전화 : <input type="text" id="phone" size="10" />
        <input type="button" value="데이터 추가" onclick="insertData();" />
        <input type="button" value="데이터 조회" onclick="showData();"   />
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<!DOCTYPE html>

<html>

<head>

var db;

function onLoad()

{

try

{

this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);

}

catch(e)

{

document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

return;

}

document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';

}

function createCallback(tx)

{

tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');

}

function errorCallback(tx)

{

document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';

}

function successCallback(tx)

{

document.getElementById('output').innerHTML = '테이블을 생성했습니다.';

}

function createTable()

{

this.db.transaction(createCallback, errorCallback, successCallback);

}

function dropTable()

{

this.db.transaction

(

function(tx)

{

tx.executeSql('drop table phonebook');

document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';

}

);

}

function insertData()

{

var name = document.getElementById('name' ).value;

var phone = document.getElementById('phone').value;

this.db.transaction

(

function(tx)

{

tx.executeSql('insert into phonebook (name, phone) values (?, ?)', [name, phone]);

}

);

document.getElementById('output').innerHTML = '데이터를 추가했습니다.';

document.getElementById('name' ).value = '';

document.getElementById('phone').value = '';

}

function removeData(id)

{

this.db.transaction

(

function(tx)

{

tx.executeSql('delete from phonebook where id = ?', [id]);

}

);

document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';

}

function showData()

{

var message = '';

this.db.transaction

(

function(tx)

{

tx.executeSql

(

'select * from phonebook',

[],

function(tx, rs)

{

for(var i = 0; i < rs.rows.length; i++)

{

var row = rs.rows.item(i);

message = message + row['name'] + ', ' + row['phone'] + ', ' + '<a href="javascript:removeData(' + row['id'] + ');">삭제</a><br />';

}

document.getElementById('output').innerHTML = message;

}

);

}

);

}

</script>

</head>

<div id="output">데이터베이스 테스트입니다.</div>

<p />

<p />

이름 : <input type="text" id="name" size="10" />

전화 : <input type="text" id="phone" size="10" />

</body>

</html>

[JAVASCRIPT/WEB API] 웹 SQL 데이터베이스에서 테이블 생성/삭제하기

■ 웹 SQL 데이터베이스에서 테이블을 생성하고 삭제하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var db;

            function onLoad()
            {
                try
                {
                    this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);
                }
                catch(e)
                {
                    document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

                    return;
                }

                document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';
            }

            function createCallback(tx)
            {
                tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');
            }

            function errorCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';
            }

            function successCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블을 생성했습니다.';
            }

            function createTable()
            {
                this.db.transaction(createCallback, errorCallback, successCallback);
            }

            function dropTable()
            {
                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('drop table phonebook');

                        document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';
                    }
                );
            }
</script>
    </head>
    <body onload="onLoad();">
        <div id="output">데이터베이스 테스트입니다.</div>
        <p />
        <input type="button" value="테이블 생성" onclick="createTable();" />
        <input type="button" value="테이블 삭제" onclick="dropTable();"   />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var db;

function onLoad()

{

try

{

this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);

}

catch(e)

{

document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

return;

}

document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';

}

function createCallback(tx)

{

tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');

}

function errorCallback(tx)

{

document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';

}

function successCallback(tx)

{

document.getElementById('output').innerHTML = '테이블을 생성했습니다.';

}

function createTable()

{

this.db.transaction(createCallback, errorCallback, successCallback);

}

function dropTable()

{

this.db.transaction

(

function(tx)

{

tx.executeSql('drop table phonebook');

document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';

}

);

}

</script>

</head>

<div id="output">데이터베이스 테스트입니다.</div>

<p />

</body>

</html>

[JAVASCRIPT/WEB API] Storage 인터페이스 : 세션 저장소 데이터 처리하기

■ Storage 인터페이스를 사용해 세션 저장소 데이터를 처리하는 방법을 보여준다. ▶ test1.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var data;

            function saveData()
            {
                data                = 'html5';
                sessionStorage.data = 'html5';
                localStorage.data   = 'html5';

                document.getElementById('output').innerHTML = '데이터를 저장했습니다.';
            }

            function loadData()
            {
                message =           '자바 스크립트 변수 : ' + data                           + '<br />';
                message = message + '세션 저장소 변수 : '   + sessionStorage.getItem('data') + '<br />';
                message = message + '로컬 저장소 변수 : '   + localStorage.getItem('data');

                document.getElementById('output').innerHTML = message;
            }

            function goToNextPage()
            {
                location.href = 'test2.html';
            }

            function clearData()
            {
                data = '';

                sessionStorage.clear();
                localStorage.clear();

                document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';
            }
        </script>
    </head>
    <body>
        <div id="output">세션 저장소 테스트입니다.</div>
        <p />
        <input type="button" value="데이터 저장" onclick="saveData();"     />
        <input type="button" value="데이터 로드" onclick="loadData();"     />
        <input type="button" value="페이지 이동" onclick="goToNextPage();" />
        <input type="button" value="데이터 삭제" onclick="clearData();"    />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var data;

function saveData()

{

data = 'html5';

sessionStorage.data = 'html5';

localStorage.data = 'html5';

document.getElementById('output').innerHTML = '데이터를 저장했습니다.';

}

function loadData()

{

message = '자바 스크립트 변수 : ' + data + '<br />';

message = message + '세션 저장소 변수 : ' + sessionStorage.getItem('data') + '<br />';

message = message + '로컬 저장소 변수 : ' + localStorage.getItem('data');

document.getElementById('output').innerHTML = message;

}

function goToNextPage()

{

location.href = 'test2.html';

}

function clearData()

{

data = '';

sessionStorage.clear();

localStorage.clear();

document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';

}

</script>

</head>

<body>

<div id="output">세션 저장소 테스트입니다.</div>

<p />

</body>

</html>

▶ test2.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <a href="test1.html">이전 페이지로 이동</a>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

[JAVASCRIPT/COMMON] JSON 표준 내장 객체 : stringify/parse 메소드를 사용해 JSON 직렬화/역직렬화하기

■ JSON 표준 내장 객체의 stringify/parse 메소드를 사용해 JSON 직렬화/역직렬화하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var sourceContact = { name : '홍길동', phone : '012-3456-7890' };

var sourceJSON = JSON.stringify(sourceContact);

var targetContact = JSON.parse(sourceJSON);

var sourceContact = { name : '홍길동', phone : '012-3456-7890' };

var sourceJSON = JSON.stringify(sourceContact);

var targetContact = JSON.parse(sourceJSON);

[JAVASCRIPT/WEB API] Storage 인터페이스 : 로컬 저장소에서 JSON 데이터 처리하기

■ Storage 인터페이스를 사용해 로컬 저장소에서 JSON 데이터를 처리하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var array = JSON.parse(localStorage.getItem('phonebook'));

                if(array == null)
                {
                    localStorage.setItem('phonebook', JSON.stringify(new Array));
                }

                showData();
            }

            function showData()
            {
                var message = '';

                var array = JSON.parse(localStorage.getItem('phonebook'));

                for(var i = 0; i < array.length; i++)
                {
                    message = message + array[i].name + ', ' + array[i].phone + ', ' + '<a href="javascript:removeData(' + i + ');">삭제</a><br />';
                }

                document.getElementById('output').innerHTML = message;
            }

            function AddData()
            {
                var value1;
                var value2;
                var array = JSON.parse(localStorage.getItem('phonebook'));

                value1 = document.getElementById('name').value;
                value2 = document.getElementById('phone').value;

                array[array.length] = { name : value1, phone : value2 };

                localStorage.setItem('phonebook', JSON.stringify(array));

                showData();

                document.getElementById('name').value  = '';
                document.getElementById('phone').value = '';
            }

            function removeData(i)
            {
                var array = JSON.parse(localStorage.getItem('phonebook'));

                array.splice(i, 1);

                localStorage.setItem('phonebook', JSON.stringify(array));

                showData();
            }

            function clearData()
            {
                localStorage.removeItem('phonebook');

                localStorage.setItem('phonebook', JSON.stringify(new Array));

                showData();
            }
        </script>
    </head>
    <body onload="onLoad();">
        <div id="output">로컬 저장소 JSON 데이터 테스트입니다.</div>
        <p />
        <input id="name" type="text" size="8" />
        <input id="phone" type="text" size="12" />
        <p />
        <input type="button" value="데이터 추가" onclick="AddData();"   />
        <input type="button" value="데이터 삭제" onclick="clearData();" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var array = JSON.parse(localStorage.getItem('phonebook'));

if(array == null)

{

localStorage.setItem('phonebook', JSON.stringify(new Array));

}

showData();

}

function showData()

{

var message = '';

var array = JSON.parse(localStorage.getItem('phonebook'));

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

{

message = message + array[i].name + ', ' + array[i].phone + ', ' + '<a href="javascript:removeData(' + i + ');">삭제</a><br />';

}

document.getElementById('output').innerHTML = message;

}

function AddData()

{

var value1;

var value2;

var array = JSON.parse(localStorage.getItem('phonebook'));

value1 = document.getElementById('name').value;

value2 = document.getElementById('phone').value;

array[array.length] = { name : value1, phone : value2 };

localStorage.setItem('phonebook', JSON.stringify(array));

showData();

document.getElementById('name').value = '';

document.getElementById('phone').value = '';

}

function removeData(i)

{

var array = JSON.parse(localStorage.getItem('phonebook'));

array.splice(i, 1);

localStorage.setItem('phonebook', JSON.stringify(array));

showData();

}

function clearData()

{

localStorage.removeItem('phonebook');

localStorage.setItem('phonebook', JSON.stringify(new Array));

showData();

}

</script>

</head>

<div id="output">로컬 저장소 JSON 데이터 테스트입니다.</div>

<p />

<p />

</body>

</html>

[JAVASCRIPT/WEB API] Storage 인터페이스 : 로컬 저장소 데이터 처리하기

■ Storage 인터페이스를 사용해 로컬 저장소의 데이터를 처리하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function saveData()
            {
                localStorage.name = 'html5';
                localStorage['phone'] = '012-3456-7890';
                localStorage.setItem('email', 'someone@html5.com');

                document.getElementById('output').innerHTML = '로컬 저장소에 데이터가 저장되었습니다.';
            }

            function loadData()
            {
                message = '이름 : ' + localStorage['name'] + '<br />';
                message = message + '전화 : ' + localStorage.getItem('phone') + '<br />';
                message = message + '이메일 : ' + localStorage.email;

                document.getElementById('output').innerHTML = message;
            }

            function clearData()
            {
                localStorage.clear();

                document.getElementById('output').innerHTML = '로컬 저장소의 데이터가 모두 제거되었습니다.';
            }
        </script>
    </head>
    <body>
        <div id="output">로컬 저장소 테스트입니다.</div>
        <p />
        <input type="button" value="저장하기" onclick="saveData();"  />
        <input type="button" value="로드하기" onclick="loadData();"  />
        <input type="button" value="지우기"   onclick="clearData();" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function saveData()

{

localStorage.name = 'html5';

localStorage['phone'] = '012-3456-7890';

localStorage.setItem('email', 'someone@html5.com');

document.getElementById('output').innerHTML = '로컬 저장소에 데이터가 저장되었습니다.';

}

function loadData()

{

message = '이름 : ' + localStorage['name'] + '<br />';

message = message + '전화 : ' + localStorage.getItem('phone') + '<br />';

message = message + '이메일 : ' + localStorage.email;

document.getElementById('output').innerHTML = message;

}

function clearData()

{

localStorage.clear();

document.getElementById('output').innerHTML = '로컬 저장소의 데이터가 모두 제거되었습니다.';

}

</script>

</head>

<body>

<div id="output">로컬 저장소 테스트입니다.</div>

<p />

</body>

</html>

[JAVASCRIPT/WEB API] HTMLCanvasElement 인터페이스 : getContext 메소드를 사용해 컨텍스트 구하기

■ HTMLCanvasElement 인터페이스의 getContext 메소드를 사용해 컨텍스트를 구하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.strokeStyle = 'red';

                context.strokeRect(20, 20, 100, 100);

                context.fillStyle = 'rgb(0, 0, 255)';

                context.fillRect(120, 120, 200, 200);

                context.clearRect(140, 140, 160, 160);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

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

var context = canvas.getContext('2d');

context.strokeStyle = 'red';

context.strokeRect(20, 20, 100, 100);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(120, 120, 200, 200);

context.clearRect(140, 140, 160, 160);

}

</script>

</head>

</body>

</html>

[JAVASCRIPT/WEB API] Document 인터페이스 : getElementById 메소드를 사용해 ID로 엘리먼트 구하기

■ Document 인터페이스의 getElementById 메소드를 사용해 ID로 엘리먼트를 구하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.strokeStyle = 'red';

                context.strokeRect(20, 20, 100, 100);

                context.fillStyle = 'rgb(0, 0, 255)';

                context.fillRect(120, 120, 200, 200);

                context.clearRect(140, 140, 160, 160);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

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

var context = canvas.getContext('2d');

context.strokeStyle = 'red';

context.strokeRect(20, 20, 100, 100);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(120, 120, 200, 200);

context.clearRect(140, 140, 160, 160);

}

</script>

</head>

</body>

</html>

[JAVASCRIPT/WEB API] 드래그 & 드롭 사용하기

■ 드래그 & 드롭을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        #board
        {
            position     : absolute;
            width        : 400px;
            height       : 400px;
            border-style : solid;
        }
    </style>
    <script language="javascript">
        var minimumX = 0;
        var minimumY = 0;
        var baseX    = 0;
        var baseY    = 0;

        function onDragStart(event)
        {
            var targetElement;

            if(typeof event.target != 'undefined')
            {
                targetElement = event.target;
            }
            else
            {
                targetElement = event.srcElement;
            }

            if(targetElement.tagName.toLowerCase() == 'img')
            {
                event.dataTransfer.setData('text', targetElement.id);
            }
        }

        function onDragEnter(event)
        {
            if(event.dataTransfer.dropEffect == 'copy')
            {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
            }
        }

        function onDragOver(event)
        {
            event.dataTransfer.dropEffect = 'copy';

            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }

        function onDrop(event)
        {
            var id          = event.dataTransfer.getData('text');
            var dropElement = document.getElementById(id);

            var targetElement;

            if(typeof event.currentTarget != 'undefined')
            {
                targetElement = event.currentTarget;
            }
            else
            {
                targetElement = event.srcElement;
            }

            if(dropElement && dropElement.parentNode != targetElement)
            {
                var cloneElement = dropElement.cloneNode();

                targetElement.appendChild(cloneElement);

                var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;
                var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

                var x = window.event.clientX + scrollX;
                var y = window.event.clientY + scrollY;

                setPosition(x, y);

                cloneElement.style.position = 'absolute';
                cloneElement.style.left     = (this.minimumX - cloneElement.width  / 2 - this.baseX) + 'px';
                cloneElement.style.top      = (this.minimumY - cloneElement.height / 2 - this.baseY) + 'px';
            }

            event.stopPropagation ? event.stopPropagation() : event.returnValue = false;
        }

        function setPosition(sourceX, sourceY)
        {
            var minimumDistance = 100000;

            for(var i = 1; i <= 4; i++)
            {
                for(var j = 1; j <= 4; j++)
                {
                    var x = 80 * i + baseX;
                    var y = 80 * j + baseY;

                    var distance = Math.sqrt((sourceX - x) * (sourceX - x) + (sourceY - y) * (sourceY - y));

                    if(distance < minimumDistance)
                    {
                        minimumDistance = distance;

                        this.minimumX = x;
                        this.minimumY = y;
                    }
                }
            }
        }

        function onLoad()
        {
            var canvas = document.getElementById('canvas');

            if(canvas.getContext)
            {
                var context = canvas.getContext('2d');

                context.lineWidth   = 2;
                context.lineJoin    = 'miter';
                context.lineCap     = 'butt';
                context.strokeStyle = 'gray';

                for(i = 1; i <= 5; i++)
                {
                    context.beginPath();
                    context.moveTo(0, 80 * i);
                    context.lineTo(400, 80 * i);

                    context.moveTo(80 * i, 0);
                    context.lineTo(80 * i, 400);
                    context.stroke();
                }
            }

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

            var x = board.style.left.replace('px', '');
            var y = board.style.top.replace('px', '');

            var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;
            var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

            this.baseX = parseInt(x) + parseInt(scrollX);
            this.baseY = parseInt(y) + parseInt(scrollY);
        }
    </script>
    <body onload="onLoad();">
        <div onDragStart="onDragStart(event)" draggable="true">
            <img id="image1" src="ball_blue.png" />
            <img id="image2" src="ball_red.png"  />
        </div>
        <div id="board" style="left:10px;top:100px;"
            ondragEnter="onDragEnter(event)"
            onDragOver="onDragOver(event)"
            onDrop="onDrop(event)">
            <canvas id="canvas" width="400" height="400" />
        </div>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

<!DOCTYPE html>

<html>

<head>

</head>

<style>

#board

{

position : absolute;

width : 400px;

height : 400px;

border-style : solid;

}

</style>

var minimumX = 0;

var minimumY = 0;

var baseX = 0;

var baseY = 0;

function onDragStart(event)

{

var targetElement;

if(typeof event.target != 'undefined')

{

targetElement = event.target;

}

else

{

targetElement = event.srcElement;

}

if(targetElement.tagName.toLowerCase() == 'img')

{

event.dataTransfer.setData('text', targetElement.id);

}

function onDragEnter(event)

{

if(event.dataTransfer.dropEffect == 'copy')

{

event.preventDefault ? event.preventDefault() : event.returnValue = false;

}

function onDragOver(event)

{

event.dataTransfer.dropEffect = 'copy';

event.preventDefault ? event.preventDefault() : event.returnValue = false;

}

function onDrop(event)

{

var id = event.dataTransfer.getData('text');

var dropElement = document.getElementById(id);

var targetElement;

if(typeof event.currentTarget != 'undefined')

{

targetElement = event.currentTarget;

}

else

{

targetElement = event.srcElement;

}

if(dropElement && dropElement.parentNode != targetElement)

{

var cloneElement = dropElement.cloneNode();

targetElement.appendChild(cloneElement);

var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;

var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

var x = window.event.clientX + scrollX;

var y = window.event.clientY + scrollY;

setPosition(x, y);

cloneElement.style.position = 'absolute';

cloneElement.style.left = (this.minimumX - cloneElement.width / 2 - this.baseX) + 'px';

cloneElement.style.top = (this.minimumY - cloneElement.height / 2 - this.baseY) + 'px';

}

event.stopPropagation ? event.stopPropagation() : event.returnValue = false;

}

function setPosition(sourceX, sourceY)

{

var minimumDistance = 100000;

for(var i = 1; i <= 4; i++)

{

for(var j = 1; j <= 4; j++)

{

var x = 80 * i + baseX;

var y = 80 * j + baseY;

var distance = Math.sqrt((sourceX - x) * (sourceX - x) + (sourceY - y) * (sourceY - y));

if(distance < minimumDistance)

{

minimumDistance = distance;

this.minimumX = x;

this.minimumY = y;

}

function onLoad()

{

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

if(canvas.getContext)

{

var context = canvas.getContext('2d');

context.lineWidth = 2;

context.lineJoin = 'miter';

context.lineCap = 'butt';

context.strokeStyle = 'gray';

for(i = 1; i <= 5; i++)

{

context.beginPath();

context.moveTo(0, 80 * i);

context.lineTo(400, 80 * i);

context.moveTo(80 * i, 0);

context.lineTo(80 * i, 400);

context.stroke();

}

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

var x = board.style.left.replace('px', '');

var y = board.style.top.replace('px', '');

var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;

var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

this.baseX = parseInt(x) + parseInt(scrollX);

this.baseY = parseInt(y) + parseInt(scrollY);

}

</script>

</div>

<div id="board" style="left:10px;top:100px;"

ondragEnter="onDragEnter(event)"

onDragOver="onDragOver(event)"

onDrop="onDrop(event)">

</div>

</body>

</html>

[JAVASCRIPT/LODASH] cloneDeep 함수 : 객체 깊은 복사하기

■ cloneDeep 함수를 사용해 객체를 깊은 복사하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


const lodash = require("lodash");

const sourceObject = { x : { y : 1 }};
const targetObject = lodash.cloneDeep(sourceObject);

console.log(targetObject === sourceObject); // false
console.log(targetObject.x === sourceObject.x); // false

const lodash = require("lodash");

const sourceObject = { x : { y : 1 }};

const targetObject = lodash.cloneDeep(sourceObject);

console.log(targetObject === sourceObject); // false

console.log(targetObject.x === sourceObject.x); // false

[JAVASCRIPT/COMMON] 객체 얕은 복사하기

■ 객체를 얕은 복사하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


const sourceObject = { x : { y : 1 }};

const targetObject = { ...sourceObject };

console.log(targetObject   === sourceObject  ); // false
console.log(targetObject.x === sourceObject.x); // true

const sourceObject = { x : { y : 1 }};

const targetObject = { ...sourceObject };

console.log(targetObject === sourceObject ); // false

console.log(targetObject.x === sourceObject.x); // true

[JAVASCRIPT/COMMON] string 클래스 : 유사 배열 객체로 사용하기

■ string 클래스에서 유사 배열 객체로서 사용하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var text = "string";

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
console.log(text[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다.
console.log(text.length); // 6
console.log(text.toUpperCase()); // STRING

var text = "string";

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.

console.log(text[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다.

console.log(text.length); // 6

console.log(text.toUpperCase()); // STRING

[JAVASCRIPT/COMMON] 객체 리터럴 내부에서 계산된 속성 이름을 사용해 속성 키 동적으로 생성하기

■ 객체 리터럴 내부에서 계산된 속성 이름을 사용해 속성 키를 동적으로 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


// ES6
var prefix = "prop";
var i      = 0;

var object1 = { };

// 객체 리터럴 내부에서 계산된 속성 이름으로 속성 키를 동적으로 생성한다.
object1[`${prefix}${++i}`] = i;
object1[`${prefix}${++i}`] = i;
object1[`${prefix}${++i}`] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

// ES6

var prefix = "prop";

var i = 0;

var object1 = { };

// 객체 리터럴 내부에서 계산된 속성 이름으로 속성 키를 동적으로 생성한다.

object1[`${prefix}${++i}`] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

[JAVASCRIPT/COMMON] 메소드 축약 표현을 사용해 메소드 정의하기

■ 메소드 축약 표현을 사용해 메소드를 정의하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var object1 =
{
    name : "Lee",

    sayHello()
    {
        console.log(`Hi! ${this.name}`);
    }
};

object1.sayHello(); // Hi! Lee

var object1 =

{

name : "Lee",

sayHello()

{

console.log(`Hi! ${this.name}`);

}

};

object1.sayHello(); // Hi! Lee

[JAVASCRIPT/COMMON] 계산된 속성 이름을 사용해 속성 키 동적으로 생성하기

■ 계산된 속성 이름을 사용해 속성 키를 동적으로 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


// ES5
var prefix = "prop";
var i      = 0;

var object1 = { };

// 계산된 속성 이름으로 속성 키를 동적으로 생성한다.
object1[prefix + ++i] = i;
object1[prefix + ++i] = i;
object1[prefix + ++i] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

// ES5

var prefix = "prop";

var i = 0;

var object1 = { };

// 계산된 속성 이름으로 속성 키를 동적으로 생성한다.

object1[prefix + ++i] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

[JAVASCRIPT/COMMON] 속성 축약 표현하기

■ 속성 축약을 표현하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var x = 1;
var y = 2;

var object1 =
{
    x : x,
    y : y
};

console.log(object1); // {x: 1, y: 2}

var object2 = { x, y };

console.log(object2); // {x: 1, y: 2}

var x = 1;

var y = 2;

var object1 =

{

x : x,

y : y

};

console.log(object1); // {x: 1, y: 2}

var object2 = { x, y };

console.log(object2); // {x: 1, y: 2}

[JAVASCRIPT/COMMON] delete 연산자 : 객체 속성 삭제하기

■ delete 연산자를 사용해 객체 속성을 삭제하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

person.age = 20;

delete person.age;

// person 객체에 address 속성이 존재하지 않는다.
// 따라서 delete 연산자로 address 속성을 삭제할 수 없다.
// 이때 에러가 발생하지 않는다.
delete person.address;

console.log(person); // {name: 'Lee'}

var person =

{

name : "Lee"

};

person.age = 20;

delete person.age;

// person 객체에 address 속성이 존재하지 않는다.

// 따라서 delete 연산자로 address 속성을 삭제할 수 없다.

// 이때 에러가 발생하지 않는다.

delete person.address;

console.log(person); // {name: 'Lee'}

[JAVASCRIPT/COMMON] 속성 동적 생성하기

■ 속성을 동적 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

person.age = 20;

console.log(person); // {name: 'Lee', age: 20}

var person =

{

name : "Lee"

};

person.age = 20;

console.log(person); // {name: 'Lee', age: 20}

[JAVASCRIPT/COMMON] 속성 값 갱신하기

■ 속성 값을 갱신하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

person.name = "Kim";

console.log(person.name); // Kim

var person =

{

name : "Lee"

};

person.name = "Kim";

console.log(person.name); // Kim

[JAVASCRIPT/COMMON] 숫자 속성 키 참조하기

■ 숫자 속성 키를 참조하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee",
    1 : 10
};

console.log(person["1"]); // 10

console.log(person[1]); // 10

var person =

{

name : "Lee",

1 : 10

};

console.log(person["1"]); // 10

console.log(person[1]); // 10

[JAVASCRIPT/COMMON] 마침표 표기법/대괄호 표기법을 사용해 속성 참조하기

■ 마침표 표기법/대괄호 표기법을 사용해 속성을 참조하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

console.log(person.name); // Lee

console.log(person["name"]); // Lee

var person =

{

name : "Lee"

};

console.log(person.name); // Lee

console.log(person["name"]); // Lee

[JAVASCRIPT/COMMON] 메소드 사용하기

■ 메소드를 사용하는 기본적인 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var circle =
{
    radius : 5,

    getDiameter : function()
    {
        return 2 * this.radius;
    }
};

console.log(circle.getDiameter()); // 10

var circle =

{

radius : 5,

getDiameter : function()

{

return 2 * this.radius;

}

};

console.log(circle.getDiameter()); // 10

[JAVASCRIPT/COMMON] 속성 리터럴을 사용해 속성 키 생성하기

■ 속성 리터럴을 사용해 속성 키를 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var sourceObject =
{
    0 : 1,
    1 : 2,
    2 : 3
};

console.log(sourceObject); // {0: 1, 1: 2, 2: 3}

var sourceObject =

{

0 : 1,

1 : 2,

2 : 3

};

console.log(sourceObject); // {0: 1, 1: 2, 2: 3}

[JAVASCRIPT/COMMON] 문자열/문자열 표현식을 사용해 속성 키 동적으로 생성하기

■ 문자열/문자열 표현식을 사용해 속성 키를 동적으로 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var sourceObject = { };
var key          = "hello";

sourceObject[key] = "world";

console.log(sourceObject); // {hello: 'world'}

var sourceObject = { };

var key = "hello";

sourceObject[key] = "world";

console.log(sourceObject); // {hello: 'world'}