자바스크립트 실습
#1
<head>
<script>
alert("hello world");
// 이하 메시지를 포함한 경고창 생성
prompt("hello world");
// 이하 메시지를 포함한 입력창 생성
</script>
</head>
<body>
<input type="" value="" onclick=""/>
// i) type="button" : value를 가진 button이 생성
// ii) type="text" : text를 입력 가능
// iii) type="checkbox" : checkbox 생성
// onclick : ""안의 javascript 코드를 기억해뒀다가 클릭 후 실행
<input type="text" onfocus="" onblur=""/>
// onfocus : 커서가 text창 안에 있을 때 ""안의 코드 실행
// onblur : onfocus와 반대로 밖에 있을 때 ""안의 코드 실행
</body>
#2
<input type="text" id="user_input"/>
// document.getElementById("") : "" id를 통해 text에 접근
<input type="button" value="white" onclick="alert(document.getElementById('user_input').value)"/>
// document.getElementById("").value : 접근한 뒤 .value를 통해 값을 얻음
#3
<style>
.em{
text-decoration: underline; // expression
}
</style>
<(tag) class="em">....</(tag)>
<ol id="target">
<li>html</li>
<li>javascript</li>
<input type="button" value="강조" onclick="document.getElementById('target').className('em')"/>
// button 클릭 시 id 'target'을 가진 tag가
// class name 'em'을 갖게 되면서 'em'의 style를 따라감
#4
<div id="control">
</>
</>
</div>
// tag들을 하나의 그룹으로 묶을 때 쓰는 div.
#control {
float:right;
}
// id 값을 주어 동시에 처리할 수 있다. (CSS)
<body id="target">
</> ...
</> ...
<input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
// button 클릭 시 id 'target'을 받아 body의 클래스 이름을 'white'라 지정함
</body>
body.white {
background-color:white;
color:black;
}
// 클래스 이름이 'white'인 body의 배경색을 'white', 글자색을 'black'으로 함 (CSS)
++ 부가적 내용
<input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
↓
<input type="button" value="white" id="white_btn">
...
...
</article>
<script src="localhost:8080/script.js></script>
</body>
style.css와 마찬가지로 script.js 파일을 따로 생성한 후
wbtn=document.getElementById('white_btn');
// id 'white_btn'에 접근하는 변수 생성
wbtn.addEventListener('click',function(){
// 'click' 시 함수가 일어나도록 지켜보는 함수 'addEventListener'
document.getElementById('target').className='white';
// 앞에서와 마찬가지로 클릭 시 id 'target'의 클래스 이름을 'white'라 지정함
})
+++ 댓글 기능과 채팅 기능
www.disqus.com :: 댓글 기능 넣고 싶은 부분에 source code 복사+붙여넣기
www.tawk.to :: property → URL 쓰기 → Widget code → body 위쪽 코드에 복사+붙여넣기
'Programming > Web Application' 카테고리의 다른 글
| [생활코딩] UI vs API (0) | 2018.02.13 |
|---|---|
| [생활코딩] 함수 (0) | 2018.02.13 |
| [생활코딩] 배열 (0) | 2018.02.13 |