지우의 우당탕탕 개발일지

1장-1. Javascript의 역할 본문

Front 공부/Javascript

1장-1. Javascript의 역할

erase-jeong 2023. 10. 16. 19:07

 

 

( 이 게시글은 부스트코스 [생활코딩 - 자바스크립트의 시작]  강의를 듣고 정리한 내용입니다)

 

 

 

1장. 웹과 Javascript

 

1)Web, Javascript, HTML

  •   HTML : 정적, 한 번 출력되면 그 모양이 바뀌지 않는다
  •  사용자와 동적으로 상호작용하는 WEB을 만들기 위해서는? => Javascript 등장
  •  즉, 정적인 정보인 HTML을 Javascript가 동적으로 만들어 주는 것

2) Javascript의 역할

: 사용자와 상호작용을 할 수 있도록 하는 것

 

  • 아래의 웹 화면에서 버튼을 클릭해서 배경색/글자색 바꾸는 것은 javascript로 구현한 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body style="background-color:black">
    <h1>javascript 이용하여 배경색/글자색 바꾸기</h1>
    <input type="button" value="dark" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';
    ">
    <input type="button" value="light" onclick="
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    ">
    
    
</body>
</html>

 

 

여기에서 js 에 해당하는 코드는 onclick에 있는 

document.querySelector('body').style.backgroundColor='black'

 이다.

 

 

<코드 설명> 

(1) 문서(document)에서 body라는 태그를 선택(Selector)한다.

(2) 그리고 난 후 style 속성값에서 backgroundColor를 'black'으로 설정

(3) 이렇게 부여된 속성값은 아까 살펴봤듯이 body 태그의 style 속성으로 들어간다.  (이 style 속성은 CSS)

 

 

<정리>

  • javascript는 사용자와 상호작용 하는 언어
  • 웹 브라우저는 한 번 출력되면 바뀔 수 없지만, Javascript 코드에 따라서 style 속성이 추가되면서 디자인이 바뀐다
  • 이러한 Javascript의 특성을 이용해서  웹페이지를 더 동적으로 만들 수 있음

 

'Front 공부 > Javascript' 카테고리의 다른 글

1-4. HTML과 JS : ③ 콘솔 (console)  (1) 2023.10.16
1-3. HTML과 JS (이벤트)  (0) 2023.10.16
1장-2. HTML과 JS (script 태그)  (0) 2023.10.16
자바스크립트의 시작  (1) 2023.10.16
'Front 공부/Javascript' Related Articles more