새벽코딩

[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를 써주고, 그 안에 코드를 작성한다.

<script>안의 첫번째 코드를 아래와 같이 해석할 수 있다.

 

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개발'

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript기초] 6. classList 다루기 (서브메뉴 숨기기)  (0) 2023.02.06
[JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap)  (0) 2023.02.06
[JavaScript기초] 4. 셀렉터와 이벤트리스너(with 콜백함수)  (2) 2023.02.06
[JavaScript기초] 3. 함수2 (with 매개변수)  (0) 2023.02.05
[JavaScript기초] 2. 동적 UI 만들기 with 함수란?  (0) 2023.02.05
'Programming/JavaScript' Related Articles more