오브젝트 병합이다.

Json 형태의 데이터를 병합할수잇어서 좋은거같다.

 

let style

if(this.state.mouseEvent){

style = { backgroundColor: "lightgray" }

style = Object.assign(style, {fontSize : "20px"})

} else {

style = { backgroundColor: "white" }

}

return style

 

 

이런식으로 사용가능

 


저작자표시 (새창열림)

'오락기 > js' 카테고리의 다른 글

로컬 이미지 브라우저에 바로 표시 DataURI  (0) 2018.09.28
날찌비교  (0) 2018.09.28
nodelist event  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17



Html

 

<h3>로컬에 있는 이미지를 바로 브라우저에 표시</h3>

<img id="preview" src="" width="700" alt="로컬에 있는 이미지가 보여지는 영역">

<a id="download" download="thumbnail.jpg" target="_blank">

    <img id="thumbnail" src="" width="100" alt="썸네일영역 (클릭하면 다운로드 가능)">

</a>

<input type="file" id="getfile" accept="image/*">

 

 

 

 

Css

 

img {

    margin: 1em 0;

    display: block;

    background: rgb(240, 240, 240);

    border: 1px solid rgb(0,0,0);

}

 

Js

 

var file = document.querySelector('#getfile');

 

file.onchange = function () {

    var fileList = file.files ;

   

    // 읽기

    var reader = new FileReader();

    reader.readAsDataURL(fileList [0]);

 

    //로드 한 후

    reader.onload = function  () {

        //로컬 이미지를 보여주기

        document.querySelector('#preview').src = reader.result;

       

        //썸네일 이미지 생성

        var tempImage = new Image(); //drawImage 메서드에 넣기 위해 이미지 객체화

        tempImage.src = reader.result; //data-uri를 이미지 객체에 주입

        tempImage.onload = function() {

            //리사이즈를 위해 캔버스 객체 생성

            var canvas = document.createElement('canvas');

            var canvasContext = canvas.getContext("2d");

           

            //캔버스 크기 설정

            canvas.width = 100; //가로 100px

            canvas.height = 100; //세로 100px

           

            //이미지를 캔버스에 그리기

            canvasContext.drawImage(this, 0, 0, 100, 100);

            //캔버스에 그린 이미지를 다시 data-uri 형태로 변환

            var dataURI = canvas.toDataURL("image/jpeg");

           

            //썸네일 이미지 보여주기

            document.querySelector('#thumbnail').src = dataURI;

           

            //썸네일 이미지를 다운로드할 수 있도록 링크 설정

            document.querySelector('#download').href = dataURI;

        };

    };

};

 





저작자표시 (새창열림)

'오락기 > js' 카테고리의 다른 글

Object.assign()  (0) 2018.10.12
날찌비교  (0) 2018.09.28
nodelist event  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17

> , < , <=, >=같은 연산자 사용이 가능합니다.


==, !=, ===, !==같은 연산자를 쓰시려면 date.getTime()으로 시간으로비교 해야함



var d1 = new Date();
var d2 = new Date(d1);

console.log(d1 == d2);   // prints false (wrong!)
console.log(d1 === d2);  // prints false (wrong!)
console.log(d1 != d2);   // prints true  (wrong!)
console.log(d1 !== d2);  // prints true  (wrong!)
console.log(d1.getTime() === d2.getTime()); // prints true (correct)


저작자표시 (새창열림)

'오락기 > js' 카테고리의 다른 글

Object.assign()  (0) 2018.10.12
로컬 이미지 브라우저에 바로 표시 DataURI  (0) 2018.09.28
nodelist event  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17

Ex)

let el = document.querySelectorAll('.day')

NodeList.prototype.addEventListener = (event, func) => {

this.forEach((content, item) => {

content.addEventListener(event, func)

})

}

 

el.addEventListener("mouseover", (e) =>{

console.log(e , "오버")

})

el.addEventListener("mouseout", (e) =>{

 console.log(e, "아웃")

})


저작자표시 (새창열림)

'오락기 > js' 카테고리의 다른 글

로컬 이미지 브라우저에 바로 표시 DataURI  (0) 2018.09.28
날찌비교  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17
jQuery ajax  (0) 2017.04.19

Foreach보다 빠르다고해서 많이 이융중 

 

특징은 자체적으로 array타입을 리턴해줌 

 

List = [ 1 , 2, 3 , 4] 

 

List.map( (key ) => {  

Rreturn key >= 3  

}) 

 

아마도 결과는 

[ false , false , true  , true ,true ] 가 될것이다.  


{movies.map( movie=> { 

return <Movie title={movie.title} poster={movie.poster} ></Movie> 

})} 

{/* 위와 같은 문법은 다음과같다. 

<Movie title={moives[0].title} poster={moives[0].poster}/> 0~2까지 배열길이 만큼 돌려줌 이터레이터와 비슷한 개념일듯 */} 

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map 

 

 

 

 

 

 

 


저작자표시 (새창열림)

'오락기 > js' 카테고리의 다른 글

날찌비교  (0) 2018.09.28
nodelist event  (0) 2018.09.28
fetch 와 XMLHttpRequest방식  (0) 2018.08.17
jQuery ajax  (0) 2017.04.19
ajax + servlet  (0) 2017.04.19

XMLHttpRequest방식 

 

let sendAjax = (url , data) => { 

// alert(data); 

let email = {'email' : data} 

email = JSON.stringify(email) 

var xhr = new XMLHttpRequest(); 

xhr.open('POST' , url) 

xhr.setRequestHeader('Content-Type' , 'application/json') 

xhr.send(email) 

xhr.addEventListener('load' , () => { 

console.log(xhr.responseText) 

let result = JSON.parse(xhr.responseText) 

document.querySelector(".result").innerHTML = result.result ; 

}) 

} 

 

 

Fetch방식  

 

let fetchTest = (url , data) => { 

alert(data) 

let send = {'email' : data} 

send = JSON.stringify(send) 

console.log(send) 

fetch(url , { 

method : 'POST', 

body : send, 

headers : new Headers( {'Content-Type' : 'application/json' }), 

}).then( (res) => { 

if(res.status == 200 || res.status == 201){ 

res.json().then(json => { 

console.log(json) 

let result = json 

document.querySelector(".result").innerHTML = result.result ; 

}) 

}else{ 

console.error(res.statusText) 

} 

}).catch(err => console.error(err)) 

}  

 


저작자표시 (새창열림)

'오락기 > js' 카테고리의 다른 글

nodelist event  (0) 2018.09.28
Array map  (0) 2018.08.17
jQuery ajax  (0) 2017.04.19
ajax + servlet  (0) 2017.04.19
prevent jQuery evnet  (0) 2017.04.18
  • data
  • 서버로 데이터를 전송할 때 이 옵션을 사용한다. 
  • dataType
    서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
  • success
    성공했을 때 호출할 콜백을 지정한다.
    Function( PlainObject data, String textStatus, jqXHR jqXHR )
  • type
    데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.



http://api.jquery.com/category/ajax/



<p>time : <span id="time"></span></p>

<input type="button" id="execute" value="execute" />

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>

    $('#execute').click(function(){

        $.ajax({

            url:'./time.php',

            success:function(data){

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

            }

        })

    })

</script>





<p id="timezones"></p>

<input type="button" id="execute" value="execute" />

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>

    $('#execute').click(function(){

        $.ajax({

            url:'http://localhost:9081/crf/Service',

            dataType:'json',

            success:function(data){

                var str = '';

                for(var name in data){

                    str += '<li>'+data[name]+'</li>';

                }

                $('#timezones').html('<ul>'+str+'</ul>');

            }

        })

    })

</script>



'오락기 > js' 카테고리의 다른 글

Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17
ajax + servlet  (0) 2017.04.19
prevent jQuery evnet  (0) 2017.04.18
jQuery On evnet  (0) 2017.04.18

html


    <body>

<p>time : <span id="time"></span></p>

<input type="button" id="execute" value="execute" />

<script>

document.querySelector('input').addEventListener('click', function(event){

   var xhr = new XMLHttpRequest();

//    xhr.open('POST', './conn');

   xhr.open('POST', 'http://localhost:9080/crf/Service');


   xhr.onreadystatechange = function(){

       if(xhr.readyState === 4 && xhr.status === 200){ //4는 성공 200은 완료

           document.querySelector('#time').innerHTML = xhr.responseText; //id time에 innerHtml에 데이터를 넣는다.

       }

   }

    xhr.send(); 

}); 

</script> 

    </body>



servlet


PrintWriter out= null;

JsonObject obj = new JsonObject();

obj.addProperty("test", "timeTest");


response.setContentType("application/x-json; charset=UTF-8");

out= response.getWriter();

out.println(obj);

out.flush();



'오락기 > js' 카테고리의 다른 글

fetch 와 XMLHttpRequest방식  (0) 2018.08.17
jQuery ajax  (0) 2017.04.19
prevent jQuery evnet  (0) 2017.04.18
jQuery On evnet  (0) 2017.04.18
input evnet  (0) 2017.04.18
<input type="text" id="target"></textarea>
<input id="remove" type="button" value="remove" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var handler = function(e){
$('#status').text(e.type+Math.random());
};
$('#target').on('focus blur', handler)
$('#remove').on('click' , function(e){
$('#target').off('focus blur', handler);
console.log(32);
})
</script>


'오락기 > js' 카테고리의 다른 글

jQuery ajax  (0) 2017.04.19
ajax + servlet  (0) 2017.04.19
jQuery On evnet  (0) 2017.04.18
input evnet  (0) 2017.04.18
load event  (0) 2017.04.18
  • event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click")
  • selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함
  • data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함
  • handler : 이벤트 핸들러 함수


.on( events [, selector ] [, data ], handler )


<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('ul').on('click','a, li', function(event){
console.log(this.tagName);
})
</script>



late binding

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('body').on('click','a, li', function(event){
console.log(this.tagName);
})
</script>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>


다중 바인딩


<input type="text" id="target" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#target').on('focus blur', function(e){
$('#status').html(e.type);
})
</script>


<input type="text" id="target" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#target').on({
'focus' : function(e){
},
'blur' : function(e){
}
})
</script>



'오락기 > js' 카테고리의 다른 글

ajax + servlet  (0) 2017.04.19
prevent jQuery evnet  (0) 2017.04.18
input evnet  (0) 2017.04.18
load event  (0) 2017.04.18
form  (0) 2017.04.18

+ Recent posts

티스토리툴바