이전의 내용을 응용하여 실시간으로 html이 적용되는 웹페이지를 jQuery를 이용해서 작성하였다.
================================ JSP ================================
<!-- 스크립트 부분 / 사용한 CDN (jQuery 3.3.1)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// #data에 내용이 입력되면 동작한다.
$("#data").keyup(function(){
// #data에 내용이 입력되면 rawdata라는 객체가 생긴다.
// rawdata 객체는 #data의 내용을 담고 있다.
var rawdata = $("#data").val();
// rawdata를 #source에 text로 세팅한다.
$("#source").text(rawdata);
// rawdata를 #display에 html이 적용된 걸로 출력한다.
$("#display").html(rawdata);
});
});
</script>
<!-- 바디 부분 -->
<body>
<form>
HTML 연습기<br/>
<textarea rows="6" cols="40" id="data"></textarea><br/><br/>
<소스를 출력부분><br/>
<span id="source"></span><br/><br/>
<HTML이 적용 된 것을 확인하는 부분><br/>
<span id="display"></span>
</form>
</body>
================================ JSP ================================
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [Spring] Criteria.class(페이징처리, 검색) (0) | 2018.05.21 |
|---|---|
| [Spring] list.jsp (페이징처리, 검색) (0) | 2018.05.21 |
| [Mybatis] DAO 부분 정리 (0) | 2018.05.21 |
| [Mybatis] boardMapper.xml (Oracle) (0) | 2018.05.21 |
| [Mybatis] mybatis-config.xml (0) | 2018.05.21 |