html 키보드 영문소스입니다.

소개글

과제로 내준 HTML로 만든 키보드소스입니다.
script와 HTML, css로 짜서 도움이 많이 되실듯 합니다.
주석 또 다 달아두었습니다.
영문키보드이며 기능은 특수문자, 대소문자, 엔터, 스페이스, del키, cancel(지우기,초기화), send(보내기)등이 있습니다.

HTML과 CSS, 그리고 관련 이미지파일 있습니다.
작성프로그램은 이클립스로 했으며 메모장으로도 소스가 열람이 가능하고, html이라 바로 브라우저 실행가능합니다.
수정 또한 가능한 파일이며 내용을 추가하거나 삭제 하실수있습니다.

컴파일 실행환경

이클립스, javascript, HTML

본문내용

<link type="text/css" rel="stylesheet" href="../css/style.css">
<!-- 대부분 클래스 사용해 스타일 속성 설정 -->
<script type="text/javascript">

var ex="";

function key(character){
//키보드 클릭 시 선택된 value 을 텍스트 창에 추가하는 함수
ex=ex+character;
document.getElementById("text").value=ex;
length1();
}
function cancel(){
//cancel 버튼 클릭 시 텍스트창의 내용 초기화 시켜주는 함수
ex="";
document.getElementById("text").value=" ";
length2();
}
function space(){
//space 버튼 클릭 시 텍스트창에 공백 추가하는 함수
ex=ex+" ";
document.getElementById("text").value=ex;
length1();
}
function enter(){
//enter 버튼 클릭 시 텍스트창에 /n 추가하는 함수
ex=ex+"\n";
document.getElementById("text").value=ex;
length1();
}
function del2(){
//del 버튼 클릭 할 때 마다 텍스트창의 문자를 하나씩 삭제시켜주는 함수
var num=0;
var sbstr="";
num = ex.length;
if(num ==0){
alert("글자를 입력해주세요 .");
return;
}else{
sbstr=ex.substring(0, num-1); //substring
//입력한 텍스트 길이 -1
document.getElementById("text").value =sbstr;
ex=sbstr;
}
length1();
}

function length1(){
//텍스트 창에 문자가 추가되거나 삭제될 때 문자열의 길이를 나타내주는 함수
var len1=document.getElementById("span1");
var text=document.getElementById("text");
if(text.value.length>160){
alert("문자열 초과");
text.value=text.value.substring(0,160);

text.innerHTML=text.value.length;

}else{
len1.innerHTML=text.value.length;
}
.
.
.
.

압축파일 내 파일목록

.settings/.jsdtscope
.settings/org.eclipse.jdt.core.prefs
.settings/org.eclipse.wst.common.component
.settings/org.eclipse.wst.common.project.facet.core.xml
.settings/org.eclipse.wst.jsdt.ui.superType.container
.settings/org.eclipse.wst.jsdt.ui.superType.name
WebContent/.git/hooks/applypatch-msg.sample
WebContent/.git/hooks/commit-msg.sample
WebContent/.git/hooks/post-commit.sample
WebContent/.git/hooks/post-receive.sample
WebContent/.git/hooks/post-update.sample
WebContent/.git/hooks/pre-applypatch.sample
WebContent/.git/hooks/pre-commit.sample
WebContent/.git/hooks/pre-push.sample
WebContent/.git/hooks/pre-rebase.sample
WebContent/.git/hooks/prepare-commit-msg.sample
WebContent/.git/hooks/update.sample
WebContent/.git/info/exclude
WebContent/.git/objects/info/
WebContent/.git/objects/pack/
WebContent/.git/refs/heads/
WebContent/.git/refs/tags/
WebContent/.git/HEAD
WebContent/.git/config
WebContent/.git/description
WebContent/META-INF/MANIFEST.MF
WebContent/WEB-INF/lib/
WebContent/css/style.css
WebContent/image/box_dial_contacts.png
WebContent/image/icon_battery_dummy.png
WebContent/image/icon_menu.png
WebContent/image/icon_profile.png
WebContent/image/keyboard_123.png
WebContent/image/keyboard_background.png
WebContent/image/keyboard_cancel.png
WebContent/image/keyboard_enter.png
WebContent/image/keyboard_enter_icon.png
WebContent/image/keyboard_key.png
WebContent/image/keyboard_send.png
WebContent/image/keyboard_shift.png
WebContent/image/keyboard_space.png
WebContent/image/top_bar.png
WebContent/image/top_bar_help.png
WebContent/image/wallpaper.png
WebContent/image/wallpaper_preview.png
WebContent/js/NewFile.html
build/classes/
src/
.classpath
.project
ĸó.PNG
ĸó2.PNG

전체 목록 보기

참고 자료

없음