반응형
반응형
var testId = document.getElementById("test");

testId.empty();
// 하위태그 삭제

testId.remove();
// 태그 자체 삭제

testId.html("<div> 안녕하세요 </div>");
// 하위 태그에 태그 내용 append

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id ="content"></div>

    <script>
        var content = document.querySelector("#content");

        content.innerText = "<h1>new Text!!</h1>";

        content.innerHTML += "<h1>new Text!!</h1>";
    </script>
</body>
</html>
  • innerText
    • 요소 내부 텍스트를 변경합니다. 
  • innerHTML
    • 요소 내부 태그를 추가합니다
반응형
반응형
$(document).ready(
	$(function() {
		$("#file_input4").on(
			'change',
			function() {
				mappingPath = $(this).val();
				console.log(mappingPath);

				if (window.FileReader) {
					var filename = $(this)[0].files[0].name;
				} else {
					var filename = $(this).val().split('/').pop()
						.split('\\').pop();
				}
				$("#userfile4").val(filename);
			});

	})
);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/js/board.js"></script>
<script data-search-pseudo-elements defer
	src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
	crossorigin="anonymous"></script>

<div class="row mb-3">
	<div class="col-8">
		<div class="row">
			<div class="col-10">
				<input id="file_input4" filestyle="" type="file"
					style="display: none"> <input type="text"
					id="userfile4" class="form-control" name="userfile4"
					disabled="">
			</div>
			<div class="col-2 p-0 m-0 d-flex justify-content-start align-items-center">
				<label for="file_input4" class="btn btn-default"> <span
					class="glyphicon fa fa-upload"></span>
				</label>
				<button type="button" class="btn-close" id="erase_btn4" aria-label="Close"></button>
			</div>
		</div>
	</div>
</div>

 

 

반응형
반응형
const pattern_num = /[0-9]/;	// 숫자 
const pattern_eng = /[a-zA-Z]/;	// 문자 
const pattern_spc = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자
const pattern_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크
const pattern_space = /[\s]/g; // 공백체크

var num = userId.search(pattern_num);
var eng = userId.search(pattern_eng);
var spc = userId.search(pattern_spc);
var kor = userId.search(pattern_kor)
var space = userId.search(pattern_space);

if (num >= 0) {
	alert("숫자를 입력하셨습니다.");
	return false;
}else if (num >= 0 || spc >= 0 || kor >= 0 || space >= 0) {
	alert("영어만 입력해주세요");
	return false;
}

프론트에서도 유효성 체크를 하고 백에서도 유효성 체크가 필요하다

반응형
반응형
if (confirm("인덱스를 생성하시겠습니까?") == true){
	return true;
}else{
	return false;
}
반응형
반응형

 

var PageSize = 10; // 페이지당 보여줄 목록수
var PageGroupSize = 10; // 페이지네이션 리스트 수
var TableAndPage = "makeTableAndPagination";
var currentPageNumStorage;

$(document).ready(
	$(function() {
		makeTableAndPagination('1');
	})
)

var makeTableAndPagination = function(p_currentPage) {

	var TotalCount;
	var count;

	var tag = "";

	$.ajax({
		type: "GET",
		url: "getInformation?pageNum=" + p_currentPage,
		success: function(data) {

			// 총 데이터 수
			TotalCount = data.total;

			// 페이지네이션 그리기
			tagFactoryPage(p_currentPage, TotalCount);
			
			// 현재 페이지번호 → 현재 페이지 번호를 기억시켜 다른 action을 해도 그대로 있게 하기
			currentPageNumStorage = p_currentPage;
		}
	}); // ajax 종료
}


var tagFactoryPage = function(currentPage, total) {

	var total = total; // 전체건수
	var currentPage = currentPage; // 현재페이지

	var pageTotCount = Math.ceil(tot_count / indexPageSize); // 전체페이지수 → 15 / 10 = 0.5 → 1
	var numPageGroup = Math.ceil(currentPage / indexPageGroupSize); // 현재페이지가 10 이내일 경우 → 1
																	
	var startPage = (numPageGroup - 1) * PageGroupSize + 1; // 1 11 21
	var endPage = startPage + PageGroupSize - 1 // 10 20 30

	if (endPage > pageTotCount) endPage = pageTotCount; // 마지막페이지가 전체페이지보다 큰경우 처리 20 > 12

	var HtmlTag = "";

	// 첫번째페이지 표시 >> 누르면 가장 마지막 페이지 이동
	// 1 ~ 10 페이지에 속하지만 않으면 무조건 나옵니다. 
	if (startPage <= PageGroupSize) HtmlTag += ""; // startPage(1, 10, 20) 이 PageGroupSize(1[1~10], 2[11~20]) 보다
	else HtmlTag += "<li class='page-item page-item1'><a href=# class='page-link' onclick=" + TableAndPage + "('1')>  《 </a></li>";

	// 이전페이지 표시 < 누를시 11 ~ 20 은 10으로 21 ~ 30 은 20으로 이동합니다.
	// 1 ~ 10 페이지에 속하지만 않으면 무조건 나옵니다. 
	if (startPage <= PageGroupSize) HtmlTag += "";
	else HtmlTag += "<li class='page-item page-item1'><a href=# class='page-link' onclick=" + TableAndPage + "('" + (startPage - 1) + "')>〈 </a></li>";

	var idx = 0;
	for (idx = startPage; idx <= endPage; idx++) {

		// 자기자신의 페이지일경우 active 활성화와 하이퍼링크 제거
		if (currentPage == idx) HtmlTag += "<li class='page-item page-item1 active' id=pagination value='" + idx + "'><a href=# class='page-link'>" + idx + "</a></li>";
		else HtmlTag += "<li class='page-item page-item1'><a class='page-link' href=# onclick=" + TableAndPage + "('" + idx + "')>" + idx + "</a></li>";

	}

	// 다음페이지 표시 > 누를시 1 ~ 10 은 11으로 11 ~ 20 은 21으로 이동합니다.
	// 전체 페이지가 마지막 페이지부분만 아니면 >로 이동 가능한 페이지네이션을 만듭니다.
	if (pageTotCount == endPage) HtmlTag += "";
	else HtmlTag += "<li class=page-item page-item1><a class='page-link' onclick=" + TableAndPage + "('" + (endPage + 1) + "')>〉</a></li>"; // 다음

	// 마지막페이지 표시 >> 누르면 가장 마지막 페이지 이동
	// 전체 페이지가 마지막 페이지부분만 아니면 >로 이동 가능한 페이지네이션을 만듭니다.
	if (pageTotCount == endPage) HtmlTag += "";
	else HtmlTag += "<li class=page-item page-item1><a class='page-link' href=# onclick=" + TableAndPage + "('" + pageTotCount + "')> 》 </a></li>";

	$(".page-item1").remove();         // 페이지네이션이 그려졌던 걸 지우고 다시 그립니다. → 안 지우면 페이지 이동시 남아 있는 상태로 붙여넣기가 된다.
	$("#page_list_navi").append(HtmlTag); // 새롭게 프로젝트 list를 생성한다.

}

ajax통신을 하는 javascript입니다.

 

<div class="paging">
    <ul class="pagination justify-content-center"
        id="page_list_navi_index">
    </ul>
</div>

html에서 페이지네이션을 그려넣을 부분입니다.

무조건 전체갯수가 필요합니다

반응형
반응형

📝Ajax 통신

 $.ajax({
     url:_search_url,
     //dataType:"JSON",
     type: 'POST',
     data: {
         search  : search,
         offset  : offset,
         limit   : limit,
         startDate : startDate,
         endDate : endDate,
         searchType : searchType
     },
     success: function( data ) {

                 .....


        $("#data_uniq1").html(tag); //새롭게 프로젝트 list를 생성한다.
         ....
     },//success
     error : function(xhr, status, error) {
         alert("에러 발생");
     }
 }); //ajax end

ajax에 대해서 먼저 이야기 하겠습니다.

 

📝type

어떤 통신방식을 이용할지에 대해 적어주시면 됩니다.

종류 : GET, POST

 

📝url

통신할 URL입니다.

 

📝data

보낼 데이터입니다. json 형식이라고 생각하시면 됩니다.

예) search (키) search(값)

 

📝dataType

보낼 데이터에 대한 정의입니다.

종류 : "html", "xml", "json", "text"

 

📝success : function(data)

통신에 성공했을 시 작동할 콜백함수입니다.

성공시 반환해주는 return값이 data라는 변수에 들어가게 되어서 data라는 이름으로 이용하게 됩니다.

(data가 아니라 abc 이런식으로 바꿔도 상관 없음 → success : function(abc) )

 

📝error : function()

전송에 실패하면 실행될 코드입니다.

 

 

ajax통신할 때 장점은 화면이 깜빡 거리지 않는다는 장점이 있습니다. (SPA)

반응형
반응형

Chart.js에서 사용하는 차트들을 ajax로 비동기 통신시에 넘어온 값들로 차트를 재구성할 때

그 이전에 데이터들이 남아있는 문제가 발생한다.

 

이걸 해결 하기 위해서는 ajax로 호출 할 때마다 Chart.js를 붙히는 곳의 태그를 없애고 다시 만들어주는 과정을 추가해줘야 한다.

 

예) data : [12, 19, 3, 5, 2, 3] 의 값들이 남아있는 문제가 발생 [ 그래프에 호버시 값이 남아있는 걸 확인 ]

<canvas id="myChart" width="400" height="400"></canvas>
<script>
$(function () {
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
});
</script>

 

 

 

반응형
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
        .circle{
            position : absolute;
            left : 100px; top :100px;
            width : 100px ; height :100px;
            background : #99c; color: white;
            border-radius :50%;
            text-align : center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <button id ="btn1">click</button>
    <button id ="btn2">hover</button>

    <script>
        $('#btn1').click(function(){
            $(this).css('border-radius', '10px');
        });

        $('#btn2').hover(function(){
            $(this).css('box-shadow','3px 3px 3px #666');
        },
        function(){
            $(this).css('box-shadow','0px 0px 0px #666');
        });
    </script>
</body>
</html>
$('#btn1').click(function(){

            $(this).css('border-radius', '10px');

        });

이거는 클릭했을 때 둥글게 바뀌는 것이고

$('#btn2').hover(function(){
            $(this).css('box-shadow','3px 3px 3px #666');
        },
        function(){
            $(this).css('box-shadow','0px 0px 0px #666');
        });

 

이거는 호버했을 때  box-shadow가 3px씩 주게 되고 땠을 땐 밑에 함수가 실행됩니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
    
    </style>
</head>

<body>
    <h3> 그래프를 클릭 </h3>
    <progress min = 0 max = 100 value = 0></progress>
    <span id = "info"></span>
    <script>

        
        var val = 0;
        $('progress').on('click',function(){
            $(this).val(val);
            $('#info').html(val);
            if (val <100) { val += 10; }
        })
    </script>
</body>
</html>

클릭하면 10씩 올라갑니다.

 

그냥 click으로 만들어도 되는 거 아닌가요? 라고 할 수 있는데요

on 메소드는 여러 복수 이벤트를 동시에 연결 할 수 있는 장점이있습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
    
    </style>
</head>

<body>
    <button id ="btn" style="padding: 10px">click</button>
    <script>
        $(function(){
            $('#btn').on('mouseenter mouseleave',function(e){
                if(e.type == 'mouseenter'){
                    $(this).css('border-radius','10px');
                }
                if(e.type == 'mouseleave'){
                    $(this).css('border-radius','0px');
                }
            });
        });
    </script>
</body>
</html>

hover로 구현할 경우 때면 밑에 함수가 계속 적용 됩니다. 위에 hover로 구현하신 0px을 15px로 줘보세요

처음 상태랑 버튼에서 벗어났을 때랑 다르게 보입니다.

mouseenter와 mouseleave를 통해서 완벽한 hover가 구현이 가능합니다.

 

e.type이라는 건 function 안에 매개변수를 e라고 했을 때

그 값이 mouseenter일 경우  mouseleave일 경우를 구분하기 위해 사용했습니다.

반응형
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
        .circle{
            position : absolute;
            left : 100px; top :100px;
            width : 100px ; height :100px;
            background : #99c; color: white;
            border-radius :50%;
            text-align : center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class ="circle" onclick ="anim()">animation</div>


    <script>
        function anim(){
            $('.circle').animate({
                width: '300px',
                height: '300px',
                lineHeight: '300px',
                fontSize : '3em'

            }, 1000)
        }
    </script>

</body>
</html>

animate(속성, 재생시간,속도 변화 옵션, 콜백함수)

 

$('.circle').animate({
                width: '300px',
                height: '300px',
                lineHeight: '300px',
                fontSize : '3em'

            }, 1000)

 

눌렀을 때 원이 animate에 정의한대로 애니메이션 처리가 됩니다.

 

 

반응형