Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download Asynchronous JavaScript and XML
Document related concepts
no text concepts found
Transcript
3. 고급 스타일링
3.1 Ajax 터치 추가
Ajax(Asynchronous JavaScript and XML)
자바스크립트와 XML을 사용하는 것과 연관된 웹 개발 방법
웹 서버와 비동기적으로 통신할 수 있게 해 주는 하나의 자바스크립트 객체
Ajax로 인해 자바스크립트를 사용해 서버와 통신이 비동기적으로 이루어
진다. 따라서 다른 작업을 방해하지 않고 백그리운드에서 통신이 이루어진
다.
Ajax 가이드
Ajax는 항상 서버와의 통신과 관련이 있다.
리프레시/리로드 없이 페이지를 갱신할 수 있다.
비동기적 통신이 가능하다.
장점
페이지 이동 없이 고속으로 화면을 전환할 수 있다.
서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
Web App.
1
3.2 교통 정리해 주는 android,html 작성
android.html
android.html 래퍼 페이지를 위한 HTML
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="android.css" type="text/css" media="screen"
/>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="android.js"></script>
</head>
<body>
<div id="header"><h1>Jonathan Stark</h1></div>
<div id="container"></div>
</body>
</html>
Web App.
2
android.css
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc),
to(#999));
border-color: #666;
border-style: solid;
border-width: 0 0 1px 0;
}
#header h1 {
color: #222;
font-size: 20px;
font-weight: bold;
margin: 0 auto;
padding: 10px 0;
text-align: center;
text-shadow: 0px 1px 1px #fff;
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ul {
list-style: none;
margin: 10px;
padding: 0;
}
Web App.
3
ul li a {
background-color: #FFF;
border: 1px solid #999;
color: #222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
ul li a:active, ul li a:hover {
background-color: blue;
color: white;
}
#content {
padding: 10px;
text-shadow: 0px 1px 1px #fff;
}
#content a {
color: blue;
}
#progress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.7);
color: white;
font-size: 18px;
Web App.
4
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
}
#header div.leftButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
position: absolute;
top: 7px;
left: 6px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-border-image: url(images/back_button.png) 0 8 0 14;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#header div.leftButton.clicked {
-webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
}
Web App.
5
android.js
var hist = [];
var startUrl = 'index.html';
$(document).ready(function(){
loadPage(startUrl);
});
function loadPage(url) {
$('body').append('<div id="progress">Loading...</div>');
scrollTo(0,0);
if (url == startUrl) {
var element = ' #header ul';
} else {
var element = ' #content';
}
$('#container').load(url + element, function(){
var title = $('h2').html() || 'Hello!';
$('h1').html(title);
$('h2').remove();
$('.leftButton').remove();
hist.unshift({'url':url, 'title':title});
if (hist.length > 1) {
$('#header').append('<div class="leftButton">'+hist[1].title+'</div>');
$('#header .leftButton').click(function(e){
$(e.target).addClass('clicked');
var thisPage = hist.shift();
var previousPage = hist.shift();
loadPage(previousPage.url);
});
}
$('#container a').click(function(e){
var url = e.target.href;
if (url.match(/jonathanstark.com/)) {
e.preventDefault();
loadPage(url);
}
});
$('#progress').remove();
});
}
Web App.
6
페이지 링크를 Ajax 요청으로 변환하는 android.js 내의 자바스크립트
$(document).ready(function(){
loadPage();
});
function loadPage(url) {
if (url == undefined) {
$('#container').load('index.html #header ul', hijackLinks);
} else {
$('#container').load(url + ' #content', hijackLinks);
}
loadPage() 함수로부터 전달된 url로
}
부터 #content 요소를 받아, 현재 페
function hijackLinks() {
이지의 #container 요소 안에 넣는다.
$('#container a').click(function(e){
이 부분이 완료되면 hijackLinks() 함
수를 실행한다.
e.preventDefault();
loadPage(e.target.href);
});
}
Web App.
7
Jquery의 shift, unshift 메서드의 예
<html>
<body>
<script type="text/javascript">
var exforsys = new Array(4)
exforsys[0] = "Welcome"
exforsys[1] = "To"
exforsys[2] = "Exforsys"
exforsys[3] = "Training"
document.write(exforsys + "<br />")
document.write(exforsys.shift() + "<br />")
document.write(exforsys)
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var exforsys = new Array(4)
exforsys[0] = "Welcome"
exforsys[1] = "To"
exforsys[2] = "Exforsys"
exforsys[3] = "Training"
document.write(exforsys+"<br />")
document.write(exforsys.unshift("Welcome
Message")+"<br />")
document.write(exforsys)
</script>
</body>
</html>
Web App.
8
작업할 때 필요한 콘텐츠 설정하기
자바스크립트는 index.html 문서를 로드
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="android.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="consulting-clinic.html">Consulting Clinic</a></li>
<li><a href="on-call.html">On Call</a></li>
<li><a href="development.html">Development</a></li>
<li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li>
</ul>
</div>
</div>
Web App.
9
<div id="content">
<h2>About</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has
attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
</div>
<div id="sidebar">
<img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png">
<p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on
publishing desktop data to the web.</p>
</div>
<div id="footer">
<ul>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<p class="subtle">Jonathan Stark Consulting, Inc.</p>
</div>
</div>
</body>
</html>
<div id="content">
<h2>About</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has
attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
</div>
<div id="content">
<h2>Blog</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has
attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
</div>
Web App.
10
<div id="content">
<h2>Consulting Clinic</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has
attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
</div>
<div id="content">
<h2>Development</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has
attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
</div>
실행 결과
클릭
Web App.
11
Related documents