javascript 2 페이지
회원가입
로그인
전체메뉴열기
검색열기
PHP(웹프로그램)
AWS.클라우드
리눅스.서버(MySQL,Apache)
개발관련
양식.서식 파일
javascript
HTML
CSS
회원가입
로그인
PHP(웹프로그램)
AWS.클라우드
리눅스.서버(MySQL,Apache)
개발관련
양식.서식 파일
javascript
HTML
CSS
사이트 내 전체검색
검색어 필수
검색
javascript
전체 98건
2 페이지
[nodeJS] php의 implode 처럼 배열을 문자열로 만드는방법
자바스크립트와 nodeJS 동일할것입니다. 별도 테스트는 안해 봤지만.배열의 갯수가 한정된것이 아니라서 만들때 var aTest= []; 이런 형태로 만듭니다.오브젝트는 {} 를 사용하면 되죠. php의 implode 는 join 을 사용하면 됩니다.예를 들어 다음과 같이 했을 때 첫번째 빈배열이 있습니다. // 아래와 같이 하면 빈 배열이 하나 있어서 맨 앞에 구분자로 준 / 이 나오게 된다. let aTest = []; aTest[1] = 1; aTest[2] = 2; console.log( aTest.join('/') ); // 다음과 같이 하는것이 더 좋다. 앞에 / 추가되던 …
[jQuery] 이미지 다시 로드 시키는 방법
이미지를 다시 읽는 기능입니다.방법은 브라우저 캐쉬가 되어 있을 수 있으니 파일명 뒤쪽에 파라미터를 줘서 다시 읽도록 합니다.여기에서는 캐쉬로 인해 나와야 될것이 나오지 않는것을 가정하고 만들었습니다.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>…
[jQuery] AjAX 서버로 데이터 보내고 받는(가져오는) 방법
아작스를 활용하여 서버로 데이터를 보내고 받는 방법의 예제 입니다.데이터를 가져올때 반드시 GET을 사용해야 되는것은 아닙니다. POST로 관계는 없습니다.$(document).ready(function() { // AjAX로 보내는 방법 - 컨텐츠타입: json jQuery.ajax( { type : "GET", url : url, dataType: "JSON", // 성공 success : function(data) { return data; }, // 성공, 실패 무관하게 들어오는 곳 complete: function(data) { co…
[jQuery] 서버에서 json 데이터 가져왔는지 확인법
아래는 setTimeOut을 활용하여 서버에서 ajax로 데이터가 가져왔는지 확인하는 방법에 대한 것입니다.비동기 방식으로 실행 되기 때문에 절차적으로 순서대로 실행 되지 않기 때문에 여러번 확인 하는 과정을 거치게 됩니다.<script> // 초기화 되는 문제로 onLoad 밖에 있어야 한다let user_data = {};$(document).ready(function() { // josn data 가져온다 let user_data = get_user_data(); var userTimer = setTimeout(check_is_val, 12, 1); function check_is_val(num…
[jQuery] 이미지 로딩 완료 되었는지 확인하는 방법
브라우저에서 이미지가 완전하게 로딩이 완료 되었는지 jQuery을 사용해서 확인하는 방법에 대한 것입니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 이미지 로딩 완료 확인</title> <script src="h…
[jQuery] input 박스 같은이름 배열형태로 넘기는 경우체크
input에서 text, password는 같은 형태로 처리를 합니다.여기선 php로 배열 형태로 넘길때 name 값을 같게하면서 []를 사용하는 경우의 예가 있습니다. 예전 jQuery에선 [1] 형태로 사용했는데 현재 버전은 eq(1) 형태로 사용합니다.인덱스의 사용 방법이 변경 되었습니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery …
[jQuery] 라디오버튼 비활성화 값 가져오기
아래는 라디오 버튼에 관한 예 입니다.체크박스와 크게 다르지 않기 때문에 더 많은 예는 체크박스 것을 보면 됩니다. 그리고 라디오 버튼은 여러개가 있을 경우 1개만 선택이 가능한 버튼을 말합니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery test </title> <link rel="stylesheet" href="htt…
[jQuery] 체크박스 값변경 선택 및 감지하기
jQuery를 이용한 체크박스 사용에 관한 것입니다.체크박스는 원칙적으로 만들어지기를 여러개를 선택할 수 있는것을 말합니다. 그렇기 때문에 체크된 값을 가져올때는 모두 가져오는것이 아니라 맨 앞에 있는것이 리턴이 되며 체크된 모든것을 가져오게 하려면 루프를 돌려서 사용하면 됩니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery test <…
[jQuery] select 박스 값변경 및 index 가져오기와 삭제 방법
HTML FORM의 select 박스에서 option의 값을 삭제하거나 추가 변경하는 방법에 대한 테스트 입니다.보통 예제에서 버전의 명시가 없어 안되는것들이 있는데요. 아래는 테스트한것 그대로 올립니다. jQuery 버전을 확인 하세요. attr 형태는 예전것입니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery test </title…
html2canvas 이미지 서버전송(ajax post)
많이 사용하는 html을 이미지로 만들어 사용할 수 있는 라이브러리 입니다.사용해보니 제가 본것에서는 아래와 같은 것이 있었습니다.- 화면에 보이는것하고 다르게 나오는 경우가 있으니 반드시 확인 필요- 외부 이미지 주소 캡처가 안되더라 입니다.(아래 샘플 확인)- 어느분이 1만 픽셀 넘는것은 안되드라에 대한 부분이 있는데 많은 양의 경우 별도 테스트 필요<?php// https://m.blog.naver.com/lee-il-hoon/221437449651if ( $_POST['mode'] == "img_upload" ){ $img_base64 = $_POST['img_base64']; $img …
nodejs 동기식 파일 저장하기
최근엔 동기식 함수가 생겨서 좋아 졌습니다.다른 것들도 일반 프로그램 처럼 생겼으면 좋겠습니다. 브라우저에서 되던되로 하는것은 백엔드에선 맞지 않습니다. 아래는 쓰기만 있지만 삭제도 Sync를 붙이면 됩니다. ● 동기식 파일 저장하기 let fileDIR = '/root/test'; const result = { file: file, size: filesize } let resultJSON = JSON.stringify(result); var wrtFile = fileDIR + '/result.json'; fs.writeFileSync(wrtFile, resultJSON), {enco…
jQuery 쿠키 라이브러리 사용하기
요즘은 jquery cdn 이런형태로 검색을 하면 쉽게 사용할 수 있는 cdn URL을 얻을 수 있습니다.아래 min 파일 아닌것을 보면 소스가 길지 않습니다. 그렇기 때문에 어떻게 되어있는지 쉽게 파악이 됩니다.https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js 쿠키에서 중요한것은 생성은 웹브라우저에서 한다는 것입니다.서버에선 생성하라고 브라우저에게 알려 주는 역활을 합니다. 서버에서 생성하는게 아닙니다.* 사용설명이 있는 곳https://github.com/carhartl/jquery-cookie/blob/master/READ…
jQuery onClick 여러개 설정하는 방법
일반 전통적인 자바스크립트의 경우 onClick 부분에 ; 으로 부분하여 여러개의 함수를 실행하게 하는 방법이 쓰이곤 합니다.그러면 jQuery는 어떻게 하나?간단 합니다. 테스트 해본 결과 중첩해서 여러개 만들어 테스트 해보니 잘 됩니다.$(document).ready(function() { $( "#btn_test1").click(function(e) { console.log('1- 값 설정 변경: ', e); }); $( "#btn_test1").click(function(e) { console.log('2- 값 설정 변경: ', e); }); $( "#btn_test1").click(funct…
nodejs 변수형 변환하기 - 숫자형태의 문자값의 문제
숫자인데 오류가 발생 하는 경우보통 숫자 문자 가리는 변수를 사용하지 않는 버릇에서 비롯 된것입니다.특정 프로그램에서 반드시 숫자인 경우만 처리해서 발생하는것인데 오류메시지 잘 읽어보면 답이 있는데. 습관이 문제 입니다.간단하게 Number 함수를 통해서 형변환을 해주면 해결 되는 문제입니다.throw new TypeError(exports.createTypeErrorMsg(value, valueName, types)); ^TypeError: `options.x` must be of type `number` or `n`, but was actually of type `string`숫자들어갈 자리Numbe…
nodejs 웹서버에서 PHP 외부실행이 안될때
php의 shell_exec 같은 외부실행 함수를 통해서 nodejs 실행해야 되는데 안되는 경우에 대한 것입니다.어떻게 설치가 되었느냐에 따라 다른것인데요.리눅스 쉘에선 잘 되는데 웹서버를 통해서 실행할때 안되면 대부분 권한 문제 입니다. 즉, 실행할 수 있는 권한에 먼저 문제가 없는지 확인해봐야 합니다.전에 한번 고생하고 또 이런일이 있는데요.nvm 설치로 node가 /root/ 같은 홈디렉토리 하위에 있으면 그렇습니다.이런 경우는 웹서버 실행시 writeFileSync 결과 파일이 생성이 안되는 경우 체크 해 보면 됩니다.아래의 경우는 문제 되지 않습니다. 접근하는 디렉토리 권한 부터 살펴 보면 됩니다.# ll /…
[pdfjs] pdf viewer 파일 다운로드 버튼 없는 뷰어
간혹 파일 다운로드 기능이 없는 pdf viewer를 찾는것을 본적이 있어 올립니다.이건 커스텀 한것이기 때문에 pdfjs의 샘플에 있는 pdf뷰어에 다운로드 버튼을 없앤것과는 다른것입니다.아래는 테스트용으로 간략하게 만든것으로 정식서비스에선 퍼블리셔와 디자이너의 도움을 받아 약간만 꾸미면 됩니다.- 스크롤기능을 이용하여 페이지 이동에 대한 기능. 표시기능- url호 호출할 수 있습니다. 만약 버튼을 이용하여 다른것을 호출해야 된다면(새로고침 없이) 오픈을 하게 되면 기존에 보여준것은 삭제하는 기능이 필요한데 직접 구현을 해야 합니다. jquery remove 기능 활용하면 됩니다.- 캔버스에 있는것을 간단하게 섬네일로…
jQuery 브라우저 창 크기 변화 감지
창사이즈가 줄거나 또는 사용자 마다 창사이즈(브라우저) 크기가 모두 다릅니다.그런 경우 동적으로 잘 처리 하는 방법이 필요한 경우.// -------------------------------------------------// 창크기 변화 감지// -------------------------------------------------// - 확대/축소 할때 감지 확인 됨// - 개발자 도구 범위 좁혔다 넓혔다// - 브라우저 창 확대,축소 감지 확인//$( window ).resize(function(event) { console.log('창크기 크기 변경:', event); // https://kkotkk…
createElement jQuery로 표현하는 방식
가능하면 jQuery로 사용하기 위해서 찾아 보았습니다.동적으로 처리 하는것은 소스와 개발자도구에서 봤을대와 다릅니다.실제 웹페이지에서 보이는것은 개발자 도구를 보고 판단을 해야 됩니다. 받아진 HTML 소스를 보고 판단하면 원하는 결과를 얻을 수 없을 것입니다.$.create로 예제가 있는것이 있는데 현재 버전에선 작동하지않습니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="…
textContent 에 해당하는 jQuery text 사용
가능하면 jQuery 사용해야 다른 브라우저에서도 큰 문제가 발생 하지 않습니다. 현재는 크롬계열이 대부분이고 파이어폭스, 사파리 정도 이지만 습관을 들이는것이 좋습니다.다만 속도 문제가 있어 속도에 큰 영향을 받는것이라면 jQuery를 권장하지 않습니다. 일반적인 사이트에선 속도 때문에 jQuery를 사용 못할 필요는 없을 것이라 봅니다.아래 html을 넣어야 한다면 text 부분을 html로 변경하면 됩니다.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa…
jQuery mouseup 클릭한 id값 가져오기
가져오는 것은 일반적으로 아래 형태 많이 사용 합니다.event.currentTarget.id가져오기. 변경하기.attr( attributeName ) // 가져오기.attr( attributeName , 변경할값 ) // 변경하기클릭한 아이디var click_id = $(this).attr('id');부모 아이디 얻기$(this).closest('div').attr('id')변경하는방법$( '#test' ).attr( 'value', 'Hello' ); $('#test1') .mouseup(function(event) { console.log('jquery mouse up: ', even…
undefined 체크 하는 방법
아래는 jQuery 마우스 클릭 후 up 되었을 때 이벤트가 발생 하는데 이때 현재의 클래스 명을 가져와서 특정 한것이 있는지 아니면 가져 올 수 없는 경우가 있으면 처리 하지 않도록 하는 예제 입니다. $('#test1').mouseup(function(event) { var is_set = true; var className = event.toElement.className; if( typeof clickClassName == "undefined" || clickClassName == null || clickClassName == "" ) { } else if ( tt == …
2차원배열 개념으로 json 이용하기(연관배열)
예전에 딕셔너리도 이렇게 처리하는것을 본것 같은 기억이 있는데요.php에서의 배열은 간단한데 여기건 별도로 만들어진 배열을 넣는 방식으로 처리 합니다.json 이라고 했지만 아래가 json은 아니죠. 그렇게 만들면 되서 json 이라고 하였습니다. json 다른 언어에서도 사용하여 요즘은 언어 독립형이 된듯 합니다.let aGlbInfo = {};// 초기화 후 기존것을 읽어서 넣어 준 다음 추가 한다function set_obj_data ( idx1, idx2, idxVal ){ let aTemp = {}; for(var key in aGlbInfo[idx1]) { var val …
jQuery 이미지를 div박스 안에서 비율로 처리하기
간혹 픽셀 보다는 % 처리를 하여 동적으로 대응 되도록 해야 되는 경우가 있습니다.이런 경우 처리 방법에 대한 것입니다.jQuey를 사용하였는데 바닐라로도 큰 차이는 없습니다.중요한 부분은 배열로 처리 한다는것입니다. var boxNum = 2; var imgNum = 1; // 이미지크기 var imgWidth = $('#img_'+imgNum).outerWidth(); var imgHeight = $('#img_'+imgNum).outerHeight(); // div 박스 크기 var boxWidth = $('#page'+boxNum).outerWidth(); var b…
인풋박스 엔터키 입력되면 다른페이지로 넘기기
자바스크립트 키 이벤트에서 keyup과 keydown이 있는데 인식을 하게 하기위해선 눌렸을때가 아니라 올라왔을때 입니다.즉, keyup을 사용해야 합니다.아래는 jquery를 이용한 방법입니다. <script> $(document).ready(function() { // $('#query').keyup(function(event) { if (event.key == "Enter") { var searkw = $("#query").val(); // console.log(searkw); var url_search = 'https://…
Manifest: Line: 1, column: 1, Syntax error. 오류 해결방법
아무리 찾아도 보이지 않는 문제가 명시된 파일명에 대한것 주석처리 하니 괜찮아졌습니다.괜찮았는데 뭔가 잘못 되었나 봅니다.<link rel="manifest" href="site.webmanifest">이 부분을 주석처리 하니 콘솔에서 오류가 없어졌습니다.이때문에 엄한 자바스크립트만 이진 탐색한다고 주석처리 하고 있었습니다.이미지 자세히 보면 끝에 파일명이 나와 있는데 .....
자바스크립트를 이용한 요소를 다른요소의 박스안으로 이동 시키기
자바스크립트로 이미지나 엘리먼트등 id 값을 가지고 있는것을 다른 요소의 안에 이동 시키는는데 마우스 이벤트를 잃어 버리는 경우와 유지 하는 경우에 대한 것입니다.필요에 따라 사용하면 됩니다.let id_name = 'test01';let pageNum = 2;// 마우스 이벤트 잃어버림let tmp_image = $("#"+id_name).clone().wrapAll("<div />").parent().html();$("#" + id_name).remove();$("#page" + pageNum).append(tmp_image);// 마우스 이벤트 유지$("#"+id_name).insertAft…
마우스 이벤트를 활용한 drag(드레그)
여기 샘플에서 drop에 대한것은 처리 하지 않습니다.초기 drag가 필요하여 htm5에서 기본적으로 제공하는 drag 가지고 확장 응용하여 jQuery drag 같은것을 만든줄 알았는데 그렇지 않았습니다.여기서 소개하는 drag 처리 방식은 아래 사이트에서 참고 하였습니다.Drag and Drop with JavaScript (w3docs.com) Drag'n'Drop with mouse events (javascript.info) 그리고 여기선 픽셀만 다루지만 특정 박스 안에서 비율로 처리 되어야 한다면 (확대나 축소) 박스 크기를 계산하여 좌표를 줄때 %(비율)로 주면 됩니다.■ 아래는 drag(드레그) 관련된것으…
HTML5 drag drop 샘플 입니다.
jQuery의 drag drop는 아닙니다. 이 샘플은 HTML5에서 기본적으로 지원하는 drag drop에 대한 가장 기본적인 샘플 입니다.drag - drop 에 대한 것은 속도에 신경을 써야 하는것이 아니라면 jQuery-ui의 것을 사용하는것이 지원되는것이 더 좋습니다.여기 올린 샘플은 리스터를 통해서 처리 하는 방식이 있는데.어떤것이 태그에 들어가고 처리 되는것인지 구분해준 사이트가 없어서 테스트 해본 것을 올립니다.■ drag(드레그) 관련된 참고 자료 ▶ jQuery drag drop 파일 업로드 샘플 > javascript (pabburi.co.kr) ▶ 마우스 이벤트를 활용한 drag >…
jQuery drag drop 파일 업로드 샘플
테스트한 jQuery drag drop 파일 업로드 샘플 입니다.제가 만든것은 아니고 다른분이 만든것 잘 되는지 확인 한것을 올립니다.수정한 부분이 두곳이 있습니다.그리고 기본적으로 drat 와 drop에 대해서 알고 있는것이 후에 수정하는데 도움이 될 수 있습니다.drop 하여 올리는 샘플이 찾아 보면 안되는것이 많습니다. 또는 오래 된것* 수정한 부분은 2곳인데 아래와 같습니다 var formData = new FormData(form[0]); for (var i = 0; i < uploadFileList.length; i++) { …
json 2차원 배열 형태로 사용(연관배열, 틱셔너리)
PHP의 연관배열 처럼 사용하고 싶어서 테스트 해본것입니다.틱셔너리라고 사용하는 언어도 있습니다.PHP의 연관배열은 영문을 쉽게 넣을 수 있어 편하고 또 쉽게 오브젝트나 json 형태로 인코딩 디코딩이 무척 간단 합니다.아래는 자바스크립트 테스트 한것입니다.// 객체 형태로 리턴하고 사용하는 방법 - 여러개의 변수 리턴function get_test_return_obj(){ let xx = 1; let yy = 2; return { xpos: xx, ypos: yy }}let rtn = get_test_return_obj();console.log(rtn);console.log(rtn.xpos, rtn.…
처음
1
페이지
열린
2
페이지
3
페이지
4
페이지
맨끝
게시물 검색
검색대상
제목
검색
상단으로