티스토리

re-mind

검색하기

블로그 홈

re-mind

re-mind-by-weather.tistory.com/m

chloeize 님의 블로그입니다.

구독자: 0

방명록 방문하기

728x90

주요 글 목록

[클립보드 복사] 텍스트 or 이미지 복사 버튼 만들기 - JavaScript / HTML 이메일 function copyT() { var obj = document.getElementById("copyTxt"); var range = document.createRange(); range.selectNode(obj.childNodes[0]); //텍스트 정보를 Range 객체에 저장 //range.setStart(obj.childNodes[0], 0); //추가 //range.setEnd(obj.childNodes[0], 5); //추가 var sel = window.getSelection(); sel.removeAllRanges(); //기존 선택정보 삭제 sel.addRange(range); //텍스트 정보 선택 document.execCommand("copy"); //복사 sel.remo.. 공감수 0 댓글수 0 2021. 5. 22.
[객체] 객체 vs 함수 vs 적용 - 따로 관리 - 기초 / 성적 총점 및 평균 구하기 // 성적 총점과 평균 구하기 // 3. 속성과 함수의 기능을 모두 가진 함수를 한꺼번에 생성 // 좀 더 이해하기 쉬운 코드 > 코드 관리가 쉬워진다 // 객체구현 vs 데이터생성 vs 메인프로세스 // function createStudent(name, art, poem, liter, dance) { // 객체를 만들고 var object = { // 키 : 매개변수 이름: name, 미술: art, 시: poem, 문학: liter, 춤: dance, }; // 메서드 추가 object.getSum = function(){ return this.미술 + this.시 + this.문학 + this.춤; }; // students의 i번째에 getAverage라는 함수를 만든다 object.getAve.. 공감수 0 댓글수 0 2021. 5. 21.
[객체] 총점과 평균 구하기 // 배열 생성 var students = []; // .push() 메서드 : 배열에 요소 추가 가능 students.push({ 이름: '명월', 미술: 88, 시: 99, 문학: 95, 춤: 67 }); students.push({ 이름: '서경덕', 미술: 88, 시: 99, 문학: 95, 춤: 67 }); students.push({ 이름: '이황', 미술: 88, 시: 99, 문학: 55, 춤: 67 }); students.push({ 이름: '이이', 미술: 81, 시: 79, 문학: 55, 춤: 67 }); students.push({ 이름: '이인', 미술: 81, 시: 79, 문학: 95, 춤: 77 }); students.push({ 이름: '구지', 미술: 88, 시: 91, 문학:.. 공감수 0 댓글수 0 2021. 5. 20.
[객체] 동적으로 속성 추가 / 제거 delete // 변수에 빈 객체 생성 var feature = {}; // 동적으로 속성 추가 feature.중앙 = "낙관적"; feature.앞 = "낙천적"; feature.뒤 = "긍정적"; feature.동쪽 = "적극적"; feature.서쪽 = "끈기있는"; feature.남쪽 = "쾌활한"; feature.북쪽 = "명량한"; // 동적으로 속성 제거 delete feature.뒤 delete feature.북쪽 // 동적으로 속성 추가한 것 console로 확인하기 console.log(feature); 공감수 0 댓글수 0 2021. 5. 20.
[헤더/푸터] 반복 코드 나누기 : header / footer 나누기 헤더와 푸터를 나눠두면, 여러 페이지에 동일한 네비게이션 등을 수정할 때 좋아요. #복사해서 쓰기 DOCTYPE html> jQuery로 반복 코드 나누기 $(function(){ $('#header').load("header.html"); $("#footer").load("footer"); }) 공감수 0 댓글수 0 2021. 5. 20.
[API/네이버지도] 웹사이트(홈페이지)에 네이버 지도 삽입하기 - 2. 지도 삽입 https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io 위 사이트로 접속하여, 이것을 하나씩 적용해보겠습니다. 1. 이 코드를 사이에 삽입합니다. ncpClientId=YOUR_CLIENT_ID 에 넣을 클라이언트 아이디는 네이버 클라우드 플랫폼에서 가져오겠습니다. [ 네이버 클라우드 플랫폼을 사용하는 과정은 1. 가입 포스팅 ( Application으로 가면, 등록한 App에서 인증번호 버튼을 클릭합니다. 위 인증번호 창에서 Client I.. 공감수 0 댓글수 0 2021. 5. 19.
[API/네이버지도] 웹사이트(홈페이지)에 네이버 지도 삽입하기 - 1. 가입 및 시작 & 준비 NAVER 지도 API v3는 ( 공감수 0 댓글수 0 2021. 5. 18.
배열로 동적으로 문서 객체 생성 : $.each() // 자바스크립트 배열 관리 $(function () { // 변수 선언 var array = [ { name: 'Tistiory', link: 'https://www.tistory.com/' }, { name: 'Daum', link: 'https://daum.net/' }, { name: 'Naver', link: 'https://naver.com/' } ]; // $.each() 메서드 사용 $.each(array, function (index, item){ // index : 배열의 인덱스 or 객체의 키 // item : 해당 인덱스나 키가 가진 값 // 변수를 선언 var output = ''; // 문자열을 만듦 output += ''; output += ' ' + item.name + ''.. 공감수 0 댓글수 0 2021. 5. 16.
[애니메이션 정지] .clearQueue() .stop() .delay() $('div').click(function(){ $('div').click(function(){ $(this).clearQueue(); // 더블 클릭 등으로 대기열에 들어가는 animate를 막아줌 // 계속된 실행이 일어나지 않도록 하는 메서드. // 클릭되어 실행된 경우에는 animate 실행 대기를 일으키지 않도록 막아준다. $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' }, 2000); // 한꺼번에 실행되는 것이 아니라 // 차례차레 순서대로 실행된다 }); }); $('div').click(function(){ $('div').click(function(){ $(t.. 공감수 0 댓글수 0 2021. 5. 14.
[이벤트] .animate() : 사용자 정의 효과 $('div').click(function(){ $(this).animate({ width: 300 // 세미콜론 사용 X }); }); $('div').click(function(){ $(this).animate({ width: "+=100", height : "+=100" // 클릭할 때마다 클릭할 당시의 값에서 상대적으로 100px을 더하여 줌 }, 1500); // duration: 1.5초 }); 공감수 0 댓글수 0 2021. 5. 13.
[이벤트] .hover() = mouseenter & mouseleave black $('a').on({ mouseenter : function () { $(this).addClass('reverse'); }, mouseleave : function () { $(this).removeClass('reverse'); } }); $(function(){ $('a').hover(function(){ // mouseenter 기능 $(this).addClass('bgc').html('yellow'); }, function(){ // mouseleave 기능 $(this).removeClass('bgc').html('black'); }); }); 공감수 0 댓글수 0 2021. 5. 13.
[이벤트] 변수에 함수 지정하여 사용 Bright Clever Wit Awesome Brilliant // 변수에 함수 담아 사용 var handler = function () { $('') .html('Fortune') .appendTo('h2') .click(handler) }; $('h2').on('click', handler); // 자주 사용되는 것을 위와 같이 // 따로 따로 관리하면 복잡하므로 // body에 이벤트를 연결하는 방식도 있다 $('body').on('click','h2', function(){ // body 태그를 클릭했을 때, 클릭한 것이 h2 태그라면, // 아래 이벤트 핸들러를 실행한다. $(this).css({'background-color':'orange', 'border':'green 5px dotted.. 공감수 0 댓글수 0 2021. 5. 12.
[이벤트 연결] on() - 문자열 또는 객체로 지정 // 문자열로 지정 $('h2').on('click', 100, function (event){ $(this).html('clicked'); }); // 객체로 지정 $('h2').on({ dblclick : function(){ $(this).html('dbclicked') }, mouseenter : function (){ $(this).html('mouseentered') // mouseenter : 마우스가 태그 내로 들어왔을 때 } }); 공감수 0 댓글수 0 2021. 5. 12.
[이벤트 연결] this = event.currentTarget $('h2').click(function(event) { // this = event.currentTarget $(event.currentTarget).html('clicked'); $(this).css('color','red'); }); 공감수 0 댓글수 0 2021. 5. 12.
[문서 객체 이동] 객체가 이동하면서, 2초마다 변경됨 Bright Clever Wit Awesome Brilliant $(function(){ setInterval(function(){ $('span').first().appendTo('h2'); }, 2000); }); 공감수 0 댓글수 0 2021. 5. 12.
[문서 객체 삽입2] 매개변수에 index 함수 갖는 append() 메서드 $(function(){ var content = [ { name: '채은', region: '캐나다 토론토'}, { name: '윤슬', region: '캐나다 벤쿠버'}, { name: '이슬', region: '미국 샌프란시스코'} ]; $('div').append(function(index){ var item = content[index]; var output = ''; output += '' + item.name + ''; output += '' + item.region + ''; return output; }); }); 공감수 0 댓글수 0 2021. 5. 12.
[문서 객체 삽입] append prepend after before Company Products $(function(){ $('헤더').insertBefore('ul'); $('푸터').insertAfter('ul'); $('Home').prependTo('ul'); $('Contact').appendTo('ul'); }); $(function(){ // 문서 객체 삽입 메서드 1 $('헤더').insertBefore('ul'); $('푸터').insertAfter('ul'); $('Home').prependTo('ul'); $('Contact').appendTo('ul'); // 문서 객체 삽입 메서드 2 : 위 방식과 결과 같음 $('ul').before('헤더'); $('ul').after('푸터'); $('ul').prepend('Home'); $('ul').a.. 공감수 0 댓글수 0 2021. 5. 12.
[문서 객체 조작] 배열을 선언하고, 배열 내용 차례대로 적용 $(function(){ // 변수를 배열로 선언하여, var color = ['red', 'blue', 'green']; // 매개변수를 함수로 적용 $('h2').css('color',function(index){ return color[index]; }); }); 공감수 0 댓글수 0 2021. 5. 12.
[객체] 함수를 활용한 속성 부여 $(document).ready(function (){ $('.text_box').attr('height', function(index){ // 단계적으로 크기 적용 return (index + 1) * 100; // 인덱스 0인 .text_box == (0+1) * 100 => height : 100px }) }) $(function(){ $('img').attr({ width : function (index) { return (index + 1) * 100; }, height : 100 }); }); 공감수 0 댓글수 0 2021. 5. 12.
[객체] addClass() : 인덱스 순서대로 클래스 추가 $(document).ready(function (){ $('li').addClass(function(index){ // 함수를 매개변수로 입력 return 'class' + index; }) }) 공감수 0 댓글수 0 2021. 5. 11.
[객체] Setter와 Getter 이해 // 1. Setter : jQuery 객체를 리턴 // 1-방법A : (문자열, 문자열) $("h1").css('color','red'); // 1-방법B-ㄱ : (객체) $('h1').css({ 'color':'orange', 'background-color':'black', 'text-alian':'center' }); // 1-방법B-ㄴ : (객체) > '-' 대신 '대문자'로 바꿔서 식별자로 사용할 것 $('article').css({ width :'130px', height : '133px', border : 'blue', backgroundColor:'black', textAlian:'center' }); // 1-방법C-ㄱ : 함수로 값을 입력하는 방법 $('p').css('color', .. 공감수 0 댓글수 0 2021. 5. 11.
[함수] 숫자인지 숫자로만 구성되어 있는지 // 사용자에게 입력받은 값이 숫자로만 구성되어 있는지 확인하는 함수 function isNumberic (input){ // var key = "1"; function temp(key) { // 키 하나 확인 var output = false; for (var i = 0; i 반복문 계속 // 1번째 반복 : key="1", i="1", output = true } // if } // for return false; } // temp for (var i = 0; i 공감수 0 댓글수 0 2021. 5. 10.
[함수] 매개변수로 넣은 값, 모두 곱해주기 // 함수 이름 : multiply // - 매개변수로 넣은 값을 모두 곱해준다 // (예: power(1,2,3,4,5) = 120) function multiply() { var output = 1; // 초기값 for (var i = 0; i 공감수 0 댓글수 0 2021. 5. 10.
[함수] 매개변수를 제곱해주는 함수 만들기 // 함수 이름 = power // - 매개변수를 하나 넣으면, 제곱해준다 (예: power(2) = 4) // - 매개변수를 두 개 넣으면 의 제곱만큼 해준다 // (예: power(2,3) = 8) function power(a,b){ if (b) { // b가 있는 경우, var output = 1; for (var i = 0; i 공감수 0 댓글수 0 2021. 5. 10.
[함수] 기본 매개변수 function test(a, b, c) { alert(a + b + c); } test(10, 20, 30); // 매개변수를 입력해야 -> 실행됨 // test(); // 이렇게 사용하더라도, // a = 10 // b = 20 // c = 30 // 이렇게 기본값을 가진 매개변수를 만들고 싶다면, function test(a, b, c) { // a가 undefined일 때, -> a = 10 // b가 undefined일 때, -> b = 20 // c가 undefined일 때, -> c = 30 // 가 될 수 있도록 // 방법 1 : a의 typeof가 undefined일 때, a = 10으로 초기화 // 이 방법이 가장 안전. if (typeof (a) == "undefined") { a =.. 공감수 0 댓글수 0 2021. 5. 10.
[함수] 자바스크립트 실행 순서 & 반복문에서의 문제 및 해결 // 자바스크립트 실행 순서 alert('A'); setTimeout(function(){ alert('B'); }); alert('C'); // 이 코드에서 setTimeout은 예약을 거는 코드이므로, // setTimeout은 예약에 걸려있다가 마지막에 실행된다. // 즉, 이 코드에서의 실행순서 : A > C > B // let const var // var : 전역 변수를 선언하는 키워드 // 아래 코드는 언뜻 보면, "0", "1", "2"를 차례로 출력할 것 같지만, for (var i = 0; i 공감수 0 댓글수 0 2021. 5. 10.
[함수] 콜백 함수 // // 메개변수로 들어온 함수를 N번 실행해주는 함수 function callTenTimes(callback) { for (var i = 0; i 공감수 0 댓글수 0 2021. 5. 10.
[함수] 리턴값 - 찾고 싶은 숫자까지만 반복 실행 function findNumber(array, number) { // 조기 리턴 if(!Array.isArray(array)) { return; } // 배열이 아니라면, 처음부터 실행하지 않도록 > 최적화 if(typeof (number) != "number") { return; } // 타입이 숫자가 아니라면, 처음부터 실행하지 않도록 > 최적화 for (var i = 0; i 공감수 0 댓글수 0 2021. 5. 10.
[반복문] 최댓값, 최솟값 구하기 // 배열 내부에서 최댓값, 최솟값 찾기 var array = [52,273,103,32,57,103,31,2]; // 최솟값 찾기 var output = 454548486315848521684855644546; // 초깃값 : 아주 큰 수로 설정 or array[0] / Number.MAX_VALUE // : 배열 내부를 검색해야 하니 = 반복문 사용 for (var i = 0; i array[i]) { output = array[i]; } // // i = 0, array[0] = 52(array 변수의 첫번째 요소 = 즉, 인덱스 '0'), output = 52 (output이 array[3] 크므로, if 실행) // i = 1, array[1] = 273(array 변수의 두번째 요소 = 즉, .. 공감수 0 댓글수 0 2021. 5. 10.
[반복문] 1부터 100까지 더하기 / 곱하기 // 1부터 100까지 더하는 프로그램 var output = 0 for (var i = 0; i 공감수 0 댓글수 0 2021. 5. 10.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.