JavaScript _ 자바스크립트 작성 위치와 연결방법

💻Coding/📘 JavaScript

JavaScript _ 자바스크립트 작성 위치와 연결방법

음은응 2021. 8. 23. 07:10

728x90

JavaScript _작성 위치와 연결방법

JavaScript
Q : 자바스크립트는 어디에 작성해야할까요?

- "자바스크립트는 크게 2가지 위치에서 작성할 수 있습니다."

1). 내부 스크립트
ㄴ html 문서 안에서 직접 스크립트를 작성하는 방법

2). 외부 스크립트 작성하는 방법
ㄴ 자바스크립트 파일을 외부에서 따로 만들어서, html 파일에 연결하는 방법
ㄴ ※자바스크립트 파일을 만드는 확장자는 js입니다.
ㄴ 즉, 문서 저장시 파일이름.js 라고 저장해주시면 됩니다.

[파일 저장 예시]

📌 Q : 자바스크립트는 어디에 작성하고, 외부에서 작성한 파일은 또 어떻게 불러올까요?

A : 내부에서 작성하는 방법과 외부파일은 연결하는 것 모두 html 파일 안에서 합니다.!
↓↓↓

(↓↓↓먼저 이미지로 위치를 한눈에 확인해볼까요?🤩↓↓↓)

📌 하지만, 자바스크립트가 익숙해질 때까지 저희는 내부에서 작성할 예정이니, 내부 작성법만 익혀볼까요?!
( ※외부 스타일시트 작성방법은 나중에 알려드릴께요! )

(↓↓↓아래의 코드를 복사해서 <head>와 <body>영역에 붙여넣어보세요↓↓↓)

<script>
     alert("head위치에 작성");
</script>

1). 내부에 자바스크립트 작성하기

▶ <head> 영역에서 작성하기

<!DOCTYPE html>
<html lang="ko">
<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>자바스크립트_head 작성</title>
    <script>
        alert("head위치에 작성");
    </script>
</head>
<body>
    
</body>
</html>

[ 실행화면 ]

▶ <body> 영역에서 작성하기

<!DOCTYPE html>
<html lang="ko">
<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>자바스크립트_body 작성</title>
</head>
<body>
    <script>
        alert("body 위치에 작성");
    </script>
</body>
</html>

두개의 화면이 모두 똑같이 보인다면 잘 작성하신거예요!
여러분은 이제 자바스크립트의 모든 함수를 화면에서 구현할 수 있게 되었습니다!!🎉🎉🎉

오늘의 자바스크립트는 끝~

728x90

저작자표시 비영리 변경금지

'💻Coding > 📘 JavaScript' 카테고리의 다른 글

JavaScript 숫자 카운트 애니메이션 만들기 \| 자바스크립트 JS (0)	2023.03.15
javascript_if_조건문 (0)	2021.10.28
JavaScript _HTML 컨텐츠를 변경하기 (0)	2021.08.26
JavaScript _문법 + (자바스크립트 맛보기) (0)	2021.08.19
JavaScript _기초 : 자바스크립트란? (2)	2021.08.18

현재글JavaScript _ 자바스크립트 작성 위치와 연결방법

250x250

쭈랜드입니다:)

포토샵, 어도비, 자바스크립트, oracle, Spring, javascript, eclipse, SQL, 오라클오류, 포토샵단축키, sqldeveloper, HTML, PSD, 오라클, 드로우앤드류, photoshop, 드로우마이브랜드, adobe, drawandrew, css,

Today :
Yesterday :