현재 Page에서 열기

var OpenURL = 'https://openurl.co.kr';

window.location = OpenURL;

새탭에서 Page 열기

var OpenURL = 'https://openurl.co.kr';

window.open(OpenURL);

<a>~</a> 태그의 속성

_blank: 새 탭, 창

_self: 현재 탭, 창

_parent: 부모 탭, 창
_top: 최상위 탭, 창

<a href="http://tistory.com/" target="_blank">새 창, 탭 열기</a>
<a href="http://tistory.com/" target="_self">현재 창, 탭 열기</a>
<a href="http://tistory.com/" target="_parent">부모 탭, 창</a>
<a href="http://tistory.com/" target="_top">최상위 탭, 창</a>

문제 내용

1.txt를 2.txt로 복사하려고 하는데 overwrite 하겠냐고 물어본다.

수작업의 경우에는 y를 눌러주면 되지만, 스크립트를 통한 작업의 경우에는 키보드 입력을 요구하므로 스크립트 실행이 중단되는 문제가 있다.

[root@zetawiki ~]# echo hello > 1.txt
[root@zetawiki ~]# echo world > 2.txt
[root@zetawiki ~]# cp 1.txt 2.txt
cp: overwrite `2.txt'?

원인

cp에 대한 alias로 -i 옵션[1]이 있어서 그렇다

[root@zetawiki ~]# alias | grep cp
alias cp='cp -i'

해결 방법

방법 1) 아래와 같이 cp 앞에 역슬래시를 넣으면 alias 대신 원래의 명령어가 실행된다.
[root@zetawiki ~]# \cp 1.txt 2.txt
[root@zetawiki ~]# cat 2.txt
hello


방법 2) 전체경로 사용
[root@zetawiki ~]# /bin/cp 1.txt 2.txt
[root@zetawiki ~]# cat 2.txt
hello

참고

https://zetawiki.com/wiki/CentOS_cp_%EA%B0%95%EC%A0%9C%EB%A1%9C_%EB%8D%AE%EC%96%B4%EC%93%B0%EA%B8%B0

today, tomorrow 날짜구하기

const today = new Date();
const tomorrow = new Date();

// Add 1 Day
tomorrow.setDate(today.getDate() + 1);

입력한 날짜(yyyyMMdd)가 유효한 날짜인지 검사

function is_valid_date(date_str)
{
    var yyyyMMdd = String(date_str);
    var year = yyyyMMdd.substring(0,4);
    var month = yyyyMMdd.substring(4,6);
    var day = yyyyMMdd.substring(6,8);

    if (!is_number(date_str) || date_str.length!=8)
        return false;

    if (Number(month)>12 || Number(month)<1)
        return false;

    if (Number(last_day(date_str))<day)
        return false;

    return true;
}

yyyy-MM-dd 날짜 문자열을 Date형으로 반환

function to_date2(date_str)
{
    var yyyyMMdd = String(date_str);
    var sYear = yyyyMMdd.substring(0,4);
    var sMonth = yyyyMMdd.substring(5,7);
    var sDate = yyyyMMdd.substring(8,10);

    //alert("sYear :"+sYear +"   sMonth :"+sMonth + "   sDate :"+sDate);
    return new Date(Number(sYear), Number(sMonth)-1, Number(sDate));
}

Date형을 yyyyMMdd형의 문자열로 변환

function get_date_str(date)
{
    var sYear = date.getFullYear();
    var sMonth = date.getMonth() + 1;
    var sDate = date.getDate();

    sMonth = sMonth > 9 ? sMonth : "0" + sMonth;
    sDate  = sDate > 9 ? sDate : "0" + sDate;
    return sYear + sMonth + sDate;
}

주어진 날짜가 윤년인지를 검사

function is_leap_year(date_str)
{
    var year = date_str.substring(0,4);
    if (year%4 == 0)
    {
        if (year%100 == 0)
            return (year%400 == 0);
        else
            return true;
    }
    else
        return false;
}

주어진 날짜(yyyyMMdd, yyyyMM) 그 달의 마지막 날짜를 반환

function last_day(date_str)
{
    var yyyyMMdd = String(date_str);
    var days = "31";
    var year = yyyyMMdd.substring(0,4);
    var month = yyyyMMdd.substring(4,6);

    if (Number(month) == 2)
    {
        if (is_leap_year(year+month+"01"))
            days = "29";
        else
            days = "28";
    }
else if (Number(month) == 4 || Number(month) == 6 || Number(month) == 9 || Number(month) == 11)
        days = "30";

    return days;
}

오늘 날짜 중 연도 반환

function get_today_year()
{
    var today = new Date();
    return today.getYear();
}

오늘 날짜 중 Month반환. format: MM

function get_today_month()
{
    var today = new Date();
    return (today.getMonth()+1) > 9 ?  (today.getMonth()+1) : "0" + (today.getMonth()+1)
}

참고

https://java119.tistory.com/76

 

[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date)

입력한 날짜(yyyyMMdd)가 유효한 날짜인지 검사 function is_valid_date(date_str) { var yyyyMMdd = String(date_str); var year = yyyyMMdd.substring(0,4); var month = yyyyMMdd.substring(4,6); var day = yy..

java119.tistory.com

html

<table id="factory_table" class="table" style="margin-top: 20px;">
	<colgroup>
		<col width="20%"/>
		<col width="10%"/>
		<col width="30%"/>
		<col width="30%"/>
		<col width="10%"/>
	</colgroup>
	
	<thead>
		<tr>
			<th>이름(설비)</th>
			<th>대수</th>
			<th>기계 및 컨트롤러 정보</th>
			<th>공정명</th>
			<th></th>
		</tr>
	</thead>

	<tbody id="factory_tbody">
		<tr>
			<td> <input type="text" class="form-control" placeholder="설비명">  </td>
			<td> <input type="number" class="form-control" placeholder="설치 대수" onkeypress="return event.charCode >= 48 && event.charCode <= 57">  </td>
			<td> <input type="text" class="form-control" placeholder="기계 및 컨트롤러 정보">  </td>
			<td> <input type="text" class="form-control" placeholder="공정명">  </td>
			<td></td>
		</tr>
	</tbody>
</table>

Table 행 추가

// 하나의 Row 입력
var rowItem = "<tr>"
rowItem += "<td> <input type='text' class='form-control' placeholder='설비명'> </td>"
rowItem += "<td> <input type='number' class='form-control' placeholder='설치 대수' onkeypress='return event.charCode >= 48 && event.charCode <= 57'> </td>"
rowItem += "<td> <input type='email' class='form-control' placeholder='기계 및 컨트롤러 정보'> </td>"
rowItem += "<td> <input type='text' class='form-control' placeholder='공정명'> </td>"
rowItem += "<td> <button type='button' class='btn btn-danger'> <i class='fa fa-minus'></i> </button> </td>"
rowItem += "</tr>"
$('#factory_table').append(rowItem)




// Table 행을 모두 삭제 후 리스트 형식 입력 ( 예제와 별도 형식 )
var TableRowsList = ["'a','b','c','d','e'","'1','2','3','4','5'",,,,]  <-- Table rows list가 들어 있다는 가정..

$('#factory_table').remove();

var rowItem = '<tr>'
rowItem += '<th>이름(설비)</th>'
rowItem += '<th>대수</th>'
rowItem += '<th>기계 및 컨트롤러 정보</th>'
rowItem += '<th>공정명</th>'
rowItem += '<th></th>'
rowItem += '</tr>'
$('#factory_table').append(rowItem)
            
for(key in TableRowsList ){
    RowList = TableRowsList[key].split(',')
    var rowItem = '<tr>'
    rowItem += '<td> ' + RowList[1] + ' </td>'
    rowItem += '<td> ' + RowList[2] + ' </td>'
    rowItem += '<td> ' + RowList[3] + ' </td>'
    rowItem += '<td> ' + RowList[4] + ' </td>'
    rowItem += '<td> ' + RowList[5] + ' </td>'
    rowItem += '</tr>'
    $('#factory_table').append(rowItem)
}

Table 행 삭제

$('#factory_table').on("click", "button", function() {
    $(this).closest("tr").remove()
});

입력된 Table 행 데이터 가져오기

$('#factory_tbody tr').each(function () {
	var cellItem = $(this).find(":input")
	var itemObj = new Object()
	itemObj.title = cellItem.eq(0).val()
	itemObj.count = cellItem.eq(1).val()
	itemObj.info = cellItem.eq(2).val()
	itemObj.name = cellItem.eq(3).val()
})

참고

https://elfinlas.github.io/2017/12/25/devnote01/

 

12월 18일 개발일지 (HTML Table의 행을 동적으로 처리하기 with jQuery)

HTML에서 Table 요소 처리이번에 제가 만드는 사내정보시스템을 이번에 저희 회사에도 도입을 하게 되면서, 회사에 특화된 기능을 개발하게 되었습니다.그런데 이번에 Html의 테이블 요소를 다루게

elfinlas.github.io

 

[PHP] php test page

http://phptester.net/

 

PHPTESTER - Test PHP code online

This application is free so please don't break it! Contact :phptester.net@gmail.com Dear Hacker you don't need to hack this free website to prove that you are very good!!!! Updates: I'm trying a new approche, PHP 7.1 to 7.4 version added but still in test

phptester.net

 

문자열에 특정 문자가 포함되어 있는지 확인

# Check 함수
function strpos_array($haystack, $needle) {
    $pos = FALSE;
    if (!is_array($needle)) $needle = array($needle);
    foreach ($needle as $what) {
        if (($pos = strpos($haystack, $what)) !== FALSE) {
            return $pos;
        }
    }
    return FALSE;
}

$filters = array("TEST", "test", "Pass", "PASS");
$strText = "The TEST Code !!"
if (strpos_array($strText, $filters) !== false) {
    // nothing to do
    echo json_encode("Text has been filtered");
    return;
}

기능

chart에 value를 동적으로 추가

backgroundColor를 랜덤하게 설정 ( 결과가 Fix 되지않은 chart 리스트를 추가 할때 사용 )

 

// html
<canvas id="cChart"></canvas>

// javascript
var Chart_ctx = document.getElementById('cChart').getContext('2d');

// Chart Config
Chart_config = {
    type: 'pie',
    data: ..........
}

// Chart Create
var Chart = new Chart(Chart_ctx, Chart_config);


// Chart Data 동적 추가
Chart_config.data.datasets[0].data.push(1);

// Set backgroundColor 랜덤하게 값 추가 ( 투명도 30% )
var RGB_1 = Math.floor(Math.random() * (255 + 1))
var RGB_2 = Math.floor(Math.random() * (255 + 1))
var RGB_3 = Math.floor(Math.random() * (255 + 1))
var strRGBA = 'rgba(' + RGB_1 + ',' + RGB_2 + ',' + RGB_3 + ',0.3)'
Chart_config.data.datasets[0].backgroundColor.push(strRGBA);

참고

https://stackoverflow.com/questions/23095637/how-do-you-get-random-rgb-in-javascript

기능

1. Chart.js 2.x 버전 Pie Chart

2. 파이 차트 클릭 이벤트 ( Pie Chart Click Event ) - label 및 value 조회

3. 마우스 오버없이 레이블을 항상 백분율(%)값을 표시

 

html

* chart를 그리기 위한 canvas를 생성

* 다른 로직에서 canvas를 참고하기 위해 id를 지정 ( 예제는 cPieChart 으로 생성 )

<canvas id="cPieChart" style="min-height: 500px; height: 500px; max-height: 1000px; width: 700px; max-width: 100%;"></canvas>

javascript

* chart.js를 사용하기 위해 Chart.min.js 를 추가

* 마우스 오버없이 레이블을 항상 표시하기 위한 chartjs-plugin-datalabels@0.7.0 추가

 

* config의 data -> datasets -> datalabels 부분에 설정값을 지정

   align : 레이블 위치

   backgroundColor : ctx 정보를 가져와서 value가 0 이상인 경우만 출력

   color : ctx 정보를 가져와서 value가 0 이상인 경우만 출력

   formatter : value, ctx 정보를 가져와서 0 이상인 경우 백분율값을 구하여 리턴

 

* Pie Chart 생성 후 onClick Event 값을 가져와서 이벤트 처리

  getElementsAtEvent(evt) 함수로 클릭 이벤트 값을 조회

  activePoints[0]["_index"] 로 클릭한 차트의 위치값을 조회

   >> 만약 하나의 canvas에 여러개의 chart가 있는 경우 아래 형태로 조회

        activePoints[0]["_index"]

        activePoints[1]["_index"]

        activePoints[2]["_index"]

 

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

// Pie Chart ctx Get
var PieChart_ctx = document.getElementById('cPieChart').getContext('2d');

// Pie Chart Config Set
PieChart_config = {
    type: 'pie',
    data: {
        labels: ['OPEN', 'PROGRESSING', 'COMPLETE'],
        data: [13,11,14],
        datasets: [{
            label: 'Pie Chart Count',
            backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                        ],
            borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(75, 192, 192, 1)'
                        ],
            borderWidth: 1,
            datalabels: {
                labels: {
                    value: {
                        borderWidth: 2,
                        borderRadius: 4,
                        font: {size: 15},
                        formatter: function(value, ctx) {
                            var value = ctx.dataset.data[ctx.dataIndex];
                            return value > 0 ? Math.round(value / (ctx.dataset.data[0] + ctx.dataset.data[1] + ctx.dataset.data[2]) * 100) + ' %' : null;
                        },
                        color: function(ctx) {
                            var value = ctx.dataset.data[ctx.dataIndex];
                            return value > 0 ? 'white' : null;
                        },
                        backgroundColor:function(ctx) {
                            var value = ctx.dataset.data[ctx.dataIndex];
                            return value > 0 ? 'gray' : null;
                        },
                        padding: 4
                    }
                }
            }
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio : false,
        animation: false,
        legend: {
            position: 'left',
            display: true
        },
        title: {
            display: false,
            text: 'Pie Chart - Count',
            font: {
                size: 50
            },
            fontstyle: 'bold',
            position: 'top'
        }, 
        plugins: {
            legend: {
                position: 'left',
            },
            title: {
                display: true,
                text: 'Pie Chart - Count',
                font: { 
                    size: 25
                }
            }
        }
    }
};


// Pie Chart Create
var PieChart = new Chart(PieChart_ctx, PieChart_config);

// Pie Chart Event Set
document.getElementById("cPieChart").onclick = function(evt) {

    var activePoints = PieChart.getElementsAtEvent(evt);

    if(activePoints.length > 0)
    {
        //get the internal index of slice in pie chart
        var clickedElementindex = activePoints[0]["_index"];

        //get specific label by index 
        var label = PieChart.data.labels[clickedElementindex];

        //get value by index      
        var value = PieChart.data.datasets[0].data[clickedElementindex];

        // label and value Process
        
   }
};

참고

https://stackoverflow.com/questions/26257268/click-events-on-pie-charts-in-chart-js

https://chartjs-plugin-datalabels.netlify.app/samples/charts/line.html

https://chartjs-plugin-datalabels.netlify.app/samples/advanced/multiple-labels.html

 

Multiple Labels | chartjs-plugin-datalabels

Multiple Labels Use multiple labels configuration to display 3 labels per data, one for the index, one for the label and one for the value. Move the mouse over the chart to display label ids. { type: 'doughnut', data: { labels: labels, datasets: [{ backgro

chartjs-plugin-datalabels.netlify.app

 


to Top