frameset : 표준아님.
<html lang="en">
<head>
<meta charset="utf-8">
<title>framesetdemo</title>
</head>
<frameset rows="20%, *" noresize>
<frame src="http://www.naver.com" />
<frameset cols="30%,*" noresize>
<frame src="http://www.nate.com" />
<frame src="http://www.daum.net" />
</frameset>
</frameset>
</html>
frameset은 body의 역할을 대신함. 그래서 frameset을 쓰면 body를 쓰면 안된다.
<frameset cols="5*,3*,2*"> 이런 식으로 쓰면 5:3:2의 비율을 뜻함.
------------------------------
frameset
framesetdem.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>framesetdemo</title>
</head>
<frameset cols="30%, *" frameborder="1" border="30" bordercolor="red">
<frame src="left.html" scrolling="auto" name="left"/>
<frame src="right.html" name="right" marginheight="50" marginwidth="100"/>
</frameset>
</html>
left.html
<html>
<body bgcolor="yellow">
<h1>나는 왼쪽 페이지</h1>
<a href="http://www.naver.com" target="right">네이버</a><br>
<a href="http://www.daum.net" target="right">다음</a><br>
<a href="http://www.nate.com" target="right">네이트</a><br>
</body>
</html>
right.html
<html>
<body bgcolor="green">
<h1>나는 오른쪽 페이지</h1>
</body>
</html>
margin은 화면의 끝쪽에서 글씨가 떨어지는 공간을 주는 것.
frameborder 프레임 사이를 경계짓는 선.
border 프레임 사이를 경계짓는 선의 두께.
bodercolor 프레임 사이를 경계짓는 선의 색.
target="_blank" 새 창으로 뜸
target="_self" 현재 창에서 이동.
target="_top" 부모의 프레임을 사용..?
target="right" 프레임의 이름을 주어 그 프레임에 뜨게.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Drag
dragdrop.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> Drag & Drop Demo </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/dragdrop.css">
<script type="text/javascript" src="scripts/dragdrop.js"></script>
</head>
<body>
<h1> Drag & Drop Practice </h1>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="images/check.png" draggable="true" ondragstart="drag(event)" width="200" height="200" />
</body>
</html>
dragdrop.css
#div1{
width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;
}
dragdrop.js
function allowDrop(evt) {
evt.preventDefault();
}
function drag(evt){
evt.dataTransfer.setData("Text", evt.target.id);
}
function drop(evt){
evt.preventDefault();
var data = evt.dataTransfer.getData("Text");
evt.target.appendChild(document.getElementById(data));
}
preventDefault 드래그 오버할 때(ex)이미지가 다른 이미지의 위를 넘어갈 때) 기본 이벤트를 정지.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
geolocation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition (position) {
x.innerHTML="Latitude:"+position.coords.latitude+"<br>Longitude"+position.coords.longitude;
}
</script>
</body>
</html>
값은
Latitude:36.992107
Longitude127.112945
이런식으로 나옴.
-------------------
geolocation : 지도로 나오게
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Click the button to get your position :</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition (position) {
var str = position.coords.latitude + ","+ position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+str+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
</script>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Manifest
C:\Program Files (x86)\Apache Software Foundation\Apache2.2\conf 폴더의 mime.types 파일을 열어
1429라인에 text/cache-manifest appcache 이 있다
다음라인에 text/cache-manifest manifest 를 추가해준다.
저장 후 아파치 서비스를 죽였다 살려줌. 관리자 권한 명령프롬프트 켜서 net stop apache2.2 후 net start apache2.2
offlinedemo.html
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js"></script>
<p id="timePara">
<button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="images/check.png"></p>
<p>Try opening<a href="index1.html" target="_blnk"> this page </a>,
then go offline, and reload the page.
the script and the image should still work. </p>
</body>
</html>
demo_html.appcache
CACHE MANIFEST
offlinedemo.html
demo_time.js
images/check.png
demo_time.js
function getDateTime(){
var d = new Date();
document.getElementById('timePara').innerHTML=d;
}
실행은 인터넷이 끊은 상태에서 실행 해보면 된다. 크롬에서는 오프라인상태에서 ctrl+shift+j 에서 Resource 탭에서 Application Cache에서 오프라인 되었을 때 가져온 파일의 목록을 볼 수 있다..?
127.0.0.1:80/0521/offlinedemo.html 로 접속(원래 스타트누르면 8020 인데 80포트로 잡아줘야함)
CACHE MANIFEST 오프라인이되어서도 파일에 저장해야할 파일의 목록
NETWORK 네트워크가 다시 연결되었을 때 받아야할 파일 리스트
FALLBACK NETWORK 에서 불러올 파일이 실패했을 떄, 대체해서 보여줄 파일(실패시에)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
checkstorage
<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML 5 Web Storage </title>
<meta charset="utf-8">
<script type="text/javascript">
function getData(){
if(typeof(Storage)!=="undefined"){
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
} else{
document.getElementById("result").innetHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body onload="getData()">
<div id="result"></div>
</body>
</html>
localStorage 에 저장했기 때문에 컴퓨터에서 삭제하기전까지 남아있다.
크롬에서는 오프라인상태에서 ctrl+shift+j 에서 Resource 탭에서 Local Storage에서 lastname이 smith인 것을 볼 수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<title> localStorage </title>
<meta charset="utf-8">
<script type="text/javascript">
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if(localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + "time(s).";
} else{
document.getElementById("result").innetHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p>Click the button to see the counter increase</p>
<p>
<button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
</body>
</html>
출력이 아래와 같이 나옴
Click the button to see the counter increase
Click me! <---버튼임
You have clicked the button 58time(s).
위 Click me! 버튼을 누르면 카운트가 올라가고. 브라우저마다 서로 값을 가지고 있기 때문에 크롬에서한 것이 익스플로어로 값을 가져가지 않는다. (크롬에서는 80포트가 되고 8020은 안되네. 나머진 8020도 다되는데)
이 정보는 다시 들어왔을 때 값을 계속 가지고 있기 때문에 이어진다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
SessionStorage : 세션이 살아잇을 때만 정보를 가지고 있고, 세션을 닫으면 정보를 날림.
<!DOCTYPE html>
<html lang="en">
<head>
<title> sessionStorage </title>
<script>
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if(sessionStorage.clickcount){
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + "time(s).";
} else{
document.getElementById("result").innetHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p>Click the button to see the counter increase</p>
<p>
<button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
</body>
</html>
브라우저가 닫히면 가지고있는 정보를 날리기 때문에 다시 초기화 된다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
=======================================================================
web worker 사용 전 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webworkerdemo</title>
<script>
setTimeout(function(){
console.log('A');
console.log('A');
console.log('A');
}, 1000);
setTimeout(function(){
console.log('B');
console.log('B');
console.log('B');
}, 1000);
</script>
</head>
<body>
</body>
</html>
크롬에서 ctrl+shift+j 로 console을 볼 수 있는데 AAABBB 순서가 변하지 않는다. (단일 쓰레드이므로?)
--------------------------------------------
web worker 사용 전 예제2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webworkerdemo</title>
<script>
setTimeout(function(){
for(var i = 0 ; i < 100; i++){
console.log('A');
}
}, 1000);
while(true){}
</script>
</head>
<body>
<font size='7' color='red'>Hello, World</font>
</body>
</html>
무한 루프에 걸려서 Hello, World도 찍지 못하고 아무것도 하지 못한다.
---------------------------------------------------
web worker는 응답을 기다리면서 다른 작업을 처리할 수 있게 하는 것이다. foreground에 영향을 주지않고 background 에서 돈다.
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">StartWorker</button>
<button onclick="stopWorker()">StopWorker</button>
<br><br>
<script>
var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(typeof(w)=="undefined"){
w=new Worker("demo_workers.js");
}
w.onmessage = function (event){
document.getElementById("result").innerHTML=event.data;
};
} else{
document.getElementByuId("result").innerHTML="Sorry, your browser does not suport Web Workers...";
}
}
function stopWorker(){
w.terminate();
}
</script>
</body>
</html>
demo_time.js
function getDateTime(){
var d = new Date();
document.getElementById('timePara').innerHTML=d;
}
출력:
Count numbers: 3
StartWorker StopWorker
Start 누르면 1씩 증가. Stop누르면 멈춤. 새로고침해야 다시 start누를 수 있음.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
web worker fibonacci
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webworkerdemo</title>
<script>
function test(){
var worker = new Worker('webworkerfibo.js');
worker.onmessage = function (event) {
document.getElementById('aaa').innerHTML = event.data;
worker.terminate();
};
worker.postMessage(50);
}
</script>
</head>
<body onload="test()">
<div id="aaa">Result</div>
</body>
</html>
webworkerfibo.js
function fibonacci(n) {
if (n < 2) {
return n;
} else {
return fibonacci(n - 2) + fibonacci(n - 1);
}
}
onmessage = function (event) {
postMessage(fibonacci(event.data));
};
피보나치 50번째 수를 구하기에는 시간이 걸리기 때문에 백그라운드에 두고 다른 작업을 처리 할 수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
file api : 파일에 대한 정보
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>filedemo</title>
</head>
<body>
<input type="file" id="myfile" multiple><br /><br />
<div id="aaa">Result</div>
<script>
//File API
var filetag = document.getElementById('myfile');
filetag.onchange = function(){
var files = this.files;
var str = '';
for(var i = 0 ; i < files.length ; i++){
var file = files[i];
str += '<p>File name : ' + file.name + "<br />";
str += 'File type : ' + file.type + "<br />";
str += 'File size : ' + file.size + "<br />";
str += 'File lastmodified date : ' + file.lastModifiedDate + "</p>";
str += "<hr>";
}
document.getElementById('aaa').innerHTML = str;
};
</script>
</body>
</html>
출력 : 파일을 선택하면 그에대한 정보를 출력.
File name : fieldset.html
File type : text/html
File size : 637
File lastmodified date : Tue May 20 2014 11:54:49 GMT+0900 (Korea Standard Time)
설명: multiple 은 여러파일을 한번에 불러올 수 있음.
---------------------------------------------------
file api : 파일에 대한 내용(이미지불러오기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>filedemo</title>
</head>
<body>
<input type="file" id="myfile"><br /><br />
<div id="aaa">Result</div>
<script>
//File API
var filetag = document.getElementById('myfile');
filetag.onchange = function(){
var file = this.files;
var reader = new FileReader();
reader.onload = function(){
var imgTag = document.createElement('img');
igTag.width = 400;
imgTag.height = 400;
imgTag.src = reader.result;
document.body.appendChild(imgTag);
};
reader.readAsDataURL(file);
};
</script>
</body>
</html>
설명:
reader.onload 는 파일이 로드되었는지 확인하는 작업. 안써줘도 상관엄음.
BLOB형으로 해야한다면서 출력 안됨..
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
web database
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web SQL Database</title>
<script>
//if(!window.openDatabase){ //지원하지 않는다면
// alert("이 브라우저는 Web SQL Database 를 지원하지 않습니다.");
// return false;
// }else{ //지원한다면
// }
var db = window.openDatabase("mydb", "1.0", "나의 첫번째 디비", 1024*1024);
db.transaction(function(x){ //Query 문 실행부분
var str = "CREATE TABLE emp(idx INTEGER PRIMARY KEY,";
str += " irum VARCHAR NOT NULL,";
str += " age INTEGER NOT NULL)";
x.executeSql(str);
});
db.transaction(function(x){
x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(1, '조성모', 28)");
x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(2, '설운도', 38)");
x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(3, '이미자', 48)");
x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(4, '이문세', 58)");
},
function(error){
alert("Insert error : " + error.message);
},
function(){
alert("Insert Success");
}
);
</script>
</head>
<body>
</body>
</html>
크롬에서 ctrl+shift+j 해서 resource 탭에서 WebSQL-mydb-emp 테이블이 있는 것을 확인 할수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
'Java & Oracle' 카테고리의 다른 글
| font-family, vertical-align, list-style-type 이미지로, position, float (0) | 2014.05.23 |
|---|---|
| CSS 속성 , selector (0) | 2014.05.22 |
| HTML5 form (0) | 2014.05.20 |
| Applet (0) | 2014.05.19 |
| HTML5 tag, table (0) | 2014.05.15 |