HTML_JS(Sol)/jQuery_Ajax
210616_1(jQuery_ajax)
너굴셉
2021. 6. 16. 17:21
반응형 웹 : 모바일 + pc 에 맞추어서 화면이 조절되는 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>comment</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
*{
padding: 0;
margin: 0;
color: #333;
}
ul{
list-style: none;
}
#container{
padding: 30px 20px;
}
h1{
font-size : large;
border-left: 10px solid #7BAEB5;
border-bottom: 1px solid #7BAEB5;
padding: 10px;
width: auto;
}
#comment_write{
padding: 20px 15px;
border-bottom: 1px solid #7BAEB5;
}
#comment_write label{
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
#comment_write input[type='text'], #comment_write textarea{
border: 1px solid #ccc;
vertical-align: middle;
padding: 3px 10px;
font-size: 12px;
line-height: 150%;
}
#comment_write textarea{
width: 380px;
height: 90px;
}
.comment_item{
font-size: 13px;
color: #333;
padding: 15px;
border-bottom: 1px dotted #ccc;
line-height: 150%;
}
.comment_item .writer{
color: #555;
line-height: 200%;
}
.comment_item .writer input{
vertical-align: middle;
}
.comment_item .writer .name{
color: #222;
font-weight: bold;
font-size: 14px;
}
</style>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- 사용자 스크립트 블록 -->
<script type="text/javascript">
$(function(){
$("#comment_form").submit(function(){
if(!$("#user_name").val()){
alert("이름을 입력하세요.");
$("#user_name").focus();
return false;
}
if(!$("#comment").val()){
alert("내용을 입력하세요.");
$("#comment").focus();
return false;
}
//작성일시 만들기
var date = new Date();
var yy = date.getFullYear();
var mm = date.getMonth()+1;
var dd = date.getDate();
var hh = date.getHours();
var mi = date.getMinutes();
var ss = date.getSeconds();
//자리수 보정
if(mm<10){mm="0"+mm;};
if(dd<10){dd="0"+dd;};
if(hh<10){hh="0"+hh;};
if(mi<10){mi="0"+mi;};
if(ss<10){ss="0"+ss;};
//오늘 날짜값 생성
var today = yy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss;
//새로운 글이 추가될때 li태그 객체
var new_li =$("<li>");
new_li.addClass("comment_item");
//작성자 정보가 지정될 <p>태그
var writer_p = $("<p>");
writer_p.addClass("writer");
//작성자 정보의 이름
var name_span = $("<span>");
name_span.addClass("name");
name_span.html($("#user_name").val()+"님");
//작성일시
var date_span = $("<span>");
date_span.html(" / " +today+" ");
//삭제하기 버튼
var del_input = $("<input>");
del_input.attr({
"type" : "button",
"value" : "삭제하기"
});
del_input.addClass("delete_btn");
//내용
var content_p = $("<p>");
content_p.html($("#comment").val());
//조립하기
writer_p.append(name_span).append(date_span).append(del_input);
new_li.append(writer_p).append(content_p);
$("#comment_list").append(new_li);
//입력내용 지우기
$("#user_name").val("");
$("#comment").val("");
return false;
});
// 삭제 버튼 클릭시의 동작을 "미리" 지정
$(document).on("click",".delete_btn", function(){
if(confirm("정말 선택하신 항목을 삭제하시겠습니까?")){
$(this).parents(".comment_item").remove();
}
});
});
</script>
</head>
<body>
<div id="container">
<h1>jQuery Comment</h1>
<div id="comment_write">
<form id="comment_form">
<div>
<label for="user_name">작성자</label>
<input type="text" name="user_name" id="user_name"/>
<input type="submit" value="저장하기"/>
</div>
<div>
<label for="comment">덧글 내용</label>
<textarea name="comment" id="comment"></textarea>
</div>
</form>
</div>
<ul id="comment_list">
<!--여기에 동적 생성 요소가 들어가게 됩니다.-->
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>placeholder</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- placeholder Plugin -->
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<!-- 사용자 스크립트 블록 -->
<script type="text/javascript">
$(function(){
//모든 input태그와 textarea 태그에 대하여 placeholder() 확장 함수 사용
$('input, textarea').placeholder();
});
</script>
</head>
<body>
<h1 class="title">Placeholder Example</h1>
<div class="example">
<input type="text" name="user_name" placeholder="이름을 입력하세요."/><br/>
<textarea name="memo" placeholder="내용을 입력하세요."></textarea>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>lightbox(1)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- lightbox Plugin -->
<script type="text/javascript" src="js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
</head>
<body>
<h1 class="title">LightBox ImageViewer</h1>
<div class="example">
<a href="img/page1.jpg" data-lightbox="image-1" title="도시의 야경">
<img src="img/page1_thumb.jpg"/></a>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>lightbox(2)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<style type="text/css">
.gallery li{
display: inline-block;
width: 200px;
height: 120px;
padding: 0 10px;
}
.gallery li img{
width: 100%;
height: 100%;
border: 0;
}
</style>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- lightbox Plugin -->
<script type="text/javascript" src="js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
</head>
<body>
<h1 class="title">Lightbox Simple Gallery</h1>
<div class="example">
<ul class="gallery">
<li><a href="img/page1.jpg" data-lightbox="roadtrop" title="도시의야경">
<img src="img/page1_thumb.jpg"/></a></li>
<li><a href="img/page2.jpg" data-lightbox="roadtrop" title="초원위의 집">
<img src="img/page2_thumb.jpg"/></a></li>
<li><a href="img/page3.jpg" data-lightbox="roadtrop" title="야경">
<img src="img/page3_thumb.jpg"/></a></li>
</ul>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>slide(1)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<style type="text/css">
#slides {
display: none;
}
</style>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- slide Plugin -->
<script src="js/jquery.slides.min.js"></script>
<!-- plugin CSS -->
<link rel="stylesheet" type="text/css" href="css/navigation.css" />
<!-- 사용자 정의 스크립트 부분 -->
<script type="text/javascript">
$(function () {
$('#slides').slidesjs({
"width": 800,
"height": 300
});
});
</script>
</head>
<body>
<h1 class="title">Image Slider (1)</h1>
<div class="example">
<div id="slides">
<img src="img/slide-1.jpg" />
<img src="img/slide-2.jpg" />
<img src="img/slide-3.jpg" />
<img src="img/slide-4.jpg" />
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>slide(2)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- slide Plugin -->
<script type="text/javascript" src="js/jquery.slides.min.js"></script>
<!-- plugin CSS -->
<link rel="stylesheet" type="text/css" href="css/navigation.css"/>
<!-- 사용자 정의 스크립트 부분 -->
<script type="text/javascript">
$(function(){
$('#slides').slidesjs({
width :800,
height : 300,
/** 재생 옵션 추가 */
/** slidesjs-stop 과 slides-play 클래스에 대한 CSS 코드를 정의 하면,
* 버튼에 대한 커스터마이징 가능합니다.*/
play : {
/** play/stop 버튼의 표시 여부 >> false일빼, 커스텀 버튼은 사용할 수 없다*/
active : true,
/** 자동재생 on */
auto : true,
/** 슬라이드 재생 간격 = 4초*/
interval : 4000,
/** ture일 경우 -> play와 stop 버튼이 상황에 따라 표시됨,
* false일 경우 -> play와 stop 버튼이 항상 표시됨 */
swap : true,
/** 효과 제어 : slide/ fade */
effect : "fade"
}
});
});
</script>
</head>
<body>
<h1 class="title">Image Slider(2)</h1>
<div class="example">
<div id="slides">
<img src="img/slide-1.jpg"/>
<img src="img/slide-2.jpg"/>
<img src="img/slide-3.jpg"/>
<img src="img/slide-4.jpg"/>
</div>
</div>
</body>
</html>
slide3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>slide(3)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- slide Plugin -->
<script src="js/jquery.slides.min.js"></script>
<!-- plugin CSS -->
<link rel="stylesheet" type="text/css" href="css/navigation.css"/>
<!-- 사용자 정의 스크립트 부분 -->
<script type="text/javascript">
$(function(){
$('#slides').slidesjs({
width : 800,
height : 300,
navigation :{
/** 버튼의 표시 여부 설정 */
active : true,
/** 버튼 클릭시 적용될 효과 */
effect : "slide"
},
pagination : {
/** 버튼의 표시 여부 설정 */
active : true,
/** 버튼클릭시 적용될 효과 */
effect : "fade"
},
effect :{
slide : {
speed : 200
},
fade :{
speed : 300,
crossfade : true
}
}
});
});
</script>
</head>
<body>
<h1 class="title">Image Slider(3)</h1>
<div class="example">
<div id="slides">
<img src="img/slide-1.jpg"/>
<img src="img/slide-2.jpg"/>
<img src="img/slide-3.jpg"/>
<img src="img/slide-4.jpg"/>
</div>
</div>
</body>
</html>
slide4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>slide(4)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- slide Plugin -->
<script src="js/jquery.slides.min.js"></script>
<!-- plugin CSS -->
<link rel="stylesheet" type="text/css" href="css/navigation.css"/>
<!-- 사용자 정의 스크립트 부분 -->
<script type="text/javascript">
$(function(){
$('#slides').slidesjs({
width : 800,
height : 300,
effect :{
slide : {
speed : 2000
},
},
callback : {
loaded : function(number){
$('h1.title').html(number +"번 이미지 로드됨");
},
start : function(number){
$('h1.title').html(number +"번 이미지 애니메이션 시작");
},
complete : function(number){
$('h1.title').html(number+"번 이미지 애니메이션 종료");
}
}
});
});
</script>
</head>
<body>
<h1 class="title">Image Slider(4)</h1>
<div class="example">
<div id="slides">
<img src="img/slide-1.jpg"/>
<img src="img/slide-2.jpg"/>
<img src="img/slide-3.jpg"/>
<img src="img/slide-4.jpg"/>
</div>
</div>
</body>
</html>
aJax
이벤트 처리의 모습
바인드함수 이벤트처리
$('#mybnt').bind('click', function(){} );
바로 이벤트처리
$('#mybnt').click(function(){ $.ajax({ }) });
$.ajax ===> jQuery.ajax
$('#document').on("change");
day10.text02
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>text(2)</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!-- jQuery Framework 참조하기 -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- plugin 참조 -->
<script type="text/javascript" src="plugin/booklet/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="plugin/booklet/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="plugin/booklet/jquery.booklet.latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/booklet/jquery.booklet.latest.css" />
<!--// plugin 참조 -->
<!-- 사용자 스크립트 블록 -->
<script type="text/javascript">
$(function(){
$("#mybtn").click(function(){
$.ajax({
url : "ajax/text/02.txt",
type : "get",
dataType : "text",
timeout : 30000,
cache : false,
success : function(data){
//dataType값이 text일 경우에는 단순히 내용에 대한 문자열임
$("#result").append(data);
},
error : function(xhr, textStatus, errorThrown){
//읽으려는 대상 주소가 잘못된 경우에 사용됩니다.
$("div").html("<div>"+ textStatus + "(HTTP-"+ xhr.status +" / "+ errorThrown + ")</div>");
}
});
});
});
</script>
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 HTML소스 읽기</h1>
<div class="exec">
<input type="button" value="txt파일 가져오기" id="mybtn" />
</div>
<div class="console" id="result"></div>
</body>
</html>