ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트(JavaScript) 들어가기
    프로그래밍/JavaScript 2022. 9. 22. 19:28
    728x90

     

    자바 스크립트는 모질라 재단의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다.

     

    HTML은 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정한다. 자바스크립트를 추가하면 웹 문서의 각 요소를 가져와 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다.

    웹 문서를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력이라고 볼 수 있다.

     

    객체 기반의 스크립트 프로그래밍 언어로 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있으며, 웹 문서에는 자바스크립트 소스를 읽고 처리하는 해석기 기능이 존재한다.

     

    자바스크립트 소스는 웹 문서에서 <script> 태그를 이용해 자바 스크립트 소스가 짧은 경우 웹 문서에서 자바 스크립트를 실행할 위치에 바로 작성할 수 있다.

     

     

     

     

    자바스크립트 출력

    HTML 문서에 출력
    - document.write() 함수를 통해 출력

     

    개발자 도구(F12키) console에 출력
    - console.log() 함수를 통해 출력

     

     

    자바스크립트 주석

    - 한줄 주석 : //
    - 여러줄 주석 : /* … */

     

     

    <!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>자바스크립트의 출력</title>
    </head>
    <body>
        <h2>자바스크립트의 출력</h2>
        <script>
            /*
                날짜 : 2021-12-27
                작성자 : 윤OO
                비고 : 자바스크립트의 출력
            */
            document.write('<p>안녕하세요. 자바스크립트입니다.</p>');		// body에 출력
            console.log('안녕하세요. Javascript!');				// console에 출력
        </script>
    </body>
    </html>

    화면에 출력

     

    콘솔에 출력한 결과값을 확인하는 방법은 F12키를 누르고 console 칸에서 확인이 가능하다.

     

    콘솔에 출력

     

     

     

     

     

    외부 스크립트

    자바 스크립트도 CSS 처럼 link를 통해 외부 스크립트를 연결할 수 있다.

    <!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>외부 자바스크립트</title>
        <script src="./js/script.js"></script> <!--외부 링트 연결-->
    </head>
    <body>
        <h2>외부 자바스크립트</h2>
    </body>
    </html>
    console.log('외부에 연결된 스크립트입니다. 모두 화이팅 해봐요')

    화면에 출력
    콘솔에 출력

     

     

     

     

    728x90

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

    JavaScript 조건문  (0) 2022.09.27
    JavaScript 타입변환과 연산자  (1) 2022.09.26
    JavaScript 데이터 타입  (0) 2022.09.25
    JavaScript 변수, 상수  (0) 2022.09.25
    JavaScript 대화상자  (0) 2022.09.24

    댓글

Designed by Tistory.