테이블 폭 제약에 따라 긴 본문이 두줄에 걸쳐 출력되었는데 아래와 같은 현상이 발견되었다.

원문

발생현상

 해당 부분은 특정 컴퓨터의 특정 브라우저 ( Chrome 43.0 / IE 11 ) 에서 드물게 발생하였는데 아래와 같이 해결하였다


JSP

JSP 결과 페이지가 XML일때 브라우저 상에서 제목과 같은 메시지를 자주 보게 된다.

이는 XML 윗부분에 whitespace가 추가되었기 때문에 발생한다.

 

위와 같은 코드는 newline 이 발생되며, 아래와 같이 제거할 수 있다.

 

보다 근본적인 해결책은 실제 view 로 접근하는 jsp 파일의 최상단에 아래의 코드를 삽입하면 된다.

 

이렇게 하는 경우 해당 페이지에서 발생하는 모든 whitespace를 제거해준다.

REST (REpresentational State Transfer)


URI 관리

  • 명사는 동사로
  • URI는 되도록 짧게 유지
  • suffix로 출력 형식을 지정하기도 한다. (예 : /search.xml?q=test )


참고자료


css 설정에서 해당 tag의 list-style-position 속성이 inside 로 되어 있는지 확인한다.


(ex) dl,ul,ol,menu,li { list-style-position:inside; }

역시 세상에 쉬운일이 별로 없다고
2.0이 설치된 곳에 overwrite 만 해서는 되질 않는다.
이번 글에서는 변경된 부분에 대해서만 설명하고자 한다.
 - 참조 : 2.0설치 관련 글(http://goo.gl/a1jAg) , Syntax Highlighter (http://goo.gl/wF2u)


추가해야 할 코드

  • <textarea> 를 사용한 경우 script 기술했던 부분에 아래의 코드를 추가한다.
  • Scroll bar 없애기 : 본인이 주로 사용하는 chrome 에서는 모든 창에 vertical scroll bar 가 등장하였고, 세로로 넘어가는 녀석에 대해서는 horizental scroll bar님도 등장하셨다. 아주 보기가 싫어서 shCore.css 부분을 손을 보았다. 차후에 코드 길이가 긴 녀석의 경우 깨질수도 있으니 주의를 요한다.
    • 수정부분은 ".syntaxhighlighter" 녀석의 overflow 속성이다. 이를 auto -> hidden으로 바꾸었다.

SH가 3.0으로 버전업되면서 맘에 든 점 2가지

  1. 소스코드를 드래그 할때 라인번호가 포함되지 않는 소스 고유영역만 선택이 된다.
  2. 테마의 색상부분을 분리하여서 수정하기가 용이하다.
2.0 쓰면서 가장 아쉬웠던 부분이 이번에 멋지게 개선되어 돌아왔다. 테마도 내가 주로 사용하는 vim 의 elflord 색상과 유사하게 바꿨더니 코드 내용들이 전보다 더 친숙해 보인다. 

첨부된 파일은 스크롤바 제거가 추가된 scCore.css파일과 개인적으로 변경한 theme css 파일이다.


Style Test용 Sample code



formid, queryid 는 각자 해당 <form> 및 focus할 <input>의 name이다.



해당 input 창에는 아래와 같이 넣는다.

  • <%@ XXXX %> : 페이지 설정이나 파일을 include하는 등의 지시자 태그.
    • <%@ page language = "java" contentType="text/html; charset=utf-8" %>
    • <%@ page pageEncoding = "utf-8" %>
    • <%@ page import="org.json.simple.*" %>
    • <%@ include file="JsonSenderCore.jsp" %>

  • <%! XXXX %> : JSP 선언부. 클래스나 함수를 정의할때 쓰인다
    • <%! 
      public String getKey(int i) {
          return 3;
      }

  • <% %>: 일반적인 jsp 코드 시작부분

  • <%= 변수 %> : 해당 변수의 값을 출력하는 부분

  • <%-- 주석 --%> : 주석

  • 테이블에 걸어주는 스타일 : style="table-layout:fixed;"
  • td 에 걸어주는 스타일 : style="word-break:break-all;"
  • 텍스트가 테이블을 뛰쳐나가는 것을 막아준다.
  • 테이블의 height이 고정된 경우 고정길이까지만 보여주는데 이를 방지하기 위한 옵션 : height="auto"


JSP 소스와 같은 경로내의 파일을 읽어오려고 할때 ./ 를 쓰고 싶지만
그럴때마다 No such file or directory 에러를 만난다. 

아래는 경로를 받아오는 방법이다. 
(설정에서 Context 패스를 ROOT/test 로 정해져 있다고 가정한다.)
  • 절대경로 : pageContext.getServletContext().getRealPath("/")
    • (ex) /home/dohyun.yun/tomcat/webapps/ROOT/test/
  • URL : request.getRequestURL()
    • (ex) http://dohyun.yun.net/test/test.jsp
  • Context Path : 현재경로의 context path를 출력한다. request.getContextPath()
  • URI : request.getRequestURI()
    • (ex) /test/test.jsp
  • Servlet path : context path 가 고려된다.
    • (ex) /test.jsp
  • 현재 파일명 : this.getClass().getSimpleName().replaceAll("_", ".") 
    • (ex) test.jsp
    • 주의 : 영문기호가 아닌경우 숫자로 변할 수 있으니 주의할 것.


여러 블로그를 돌아다니면서 소스코드를 보다가, 좋은 툴을 보게되어 소개해본다.

Syntax Highlighter는 소스를 좀 더 보기 편하게 하기 위해 사용하는 것으로, 아마 소스를 찾기위해 이곳저곳을 돌아다닌 사람들은 한번쯤은 보지 않았을까 싶다. 바로 아래와 같이 말이다.






Installation
----------------------------------------------------------------------------------------

아래의 링크를 통해 파일을 받아 압축을 풀면 scripts 와 styles 폴더가 보일 것이다.

Syntax Highlighter site : SyntaxHighlighter

Tistory 의 자기 블로그 관리 페이지로 들어가서 스킨 -> HTML/CSS 편집 으로 이동한다.

파일 업로드 탭을 눌러서 좀전에 받아놓은 scripts와 styles 폴더내에 있는 모든 파일을 업로드 한다.

업로드가 완료되면 HTML/CSS편집 탭으로 이동하여 skin.html 을 수정한다.
</head> 태그 바로 위에 아래의 코드를 삽입한다.





pre는 여러가지 범용 소스를 붙여넣다보면 사용하기 불편하다. 이런경우
textarea 태그를 사용하면 되는데, textarea 태그를 이용하여 syntax highlighter 를 적용시키려면

관리자 메뉴 -> 스킨 -> HTML/CSS 편집에서 skin.html의 <body> 태크에 OnLoad값을 아래와 같이 넣어야 한다.
 <body Onload="dp.SyntaxHighlighter.HighlightAll('code');">



Simple Usage of SyntaxHighlighter
----------------------------------------------------------------------------------------

Pre 태그로 소스 붙이기 (html 코드 넣기)
   - brush: 뒤에는 사용할 하이라이터 종류를 넣는다. js 는 java script 를 의미한다. 여러가지 alias 종류를
     참조하려면 위의 SyntaxHighlighter 사이트에 들어가면 된다.
<pre class="brush: js">

alert("Hello World");

</pre>


textarea 태그로 소스 붙이기 (c++ 코드 넣기)  
   - rows 나 cols 값은 너무 신경쓰지 않아도 된다.


  1. Favicon of http://usemagic.net BlogIcon RYaN_MU 2009.02.18 10:40 신고

    아 이거 설치하고 싶어서 받아놓고 여태까지 미루고 있었는데
    이 기회에 설치해야겠네요 감사ㅋ

  2. Favicon of http://keepburning.tistory.com BlogIcon 황타 2009.02.22 15:10 신고

    textarea는 어떻게 쓰는줄 몰라서 함참 해메고 있었는데, 너무 감사해요~
    onload에 들어가야 하는군요..^^;

    • Favicon of http://finsternis.tistory.com BlogIcon leanu 2009.02.23 11:10 신고

      저도 이거때문에 한참을 고심했답니다.

      OnLoad 에 넣는건 일종의 편법이지요. ㅋㅋ

  3. Favicon of http://sourkent.tistory.com BlogIcon 신키위 2009.03.06 16:11 신고

    우왕ㅋ굳ㅋ

  4. Favicon of http://iphone4u.tistory.com BlogIcon dj kang 2009.04.21 13:00 신고

    감사합니다.

  5. Favicon of http://hugh.tistory.com BlogIcon 얼음나라괴물 2009.04.23 13:47 신고

    감사합니다. ^^ 한번에 잘 해결됐어요~

  6. Favicon of http://minato-kr.tistory.com BlogIcon Minato 2009.05.24 22:34 신고

    textarea 안되는데... 이유를 모르겠어요. 똑같이 onload에 넣어줬는데....

    • Favicon of http://finsternis.tistory.com BlogIcon leanu 2009.05.25 09:15 신고

      html 이 오타가 있을때에도 그냥 넘어가서 디버깅 하는데 지랄같죠.
      혹시나 body 태그가 있는데 또 만드신건 아닌지 한번 체크해 보세요.
      그리고 이 파일들 업로드 경로가 맞는지도 한번 확인해보세요.

  7. Favicon of http://minato-kr.tistory.com BlogIcon Minato 2009.05.29 15:04 신고

    음.. 바디는 하나이구요...
    <body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
    이걸 넣어주면 다른것도 적용이 안되버리네요...
    버전은 2.0이네요.

    • Favicon of http://finsternis.tistory.com BlogIcon leanu 2009.05.29 15:56 신고

      적용이 안된다면
      기존에 skin.html 을 건들이셨을경우
      특정 구문 오류로 인해 인식이 안되서 그냥 넘어갈수도 있어요.
      파일 백업 받아놓으시고 초기 default 버전의 skin.html위에 한번 해보셔요.
      예전에 자바 스크립트 디버깅할때 한줄한줄씩 보고 그랬었는데..
      .. 고생이 많으십니다 ~! 뜨...

      p.s 파일은 업로드 된거죠? pre 로 사용가능한데 textarea 로 안되는거면 아마 skin.thml 쪽이 맞을거에요.

  8. Favicon of http://stormboy.tistory.com BlogIcon 폭풍소년 2009.09.14 19:04 신고

    좋은 정보 감사드려요~

  9. Favicon of http://shinlucky.tistory.com BlogIcon 신럭키 2010.02.17 17:05 신고

    오홍 감사합니다. 이전버전 textarea로 사용해서 그대로 사용할려고 하는데 이런 방법이 있었군요.

    음음 해보니 한큐에 잘 됩니다 감사해용~

  10. Favicon of http://kshzzang2012.tistory.com BlogIcon 498940 2012.01.05 09:18 신고

    </body> 태그에 저 스크립트 내용들을 넣는 거 아니었나요??

    • Favicon of http://finsternis.tistory.com BlogIcon leanu 2012.01.05 17:53 신고

      </body> 가 OnLoad 가 먹는지는 테스트 해보지 않았습니다.

      제가 입력한 곳은 <body> 입니다.

  11. Favicon of http://aterilio.tistory.com BlogIcon Aterilio 2013.03.28 08:26 신고

    왜 저는 leanu님 같은 양식이 안나오는걸까요? ^^;
    오른쪽 위에 버튼들도 있는 위와같은 양식으로 쓰고 싶은데..
    textarea로 테스트 했을땐 안되는군요...

    • Favicon of http://finsternis.tistory.com BlogIcon leanu 2013.04.08 13:22 신고

      혹시 다른 버전의 syntax highlighter 를 사용하고 계신가요?
      현재 최신 버전은 3.0.83 이네요.
      저는 2.1 버전으로 사용하고 있습니다.

    • Favicon of http://aterilio.tistory.com BlogIcon Aterilio 2013.04.10 06:53 신고

      네, 결국 찾고 찾다보니 버전의 문제라는 걸 알게 됐습니다... 그래서 2.x대의 버전으로 다운그레이드 했네요. 답변 감사합니다 :)

    • Favicon of http://finsternis.tistory.com BlogIcon leanu 2013.04.11 09:46 신고

      해결되었다니 다행입니다 :)

소스를 붙여넣기 하면 영 보기가 껄끄럽고 그렇다고 수정하자니 손이 많이간다.

이럴때 이 명령어를 쓰면 유용할 듯 하다.

소스를 연 상태에서
:TOhtml 

를 입력하면 창이 나뉘면서 상단에 html 변환 문서가 생성된다. (오오오~~~~~)

p.s) vim 이 없는가? 그럼 이곳을 참조하라. (http://www.vim.org/download.php)


Before
--------------------------------------------------------------------------------------------
#include <iostream>
#include <algorithm>
#include <vector>
#include <string>

template<class T>
class template_test
{
public:
    T data_;

    void display() { std::cout << data_ << std::endl; };
};
int main()
{
    template_test<int> intClass;
    template_test<std::string> stringClass;

    intClass.data_ = 13;
    stringClass.data_ = "Hello";

    intClass.display();
    stringClass.display();

    return 0;

} // end - main

After
--------------------------------------------------------------------------------------------

 1 #include <iostream>
 2 #include <algorithm>
 3 #include <vector> 
 4 #include <string>
 5
 6 template<class T>
 7 class template_test
 8 {
 9 public:
10     T data_;
11
12     void display() { std::cout << data_ << std::endl; };
13 };
14 int main()
15 {
16     template_test<int> intClass;
17     template_test<std::string> stringClass;
18
19     intClass.data_ = 13;
20     stringClass.data_ = "Hello";
21
22     intClass.display();
23     stringClass.display();
24
25     return 0;
26     
27 } // end - main

Name Description
ASCII() Return numeric value of left-most character
BIN() Return a string representation of the argument
BIT_LENGTH() Return length of argument in bits
CHAR_LENGTH() Return number of characters in argument
CHAR() Return the character for each integer passed
CHARACTER_LENGTH() A synonym for CHAR_LENGTH()
CONCAT_WS() Return concatenate with separator
CONCAT() Return concatenated string
ELT() Return string at index number
<=> NULL-safe equal to operator
= Equal operator
EXPORT_SET() Return a string such that for every bit set in the value bits, you get an on string and for every unset bit, you get an off string
FIELD() Return the index (position) of the first argument in the subsequent arguments
FIND_IN_SET() Return the index position of the first argument within the second argument
FORMAT() Return a number formatted to specified number of decimal places
>= Greater than or equal operator
> Greater than operator
HEX() Return a hexadecimal representation of a decimal or string value
INSERT() Insert a substring at the specified position up to the specified number of characters
INSTR() Return the index of the first occurrence of substring
IS NULL NULL value test
LCASE() Synonym for LOWER()
LEFT() Return the leftmost number of characters as specified
LENGTH() Return the length of a string in bytes
<= Less than or equal operator
< Less than operator
LIKE Simple pattern matching
LOAD_FILE() Load the named file
LOCATE() Return the position of the first occurrence of substring
LOWER() Return the argument in lowercase
LPAD() Return the string argument, left-padded with the specified string
LTRIM() Remove leading spaces
MAKE_SET() Return a set of comma-separated strings that have the corresponding bit in bits set
MATCH Perform full-text search
MID() Return a substring starting from the specified position
!=, <> Not equal operator
NOT LIKE Negation of simple pattern matching
NOT REGEXP Negation of REGEXP
OCTET_LENGTH() A synonym for LENGTH()
ORD() If the leftmost character of the argument is a multi-byte character, returns the code for that character
POSITION() A synonym for LOCATE()
QUOTE() Escape the argument for use in an SQL statement
REGEXP Pattern matching using regular expressions
REPEAT() Repeat a string the specified number of times
REPLACE() Replace occurrences of a specified string
REVERSE() Reverse the characters in a string
RIGHT() Return the specified rightmost number of characters
RLIKE Synonym for REGEXP
RPAD() Append string the specified number of times
RTRIM() Remove trailing spaces
SOUNDEX() Return a soundex string
SOUNDS LIKE(v4.1.0) Compare sounds
SPACE() Return a string of the specified number of spaces
STRCMP() Compare two strings
SUBSTRING_INDEX() Return a substring from a string before the specified number of occurrences of the delimiter
SUBSTRING(), SUBSTR() Return the substring as specified
TRIM() Remove leading and trailing spaces
UCASE() Synonym for UPPER()
UNHEX()(v4.1.2) Convert each pair of hexadecimal digits to a character
UPPER() Convert to uppercase

2.3. 브라우저 객체별 속성과 메소드

2.3.1. navigator : 브라우저의 이름, 버전 등 브라우저 관련 정보를 알려줍니다

속성

appCodeName

브라우저 코드 이름을 알려줍니다

appName

브라우저의 이름을 알려줍니다

appVersion

브라우저의 버전정보를 알려줍니다

userAgent

브라우저의 User Agent를 알려줍니다

platform

사용중인 시스템 정보를 알려줍니다

메소드

JavaEnabled()

자바 사용이 가능한지 여부를 true, false 형태로 알려줍니다


2.3.2. event : 이벤트에 관한 속성 정보를 알려줍니다

네츠케이프

익스플로러

pageX

페이지를 기준으로 이벤트가 발생한 X 좌표

clientX

클라이언트 영역 내에서 이벤트가 발생한 X 좌표

pageY

페이지를 기준으로 이벤트가 발생한 Y 좌표

clientY

클라이언트 영역 내에서 이벤트가 발생한 Y 좌표

screenX

화면을 기준으로 이벤트가 발생한 X 좌표

screenX

화면 영역 내에서 이벤트가 발생한 X 좌표

screenY

화면을 기준으로 이벤트가 발생한 Y 좌표

screenY

화면 영역 내에서 이벤트가 발생한 Y 좌표

which

마우스버튼의 종류(1=왼쪽, 2=가운데, 3=오른쪽) 또는 입력키의 ASCII 값

keyCode

눌려진 키보드의 ASCII 값

target

이벤트가 발생한 HTML 요소

button

마우스 버튼의 종류 (0=없음, 1=왼쪽, 2=오른쪽, 3= 왼쪽+오른쪽, 4=중간,5=왼쪽+중간,6=오른쪽+중간,7=왼쪽+중간+오른쪽)

type

이벤트의 종류

srcElement

이벤트가 발생한 HTML 요소

 

type

이벤트의 종류

cancelBubble

상위단계의 이벤트 핸들러 처리여부(처리=false)

2.3.3. screen : 사용자 컴퓨터의 해상도와 색상에 관련된 정보

속성

availHeight

윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 높이

availWidth

윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 넓이

height

화면의 높이

width

화면의 넓이

colorDepth

사용가능한 색상 수

2.3.4. window : 계층 구조상의 최상위 객체

 

속성

메소드

closed

창의 닫힘여부(true/false)

alert()

경고창을 보여줍니다

defaultStatus

상태표시줄의 초기문자열

blur()

focus를 제거합니다

document

document 객체

clearInterval()

setInterval()메소드에의해 수행되고 있는 함수를 중지합니다

frames

프레임 객체

clearTimeout()

setTimeout()메소드에의해 수행되고 있는 함수를 중지합니다

history

history 객체

close()

창을 닫습니다

length

프레임의 수

comfirm()

확인버튼이 있는 창을 엽니다

location

location 객체

focus()

focus를 줍니다

name

창의 이름

moveBy()

상대적 좌표로 창을 이동합니다

opener

현재창을 열어준 윈도우

moveTo()

절대위치로 창을 이동합니다

parent

부모 프레임

open()

새로운 창을 열어줍니다

self

현재창 자신

print()

화면의 내용을 프린트로 출력합니다

status

상태표시줄의 문자열

prompt()

입력란이 있는 대화상자를 엽니다

top

가장 앞쪽 창

resizeBy()

상대적 크기를 이용해서 창의 크기를 변경합니다

window

현재창(=self)

resizeTo()

절대크기로 창크기를 변경합니다

 

scroll()

창을 스크롤 시킵니다

scrollBy()

상대적 좌표로 창을 스크롤 시킵니다

scrollTo()

절대적 좌표로 창을 스크롤 시킵니다

setInterval()

일정시간 간격으로 지정함수를 반복 호출 합니다

setTimeout()

일정시간 후 지정함수를 호출 합니다

2.3.5. history 객체 : 방문한 URL에 관한 정보를 보여줍니다

속성

length

브라우저의 history 목록에 저장된 URL의 갯수

메소드

back()

한단계 전 URL 로 이동


forward()

한단계 뒤 URL 로 이동


go()

지정된 단계의 URL 로 이동

2.3.6. location : 현재문서의 URL에 관한 정보를 제공합니다

속성

hash

앵커부분(하이퍼링크의 # 이하부분)

host

URL의 호스트부분

hostname

URL의 호스트와 Port 부분

href

문서의 URL

pathname

URL의 경로부분

port

URL의 Port 부분

protocol

URL의 프로토콜 부분

search

URL의 쿼리정보(? 이하의 부분)

메소드

reload()

문서를 새로고칩니다

replace()

현재의 URL을 새로운 URL 로 고칩니다

2.3.7. document : HTML 문서

속성

alinkColor

링크클릭시 색상

anchors

앵커 객체

applets

애플릿 객체

bgColor

배경색상

cookie

쿠키 파일의 정보

domain

문서가 있는 서버의 도메인 이름

embeds

embed 객체

fgColor

문서의 텍스트 색상

forms

form 객체

lastModified

문서의 최종수정일 정보

linkColor

하이퍼링크 색상

links

link 객체

referrer

현재 문서를 불러온 이전문서 정보

title

문서의 제목

URL

문서의 URL

vlinkColor

방문한 적이 있는 링크 색상

메소드

close()

문자열 출력 중지

open()

문자열 출력 시작

write()

문자열 출력

writeIn()

지정된 윈도우의 문서에 HTML 형식으로 쓰면서 줄을 바꾸어 줍니다.

2.3.8. Image 객체 : 문서내에 있는 이미지에 관한 정보를 담고 있습니다.

<img src="이미지명" name=img_name> 과 같은 태그에 의해 생성되는 객체입니다

속성

border

이미지의 테두리 값

complete

이미지 로드가 완료 되었는지 여부(true/false)

height

이미지의 높이

width

이미지의 가로크기

hspace

이미지의 수평여백

vspace

이미지의 수직여백

length

이미지의 개수

lowsrc

lowsrc 로 설정한 이미지의 URL

name

이미지의 name

src

이미지의 URL


2.3.9. Form 객체 : 입력양식에 관한 객체

<form name=myform> 태그에 의해 생성되는 객체입니다

속성

action

폼 태그의 action 속성

button

버튼 객체

checkbox

체크박스 객체

elements

폼의 하위 객체

encoding

폼태그의 enctype 속성

fileupload

fileupload 객체

hidden

hidden 객체

length

엘리먼트의 개수

method

폼 태그의 method 속성

name

form 의 이름

password

password 객체

radio

radio 객체

reset

reset 객체

select

select 객체

submit

submit 객체

target

폼태그의 target 속성

text

text box 객체

textarea

textarea 객체

메소드

submit()

폼 양식을 전송합니다

reset()

폼 양식을 초기화 합니다

2.3.10. button 객체 : 폼 객체의 하위객체인 버튼 객체입니다

<input type=button> 태그에 의해 생성되는 객체 입니다

속성

form

버튼의 상위 폼 객체


name

버튼의 이름


type

버튼의 타입


value

버튼의 값

메소드

blur()

포커스 해제


click()

버튼을 클릭


focus()

버튼에 포커스를 줍니다

2.3.11. checkbox 객체 : 폼 객체의 하위객체인 체크박스 객체

<input type=checkbod> 태그에 의해 생성되는 객체 입니다

속성

checked

체크되어 있는지 여부(true/false)


defaultChecked

기본값으로 체크되어 있는지 여부(true/false)


form

상위 폼 객체


name

체크박스의 이름 속성


type

체크박스의 타입 속성


value

체크박스의 value 속성

메소드

blur()

포커스를 해제합니다


click()

체크박스를 클릭합니다


focus()

포커스를 줍니다

2.3.12. fileupload 객체 : 폼 객체의 하위객체인 fileupload 객체

<input type=file> 태그에 의해 생성되는 객체 입니다

속성

form

상위 폼 객체


name

name 속성


type

type 속성


value

value 속성

메소드

blur()

포커스를 해제합니다


focus()

포커스를 줍니다

2.3.13. hidden 객체 : 폼의 하위 객체인 hidden 객체

<input type=hidden> 태그에 의해 생성되는 객체 입니다

속성

form

상위 폼 객체


name

name 속성


type

type 속성


value

value 속성


2.3.14. password 객체 : 폼의 하위객체인 password 객체입니다

<input type=password> 태그에 의해 생성되는 객체 입니다

속성

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

focus()

포커스를 줍니다

2.3.15. radio 객체 : 폼의 하위객체인 라디오버튼 객체입니다

<input type=radio> 태그에 의해 생성되는 객체 입니다

속성

checked

체크되어 있는지 여부(true/false)

defaultChecked

기본값으로 체크되어 있는지 여부(true/false)

form

상위 폼 객체

length

라디오버튼의 개수

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

click()

버튼을 클릭합니다

focus()

포커스를 줍니다

2.3.16. reset 객체 : 폼의 하위객체인 reset 버튼 객체입니다

<input type=reset> 태그에 의해 생성되는 객체 입니다

속성

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

click()

버튼을 클릭합니다

focus()

포커스를 줍니다

2.3.17. submit 객체 : 폼의 하위 객체인 submit 객체입니다

<input type=submit> 태그에 의해 생성되는 객체 입니다

속성

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

click()

버튼을 클릭합니다

focus()

포커스를 줍니다

2.3.18. text 객체 : 폼의 하위객체인 텍스트박스 객체입니다

<input type=text> 태그에 의해 생성되는 객체 입니다

속성

defaultValue

text box 의 초기문자열

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

select()

텍스트박스 입력란의 문자열을 선택합니다

focus()

포커스를 줍니다

2.3.19. select 객체 : 폼 버튼의 하위객체인 목록상자 객체입니다. 하위객체로 option을 가지고 있습니다

<select><option></option></select> 태그에 의해 생성되는 객체 입니다

속성

form

상위 폼 객체

length

option 의 수

name

name 속성

options

option 객체

selectedIndex

선택된 항목의 index

type

type 속성(select 유형)

메소드

blur()

포커스를 해제합니다

focus()

포커스를 줍니다

option객체의 속성

defaultSelected

기본값으로 선택된 항목(true/false)

index

현재옵션의 인덱스

selected

선택된 상태(true/false)

text

<option> 다음에 오는 문자열

value

value 속성

2.3.20. textarea : 폼의 하위객체인 textarea 객체입니다

<textarea></textarea> 태그에 의해 생성되는 객체 입니다

속성

defaultValue

초기문자열


form

상위 폼 객체


name

name 속성


type

type 속성


value

value 속성

메소드

blur()

포커스를 해제합니다


select()

textarea 입력란의 문자열을 선택합니다


focus()

포커스를 줍니다


2.4. 자바스크립트의 내장 객체

객체명

내용

Array

동종의 데이터들을 저장하고 다루기 위해 사용하는 배열 객체

Date

날짜와 시간과 관련된 내용을 처리하는 객체

Math

수학 계산을 위한 객체

String

문자열 처리를 위한 객체


2.4.1. 배열(Array) 객체

여러개의 데이터를 참조할 때 각 변수를 선언하지 않고 하나의 배열 이름과 구성 번호로 접근하기 위해 접근합니다

배열객체 이름 = new Array()

배열객체 이름 = new Array(배열수)

배열객체 이름 = new Array(배열1, 배열2,...)


속성

length

배열의 길이 정보를 담고 있습니다

메소드

join(문자열)

배열에 들어있는 문자열을 결합합니다

reverse()

배열의 순서를 바꾸어 줍니다

sort(compareFunction)

배열을 정열합니다

slice(처음,끝)

배열의 일부를 새로운 배열로 만듭니다

concat(배열객체명)

두 개의 배열을 합쳐서 하나의 배열로 만듭니다


2.4.2. Date 객체

날자와 시간을 표시하거나 설정하는데 사용되는 객체입니다

자바스크립트에서는 그리니치표준시(GMT) 1970년 1월 1일 00시 00분 00초 가 기준입니다

객체이름 = new Date()


getYear()/setYear()

연도표시/설정

getMonth()/setMonth()

월(0-11)표시/설정

getDate()/setDate()

일(1-31)표시/설정

getDay()/setDay()

요일(0-6)표시/설정

getHours()/setHours()

시(0-23)표시/설정

getMinutes()/setMinutes()

분(0-59)표시/설정

getSeconds()/setSeconds()

초(0-59)표시/설정

getTimes()/setTimes()

기준시(1970년1월1일00:00:00)를 기준으로 경과된 시간을 milisecond 로 표시/설정

toString()

날짜와 시간을 문자열로 변환

toLocaleString()

날짜와 시간을 지역시간 문자열로 변환

toGMTString()

날짜와 시간을 GMT 문자열로 변환

getTimezoneOffse()

GMT 와 지역시간의 차이를 분단위로 표시

getFullYear()/setFullyear()

연도수를 4자리수로 표시/설정


2.4.3. Math 객체

수학계산을 위해 사용되는 객체로 실제 사용빈도는 높지 않으나 랜덤하게 데이터를 추출 하는데 많이 사용됩니다.

속성

E

자연로그 밑에 사용되는 오일러 상수

LN10

10의 자연로그

LN2

2의 자연로그

Log10E


LOG2E


PI

원주율

SQRT1_2

1/2의 제곱근

SQRT2

2의 제곱근

메소드

abs(n)

n의 절대값

acos(n)

n의 역 코사인 값

asin(n)

n의 역 사인값

atan(n)

n의 역 탄젠트값

atan2(x,y)

지정된 x,y 좌표에서의 역 탄젠트 값을 반환

cos(n)

n의 코사인값

sin(n)

n의 사인 값

sqrt(n)

n의 제곱근

tan(n)

n 의 탄젠트 값

ceil(n)

n을 올림한 값

exp(n)

오일러 상수 e를 n승 한 값

floor(n)

n을 내림한 값

log(n)

n의 자연로그 값

max(n,m)

둘 중 큰 수

min(n,m)

둘 중 작은 수

pow(n,m)

n 의 m 승

random()

0과 1사이의 난수 반환

round(n)

n을 반올림한 값

2.4.4. String 객체

String 객체는 글자의 모양을 지정하거나 문자열을 처리하기 위해 사용됩니다.

속성

length

문자열의 길이

2.4.4.1. 글자의 모양과 관련된 메소드

메소드

anchor("name")

앵크를 설정 합니다

<A NAME="name">

big()

약간 큰 글씨로 설정 합니다

<BIG>

blink()

글자를 깜빡이게 합니다(NC)

<BLINK>

bold()

글자를 진하게 합니다

<B>

fixed()

글자를 타자체로 설정합니다

<TT>

fontcolor("color")

글자색을 지정합니다

<FONT COLOR="color">

fontsize("size")

글자 크기를 지정합니다

<FONT SIZE="size">

italics()

이탤릭체로 지정합니다

<I>

link("url")

하이퍼링크를 설정합니다

<A HREF="url">

small()

약간 작은 글씨로 합니다

<SMALL>

strike()

취소선을 긋습니다

<SRIKE>

sub()

아래첨자로 설정합니다

<SUB>

sup()

윗첨자로 설정합니다

<SUP>

toLowerCase()

소문자로 변환합니다


toUpperCase()

대문자로 변환합니다



2.4.4.2. 문자열 처리를 위한 메소드

charAt(n)

n 번째의 문자열을 반환합니다

charCodeAt(n)

n 번째의 문자의 유니코드 번호를 반환합니다

concat(문자열)

두 개의 문자열을 합칩니다

fromCharCode(x,y,..)

유니코드번호를 문자열로 변환합니다

indexOf(문자열)

왼쪽부터 지정된 문자열의 위치를 반환합니다

lastIndexOf(문자열)

오른쪽부터 지정된 문자열의 위치를 반환합니다

split(분리자)

분리자를 기준으로 문자열을 분리합니다

substring(A,B)

A부터 B 이전까지의 문자열을 반환합니다

substr(A,n)

A부터 n 만큼의 문자열을 반환합니다


2.7. 변수

변수(Variable)란 데이터를 저장하는 장소로 어떤 내용을 담아두는 용기에 비유할 수 있습니다.

일반적으로 변수 선언은 아래와 같은 방법을 사용합니다

var myVar=변수값

myVar=변수값

var myVar1, myVar2, myVar3...


변수의 이름은 a-Z 까지의 알파벳과 0-9까지의 숫자, 언더바(Under Bar ; "_")의 조합으로 사용할 수 있습니다. 하지만 변수이름의 첫글자는 반드시 알파벳이나 언더바로 시작되어야 합니다.

또한, 변수명으로 자바스크립트 예약어는 사용할 수 없습니다

자바스크립트 예약어

abstract

case

continue

extends

for

import

long

private

static

throw

var

boolean

catch

default

false

function

in

native

protected

super

throw

void

break

char

do

final

goto

instanceof

new

public

switch

transient

while

byte

class

double

finally

if

int

null

return

synchronized

true

with

case

const

else

float

implements

interface

package

short

this

try



2.8. 자바스크립트의 데이터 형

2.8.1. 문자형

자바스크립트에서 문자형은 "안녕하세요" 처럼, 따옴표(" ")나 홑따옴표 (' ') 사이에 들어가는 문자열입니다. "12345" 처럼 사용하면 보양은 숫자형이지만 따옴표 내에 들어감으로 문자형으로 취급됩니다. " " (공백문자열)도 문자열로 간주됩니다.

또 다음과 같이 제어문자들을 나타내기 위한 Escape Sequence 자료형도 있습니다

\n

줄을 바꾸어 줍니다

\t

탭키를 누른 것과 같은 효과를 줍니다

\b

BackSpace 키를 누른것과 같은 효과를 줍니다

\r


\\

문자열 안에 \ 부호를 넣습니다

\'

문자열 안에 ' 부호를 넣습니다

\"

문자열 안에 " 부호를 넣습니다


2.8.2. 숫자형

숫자형은 따옴표나 홑따옴표 안에 넣지 않습니다. 실수형과 정수형이 있습니다. 정수형은 소수점이 없는 수치 데이터이고, 실수형은 소수점이 있는 수치 데이터 입니다

2.8.3. 논리형 (Boolean)

논리형은 참, 거짓을 나타내며 숫자형과 마찬가지로 따옴표를 사용하지 않습니다. 항상 참 아니면 거짓입니다

2.8.4. Null 형

정의되지 않은 변수값입니다. 공백문자열인 " " 과는 차이가 있습니다

2.9. 연산자

2.9.1. 산술 연산자

A+B

A 더하기 B

A-B

A 빼기 B

A*B

A 곱하기 B

A/B

A 나누기 B

A%B

A를 B로 나눈 나머지값

2.9.2. 증감 연산자

A++

A 값을 변수에 전달 한 후 A를 1 증가시킵니다

A--

A 값을 변수에 전달 한 후 A를 1 감소시킵니다

++A

A를 1 증가시킨 후 변수에 전달합니다

--A

A를 1 감소시킨 후 변수에 전달합니다

2.9.3. 문자열 연산자

"문자열A"+"문자열B"

두 개의 문자열을 하나의 문자열로 합칩니다

A += "문자열B"

변수 A 에 문자열B를 추가합니다

2.9.4. 할당 연산자

A=B

B의 값을 A에 할당합니다

A+=B

A와 B를 더한값을 A에 할당합니다

A-=B

A에서 B를 뺀값을 A에 할당합니다

A*=B

A에서 B를 곱한값을 A에 할당합니다

A/=B

A에서 B를 나눈값을 A에 할당합니다

A%=B

A를 B로 나눈 나머지값을 A에 할당합니다


2.9.5. 비교 연산자 : 연산 결과를 참과 거짓으로 반환합니다

A==B

A와 B가 같으면 true (할당연산자 A=B와는 다릅니다)

A!=B

A와 B가 같지 않으면 true

A>B

A가 B보다 크면 true

A<B

A가 B보다 작으면 true

A>=B

A가 B보다 크거나 같으면 true

A<=B

A가 B보다 작거나 같으면 true

2.9.6. 논리 연산자

A&&B

조건A와 B를 만족시키면 true

A||B

조건A 혹은 B를 만족시키면 true

!A

A의 부정

2.9.7. 조건 연산자

(조건)? A:B

조건을 만족시키면 A, 아니면 B



2.10. 제어문

명령문은 프로그램의 흐름을 제어하고 원하는 기능이 실행 되도록 하는 명령어 로서, 조건에 맞는 기능을 수행하거나 특정위치로 이동, 혹은 반복 실행이 가능하게 하는 등의 작용을 합니다

if

[조건문] 주어진 조건을 만족할 때에만 특정 구문을 실행합니다

if ... else

[조건문] 조건에 따라 처리하고자 하는 문장이 달라질 경우에 사용합니다

while

[반복문] 조건이 참인동안 명령문을 반복 실행합니다

do ... while

[반복문] 명령문을 한번 실행한 후 조건이 참이면 반복 실행합니다

for

[반복문] 초기값, 조건, 증가식을 설정하여 명령문을 반복 실행합니다

break

[반복문] 반복문의 루프를 종료합니다

continue

[반복문] 반복문의 루프의 예외상황을 만듭니다

switch ... case

[조건문] 조건에 맞는 코드를 선택적으로 실행 합니다


2.10.1. if-else문

if-else문은 주어진 조건을 만족시키는 경우에만 지정된 동작을 하도록 만들고 싶을 때 사용합니다.

① if (조건) {
문장;
}

② if (조건1) {
문장1;
}
else {
문장2;
}

③ if (조건1) {
문장1;
}
else if(조건2) {
문장2;
}
else if(조건3) {
문장3;
} ...
else {
문장n;
}


2.10.2. while문

while문은 주어진 조건이 만족되는 동안 반복해서 지정된 기능을 수행시키고 싶을 때 사용하는 반복제어문입니다.

    whiile (조건1) {
    문장;
    }


조건이 참일 동안에는 계속 문장을 실행하고 거짓이 되는 순간 while 문을 벗어납니다.

2.10.3. do - while문

    do {

    문장 ;

    }while (조건);

do -while문은 while문과 마찬가지로 반복제어문이지만 다른 점은 먼저 문장을 실행시킨뒤 조건을 체크하여 참이면 계속 실행하고 거짓이 되는 순간 do - while문을 벗어 나게 됩니다.

2.10.4. for문

for문도 역시 반복제어문이지만 형식이 약간 다른데 for문은 초기 변수값을 주고 이 변수값이 조건을 만족시키는 동안에만 기능을 동작시킵니다.

    for(초기값;조건;증감식 {
    문장;
    }

    (예) for( i=1; i<10 ;i++) {
    문장;
    }


위의 (예)는 초기변수값 i가 1일 때 i가 10보다 작을 동안(9까지) 1씩 증가시키며 지정한 문장을 수행하라는 것입니다.

2.10.5. break / continue 문

break는 반복제어문(while , do-while문) 안에 위치하여 제어문을 종료시키는 역할을 하고 continue는 제어문의 처음 부분으로 이동시키는 역할을 합니다.

2.10.6. switch ... case문

switch ... case문은 여러개의 조건이 있고 각 조건에 따라 실행되어야 하는 자바스크립트 코드가 달라지는 경우에 사용됩니다.

    switch(표현식) {
    case value 1:
    문장1;
    break;

    case value 2:
    문장2;
    break;

    case value 3:
    문장3;
    break;

    ......
    default :
    문장 n ;
    }


표현식이 value 1의 값을 가지는 경우 문장 1이 실행되고, value 2의 값을 가지는 경우에는 문장 2가 실행됩니다. 그리고 표현식의 값이 case 뒤에 없는 경우에는 default 다음의 문장 n을 실행 시키게 됩니다. case뒤에는 반드시 break를 써야 합니다. 그렇지 않으면 그 뒤에 오는 case까지 실행됩니다.

2.11. 함수와 내장함수

함수는 프로그램 내에서 특정 작업을 수행하기 위해 독립적으로 만들어진 하나의 단위를 의미합니다. 프로그램에서 함수를 사용하는 목적은 특정작업을 하나의 단위로 만들어 사용함으로써 반복적으로 사용할 수 있도록 하기 위해서이고, 또 특정작업을 함수라는 단위로 분리해 냄으로써 프로그램 소스를 손쉽게 이해할 수 있도록 만들어 주기도 합니다.

함수를 정의하는 방법은 먼저 function 이라는 키워드를 쓰고, 그 뒤에 함수이름과 인수(매개변수)를 쓰면 됩니다.

function 함수이름(인수1,인2,....) {

자바스크립트 코드

}


인수의 수는 원하는 만큼 사용할 수 있으며, 각 인수는 콤마(,)를 통해 구분됩니다.

함수가 정의되기 전에 사용되는 것을 방지하기 위하여 함수의 정의는 반드시 <head>와 </head> 사이에 이루어져야 합니다.

자바스크립트의 내장함수로는 다음과 같은 것들이 있습니다

alert(출력할 메세지)

alert함수는 메시지와 OK버튼만을 가진 다이얼로그 박스를 보여주는 함수로 사용자의 요구를 받을 필요가 없는 메시지의 경우에 사용합니다

confirm(출력할 메세지)

confirm함수는 메시지와 OK/Cancel버튼을 포함한 다이얼로그 박스를 보여주는 함수로, 사용자로부터 응답을 듣고 싶을 때 사용하고 사용자가 OK버튼을 누르면 true를, Cancel버튼을 누르면 false를 반환합니다

prompt(메세지, 초기값)

메시지와 입력필드를 가진 다이얼로그 박스를 보여주는 함수로 사용자로부터 숫자나 문자열을 입력받아 할 때 사용하는 함수 입니다

eval(수식문자열)

eval함수는 수치형태로 입력된 문자열을 계산하여 주는 함수로, 예를 들어 "2+3"과 같은 문자열을 eval 함수의 매개변수로 입력하면 문자열을 수식으로 변환한 후 계산을 하여 "5"라는 정수를 반환 해 줍니다. 이 함수는 입력양식을 통해 입력받은 수식을 처리할 때 유용하게 사용 할 수 있습니다

parseInt(문자열,[진수])

parseInt는 문자열을 정수로 바꿔주는 내장함수로 입력된 문자열을 2진수, 8진수, 16진수 정수로 바꿔줍니다

parseFloat(문자열)

문자열을 부동소수점으로 바꾸는 내장함수입니다

isFinite(숫자)

숫자가 유한의 수이면 true

isNaN(값)

값이 순수한 문자이면 true (NaN = Not a Number)

number(값)

값을 숫자로 변환하여 반환

string(값)

값을 문자로 변환하여 반환

escape(문자열)

ISO 문자열을 ASCII으로 바꾸어 반환하는 함수입니다.

unescape(ASCII)

ASCII 문자열을 ISO 문자열로 변환하여 줍니다.


2.12. 이벤트와 이벤트 핸들러

이벤트(Event)란 사용자가 웹브라우저를 조적할 때 발생하는 일련의 사건을 말합니다. 즉 마우스를 옮긴다거나 버튼을 클릭하거나 폼 문서를 작성하여 전송한다거나 하는 행위를 이벤트라고 하며 이러한 이벤트가 발생했을 때 설정한 방법으로 처리해 주는 것을 이벤트 핸들러 (Event Handler)라고 합니다. 이벤트 핸들러는 일반적으로 HTML 태그내에서 사용되며 이벤트 앞에 문자 "on"을 붙여 사용합니다.

<input type="button" value="클릭하세요" onClick="alert('안녕하세요?')">


2.12.1. 이벤트 핸들러의 종류

이벤트

설명

onblur

입력양식에서 포커스가 다른 곳으로 이동 했을 때

onclick

입력양식이나 링크를 마우스로 클릭했을 때

onfocus

입력양식 필드로 포커스가 들어왔을 때

onload

브라우저에서 문서가 읽혀 졌을 때

onmouseover

링크위로 마우스가 지나갔을 때

onselect

입력양식의 한 필드를 선택했을 때

onsubmit

입력양식을 서버로 보낼 때

onunload

브라우저에서 문서가 없어졌을 때

onabort

이미지를 읽다가 중단시켰을 때

onerror

문서나 이미지를 읽다가 에러가 발생했을 때

onmouseout

마우스가 링크나 특정영역안에 있다가 나갔을 때

onreset

입력양식에서 리셋 시켰을 때

ondbclick

마우스를 더블클릭 했을 때

ondragdrop

마우스를 클릭한 상태에서 움직였을 때

onkeydown

키를 입력했을 때

onkeypress

키를 눌렀을 때

onkeyup

키를 눌렀다 놓았을 때

onmousedown

마우스 버튼을 눌렀을 때

onmousemove

마우스를 움직였을 때

onmouseup

마우스버튼을 눌렀다 놓았을 때

onmove

윈도우나 프레임을 움직였을 때

onresize

윈도우나 프레임의 크기를 변경하였을때

+ Recent posts