16 JS 실습
JavaScript는 HTML을 프로그래밍적으로 제어하는 언어
<input type="text" id="user_input"/> 에서 뒤에 /는 굳이 닫히는 태그가 필요 없을 때 태그가 끝나는 지점에 /를 붙여주는 것으로 끝냄
실습1
input 태그
사용자가 어떤 정보를 우리가 만드는 웹 에플리케이션에 입력할 수 있는 정치들을 의미
alert -> 경고창 뜨게 명령하는 API
※ JS 코드는 Script 태그 안에 존재하지만 HTML 태그 상에서도 존재할 수 있다.
<input type="button" value="white" onclick="alert('hello world')" />
<input type="text" onfocus="alert('focus')" onblur="alert('blur')" />
-> alert은 js코드
onclick,onfocus,onblur 태그 -> 이벤트(사건) 프로그래밍
- 이벤트(사건)가 일어났을 때 어떤 코드가 실행되어야 한다는 것을 브라우저에게 명령해 놓는 것
위 태그들은 자바스크립트 코드를 취함
컴퓨터 안에서 이벤트 발생의 의미
ex) 마우스가 움직이는 사건, 버튼을 클릭하는 사건
실습2
write 버튼을 클릭하면 입력창에 입력한 내용이 경고창의 메세지로 뜨게 하는 방법
<input type="text" id="user_input" /> -> 입력창 태그에 아이디 부여
<input type="button" value="white" onclick="alert()" />
()안에 id값이 user_input인 태그의 입력값을 넣는다.
document.getElementById('user_input') -> 특정 아이디를 가진 태그를 가져오는 함수, 이 태그는 document 범주 안에 속하는 내장 함수이다.
가져오다 함수 아이디를 통해
태그의 입력값을 불러오기 위해 value를 덧붙임
document.getElementById('user_input').value
최종
<input type="button" value="white" onclick="alert(document.getElementById('user_input').value)" />
-> white버튼을 클릭하면 아이디가 user_input인 태그의 입력 값이 경고창의 메세지로 뜬다.
실습3
class - 각자 다른 범주 안에 있는 태그를 묶을 때 쓰는 태그
.(점) 기호를 앞에 붙여 class 이름을 사용함
예)
<style>
.em {
text-decoration:underline;
}
</style>
.
.
.
<body>
<ul class="em">
<li>나나</li>
<li>뽀</li>
</ul>
<ol>
<li>성규</li>
<li>우현</li>
<li class="em">엘</li>
</ol>
-> 클레스 이름 em으로 묶인 나나,뽀,엘에 밑줄
Js의 className -> 해당 id의 클레스 네임 지정 가능 ( html로 지정하지 않았던 class 네임을 js를 이용하여 생성)
실습4
JS를 이용하여 white 버튼을 누르면 바탕색을 하얀색으로 black 버튼을 누르면 바탕색을 검은색으로 바꾼다.
예)
css 파일
body.white {
background-color:white;
color:black;
} -> 바디 클레스네임이 white일 때 배경색은 흰색, 글자색은 검은색
body.black {
background-color:black;
color:white;
} -> 바디 클레스네임이 black일 때 배경색은 검은색, 글자색은 흰색
html 파일
<body id="target">
.
.
.
<div> -> divesion의 약자. 태그와 태그를 그루핑해서 CSS적인 효과를 주기 위해서 사용하는 태그 (단순히 묶는 기능만 함)
<input type="botton value="white" onclick="document.getElementById('target').className='white'" /> -> white 버튼을 누르면 id가 target인 body 태그에 클레스 네임을 white로 지정함
<<input type="botton value="black" onclick="document.getElementById('target').className='black'" /> ->black 버튼을 누르면 id가 target인 body 태그에 클레스 네임을 black으로 지정함
</div>
</body>
JS를 통해 HTML의 코드를 실시간으로 프로그래밍적으로 변경
-> CSS는 HTML을 디자인하는 언어라면, JS는 HTML을 제어하는 언어이다.
*HTML 에서 정보와 정보가 아닌 것을 구분해서 정보의 기능을 확실하게
*중복 제거를 통한 유지,보수,속도 성능 향상
-> HTML에서 CSS, JS를 분리하여 따로 파일을 만듦
https://disqus.com/ , https://livere.com/댓글 서비스
https://www.tawk.to/ , https://sendbird.com/ 채팅 서비스