1. Source 객체 : Drag의 대상
2. Target 객체 : Drop의 대상
3. Data 객체 : 전달되는 내용 (객체)
dragstart => ondragstart 속성 => Source 객체에서 처리
dragenter => ondragenter 속성 => Target 객체에서 처리
dragover => ondragover 속성 => Target 객체에서 처리
drop => ondrop 속성 => Target 객체에서 처리
| Drag and Drop (0) | 2013.08.01 |
|---|---|
| HTML5 Video (0) | 2013.08.01 |
| HTML5 Canvas (0) | 2013.08.01 |
| HTML5의 새로운 요소 (0) | 2013.08.01 |
| [HTML5] html5 주저리 주저리... (0) | 2013.07.22 |
Event Source가 가지는 Event 속성에 Event Handler를 connect하여,
제공 받은 Event 객체를 이용해서 Event를 처리한다.
1. Event Source : Event가 발생된 document object
2. Event Name : click, dblclick, keyup, load, focus
3. Event Attribute : "on" + Event Name
4. Event Handler : 이벤트 처리를 하는 자바스크립트 함수
5. Event Object
| BOM (0) | 2013.08.01 |
|---|---|
| JavaScript Language Spec (0) | 2013.08.01 |
| [Js] replaceAll 함수 (는 꼼수) (0) | 2013.04.25 |
| js, jQuery 에서의 window.onload (0) | 2013.04.16 |
| select box Option 속성 클릭 시 나타나는 Behavior (0) | 2012.07.22 |
<script>, <style> 태그 : type 속성 제거
화면 구성을 위한 태그들이 추가 ( 검색 엔진이 태그들만 봐도 분석을 쉽게 할수 있게 추가 )
<header> : 화면 윗단 구성 (nav 구성 가능 - Gnb)
<nav> : 화면 네비게이션 구성 (Lnb)
<section> : 내용 집합
<article> : 각각의 내용 구성
<aside> : 사이드 구성 (우측 배너)
<footer> : 화면 밑단 구성
html4.01
<div>
<img />
<span>이미지 설명</span>
</div>
html5
<figure>
<img />
<figcaption>이미지 설명</figcaption>
</figure>
<keygen> : 공용키, 개인키 : 암호화 되어서 바로 날라간다.
<input> type : 태그 자체 만으로 달력 구성
<canvas> drawing API : 화면 그림 그리기
Local Storage API : Client 임시 자동 저장
Web SQL DB API, INdexed DB API : Client 영구 자동 저장
Geolocation API 지도 API
Drag and Drop API : 드래그&드랍 형태 기능 API
| Drag and Drop (0) | 2013.08.01 |
|---|---|
| HTML5 Video (0) | 2013.08.01 |
| HTML5 Canvas (0) | 2013.08.01 |
| HTML5의 새로운 요소 (0) | 2013.08.01 |
| [HTML5] Drag and Drop 기능 (0) | 2013.07.24 |
str = 내용;
searchStr = 바꾸기 전 문자열(찾을 문자열);
replaceStr = 바꾼 후 문자열
while (str.indexOf(searchStr) != -1) {
str = str.replace(searchStr, replaceStr);
}
| JavaScript Language Spec (0) | 2013.08.01 |
|---|---|
| [JavaScript] Event Model (0) | 2013.07.24 |
| js, jQuery 에서의 window.onload (0) | 2013.04.16 |
| select box Option 속성 클릭 시 나타나는 Behavior (0) | 2012.07.22 |
| jQuery select box node 접근방법 (0) | 2012.07.20 |
window.onload = function() {
//문서의 모든 내용(이미지 포함)이 다운로드 되면 실행
}
jQuery(window).load( function() {
//문서의 모든 내용(이미지 포함)이 다운로드 되면 실행
});
| [JavaScript] Event Model (0) | 2013.07.24 |
|---|---|
| [Js] replaceAll 함수 (는 꼼수) (0) | 2013.04.25 |
| select box Option 속성 클릭 시 나타나는 Behavior (0) | 2012.07.22 |
| jQuery select box node 접근방법 (0) | 2012.07.20 |
| DOM 객체에 관하여 주저리 (0) | 2012.07.20 |
| [Jsonp] POST method 데이터전송 (0) | 2017.03.30 |
|---|---|
| [Ajax] Http/Https 크로스도메인 문제 (0) | 2017.03.27 |
| [AJAX] DB 데이터 받아오기 (0) | 2015.07.29 |
<html>
<body>
<script type="text/javascript" src="./jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#vgSortApp').change(function(){
if( $('#vgSortApp option:selected').val() == "a"){
alert("a");
}else{
}
});
});
</script>
<body>
<select id="vgSortApp">
<option value="">------</option>
<option value="a">a항목</option>
<option value="b">b항목</option>
</select>
| [Js] replaceAll 함수 (는 꼼수) (0) | 2013.04.25 |
|---|---|
| js, jQuery 에서의 window.onload (0) | 2013.04.16 |
| jQuery select box node 접근방법 (0) | 2012.07.20 |
| DOM 객체에 관하여 주저리 (0) | 2012.07.20 |
| 태그 id와 name이 js function() 이름과 같으면 나는 에러 (0) | 2012.07.20 |
jQuery("#inputCount").get(0).length ; // 셀렉트박스 길이
jQuery("#inputCount").get(0).options[0].selected = true; //첫번째 항목이 선택되게
//옵션추가
for(var i=0; i<=count; i++){
jQuery("#inputCount").get(0).options[i] = new Option(i + "개", i); }
//옵션 초기화
for (var i = jQuery("#"+objName).get(0).length-1; i>=1; i--)
{
jQuery("#"+objName).get(0).options[i] = null;
}
document.getElementById("inputCount").reInitializeSelectBox(102); //이건 selectbox에 css가 안먹어서 js로 억지로 만들어 끼워 넣었는데 가로 size가 잘 안먹어서 다시 생성해주는 스크립트로 넣었음. 102는 넓이
<select id="inputCount" name="inputCount">
<option value="">선택수량</option>
<option value="1">1개</option>
</select>
| js, jQuery 에서의 window.onload (0) | 2013.04.16 |
|---|---|
| select box Option 속성 클릭 시 나타나는 Behavior (0) | 2012.07.22 |
| DOM 객체에 관하여 주저리 (0) | 2012.07.20 |
| 태그 id와 name이 js function() 이름과 같으면 나는 에러 (0) | 2012.07.20 |
| getCookie() (0) | 2012.07.20 |
/*
DOM 스크립트
*/
document.createElement("p")
document.createTextNode("")
node.cloneNode(false)
node.nodeType()
node.nodeValue()
document.getElementById("description").firstChild.nodeValue
attribute node="description" 인 요소노드의 firstChild 는 textNode 이다.
document.getElementById(element node)
document.getElementsByTagName(element node)
<> document.createTextNode("Hello world")
document.body.appendChild(para)
document.removeChild(message)
element.insertBefore(newNode, targetNode)
element.replaceChild(newChild, oldChild)
element.setAttribute(attributeName, attributeValue) - element 요소만 가능
element.setAttribute(attribute, Value )
node.hasChildNodes()
node.childNodes.length
document.childNodes[0].nodeName == "HTML"
node.lastChild == node.childNodes[element.childNodes.length - 1]
document.body.appendChild(placeholder);
document.body.appendChild(description);
var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placehorder, gallery);
addLoadEvent();
addLoadEvent();
insertAfter() {}
/*
HTML DOM
*/
document.getElementByTagName("title").firstChild.nodeValue;
var w = window.open();
w.document.open();
w.document.write
w.document.close();
//write() 글이 쓰여진 새창을 띄운후 close한다
document.getElementById("w3c").taget = "_blank";
// 새창 띄우기.
// target
<area id="venus" shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm?id=venus" />
document.getElementById("venus").host == "www.w3scholls.com"
getElementById("venus").hostname
getElementById("venus").pathName == "/jsref/venus.html"
getElementById("venus").search == "?id=venus"
getElementById("venus").shape == "circle"
document.getElementById("button1").form.id
document.getElementById("button1").parentNode.getAttribute("id")
<form id="frm1" accept-charset="ISO-8859-1">
document.getElementById("frm1").acceptCharset == "ISO-8859-1"
/*
document.getElementById("frm1").length
if(!document.getElementById) return false;
if(!document.getElementByTagName) return false;
if(!document.getElementByid("frm1")) return false;
var frm = document.getElementById("frm1");
var tagFrm = frm.getElementByTagName.childNodes;
for(var i=0; i<tagFrm.length; i++){
if(!tagFrm[i]) return false;
document.write( tagFrm[i] );
}
*/
<iframe id="myframe" src="/default.asp">
document.getElementById("myframe").align="right";
// 글 오른쪽에 iframe이 위치함
<form onmousedown="whichButton(event)">
if( event.button == 2) { alert("you clicked the right mouse button!"); }
else { alert("you clicked the left mouse button!"); }
| select box Option 속성 클릭 시 나타나는 Behavior (0) | 2012.07.22 |
|---|---|
| jQuery select box node 접근방법 (0) | 2012.07.20 |
| 태그 id와 name이 js function() 이름과 같으면 나는 에러 (0) | 2012.07.20 |
| getCookie() (0) | 2012.07.20 |
| jQuery selectbox (0) | 2012.07.20 |
Uncaught TypeError: undefined is not a function
| select box Option 속성 클릭 시 나타나는 Behavior (0) | 2012.07.22 |
|---|---|
| jQuery select box node 접근방법 (0) | 2012.07.20 |
| DOM 객체에 관하여 주저리 (0) | 2012.07.20 |
| getCookie() (0) | 2012.07.20 |
| jQuery selectbox (0) | 2012.07.20 |
testjs11_event2.html