안녕하세요~ 보라해바라기입니다.
드디어 새로운 카테고리에 글을 작성하게 되었네요 ㅎㅎ
블로그를 시작한지도 일주일이 넘어가고요!
일주일 사이에 많은 일이 일어난 것 같아요..
HTML과 CSS 영상도 완강하고 확실히 이 전보다 웹에 대해 많은 지식을 얻는 요즘이랍니다!
오늘은 HTML과 JavaScript의 관계에 대해 전반적으로 살펴볼 거예요.
그럼 렛츠 기릿할 준비 되셨나요?!
HTML과 JS간의 관계
밤에 인터넷을 이용할 때, 화면이 너무 밝아서 눈이 아팠던 적이 있으신가요?!
저는 이런 경우가 너무 많아서 애초에 화면 야간 모드를 설정해서 사용한답니다.
눈에 피로를 덜 주면서 더 편하게 웹페이지를 이용할 수 있는 기술이 주/야간모드입니다.
자바스크립트를 사용하면 주간, 야간모드에 해당하는 버튼을 누름으로써
그 기술을 구현할 수 있습니다.
그! 전! 에!
자바스크립트와 HTML의 특성을 알아볼 필요가 있어요.
HTML은 정적인 반면에 JS는 동적입니다.
예를 들어 1+1을 HTML과 JS에 입력했을 때, HTML은 1+1을, JS는 1+1의 연산 값인 2가 출력된답니다.
문자를 입력했을 때는 똑같이 출력되지만 연산 부분에서 JS는 숫자와 연산 부호를 인식해서 연산을 하게 되는 것이죠!
<body>
<script>
document.write('hello world ')
document.write(1+1)
</script>
</body>
<script> JS코드 </script> : 웹브라우저한테 HTML의 코드로 지금부터 JS가 시작함을 알려주는 태그
또한 버튼, 직접 입력할 수 있는 텍스트창을 만들어서 그에 대한 결과를 출력할 수도 있답니다~
<body>
<input type="button" value="HI" onclick="alert('HI')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!!')">
</body>
<body>
<input type="button" value="HI" onclick="alert('HI')">
<!-- onclick은 특별한 속성. onclick은 반드시 JS. onclick속성의 속성값은 웹브라우저가
가억하고 있다가 onclick속성이 위치하고 있는 태그에 사용자가 클릭했을 떄 JS문법으로
해석해서 동작. -->
<input type="text" onchange="alert('changed')">
<!-- 내용이 변하기 때문에 onchange. onclick, onchange,onkeydown 등은 event! -->
<input type="text" onkeydown="alert('key down!!')">
</body>
위 코드에서 나타난 onclick, onchange, onkeydown등은 이벤트라고 부릅니다!
코드를 하나씩 해석해보자면
<input type="button" value="hi" onclick="alert('hi')">
: 이름이 hi인 버튼이고, 클릭했을 때 hi라는 내용이 담긴 경고창을 띄워라.
<input type="text" onchange="alert('changed')">
: 내용을 입력할 수 있는 텍스트 창을 만들고, 내용이 변할 때 changed라는 내용이 담긴 경고창을 띄워라.
<input type="text" onkeydown="alert('key down!!')">
: 내용을 입력할 수 있는 텍스트 창을 만들고, 키보드를 눌렀을 때 key down!!이라는 내용이 담긴 경고창을 띄워라.
이를 사용해서 보강한 제 웹페이지는 다음과 같습니다!
<input type="button" value="더보기" onclick="alert('보라해바라기의 인생이 담겨져 있습니다.')">
<input type="button" value="이름">
<input type="text" onchange="alert('이름을 입력하였습니다.')">
style.css 파일에서 배경색을 아이보리로 바꿔 좀 더 부드러운 느낌을 주었답니다!
훨씬 더 보기 편하죠?
주/야간모드까지 구현한다면 사용자에게 더 편한 웹페이지가 될 것 같아요 ㅎㅎ
그때까지 화이팅!!!!!
'JavaScript' 카테고리의 다른 글
| [JavaScript] 생활코딩 29 ~ 33 _ 객체 (쓰기와 읽기, 반복문, property, method, 활용) (0) | 2021.07.17 |
|---|---|
| [JavaScript] 생활코딩 24~28 _ 함수( basic, parameter, argument, return, 활용) (0) | 2021.07.16 |
| [JavaScript] 생활코딩 19~23 _ 배열, 반복문과 그 활용 (0) | 2021.07.14 |
| [JavaScript] 생활코딩 12~18 _ 제어 태그 선택, 비교연산자, 불리언, 조건문, 리팩토링 (0) | 2021.07.13 |
| [JavaScript] 생활코딩 6~11 _ 문자열과 숫자, 변수와 대입연산자, 웹브라우저의 제어(CSS) (0) | 2021.07.12 |
댓글