JavaScript/기본11 [라이브러리] Sortable - drag & drop (multiDrag) MultiDrag MultiDrag Plugin 이 플러그인을 통해 사용자는 다른 리스트에 있는 항목을 선택하고 다른 한 항목으로 끌 수 있다. 일단 배치되면, 아이템들은 원래 순서대로 펼쳐지지만, 새로운 위치에서는 배치해준 그대로 나란히 펼쳐진다. multidrag는 사용자가 정렬 가능한 목록 내에서 한 번에 여러 항목을 선택하고 여러 목록 또는 동일한 목록 내에서 하나의 항목으로 끌 수 있다. Mount the Plugin 멀티 드래그는 정렬 가능한 JS의 플러그인이며, 정렬 가능한 모든 빌드에 포함되지는 않는다. 기본 Sortable.js 파일에서는 즉시 사용할 수 있지만, 모듈식 빌드에서는 기본적으로 마운트되지 않는다. 모듈식 빌드에서 마운트 하려면 다음코드를 사용하여야 한다. import { S.. JavaScript/기본 2023. 3. 15. 나쁜 자바스크립트 작성 습관 https://blog.gogrow.dev/say-bye-bye-to-bad-javascript-practices-5971688ba80a Say bye bye to bad javascript practices When we take our first steps into the wonderful world of programming, we get to see for ourselves what it does for millions of people. It’s… blog.gogrow.dev https://yozm.wishket.com/magazine/detail/1836/ 나쁜 자바스크립트 작성 습관과 작별하기 | 요즘IT 멋진 프로그래밍의 세계로 첫걸음을 내디딜 때, 우리가 하는 일이 수백만 명의 사람들에게.. JavaScript/기본 2023. 2. 3. 정규표현식 보호되어 있는 글 입니다. 2022. 6. 30. 내장객체 Date https://www.w3schools.com/jsref/jsref_obj_date.asp JavaScript Date Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://ko.javascript.info/date Date 객체와 날짜 ko.javascript.info https://developer.mozilla.org/ko/docs.. JavaScript/기본 2022. 6. 30. 문서 객체 모델 (DOM) 문서 객체 모델 - Document object Model의 약어로 DOM이라고도 함 - 웹 문서를 로드할 때, 브라우저는 구성 요소들을 객체화하여 트리 구조의 DOM 생성 - HTML DOM은 HTML 구성요소들을 획득, 변경, 추가, 삭제하기 위한 표준 - HTML 문서를 브라우저에서 로드 시 각 구성요소들을 객체화하여 객체 트리 구조를 나타냄 위의 HTML의 문서 객체 구조를 그림으로 표현하면 다음과 같이 트리 구조로 되어있다. 즉 그림을 거꾸로 뒤집으면 나무가 가지를 뻗은 모양과 비슷하다. 여기서 html 태그는 뿌리(root)를 의미한다. 이 뿌리로 부터 가지처럼 뻗어나가는 것을 노드라고 한다. DOM의 기능 1.HTML 문서에 대한 모델 구성 브라우저는 HTML 문서를 로드한 후 해당 문서에 .. JavaScript/기본 2022. 6. 29. 객체 (최소, 최대 평균) 객체 안에 메소드로 값을 한번에 받아오기 시나리오 성적 리스트를 받아서 세가지를 처리한 다음에 결과를 리턴한다. 입력: 성적리스트를 받는다. --> 파라미터 처리: 세가지 함수를 차례로 호출한다. --> 리턴이 온다. 리턴: 받은 세가지 결과를 리턴한다. 순서: 최소값, 최대값, 평균값 최소값 최대값 평균값 객체 안에 메소드 JavaScript/기본 2022. 6. 29. 객체 (생성자) 위에서 document.write를 써주었기 때문에 밑에서는 document.write를 써주게 되면 마지막에 undefined가 뜸. undefined 뜨지 않게 하기 위해서는 document.write를 쓰지 말아야함./ JavaScript/기본 2022. 6. 24. 객체 객체 자바스크립트의 기본타입은 객체이다. 객체는 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합이라고 할 수 있다. 프로퍼티의 값으로는 함수가 올 수 있는데, 함수값이 들어 있는 프로퍼티를 메소드(method)라고 한다. 객체는 { }를 이용해 만들 수 있고 '키:값' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있다. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어 있는 이름표는 객체라고 생각하면 쉽다 생성 기본적으로 쓰이는 방법은 밑에와 같다 var 객체이름 = { 프로퍼티1이름 : 프로퍼티1의값, 프로퍼티2이름 : 프로퍼티2의값, ... }; 예제 var car = { //객체 선언 type:"Fiat", // 키:값 model:"500", color:"white" }; 생성 방법 1,2,3 //1 .. JavaScript/기본 2022. 6. 24. 자바스크립트 참고 사이트 https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info https://developer.mozilla.org/ko/docs/Web/JavaScript JavaScript | MDN JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 developer.mozilla.org https://www.w3schools.com/js/default.asp JavaScript Tutorial W3Schools offers free online tutori.. JavaScript/기본 2022. 6. 23. 이벤트 프로퍼티/메서드타입R/W설명 bubbles bool R 이벤트가 버블링되는지 나타냄 cancelable bool R 이벤트의 기본 동작 취소가능 여부 currentTarget element R 현재 이벤트를 처리중인 element defaultPrevented bool R true면 preventDefault()호출상태 detail integer R 이벤트와 관련된 추가정보 eventPhase integer R 이벤트 핸들러가 호출된 단계(1:캡처링,2:타깃,3:버블링) preventDefault() Function R 이벤트의 기본행동 취소, cancelable가 true일때 기능함 stopImmediatePropagation() Function R 이벤트캡처링,이벤트버블링 모두 취소하며 다른 이벤트 .. JavaScript/기본 2022. 6. 23. this - jQuery/ javascript 차이 https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-this-%E2%9A%94%EF%B8%8F-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-this#%F0%9F%93%8C_%EC%9D%B4%EB%B2%A4%ED%8A%B8_%ED%95%B8%EB%93%A4%EB%9F%AC_%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0_%EB%B0%A9%EC%8B%9D [jQuery] 📚 자바스크립트 this / 제이쿼리 $(this) 차이 자바스크립트에는 this가 있고, 제이쿼리에는 $(this) 가 있다. 이벤트 객체에서의 이 둘의 차이점과.. JavaScript/기본 2022. 6. 23. 이전 1 다음
