'Web 프로그램'에 해당되는 글 377건

설문조사를 하고자 할 경우 날짜를 체크하는 간단한 로직이다.

<?php
$start = mktime(10, 00, 10, 04, 28, 2015); // start를 2015년 4월 28일 10시 0분 10초로 설정
$end = mktime(19, 00, 10, 12, 05, 2015); // start를 2015년 12월 05일 19시 0분 10초로 설정
$now = time();

//------------ 설문조사가 종료된 경우 -------------
if($end < $now) {
   echo "<script> window.alert('설문조사 기간이 만료되었습니다'); history.back();</script>";
}

?>

출처 : http://cacung82.blog.me/10035514681

n         쿠키란?

ü        쿠키란 서버측에서 클라이언트측에 상태 정보를 저장하고 추출할 수 있는 메커니즘

ü        클라이언트의 매 요청마다 웹 브라우저로부터 서버에게 전송되는 정보패킷의 일종

ü        HTTP에서 클라이언트의 상태 정보를 클라이언트의 하드 디스크에 저장하였다가 필요 시 정보를 참조하거나 재사용할 수 있음.

ü        사용 예

①   방문했던 사이트에 다시 방문 하였을 때 아이디와 비밀번호 자동 입력

②   팝업에서 “오늘 이 창을 다시 보지 않음” 체크

ü        쿠키의 제약조건

①   클라이언트에 총 300개까지 쿠키를 저장할 수 있다

②   하나의 도메인 당 20개의 값만을 가질 수 있다

③   하나의 쿠키 값은 4096Byte까지 저장 가능하다

n         세션이란?

ü     세션이란 클라이언트와 웹서버 간에 네트워크 연결이 지속적으로 유지되고 있는 상태를 말함

ü     클라이언트가 웹서버에 요청하여 처음 접속하면 JSP(혹은ASP)엔진은 요청한 클라이언트에 대하여 유일한 ID를 부여하게 되는데, 이 ID를 세션이라 부른다

ü     세션 ID를 임시로 저장하여 페이지 이동 시 이용하거나, 클라이언트가 재 접속 했을 때 클라이언트를 구분할 수 있는 유일한 수단이 된다

ü     세션의 장점

①  각각의 클라이언트마다 고유의 ID 부여

②  세션 객체마다 저장해 둔 데이터를 이용하여 서로 다른 클라이언트의 요구에 맞게 서비스 제공

③  클라이언트 자신만의 고유한 페이지를 열어놓아서 생길 수 있는 보안상의 문제 해결 용이

n         쿠키와 세션의 차이점

 쿠키(cookie)와 세션(session)은 기능상 비슷한 역할을 하고, 동작원리도 비슷하다. 왜냐하면, 일반적인 세션은 쿠키를 바탕으로 동작하기 때문이다. 그러나 가장 중요한 차이점은 저장되는 곳이 다르다는 것이다. 쿠키는 클라이언트에 저장되고, 세션은 서버에 저장된다. 쿠키의 경우에는 서버의 자원을 전혀 사용하지 않지만, 세션의 경우에는 서버에 저장되기 때문에 서버의 자원을 사용할 수가 있다. 쿠키와 세션의 만료 되는 기간도 다르다.

n    쿠키와 세션의 차이점(표)

아래 내용은 위의 출처와는 별개로 별도 작성한 사항이다.

세션은 서버 측에 존재하기 때문에 web 서버가 주기적으로 세션의 상태를 확인할 수 있어서 특정 시간동안 web site 내에서 어떠한 이동도 발생하지 않으면 사용자가 나간 것으로 간주하여 세션을 삭제할 수 있다.

기본적으로 24분을 기준으로 하여 세션을 삭제한다.

※ PHP 5.4 부터 session_register 기능이 없어졌다.

<?php

// PHP에서 세션을 사용하려면 세션을 시작해줘야 한다.

// 세션을 시작하지 않은 페이지에서는 세션 값을 사용할 수 없다.

if(!isset($_SESSION)) {
    session_start();
}

if(!function_exists('session_register'))
{
    // PHP 5.4 부터 session_register 가 없어져 만들어진 코드
    // var_dump($_SESSION);
    foreach($_SESSION as $sKey => $sVal)
    {
        if(!isset(${$sKey}))
        {
            ${$sKey} = $sVal;
        }
    }

    function session_register($key)
    {
        $_SESSION[$key] = $GLOBALS[$key];
    }
}

?>

이런 코드도 사용하지 않는게 좋다.

PHP에서 권고하는 $_GET, $_POST, $_REQUEST 배열로 변수를 넘기는 걸 사용하는게 좋다.

그래야 android 연동, C# 과의 연동할 때에도 제대로 연동된다.

index.php 파일에서 코드 작성시에 기본적으로 이런 형태로 구성된다.

세션 값이 존재하면 자동으로 main.php 파일로 이동하고, 세션이 없으면 Login Form 을 띄운다.

if(isset($_SESSION['userID'])){
    echo("<meta http-equiv='Refresh' content='0; URL=main.php'>");
} else {
    include($_SERVER['DOCUMENT_ROOT'].'/loginForm.php');
}

세션 유지 시간 설정값은 php.ini 파일에 있다.

session.cache_expire = 180

로 3분으로 되어 있다. 늘리고 싶으면 값을 조정하고 Apache 를 restart 해야 한다.

[Session]
session.save_handler = files
session.save_path = "/temp"    //세션이 저장될 경로
session.use_cookies = 1          //클라이언트의 쿠키로 세션 아이디를 저장함
session.name = PHPSESSID     //세션아이디를 저장할 쿠키 이름
session.auto_start = 0            // 자동으로 세션을 시작함
session.cookie_lifetime = 0     // 세션아이디를 저장할 쿠키의 폐기시간
session.cookie_path = /         //세션 아이디를 저장할 쿠키 경로
session.cookie_domain =        //세션 아이디를 저장할 쿠키의 도메인

세션을 사용하기 원하는 파일에서 맨 위에 아래와 같이 코드를 추가해준다.

<?php

if(!isset($_SESSION)) {
    session_start();
}

?>

보통은 session_start(); 만 적어주면 되는데 jQuery 를 이용하여 코딩을 하다보면 파일을 include_once, require_once 로 파일을 include 하는 경우가 많다.

이때 세션이 있는 상태에서 또 세션이 들어오면 세션 중복 경고 메시지가 뜬다.

이런 경우를 방지하기 위해서 위와 같이 코드를 적어주는게 좋다.

<?php
// DB 연동후에 가져온 결과값
if(is_array($row)){
    if($row[0]==1){
        if(!isset($_SESSION)) {
            session_start();
        }
        $_SESSION['userID'] = $row['userID'];;
        $_SESSION['userIdx'] = $row['idx'];
    }
}
?>

세션이 동작하지 않을 때

ㅇ 웹브라우저 보안 수준이 높게 설정된 경우

ㅇ 웹브라우저 도구->인터넷옵션->개인정보에서 설정이 모든 쿠키를 차단하는 경우

세션 삭제

<?php
if(!isset($_SESSION)) {
    session_start();
}
session_destroy(); 
?>

session_unset("변수");  // 현재 변수의 값을 삭제하고 변수도 소멸시키는 함수

session_unset($_SESSION['userID']);

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

<?php
if(!isset($_SESSION)) {
    session_start();
}
$POST['userID']='jsk005@naver.com';
$_SESSION['userID']=$POST['userID'];
$id=$_SESSION['userID'];

if (isset($_SESSION['userID']) && !empty($_SESSION['userID']))
 echo $_SESSION['userID']. "님 반갑습니다.";
else
 echo "SESSION 없다.";
?>

세션 공격 방어

세션 토큰이 생성과는 과정은 위의 그림과 같다.

1. 서버에서 로그인 성공이후 세션 정보를 생성하면 해당 정보를 지정한 디렉토리에 PHPSESSIONID 를 저장한다.

2. 클라이언트는 세션 정보를 브라우저를 통해 COOKIE로 저장해둔다.

세션 쿠키의 값을 알아낼 수 있다면 아이디와 비번 따위는 훔칠 필요도 없다.

세션 쿠키를 사용하면 남의 아이디로 로그인된 상태로 만들 수 있다.

세션 고정 공격은 공격자가 정상적으로 얻을 수 있는 권한보다 높은 권한을 가진 SID를 획득하기 위해 수행하는 공격이므로, 로그인 하는 등 권한이 변경될 때마다 SID를 재생성한다면 무력화시킬 수 있다.

http/https 혼합 환경에서 세션 보안 강화하기 https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=79296 참조

변수에 대한 이해 http://link2me.tistory.com/996 에 isset 과 empty 에 대한 설명이 있다.

PHP 소스파일의 위치를 빨리 찾는 방법이다.

예전에는 리눅스상에서 파일 찾는 방법을 몰라서 소스 전부를 다운로드 한 다음에 Total Commander 를 이용하여 소스에 찾고자하는 단어 검색을 해서 자료를 찾았다.

리눅스 상에서 파일 찾는 법을 배우고 나서는 그럴 필요가 전혀 없다.

로그인창을 띄우는 소스가 어디인지 궁금해서 찾아봤다.

위 그림에서 보면 "이메일 또는 아이디" 라는 글자가 보인다.

그리고 "아이디/비밀번호 기억" 이라는 글자도 보인다.

이걸 검색어로 넣고 검색을 했다.

find ./ -name "*.php" | xargs grep -l "이메일 또는 아이디"
find ./ -name "*.php" | xargs grep -l "아이디/비밀번호 기억"

찾고자 하는 파일의 위치를 정확하게 알려주었다.

방법을 모를 때는 완전 노가다를 해가며 육안찾기를 했었다.

substr() : 문자열에서 필요한 부분만을 가져오고자 할 때 사용하는 함수

substr(문자열, 시작위치, 길이);

  - 시작위치 : 0 부터 시작한다.

검색창에서 키워드를 넣고 검색을 하면 원하는 결과를 DB에서 가져와서 화면에 뿌려준다.

하지만 몇번의 과정을 거쳐서 원하는 결과를 얻다보니 좀 불편하다.

한번에 해결할 수 있는 방법을 찾기 위해서 자바스크립트로 만들어봤더니 된다.

아래에서 색깔 표시된 부분이 자바스크립트에서 어떻게 표시가 되는지 확인해보면 된다.

<form   name="bbssearchf" method="POST" action="" onsubmit="return fchk();">
<select name="where">
<option value="name"<?php if($where=='name'):?> selected="selected"<?php endif?>>이름</option>
<option value="nic"<?php if($where=='nic'):?> selected="selected"<?php endif?>>닉네임</option>
<option value="id"<?php if($where=='id'):?> selected="selected"<?php endif?>>아이디</option>
<option value="uid_extra"<?php if($where=='uid_extra'):?> selected="selected"<?php endif?>>UID확장</option>
</select>

<input type="text" name="keyword" size="30" value="<?php echo stripslashes($_keyword)?>" class="input" />
<input type="submit" value="검색" class="btngray" />
</form>

검색폼이 위처럼 되어 있다.

이중에서 uid 라고 되어 있는 걸 자바스크립트로 만들어서 자동으로 실행하는 걸 해보고 싶어서 해봤다.

<script language="javascript">
//<![CDATA[
// UID 확장검색 스크립트
function SelectedSearch(suid)
{
    var where, keyword, suid;
    document.bbssearchf.where.value='uid_extra';
    document.bbssearchf.keyword.value=suid;
    document.bbssearchf.submit();
}

function fchk()
{
    var f = document.bbssearchf.getElementById('keyword');
    if(!f.value || f.value.length<2) {
        alert('값이 없거나, 너무 짧습니다.');
        f.focus();
        return false;
    }
}
//]]>
</script>

이제 list.php 파일의 subject 에 아이콘을 만들고 누르면 해당 자바스크립트가 실행되도록 했다.

게시물 리스트에서
<a href="javascript:SelectedSearch('<?php echo $R['uid']?>')" title="UID 확장"><img src="/public/b_scrap.gif" class="imgpos2"></a>

이렇게 하면 검색 키워드를 넣고 검색해서 나오는 결과와 동일한 결과를 얻을 수 있다.

서버에 업로드한 파일을 읽어서 파일의 내용을 분석하여 화면에 뿌리는 방법을 테스트 해보려고 작성해본 거다.

보통 엑셀 파일을 VBA 로 내보내기를 하면 인코딩 모드가 euc-kr 모드로 되어 있다.

그래서 서버에 설정된 인코딩모드가 UTF-8 이면 파일의 인코딩 모드를 변경해줘야 한다.

한줄씩 읽어서 한줄내의 구분을 ; 로 하는데, line[0], line[1] 이런 식으로 배열로 받아들인다.

보통 DB에서 가져오면 배열 형태로 바로 화면에 출력하는데, 때로는 가공을 한 다음에 화면에 뿌리거나 다시 DB에 저장해야 할 때가 있다.

이때 가져온 필드를 배열로 만드는 함수가 array_push 이다.

<?php
echo "파일 연습";
echo "<br />";

$file=fopen("data.csv","r");
if(!$file){
    echo("Failed to open the file");
    exit;
} else {
    echo "파일이 정상적으로 열렸습니다";
    echo "<br />";

}

while($line = fgetcsv($file,1000, ";")) { // 구분자는 ; 로 지정, 한줄씩 라인끝까지 읽어라.

$line0 = iconv('euc-kr','utf-8',$line[0]); // euc_kr 자료를 utf-8 로 인코딩 모드 변환
$line1 = iconv('euc-kr','utf-8',$line[1]);
$line2 = iconv('euc-kr','utf-8',$line[2]);
$line3 = iconv('euc-kr','utf-8',$line[3]);
$line4 = iconv('euc-kr','utf-8',$line[4]);
$line5 = iconv('euc-kr','utf-8',$line[5]);
$line6 = iconv('euc-kr','utf-8',$line[6]);

$subject = addslashes(trim($line0));
$content = addslashes(trim($line1));
$category = trim($line2);
$line[3] = addslashes(trim($line3));
$line[4] = addslashes(trim($line4));
$line[5] = addslashes(trim($line5));
$line[6] = addslashes(trim($line6));

echo "제목 : ".$subject;
echo "<br />";
echo "내용 : ".$content;
echo "<br />";

$contentstr = explode("/", $content);
echo count($contentstr);
echo "<br />";
$content    = count($contentstr) ? trim($contentstr[0]) : $content;
$content1    = $contentstr[1] ? trim($contentstr[1]) : '';
$content2    = $contentstr[2] ? trim($contentstr[2]) : '';

echo "content = ".$content;
echo "<br />";
echo "content1 = ".$content1;
echo "<br />";
echo "content2 = ".$content2;
echo "<br />";

$search = array();
for( $i = 0; $i < 4; $i++ ) {
    array_push($search, $line[$i+3]);
    if (!$search[$i]) break;    // 값이 없으면 for 문을 빠져나가라
    echo $i." = ".$search[$i];
    echo "<br />";
}  // for 문 종료
    echo "0 = ".$search[0];
    echo "<br />";
    echo "1 = ".$search[1];
    echo "<br />";
    echo "2 = ".$search[2];
    echo "<br />";
    echo "3 = ".$search[3];
    echo "<br />";
    echo "4 = ".$search[4];
    echo "<br />";
    echo "5 = ".$search[5];
    echo "<br />";
    echo "6 = ".$search[6];
    echo "<br />";

}    // While 문 종료
fclose ($file);

?>

<? phpinfo();?>

홈페이지에 설치된 정보를 보기 위해서는 이 한줄만 있으면 된다.

정보를 알 수 있어 좋지만 노출되면 보안 문제가 발생할 수도 있다.

PHP 에서 폴더(디렉토리)내에 특정 파일만 지우는 걸 해야 할 일이 있어서

인터넷 검색하여 여러자료를 토대로 원하는 내용을 만들어서 테스트를 해보고 개념을 잡았다.

if($fileExt == 'csv') 에서 처리할 사항이 있어서 테스트 해봤는데 파일 다루는데 많은 도움이 되었다.

리눅스 명령어 `rm -rf 디렉토리명`;

리눅스 명령어 `rm -rf 파일명`;    // `는 키보드 상의 왼쪽 위 물결(~)키와 함께 있는 기호

을 PHP 코드에 넣어서 파일을 실행해보니 권한이 없는 것도 그냥 지워버린다.

파일의 소유권자가 root 인 경우에는 @chmod($_tempdfile,0707); 로 파일의 모드 변경을 시도해도 웹은 사용자이므로 권한 변경이 안된다.  Owner 를 apache 로 변경해줘야만 변경이 된다.

아래 코드에서 가장 핵심적인 사항은 unlink 는 파일을 지우는 함수인데, unlink(파일명) 이렇게 하면 안되고

unlink(경로+파일명) 으로 해야 지워진다.

파일을 읽어서 프로세스를 처리하고 나서 파일을 지울 때는 읽어드린 파일명과 경로를 포함해서 unlink 하면 바로 바로 지워지므로 서버에 불필요한 자료가 남지 않는다.

<?php
// 파일의 크기 구하기
foreach (glob("*.csv") as $filename) {
    echo "$filename size " . filesize($filename) . "\n";
    echo "<br />";
}
echo "<br />";

// 폴더내 파일 전부 구하기
echo "<br />";
$dir = './';
$files = scandir($dir);
 
foreach ($files as $ind_file) {
  if (is_file($ind_file)) {
    ?>
    <li><?php echo $ind_file;?> </li>
    <?php
  }
}


// 디렉토리에 있는 파일과 디렉토리의 갯수 구하기
$path = opendir("./"); // opendir 함수를 이용해서 현재 디렉토리의 핸들을 얻어옴

// readdir함수를 이용해서 현재 디렉토리에 있는 디렉토리와 파일들의 이름을 배열로 읽어들임
while($file=readdir($path)) {    
    if($file=="."||$file=="..") continue; // file명이 ".", ".." 이면 무시함
    $fileInfo = pathinfo($file);
    print_r($fileInfo);  // 파일 경로 정보가 어떻게 되는지 확인하기 위해 출력
    echo "<br />";
    $fileExt = $fileInfo['extension']; // 파일의 확장자를 구함

    if (empty($fileExt)){
        $dir_count++; // 파일에 확장자가 없으면 디렉토리로 판단하여 dir_count를 증가시킴
    } elseif($fileExt == 'csv') {
        $csv_count++;  // 파일 확장자가 CSV 이면 csv_count를 증가시킴
        $_tmpdfile = $path.$file;
        @chmod($_tempdfile,0707);    // 파일의 소유권이 있는 경우에만 권한변경
        $cmd = `rm -rf *.csv`;    // 파일의 소유권에 상관없이 파일 모두 삭제처리
        if(is_writable($_tmpdfile)) {
            unlink($_tmpdfile);
            echo "파일 삭제됨"."<br />";
        } else {
            echo "파일 쓰기(삭제) 권한 없음"."<br />";
        }
       
    } else {
        $file_count++;  // 파일에 확장자가 있으면 file_count를 증가시킴
    }

}
@closedir($path);

echo "<br />";
echo "subfolder 수는 : ".$dir_count."<br />";
echo "CSV 파일의 갯수는 : ".$csv_count."<br />";
echo "파일의 갯수는 : ".$file_count;
echo "<br />";

// 폴더내 파일 전부 구하기
echo "<br />";
$dir = './';
$files = scandir($dir);
 
foreach ($files as $ind_file) {
  if (is_file($ind_file)) {
    ?>
    <li><?php echo $ind_file;?></li>
    <?php
  }
}

?>

인터넷 검색해서 겨우 겨우 제대로 된 방법을 알아냈다. 인터넷의 좋은 점은 자료가 널려 있다는 것이고 단점은 제대로 된 자료를 찾기가 정말 어렵다는 점이다.

나는 인터넷에서 찾아낸 것을 테스트를 해서 결과를 확인해보고 정리를 하는 편이다.

에러 메시지 출력을 검사할 때는 반드시 잘 동작하는 파일을 기준으로 검사를 먼저 해본 다음에 에러가 발생하는 파일에 적용하는 것이 필요하다.

홈페이지 계정 root 폴더에 존재하는 .htaccess 에 하단 내용을 추가하면 에러메시지가 화면에 출력됨

# vi .htaccess 한 다음에 아래 2줄을 넣어줌.

form post 로 값을 넘긴 특정한 파일만 검색하는 경우에는 아래 자바스크립트를 넣어서 코드 한줄 한줄 찍어가면서 분석한다. 왜냐하면 form post 로 넘기면 값을 확인하기가 쉽지 않기 때문이다.
echo "<script>alert('$content')</script>";

찍어보고 싶은 변수를 지정하면서 값이 넘어오는지 넘어오지 않는지 확인한다.

코드가 간단한 경우에는 크롬브라우저 개발자 모드로 확인하면 헤더정보, Response 정보 등을 확인할 수 있는데 이런 걸로 분석이 어렵게 만들어진 프레임웍이 있을 수도 있기 때문이다.

코드를 공통 함수에 넣어서 사용한다면 아래처럼 해당 파일에 한줄 넣어주면 된다.

include_once $g['path_core'].'function/string.func.php';

// PHP 디버깅시 사용할 함수
function Err($str)
{
    echo("<script> alert('".$str."');</script>");
}

자바스크립트에서 사용되는 API 이다.

Selector API를 이용해 DOM 트리로부터 HTML DOM 객체를 가져오기 위해서는 자바스크립트 코드 실행이 HTML  문서가 파싱된 다음 실행되어야 함
HTML 문서가 파싱되기 전에 자바스크립트 코드가 실행되면 Selector API로 HTML DOM 객체를 DOM Tree 에서 찾지 못함

자바스크립트 코드가 HTML 파싱이 완료된 다음 실행되게 하기 위해서는 ....
1. 자바스크립트 코드를 외부 파일로 작성했을 경우 defer 속성을 부여함
   <script src="xxx.js" defer></script>
2. HTML 문서 본문의 맨 아래 <script>코드를 이용하여 자바스크립트 코드를 작성함
3. <script>요소를 이용해 자바스크립트 코드를 <head>요소에 포함시킬 수 있는데
   onload 이벤트를 이용하여 페이지가 로드된 다음 자바스크립트 코드가 실행되도록 함

PHP 에서 검색어를 여러개 입력하여 AND 조건이나 OR 조건을 검색해야 하는 경우가 있다.

검색어가 여러개면 보통 이렇게 검색어 처리를 하기 쉽다.

$keystr = explode(" ", $keyword);

$sqlque .= " and (eng LIKE '%".trim($keystr[0])."%')";

이걸 좀더 깔끔하기 처리하는 방법은 아래처럼 array 와 join 함수를 이용하는 것이다.

$keystr = explode(" ", $keyword);
$exp_query = array();
for ($i = 0; $i < count($keystr) ; $i++) {
    array_push($exp_query, "eng LIKE '%".$keystr[$i]."%'" );
}
if(count($exp_query) > 0){
    $sqlque .= " and ( ";
    $sqlque .= join(" and ", $exp_query);
    $sqlque .= " ) ";
}
echo $sqlque; // 쿼리문이 정상인지 확인

KIMSQ RB
list01 게시판 테마로 예를 들어..

jQuery 는 DOM과 관련된 처리, 일관된 이벤트 연결, 애니메이션(시각적효과), AJAX Application 개발 등을 손쉽게 할 수 있는 강력한 기능을 가진 일종의 자바스크립트 라이브러리다. 즉, jQuery는 크로스브라우징(모든 브라우저에서 동작하는) 클라이언트 사이드의 자바스크립트 라이브러리이다.

jQuery는 사용법이 간단하고, 코딩이 직관적이며, 성능도 뛰어나다.

DOM(Document Object Model)은 웹문서에서 HTML의 문서 요소를 제어하기 위한 문법적인 구조로 W3C에서는 DOM의 표준 규격을 제시했다.
- DOM은 document(문서), object(객체), model(모델)을 의미하는 용어로서 문서는 HTML을 의미한다.
- 객체는 자바스크립트에서 HTML문서전체에 존재하는 요소들을 객체로 인식한다는 의미이다.
- 이 객체는 DOM형식에 있어 노드(node)라는 개념으로 전환되며 element, text, attribute등의 노드가 존재하게 된다
- Text node
  . HTML 웹 문서의 실제 내용을 의미하게 된다.
  . TEXT node는 반드시 element node 안에 포함되어 있어야 한다.
    그러나 TEXT node가 element node 를 포함하거나 attribute node를 소유할 수는 없다.
- Attribute node
  . 모든 attribute node는 <html> 태그 내에 포함 된다.
  . attribute node는 (속성,값)의 한쌍으로 표현된다.
  . attribute node는 element node 안에 포함되며, element node 를 포함 시킬 수 없다
- javascript코드는 노드에 접근하기 위해 getElementById, getElementByTagName등의 메소드를 이용한다.
  . getElementById : 특정 아이디를 가지고 있는 태그에 접근한다.
  . getElementByTagName : 특정 태그에 접근한다
  . getAttribute : 원하는 태그의 속성을 가져온다
  . setAttribute : 원하는 태그의 속성의 값을 설정한다.

jQuery 에는 자바스크립트에서 볼 수 없는 다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다.

var h1 = document.getElementById("hello");

를 jQuery 로 하면

var h1 = $("#hello");

로 간단해진다.

A $ sign to define/access jQuery

A (selector) to "query (or find)" HTML elements

A jQuery action() to be performed on the element(s)

jQuery 를 사용하는 방법은

1. 라이브러리 파일을 다운로드 받아서 직접 연결하여 사용하는 방법

2. CDN을 이용하는 방법

    http://code.jquery.com/jquery-latest.js 를 사용하면 가장 최신 버전으로 자동 연결된다.

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    구글 CDN 이용 방법

$(selector).action(function() { 소스코드} );  // 내가 원하는 다른 명령을 넣어 함수를 고치고 싶을 때

$(document).ready(function() {
   $("#myclick").click(function() {
      $("myclick").html("눌렀어요");
   });
});

브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 한다.

이벤트가 발생했을 때 자바스크립트/jQuery 실행문을 실행하는 것을 이벤트 핸들러라고 한다.

이벤트는 마우스 이벤트, 키보드 이벤트, 기타 이벤트로 구분할 수 있다.

선택자에 document 가 오면 html 문서 전체가 선택된다.

자바스크립트 또는 jQuery 의 위치가 <head> </head> 사이에 위치한다.

jQuery 는 인터프리터 언어이기 때문에 jQuery가 먼저 실행되고 난 후 <body> 영역에 문서 객체가 로딩된다.

이렇게 되면 선택자가 먼저 실행되어 문서 객체를 선택할 수 없다.

<body> 객체 영역에 문서 객체가 먼저 로딩된 후 jQuery 선택자가 선택되게 하려고 $(document).ready(function(){ 코드 } 또는 간략하게 $(function(){ 코드} 방법을 사용한다.

id 선택자가 #myclick 인 a 엘리먼트가 사용자에 의해 클릭되었을 때 실행된다.

클릭이 되면 $("myclick").html("눌렀어요"); 를 통해서 a 엘리먼트의 내용을 "눌렀어요"로 바꾸게 된다.

.attr()은 attribute 정보를 가져오고,
.prop()는 property 정보를 가져온다.

attrubute는 HTML Element 의 속성들을 의미하며
property는 자바스크립트의 프로퍼티를 의미한다.

$("#menu li") 는 #menu 안에 있는 모든(child & descendant) li를 가리키고
$("#menu > li") 는 #menu 바로 아래의 li만 가리킨다. 즉 $("parent > child") 관계에 해당되는 li 가 5개라면 5개가 해당되고 자손(descendant) 요소는 해당되지 않는다.

※ $("기준요소 > 자식요소") ← 선택한 기준 요소를 기준으로 자식(child) 관계에 지정한 요소만 선택한다.

    $("기준요소    하위요소")  ← 선택한 기준요소를 기준으로 자식(child), 자손(descendant) 해당되는 요소를 선택한다.

$("div + p").css("background-color", "#82fcc1");

의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 바로 다음에 나오는 태그만 배경색을 변경하라.

$("div ~ p").css("background-color", "#82defc");

의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 태그 이후에 나오는 모든 태그의 배경색을 변경하라.

          div 태그 이전에 나오는 p 태그는 해당되지 않는다.

          div 태그의 child, descendant 태그는 해당되지 않는다.

$("[attribute]") : [attribute(속성)] selector는 각 selector의 특정 속성을 선택한다.
- [attribute=value] : 특정 속성과 값을 가진 각 element를 선택한다.
- [attribute!=value] : 특정 속성과 속성 값을 안 가진 element를 선택한다.
- [attribute$=value] : 특정 문자값으로 끝나는 selector를 선택한다.
- [attribute|=value] : 특정문자로 시작하는 속성과 속성 값을 설정한다.
- [attribute^=value] : 특정 속성이 특정 속성 값으로 시작하는 값을 갖는 selector을 설정한다.
- [attribute~=value] : 특정 속성이 특정 속성 값을 포함하는 selector를 설정한다.
- [attribute*=value] : 특정 속성이 특정 값의 일부분(문자열)을 포함하는 selector를 선택한다.

<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "http"로 시작하는 <a> 태그를 선택
$("li a[href^='http']").css({color:"#f90"});

<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "com/"으로 끝나는 <a> 태그를 선택
$("li a[href$='com/']").css({color:"#f90"});

<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "5"가 포함되어 있는 <a> 태그를 선택
$("[href*='5']").css({color:"#f90"});

<img> 태그의 src 속성이 "images/sample1.jpg"와 일치하지 않는 이미지 태그를 선택
$("img[src='images/sample1.jpg']").css({border:"1px solid #f90"});
$("img[src!='images/sample1.jpg']").css({border:"1px solid #f90"});

<li> 태그 안에 있는 <a> 태그의 class 속성이 있는 모든 태그를 선택
$("li a[class]").css({color:"#f90"});

보다 상세한 Selector 속성은 https://www.w3schools.com/jquery/jquery_ref_selectors.asp 참조

// 스크롤 따라다니는 박스 div jquery
var currentPosition = parseInt($("#sidebox").css("top"));
$(window).scroll(function() {
       var position = $(window).scrollTop();
       $("#sidebox").stop().animate({"top":position+currentPosition+"px"},1000);
});

// 롤오버(rollover) 이미지

<script type="text/javascript">
    $(function() {
        $("img[src='images/aaa.jpg']").hover(function() {           
            $(this).attr("src", "images/aaa_on.jpg"); // 변경할 이미지
        }, function() {
            $(this).attr("src", "images/aaa.jpg");  // 원래 이미지
        });

        $("img[src='images/bbb.jpg']").hover(function() {
            $(this).attr("src", "images/bbb_on.jpg");
        }, function() {
            $(this).attr("src", "images/bbb.jpg");
        });

    });
</script>

<script type="text/javascript">
    $(function() {
        // :eq(n)은 특정 셀렉터가 여러개의 복수 요소를 지정할 경우
        $("#box > input:eq(0)").click(function() { //첫 번째 input 버튼을 누른 경우
            $("#box > div").toggle(300);  // slideToggle(300); fadeToggle(300);
        });

        $("#box > input:eq(1)").click(function() {
            $("#box > div").show(200);  // slideDown(200); fadeIn(200);
        });

        $("#box > input:eq(2)").click(function() {
            $("#box > div").hide(200);  // slideUp(200); fadeOut(200);
        });

    });
</script>

도움될 사이트 : http://hellogk.tistory.com/

HTM5 에서 음악 재생하는 걸 해봤다.

서버에 올리고 테스트를 해봤는데 모양은 볼품없지만 소리는 잘 나온다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 audio play</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/><!-- 스마트폰에서 글자 크기가 줄어들지 않고 나오게 하는 명령어 -->

<script type="text/javascript">
function $(id) { return document.getElementById(id); }
var audio = new Audio("test.mp3");
audio.addEventListener("timeupdate", function(e) {
    $("info").innerHTML = audio.currentTime + "/" + audio.duration;
});
// 볼륨 조절
function changeVolume(v) {
    var new_v = audio.volume + v;
    if (0 <= new_v && new_v <= 1.0) {
        audio.volume = new_v;       
    }
}
</script>
</head>
<body>
<h3>HTML5 음악재생</h3>
<div id="info"></div>
<div id="player_div">
    <input type="button" value="재생" onclick="audio.play()" />
    <input type="button" value="정지" onclick="audio.pause()" />
    <input type="button" value="처음부터" onclick="audio.currentTime=0;audio.play()" /><br />
    <input type="button" value="소리작게" onclick="changeVolume(-0.2)" />
    <input type="button" value="소리크게" onclick="changeVolume(0.2)" />
</div>
</body>
</html>

이클립스를 사용하여 코드를 타이핑하면서 연습해보자.

자바스크립용으로 파일을 생성시켜 봤더니 아래 화면이 default 로 나온다.

이제 실제로 코드를 한번 연습해보자.

Ctrl + Spacebar 만 눌러도 자동완성 시킬 내용이 나온다.

이 부분이 엄청 편해서 코딩하는 실수를 상당히 줄이면서 가능할 수도 있겠다 싶다.

1. ID 선택자

ID 선택자(Selector)는 페이지 안에서 하나 밖에 없는 고유한 엘리먼트를 나타내기 위해 사용한다.

ㅇ 앞에 #을 붙이고 영문으로 시작하는 이름을 부여한다.

ㅇ 같은 페이지 내에 한번만 적용하는 것이 원칙이다.

ㅇ 자바 스크립트 프로그램에서 값을 얻거나 수정할 때 사용하기도 한다.

ㅇ 다른 페이지와 중복해서 사용할 수 있다.

반면에, 클래스 Selctor 는 고유한 것이 아니기 때문에

한 문서내에서건, 전체 페이지에서건 어느 오브젝트에나 광범위하게 다 적용할 수 있다.

CSS : 본문 <body> 가 시작되기 전에 설렉터( Selector )로써 미리 정의한다.
  2-1) 전역 셀렉터   : 모든 요소, 즉 모든 태그에 필요하다면 적용 가능
  2-2) 클래스 셀렉터 : 특정 태그에 적용
  2-3) ID 셀렉터     : ID셀렉터는 특정부위에 예외 처리를 할 때 사용한다.

2. Position : 태그들의 위치를 결정하는 CSS

- top : 요소의 position 기준에 맞는 '위쪽'에서의 거리(위치)를 설정

- bottom : 요소의 position 기준에 맞는 '아래쪽'에서의 거리(위치)를 설정

- left :

- right :

3. z-index : position 적용된 요소에만 작동하며, 숫자가 높을수록 앞으로 배치된다. 기본값은 0이다.

4. display 프로퍼티

5. float : 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성이다.

float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 된다.
사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용한다.

- inherit : 부모 요소에서 상속
- left    : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
- right   : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.
- none    : 요소를 부유시키지 않음

- clear:none   기본값으로 clear를 설정하지 않은 것과 같다.
- clear:left     float:left 를 취소한다
- clear:right   float:right 를 취소한다
- clear:both   왼쪽 오른쪽을 취소한다.

6. overflow : 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성

7. box-sizing : 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

- content-box : 콘텐트 영역을 기준으로 크기를 정한다.
- border-box : 테두리를 기준으로 크기를 정한다.
- initial : 기본값으로 설정한다.
- inherit : 부모 요소의 속성값을 상속받는다.

아래 코드는 내 웹사이트 직접 구현된 코드의 일부이다.

<script language="javascript">
//<![CDATA[
function SelectedCategory(relateduid,uid)
{
    if (relateduid == 0)
    {
        document.bbssearchf.cat1.value=uid;
        document.bbssearchf.cat2.value='';
    }
    else {
        document.bbssearchf.cat1.value=relateduid;
        document.bbssearchf.cat2.value=uid;
    }
    document.bbssearchf.submit();
}

//]]>
</script>

//<![CDATA[ 는 유효성 검사 오류를 막기 위해서 선언

비교 연산자

이번에는 화면에 출력하는 코드로 작성을 했다.

줄바꿈 document.write("<br />"); 을 넣어줘야 다음 줄에 표기기 된다.

이클립스를 실행하고 나서 이제 사용을 제대로 하기 위한 환경설정을 해줘야 한다.

설치를 하고 나면 기본 encoding 모드가 UTF-8 로 설정되어 있지 않다.

따라서 encoding 모드를 UTF-8 로 변경해줘야 한다.

이클립스 바탕화면부터 깔끔하게 정리를 해줬다.

Windows -> Proferences 를 선택한다.

순서대로 Text file encoding 모드를 UTF-8 로 변경해준다.

이제 작업할 Web 으로 메뉴를 변경하여 마찬가지로 UTF-8 로 전부 변경해준다.

CSS Files, HTML files, JSP files 전부 다....

화면에 보이는 글꼴이 default 가 10 이라서 좀 작아서 더 큰 글씨로 변경을 했다.

이제 Web 브라우저를 설정한다.

크롬 브라우저의 실행경로를 설정한다.

Eclipse 밖에서 Browser 를 띄우기 위해 Use external web Browser를 선택한다.

이제 Web Project 생성 및 배포를 해보자.

로컬(내 컴퓨터) 상에서 작업할 환경 설정 작업은 끝났다.

서버와 통신을 하기 위한 것은 다음에 하련다. Tomcat 은 아직 한번도 다뤄본 적이 없으니까 ....

Java 개발 환경 구축을 위해서 이클립스를 설치해야 한다.

Android 앱 개발을 하고 싶다면 Android Studio 를 설치한다.

그동안 EditPlus 만 사용해는데, 이클립스를 설치하면 HTML5, CSS, 자바스크립트를 다루기가 훨씬 편리하다는 걸 교육 받으면서 배웠다.

1. JDK 다운로드 및 설치

    JDK 파일 다운로드 부분은 2020.9.17일 Update 했음

    https://www.oracle.com/kr/java/technologies/javase/javase-jdk8-downloads.html 에서 다운로드한다.

    다음 번호 순서대로 따라서 하기만 하면 설치가 가능하다.

다운로드가 완료되었다면 다운로드 받은 파일을 더블 클릭하여 실행한다.

위에 다운로드 받은 버전과 아래 그림 이미지의 버전은 다르지만 거의 동일할 것이다.

JDK는 설치가 완료되었다.

이번에는 JDK 환경설정 하는 방법이다.

먼저, 내컴퓨터에서 마우스 우클릭을 한다.

내컴퓨터를 찾지 못하는 경우에는 키보드 자판에서 Ctrl 키 옆에 있는 윈도우 모양 + E 키를 누른다.

다음에는 컴퓨터에서 마우스 우클릭을 한 후 속성을 누른다.

해당 폴더로 찾아가서 경로명까지 찾아들어간 후에 마우스 우클릭을 하여 주소를 복사한다.

주소를 붙여넣기를 한 후 마지막에 ; 를 붙여준다.

확인을 눌러서 저장하면 환경설정이 끝난다.

Java 를 공부할 분은 eclipse 툴을 설치하면 되고, 안드로이드 앱 개발을 하고 싶으면 Android Studio 를 설치하면 된다.

2. eclipse 설치

   http://www.eclipse.org/downloads/ 에 접속한다.

다운로드 받은 파일을 내 컴퓨터의 적당한 폴더에 압축을 푼다.

C 드라이브에 Workspace 라는 폴더를 만들고 eclipse 압축을 풀었다.

이제 실행파일을 실행한다.

어떤 폴더에 설치할 것인지 문의하길래 Workspace 폴더 밑에 workspace 폴더를 만들고 나서 작업공간을 변경해줬다.

이클립스(eclipse) 화면이 구동되었다.

이용을 위한 준비는 되었다.

이제 환경 설정을 해줘야 한다.

자바스크립트 기초

morden Javacript 변수 선언

let : 변수 (변수를 선언 할 때에는 let 이라는 키워드를 사용)

   let value = 1;

   let value = 2;

   ※ 한번 선언했으면 똑같은 이름으로 선언하지 못한다.

const : 상수 (한번 선언하고 값이 바뀌지 않는 값)

ㅇ 변수(Variable)
   - 변수는 변화하는 값을 저장하는 공간이다. 변수는 한번에 1개의 데이터만 저장 가능하다.
   - 변수의 선언은 변수만 선언하고 값을 할당하지 않거나, 값을 할당하기도 한다.
     var temp;  // morden Javascript 에서는 더 이상 var 변수를 사용하지 않는다.
     var temp, i, data;
     var temp = 10;

  - 변수명은
     대문자 Temp 로 작성했으면 출력하거나 다른 곳에서 이용할 때 temp 라고 하면 에러가 발생한다.
     변수명은 반드시 영문자, 숫자, _(underbar, underscore) 로만 사용해야 하며, 공백문자는 포함할 수 없다.
     키워드를 사용할 수 없고, 변수 이름의 길이에는 제한이 없다.

     첫글자가 숫자로 시작할 수 없다.

     !, #, ?, $, @ 등과 같은 특수문자는 올 수 없다.

     자바스크립트 문법 안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.

   - 자바스크립트 데이터 타입(변수에 저장 가능한 데이터)
     숫자형 데이터, 문자형 데이터, 논리형(boolean)형 데이터, 널(Null)형 데이터 이다.
     변수형을 선언할 때에는 숫자형, 문자형 등을 구분하지 않는다.
     숫자형 변수는 정수, 실수 구분이 없다.
     문자열 변수는 작은 따옴표 나 큰 따옴표로 감싸야 한다.
     status = "My computer is working."
     document.write(status);

ㅇ 참, 거짓 판별

   - 자바스크립트에서는 소문자로 true 와 false 를 판별한다.

     TRUE는 '정의되지 않음' 오류가 발생한다.

     즉, 불린(boolen) 타입 : true/false

   - 참인지 거짓인지 확인할 때

     거짓으로 평가되는 false 문자열 자체와 0, -0, 빈 문자열, null, 비정의, NaN 을 제외하고는

     모든 값은 참으로 간주한다.

      즉, 비교결과가 0, null, 빈문자열(""), false, undefined, NaN 으로 판단되면 false 다.
     if(1 == true) document.write('true') // 참

ㅇ 자료형 확인 : typeof 연산자를 이용
     - 언제든지 type of 연산자를 이용해 변수의 형식을 확인할 수 있다.
     - 변수를 var n 으로 선언했다면, type of n 으로 확인한다.
   <script>
     alert(typeof('String')); //String
     alert(typeof(123)); //Number
     alert(typeof(true)); //Boolean
     alert(typeof(function(){})); //Function
     alert(typeof({})); //Object
     alert(typeof(abc)); // undefined : 아직 값이 설정되지 않는 것을 의미
       // 변수를 선언했지만 초기화를 하지 않았을 경우에도 undefined 출력된다
   </script>

ㅇ 이용문법
   - \n : 줄바꿈
   - 문자열 연결은 + 를 사용한다.
     '이런'+'식으로도'+' '+'출력 가능'
     PHP 에서는 마침표(.)로 문자열을 연결한다.
   - \t : Tab
   - \' : 작은 따옴표
   - \" : 큰 따옴표
   - \\ : 역슬레쉬(\)
   - %  : 나머지 연산자, alert(5 % 3);
   - 변수 : 값을 저장할 때 사용하는 식별자, 변수선언 var 식별자;

ㅇ 연산처리

   - 자바스크립트의 연산자는 수식의 왼쪽에서 오른쪽으로 처리된다.

   - || 연산자는 첫번째 피연산자가 참(true) 이면, 두번째 피연산자는 실행되지 않는다.

     의도하지 않는 문제가 발생할지 잘 확인해야 한다.

   - 다중 대입(a = b = c = 5) 은 가장 오른쪽이 먼저  실행되고, 오른쪽에서 왼쪽으로 계속 처리된다.

ㅇ 객체(object)

    - 자바스크립트는 객체지향언어는 아니지만, 객체를 사용하기 때문에 객체(object) 기반 언어라고 한다.

      객체는 속성(property)과 methods 를 가진다.

    - 자바스크립트의 객체는 내장 객체, BOM(브라우저 객체 모델), DOM(문서 객체 모델)로 나눌 수 있다.

    - 내장 객체를 생성할 때는 new 라는 키워드와 생성함수를 사용한다. (ex, var 참조변수=new Date();)

      내장 객체인 경우는 자체 자바스크립트 문법에서 정의된 속성과 메소드를 알아야 한다.

    - 객체 생성할 때 생성자 함수가 필요없는 객체 : Math Object, Number Object, String Object, RegExp Object

    - parseInt("20.5px") + 30 = 50

    - parseFloat("20.5px") + 30 = 50.5

    - function으로 정의된 생성자 함수의 객체의 정의는 new를 이용한다.
    - 생성자함수 안에는 this라는 용어를 이용해 정의한다.

ㅇ 객체배열은 http://link2me.tistory.com/1458 참조

ㅇ 윈도우 객체

    window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.

window.속성
window.속성 = 값  // window.status="환영합니다."
window.메소드()  // window.open();

window.메소드(인자 값)
--- window 객체의 속성 ---
- status : 상태 표시줄에 표시할 문자열 지정
- window : 창 자신을 가리킴
- frames : 창에 포함된 프레임을 배열 형태로 지정
- opener : open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴
- parent : 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴
- self   : 현재 작업 중인 창, 즉 자기자신을 가리킴
- top    : 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음
- screenX : 창의 x 좌표 반환
- screenY : 창의 y 좌표 반환
- closed  : 창이 닫혀 있는지 확인한 후 true, false 반환
- name    : 창 이름 반환

window 객체 메서드
- alert() : 경고용 대화상자를 띄워줍니다.
- confirm() : 확인, 취소를 선택할 수 있는 대화상자를 띄워줍니다.
- open() : 새로운 창을 오픈합니다.
- prompt() : 입력창이 있는 대화상자를 띄워줍니다.
- setTimeout() : 일정 간격으로 함수를 호출하여 수행합니다. (Millisecond 단위)
- clearTimeout() : setTimeout 메소드를 정지합니다.
- eval() : 문자열을 숫자로 변환합니다.
- toString() : 오브젝트를 문자열로 변환합니다.
- blur() : focus가 다른 객체로 이동합니다.
- focus() : focus를 지정합니다.
- scroll() : 창을 스크롤 합니다.
- valueOf() : 오브젝트 값을 반환합니다.
- back() : 한 단계 전 URL(이전화면)로 돌아갑니다. (IE 지원 불가)
- find() : 창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false를 반홥합니다. (IE 지원 불가)
- forward() : 한 단계 뒤의 URL(다음화면)로 이동랍니다. (IE 지원 불가)
- home() : 초기화 홈페이지로 이동합니다. (IE 지원 불가)
- moveby() : 창을 상대적인 좌표로 이동합니다. 수평방향과 수직방향의 이동량을 픽셀로 지정합니다.
- moveto() : 창을 절대적인 좌표로 이동합니다 . 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정합니다.
- resizeby() : 창의 크기를 상대적인 좌표로 재설정합니다 . 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정합니다.
- resizeto() : 창의 크기를 절대적인 좌표로 재설정합니다 . 창 크기를 픽셀로 지정합니다.
- scrollby() : 창을 상대적인 좌표로 스크롤합니다. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정합니다.
- scrollto() : 창을 절대적인 좌표를 스크롤합니다. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정합니다.
- stop() : 불러오기를 중지합니다. (IE 지원 불가)
- captureEvents() : 모든 타입의 이벤트를 판단합니다.
- setInterval() : 일정시간마다 지정된 처리를 반복합니다.
- clearInterval() : setInterval 메소드의 정지합니다.
- print() : 화면에 있는 내용을 프린터로 출력합니다.
- handleEvent() : 이벤트 취급자를 정합니다.
- releaseEvent() : 다른 계층의 이벤트로 이벤트를 넘깁니다.
- routeEvent() : 판단한 이벤트와 같은 계층의 이벤트입니다.
- toSource() : 오브젝트값을 문자열로 반환합니다.

window 객체 이벤트 핸들러
- onLoad : 문서를 읽을 때 발생합니다.
- onUnload : 현재 문서를 지울려고 할 때 합니다.
- onBlur : 브라우저가 포커스를 잃을 때 발생합니다.
- onFocus : 브라우저에 포커스를 얻을 때 발생합니다.
- onDragDrop : 사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생합니다. (IE 지원 불가)
- onError : 문서를 읽는 중에 에러가 생길 때 발생합니다.
- onMove : 브라우저의 위치를 변경했을 때 합니다. (IE 지원 불가)
- onResize : 창의 크기를 변경했을 때 합니다. (IE 지원 불가)

ㅇ Documents 객체

    브라우저의 내장 객체 중 window객체의 바로 하위에 존재하는 객체.
    - windows.document.~ 으로 표현하는 것이 정상이지만 보통은 window를 생략한다.

ㅇ history 객체

    브라우저 기록에 대한 정보를 가지고 있는 객체이다.

    - length    : 히스토리에 있는 URL의 개수
    - back()    : 히스토리 리스트에서 한 단계 뒤로 이동
    - forward() : 히스토리 리스트에서 한 단계 앞으로 이동
    - go()      : 히스토리 리스트에서 원하는 위치로 이동

<form>
  <input TYPE="button" value="이전으로"  onClick="history.back()">
  <input TYPE="button" value="다음으로"  onClick="history.forward()">
  <input TYPE="button" value="두단계 전으로"  onClick="history.go(-2)">
  <input TYPE="button" value="두단계 앞으로"  onClick="history.go(2)">
</form>

ㅇ location 객체
   현재 문서에 대한 정보를 가지고 있다.