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

Telegram 채팅창에 웹브라우저(Web browser)로 message 전송

DevOps/DB Monitoring 2022. 4. 13. 22:53

방법

telegram 가입 후, telegram bot을 이용하여 채팅방 생성후 메시지 전송 API를 웹브라우저로 전송

1. telegram bot 생성

  1-1. 웹브라우저(Web browser)에서 https://web.telegram.org/#/im?p=@BotFather
  1-2. 하단의 Start 버튼 클릭 또는 /start
  1-3. /newbot
  1-4. Bot 별칭 지정: chat 리스트 등 외부에 보일 이름
  1-5. Bot 이름 지정: 반드시 이름이 bot으로 끝나야 한다. ex) hexoul_bot
  1-6. Access token 메모: 1-4까지 진행하면 BotFather가 메세지를 보내는데 이것이 Access token이다.
        "Use this token to access the HTTP API:" 바로 아래의 긴 문자열을 복사해둔다.
  1-7. chat 리스트에서 1-4. 에서 지정한 별칭을 찾아 Start 버튼 클릭 또는 /start 입력

2. 채팅방 정보 얻어오기

2-1. 내 정보 API 호출: "https://api.telegram.org/bot" + Access token + "/getUpdates" 를 웹브라우저에 입력

     1-5에서 얻은 Access token이 123ABC였다면, "https://api.telegram.org/bot123ABC/getUpdates" 가 된다.
     만약 "result": []로 되어있다면 아직 Bot 시작 전일 수 있으므로 1.7.이 잘 되었는지 확인한다.

     정상적으로 처리되었다면 아래와 같은 결과가 반환된다.

{"ok":true,"result":[{"update_id":???,
"message":{"message_id":??,"from":{"id":??,"is_bot":false,"first_name":"Your first name","last_name":"Your last name","language_code":"en-US"},"chat":{"id":????????,"first_name":"Your first name","last_name":"Your last name","type":"private"},"date":1511258546,"text":"/start","entities":[{"offset":0,"length":6,"type":"bot_command"}]}}

  2-2. chat_id 메모
        2-1에서 빨간 굵은 글씨로 표시한 ????????가 chat_id로 쓰인다.
        실제로는 숫자로 되어있으므로 헷갈리지 말자. 따로 메모해두자.

3. 채팅방에 메세지 보내기

    2-1에서 썼던 웹주소의 뒷부분을 변경하여 호출한다.
    Access token까지가 base url이고 API 명, 인자 등이 뒤에 붙는다.
    메세지를 보내는 API 명은 sendMessage이고 인자는 chat_id와 text로 전체적인 형태는 아래와 같다.

https://api.telegram.org/bot123ABC/sendMessage?chat_id=????????&text=hello

    Access token: 사용자마다 다름
    chat_id: 2-1에서 얻은 채팅방의 ID
    text: 보낼 내용

    >> 텔레그램에 메세지가 잘 도착한 것을 확인할 수 있다.

 

참고

https://hexoul.blogspot.com/2017/11/telegram-sendmessage-api.html

 

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

'DevOps > DB Monitoring' 카테고리의 다른 글

[telegram bot] telegram message commands / call_back / Keyboard Button 처리 ( python, php )  (0) 2021.09.28
[telegram bot] telegram bot 생성 및 python으로 message 전송  (0) 2021.09.27
telegram callback_data is allowed to exceed 64 characters  (0) 2021.09.02
  • By SJinDBA

to Top

티스토리툴바