javascript에서 html page의 parameter값을 지정하여 신규 페이지 오픈 ( post / get )

DevOps/Web 2022. 7. 28. 17:25

설명

javascript로 새로운 html page를 get 혹은 post 방식으로 오픈

 

방법

post

// html
<form id="post_form" name="post_form">
    <input type="text" id='param1' name='param1' value="bb">
    <input type="text" id='param2' name='param2' value="aa">
    <input type="text" id='param3' name='param3' value="oo">
</form>


// javascript
var post_form = document.post_form;
var url = '/project/post_test'
window.open('','project_post')

post_form.action = url;
post_form.method="post";
post_form.target = 'project_post' 
post_form.param1 = 'banana'
post_form.param2 = 'apple'
post_form.param3 = 'orange'

post_form.submit(); 

get

// html


// javascript
var param1_val = 'banana' 
var param2_val = 'apple' 
var param3_val = 'orange' 
window.open('/project/get_test?param1='+param1_val+'&param2='+param2_val+'&param3='+param3_val);

참고

https://milkye.tistory.com/354

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

javascript로 html page parameter 추출  (0) 2022.07.28
html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
  • By SJinDBA

javascript로 html page parameter 추출

DevOps/Web 2022. 7. 28. 15:25

내용

html page의 url 정보에서 parameter값을 추출

 

방법

getParam 함수를 등록하여, 파라미터명으로 값을 조회

// param값을 조회하는 함수 등록
function getParam(sname) {
    var params = location.search.substr(location.search.indexOf("?") + 1);
    var sval = "";
    params = params.split("&");
    for (var i = 0; i < params.length; i++) {
        temp = params[i].split("=");
        if ([temp[0]] == sname) { sval = temp[1]; }
    }
    return sval;
}

// 테스트 URL : http://www.test.com/test.html?param1=apple&param2=banana&param3=orange

// 호출
console.log(getParam("param2"));
console.log(getParam("param1"));
console.log(getParam("param3"));

// 결과"banana"
"apple"
"orange"

참고

https://electronic-moongchi.tistory.com/82

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

javascript에서 html page의 parameter값을 지정하여 신규 페이지 오픈 ( post / get )  (0) 2022.07.28
html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
  • By SJinDBA

html div page code copy ( html 페이지 코드 복사 )

DevOps/Web 2022. 7. 27. 18:00

 

내용

html div 내부에 정의된 page를 code형태로 추출하여 클립보드로 복사하는 기능

 

방법

html

<div id="test_div" name="test_div">
      ~~~~~~~~
</div>

 

javascript

function page_code_copy(){

    file = window.location.href;

    var copyText = document.getElementById("test_div");

    var textArea = document.createElement("textarea");

    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;

    // Ensure it has a small width and height. Setting to 1px / 1em
    // doesn't work as this gives a negative w/h on some browsers.
    textArea.style.width = '2em';
    textArea.style.height = '2em';

    // We don't need padding, reducing the size if it does flash render.
    textArea.style.padding = 0;

    // Clean up any borders.
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';

    // Avoid flash of white box if rendered for any reason.
    textArea.style.background = 'transparent';

    textArea.value = copyText.innerHTML;
    document.body.appendChild(textArea);

    textArea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
        showAlert('Page Code Copy', 'Page Code Copy Successful !!', 2, 2000);
    } catch (err) {
        console.log('Oops, unable to copy');
    }

      document.body.removeChild(textArea);

    /* Select the text field */
    //copyText.select();
    //copyText.setSelectionRange(0, 99999); /* For mobile devices */

    /* Copy the text inside the text field */
    //navigator.clipboard.writeText(copyText.innerHTML);
    //showAlert('Report Copy', 'Report Copy Successful !!', 2, 2000);
}

참고

https://gist.github.com/vitsalis/1b44302d92213d0a09128a4284f15ad6

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

javascript에서 html page의 parameter값을 지정하여 신규 페이지 오픈 ( post / get )  (0) 2022.07.28
javascript로 html page parameter 추출  (0) 2022.07.28
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
  • By SJinDBA

html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )

DevOps/Web 2022. 7. 27. 17:40

내용

html 페이지를 복사 이후 메일내용에 첨부하고 싶을때,

렌더링된 이후 페이지와 동일한 형태를 클립보드에 복사하여 붙여넣기

 

방법

html

<div id="test_div" name="test_div">
      ~~~~~~~~
</div>

 

javascript

function page_page(){

    var htmlEditor = document.getElementById("test_div")

    var container = document.createElement('div')
    container.innerHTML = htmlEditor.outerHTML
    container.style.position = 'fixed'
    container.style.pointerEvents = 'none'
    container.style.opacity = 0
    document.body.appendChild(container)
    window.getSelection().removeAllRanges()
    var range = document.createRange()
    range.selectNode(container)
    window.getSelection().addRange(range)
    document.execCommand('copy')
    document.body.removeChild(container);

    showAlert('Page Copy', 'Page Copy Successful !!', 2, 2000);
}

참고

https://stackoverflow.com/questions/62833657/is-there-any-way-to-copy-the-rendered-html-of-a-div

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

javascript로 html page parameter 추출  (0) 2022.07.28
html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
  • By SJinDBA

html page snapshot -> html2canvas ( html 화면 이미지로 변환 )

DevOps/Web 2022. 7. 27. 17:23

내용

html page를 이미지 형태로 변환하여 저장 or 확인하는 기능

 

방법

html2canvas 사용

 

html

<!-- jQuery -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<!-- html2canvas -->
<script src="~/plugins/html2canvas/html2canvas.min.js"></script>


<div id='myCanvas' class='target' style='border:1px solid gray;width:200px;height:200px'>
    <div style='border:1px solid green;width:180px;height:250px'>Hello world</div>
 </div>

 

javascript

    saveAS 함수를 생성해두고 호출하는 방식

    canvas_height, canvas_widtht 의 경우 설정하지 않아도 상관없으나, 옵션 설정 방법을 위해 작성됨

function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        link.href = uri;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        window.open(uri);
    }
}

function page_snapshot()
{
    const canvas_height = document.querySelector('#myCanvas').offsetHeight
    const canvas_widtht = document.querySelector('#myCanvas').offsetWidth

    html2canvas(document.querySelector("#myCanvas"),{"width": canvas_widtht, "height": canvas_height}).then(canvas => {
        canvas_filename = 'myCanvas_img.jpeg'
        saveAS(canvas.toDataURL("image/jpeg"), canvas_filename);
    });
}

참고

https://lts0606.tistory.com/270

https://html2canvas.hertzen.com/

https://every-time-i-pass-this-place.tistory.com/entry/html2canvas-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%BA%A1%EC%B2%98%EB%A5%BC-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A1%9C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
  • By SJinDBA

html <div>, <span> tag 개념과 차이점

DevOps/Web 2022. 7. 27. 17:03

1. <div> 태그란?

<div>tag란 division, 분할, 분배, 분류를 뜻합니다. html 안에 존재하는 여러 개의 태그들을 <div>라는 큰 단위로 묶어주는 주머니 역할을 한다. 큰 단위인 <div>로 묶어주면, 나중에 css로 <div>에만 수식을 해도 <div>태그 안에 속해있는 태그들이 모두 같은 명령을 받아 동일하게 적용된다.

​

만약 코드가 1,000줄이 넘고 코드도 다른 코드 30개들이 있는데 여기에 모두 동일한 효과를 적용시켜야 된다고 하면, 코드 하나하나에 효과를 넣는 게 아니라 <div> 태그로 묶어 나중에 css로 30여 개의 코드에 동일한 효과를 적용시킬 때 사용한다.

​

<div> 태그는 block level element (블록 라벨 엘리먼트)라 해당하는 코드의 행 전체를 차지한다. 다만, <div> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <div>태그 자체로는 시각적인 변화를 나타낼 수 없다.

 

 

2. <span> 태그란?

<span> 태그도 <div>태그와 같이 여러 개의 태그들을 묶어주는 주머니 역할을 한다. <span>태그는 inline element (인라인 엘리먼트)라 자신의 content 만큼 공간을 차지한다. <span> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <span>태그 자체로는 시각적인 변화를 나타낼 수 없다.

​

3. <div>, <span> tag 출력하기

​

■ <div> tag 출력하기

<div> 텍스트 텍스트 </div>
<div> 텍스트 텍스트 </div>

■ <span> tag 출력하기

 

<span> 텍스트 텍스트 </span>
<span> 텍스트 텍스트 </span>

​

4.<p>, <div>, <span>tag의 차이점

​

<p>, <div>, <span> 태그가 뭐가 다른 건지 의문을 품게 될 때가 있다. 웹 제작 수업 선생님께 여쭤보니 아래처럼 가르쳐주셨다. 궁금하셨던 분들은 참고하시면 좋을듯하다.

​

■ <p> : 문단 분량의 content + 상하 margin이 있음

▲ <p> tag css box 조회화면 / 파란색 : content, 주황색 : margin

​

■ <div> : block level element (블록 라벨 엘리먼트) - 화면 전체를 쓰는 애들. content에 해당하는 <div>라는 텍스트가 행 전체를 차지하고 있다.

▲ <div> tag css box 조회화면 / 파란색 : content

​

■ <span> : inline element (인라인 엘리먼트) - 자기 content 만큼의 테두리를 쓰는 애들. content에 해당하는 <span>이라는 텍스트가 자기만큼의 공간을 차지하는 것을 볼 수 있다.

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거  (0) 2022.07.14
  • By SJinDBA

html div style display 속성을 사용하여 화면 출력/숨김

DevOps/Web 2022. 7. 27. 16:56

내용

이벤트 발생 시점 div 에 정의된 내용을 출력 or 숨김 하고 싶은 경우

 

방법

html

<div class="row" id="test_div">
          ~~~~~
</div>

 

javascript

화면 출력
document.getElementById("test_div").style.display = "";

화면 숨김
document.getElementById("test_div").style.display = "none";

참고

https://www.w3schools.com/jsref/prop_style_display.asp

 

 

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거  (0) 2022.07.14
html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기  (0) 2022.03.22
  • By SJinDBA

javascript 프로그램 실행 지연(sleep)

DevOps/Web 2022. 7. 27. 16:45

내용

일시적으로 실행을 멈추거나, 일정 시간동안 실행을 지연시키는 기능

 

방법

setTimeout( 실행 명령어, 지연 시간(마이크로초) )

'after'를 출력하는 문구는 3초후에 실행이됨, 하지만 'done' 문구가 먼저 출력된 이유는 javascript는 기본적으로 프로그램 실행을 막지 않는(non-block)방식이라 다음 코드가 먼저 실행됨

console.log("before");
setTimeout(() => console.log("after"), 3000);
console.log("done!");

-- 결과 --

before
done!
after

 

Promise 를 사용한 sleep( 지연 시간(마이크로초) ) 

비동기 지연

function sleep(ms) {
  return new Promise((r) => setTimeout(r, ms));
}

console.log("before");
sleep(3000)
  .then(() => console.log("after"))
  .then(() => console.log("done!"));

-- 결과 --

before
after
done!

 

참고

https://www.daleseo.com/js-sleep/

 

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거  (0) 2022.07.14
html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기  (0) 2022.03.22
javascript에서 여러 라인을 하나의 라인으로 처리 (Line continuation)  (0) 2021.12.11
  • By SJinDBA

summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거

DevOps/Web 2022. 7. 14. 13:31

현상

summernote에 작성되어 있는 내용을 javascript 로직으로 수정할때, <p><br></p> 구문이 자동으로 생성됨.

원인

summernote 버그로 v0.8.14버전에서 수정됨

https://github.com/summernote/summernote/issues/3495

해결

최신 버전인 v0.8.14버전으로 교체하였으나 여전히 발생하여,
summernote를 destroy 이후 재생성 하는 방법으로 해결

 

html

<textarea id="textarea_note" name="textarea_note">
</textarea>

js

new_note_data = '<table><tr><td>test value</td></tr></table>'

$('#textarea_note').summernote('reset');
$('#textarea_note').summernote('destroy');
$('#textarea_note').val(new_note_data);

$('#textarea_note').summernote({
    airMode: true
});

 

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기  (0) 2022.03.22
javascript에서 여러 라인을 하나의 라인으로 처리 (Line continuation)  (0) 2021.12.11
html summernote 사용하여 값 조회 / 입력 / 파일 처리  (0) 2021.12.11
  • By SJinDBA

html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기

DevOps/Web 2022. 3. 22. 15:30

Delete 실행 시 확인창을 예제로 작성

modal 호출 시 매개변수를 포함하여 처리

 

html

매개변수 전달을 위해 modal_id를 hidden타입으로 생성

매개변수 전달을 위해 result.id 변수를 SetParamModal()함수에 전달

ID가 Delete_Modal 인 modal 생성

Close 버튼은 창 닫기

Delete 버튼은 Delete() 함수 호출

<!-- Button trigger modal -->
<input type="hidden" name="modal_id" id="modal_id">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#Delete_Modal" onclick="SetParamModal('{{ result.id }}')">
  Delete
</button>


<!-- Modal -->
<div class="modal fade" id="Delete_Modal" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="DeleteModalLabel">Delete</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        삭제 하시겠습니까 ?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" href="#" onclick="Delete()">Delete</button>
      </div>
    </div>
  </div>
</div>

js

SetParamModal(modal_id) : Modal 실행 시 매개변수 전달 기능

Delete() : 실제 삭제 로직 추가

<script src="./jquery-3.4.1.min.js"></script>
<script src="./bootstrapt/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./bootstrapt/css/bootstrap.min.css" />


// modal_id 타입에 전달받은 값을 설정
// Modal 버튼 클릭 시 호출
function SetParamModal(modal_id) {

    $('#modal_id').val(modal_id);
}


// Delete
// Modal창에서 'Delete' 버튼 클릭 시 호출
function Delete() {

    //Modal 호출시 전달한 id 확인
    id = $('#modal_id').val();
    
    // Delete 로직 실행
    // 'Delete from table where id = ' + id;
    
    // Delete modal창 닫기
    $('#Delete_Modal').modal('hide');
}

팝업 화면

참고

https://getbootstrap.com/docs/4.4/components/modal/

저작자표시 비영리 변경금지

'DevOps > Web' 카테고리의 다른 글

javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거  (0) 2022.07.14
javascript에서 여러 라인을 하나의 라인으로 처리 (Line continuation)  (0) 2021.12.11
html summernote 사용하여 값 조회 / 입력 / 파일 처리  (0) 2021.12.11
javascript에서 table의 <tr> <td> 값 조회/변경  (0) 2021.12.11
  • By SJinDBA

to Top

티스토리툴바