3일차 : 제어할 태그 선택하기, 프로그램, 프로그래밍, 프로그래머

3일차 : 제어할 태그 선택하기, 프로그램, 프로그래밍, 프로그래머

 

이번시간에는 직접 자바 스크립트를 이용해, 사용자가 버튼을 누르면 웹페이지의 스타일이 바뀌게 해봅시다.

 

최근에는 시력보호를 위해 많은 웹사이트에서 다크모드를 지원하고 있는데요.

우리도 나이트 버튼과 데이 버튼을 만들고, 버튼을 누르면 모드가 변경되게 해봅시다.

 

일단 간단한 웹페이지를 만든 후에, 버튼을 삽입합니다.

 

버튼을 삽입할 때는 input type="button" value="버튼이름" 을 사용합니다.

데이버튼과 나이트 버튼을 만들었으니, 이 버튼을 클릭할 때 무슨일이 일어나게 할 지 설정해야겠죠.

버튼을 클릭할 때, 즉 onclick 을 사용해 이벤트를 설정합시다.

 

스타일을 바꿔줄 부분을 선택하고, 그 후에 변경시킬 내용을 입력합니다.

document.querySelector('태그이름').style.backgroundColor='black';

이렇게 입력하면, 태그이름 부분의 배경 색을 검정으로 바꾸는 것입니다.

 

주의할 점은, 자바의 경우, 명령어를 입력할 때 대소문자도 다 구별해야한다는 점입니다..

 

예를들어 querySelector를 queryselector라고 적는다던지, backgroundColor를 backgroundcolor로 적으면 작동이 안됩니다.. 저를 혼란에 빠뜨렸죠.. 계속 안되서 ㅠㅠㅠ 여러분들도 참고하세요.

 

배경색을 검정으로 하고 글자색을 변경하지 않으면 아무것도 보이지 않겠죠?

글자색은 style.color:'white' 를 넣어서 바꿔줍시다.

 

 

night 버튼을 누르니 이렇게 바뀌었네요.

 

day 버튼에도 똑같이 내용을 반대로 적어줍시다.

 

 

night 버튼을 누른 후 day 버튼을 누르면 다시 흰 배경에 검정 글씨로 되돌아오네요.

 

 

 

이렇게 자바스크립트를 사용하는 방법을 배워봤습니다.

 

자바스크립트는 프로그래밍 언어 중 하나입니다.

html과 자바스크립트는 모두 컴퓨터 언어 중 하나인데요.

html은 컴퓨터 프로그래밍 언어라고 하지 않습니다. 자바만 컴퓨터 프로그래밍 언어라고 말합니다.

 

도대체 무슨 말일까요?

 

프로그램이라는 말에는 순서라는 의미가 들어있습니다.

순서를 만드는 것을 프로그래밍, 순서를 만드는 사람들 프로그래머라고 합니다.

 

매번 순서에 따라 실행되어야 하는 일이 있는데, 그 때마다 컴퓨터에게 매번 새로 일을 시킨다면 어떨까요?

같은 일을 수십번 수백번 해야 하는데 그 때마다 직접 명령을 내려야 한다고 생각해보세요.

컴퓨터와 사람 모두에게 너무 비효율적인 방식이죠.

그래서 프로그래머들은 시간의 순서에 따라서 실행되어야 하는 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식을 사용합니다.

그런 후에 기능이 필요할 때마다, 적어두었던 글을 컴퓨터에게 내밀며, 그 기능을 실행시킵니다.

 

자바에는 순서가 있지만, html에는 순서가 없죠.

html은 묘사를 하는 언어이기 때문에 시간의 순서에 따라서 무엇을 할 필요가 없습니다.

반면 자바스크립트는 사용자와 상호작용하기 위해 만들어진 언어입니다.

 

이것이 그 둘의 중요한 차이인 것이죠.

자바에서는 여러가지 명령어를 적어두고, 시간에 따라 적절한 명령이 실행되도록 합니다.

 

처음에는 시간에 따라서 실행될 명령을 순서대로 적어놓았지만, 사람의 욕심은 끝이 없죠.

조건에 따라서 이런 경우에는 이렇게, 저런 경우에는 저렇게 순서의 기능이 실행되게끔 만들고 싶어합니다.

또한 어떤 특정한 기능을 반복시키고 싶어 하기도 하구요.

이렇게 순서가 복잡해짐에 따라, 이런 순서를 단순하게 잘 정리정돈하기 위한 방법들도 생겨났죠.

 

앞으로 자바에서는 이런 핵심적인 기능들(조건문, 반복문, 함수 등)을 배울 예정입니다.