웹 프로그래밍/JavaScript (58) 썸네일형 리스트형 [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(계산기) input 태그의 type 속성을 선택자로 쓰려면 어떻게 할까? 아래처럼 하면 된다. input[type='button']{ /* padding : 0 20px; margin : 0px 5px; */ } 다른 버전 다른 버전 : this를 응용해보자. this를 사용하면, 해당 태그 자체를 넘길 수 있다. 애초에 this.value 넘기면 된다! [JS] 작성한 함수가 제대로 작동하지 않는 문제 (원인 : 자스크립트 내에 이미 있는 함수일 경우) 상황 : 계산기 기능을 구현하기 위해 코딩을 하고 있었다. 그런데, 스크립트에서 선언한 write()라는 함수가 제대로 작동하지 않았다. text 타입에 문자열을 이어붙이는 역할을 하는 함수인데, 자꾸만 화면에 해당하는 숫자만 출력되었다. 원인 : 알고봤더니, onclick ="write(블라블라)" 라고 작성하면, document.write(블라블라) 가 실행되었다. 나와 같은 문제를 기존에 겪은 분이 있어서 수월하게 이해됐다. 앞으로, 함수가 제대로 작동하지 않으면 '자바스크립트 내에서 이미 사용하고 있는 함수명' 인지 조사해보자. 해결 : wirte() 함수를 add 라는 함수명으로 바꿨더니 잘 실행됐다. + 추가사항 : clear 이란 함수도 자바스크립트 내에 이미 존재하는 함수다. 따라서 res.. [JS] 이벤트 버블링 적용 및 제한 이벤트 버블링 이벤트를 실행하면, 상위에 있는 같은 이벤트를 순차적으로 실행함 Hello 이벤트 버블링 제한하기 클릭했을 때의 이벤트(MouseEvent)를 e로 받는다. 매개변수명은 내 멋대로 정하면 됨. MouseEvent를 항상 날리고 있었는데, 우리가 사용하지 않은 것 뿐임. arguments[0] 으로 활용해도 같은 결과를 얻을 수 있다. Hello Hello [JS] 버튼을 눌렀을 때 alert 하기 [JS] 스크립트에 css 적용하기 아이디 PASSWORD [JS] 태그 가져오기(1) getElementById('id') VS getElementByTagName('td') ID는 문서 내 하나이기 때문에 딱 하나의 값만 가져온다. window.onload = function() { let idTag = document.getElementById('id') idTag.parentNode.removeChild(idTag) // idTag.remove() ==> explore에서는 작동하지 않음. } 태그는 여러개일 수 있다. 따라서 배열로 가져온다. window.onload = function() { var tags = document.getElementsByTagName('td') console.log(tags) tags[0].innerHTML = '아이디' // let nodes = document.querySelector('td') // 왜 td 태그 중 첫번째 요소만 .. [JS] 태그 내용 제거하기(parentNode.removeChild) 태그 내용 삭제하기 : 태그 자체가 삭제되지는 않는 것 같다. 아래의 예시를 보면 태그는 살아있다. parentNode.removeChild를 사용하면 된다. remove라는 것도 있는데, 이것은 익스플로러에서는 작동하지 않는다. 따라서 removeChild를 사용하면 됨 아이디 PASSWORD [JS] 태그 생성, 태그 내용 추가, 태그 제거, 속성&속성값 추가 태그 생성하기 document.createElement('태그종류') 텍스트 노드 생성하기 document.createTextNode('텍스트 내용') 태그 내에 텍스트 노드 내용 넣기 document.body.appendChild(~) 속성 추가하기 (1) '.' 활용 (2) setAttrbute Hello 이전 1 2 3 4 5 6 ··· 8 다음
