전체 글 85

javascript<객체> 내장객체, 브라우저객체모델, 문서객체모델

자바스크립트의 객체는 크게 내장객체, 브라우저객체모델, 문서객체모델(DOM)으로 나눌 수 있음 1 내장객체 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있음 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있음 가령 오늘의 날짜를 알고 싶다면 Date 객체를 생성하여 오늘 날짜를 알려주는 메서드 getDate()를 사용하면됨 2. 브라우저객체모델 브라우저 객체 모델(BOM)은 브라우저에 계층 구조로 내장되어 있는 객체를 말함 브라우저 객체로 window, screen, location, history, navigator 객체 등이 있으며 브라우저 (wndow)는 document와 location 객체의 상위 객체임 예를 들어 자바스크립트를 이용..

LANGUAGE/JAVASCRIPT 2022.11.13

백준<JAVA> A+B , A-B, AxB, A/B

문제 1000번 답변 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int A = sc.nextInt(); int B = sc.nextInt(); System.out.println(A+B); sc.close(); } } Scanner 를 활용하여 입력받을 int 값을 설정하고 A+B로 뿌려주면 성공 Scanner를 한번이라도 써봤으면 간단하게 풀 수 있는 문제이다. 문제 1001, 10998번은 A-B , AXB 를 연산하는 문제이다 위와 같은 코드에서 A+B를 각각 A-B, A*B 로만 바꿔서 제출하면 정답처리가 되는 간단한 문제..

STUDY/백준 2022.11.13

d3.js 사용법 - ④ bar chart에 tooltip 그리기(mouseover)

이어서 chart에 tooltip을 그리는 방법에 대해 포스팅 해보도록 하겠습니다 mouseover/mousemove/mouseout 함수를 사용하여 생성할 예정입니다 기본 차트 그리는 방법은 아래 포스팅에서 확인 d3.js 사용법 - ② bar chart 그리기 (tistory.com) d3.js 사용법 - ② bar chart 그리기 d3.js 를 사용하여 막대그래프(bar chart)를 그려보기 전에 , 기초 세팅을 해야함 기초 세팅은 아래 포스팅에서 확인가능 d3.js 사용법 - ① 개념 및 초기세팅 (tistory.com) d3.js 사용법 - ① 개념 및 초기 tjqud531531.tistory.com 앞선 포스팅에서 차트를 그리기 위해 drawChart1(getData,type)이라는 함수를..

LANGUAGE/JAVASCRIPT 2022.11.11

d3.js 사용법 - ③ bar chart에 click 이벤트 추가

앞에서 bar chart를 생성하는 방법에 대해 알아보았다. 이어서 앞 포스팅에서 만들어 놓은 bar chart가 각각의 밸류값에 따라 클릭이벤트로 다양한 차트의 데이터 값을 뽑아내는 부분에 대해 포스팅을 해보겠다. 참고로 내가 사용한 chart 및 그리드의 데이터는 아래와 같다. var1의 값과 var2의 값을 나누어 그리드와 chart에 여러 이벤트를 적용시켜 볼 예정이다. 이전에 만들어 놓았던 차트의 코드나 이전 포스팅을 보고 싶으면 아래 에서 확인 가능 d3.js 사용법 - ② bar chart 그리기 (tistory.com) d3.js 사용법 - ② bar chart 그리기 d3.js 를 사용하여 막대그래프(bar chart)를 그려보기 전에 , 기초 세팅을 해야함 기초 세팅은 아래 포스팅에서 ..

LANGUAGE/JAVASCRIPT 2022.11.09

d3.js 막대그래프 높이 및 위치 설정

d3.js를 이용하여 막대 그래프를 그릴 때 그래프가 아래서부터 그려지는 것이 아닌 위에서부터 그려지는 경우가 있다 이 부분을 해결하기 위해선 (전체 높이-넣고자 하는 데이터 값) 계산을 해야 하는데 이 부분이 생각보다 헷갈려 다시한번 정리해보고자 한다 d3.select("svg") .selectAll("rect") .data([15,50,22,8,100,10]) .enter().append("rect") .attr("width",10) .attr("height",function(d){return d;}) .style("opacity", .25) .attr("x",function(d,i){return i*10;}); SVG는 우리가 지정한 곳을 기준으로 오른쪽, 아래쪽으로 사각형을 그림 위 코드를 실행시..

LANGUAGE/JAVASCRIPT 2022.11.09

d3.js 사용법 - ② bar chart 그리기

d3.js 를 사용하여 막대그래프(bar chart)를 그려보기 전에 , 기초 세팅을 해야함 기초 세팅은 아래 포스팅에서 확인가능 d3.js 사용법 - ① 개념 및 초기세팅 (tistory.com) d3.js 사용법 - ① 개념 및 초기세팅 Data - Driven Documents. JavaScript 데이터 중심의 문서 (Data - Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어 웹브라우저 상에서 동적인 정보시각화를 구현하기 위한 자바스크립트 라이 tjqud531531.tistory.com 그리드와 차트를 그릴때 사용한 데이터 1. 데이터 세팅 차트를 불러오기전에 Jgrid 와 마찬가지고 데이터를 먼저 불러와야한다. ajax를 통해 컨트롤러에서 json데이터를 불러오고,..

LANGUAGE/JAVASCRIPT 2022.11.08

d3.js 사용법 - ① 개념 및 초기세팅

Data - Driven Documents. JavaScript 데이터 중심의 문서 (Data - Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어 웹브라우저 상에서 동적인 정보시각화를 구현하기 위한 자바스크립트 라이브러리 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성 D3 메소드 대부분의 D3메서드는 결과 값으로 선택물의 참조를 반환하므로, 메서드를 체인으로 연결할 때는 순서가 중요. d3.select() - 현재 문서에서 특정 태그 하나를 선택하는 메서드 d3.selectAll() - 특정 태그 전체를 선택 .data() - 참조 연결할 데이터를 가져옴 (선택된 태그에 대한 데이터 매칭) .enter() - 데이터 개수 만큼 태그가 부족할때, ..

LANGUAGE/JAVASCRIPT 2022.11.08

JqGrid 사용법 - ② Grid 만들기

JqGrid를 사용하기 위해선 우선 관련 라이브러리를 다운로드 받아 js 파일을 연결 시켜야한다 이 과정을 하지 않은 사람들은 이전 포스팅 먼저 진행하면 된다 JqGrid 사용법 - ① 환경설정 및 기본세팅 (tistory.com) JqGrid 사용법 - ① 환경설정 및 기본세팅 JqGrid란? jqGrid는 jQuery 라이브러리를 이용한 Grid Plugin 이다 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax 기반 자바스크립트 컨트롤러 기본적으로 jQuery-UI를 이용한다 JqGrid를 사용하 tjqud531531.tistory.com 그리드와 차트를 그릴때 사용한 데이터 JqGrid 기본 사용법 1. 파일 연결시키기 2. body에 grid가 들어갈 공간을 만들어준다 *table에 ..

LANGUAGE/JQUERY 2022.11.07

JqGrid 사용법 - ① 환경설정 및 기본세팅

JqGrid란? jqGrid는 jQuery 라이브러리를 이용한 Grid Plugin 이다 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax 기반 자바스크립트 컨트롤러 기본적으로 jQuery-UI를 이용한다 JqGrid를 사용하기 위해선 우선 라이브러리를 다운받아야 한다 * 본인의 jquey 버전과 맞추어 다운로드 받으면 됨 * 둘중 다운이 가능한 홈페이지에서 다운 받으면 됨 jQuery jqGrid | jQuery Plugin Registry jQuery jqGrid | jQuery Plugin Registry jQuery jqGrid by Tony Tomov jqGrid is an Ajax-enabled JavaScript control that provides solutions for re..

LANGUAGE/JQUERY 2022.11.07

[Linux] IPC 예제 ② Semaphore

본 포스팅에서는 Semaphore 와 관련된 기본 예제를 프로그래밍 한다. IPC 통신과 각각의 방법의 개념에 대해 공부하고 싶다면 아래 포스팅을 참조하자 [Linux] IPC (Inter-Process Communication) 기본 개념 (tistory.com) [Linux] IPC (Inter-Process Communication) 기본 개념 IPC란? 모듈 간 통신 방식을 구현하기 위해 사용되는 대표적인 프로그래밍 인터페이스 집합이다. 복수의 프로세스를 수행 및 프로세스 간 통신 구현 가능 1. Pipe (익명 PIpe) - 두개의 프로세스를 tjqud531531.tistory.com Semaphore 1. semaphore 의 내용을 정의해줄 c 파일 생성 * 본인은 sema.c 이름으로 파일..

LINUX/ABOUT LINUX 2022.10.28
반응형