이다닷

[JavaScript] Day 1 - 자바스크립트란? 본문

JavaScript

[JavaScript] Day 1 - 자바스크립트란?

이다닷 2023. 1. 4. 20:40

자바스크립트란 프로그래밍언어이다.

 

목적

서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용된다.

하지만 주된 활동 분야는 '웹 개발'이다.

 

웹사이트 개발에 필요한 언어

HTML, CSS, JavaScript이다.

HTML은 웹 페이지에 표시될 콘텐츠를 정의하고, CSS는 웹 콘텐츠를 스타일링한다.

마지막으로 JavaScript는 웹사이트의 동작이나 상호작용을 정의한다.

이미지 슬라이더나 버튼을 눌렀을때의 동작, 마우스 커서를 올렸을때 메뉴가 펼쳐지는 등의 일을 할 수 있다.

 

웹 페이지를 만드는 법

HTML과 CSS를 이용하여 기본적인 브라우저의 틀을 만든다.

완성된 틀을 가지고 JavaScript를 이용해서 동작을 추가한다.

 

자바스크립트의 역할

웹사이트 개발에 대해서 자바스크립트는 웹브라우저가 가진 기능을 실행 시키거나

HTML, CSS를 통해 렌더링된 화면을 조작하는 일을 한다.

즉, 자바스크립트는 웹브라우저를 조작함으로써 역할을 수행한다!

 

자바스크립트의 사용

방법 1.  자바스크립트를 HTML에 넣어서 사용하는 방법

HTML내용을 적당히 채워준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=dege">
    <meta name="viewport" content="width=device-width, initial-s">
    <title>HTML 문서</title>
    <style>
        *{ color: red; }
    </style>
</head>
<body>
    <h1>반가워요</h1>
    <p>아무 내용</p>
    <ul>
        <li>여우</li><li>고양이</li><li>미어캣</li>
    </ul>
    <script>
    
    </script>
</body>
</html>

이렇게 간단히 HTML코드를 작성을 해준 후, 자바스크립트를 사용하는 방법은 HTML에 <script>라는 태그를 body부분 맨 아래줄에 자바스크립트의 내용을 채워준다.

 

방법 2. 외부에 작성한 JS파일을 가져와서 실행하는 방법

방법 1과 같이 body의 맨 밑줄에 <script>라는 태그를 추가해주고, 스크립트태그 자체에 src="주소"라는 특성을 추가해준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=dege">
    <meta name="viewport" content="width=device-width, initial-s">
    <title>HTML 문서</title>
    <style>
        *{ color: red; }
    </style>
</head>
<body>
    <h1>반가워요</h1>
    <p>아무 내용</p>
    <ul>
        <li>여우</li><li>고양이</li><li>미어캣</li>
    </ul>
    <script src="javascript.js"></script>
</body>
</html>

'JavaScript' 카테고리의 다른 글

[JavaScript] Day 6 - 템플릿 리터럴  (0) 2023.01.13
[JavaScript] Day 5 - 상수 그리고 prompt  (0) 2023.01.12
[JavaScript] Day 4 - 변수와 숫자, 그리고 문자열  (0) 2023.01.11
[JavaScript] Day 3 - Console에 대하여  (0) 2023.01.10
[JavaScript] Day 2 - 객체란 무엇일까?  (0) 2023.01.08
'JavaScript' Related Articles more