본문 바로가기

JavaScript

JavaScript 기본


 alert : 메세지를 뛰워준다.

   ex> <body onload="alert('Hello, I am your pet rock.');">        // 폐이지가 뜰때 메시지창을 뛰어서 알림 이건 바디가 실행될때 메세지를 띄우라는 말

 

 onload : 웹 폐이지가 로딩을 끝냈다고 알려준다.

 

 onclick : 마우스 클릭에 반응하는데 사용되는 자바스크립트 이벤트

 

 3개의 기본 데이터 타입 : text , number, boolean

var 키워드는 변수를 생성할 때 사용되고, const는 상수를 생성할 때 생성

데이터 타입은 해당 데이터를 특정 값으로 설정할 때 확정되며, 변수의 경우에는 데이터 타입이 변경될 수 있다.

 

 parseInt() , parseFloat() : 텍스트를 숫자로 변환하기 

 

 toFixed() : 소수점자리에서 반올림

      ex> toFixed(2) : 소수점 두째자리에서 반올림

 

 좋은 변수 코딩 습관

     상수는 모두 대문자로, 변수들은 소문자낙타표기법으로..

 

 isNaN() : 값이 숫자가 아닌지를 체크

 

 타이머 : setTimeout ( 타이머 코드 , 타이머 시간 );

          ex> setTimeout("alert('Wake up!');", 600000);

 

 타이머의 반복적 실행 : setInterval();

                 코드의 구성은 타이머와 같다.

          ex> val timerID = setInterval("alert('Wake up!');", 600000);

               이런 주기적인 반복코드를 정지시킬려면 clearInterval(); 함수를 호출하여 정지시킨다.

         ex> clearInterval(timerID);

 

 클라이언트 윈도우 넓이 설정

        document.body.clientHeight   :   높이 설정

        document.body.clientWidth   :   가로 설정

 

 쿠키 사용여부를 확인하는 함수

      navigator.cookieEnabled

 

 함수 : 문제를 해결하기 위해 쪼개는 단위

      function + 함수명 + ( ) + {

      함수 몸체

      }

 

 폼 데이터에 접근하기

      ex> <input id="zipcode" name="zipcode" type="text" size="5" onclick="showIt(this.form)" />

             접근은 아이디로 하고 값을 넘겨주는 폼의 값접근은 name속성을 사용하여 저장

             function showIt(theForm) {

              alert(theForm["zipcode"].value);

           }

 

 폼의 데이터 검사

     onchange : 데이터의 폼에 값이 입력되었을때 확인

        ex> <onchange="validateNonEmpty(this);" />

     onblur : 데이터의 폼에 값이 변경이 안되어도 무조건 확인

        ex> <onblur="validateNonEmpty(this);" />

 

 정규 표현식 : / + 표현식 + /   <= 슬러시 안에 표현한다.   <== 데이터의 주고 받기나 서버에 데이터를 보내기 전에 폼에 들어간 값을 검사하기 위해서 존재한다.

                       .  :  newline이외의 어떤문자와도 일치한다.

                     \d :  메타문자는 역슬래시로 시작, 어떤숫자가 와도 일치

                    \w : 문자와 숫자가 결합된 어떤 문자가 와도 일치

                     \s : 공백문자와 일치

                       ^ : 패턴의 시작을 알림

                       $ : 패턴의 끝을 알림

 

                      :  수량한정자

                      *  : 선행 하위 패턴은 0번 혹은 그 이상 나타나야 한다.

                      +  : 선행 하위 패턴은 1번 혹은 그 이상 나타나야 한다.

                      ?  : 선행 하위 패턴은 0 혹은 1번만 나타나야 한다.

                     {n} : 선행 하위 패턴은 정확히 n번 나타나야 한다.

                     {min, max} : 최소에서 최대범위지정

                   {this|that} : 이것 아니면 저것을 선택할 수 있도록 한다.

                    ex> 2자리나 4자리만 입력하도록 한다.

                           /^(\d{2}|\d{4})$/

                      () : 그룹 문자는 메타문자와 함께 혹은 단일로 하위 패턴을 구성한다.

                   ex> /^\d{5}-\d{4}$/ : #####-#### 의 형태

                      [문자 클래스] : 긴 문자열의 폼을 컨트롤 하기 위해서 있는 형식..

 

 기본 형식

<script language="javascript" src="파일명,js">

    <!--

       내용..

     //-->

</script>

 

 기본 출력

     document.write("내용");

 

 변수 기본형식

     var 변수명 = 기본값;

 

 팝업창의 기본 형식

     window.open("새로 나타낼 파일명","윈도우이름","속성");

     ex) function winOpen(){

          mywin=window.open("b.html","new","width=250,height=300");

         }

 

 Document 속성, 이벤트 핸들러

    <script language="javascript">

        <!--

           function myBackground(color){

                 document.bgcolor = color;

           }

         //-->

     </script>

 

      <a onmouseover = "document.bgcolor='pink'">분홍색배경</a>

 

 홈폐이지등록 버튼형식과 이미지형식

  1. <form>

      <input type = "button" value="시작폐이지등록" onclick="this.style.behavior='url(#default#homepage)';

        this.setHomePage('홈피로등록할주소');">

     </form>

  2.  <a style="cursor:hand" hrefonClick="this.style.behavior='url(#default#homepage)';

        this.setHomePage('홈피로등록할주소');">

       <img src="시작이미지" border="0"></a>

'JavaScript' 카테고리의 다른 글

게시판 플젝에서 배운 기본 javascript  (0) 2011.04.05