JAVASCRIPT
-
[javascript] location.href 와 location.replace 차이점JAVASCRIPT 2021. 8. 22. 23:12
[출처] [자바스크립트] location.href 와 location.replace 의 차이점.|작성자 왕따짱 location.href location.replace 기능 새로운 페이지로 이동된다. 기존페이지를 새로운 페이지로 변경시킨다. 형태 속성 메서드 주소 히스토리 기록된다 기록되지 않는다. 사용예 location.href='abc.php' location.replace('abc.php') location.href는 객체의 속성이며, loaction.replace()는 메서드(함수)로 작동된다. href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른경우 이전 페이지로 이동이 가능하지만, replace는 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. hr..
-
event.target,input.file,FileAPI_210603(목)JAVASCRIPT 2021. 7. 25. 14:29
event.target , event.currentTarget 속성이란 이벤트 위임 이벤트 버블링과 이벤트 캡쳐링이란 특성을 적절히 사용하면 여러개의 요소가 있을 때 각각의 요소에 이벤트를 일일히 지정할 필요 없이 부모 요소에 이벤트를 하나만 주어 코드의 재사용성을 높이고 메모리를 절약할 수 있다. Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 위 코드의 동작을 확인하면 해당 item을 클릭했을 때 그 item의 id 값을 반환한다. 그러나 script 코드를 보면 이벤트는 각 item이 아닌 그 item들을 감싸고 있는 parent-list에 준 것을 확인할 수 있다. 이벤트 객체 이벤트 객체란 이벤트가 일어나는 요소 그 자체를 의미한다. 앞서 본 코드에서 addEv..
-
체인코드,jQuery: filter,addclass등 함수_210412(월)JAVASCRIPT 2021. 7. 22. 22:11
체인코드 1. ().().().(). 점으로 이어진 코드 2. 메서드를 가진 객체가 반환값으로, 이어지는 코드이다. filter() 로 선택하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 js ver. //DOM의 선택과 탐색 $(function() { // 1. filter(): //$(selector).filter(selector) = 첫번째: 태그에서 두번째: 지정한 속성을 가진 요소 선택 $('h3').filter(':even').css({ backgroundColor : 'black', color : 'white' }) $('h3:odd').css({ backgroundColor : 'bl..
-
jQuery:선택자,ready(),val(),setTimeout(),each()_210409(금)JAVASCRIPT 2021. 7. 22. 00:58
jQuery 선택자 1 2 3 4 5 $('h1').css('color','red');//태그선택자 $('#ss').css('color','red');//아이디선택자 $('.cc').css('color','red');//클래스선택자 *//전체선택자 cs window.onload = function(){} $(document).ready(function(){})//window.onload와 동일한 역할 $(function(){})//window.onload와 동일한 역할 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Insert title here $(document).ready(function() { document...
-
이벤트,예외처리_210409(금)JAVASCRIPT 2021. 7. 22. 00:48
EVENT onclick : 마우스 클릭 이벤트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Insert title here window.onload = function() { var header1 = document.getElementById('header1'); var header2 = document.getElementById('header2'); header1.onclick = function() { alert('header1을 클릭했습니다.'); }; function whenClick() { alert('header2를 클릭했습니다.'); } header2.onclick = ..
-
배열,객체,BOM,DOM_210408(목)JAVASCRIPT 2021. 7. 22. 00:43
배열 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126..
-
해지구달&랜덤영어날라다니기 실습_210409(금)JAVASCRIPT 2021. 7. 22. 00:40
실습 : 해 지구 달(삼각함수) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 Insert title here window.onload = function() { var sun = document.getElementById('sun'); var earth = document.getElementById('earth'); var moon = document.getElementById('moon'); // style속성변경 sun.style.position = 'absolute'; earth.st..
-
형변환,함수,객체,BOM_210407(수)JAVASCRIPT 2021. 7. 22. 00:36
형변환 String(),Number(),Boolean() 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 Insert title here //자료형변환함수 // 1. String() var num = 100; var str1 = String(num); var str2 = String(200); //숫자가 문자열 변환해 들어감 var str3 = String('문자열'); //자바는 에러걸리지만(같은 형인데 변환한다해서), 자바스크립트는 오류 안남 //document.write(..