자바스크립트 기초

2021. 4. 5. 18:59ㆍ자바스크립트

728x90

자바스크립트로는 무엇을 할까

  • 웹 요소 제어
    • HTML은 웹 문서의 내용을 구성
    • CSS는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정
  • 웹 어플리케이션 제작
    • 싱시간으로 사용자와 정보를 주고 받음
  • 라이브러리 사용
  • 서버개발

웹 브라우저가 자바스크립트를 만났을 때

  • 웹 문서 안에서 script 태그로 작성
    • script 와 /script 태그 사이에 작성
    • script 태그는 웹문서 안 어디에도 위치가능
    • 하나의 문서에 여러번 사용가능
  • 외부 스크립트 파일로 자바스크립트 작성하기
    • script 태그없이 작성후 .js파일로 저장
    • script src = "외부 스크립트 파일 경로"></script

자바스크립트 용어와 기본 입출력 방법

  • 표현식과 문장
    • expression + statement (표현식과 문장)
    • 표현식 = 연산식, 값, 함수실행
    • 식은 변수에 저장
    • 문 = 명령;
  • 간단한 알림창 출력
    • alert(메세지) : 알림창
    • confirm(메세지) : 확인창
    • prompt(메세지, 기본값) : 프롬포트 창
    • document.write() : 웹 브라우저 출력
      • HTML 태그를 사용하여 표현가능
    • console.log() : 콘솔 출력
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script>
    //internal javascript ... head...body  모든 위치가능
        alert("1");
         console.log("1번째 실행");
        
     </script>
     
     <script src="external.js"></script>
     <script>
     call();
     call2();
     </script>
    </head>
    <!-- 인라인 자바 스크립트 -->
    <body onload = "alert('load완료');">
    <script>
    alert("2");
     console.log("2번째 실행");
     cons
     </script>
     
     <h1 onclick="alert('click');">자바스크립트</h1>
     <div id = "here">여기</div>
     <script>
     alert("3");
     console.log("3번째 실행");
     document.getElementById("here").innerHTML = "<p>변경하기</p>";
     
     </script>
    </body>
    </html>
    		 cs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
     
    <script>
    //동적타이핑
    //변수 사용없이 사용가능
    s1=100;
    document.write("<h1>" + s1 + "</h1>");
    </script>
    </head>
    <body>
        <h1>js문법</h1>
        <script>
            name = "김성휘";
            s1 = "javascript" + name;
            s2 = 'javascript2' + name;
            s3 = `javascript3 ${name}`; //백틱
     
            console.log(s1);
            console.log(s2);
            console.log(s3);
            document.write("<h1>" + s1 + "</h1>");
            document.write(`<h1> ${s2} </h1>`);
            document.write(`<h1> ${s3} </h1>`);
        </script>
    </body>
    </html>
    		 cs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script>
        //자바 스크립트 변수타입  : 동적타입
        //number, String, boolean, object, function, undefined
        a = 100;
        document.write("<p>" + a + "==>" + typeof (a) + "</p>");
        a = "100";
        document.write("<p>" + a + "==>" + typeof (a) + "</p>");
        a = 10 > 20;
        document.write("<p>" + a + "==>" + typeof (a) + "</p>");
        a = 100.9;
        document.write("<p>" + a + "==>" + typeof (a) + "</p>");
        a = {"name" : "홍길동", age : 20};
        document.write("<p>" + a + "==>" + typeof (a) + "</p>");
        a = [ 1, 2, 3, 4, 5 ];
        document.write("<p>" + a + "==>" + typeof (a) + "</p>");
        a = function() {alert("함수")    };
        document.write("<p>" + a + "==>" + typeof (a) + "</p>");
        var b;
        document.write("<p>" + b + "==>" + typeof (b) + "</p>");
    </script>
    </head>
    <body>
     
    </body>
    </html>
    		 cs

     

자바스크립트 스타일 가이드

 

airbnb/javascript

JavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub.

github.com

  1. 코드를 보기 좋게 들여쓰기 한다.
  2. 세미콜로능로 문장을 구분한다.
  3. 공백을 넣어 읽기 쉽게 한다.
  4. 주석을 작성한다.
  5. 식별자는 정해진 규칙을 따른다.
  6. 예약어는 식별자로 쓸 수 없다.
728x90

'자바스크립트' 카테고리의 다른 글

자바스크립트 함수와 이벤트  (0) 2021.04.08
자바스크립트 기본문법  (0) 2021.04.05

관련글

티스토리툴바