Programming/javascript & HTML2018. 9. 12. 18:49

rest api ajax / jquery with HTTP header

node.js에서 작성하는거 처럼 인자랑 넣어주면 되는거 였군...


[링크 : https://stackoverflow.com/questions/25085012/how-to-call-rest-api-with-jquery-with-additional-headers]

[링크 : https://spring.io/guides/gs/consuming-rest-jquery/]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
자바스크립트 배열 관련  (0) 2018.09.14
자바 스크립트 변수  (0) 2018.09.12
JSMpeg timestamp  (0) 2018.09.11
html5 video timestamp  (0) 2018.09.11
Posted by 구차니
Programming/javascript & HTML2018. 9. 12. 17:02

자바 스크립트 변수

[] 배열

{} 객체


[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals]

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_Objects]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

자바스크립트 배열 관련  (0) 2018.09.14
rest api ajax / jquery with HTTP header  (0) 2018.09.12
JSMpeg timestamp  (0) 2018.09.11
html5 video timestamp  (0) 2018.09.11
html내 <script>의 올바른 위치(?)  (0) 2018.09.04
Posted by 구차니
Programming/javascript & HTML2018. 9. 11. 18:54

JSMpeg timestamp

되긴 하지만 처음 시점이 0초로 잡힌다고..

html5 video 처럼 얘도 1초 단위다 -_ㅠ


[링크 : https://github.com/phoboslab/jsmpeg/issues/108]


JSMpeg.Player API

A JSMpeg.Player instance supports the following methods and properties:


.play() – start playback

.pause() – pause playback

.stop() – stop playback and seek to the beginning

.destroy() – stops playback, disconnects the source and cleans up WebGL and WebAudio state. The player can not be used afterwards.

.volume – get or set the audio volume (0-1)

.currentTime – get or set the current playback position in seconds 

[링크 : https://github.com/phoboslab/jsmpeg]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

rest api ajax / jquery with HTTP header  (0) 2018.09.12
자바 스크립트 변수  (0) 2018.09.12
html5 video timestamp  (0) 2018.09.11
html내 <script>의 올바른 위치(?)  (0) 2018.09.04
jquey ajax 테스트  (4) 2018.09.03
Posted by 구차니
Programming/javascript & HTML2018. 9. 11. 18:49

html5 video timestamp

초 단위로 설정이나 읽는게 가능

(프레임 단위나 msec 단위는 안되는 듯)


[링크 : https://stackoverflow.com/questions/6380956/current-duration-time-of-html5-video]

[링크 : https://www.w3schools.com/tags/av_prop_currenttime.asp]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

자바 스크립트 변수  (0) 2018.09.12
JSMpeg timestamp  (0) 2018.09.11
html내 <script>의 올바른 위치(?)  (0) 2018.09.04
jquey ajax 테스트  (4) 2018.09.03
jquery 복수 속성 선택하기  (0) 2018.08.30
Posted by 구차니
Programming/javascript & HTML2018. 9. 4. 17:32

html내 <script>의 올바른 위치(?)

그래도.. html 요소니까 </body> 이후에 넣긴 그런거 같아서 고민하다가 검색


결론은.. body 전에 넣자 인가?


[링크 : http://jundol.kr/8]

[링크 : http://webdir.tistory.com/514]


일단 여기는 순수 작동하는 자바스크립트가 아니라 외부 스크립트 인것 같은데..

async나 defer를 쓰라고..

<script type="text/javascript" src="path/to/script1.js" async></script>

<script type="text/javascript" src="path/to/script2.js" async></script>


<script type="text/javascript" src="path/to/script1.js" defer></script>

<script type="text/javascript" src="path/to/script2.js" defer></script> 

[링크 : http://dailydev.tistory.com/15]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

JSMpeg timestamp  (0) 2018.09.11
html5 video timestamp  (0) 2018.09.11
jquey ajax 테스트  (4) 2018.09.03
jquery 복수 속성 선택하기  (0) 2018.08.30
jqeury 예제 그리고 자바스크립트 익명함수  (0) 2017.06.10
Posted by 구차니
Programming/javascript & HTML2018. 9. 3. 15:53

jquey ajax 테스트

가장 만만한 예제로 하는 중

일단.. jqeury를 통해서 load하는거나 다름없긴 하지만

ajax를 통해서 페이지를 불러오는 식으로 일단은 구현



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="css/style.css">

<script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>

<div id="whole">

<div class="top" id="header"></div>

<div class="content center" id="content"></div>

</div>


<script type="text/javascript">

$(document).ready(function()

{

$.ajax(

{

url:'./pagelet/login.html',

success:function(data)

{

$('#result').append(data);

}

})

});

</script>

<div id="result">blah blah</div>

</body>

</html> 


[링크 : https://opentutorials.org/course/1375/6851]



append로 해도 내용이 없으면 티가 안나는데

내용이 하나라도 있으면 append 답게, 그 이후에 내용이 추가된다.

empty()하거나 html()로 그냥 갈아 치워버리는 것도 방법이 될 듯.


[링크 : https://stackoverflow.com/questions/1675215/ajax-replace-instead-of-append]



위의 예제에서 json까진 해야지 ajax 쓸만해질 듯..


+

ajax 함수에서 사용되는 변수(?)들 이름

type이나 url 이런게 일종의 식별자니까.. 알아두면 작업이 용이할 듯

[링크 : https://www.w3schools.com/jquery/ajax_ajax.asp]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

html5 video timestamp  (0) 2018.09.11
html내 <script>의 올바른 위치(?)  (0) 2018.09.04
jquery 복수 속성 선택하기  (0) 2018.08.30
jqeury 예제 그리고 자바스크립트 익명함수  (0) 2017.06.10
javascript toString() 진법변환  (0) 2017.05.25
Posted by 구차니
Programming/javascript & HTML2018. 8. 30. 16:25

jquery 복수 속성 선택하기

먼가 말이 이상한데..

일단 특정 엘리먼트에서 특정 어트리뷰트를 골라서

선택되는 양을 줄이거나, 특정 노드 하위만을 선별적으로 고르고 싶을때 사용


jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )

attributeFilter1: An attribute filter.

attributeFilter2: Another attribute filter, reducing the selection even more

attributeFilterN: As many more attribute filters as necessary 

[링크 : https://api.jquery.com/multiple-attribute-selector/]


깔끔한 코드는 아니지만.. tab 구현하기 위해 작성한 녀석

div 태그 하위의 parent_id로 시작하는 녀석을 찾아서 class 값을 변경하기 위해 다중 속성 선택자를 사용함

$(document).ready(function(){

$('ul.tabs li').click(function(){

var tab_id = $(this).attr('id');

var parent_id = $(this).parent().attr('id');


$("li[id^="+parent_id+"]").removeClass("sel unsel");

$("li[id^="+parent_id+"]").addClass("unsel");

$(this).removeClass("unsel");

$(this).addClass("sel");

$("div[id^="+parent_id+"]").removeClass("disp non-disp");

$("div[id^="+parent_id+"]").addClass("non-disp");

$("#"+tab_id+"-view").removeClass("non-disp");

$("#"+tab_id+"-view").addClass("disp");

})

}) 



저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

html내 <script>의 올바른 위치(?)  (0) 2018.09.04
jquey ajax 테스트  (4) 2018.09.03
jqeury 예제 그리고 자바스크립트 익명함수  (0) 2017.06.10
javascript toString() 진법변환  (0) 2017.05.25
div slide 애니메이션  (0) 2017.01.14
Posted by 구차니
Programming/javascript & HTML2017. 6. 10. 14:48

jqeury 예제 그리고 자바스크립트 익명함수

이름없는 함수를 이용해서 자바스크립트를 바로 실행이 가능한데

이걸 이용해서 jquery를 실행하고

jquery에서는 특정 class의 내용을 비워버린다.


<script type="text/javascript">

$(function(){

  $('.hello').empty();

}); 


[링크 : http://www.everdevel.com/kr/jquery/val_empty_remove.php]

[링크 : http://www.nextree.co.kr/p4150/]



+

구현해보는데 깔끔한건지 모르겠으나..

대충 아래같이 구현해봄

<html>

<head>

<script src="./jquery-3.1.1.min.js"></script>

</head>

<?php

        include('./func_db.php');


        if( isset($_POST['id']))

        {

                $db = db_conn();

                $ret = login($db, $_POST['id'], $_POST['pw']);

                if($ret == 1)

                {

                        echo "

<script>

$(function(){

        $('.login_form').empty();

        $('.login_form').append('<input type=submit value=logout>');

})();

</script>";

                }

        }


?>


<body>

<form method="post" action="login_form.php">

        <fieldset style="width: 200px;">

                <legend>login</legend>

                <div class="login_form">

                        <p>

                                id :&nbsp;

                                <input type="text" name="id">

                        </p>

                        <p>

                                pw :&nbsp;

                                <input type="password" name="pw">

                        </p>

                        <p>

                                <input type="submit" value="login">

                        </p>

                </div>

        </fieldset>

</form>

</body>

</html> 


'Programming > javascript & HTML' 카테고리의 다른 글

jquey ajax 테스트  (4) 2018.09.03
jquery 복수 속성 선택하기  (0) 2018.08.30
javascript toString() 진법변환  (0) 2017.05.25
div slide 애니메이션  (0) 2017.01.14
div margin: 0 -200px 0 auto  (0) 2016.01.21
Posted by 구차니
Programming/javascript & HTML2017. 5. 25. 16:14

javascript toString() 진법변환

c에서 toString()이랑은 다르구만? (응?)



Syntax

number.toString(radix)

Parameter Values

ParameterDescription
radixOptional. Which base to use for representing a numeric value. Must be an integer between 2 and 36.
  • 2 - The number will show as a binary value
  • 8 - The number will show as an octal value
  • 16 - The number will show as an hexadecimal value

[링크 : https://www.w3schools.com/jsref/jsref_tostring_number.asp]

[링크 : http://mwultong.blogspot.com/2007/04/16-hex-2-10-javascript.html]

'Programming > javascript & HTML' 카테고리의 다른 글

jquery 복수 속성 선택하기  (0) 2018.08.30
jqeury 예제 그리고 자바스크립트 익명함수  (0) 2017.06.10
div slide 애니메이션  (0) 2017.01.14
div margin: 0 -200px 0 auto  (0) 2016.01.21
semantic element / HTML5  (0) 2016.01.21
Posted by 구차니
Programming/javascript & HTML2017. 1. 14. 10:25

div slide 애니메이션

많이 보이던 반응형의 트렌드..

자동으로 재배치 되면서 이쁘게 옮겨지는 스크립트


[링크 : http://dkphoenix.tistory.com/entry/JS-브라우저의-크기에-맞게-레이아웃을-애니메이션으로-변경하는-스크립트-Sliding-Resizable-Grid]

[링크 : http://www.zackgrossbart.com/slidegrid/]

[링크 : http://www.zackgrossbart.com/hackito/slidegrid/]

'Programming > javascript & HTML' 카테고리의 다른 글

jqeury 예제 그리고 자바스크립트 익명함수  (0) 2017.06.10
javascript toString() 진법변환  (0) 2017.05.25
div margin: 0 -200px 0 auto  (0) 2016.01.21
semantic element / HTML5  (0) 2016.01.21
HTML form 은 중첩불가..  (0) 2016.01.14
Posted by 구차니

티스토리툴바