본문 바로가기
javascript/01. 자바스크립트 기본 형식

자바스크립트 기초

by gamdong2 2024. 5. 9.

📖 javascript 란?

웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어

(Java ≠ javascript, 둘은 아무 연관이 없음)

 

1) javascript의 기본 형식

<head>
    <script>
        자바스크립트 실행문;
    </script>
    <script src='자바스크립트 파일.js'></script>
</head>

 

2) javascript의 기본 규칙

  • 실행문이 끝나면 세미콜론(;)을 붙임
  • 대소문자를 구분함
  • 가독성을 위해 들여쓰기를 사용함
  • 한 줄 주석처리(//) & 여러 줄 주석처리(/* */)

 

3) 적용 방법

① HTML 문서 내부에 적용

<head>
    <script>
        document.write('자바스크립트');
    </script>
</head>

② HTML 문서 외부에 적용

<head>
    <script src="write.js"></script>
</head>

 

4) 적용 위치

① <head> 태그 내에 위치할 수 있음

② </body> 위에 위치할 수 있음

<head>
    <script>
        var num1 = 10;
        var num2 = 20;
    </script>
</head>
<body>
    <script>
        document.write(num1 + num2);
    </script>
</body>

 

5) 기본 명령어

  • 입력 : prompt('입력 제목', '입력 내용')
  • 출력 : document.write('출력 내용') / alert('출력 내용') / console.log('출력 내용')
  • 확인 : confirm('확인 내용')
<head>
    <script>
        prompt('출력 페이지 수를 입력하세요!','');
        alert('자바스크립트');
        document.write('자바스크립트');
        console.log('자바스크립트');
        confirm('정말 삭제 하시겠습니까?');
    </script>
</head>

 

[TIP] document.write()와 console.log()의 차이

- document.write() : 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력함. 
테스트나 디버깅을 위해 사용. 
하지만 웹 페이지의 모든 내용이 로딩된 후 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력함. (테스트 이외의 용도로 사용할 때에는 주의하기!)

- console.log() : 웹 브라우저의 콘솔을 통해 데이터를 출력함.
웹 브라우저의 dev mode(F12) 실행시, 메뉴에서 콘솔을 클릭하면 콘솔화면을 사용할 수 있음. 
이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는 데 많은 도움이 됨

 

 

 

 

 

출처 :⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦, https://www.tcpschool.com/javascript/js_intro_output

티스토리툴바