'Programming' 카테고리의 글 목록 (82 Page)

'Programming'에 해당되는 글 1786건

2018.09.27 jquery 선택자
2018.09.27 node.js 를 이용한 HTML 데이터 추출(크롤링) 4
2018.09.27 jquery n번째 요소 선택하기, select 선택하기
2018.09.27 d3 graph
2018.09.27 css 배경 이미지 회전, 크기 등
2018.09.21 svg.js
2018.09.20 ajax
2018.09.20 polar clock
2018.09.19 npm audit
2018.09.18 visjs

jquery 선택자

봐도 봐도 헷갈리네.. ㅠㅠ

[링크 : https://www.zerocho.com/category/jQuery/post/57a9a371e4bc011500624ba3]

[링크 : https://api.jquery.com/category/selectors/]

'Programming > javascript & HTML' 카테고리의 다른 글

json key 추가/삭제 (0)	2018.09.28
json merge (0)	2018.09.28
jquery n번째 요소 선택하기, select 선택하기 (0)	2018.09.27
css 배경 이미지 회전, 크기 등 (0)	2018.09.27
svg.js (0)	2018.09.21

Posted by 구차니

node.js 를 이용한 HTML 데이터 추출(크롤링)

[링크 : http://onemooon.tistory.com/entry/NODE-JS-cheerio-를-이용해서-html-을-파싱해보자]

[링크 : https://www.npmjs.com/package/cheerio]

[링크 : https://www.npmjs.com/package/node-html-parser]

[링크 : https://www.npmjs.com/package/table-to-json]

[링크 : https://codeburst.io/how-to-make-an-http-request-in-nodejs-http-mechanism-libraries-f25ec990d307]

+

https는 http-request로 안되니 https 모듈로

[링크 : https://stackoverflow.com/questions/13121590/steps-to-send-a-https-request-to-a-rest-service-in-node-js]

[링크 : https://github.com/request/request]

[링크 : http://lyasee.tistory.com/15]

[링크 : http://dalkomit.tistory.com/104]

[링크 : https://www.npmjs.com/package/request]

[링크 : https://www.npmjs.com/package/request-promise]

[링크 : https://www.npmjs.com/package/jQuery]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

xz로 압축된 node.js 설치하기 (0)	2018.10.02
npm install이 윈도우에서 안될때 (2)	2018.09.27
npm audit (0)	2018.09.19
promise-mysql (0)	2018.09.18
node.js 동기와 비동기 그리고 promise (0)	2018.09.18

Posted by 구차니

jquery n번째 요소 선택하기, select 선택하기

테스트 용으로 단간한 계정정보를 받아와서 ID와 PW 그리고 역활에 대해서 출력하고

jquery를 이용하여 table에 값을 추가하고

select-option 에 항목 값을 지정하는 예제

$.ajax({

type: "POST",

url: '/list',

success: function (data) {

},

error: function (data) {

},

complete: function (data) {

var result = JSON.parse(data.responseText);

for(var idx = 0; idx < result.length; idx++)

{

$('#userlist > tbody:last').append('<tr class="unsel"><td><input class="uncheck" name="chk_del", type="checkbox"</td><td><input class="user-editbox" type="text" value="'+ result[idx].user_id + '"></td><td><input class="user-editbox" type="text" value="'+ result[idx].user_pw + '"></td><td><select class="user-role"><option value="admin">admin</option><option value="user">user</option><option value="server">server</option></select></td><td><input class="user-editbox" type="text" value="DESC."></td></tr>');

switch(result[idx].user_role)

{

case 0: //admin

$('.user-role').eq(idx).val('admin');

break;

case 1: //user

$('.user-role').eq(idx).val('user');

break;

case 2: //server

$('.user-role').eq(idx).val('server');

break;

}

});

찾은 요소 n번째 접근하기 : .eq(index)

[링크 : http://egloos.zum.com/survival/v/464374]

$('#fruits').val('값');

[링크 : https://zetawiki.com/wiki/JQuery_select_값으로_선택]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

json merge (0)	2018.09.28
jquery 선택자 (0)	2018.09.27
css 배경 이미지 회전, 크기 등 (0)	2018.09.27
svg.js (0)	2018.09.21
ajax (0)	2018.09.20

Posted by 구차니

d3 graph

[링크 : http://www.adeveloperdiary.com/d3-js/create-a-simple-donut-chart-using-d3-js/] 도넛 그래프

[링크 : http://bl.ocks.org/aaizemberg/raw/78bd3dade9593896a59d/] 색상

타이틀 달린 도넛 그래프

[링크 : https://littletechblogger..../d3-donut-chart-with-labels-using-angular-directive-and-json-data-example/]

+

2018.10.10

[링크 : http://webframeworks.kr/getstarted/d3js/]

저작자표시 (새창열림)

'Programming > d3' 카테고리의 다른 글

d3 관련 검색.. (0)	2018.10.12
d3 multi level pie 그래프 (0)	2018.10.11
d3 font color / weight (0)	2018.10.02
d3 tooltop (0)	2018.10.01
d3 를 이용하여 도넛 그래프 그리기 (0)	2018.09.28

Posted by 구차니

css 배경 이미지 회전, 크기 등

배경을 돌리면 안에 내용도 같이 돌아버리니까

배경만 돌리려면 조금 까다롭다.

[링크 : https://www.sitepoint.com/css3-transform-background-image/]

[링크 : https://www.w3schools.com/cssref/pr_background-position.asp]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

jquery 선택자 (0)	2018.09.27
jquery n번째 요소 선택하기, select 선택하기 (0)	2018.09.27
svg.js (0)	2018.09.21
ajax (0)	2018.09.20
polar clock (0)	2018.09.20

Posted by 구차니

svg.js

d3 에서 svg로 그리길래 찾아보니 역시나(?)

svg를 그리는데 도움을 주는 자바스크립트 라이브러리가 존재한다.

[링크 : http://svgjs.com]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

jquery n번째 요소 선택하기, select 선택하기 (0)	2018.09.27
css 배경 이미지 회전, 크기 등 (0)	2018.09.27
ajax (0)	2018.09.20
polar clock (0)	2018.09.20
visjs (0)	2018.09.18

Posted by 구차니

ajax

error / success / complete 세가지에 대해서 처리해주는 것이 좋다.

(귀찮아서 success만 했는데..)

[링크 : http://shovelman.tistory.com/829]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

css 배경 이미지 회전, 크기 등 (0)	2018.09.27
svg.js (0)	2018.09.21
polar clock (0)	2018.09.20
visjs (0)	2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>) (2)	2018.09.18

Posted by 구차니

polar clock

그래프 만져보는데 나쁘지 않은 듯?

[링크 : http://bl.ocks.org/mbostock/1096355]

원래 공개된 소스에서는 d3.js가 경로가 잘못되었고

하나만 띄울수 있어서 함수로 변형하니 div 여러개에 각각 띄울수 있게 된다.

function clock_instance(element_id)

{

var width = 300,

height = 300,

radius = Math.min(width, height) / 1.9,

spacing = .09;

var formatSecond = d3.time.format("%-S seconds"),

formatMinute = d3.time.format("%-M minutes"),

formatHour = d3.time.format("%-H hours"),

formatDay = d3.time.format("%A"),

formatDate = function(d) { d = d.getDate(); switch (10 <= d && d <= 19 ? 10 : d % 10) { case 1: d += "st"; break; case 2: d += "nd"; break; case 3: d += "rd"; break; default: d += "th"; break; } return d; },

formatMonth = d3.time.format("%B");

var color = d3.scale.linear()

.range(["hsl(-180,60%,50%)", "hsl(180,60%,50%)"])

.interpolate(function(a, b) { var i = d3.interpolateString(a, b); return function(t) { return d3.hsl(i(t)); }; });

var arcBody = d3.svg.arc()

.startAngle(0)

.endAngle(function(d) { return d.value * 2 * Math.PI; })

.innerRadius(function(d) { return d.index * radius; })

.outerRadius(function(d) { return (d.index + spacing) * radius; })

.cornerRadius(6);

var arcCenter = d3.svg.arc()

.startAngle(0)

.endAngle(function(d) { return d.value * 2 * Math.PI; })

.innerRadius(function(d) { return (d.index + spacing / 2) * radius; })

.outerRadius(function(d) { return (d.index + spacing / 2) * radius; });

var svg = d3.select(element_id).append("svg")

.attr("width", width)

.attr("height", height)

.append("g")

.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var field = svg.selectAll("g")

.data(fields)

.enter().append("g");

field.append("path")

.attr("class", "arc-body");

field.append("path")

.attr("id", function(d, i) { return "arc-center-" + i; })

.attr("class", "arc-center");

field.append("text")

.attr("dy", ".35em")

.attr("dx", ".75em")

.style("text-anchor", "start")

.append("textPath")

.attr("startOffset", "50%")

.attr("class", "arc-text")

.attr("xlink:href", function(d, i) { return "#arc-center-" + i; });

tick();

d3.select(self.frameElement).style("height", height + "px");

function tick() {

if (!document.hidden) field

.each(function(d) { this._value = d.value; })

.data(fields)

.each(function(d) { d.previousValue = this._value; })

.transition()

.ease("elastic")

.duration(500)

.each(fieldTransition);

setTimeout(tick, 1000 - Date.now() % 1000);

}

function fieldTransition() {

var field = d3.select(this).transition();

field.select(".arc-body")

.attrTween("d", arcTween(arcBody))

.style("fill", function(d) { return color(d.value); });

field.select(".arc-center")

.attrTween("d", arcTween(arcCenter));

field.select(".arc-text")

.text(function(d) { return d.text; });

}

function arcTween(arc) {

return function(d) {

var i = d3.interpolateNumber(d.previousValue, d.value);

return function(t) {

d.value = i(t);

return arc(d);

};

}

function fields() {

var now = new Date;

return [

{index: .7, text: formatSecond(now), value: now.getSeconds() / 60},

{index: .6, text: formatMinute(now), value: now.getMinutes() / 60},

{index: .5, text: formatHour(now), value: now.getHours() / 24},

{index: .3, text: formatDay(now), value: now.getDay() / 7},

{index: .2, text: formatDate(now), value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},

{index: .1, text: formatMonth(now), value: now.getMonth() / 12}

];

}

</script>

<body>

<div id="credit">Inspired by <a href="http://blog.pixelbreaker.com/polarclock/">pixelbreaker</a>.</div>

<div>

<div>

</body>

clock_instance("#id-1");

clock_instance("#id-2");

</script>

[링크 : https://stackoverflow.com/.../d3-selectelement-not-working-when-code-above-the-html-element]

1. 색상은 hsl 색상으로 칠해짐.

2. 값의 범위와 값이 같으면 동일한 색

3. 가장 적은 값은 앞의 범위로 부터 시작함, 아래와 같이 설정되면 빨간색에서 cyan 까지 칠해짐

.range(["hsl(0,60%,50%)", "hsl(180,60%,50%)"])

4. 값의 범위는 소수로 한정됨(즉, 0~1 사이의 실수로 정규화 됨)

function fields() {

var now = new Date;

return [

{index: .6, text: formatSecond(now), value: now.getSeconds() / 60},

{index: .5, text: formatMinute(now), value: now.getMinutes() / 60},

{index: .4, text: formatHour(now), value: now.getHours() / 24},

{index: .3, text: formatDay(now), value: now.getDay() / 7},

{index: .2, text: formatDate(now), value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},

{index: .1, text: formatMonth(now), value: now.getMonth() / 12}

];

}

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

svg.js (0)	2018.09.21
ajax (0)	2018.09.20
visjs (0)	2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>) (2)	2018.09.18
그래프 (0)	2018.09.18

Posted by 구차니

npm audit

회사에서 설치할때는 별 소리 없더니

집에와서 설치하려고 하니 먼가 경고가 뿜뿜한다 -_-

결론만 말하자면, 저거 경고일뿐 일단 설치는 된거니 무시해도 된다 정도?

$ npm install

added 150 packages from 251 contributors and audited 305 packages in 12.634s

found 2 vulnerabilities (1 low, 1 moderate)

run `npm audit fix` to fix them, or `npm audit` for details

$ npm audit fix

+ mysql@2.16.0

added 4 packages from 8 contributors, removed 1 package and updated 5 packages i

fixed 1 of 2 vulnerabilities in 305 scanned packages

1 vulnerability required manual review and could not be updated

$ npm audit

=== npm audit security report ===

Manual Review

Some vulnerabilities require your attention to resolve

Visit https://go.npm.me/audit-guide for additional guidance

Low Regular Expression Denial of Service

Package debug

Patched in >= 2.6.9 < 3.0.0 || >= 3.1.0

Dependency of node-rest-client

Path node-rest-client > debug

More info https://nodesecurity.io/advisories/534

found 1 low severity vulnerability in 310 scanned packages

1 vulnerability requires manual review. See the full report for details.

$ npm install --no-audit

up to date in 0.912s

[링크 : https://blog.outsider.ne.kr/1375]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

npm install이 윈도우에서 안될때 (2)	2018.09.27
node.js 를 이용한 HTML 데이터 추출(크롤링) (4)	2018.09.27
promise-mysql (0)	2018.09.18
node.js 동기와 비동기 그리고 promise (0)	2018.09.18
node.js readline 자동완성(autocompletion) (0)	2018.09.14

Posted by 구차니

visjs

visualization 라이브러리

네트워크라던가 그래프라던가 여러가지 그림을 그릴수 있게 해주는 라이브러리

[링크 : http://visjs.org]

[링크 : http://visjs.org/network_examples.html]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

ajax (0)	2018.09.20
polar clock (0)	2018.09.20
자바스크립트 ES6 와 화살표 펑션 (=>) (2)	2018.09.18
그래프 (0)	2018.09.18
jquery datatables (0)	2018.09.17

Posted by 구차니

구차니의 잡동사니 모음

'Programming'에 해당되는 글 1786건

jquery 선택자

'Programming > javascript & HTML' 카테고리의 다른 글

node.js 를 이용한 HTML 데이터 추출(크롤링)

'Programming > node.js' 카테고리의 다른 글

jquery n번째 요소 선택하기, select 선택하기

'Programming > javascript & HTML' 카테고리의 다른 글

d3 graph

'Programming > d3' 카테고리의 다른 글

css 배경 이미지 회전, 크기 등

'Programming > javascript & HTML' 카테고리의 다른 글

svg.js

'Programming > javascript & HTML' 카테고리의 다른 글

ajax

'Programming > javascript & HTML' 카테고리의 다른 글

polar clock

'Programming > javascript & HTML' 카테고리의 다른 글

npm audit

'Programming > node.js' 카테고리의 다른 글

visjs

'Programming > javascript & HTML' 카테고리의 다른 글

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

티스토리툴바