[JavaScript기초] 1. 자바스크립트 기본

Programming/JavaScript

[JavaScript기초] 1. 자바스크립트 기본

midnightcoder 2023. 2. 5. 16:39

- 자바스크립트 사용 목적?

HTML을 조작하기 위해서 사용한다.

- WHY?

1 HTML안의 텍스트, 스타일링을 할 수 있다.

2 Tab, Modal등 UI를 만들 수 있다.

3 버튼클릭시 서버로 데이터 요청 할 수 있다.

예시) 어떤식으로 자바스크립트를 사용할까?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="hello">Hi</h1>

    <script>
        document.getElementById('hello').innerHTML = 'Hello';
        // html 의 element를 get하는데, id가 'hello' 것의 안의 내용을 'Hello' 로 바꿔라
        document.getElementById('hello').style.color = 'red';
    </script>
</body>
</html>

위 HTML의 <body> tag안에, <script> tag를 써주고, 그 안에 코드를 작성한다.

document.getElementById('hello').innerHTML = 'Hello';

코드 해석?
document -> 해당 html 웹

. 마침표 -> ~의 

getElementById('이름') -> 아이디가 '이름'인 html 요소 (일명 element) 를 찾아라

innerHTML -> 내부 HTM

= -> 오른쪽 값을 할당해라

'Hello' -> 이값을 넣어줘라

그럼, 위의 내용을 바탕으로 <h1> tag의 폰트사이즈를 20px로 변경해보자

    <script>
        document.getElementById('hello').style.fontSize = '20px';
    </script>

출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'