오봉이와 함께하는 개발 블로그

JavaScript - 개요, 기본 입출력 함수 본문

FE/JavaScript

JavaScript - 개요, 기본 입출력 함수

오봉봉이 2021. 12. 7. 15:20
728x90

FrontEnd_day4 정리 (2021.12.07 화요일)

JavaScript

  • 정식명칭 : ECMA스크립트(ECMAScript)
  • ECMA International ECMA-262 기술 구격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
  • ES6(자바스크립트 버전)
    • default parameter
    • class
    • arrow function
    • const
    • let
    • 등...
  • 동적인 웹 페이지를 작성하기 위해 사용되는 언어
  • 웹 표준 프로그래밍 언어
  • 모든 웹 브라우저에서 자바스크립트 지원
  • 웹 브라우저 뿐 아니라 스마트폰 app 개발 등 각종 분야에서 사용
  • 과거에는 브라우저에 내장되어 제한된 기능만 지원하였는데 현재는 Ajax(Asynchronous JavaScript and XML) 기술과 함께 영향력이 증가
  • 전 세계에서 가장 많이 사용되는 언어

JavaScript 기능

  • HTML이 지원하지 못하는 다양한 기능 지원
    • 동적인 움직임 / 이벤트 발생 처리 / 경고 메시지 출력 / 데이터 유효성 확인 / 멀티미디어 기능
  • Ajax를 이용하여 새로운 내용을 동적으로 로딩하거나 서버에 전송하여 동적인 페이지 생성
  • 애니메이션 기능 지원
  • 브라우저 사용자의 특성(웹 페이지 탐색 움직임, 게시물 읽을 때 습관 등)에 대한 정보를 서버로 전송하여 웹 분석, 사용자 동작 추적, 웹 서비스 개인화 등에 사용

JavaScript 실행

  • 스크립트 언어이기 때문에 컴파일 되지 않고 인터프리터를 통해 웹 브라우저에서 한 줄씩 바로 실행

JavaScript 용도

  • 이벤트에 반응하는 동작 구현
  • HTML 요소를 동적으로 변경
  • 사용자가 입력한 값들 검증
  • 게임이나 애니메이션 / 멀티미디어 기능 구현
  • Ajax 기술을 사용하여 서버와 데이터를 비동기적으로 교환
    • 비동기식 처리
      • 서버 측에 데이터를 요청한 후 데이터 수신이 완료될 때 까지 기다리지 않고 다른 작업 진행이 가능한 기술

JavaScript 기본 구조

  • HTML 문서에 <script> 자바스크립트 코드 </script> 태그 삽입
  • 사용법
    • Internal
    • External
    • Inline
Internal
  • HTML 문서에 삽입
  • 일반적으로 <head> 부분에 삽입하지만, <body> 안에 삽입하기도 함.
  • <script type="text/javascript"> alert("알림창"); </script>
  • internal.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        alert("head 부분에 삽입된 알림창");
    </script>
</head>
<body>
    <script type="text/javascript">
        alert("body 부분에 삽입된 알림창");
    </script>
</body>
</html>
External
  • 별도의 자바스크립트 파일(확장자가 .js)로 작성하여 HTML 문서에서 소스 지정
  • <script src="@@@.js> </script>
  • external.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="a.js"></script>
</head>
<body>

</body>
</html>
  • a.js
alert("a.js에 삽입된 알림창");
Inline
  • 자바스크립트 코드가 짧을 때 HTML 태그의 이벤트 핸들러 속성을 사용하여 함수 호출
  • <body onLoad="start()">
  • <button onClick="show()">
  • inline.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function start() {
            alert("inline 방식으로 start() 함수 실행\n출력된 알림창.");
        }
    </script>
</head>
<body onload="start()">

</body>
</html>

데이터를 출력하는 방법

  • window.alert() : 내용을 알림창(경고창)으로 출력
  • consol.log() : 내용을 콘솔에 출력
  • document.write() : 화면(문서)에 출력
  • DOM : Document Object Model 사용
  <script type="text/javascript">
            console.log("Hello world!");
            console.log("<h2>Tag</h2>");
            document.write("<h2>Tag</h2>");
            alert("head 부분에 삽입된 알림창");
            document.body.innerHTML += "DOM 객체 innerHTML 속성 사용해서 출력"
            //  document.write("<h2>Tag</h2>");에서 출력된 데이터에 document.body.innerHTML을 사용해서 body에 해당 문자열 값을 더해준다.
            // document.body.innerHTML = "DOM 객체 innerHTML 속성 사용해서 출력" 만 작성했다면 'DOM 객체 innerHTML 속성 사용해서 출력'만 출력된 다.
        </script>

JavaScript 코드 입력 시 주의 점

  • 대/소문자 구분
  • 문장 끝에 세미콜론 사용
  • 문자열에 따옴표 겹침 오류 주의
    • 문자열에 큰 따옴표, 작은 따옴표 모두 사용 가능하지만
    • 큰 따옴표 안에 큰 따옴표 불가능, 작은 따옴표 사용해야 한다.
    • 반대의 경우도 똑같음.
      • document.write(" 이름은 고병채 ");
      • document.write(' 이름은 고병채 ');
      • document.write(" 이름은 ' 고병채 ' ");
      • document.write(' 이름은 " 고병채 " ');

JavaScript 데이터 입력 방법

  • confirm() 함수로 입력 받기
  • prompt() 함수로 입력 받기
  • getElementsByTagName() : 태그 이름 사용
  • <input> 태그의 value 속성 사용
  • DOM 사용

confirm() 함수

  • 자바스크립트 내장 함수
  • [확인] / [취소] 버튼이 있는 대화상자 출력
  • 확인 누르면 true 값 반환
  • 취소 누르면 false 값 반환
confirminput.html
 <script type="text/javascript">
            var isStudent = confirm("당신은 학생입니까?");

            document.write("isStudent 값 : " + isStudent);
        </script>
confirminputEx.html
  <script type="text/javascript">
            var isStudent = confirm("당신은 학생입니까?");
            if(isStudent) {
                document.write("결과 : 학생입니다.<br>할인율 : 50%");
            }
            else{
                document.write("결과 : 학생이 아닙니다.<br>할인율 : 없음");
            }

        </script>

prompt() 함수

  • 자바스크립트 내장 함수
  • 사용자로부터 입력 받은 값을 반환
  • prompt("출력 메시지")
  • prompt("출력 메시지", "기본값")
promptinput.html
 <script type="text/javascript">
            var answer = prompt("가장 좋아하는 과일은?",   "딸기" );
            alert("가장 좋아하는 과일 : " + answer + " 입니다.");
            document.write("가장 좋아하는 과일 : " + answer + " 입니다.");
        </script>
promptinputEx.html
<script type="text/javascript">
            var useCard = confirm("카드로 결제합니까?");
            if(useCard) {
                var cardNum = prompt("카드로 결제합니까?",   "xxxx-xxxx-xxxx-xxxx");
                document.write("카드번호 : " + cardNum);
            }
            else {
                document.write("카드로 결제하지 않습니다.");
            }
        </script>
728x90
저작자표시

'FE > JavaScript' 카테고리의 다른 글

JavaScript - 함수 사용법 기초  (0) 2021.12.08
JavaScript - 배열 기초  (0) 2021.12.08
JavaScript - 숫자(정수, 실수) 형변환  (0) 2021.12.08
JavaScript - 제어문 예제  (0) 2021.12.08
JavaScript - 변수유형, 호이스팅, 연산자, 형변환  (0) 2021.12.07
'FE/JavaScript' Related Articles more
Comments