POPULAR POSTSMORE POST

    -

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JS] 자바스크립트 3일차 요점정리
    Frontend 2019. 2. 9. 23:14

    -내장함수-

    자주 사용되어지는 공통 기능들에 대하여 미리 구현되어진 함수. 
    웹 브라우저에 미리 내정되어 있으므로 개발자는 함수의 정의 없이 함수를 호출하고 적절한 리턴값을 받아 활용할 수 있다.


    eval(문자열)
    주어진 문자열을 수식으로 변환하여 리턴한다.
    eval("1+1"); -> 1+1계산
    Number(문자열)
    주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.
    주어진 문자열이 100.1일 경우 실수 100.1을 리턴
    parseInt(문자열)
    주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.
    주어진 문자열이 100.1일 경우 정수 100을 리턴
    isNaN(문자열)
    주어진 문자열이 숫자형식이 아니면 true, 숫자형식이면 false를 리턴
    !isNaN: 숫자형식이면 true, 숫자 형식이 아니면 false
    alert(문자열)
    주어진 문자열을 확인 대화창으로 화면에 표시한다.
    confirm(문자열)
    주어진 문자열이 표시되는 확인/취소 대화창을 화면에 표시한다.
    prompt(문자열)
    주어진 문자열이 제목으로 표시되는, 값을 입력받기 위한 대화창이 화면에 표시된다.



    -문자열에 대한 숫자, 수식 변화-

    ...javascript
    Number eval(string)
    ...

    cf)
    리턴값 형식    함수이름(파라미터 형식)
    Number, 
    string, 
    boolean, 
    void(리턴값 없음)



    - 주어진 수식 형태의 문자열을 실제로 계산된 결과값을 리턴한다.


    ...javascript
    Number Number(string)
    ...

    - 주어진 숫자 형태의 문자열을 Number타입의 값으로 변환하여 리턴한다.

    정수와 실수를 모두 지원한다.



    ...javascript
    Number parseInt(string)
    ...

    - 주어진 숫자 형태의 문자열을 Number타입의 값으로 변환하여 리턴한다. 

    - 정수만 지원한다. 문자열이 실수 형태인 경우 소수점 아래 부분은 잘라낸다.

    cf) 0.5를 더하고 parseInt처리 해주면 반올림 효과




    -NaN (Not a Number)-

    - Number형식으로 변환할 수 없는 값을 Number함수나 parseInt함수로 변환하려고 한 경우 리턴되는 값.

    - 전염성이 매우 강해서 한 번 NaN으로 결정된 값에는 어떤 수를 연산시키건 결과가 NaN이 된다.

    숫자 < NaN <string (문자열)


    ...javascript
    var k = parseInt("hello"); // <-- k = NaN;
    var c = k + 100; // <-- c = NaN + 100 = NaN


    - 문자열과 결합할 경우 서로 연결된다.

    ...javascript
    var k = parseInt("hello"); // <-- k = NaN;
    var c = k + "World"; // <-- c = NaN + "World" = NaNWorld



    -NaN 여부 검사하기-

    ...javascript
    boolean isNaN(string)
    ...


    Number함수나 parseInt 함수를 사용하기 전, 파라미터로 전달되는 문자열이 Number형식으로 변환 가능한지의 여부를 판단하는 함수

    ...javascript
    var a = isNaN("hello"); // true (NaN이 맞음)
    var b = isNaN("123"); // false (NaN이 아님)
    ...


    값이 숫자 형식인 경우 true, 숫자 형식이 아닌 경우 false를 얻기 위해서는 isNaN함수의 리턴값을 "!"를 사용하여 부정해야 한다.

    ...javascript
    var a = isNaN("hello"); // true (NaN이 맞음)
    a = !a; //  true를 부정하였으므로 false가 됨
    ...


    일반적으로 위 결과는 다음과 같이 축약해 사용한다.

    ...javascript
    var a = !isNaN("hello"); // false(숫자가 아님)


    ex)
    var height = prompt("cm단위의 키를 숫자만 입력하세요.", "");
    if (isNaN(height)||height==""||!height) {
                alert("올바른 입력값이 아닙니다.");
                return;
      }
    ---> height에 들어가는 값이 문자인 경우 isNaN(height)이 True가 되므로 alert를 실행




    -메세지 박스 관련 함수-

    ...javascript
    void alert(string)
    ...

        • 확인 버튼을 갖는 알림 메시지 박스를 표시한다.
        • 파라미터: 메시지 박스에 표시될 내용


    ...javascript
    boolean confirm(string)
    ...

        • 확인, 취소 버튼을 갖는 확인 메시지 박스를 표시한다.
        • 파라미터: 메시지 박스에 표시될 내용
        • 사용자가 긍정의 버튼을 클릭한 경우 true, 부정의 버튼을 클릭한 경우 false가 리턴된다.


    ex) 
    var hello = confirm("확인 대화상자입니다.");  / or [var hello = prompt("~를 입력하시오.", "");]
    if (hello) {
        ...긍정을 선택한 경우...
    } else {
        ...부정을 선택한 경우...
    }


    ...javascript
    string prompt("string msg", "string def")
    ...

        • 입력필드를 갖는 메시지 박스를 표시한다.
        • 파라미터: 

    msg: 메시지 박스에 표시될 내용

    def: 입력필드에 설정될 기본값 (필요없는 경우 빈 문자열 ""을 지정)

        • 사용자가 입력한 내용이 리턴된다.




    -이벤트-

    - 이벤트란 사용자가 웹페이지에서 행하는 어떤 행위(클릭, 마우스 이동, 드래그 등)나 웹 페이지가 겪는 일련의 사건(로딩완료, 다른 페이지로 이동)을 의미한다.

    - 이벤트가 발생했을 때, 호출될 함수를 정의하고 연결하는 처리를 이벤트 처리라고 한다.



    [대표적인 이벤트 종류]

    이벤트 이름      | 설명
    onClick              | 어떤 요소를 클릭한 경우
    onMouseOver   | 어떤 요소 위에 마우스 커서가 올라가 있는 경우
    onMouseOut     | 어떤 요소 위에서 마우스 커서가 벗어난 경우
    onLoad             | (body태그에 적용하여) 페이지의 로딩이 완료된 직후 (이미지나 문서, 프레임이 로드될 때)


    [이벤트 사용 방법]

    javascript 함수를 미리 정의해 두고 HTML태그의 속성형태로 이벤트 이름을 명시한 다음 함수의 호출구문을 속성에 대한 값으로 지정한다.
    ...javascript
    function foo() {
        alert("Hello World");
    }
    ...
    ...html
    <!--<태그이름 이벤트 이름="함수호출">-->
    <input type="button" value="click" onClick="foo()" />


    - 자바스크립트 구문과 HTML 태그의 id 속성값을 연결하는 명령어-

    <span id="question"> ? </span>
    document.getElementById("question").innerHTML = "50";

    ---> ? 가 50으로 바뀌어서 출력된다.




    -Javascript 구문 특성-

        • 브라우저는 HTML파일을 순서대로 읽는다.
        • 소스 위치에 따라서 실행 시점이 달라진다.



    Javascript는 <script>태그가 서로 분리되어 있어도 실행시에는 하나로 병합되어 동작한다. 
    ...html
    <html>
    <head>
        <script> var a = 10; </script>
    </head>
    <body>
        <script> var b = 20; </script>
        ...
        <script> var c = a+b; </script>
    </body>
    </html>
    ---> 스파게트 코드(지양해야 됨)



    -소스코드 실행 시점-

    HTML파일을 한 라인씩 해석하는 브라우저의 특성상 소스코드의 위치에 따라서 실행시점이 결정되므로 HTML 태그를 제어하고자 하는 경우 제어하려는 HTML 태그보다 소스코드가 나중에 명시되어야 한다.


    * case1 - <body>태그 닫기 직전에 스크립트 코드 명시

    ...html
    <body>
        <div id="foo">...</div>
        <script>
            document.getElementById("foo").innerHTML = "Hello";
        </script>
    </body>
    ...


    * case2 - <head>태그에 스크립트 코드가 함수 단위로 정의되는 경우

    onload 이벤트를 통해서 해당 함수를 호출시킨다.
    ...html
    <head>
        <script>
            function foo() {...}
        </script>
    </head>
    <body onload="foo()">



    -HTML 태그의 id 속성값 중복 금지!!!-

    CSS에서는 id값이 중복될 경우 여러 요소에 대하여 동시에 적용이 가능하지만 JS의 경우는 id 속성이 중복될 경우 그 중에서 가장 첫 번째 요소만 인식하고 그 외의 요소들은 식별하지 못한다.
    그러므로 HTML에서 id속성은 반드시 고유한 값을 사용해야 한다.

    ...html
    <head>
        <style>
            /* 모든 id="hello"에 적용됨 */
            #hello { color=red; }
        </style>
        <script>
            function foo() {
                //첫 번째 요소에만 적용됨
                document.getElementById("hello").innerHTML="hello";
            }
        </script>
    </head>
    <body onload="foo()">
        <div id="hello">...</div>
        <div id="hello">...</div>
        <div id="hello">...</div>
    </body>


    팁! : CSS에서는 클래스 속성만 사용하고, JS에서는 id 속성만을 사용한다.






    반응형
    저작자표시 비영리 변경금지

    'Frontend' 카테고리의 다른 글

    [JS] 자바스크립트 5일차 요점정리  (609) 2019.02.10
    [JS] 자바스크립트 4일차 요점정리  (609) 2019.02.09
    [JS] 자바스크립트 2일차 요점정리  (967) 2019.02.09
    [JS] 자바스크립트 1일차 요점정리  (609) 2019.02.09
    [CSS]Day8 -background  (609) 2019.02.09

    RELATED POSTS MORE

    COMMENT

티스토리툴바