반응형
반응형

생활코딩 마인드맵 라이브러리 cytoscape 사용법

https://velog.io/@takeknowledge/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9-%EB%A7%88%EC%9D%B8%EB%93%9C%EB%A7%B5-cytoscape-%ED%99%9C%EC%9A%A9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-56k4in7315

 

생활코딩 마인드맵 라이브러리 cytoscape 사용법

🚀 발단 생활코딩에 접속해서 수업 소개 섹션으로 가면 수업간의 관계를 확인할 수 있는 마인드 맵이 있습니다. 개인적으로 공부한 것들의 흐름을 위와 같이 정리하면 좋을 것 같았습니다. 그

velog.io

생활코딩에 접속해서 수업 소개 섹션으로 가면 수업간의 관계를 확인할 수 있는 마인드 맵이 있습니다.

개인적으로 공부한 것들의 흐름을 위와 같이 정리하면 좋을 것 같았습니다.
그래서 해당 라이브러리가 cytoscape라는 것을 확인 후 이를 활용해 비슷한 사이트를 개발을 해봤습니다.

그러나 cytoscape 관련한 별도의 한글 정보가 없어 영어를 잘 못하는 저는 수많은 삽질의 시간을 거쳐야 했기에 다른 분들은 해당 라이브러리를 좀 더 편하게 쓰실 수 있도록 개발하면서 알게 된 것들을 한글기록으로 남깁니다. 도움이 되었으면 좋겠습니다!

 

 

https://github.com/nomelancholy/project-skill-map

 

GitHub - nomelancholy/project-skill-map: cytoscape를 활용한 프로젝트-주도-공부 기록 웹 어플리케이션

cytoscape를 활용한 프로젝트-주도-공부 기록 웹 어플리케이션. Contribute to nomelancholy/project-skill-map development by creating an account on GitHub.

github.com

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] 숫자 세자리 콤마 제거하기, ASP 숫자형 리턴  (0) 2022.02.04
[javascript] ES6 for beginners, ES6 문법 + 활용 패턴 살펴보기  (0) 2022.01.24
[javascript] Object.assign()  (0) 2022.01.18
[javascript] window.onload vs $(document).ready()  (0) 2022.01.13
jquery , sortable, 안에 텍스트는 드래그 가능하게. bootstrap sortable inner text dragable  (0) 2022.01.12
반응형

Object.assign()

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

 

Object.assign() - JavaScript | MDN

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

developer.mozilla.org

Object.assign()

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

const target = { a: 1, b: 5 };
const source = { b: 7, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] ES6 for beginners, ES6 문법 + 활용 패턴 살펴보기  (0) 2022.01.24
[script] 생활코딩 마인드맵 라이브러리 cytoscape 사용법  (0) 2022.01.19
[javascript] window.onload vs $(document).ready()  (0) 2022.01.13
jquery , sortable, 안에 텍스트는 드래그 가능하게. bootstrap sortable inner text dragable  (0) 2022.01.12
자바스크립트로 현재시간 timestamp 구하기  (0) 2022.01.12
반응형

 window.onload vs $(document).ready()

 

Two syntaxes can be used for this:

$( document ).ready(function() {
   console.log( "ready!" );
});

Or the shorthand version:

$(function() {
   console.log( "ready!" );
});

주요 사항 $(document).ready():

  • 이미지가 로드될 때까지 기다리지 않습니다.
  • DOM이 완전히 로드되었을 때 JavaScript를 실행하는 데 사용됩니다. 여기에 이벤트 핸들러를 넣습니다.
  • 여러 번 사용할 수 있습니다.
  • 교체 $로 jQuery당신이받을 때 "$가 정의되지 않았습니다."
  • 이미지를 조작하려는 경우에는 사용되지 않습니다. $(window).load()대신 사용하십시오 .

window.onload()기본 JavaScript 함수입니다. window.onload()는 DOM (문서 객체 모델), 배너 광고 및 이미지를 포함하여 페이지의 모든 내용이로드 이벤트가 발생합니다. 둘의 또 다른 차이점 $(document).ready()은 하나 이상의 onload기능을 가질 수 있지만 하나의 기능 만 가질 수 있다는 것 입니다.

 

https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

 

window.onload vs $(document).ready()

What are the differences between JavaScript's window.onload and jQuery's $(document).ready() method?

stackoverflow.com

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[script] 생활코딩 마인드맵 라이브러리 cytoscape 사용법  (0) 2022.01.19
[javascript] Object.assign()  (0) 2022.01.18
jquery , sortable, 안에 텍스트는 드래그 가능하게. bootstrap sortable inner text dragable  (0) 2022.01.12
자바스크립트로 현재시간 timestamp 구하기  (0) 2022.01.12
[jQuery] modal, 전체화면, Mask  (0) 2022.01.11
반응형

jquery ,  sortable, 안에 텍스트는 드래그 가능하게.  bootstrap sortable inner text dragable

 

https://jqueryui.com/sortable/

 

Sortable | jQuery UI

Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope

jqueryui.com

 

Sortable w/ Selectable Text : 

https://stackoverflow.com/questions/4070749/sortable-w-selectable-text

 

Sortable w/ Selectable Text

Is it possible to be able to have sortable elements, but still allow users to copy/paste the text inside the elements? <div class="sortable"> <div class="pseudo-sortable">Foo</di...

stackoverflow.com

 

What about putting your text in a <span>?

HTML

<ul id="sortable">
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
    <li><span>Item 4</span></li>
    <li><span>Item 5</span></li>
    <li><span>Item 6</span></li>
    <li><span>Item 7</span></li>
</ul>

jQuery

$("#sortable").sortable({
    revert: true,
    cancel: "#sortable li span"
});

Try it here: http://jsfiddle.net/6uXx8/

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Object.assign()  (0) 2022.01.18
[javascript] window.onload vs $(document).ready()  (0) 2022.01.13
자바스크립트로 현재시간 timestamp 구하기  (0) 2022.01.12
[jQuery] modal, 전체화면, Mask  (0) 2022.01.11
제이쿼리(jQuery)를 아직도 사용하나요? - 제이쿼리의 현재와 미래  (0) 2021.11.16
반응형

자바스크립트로 현재시간 timestamp 구하기

console.log( new Date().getTime() );
 

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] window.onload vs $(document).ready()  (0) 2022.01.13
jquery , sortable, 안에 텍스트는 드래그 가능하게. bootstrap sortable inner text dragable  (0) 2022.01.12
[jQuery] modal, 전체화면, Mask  (0) 2022.01.11
제이쿼리(jQuery)를 아직도 사용하나요? - 제이쿼리의 현재와 미래  (0) 2021.11.16
[javascript] getDay() 날짜의 요일을 숫자로 반환 , JavaScript Get Date Methods  (0) 2021.10.18
반응형
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    #mask {
      position:absolute;
      z-index:9000;
      background-color:#000;
      display:none;
      left:0;
      top:0;
    }
    .window{
      display: none;
      position:absolute;
      left:100px;
      top:100px;
      z-index:10000;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    function wrapWindowByMask(){
        //화면의 높이와 너비를 구한다.
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();  
 
        //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
        $('#mask').css({'width':maskWidth,'height':maskHeight});  
 
        //애니메이션 효과 - 일단 1초동안 까맣게 됐다가 80% 불투명도로 간다.
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow",0.8);    
 
        //윈도우 같은 거 띄운다.
        $('.window').show();
    }
 
    $(document).ready(function(){
        //검은 막 띄우기
        $('.openMask').click(function(e){
            e.preventDefault();
            wrapWindowByMask();
        });
 
        //닫기 버튼을 눌렀을 때
        $('.window .close').click(function (e) {
            //링크 기본동작은 작동하지 않도록 한다.
            e.preventDefault();
            $('#mask, .window').hide();
        });       
 
        //검은 막을 눌렀을 때
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });
    });
    </script>
</head>
<body>
    <div id="mask"></div>
    <div class="window">
        <input type="button" href="#" class="close" value="나는야 닫기 버튼(.window .close)"/>
    </div>
    <a href="#" class="openMask">검은 막 띄우기</a>
</body>
</html>

 

 

 

jQuery 레이어 팝업(modal window) 띄울 때 전체를 덮는 반투명 검은 막(black mask) 만들기

출처: https://dev23.tistory.com/26 [Hello. Android!!]

 

jQuery 레이어 팝업(modal window) 띄울 때 전체를 덮는 반투명 검은 막(black mask) 만들기

< html > < head >     < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >     < style >     #mask {       position:absolute;       z-index:9000;       b..

dev23.tistory.com

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

jquery , sortable, 안에 텍스트는 드래그 가능하게. bootstrap sortable inner text dragable  (0) 2022.01.12
자바스크립트로 현재시간 timestamp 구하기  (0) 2022.01.12
제이쿼리(jQuery)를 아직도 사용하나요? - 제이쿼리의 현재와 미래  (0) 2021.11.16
[javascript] getDay() 날짜의 요일을 숫자로 반환 , JavaScript Get Date Methods  (0) 2021.10.18
[javascript] How to output numbers with leading zeros in JavaScript? ZeroPad  (0) 2021.10.14

+ Recent posts

티스토리툴바