본문 바로가기
프로그래밍/java script

java script 문법 정리 1

by -현's- 2012. 3. 21.
반응형

●자바스크립트는 인터프리터형 언어이다. 클라이언트측 스크립트이다.



●클라이언트 스크립트는 마우스나 키오드의 조작에 의해 표시 내용이 바귀는 웹페이지에 많이 이용한다. 웹브라우저에서 실행되기 때문에 기볹거으로 통신이 발생하지 않기 때문에 서버측에 부하를 주지 않는다.



●클라이언트 스크립트는 서버에 데이터를 보존하거나 다른 사용자와 데이터를 공유할 수 없다.



●주석 -  ' /* ~~~ */ ' , ' //~~ ' 를 쓴다.



●웹디자인할때 <font>태그보다는 css를 쓰는게 좋다.



●문자열 표시 - window.documnet.write() 사용한다.
ex)
<html>
<head>
<title>~~</title>
</head>
<body>
<script type="text/javascript">
<!--
window.document.write("Hello world");
//-->
</script>
</body>
</html>



●window는 생략가능하다.



●'<!--  ~~  //-->' 쓰는 이유
- 자바 스크립트를 처리하는 브라우저에서는 '//-->'이게 적용되서 주석 기호 무시하고 처리를 한다.
자바스크립트를 처리하지 못하는 브라우저에서는 '<!-- -->'를 읽어들여서 주석으로 처리한다.
'//'는 자바스크립트의 주석이기 때문이다.



●대화상자 표시하기 - window.alert() 사용. ok버튼이 있는 경고창이 발생한다.
ex)
window.alert("hello world");



●이벤트 핸들러를 사용할때는 <meta>태그를 기술한다.
<meta http-equiv="Content-Script-Type" content="text/javascript">



●onclick - 폼 버튼 등을 클립했을 때의 이벤트 핸들러이다.
<input type="폼종류" value="값" onclick="자바스크립트 코드">
ex)
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/script">
</head>
<body>
<input type="button" value="버튼" onclick="alert('Hello World')">
</body>
</html>



● " " 사이에 문자열을 쓸때는 ' '로 문자열을 둘러싼다.
ex)
onclick="alert('Hello World')"



●onmouseover - 마우스포인터가 통과했을 때의 이벤트 핸들러
ex)
<a href="~" onmouseover="자바스크립트코드">~</a>



●오브젝트(object) - 조작의 대상이 되는 부품과 같은것이다.



●프로퍼티(property) - 오브젝트의 상태나 속성을 뜻한다. 참조나 설정이 가능하다.



●프로퍼티 참조와 설정 - window오브젝트의 프로퍼티를 참조하려면 다음과 같이 '.(마침표)'로 연결한다.
ex)
window.defaultStatus,  window.document.fgColor



●메서드 - 오브젝트에 대한 처리를 정리한 것이다.
ex)
window.alert()



●자바스크립트 코드를 별로의 파일에 작성하기
- 자바스크립트 코드가 길어지거나 여러페이지에 동일한 스크립트를 사용할 때 편리하다. 확장자는 '.js'로 쓴다. 될 수 있으면 html 파일과는 다른 장소에 저장하는 것이 좋다.



●html에서 자바스크립트 파일 호출하기
ex)
<html>
<body>
<script type="text/javascript" src="js/abc.js">
</script>
</body>
</html>



●자바스크립트를 기술하는 장소
①<body>태그 사이 - html문서에 실행결과를 표시하려면 <body>태그와 </body>태그 사이에 기술한다.

②<input>과 같은 속성안 - 이벤트 핸들러에서 직접 호출할 때는 속성안에 기술한다.

③<head>태그 사이 - 이벤트 핸들러에 지정한 함수를 호출할 때는 <head>와 </head>사이에 기술한다.



●자바스크립트에서는 변수에 대입되는 값에 따라 변수의 형이 자동으로 정해진다.
ex)
a='1';
a=1;
a=null;
a=true;
a= -10;



●typeof 연산자 - 데이터타입을 조하할 수 있다.
ex)
a = typeof(12);
document.write(a);       //number 출력

a = typeof("abc");
document.write(a);        //string 출력

a = typeof(true);
document.write(a);        ////boolean 출력

a = typeof(window);
document.write(a);        //object 출력

a = typeof(null);
document.write(a);        //object 출력

a = typeof(undefined);
document.write(a);        //undefined출력


●delete 연산자 - 변수를 삭제하고 미사용 상태로 되돌린다. 삭제에 성공하면 true, 실패하면 false를 반환한다.
ex)
a=1;
delete a;


●미정의 형(undefined) - 변수가 미사용상태라는 것을 의미한다. undefined는 변수에 대입할 수 없다.


●문자열(string) - 자바스크립트에서 문자열 형은 " ", ' ' 로 둘러싼다.
ex)
a="abc";
a='abc';


●문자열 연결 - '+' 를 사용하여 연결한다.
ex)
a="abc";
b="def";
c=a+b;


●문자열 안에서 ' 를 쓸때는 " 로 문자열을 둘러싸고, " 를 쓸때는 ' 로 둘러싼다.
ex)
a = 'abc"def"gh';
b = "abc'def'gh";


반응형

'프로그래밍 > java script' 카테고리의 다른 글

javascript 체크박스(checkbox) 하나만 선택, 모두 선택/해제  (0) 2013.11.05
javascript DOM2  (0) 2013.08.13
javascript DOM1  (0) 2013.08.12
java script 문법 정리 3  (0) 2012.03.22
java script 문법 정리 2  (0) 2012.03.21

댓글