document.getElementById, function, JavaScript, onclick, UTF-8, VAR, web, WebProgramming


/* javascript.html */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

 </HEAD>

 <SCRIPT>

 var str;

 var length;

 str = document.getElementById("textarea").value; // textarea에서의 string을 받는다.

 function keyup() // keyup함수

 {

if(document.getElementById("textarea").value.length >= 80) // 문자열의 길이가 80이 넘어갈 경우

{

alert("overflow!!!"); // 초과 alert창을 띄운다

cleartext(); // 초기화시킨다

}

else // 그렇지 않을경우 leng(문자열 남은 길이)는 80에서 문자열의 길이를 뺸 것을 계산한다.

{

document.getElementById("leng").value = 80 - document.getElementById("textarea").value.length;

}

 }

 function clickon() // 클릭했을 경우 출력

 {

alert(document.getElementById("textarea").value);

 }

 function cleartext() // 초기화(텍스트 내용과 남은 길이값을 초기화)

 {

 document.getElementById("textarea").value = " ";

 document.getElementById("leng").value = "80";

 }

 </SCRIPT>

 <BODY>

  <TEXTAREA id="textarea" rows="5" cols="30" onkeyUp="keyup()"></TEXTAREA>

  <p> You have <input type="text" id="leng" value="80" readOnly> characters left.

  <p>

  <input type="button" value="Send!" onClick="clickon();">  <input type="button" value="Clear" onClick="cleartext();">

 </BODY>

</HTML>


- 실행시 화면창(textarea 폼에 입력)


- 입력을 하면서 동시에 남은 문자열 입력가능 개수를 출력한다.


- 입력하면서 80글자가 넘어갈 경우 overflow alert창을 띄운다.


'Web Programming > JavaScript' 카테고리의 다른 글

Javascript를 이용한 문자열 길이체크 및 입력제한  (0) 2012.04.04
실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

<SCRIPT>

function colorchange()

{

document.getElementById("textcolor").value = document.getElementById("selectcolor").value;

}

function on()

{

document.getElementById("main").bgColor = document.getElementById("selectcolor").value;

}

</SCRIPT>

 <body id = "main">

 <SELECT id="selectcolor" onChange="colorchange()">

<OPTION value="yellow">노랑</OPTION>

<OPTION value="green">초록</OPTION>

<OPTION value="blue">파랑</OPTION>

<OPTION value="red">빨강</OPTION>

 </SELECT>

 <INPUT type="text" id="textcolor" size="6">

 <INPUT type="button" value="배경색 변경" onClick="on()">

 </body>

</html>

'Web Programming > JavaScript' 카테고리의 다른 글

Javascript를 이용한 문자열 길이체크 및 입력제한  (0) 2012.04.04
실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

 </head>

<script type="text/JavaScript">

function changeSub()

{

bigObj = document.getElementById("big");

var subMenu;

switch(bigObj.selectedIndex)

{

case 0 : subMenu = ["소나타", "아반떼", "K5", "K9"];

break;

case 1 : subMenu = ["pc", "tablet pc", "smart phone"];

break;

case 2 : subMenu = ["청바지", "타이즈", "티셔츠"];

break;

}

// 기존 목록상자의 내용 제거

var medObj = document.getElementById("med");

for(i=medObj.length; i>=0; i--)

{

medObj.remove(i);

}

// 새롭게 정의한 내용 추가

for(i=0; i<subMenu.length; i++)

{

var newnode = document.createElement("OPTION");

newnode.innerText = subMenu[i];

medObj.appendChild(newnode);

}

}

</script>

 <body>

 <SELECT id="big" onChange="changeSub()">

 <OPTGROUP label="대분류">

 <OPTION value="자동차">자동차</OPTION>

 <OPTION value="컴퓨터">컴퓨터</OPTION>

 <OPTION value="옷">옷</OPTION>

 </SELECT>

 <SELECT id="med">

 <OPTGROUP label="중분류">

 </SELECT>

 </body>

</html>

'Web Programming > JavaScript' 카테고리의 다른 글

Javascript를 이용한 문자열 길이체크 및 입력제한  (0) 2012.04.04
실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 계산기 프로그램 </TITLE>
  <META http-equiv="content-type" content="text/html; charset=UTF=8" />
 </HEAD>
 <SCRIPT>
 var n;
 function add(obj)
 { 
 if(n == "+" || n == "-" || n == "*" || n == "/")
 {
temp = obj.value;
if(temp == "+" || temp == "-" || temp == "*" || temp == "/")
{
alert("계산이 불가능합니다!!");
return;
}
 }
 if(n == "/")
 {
if(obj.value=="0")
{
alert("계산이 불가능합니다!!");
return;
}
else
{
n = obj.value;
document.getElementById("sik").value += n;
}
 }
 else
 {
n = obj.value;
document.getElementById("sik").value += n;
 }
 }
 function calcul()
 {
 if (n=="+" || n=="-" || n=="*" || n=="/")
 {
alert("계산이 불가능합니다!!");
 }
 else
 {
document.getElementById("result").value = 
eval(document.getElementById("sik").value);
 }
 }
 function Substr()
 {
document.getElementById("sik").value = document.getElementById("sik").value.substring(0, document.getElementById("sik").value.length-1)
 }
 </SCRIPT>
 <BODY>
 <form>
  계산기 프로그램!!! <p>
  <table border = "2">
  <tr>
  <td> <input type="button" value="1" onClick="add(this)"> </td> 
  <td> <input type="button" value="2" onClick="add(this)"> </td> 
  <td> <input type="button" value="3" onClick="add(this)"> </td>
  </tr>
  <tr>
  <td> <input type="button" value="4" onClick="add(this)"> </td> 
  <td> <input type="button" value="5" onClick="add(this)"> </td> 
  <td> <input type="button" value="6" onClick="add(this)"> </td>
  </tr>
  <tr>
  <td> <input type="button" value="7" onClick="add(this)"> </td> 
  <td> <input type="button" value="8" onClick="add(this)"> </td> 
  <td> <input type="button" value="9" onClick="add(this)"> </td>
  </tr>
  <tr>
  <td> <input type="button" value="0" onClick="add(this)"> </td> 
  <td> <input type="button" value="+" onClick="add(this)"> </td> 
  <td> <input type="button" value="-" onClick="add(this)"> </td>
  <td> <input type="button" value="*" onClick="add(this)"> </td> 
  <td> <input type="button" value="/" onClick="add(this)"> </td>
  <td> <input type="button" value="C" onClick="Substr(this)"> </td>
  </tr> 
  </table>
  
  <input type="button" value="계산" onClick="calcul()">  <input type="reset" value="초기화">
  <p><hr>
  계산식 : <input type="text" id="sik" readOnly> <p>
  계산결과 : <input type="text" id="result" readOnly> <p>
  <hr>
  </form>
 </BODY>
</HTML>


 - calcul.html를 열 때 나오는 화면
 - 기본적인 계산 가능 


수식을 잘못 입력했을때(ex. 연산자 다음에 연산자를 입력했을경우, 나누기 연산 다음에 0을 입력했을 경우 등등...) 계산불가능 alert창 출력

만들고 느낀건데 예외처리 일일히 괜히만들었네요.... try catch 자동지원 해주더라고요 ㅠㅠ

'Web Programming > JavaScript' 카테고리의 다른 글

실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14
JavaScript 기초 01  (0) 2012.03.14
/* made by hahahia */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script>
  var a = prompt("성별", "(남자/여자)로 입력");
  var b = prompt("체중(kg단위)", "");
  var c = prompt("키(cm단위)", "");
  c = c/100;
  var BMI = b / (c*c);
  if(a=="남자")
  {
  document.write("BMI 지수는 " + BMI + " 입니다<br>");
  if(BMI < 20.0) 
  document.write("저체중입니다");
  else if(BMI < 25)
  document.write("정상입니다");
  else
  document.write("과체중");
  }
  else
  {
  document.write("BMI 지수는 " + BMI + " 입니다<br>");
  if(BMI < 18.5)
  document.write("저체중입니다");
  else if(BMI < 25)
  document.write("정상입니다");
  else
  document.write("과체중");
  }
  </script>
 </head>

 <body>
  
 </body>
</html>
 


            - 첫번째 창 -> 성별 구분
 


       - 두번째 창 -> 몸무게 입력
 


        - 세번째 창 -> 키 입력

 

       
        - 네번째 창 -> document.write를 이용하여 BMI지수가 나오고 IF 문에 따라서             저체중, 정상, 비만을 측정하여 웹 페이지에 결과값을 띄운다. 

'Web Programming > JavaScript' 카테고리의 다른 글

실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14
JavaScript 기초 01  (0) 2012.03.14

1. alert
- 함수사용 문법 -> alert(string);
- 선언 내장 객체 -> window
- 메시지 전달 용 경고 창을 띄운다. window 생략 가능
- 사용자가 확인버튼, (혹은 ok)을 누를때 까지 alert 이후의 스크립트 내용이나

html 문서 내용에 대한 실행을 잠시 중단함
 

사용방법
<SCRIPT>
alert("alert창 출력!!");
</SCRIPT> 




사용되는 경우?

 -> 폼 입력(id, pw 입력칸)에서 잘못된 자료가 발견된 경우

ex) 비밀번호가 틀렸거나 아이디를 적지 않을경우..

 -> 계산 결과가 오류를 발생시키는 경우

 -> 특정 서비스가 주어진 환경에서 수행 불가능할 때 사용자 경고

ex) 당신은 admin 페이지에 권한이 없습니다. 등.

2. write
- 함수 사용 문법 -> write(string);
- 선언 내장 객체 -> document
- 웹 브라우저에 출력한다.

사용방법
 

<SCRIPT>

document.write("write 출력!!!");

</SCRIPT> 


사용되는 경우
말그대로 현재 웹 브라우저에 출력하는 것이다. javascript에서 무언가를 웹 브라우저에 출력하고자 할때 document.write를 이용한다. 

3. prompt
- 함수사용 문법 -> prompt(string, initial)
- 선언 내장 객체 -> window
- 대화 상자에서 입력 받은 내용을 리턴한다.(입력 취소시 NULL 리턴)
- string : 보여주고 싶은 질문 메시지
- initial : 초기 값(문자열)

사용방법

<script> 
prompt("이름이 무엇입니까","홍길동");
</script>
 
invalid-file

undefined

'Web Programming > JavaScript' 카테고리의 다른 글

실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14
JavaScript 기초 01  (0) 2012.03.14

JavaScript의 특징

- 객체 기반형 언어이다.
- HTML문서에 혼합하여 사용한다.
- 변수의 형(type)을 지정할 필요가 없다.
- 일반 유저가 프로그래머 수준의 핸들링을 할 수 있다. 
- 스크립트 언어이기 때문에, 디버깅을 할 수 없다. 일일히 웹브라우저로 테스트해야하는 불편함이 따른다.

<HTML>
 <HEAD>
  <TITLE> 자바스크립트 시작 </TITLE>
 
  <SCRIPT type="text/javascript">  // type="text/javascript" 생략가능
      document.write("자바스크립트의 예입니다. <br>");
                  // document(현재 페이지의                  객체 . write(출력)                   // ("....... <br>" <- 여기안에는 html문법을 사용해도 됨)
  </SCRIPT> 
</HEAD>
<BODY>
</BODY>
</HTML> 

JavaScript Source Code Hiding
- 자바스크립트는 HTML소스 코드에 반드시 포함되어 있어야 하므로 코드 복사와 재사용에 대한 보호책이 없다. 
- 따라서 완전히 숨기기는 힘들지만 최대한 숨기게끔 할 수 있다.

1. 프레임을 사용하여 숨기기
- 2개 이상의 프레임을 만들어서 프레임 크기가 0인 곳에 html 문서 저장
- 각 프레임 페이지에서는 부모프레임을 체크하여 직접적인 프레임 진입을 방지
2. 마우스 오른쪽 메뉴, 드래그, 선택복사 금지하기
<Body oncontextmenu='return false' ondragstart='return false' onselectstart = 'return false> 순서대로 마우스 오른쪽 메뉴 금지, 드래그 금지, 선택복사 금지
3. 외부파일 사용하여 숨기기
- 외부파일인 *.js 파일에 JavaScript 소스코드 저장
<SCRIPT type = "text/javascript" src="./script/sample.js"></SCRIPT>
 

'Web Programming > JavaScript' 카테고리의 다른 글

실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14
JavaScript 기초 01  (0) 2012.03.14

+ Recent posts