javascript 2 페이지
javascript
전체 98건 2 페이지
  • profile_image 자바스크립트와 nodeJS 동일할것입니다. 별도 테스트는 안해 봤지만.배열의 갯수가 한정된것이 아니라서 만들때 var aTest= []; 이런 형태로 만듭니다.오브젝트는 {} 를 사용하면 되죠. php의 implode 는 join 을 사용하면 됩니다.예를 들어 다음과 같이 했을 때 첫번째 빈배열이 있습니다.  // 아래와 같이 하면 빈 배열이 하나 있어서 맨 앞에 구분자로 준 / 이 나오게 된다.  let aTest     = [];  aTest[1]      = 1;  aTest[2]      = 2;  console.log( aTest.join('/') );  // 다음과 같이 하는것이 더 좋다. 앞에 / 추가되던 …
  • profile_image 이미지를 다시 읽는 기능입니다.방법은 브라우저 캐쉬가 되어 있을 수 있으니 파일명 뒤쪽에 파라미터를 줘서 다시 읽도록 합니다.여기에서는 캐쉬로 인해 나와야 될것이 나오지 않는것을 가정하고 만들었습니다.<!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>…
  • profile_image 아작스를 활용하여 서버로 데이터를 보내고 받는 방법의 예제 입니다.데이터를 가져올때 반드시 GET을 사용해야 되는것은 아닙니다. POST로 관계는 없습니다.$(document).ready(function() {  // AjAX로 보내는 방법 - 컨텐츠타입: json  jQuery.ajax(  {    type    : "GET",    url     : url,    dataType: "JSON",    // 성공    success : function(data) {      return data;    },    // 성공, 실패 무관하게 들어오는 곳    complete: function(data) {      co…
  • profile_image 아래는 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…
  • profile_image 브라우저에서 이미지가 완전하게 로딩이 완료 되었는지 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…
  • profile_image 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 …
  • profile_image 아래는 라디오 버튼에 관한 예 입니다.체크박스와 크게 다르지 않기 때문에 더 많은 예는 체크박스 것을 보면 됩니다. 그리고 라디오 버튼은 여러개가 있을 경우 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…
  • profile_image 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 <…
  • profile_image 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…
  • profile_image 많이 사용하는 html을 이미지로 만들어 사용할 수 있는 라이브러리 입니다.사용해보니 제가 본것에서는 아래와 같은 것이 있었습니다.- 화면에 보이는것하고 다르게 나오는 경우가 있으니 반드시 확인 필요- 외부 이미지 주소 캡처가 안되더라 입니다.(아래 샘플 확인)- 어느분이 1만 픽셀 넘는것은 안되드라에 대한 부분이 있는데 많은 양의 경우 별도 테스트 필요<?php// https://m.blog.naver.com/lee-il-hoon/221437449651if ( $_POST['mode'] == "img_upload" ){  $img_base64   = $_POST['img_base64'];  $img        …
  • profile_image 최근엔 동기식 함수가 생겨서 좋아 졌습니다.다른 것들도 일반 프로그램 처럼 생겼으면 좋겠습니다. 브라우저에서 되던되로 하는것은 백엔드에선 맞지 않습니다. 아래는 쓰기만 있지만 삭제도 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…
  • profile_image 요즘은 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…
  • profile_image 일반 전통적인 자바스크립트의 경우 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…
  • profile_image 숫자인데 오류가 발생 하는 경우보통 숫자 문자 가리는 변수를 사용하지 않는 버릇에서 비롯 된것입니다.특정 프로그램에서 반드시 숫자인 경우만 처리해서 발생하는것인데 오류메시지 잘 읽어보면 답이 있는데. 습관이 문제 입니다.간단하게 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…
  • profile_image php의 shell_exec 같은 외부실행 함수를 통해서 nodejs 실행해야 되는데 안되는 경우에 대한 것입니다.어떻게 설치가 되었느냐에 따라 다른것인데요.리눅스 쉘에선 잘 되는데 웹서버를 통해서 실행할때 안되면 대부분 권한 문제 입니다. 즉, 실행할 수 있는 권한에 먼저 문제가 없는지 확인해봐야 합니다.전에 한번 고생하고 또 이런일이 있는데요.nvm 설치로 node가 /root/ 같은 홈디렉토리 하위에 있으면 그렇습니다.이런 경우는 웹서버 실행시 writeFileSync 결과 파일이 생성이 안되는 경우 체크 해 보면 됩니다.아래의 경우는 문제 되지 않습니다. 접근하는 디렉토리 권한 부터 살펴 보면 됩니다.# ll /…
  • profile_image 간혹 파일 다운로드 기능이 없는 pdf viewer를 찾는것을 본적이 있어 올립니다.이건 커스텀 한것이기 때문에 pdfjs의 샘플에 있는 pdf뷰어에 다운로드 버튼을 없앤것과는 다른것입니다.아래는 테스트용으로 간략하게 만든것으로 정식서비스에선 퍼블리셔와 디자이너의 도움을 받아 약간만 꾸미면 됩니다.- 스크롤기능을 이용하여 페이지 이동에 대한 기능. 표시기능- url호 호출할 수 있습니다. 만약 버튼을 이용하여 다른것을 호출해야 된다면(새로고침 없이) 오픈을 하게 되면 기존에 보여준것은 삭제하는 기능이 필요한데 직접 구현을 해야 합니다. jquery remove 기능 활용하면 됩니다.- 캔버스에 있는것을 간단하게 섬네일로…
  • profile_image 창사이즈가 줄거나 또는 사용자 마다 창사이즈(브라우저) 크기가 모두 다릅니다.그런 경우 동적으로 잘 처리 하는 방법이 필요한 경우.// -------------------------------------------------// 창크기 변화 감지// -------------------------------------------------//  - 확대/축소 할때 감지 확인 됨//  - 개발자 도구 범위 좁혔다 넓혔다//  - 브라우저 창 확대,축소 감지 확인//$( window ).resize(function(event) {  console.log('창크기 크기 변경:', event);  // https://kkotkk…
  • profile_image 가능하면 jQuery로 사용하기 위해서 찾아 보았습니다.동적으로 처리 하는것은 소스와 개발자도구에서 봤을대와 다릅니다.실제 웹페이지에서 보이는것은 개발자 도구를 보고 판단을 해야 됩니다. 받아진 HTML 소스를 보고 판단하면 원하는 결과를 얻을 수 없을 것입니다.$.create로 예제가 있는것이 있는데 현재 버전에선 작동하지않습니다.<!DOCTYPE html><html lang="ko"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="…
  • profile_image 가능하면 jQuery 사용해야 다른 브라우저에서도 큰 문제가 발생 하지 않습니다. 현재는 크롬계열이 대부분이고 파이어폭스, 사파리 정도 이지만 습관을 들이는것이 좋습니다.다만 속도 문제가 있어 속도에 큰 영향을 받는것이라면 jQuery를 권장하지 않습니다. 일반적인 사이트에선 속도 때문에 jQuery를 사용 못할 필요는 없을 것이라 봅니다.아래 html을 넣어야 한다면 text 부분을 html로 변경하면 됩니다.<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compa…
  • profile_image 가져오는 것은 일반적으로 아래 형태 많이 사용 합니다.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…
  • profile_image 아래는 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 == …
  • profile_image 예전에 딕셔너리도 이렇게 처리하는것을 본것 같은 기억이 있는데요.php에서의 배열은 간단한데 여기건 별도로 만들어진 배열을 넣는 방식으로 처리 합니다.json 이라고 했지만 아래가 json은 아니죠. 그렇게 만들면 되서 json 이라고 하였습니다. json 다른 언어에서도 사용하여 요즘은 언어 독립형이 된듯 합니다.let aGlbInfo      = {};// 초기화 후 기존것을 읽어서 넣어 준 다음 추가 한다function set_obj_data ( idx1, idx2, idxVal ){  let aTemp       = {};  for(var key in aGlbInfo[idx1]) {    var val      …
  • profile_image 간혹 픽셀 보다는 % 처리를 하여 동적으로 대응 되도록 해야 되는 경우가 있습니다.이런 경우 처리 방법에 대한 것입니다.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…
  • profile_image 자바스크립트 키 이벤트에서 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://…
  • profile_image 아무리 찾아도 보이지 않는 문제가 명시된 파일명에 대한것 주석처리 하니 괜찮아졌습니다.괜찮았는데 뭔가 잘못 되었나 봅니다.<link rel="manifest" href="site.webmanifest">이 부분을 주석처리 하니 콘솔에서 오류가 없어졌습니다.이때문에 엄한 자바스크립트만 이진 탐색한다고 주석처리 하고 있었습니다.이미지 자세히 보면 끝에 파일명이 나와 있는데 ..... 
  • profile_image 자바스크립트로 이미지나 엘리먼트등 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…
  • profile_image 여기 샘플에서 drop에 대한것은 처리 하지 않습니다.초기 drag가 필요하여 htm5에서 기본적으로 제공하는 drag 가지고 확장 응용하여 jQuery drag 같은것을 만든줄 알았는데 그렇지 않았습니다.여기서 소개하는 drag 처리 방식은 아래 사이트에서 참고 하였습니다.Drag and Drop with JavaScript (w3docs.com) Drag'n'Drop with mouse events (javascript.info) 그리고 여기선 픽셀만 다루지만 특정 박스 안에서 비율로 처리 되어야 한다면 (확대나 축소) 박스 크기를 계산하여 좌표를 줄때 %(비율)로 주면 됩니다.■ 아래는 drag(드레그) 관련된것으…
  • profile_image jQuery의 drag drop는 아닙니다. 이 샘플은 HTML5에서 기본적으로 지원하는 drag drop에 대한 가장 기본적인 샘플 입니다.drag - drop 에 대한 것은 속도에 신경을 써야 하는것이 아니라면 jQuery-ui의 것을 사용하는것이 지원되는것이 더 좋습니다.여기 올린 샘플은 리스터를 통해서 처리 하는 방식이 있는데.어떤것이 태그에 들어가고 처리 되는것인지 구분해준 사이트가 없어서 테스트 해본 것을 올립니다.■ drag(드레그) 관련된 참고 자료  ▶ jQuery drag drop 파일 업로드 샘플 > javascript (pabburi.co.kr)   ▶ 마우스 이벤트를 활용한 drag >…
  • profile_image 테스트한 jQuery drag drop 파일 업로드 샘플 입니다.제가 만든것은 아니고 다른분이 만든것 잘 되는지 확인 한것을 올립니다.수정한 부분이 두곳이 있습니다.그리고 기본적으로 drat 와 drop에 대해서 알고 있는것이 후에 수정하는데 도움이 될 수 있습니다.drop 하여 올리는 샘플이 찾아 보면 안되는것이 많습니다. 또는 오래 된것* 수정한 부분은 2곳인데 아래와 같습니다                    var formData  = new FormData(form[0]);                    for (var i = 0; i < uploadFileList.length; i++) {      …
  • profile_image 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.…
게시물 검색