event.keycode 표

개발개발/자바스크립트 2012. 8. 29. 11:13

event.keycode 표

←(백스패이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57
INSERT = 45
DELETE = 46

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93
0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105
.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109
F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123
NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
(중간) = 220

 

 

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

자바스크립트 셀렉트(javascript select) option 추가하기  (0) 2012.08.31
자바스크립트 계산기 (08.30수정)  (0) 2012.08.30
자바스크립트 계산기  (0) 2012.08.29
브라우저 객체 모델 BOM(Browser Object Model)  (0) 2012.08.27
문서객체모델 ( DOM, Document Object Model)  (0) 2012.08.27
Posted by 공돌공돌
,

자바스크립트 계산기

개발개발/자바스크립트 2012. 8. 29. 05:23

 

 

실행주소 : http://bboong100.cafe24.com/0828/calc1.html

풀 소스

<html>
<head>
    <script type="text/javascript">
        function cal(num) {
            calc.txt.value += num;
        }
        function answer() {
            calc.txt.value = eval(document.calc.txt.value);
            // document.calc.txt.value 에 저장된 문자열을
            // 자바스크립트코드로 실행
        }

        function clearcal() {
            calc.txt.value = "";
            // 텍스트창 초기화
        }

        function bs(){
            calc.txt.value = calc.txt.value.substring(0, calc.txt.value.length-1);
            // substring 으로 0부터 value 길이에서 -1 한 만큼의 길이를 출력한다
        }
    </script>
    <title>계산기</title>
</head>
<body>
<form name="calc">
    <table border=1 width=200px height=200px cellpadding=0 cellspacing=0>

        <tr border=2>  <!-- 숫자표시창 -->
            <td colspan=5 align=center><input type=text name="txt" disabled></td>
        </tr>
        <tr height=40px> <!-- 백스페이스, C -->
            <td colspan=5>
                <table border=1 width=100%>                                               
                    <tr align=center>
                        <td width=33%><input type=button value='BackSpace' style="width:100%;" onclick=bs()></td>
                        <td width=33%><input type=button value='C' style="width:100%;" onclick=clearcal()></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr align=center>
            <td width=25%><input type=button value=1 onclick="cal('1')"></td>
            <td width=25%><input type=button value=2 onclick="cal('2')"></td>
            <td width=25%><input type=button value=3 onclick="cal('3')"></td>
            <td width=25%><input type=button value='/' onclick="cal('/')"></td>
        </tr>
        <tr align=center>
            <td><input type=button value=4 onclick="cal('4')"></td>
            <td><input type=button value=5 onclick="cal('5')"></td>
            <td><input type=button value=6 onclick="cal('6')"></td>
            <td><input type=button value=* onclick="cal('*')"></td>
        </tr>
        <tr align=center>
            <td><input type=button value=7 onclick="cal('7')"></td>
            <td><input type=button value=8 onclick="cal('8')"></td>
            <td><input type=button value=9 onclick="cal('9')"></td>
            <td><input type=button value=+ onclick="cal('+')"></td>
        </tr>
        <tr align=center>
            <td>　</td>
            <td><input type=button value=0 onclick="cal('0')"></td>
            <td><input type=button value='=' onclick="answer()"></td>
            <td><input type=button value='-' onclick="cal('-')"></td>
        </tr>
    </table>
</form>
</body>
</html>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

자바스크립트 계산기 (08.30수정)  (0) 2012.08.30
event.keycode 표  (1) 2012.08.29
브라우저 객체 모델 BOM(Browser Object Model)  (0) 2012.08.27
문서객체모델 ( DOM, Document Object Model)  (0) 2012.08.27
문서 객체의 스타일  (0) 2012.08.27
Posted by 공돌공돌
,

브라우저 객체 모델 BOM(Browser Object Model)

개발개발/자바스크립트 2012. 8. 27. 14:46

브라우저 객체 모델 BOM(Browser Object Model)

 웹 브라우저와 관련된 객체의 집합을 의미

 대표적인 BOM으로는 window, location, navigator, history, screen, document가 있다

 

Window 객체

 브라우저 객체들의 계층구조 에서 최상위에 있는 객체

 자바스크립트로 하는 모든 작업이 Window객체 안에서 이루어짐

메소드 이름

설명

open(URL, name, features, replace)

새로운 window 객체를 생성

setTimeout(function, millisecond)

일정 시간 후에 함수를 한 번 실행

setInterval(function, millisecond)

일정 시간마다 함수를 반복해서 실행

clearTimeout(id)

일정 시간 후에 함수를 한 번 실행하는 것을 중지

clearInterval(id)

일정 시간마다 함수를 반복하는 것을 중단

moveTo(x,y)

윈도우의 위치를 x, y만큼 이동한다                       

focus()

윈도우에 초점을 맞춘다

blur()

윈도우에 초점을 제거한다

close()

윈도우를 닫는다

 

Window 객체의 onload 이벤트 속성

문서객체의 속성중 on으로 시작하는 속성을 이벤트 속성이라 하며 함수를 할당해야 한다

window 객체가 로드가 완료되고 자동으로 onload()에 할당된 함수를 실행한다

 

 

Screen 객체

 웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체

속성

설명

width

화면의 너비

height

화면의 높이

availWidth

실제 화면에서 사용가능한 너비

availHeight

실제 화면에서 사용가능한 높이

colorDepth

사용 가능한 색상 수

pixelDepth

한 픽셀당 비트 수

 

location 객체

 브라우저의 주소 표시줄과 관련된 객체

 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보를 갖는다

메소드 이름

설명

assign(link)

현재 위치를 이동

reload()

새로 고침

replace(link)

현재 위치를 이동( 뒤로 가기 불가능)

 

navigator 객체

웹페이지를 실행하고 있는 브라우저에 대한 정보를 갖는다

속성

설명

appCodeName

브라우저의 코드명

appName

브라우저의 이름

appVersion

브라우저의 버전

platform

사용중인 운영체제의 시스템 환경

userAgent

브라우저의 전체적인 정보

 

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

event.keycode 표  (1) 2012.08.29
자바스크립트 계산기  (0) 2012.08.29
문서객체모델 ( DOM, Document Object Model)  (0) 2012.08.27
문서 객체의 스타일  (0) 2012.08.27
문서 객체 가져오기(getElementByName())  (0) 2012.08.27
Posted by 공돌공돌
,

티스토리툴바