자바스크립트 4일차_내 소스
<html>
<head>
<meta charset='utf-8'>
<title>4일차</title>
</head>
<body>
<input type="button" value="다이얼로그 표시" onclick="btn_onclick()" /
>
<input type="button" value="서브 윈도우 열기" onclick="win_open()" /
>
<input type="button" value="서브 윈도우 닫기" onclick="win_close()" /
>
<input type="button" value="토글btn 윈도우" onclick="toggleWindow1()" />
<div id="result"></div>
<form name="fm" onsubmit="return process()">
<label>name1 : <input type="text" name ="name1" size ="10"/></label><br />
<label>name2 : <input type="text" name ="name2" size ="10"/></label><br />
<label>name3 : <input type="text" name ="name3" size ="10"/></label><br />
<input type = "submit" value="송신"/>
</form>
<form>
<p>텍스트: <input type="text"></p>
<p>비밀번호: <input type="password"></p>
<p>텍스트영역: <textarea></textarea></p>
<p>라디오:
<input type="radio" name="fruit" value="apple">사과
<input type="radio" name="fruit" value="orange">오렌지
<input type="radio" name="fruit" value="pear">뭐야
</p>
<p>체크박스:
<input type="checkbox" name="vehicle" value="apple">도보
<input type="checkbox" name="vehicle" value="orange">자전거
<input type="checkbox" name="vehicle" value="pear">자동차</p>
<input type="submit" value="선택 완료" onclick="process1(this.form)">
</form>
<form>
<p>이름: <input type="text" name="name"></p>
<p><input type="button" value="선택" onclick="process1(this.form)"></p>
</form>
<form name ="fm1">
<label>이름: <input type="text" id="name1" name="name" size="15" value=""/>
</label>
<input type="button" value="송신" onclick="btn_onClick()" />
<div id="result"></div>
</form>
<div id="anchordiv">
<a href="http://naver.com">네이버</a><br/>
<a href="http://daum.com">다음</a><br/>
<a href="http://google.com">구글</a><br/>
</div>
<form name ="fm2">
<select id="food" name="food">
<option value="라면">라면</option>
<option value="만두">만두</option>
<option value="고기">고기</option>
</select>
<input type="submit" value="송신">
</form>
<div>
<button id='event_btn'>이벤트 처리하기</button>
</div>
<div>
<img id='event_img' src="americano.jpg"></img>
</div>
<div id='list'>
<img class="coffee" src="americano.jpg" ></img>
</div>
<script type="text/javascript">
function btn_onclick(){
window.alert('버튼이 클릭되었다.');
}
var subwin;
function win_open(){
subwin = window.open('http://seongjoo.com/','Sample','width=600,height=500, scrollbars=yes, location=yes');
}
function win_close(){
if(subwin && !subwin.closed){
subwin.close();
}
}
function toggleWindow(){
var subwin1; //이러면 작동이 안됨.
if(subwin1 && !subwin1.closed){
subwin.close();
}else{
subwin1 = window.open('http://seongjoo.com/','Sample','width=600,height=500, scrollbars=yes, location=yes');
}
}
//아래와 같이 클로저로 만들면 프로퍼티 형태로 저장됨.
//Golbal-Closure-Local
function makeToggleSubwin(url,title){
var subwin2;
return function(){
if(subwin2 && !subwin2.closed){
subwin2.close();
}else{
subwin2 = window.open(url,title,'width=600,height=500, scrollbars=yes, location=yes');
}
}
}
var toggleWindow1 = makeToggleSubwin('http://seongjoo.com/','Sample');
//타이머
var timer;
//window.onload = function(){
// timer = window.setInterval(
// function(){
// var dat= new Date();
// document.getElementById('result').innerHTML = dat.//toLocalTimeString();
// },1000);
// };
//6-14
function process(){
var result ='';
for(var i=0; i<document.fm.elements.length;i++){
result += document.fm.elements[i].name + '\n';
}
window.alert(result);
return false;
}
function process1(value){
window.alert(value);
return false;
}
</script>
<script type="text/javascript">
//DOM기초 id로 검색해서 반영
function btn_onClick(){
var result = document.getElementById('result');
result.innerHTML = '안녕하슈'+document.fm1.name1.value+'씨';
}
//DOM 태그명을 키값으로 노드 취득
var url_list = [];
var anchor_list = document.getElementsByTagName('a');
for(var i=0;i<anchor_list.length;i++){
url_list.push(anchor_list.item(i).href);
}
console.log(url_list.join('\n'));
//DOM 클래스명을 키값으로 노드 취득
//<a href="" class="my"/>
//document.getElementsByClassName('my');
//상대위치관계로 노드 취득
var result = [];
var s = document.getElementById('food');
var opts = s.childNodes;
for(var i=0; i<opts.length;i++){
var opt = opts.item(i);
if(opt.nodeType==1){
result.push(opt.value);
}
}
console.log(result.join(","));
//속성값 취득
//var attrs = XX.attributes
//for{attrs.item(i);}
//노드추가 (Console입력)
//var div_link = document.getElementById('anchordiv');
//var new_anchor = document.createElement('a');
//new_anchor.href='http://samsung.com';
//var new_anchor_title = document.createTextNode('삼성');
//new_anchor.appendChild(new_anchor_title);
//div_link.appendChild(new_anchor);
//노드 치환 : replaceChild
//노드 삭제 : removeChild
</script>
<script type="text/javascript">
var btn = document.getElementById('event_btn');
btn.addEventListener('click',function(){alert('click!');},false);
var img1 = document.getElementById('event_img');
var display_event_info= function(e){
console.log("x:"+e.clientX);
console.log("y:"+e.clientY);
}
img1.addEventListener('mousedown',display_event_info,false);
</script>
<script type="text/javascript" src='j.js'></script>
<script type="text/javascript">
//원래대로면 아래와 같이 자식 노드 찾아서 속성 찾아서 어쩌구 저쩌구
var javasimg = document.getElementById('list');
var javasimgchild = javasimg.childNodes;
var i;
for(i in javasimgchild){
if(javasimgchild[i].nodeType==1){
}
}
//jQuery방식으로 간단하게
$(document).ready(function(){
var $americano_img = $('#list img.coffee');
$americano_img.css('width', 300);
$americano_img.click(function(){
alert('이미지클릭');
});
});
</script>
</body>
</html>
day4.html
j.js