[Javascript] 야간 모드, <script> 태그, 이벤트, 콘솔
야간 모드와 주간 모드를 버튼을 통해 바꾸는 기능 만들기
<input> 이라는 태그를 이용해 버튼을 만들 수 있음. 이 태그의 속성으로 'button'을 지정해야 함. 그리고 'value'에 적힌 'night' 때문에 버튼의 이름은 'night' 가 됨.
onclick 이라는 속성의 값으로는 자바스크립트가 와야 하고, onclick이라는 속성의 값으로 자바스크립트 코드를 넣으면 사용자가 onclick의 속성이 위치하고 있는 버튼을 클릭했을 때
자바스크립트 코드를 실행할 것.
여기서 자바스크립트 코드는 사용자가 'night'라는 버튼을 클릭했을 때 이 문서(document)에서 <body> 태그를 선택(queryselector('body')) 하는 코드. 이 웹 페이지에서 <body> 태그는 웹 페이지 전체를 차지하는 아주 큼직한 코드, 즉 화면 전체를 의미한다.
즉, <body> 태그를 선택하는 코드가 document.queryselector('body') 이다. 그 다음 이 <body> 태그에 style 속성 값으로 배경색을 black으로 지정한다(.style.background='black')는 의미의 코드이다.
<script> 태그
자바스크립트 코드를 넣을 때는 우선 웹 브라우저에게 지금부터 HTML에 자바스크립트 코드가 시작된다는 사실을 알려야 함. 그때 사용하는 태그가 <script> 라는 태그. 웹 브라우저는 <script> 태그 안의 코드를 자바스크립트 코드로 해석함
1. ex1.html 파일 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
2. <script> 태그와 자바스크립트 코드 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document. write('hello world'); > hello world를 출력
</script>
</body>
</html>
3. <h1> 태그와 제목 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Javascript</h1>
<script>
document. write('hello world');
</script>
</body>
</html>
이처럼 <h1> 태그 안에 'hello world' 라고 쓰는 것과 무슨 차이가 있냐면, html에서 1+1을 쓰면 영원히 1+1이 나오지만, 자바스크립트는 동적이기 때문에 계산기처럼 동작 가능.
4. HTML 태그와 자바스크립트의 차이 알아보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Javascript</h1>
<script>
document. write('1+1'); ---- 연산된 결과값 2를 표시함.
</script>
<h1>HTML</h1>
1+1
</body>
</html>
즉, 자바스크립트는 숫자 1과 숫자 1을 더한 값을 2로 만든 다음 이것을 출력하는 능력이 있음.
이벤트
이벤트는 자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 함.
1. ex2.html 파일을 생성하고, 버튼 만들기
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi"> --------버튼을 만들고 그 위에 'hi' 를 표시함.
</body>
</html>
2. onclick 속성과 값 추가
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')"> --------버튼을 누르면 메세지 창에 hi를 출력함
</html>
어떤 이벤트가 일어났을 때 어떠한 자바스크립트 코드를 실행하게 하는 것이 onclick이라는 것.
3. 글자를 입력할 수 있는 텍스트 상자 만들기
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" /> -------------- 텍스트를 입력할 수 있는 텍스트 상자 출력
</body>
</html>
이때 글자를 입력하면 내용이 변화하는데, 이러한 내용이 변했을 때를 체크하는 이벤트도 있음.
4. onchange 속성과 값 추가
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')" /> ------- 텍스트 상자의 내용이 변경되면 메세지 창에 changed를 출력.
</body>
</html>
'abc'를 입력하고, 마우스 커서를 바깥쪽으로 빼서 클릭하면 웹 브라우저가 onchange 이벤트를 실행.
5. <input> 태그를 추가하고, onkeydown 속성과 값 추가
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')" />
<input type="text" onkeydown="alert('key down!')" /> 키보드의 키를 누르면 메세지 창에 key down이 표시됩니다.
</body>
</html>
'on'으로 시작되는 속성들은 자바스크립트에서 '이벤트' 라고 하며, 웹 브라우저 위에서 이러나는 여러 가지 사건들 중에서 기념할 만한 10~20개의 이벤트를 정의해 놨고,
이것들을 이용해 사용자와 상호작용할 수 있는 코드를 작성할 수 있음.
즉, <input> 태그 속성에 onclick 속성이 들어 있고, 속성 값으로 자바스크립트가 들어가 있음.
콘솔
지금까지는 자바스크립트 코드를 실행하기 위해 웹 페이지, 즉 파일을 만들었으나 경우에 따라서 파일이 아니더라도 간단하게 어떤 코드를 실행해야 하는 상황이 있음. 그런 경우에 콘솔을 사용
웹 페이지 - 마우스 오른쪽 버튼 - 검사 - console 탭(F12)
콘솔을 이용하면 자바스크립트 코드를 즉석에서 사용 가능
1. 텍스트가 몇 개의 글자로 이뤄져 있는지 확인하기
텍스트를 ' ' 로 묶으면 ' ' 안의 것들은 문자가 됨. 자바스크립트에서는 ' ' 안에 들어 있는 문자의 개수를 알려주는 명령이 .length 임. 이를 alert() 로 감싼다.
alert('방울이는 2019년 6월 27일날 길에서 구조해 6월 29일 ~ 현재까지 키우고 있는 고양이다. 5월 초나 4월 말에 태어난 것으로 추정된다. 처음엔 병원에서 검사도 못 받을 만큼 야윈 애였는데 지금은 돼지가 됐다. 곧 굴러다닐것 같다. 둔둔 집사를 할퀴기를 서슴지 않는 흉폭한 고양이다. 2019년 11월 7일에 아무 잘못 없는 쥐돌이 인형을 찢었다. 장난감의 평균 수명이 한달 남짓이다. 품종: 코리안 쇼트헤어 생일: 2019년 4월 말 혹은 5월 초 추정 성격: 멍청하고 흉폭함. 벵갈의 피가 흐르는 것 같음 좋아하는 것: 츄르, 장난감 색: 얼룩 고등어 무늬' .length);
다음 enter를 누르면 결과 출력
www.evernote.com/l/Ale9UUsHY-dPTojZKN_cO3zllOIRM2xNCI4/
자바스크립트, 야간모드 주간모드,