이롭게 현명하게

[JavaScript] 자바스크립트 시작하기 / 개발환경 본문

웹 개발/JavaScript

[JavaScript] 자바스크립트 시작하기 / 개발환경

dev_y.h 2023. 11. 27. 18:35
728x90
반응형

 

 

목차

 

내부 자바스크립트 코드

외부 자바스크립트 코드

 

 

자바스크립트를 적용하기 위해서는 에디터가 필요하다.

[vscode 설치하기]

 

[VSCODE] VSCODE 설치 / Visual Studio Code 설치하기

목차 VSCODE 설치 VSCODE 환경설정 (한글설정) 번외 [ VSCODE 설치 ] 1. 홈페이지 접속 2. 본인의 운영체제에 맞는 설치 파일 클릭 저는 window운영체제로 설치하였습니다. 2. 설치 파일 클릭 후 동의합니다

devyihyun.tistory.com

 

[내부 자바스크립트 코드로 적용]

자바스크립트 코드는 <script> ~ </script> 태그를 사용하여 HTML 문서 안에 삽입할 수 있다.

HTML 문서의 <head> ,<body> 에 위치해 있다.

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Apply</title>
        <script>
            function printDate2() {
                document.getElementById("date2").innerHTML = Date();
            }
        </script>
    </head>
    <body>
        <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
        <button onclick="printDate1()">1. 현재 날짜와 시간 표시하기!</button>
        <p id="date1"></p>
        <script>
            function printDate1() {
                document.getElementById("date1").innerHTML = Date();
            }
        </script>

        <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
        <button onclick="printDate2()">2. 현재 날짜와 시간 표시하기!</button>
        <p id="date2"></p>
    </body>
</html>

 

자바스크립트 코드를 <head> 태그에 삽입하거나 <body> 태그에 삽입하나 동작상의 차이는 없다.

 

[외부 자바스크립트 코드로 적용]

자바스크립트 코드는 HTML 문서의 내부 뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있다.

 

외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장한다.

자바스크립트 파일을 적용하고 싶다면 <script> 태그를 사용해 외부 자바스크립트 파일경로를 지정해 준다.

 

// example.js

function printDate() {
    document.getElementById("date").innerHTML = Date();
}

 

<!-- index.html -->
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Apply</title>
        <script src="/examples/media/example.js"></script>
    </head>
    <body>
        <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
        <button onclick="printDate()">1. 현재 날짜와 시간 표시하기!</button>
        <p id="date"></p>
    </body>
</html>

 

https://devyihyun.tistory.com/156

 

[JavaScript] 자바스크립트 출력하기

목차 window.alert() 메서드 HTML DOM 요소 사용 document.write() 메서드 console.log() 메서드 [window.alert() 메서드] window.alert() 메서드 : 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달한다.

devyihyun.tistory.com

 

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'웹 개발 > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 데이터 타입  (0) 2023.11.29
[JavaScript] 자바스크립트 출력하기  (1) 2023.11.28
[JavaScript] 자바스크립트 시작하기  (1) 2023.11.24
[JavaScript] 배열 내장 함수  (0) 2023.11.21
[JavaScript] 자바스크립트 Scope와 hoisting  (0) 2023.05.18
'웹 개발/JavaScript' Related Articles more
Comments