GitHub

https://github.com/Backcoder-June

BackCoder 기록 그리고 숙달

Back to the JavaScript 25

JS 잡기술들

[ e.stopPropagation(); ] => 자식 태그에 이벤트 시도 시, 자기것만 터트리고 부모태그로 올라가며 찾는 propagation 을 stop 시키는 것 [ 버블링의 활용 / 이벤트 위임 ] - 반대로, stopPropagation() 하지않고, 자식 이벤트 발생 시 => 부모 이벤트를 연계해서 발생시키는 식으로 유용하게 활용 - 버블링 사용시 주의 => 부모한테 걸어두고, 부모 이벤트를 발생시키면 => 자식들 모두에게 이벤트가 발생해버림 => 이벤트 발생 타겟을 제한해야 함 if (!e.target.matches('#fruits > li')) { return; } => 이벤트가 발생한 target이 부모의 자식 태그가 아니라면 => return 시켜서 막기 [ 키보드 이벤트 활용 ] $i..

[Model/Param => ${script} ] / [HTML요소 => $(script) ] 값 받아쓰기

[ Model => HTML ] - Model 값 HTML body 부에서 사용하기 (자바) model.addAttribute("key", value ); return "뷰단"; (JSP) => VIEW 단의 HTML 에서는 (1) (2) ${key} 자바로 받거나, EL 로 받아서 사용한다. [ Model => ] - 마찬가지로 script 단에서 Model 값을 받아 사용하기 위해서는 (1) alert( ' ' ); (2) alert( ' ${ getit } ' ); (1) 자바 (2) EL 로 받아서 사용하면 되는데, *주의할점은 JavaScript 에는 엄연히 data Type 이 존재하므로, => ' ' 따옴표 처리를 해서 String 임을 명시해줘야 한다. ( 관련 Error : ~ is no..

[jquery] 에니메이션 효과 animate/hide/show/fade/slide/delay | setInterval

[ jquery 에니메이션 효과 ] hide / show / fadeIn / fadeOut / slideDown / slideUp delay / animate $("태그").효과( 1/1000sec ); : 태그에 밀리초 동안 효과주기 $("h1:eq(0)").hide(); : 해당태그를 숨긴다 $("h1:eq(0)").show(); : 해당태그를 나타나게한다. => 조건 걸고, 어떨 땐 나타나고, 어떨 땐 숨기는 식으로 동적으로 사용 할 수 있다. - 시간은 주지 않고 사용 $("h1:eq(1)").fadeOut(3000); : 3초에 걸쳐서 사라짐 $("h1:eq(1)").fadeIn(3000); : 3초에 걸쳐서 나타남 $("h1:eq(2)").slideUp(3000); : 3초에 걸쳐서 윗 라인으..

[jquery] EventListener => on/off

[ 이벤트 처리 EventListener 방식 => jquery 버전 ] : on / off function f1 ( ) { ~ } document.querySelector("input").addEventListener("click", f1 ,false); $("input:button").on("click", f1 ); : 버튼input 태그를 클릭하면 f1 함수 실행 하겠다. ( $("input:button").click(f1); 이 문법도 된다. 이렇게도 된다. 편의에 따라 사용. ) = Listener 하고 같음 $("h1#first").on("click", f1); $("h1#first").on("click", f2); : 클릭하면 f1 함수 ..

[jquery] 전용 텍스트 : html()/ text() / append

$(" 태그 ") : 이렇게 불러온 태그는 " jquery 전용 객체" 다. => 여기에는 jquery 전용 용어들만 쓸 수 있다. 즉, 여기다가 직접 value, innerHTML , textContent 같은 DOM용 용어는 못쓴다. [ innerHTML => html ] DOM document.querySelector("#contents").innerHTML = ""; => jquery $('#contents').html(""); = 안하고 ( ) 괄호에 내용을넣어주는 방식 get해서 쓸 때는 alert($('#contents').html( )); - html( ) 괄호까지 써주는게 innerHTML 값 의미. SET 할때, 원래 내용이 있으면 지워지고 새로 set 되는 것. => 이걸 원래 내용 ..

[jquery] attr : 태그속성 SET / GET - each 반복문 / remove /

1. attr 로 하나하나씩 속성주기 $(태그). attr ( A, B ) : 가져온 태그의 A속성에 B 를 넣어라 ( SET ) $("img:first").attr ("src","blackcoffee.gif"); : 가져온 img 태그의 src 속성에 저 속성값을 넣어라. : src = "balckcoffee.gif" 사진 가져와짐 $("img").attr("width", "100"); $("img").attr("height", "100"); $("img:first").attr("alt","쥬스 사진입니다"); 2. 객체형태로 만들어서 한 방에 set 할 수도 있다. $("img:last").attr ( { src : "blackcoffee.gif", alt : "커피사진입니다.", width : "2..

[jquery] 기본사용법. CSS 속성 주기.

[ 기본사용 법 ] 1. jquery 소환 2. onload 선언 [ 장점 ] : 간편한 문법을 제공한다. 쉬운 DOM 처리 쉬운 이벤트 처리 쉬운 CSS 처리 쉬운 Ajax 처리 [ 단점 ] - 한 때 정말 잘 나갔는데, HTML 이 부활하고, 뒷 편으로 물러나는 중이다. - 아직은 쓰이는, 쓰였던 코드들이 많은 시점이다. - 앞으로 몇 년후에도 쓰이고 있을지는 미정 [ 1. CSS Selector ] $("적용대상").css( "css속성", "속성값" ); : 적용대상을 찾아서 css 속성을 속성값으로 SET 하겠다. [ # 아이디 ] $("#second").css("color", "pink"); : second 란 아이디를 가진 태그를 찾아서, color 속성을 pink 로 se..

키보드 이벤트 / e.key / regex 사용 - match / HTML속성 pattern, required / readonly

[ Event 종류 ] 마우스 : click / dbclick / mousover / mouseout 키보드 : keydown누른다 / keypress누른상태 / keyup손을뗀다 => 한글자 입력하는데 이 3가지 이벤트가 발생하는것으로 구분해두고, 각각에 이벤트 걸 수 있다. submit : 애는 따로 submit 이벤트라고 부른다. 포커스 : focus(버튼등에 외곽선으로 표시) document.querySelector("textarea").focus( ); - textarea 태그에 focus 이벤트를 걸어두면, 실행됬을 때 해당 영역 외곽선 표시 + 바로 입력할 수 있는 focus상태로 만들어줌. ( 다시입력 버튼을 누르면 => 커서위치를 textarea 로 자동으로 보내줘서 사용자 입장에서 바로..

function(e)이벤트 객체 / 이벤트 버블링 - stopPropagation / 내장 이벤트 - preventDefault /

[ 이벤트 객체 ] document.querySelector(" ").onclick = function( e ){ }; 함수의 매개변수에 저런식으로 ( e, ev, eve ) 넣어두면 이벤트의 결과값이 저 매개변수로 들어감 [ = 이벤트 객체 ] document.querySelector(" ").onclick = function( e ){ 클릭 좌표 : e.pageX, e.pageY ( 클릭한 x,y좌표 정보 ) 클릭 태그명 : e.target.tagName 클릭 태그속성 : : e.target.type / e.taget.value / e.target : 이벤트가 발생했던 태그 }; => 이런식으로 다양한 정보를 제공해준다 특히나 e.target 은 자주쓰인다! [ 이벤트 버블링 ] 링크 - 링크 글씨 ..