[JAVA SCRIPT] 함수,기본 문법

[JAVA SCRIPT] 함수,기본 문법

2012. 4. 25. 12:51ㆍNOTE/IT

for(var each_property in objectName) {
    document.write(objectName[each_property]);
}

<html>
<head>
<script language="javascript">
    function Print(object) {
        for(var each_property in object) {
            document.write(each_property + "=" + object[each_property] + "<p>")
        }
    }
    function fruit(f_name, p_name, price) {
       this.f_name = f_name;
       this.p_name = p_name;
       this.price = price
       this.Print = Print
    }

</script>
</head>
<body>
<script language="javascript">
       myfruit = new fruit("딸기", "박미숙", "1000원")
       otherfruit = new fruit("배", "개똥이", "2000원")
       document.write("myfutie<p>")
       Print(myfruit)
       document.write("otherfruit<p>")
       Print(otherfruit)
</script>

자바스크립트는 다른 programming language와는 다르게 배열을 지원하지 않습니다. 그렇기 때문에 배열을 사용하려면 별도의 생성자 함수를 지정해 주어야만 합니다.

function makeArray(n) {
    this.length = n;
    for(var i=1; i<=n; i++)
        this[i] = 0;
    return this;
}

<html>
<head>
<script language="javascript">
   function makeArray(n) {
       this.length = n;
       for(var i=1; i<=n; i++)
           this[i] = 0;
       return this;
   }
</script>
</head>
<body>
<script language="javascript">
    array = new makeArray(5);
    array[1] = "Array 1"
    array[2] = 10
    array[3] = true
    array[4] = "배열 테스트"
    array[5] = 10.123
    document.write("Array Test<p>");
    for(var i=1; i<=5; i++){
       document.write("배열" + i + " : " + array[i] + "<p>");
    }
</script>

객체

1. eval()

eval() 함수는 문자열을 받아 숫자로 변환한 뒤 그 결과값을 반한해주는 함수입니다.
자바스크립트가 사용자로 부터 입력을 받아들일때 무조건 문자열로 인식하여 받아들이기 때문에, 만약 더하기(+), 빼기(-)등과 같은 연산이 필요하다면 반드시 사용되어야 하는 함수입니다.
굉장히 많이 사용되는 함수이므로 꼭 기억해둡시다!!!
사용자로 부터 문자열 입력을 받아 계산결과를 반환하는 간단한 예제를 하나 보도록 하겠습니다.

<html>
  <head>
   <script language="javascript">
       var eval_string
       eval_string =prompt("수식을 입력하세요")
       document.write("결과값" + eval(eval_string))
   </script>
  </head>
  <body>
  </body>
</html>

2. parseInt()

parseInt() 함수는 숫자로 구성된 문자열을 입력받아 지정한 진법으로 변환한 뒤 그 값을 반환해 주는 함수 입니다.
즉, 입력된 문자열을 2진수, 8진수, 16진수 등으로 바꾸어 반환해주는 함수 입니다.
그 형식은 다음과 같습니다.

parseInt(string, nBase)

다음과 같이 사용할 경우에는

str1 = "1.234";
parseInt( str1 );

단순히 str1에 있는 문자열을 정수로 변환하는 역할을 하게 됩니다. 즉 1이라는 결과값을 가지게 됩니다.
만약 abc와 같은 숫자가 아닌 값이 들어왔을 경우는 NaN으로 그 결과값을 리턴합니다.

예제를 하나 보도록 하겠습니다.

<html>
  <head>
   <script language="javascript">
       var str1="1234"
       document.write("결과값" + parseInt(str1))
   </script>
  </head>
  <body>
  </body>
</html>

3. parseFloat()

parseFloat()는 문자열을 입력받아 부동소수점으로 변환하여 그 값을 반환해 주는 함수 입니다.
그 형식은 다음과 같습니다.

parseFloat(string)

마찬가지로 예제를 보도록 하겠습니다.^^

<html>
  <head>
   <script language="javascript">
       var str1="1234e5"
       document.write("결과값" + parseFloat(str1))
   </script>
  </head>
  <body>
  </body>
</html>

4. escape()

escape()는 일반 문자, 특수문자, 숫자등을 아스키문자(ASCII) 값으로 바꾸어 그 값을 반환하는 함수 입니다.
예제는 생략하도록 하겠습니다.

5. Unescape()

Unescape()는 아스키 문자값을 ISO-Latin-1 문자셋으로 바꾸어 주는 함수 입니다.
즉, escape()의 반대입니다.

6. isNaN()

isNaN()은 주어진 값이 숫자인지 아닌지 여부를 판단하는 함수 입니다.
값이 숫자일 경우는 false를 숫자가 아닐 경우는 true를 그 결과값으로 리턴하게 됩니다.

<html>
<head>
<script language="javascript">
var str1="1234e5"
document.write(isNaN(str1))
</script>
</head>
<body>
</body>
</html>

7. isFinite()

isNaN()은 주어진 값이 유리수인지 아닌지 여부를 판단하는 함수 입니다.
값이 유리수일 경우는 true를 유리수가 아닐 경우는 false를 그 결과값으로 리턴하게 됩니다.

<html>
<head>
<script language="javascript">
var str1="1234e5"
document.write(isFinite(str1))
</script>
</head>
<body>
</body>
</html>

ARRAY 객체 - 배열을 만드는데 사용

자바스크립트는 원래 배열을 제공하지 않습니다. 그러나 Array 개체를 사용하면 배열을 사용할 수가 있습니다.
선언 방식은 다음과 같습니다.

변수명 = new Array();
변수명 = new Array(첨자);
변수명 = new Array(초기화할 리스트);
변수명 = [초기화할 리스트]

속성 의미
length 배열의 크기
prototype Array 객체를 이용하여 배열을 생성하였을 경우 생성된 배열끼리 서로 공유할 수 있는 속성 추가
예: Array.prototype.myArray = null;

메소드 의미
join() 배열을 하나의 문자열로 만들어 줌
reverse() 배열에 입력된 값의 순서를 역순으로 바꿈
sort() 배열의 값을 정렬
concat(array) 두 개의 배열을 하나로 만들기
slice(start, end) 배열의 일부를 추출하기
주의사항 : start에 들어가는 숫자는 배열의 처음 시작을 0으로 보았을때의 숫자이고, end에 들어가는 숫자는 배열의 처음 시작을 1로 보았을때의 숫자임.
예 : 배열에 저장된 숫자가 0 1 2 3 4 5 일 경우
slice(2,5)라고 하면 추출되는 숫자는 2 3 4

<html>
<head>
<script language="javascript">
objects = new Array(3)
objects[0] = "yellow"
objects[1] = "blue"
objects[2] = "white"
document.write("object 배열<p>")
document.write("Inital : " + objects.join(" / ") + "<br>")
document.write("reverse : " + objects.reverse().join(" / ") + "<br>")
document.write("sort : " + objects.sort().join(" / ") + "<br>")
document.write("extract : " + objects.slice(0,2))
</script>
</head>
<body>
</body>
</html>

DATE 객체 : 날짜와 시간을 다루는데 사용

Date 메소드들은 사용자 시스템 시계(사용자의 컴퓨터에서 실행하는 시계)에 대한 인터페이스의 자바스크립트의 캡슐화인 Date 객체를 조작하는데 사용됩니다.
Date 객체는 다음과 같이 new 연산자를 사용하여 만들어 낼 수 있습니다.

today = new Date();
today = new Date(년, 월, 일)
today = new Date(년, 월, 일, 시, 분, 초)

Date 메소드의 범주는 크게 설정(set), 구하기(get), 변환(conversion)등의 세 가지가 있습니다.
설정과 구하기는 메소드 이름 앞에 set이나 get이 붙기 때문에 쉽게 구별할 수 있으며, 그 역할은 날짜 변수를 설정(변경)하거나, 날짜를 변수로 구하는 것 등입니다.
변환 메소드는 약간 이해하기가 어려운데요, parse(), toGMTString(), toLocaleString(), UTC()를 포함합니다.
parse()와 UTC()는 주어진 Date 객체를 1970년 1월 1일 00:00:00 이후의 밀리 초 수로 변환합니다.
toGMTString()과 toLocaleString()은 1970년 1월 1일 00:00:00 이후의 밀리초 수를 날짜로 변환합니다.

속성 의미
prototype 속성 추가
예: Date.prototype.weekday = null;

메소드 의미
getDate()
getUTCDate() 일, 결과값은 1~31 중 한개의 숫자
getDay()
getUTCDay() 요일에 해당하는 수치값을 반환

0=일요일
1=월요일
2=화요일
3=수요일
4=목요일
5=금요일
6=토요일

getFullYear()
getUTCFulYear() 네자리 숫자의 연도, 결과값은 1900과 같은 식으로 나타남.
getHours()
getUTCHours() 시, 결과값은 0~23 중 한개의 숫자
getMilliseconds()
getUTCMilliseconds() 밀리초, 결과값은 0~999 중 한개의 숫자
getMinutes()
getUTCMinutes() 분, 결과값은 0~59 중 한개의 숫자
getMonth()
getUTCMonth() 월(0=1월, 1=2월...)
getSeconds()
getUTCSeconds() 초, 결과값은 0~59 중 한개의 숫자
getTime() 1970년 1월 1일 이후 시간을 1000분의 1초로 나타낸값
getTimeZoneOffset() 사용자 지역 시간과 GMT의 차이(분 단위)를 반환, 결과값은 0~1439 중 한개의 숫자
getYear() 1900년 이후의 연도, 결과값은 1900~1999년도 사이는 0~99, 그 이후는 네 자리 숫자의 년도
parse() 주어진 날짜와 1970년 1월 1일의 차이를 밀리초수로 반환
문법 : Date.parse(dateVariable)
setDate()
setUTCDate() Date객체의 날짜 변경, 결과값은 Milliseconds단위의 날짜
문법 : dateVariable.setDate(dayNumber)
setFullYear()
setUTCFulYear() 네자리 숫자로 년도 설정, 결과값은 Milliseconds단위의 날짜
setHours()
setUTCHours() 0~23사이의 숫자로 Date객체의 시간 변경, 결과값은 Milliseconds단위의 날짜
문법 : dateVariable.setHours(hoursOfDay)
setMilliseconds()
setUTCMilliseconds() 0~999사이의 숫자로 밀리세컨트 설정, 결과값은 0~999 중 한개의 숫자
setMinutes()
setUTCMinutes() 0~59사이의 숫자로 Date객체의 분 변경, 결과값은 Milliseconds단위의 날짜
문법 : dateVariable.setMinutes(minutes)
setMonth()
setUTCMonth() 0~11사이의 숫자로 Date객체의 월 변경, 결과값은 Milliseconds단위의 날짜
문법 : dateVariable.setMonth(month)
setSeconds()
setUTCSeconds() 0~59사이의 숫자로 Date객체의 초 변경, 결과값은 Milliseconds단위의 날짜
문법 : dateVariable.setSeconds(seconds)
setTime() Date객체의 밀리초 단위로 날짜 설정, 결과값은 Milliseconds단위의 날짜
문법 : dateVariable.setTime(time Value)
setYear() 두자리 혹은 네자리 숫자값으로, Date객체의 년 변경, 결과값은 Milliseconds단위의 날짜
문법 : dateVariable.setYear(year)
toGMTString()
toUTCString() 날짜를 문자열로 변환하고 GMT 표기를 사용
문법 : dateVariable.toGMTString()
toLocaleString() 현재의 지역 시간대에 기초해서 주어진 날자 변환
문법 : dateVariable.toLocaleString()
toString() 개체가 기억하고 있는 날짜, 시간을 '요일 월 시:분:초 연도'의 형태로 보여줌
UTC() 주어진 날자에서 1970년 1월 1일 이후 지난 밀리초 수를 나타내는 수치를 반환
문법 : Date.UTC(year, month, day)
valueOf() 1970년 1월 1일 자정 이후의 밀리세컨드 숫자

예제를 통해 사용법을 알아보겠습니다.
<html>
<body>
<script language="javascript">
today = new Date()
document.write("오늘 날짜는", today.getYear(), "년", today.getMonth() + 1, "월", today.getDate(), "일")
document.write("입니다.<p>")
document.write("현재 시간은", today.getHours(), "시", today.getMinutes(), "분")
document.write("입니다")
</script>
</body>
</html>

Document 객체

Mins 203.241.151.50http://www.minswa.com/zbxe/index.php?document_srl=545

title 문서의 제목

location 문서의 URL 위치

lastModified 문서가 마지막으로 수정된 날짜

referer 링크로 현재 문서에 왔을 때 이전 문서의 URL 위치

bgColor 문서의 배경색

fgColor 문서의 전경색

linkColor 문서에서 링크를 표시하는 색

alinkColor 링크를 클릭했을 때 나타나는 색

vlinkColor 이전에 방문했던 링크를 표시하는 색

anchors 문서에 있는 표식들의 배열

forms 문서에 있는 입력 양식들의 배열

links 문서에 있는 링크들의 배열

cookie 클라이언트측의 PC에 저장한 정보

images 문서에 있는 이미지들의 배열

applets 문서에 있는 자바 애플릿들의 배열

embeds 문서에 있는 플러그인들의 배열

layers 문서에 있는 레이어들의 배열

메소드 의미

open() 문서에 데이터를 출력하기 위해 준비시키는것

close() 문서에 데이터를 출력하는 것을 마무리

clear() 브라우저에서 문서 지우기

write() 문서에 데이터 출력

writeln() 문서에 데이터 출력(줄바꾸기 포함)

getSelection() 현재 선택된 문자열을 리턴하는 메소드

<html>

<head>

document.write("문서의 최근 갱신 날짜는 : " + document.lastmodified.fontcolor('red') + "입니다<br>")

document.write("현재 문서가 있는 위치는 : " + document.location + "입니다<br>")

</script>

</head>

<body>

</body>

</html>

<html>

<head>

document.bgColor = "red"

function redColor() {

document.bgColor = "red"

}

function oraColor() {

document.bgColor = "orange"

}

function blueColor() {

document.bgColor = "blue"

}

function yellColor() {

document.bgColor = "yellow"

}

function greeColor() {

document.bgColor = "green"

}

function darColor() {

document.bgColor = "darkblue"

}

function vioColor() {

document.bgColor = "darkviolet"

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

다음 예제는 현재 페이지로 들어오기 바로 직전에 어느 사이트에 있었는지 그 URL을 보여주는 예제입니다.

<html>

<head>

if (document.referrer != '')

{

document.write("You just visited " + document.referrer)

}

</script>

</head>

Where did I come from

</body>

</html>

String 객체 : 문자열을 다룰때 사용하는 객체

string 객체는 여러 메소드를 결합해서 사용할 수도 있습니다.

사용법은 간단합니다. 한 메소드를 끝내고 나서, 마침표를 찍고 나서 다른 메소드를 붙이기만 하면 됩니다.

str.charAt(i).fontcolor();

한가지 유의할 점은, 한글은 한 글자가 2 Byte, 영문은 한 글자가 1Byte로 작성됩니다.

속성 의미

length 공백문자를 포함한 문자열의 길이를 바이트 단위로 알려주는 속성

주의 : 넷스케이프는 byte단위로, 익스플로러는 글자수로 단위를 매깁니다. 그러므로 영문의 경우

는 상관없지만, 한글일 경우 두 브라우저사이에 나오는 값에 차이가 있습니다.

메소드 의미

anchor() 기능 문법 : string.anchor(anchorName);

big() 글자를 좀 더 크게

blink() 깜빡임 문법 : string.blink();

bold() 볼드체 문법 : string.bold();

charAt() 지정된 문자열에서 사용자가 매개변수로 입력한 수만큼의 위치에 있는 문자열의 문자

를 리턴 문법 : string.charAt(index);

문법 : index는 0과 문자열의 길이보다 작은 값 사이의 수

charCodeAt(index) 4.0 문자열의 ASCII Code 값을 출력, 인덱스값을 생략하면 0번위치의 문

자 값 출력 문법 : asc = "java script".charCodeAt(5);

문법 : asc 의 6번째 문자, 즉, s의 아스키 코드값(83)을 출력한다.

concat("string") 4.0 두 문자열을 하나의 문자열로 연결

문법 : str = "Java Script".concat("Programming");

fixed() 타자기체

fontcolor() 글자색 문법 : string.fontcolor(color);

fontsize() 글자크기

fromCharCode() 4.0 ASCII Code 값에 해당하는 문자를 출력

문법 : String.fromCharCode(num1, num2,...);

문법 : ch = String.fromCharcode(65) : ch에 아스키 코드값 65에 해당하는 A가 입력됨

indexOf() 문자열에서 지정된 문자의 위치값을 출력한다.

문법 : string.indexOf(searchValue, [formindex]);

문법 : searchValue는 검색하고자 하는 문자 또는 문자열

italics() 이탤릭체 문법 : string.italics();

link() 기능 문법 : linkText.link(href);

lastIndexOf() 문자열에서 지정된 문자의 위치 값을 출력한다.

slice(start,end) start에서 end까지의 문자열을 추출한다.

+값은 앞에서부터, -값은 뒤에서부터

small() 글자를 좀더 작게

split() 4.0 지정된 문자열을 사용자가 지정한 문자로 구분하여 리턴

문법 : "-_- 123 45".split(" ",2); : 공백을 기준으로 앞에 2개만 분리, 결과값 str = "-_-,123"

strike() 글자 가운데에 줄 긋기 문법 : string.strike();

sub() 아래첨자

substr(start, length) 4.0 시작 인덱스에서 지정한 길이만큼 문자열을 분리

substring() 지정된 문자열에서 사용자가 지정한 변수의 범위내에 존는 문자열 리턴

문법 : string.substring(indexA, indexB);

문법 : indexA와 indexB는 0과 문자열의 속성 사이의 수

sup() 위첨자

toLowerCase() 지정된 문자열을 소문자로

toUpperCase() 지정된 문자열을 대문자로

document.write("큰글씨".big() + "

document.write("작은글시".small() + "

document.write("껌뻑이는글씨".blink() + "

document.write("두꺼운글씨".bold() + "

document.write("타자기글씨".fixed() + "

document.write("이탤릭체".italics() + "

document.write("윗첨자".sub() + "

document.write("아래첨자".sup() + "

document.write("녹색글씨".fontcolor("green") + "

document.write("글자크기5".fontsize(5) + "

var StringOtherMethod = "javascript">

document.write(StringOtherMethod + "문자열에서 2번째 위치에 있는 문자는" + StringOtherMethod.charAt(2) + "입니다

document.write(StringOtherMethod + "문자열에서 왼쪽에서 검색해서 c문자열이 위치한 곳은" + StringOtherMethod.indexOf("c") + "입니다

document.write(StringOtherMethod + "문자열에서 오른쪽에서 검색해서 c문자열이 위치한 곳은" + StringOtherMethod.lastIndexOf("c") + "입니다

document.write(StringOtherMethod + "문자열에서 처음 시작위치가 3이고 마지막 위치가 6인 문자열은" + StringOtherMethod.substring(3, 6) + "입니다

document.write("제1장".link("#chapter1") + "

document.write("제2장".link("#chapter2") + "

document.write("제 1장 WWW 서비스".anchor("chapter1")" + "

document.write("야후코리아".link("http://kr.yahoo.com")" + "

document.write("알타비스타".link("http://www.altavista.com")" + "

확장자 검색 예)

sendit()

{

var file_name;

var m;

file_name=document.iform.txtFileName.value;

m=file_name.substring(file_name.lastIndexOf(".")+1);

if (file_name==""){

alert("그림화일을 선택하세요.");

return false;

}else if(m=="bmp" || m=="BMP"){

alert("BMP파일은 올릴수 없습니다.");

return false;

}

document.iform.submit();

}

popup function

http://www.happyscript.com/

<!--

function open_popup(url,name,width,height,left,top,scrollbars,resizable) {

window.open(url,name,'width='+width+',height='+height+',left='+left+',top='+top+',scrollbars='+scrollbars+',resizable='+resizable+'');

}

//-->

</script>

<!--

팝업으로 값을 넘기는 부분

open_popup(주소,이름,가로,세로,left값,top값,스크롤바,크기조절);

= 주소 : 팝업에서 열려질 페이지 주소

= 이름 : 팝업창의 이름으로 이 이름이 각각 다르면 각각의 팝업이 열려짐

= 가로 : 팝업의 가로크기

= 세로 : 팝업의 세로크기

= left값 : 브라우저 죄측과 팝업과의 거리

= top값 : 브라우저 상단과 팝업과의 거리

= 스크롤바 : 스크롤바 존재 유(yes)/무(no)

= 크기조절 : 팝업창의 크기조절 유(yes)/무(no)

## 가로, 세로, left값, top값 이 4가지엔 입력값이 숫자므로 '(어퍼스트로피)가 없어도 됨

//-->

저작자표시

'NOTE > IT' 카테고리의 다른 글

[HTML] 종합 문법 (0)	2012.04.25
[JAVA SCRIPT]alert(),confirm(),prompt() (0)	2012.04.25
[JAVA SCRIPT]문자열 검색 (0)	2012.04.25
[JAVA SCRIPT] 이벤트 (0)	2012.04.25
[HTML] 웹 폰트 적용 (0)	2012.04.25

...__....

...__....

태그

최근글

댓글

공지사항

아카이브

'NOTE > IT' 카테고리의 다른 글

관련글

티스토리툴바