Front-end/JavaScript
[JavaScript] DOM - 웹 요소 내용 수정하기 innerHTML
innerText, innerHTML 웹요소.innerHTML = '내용' : 해당 요소에 내용 변경 (innerText는 텍스트를 넣을 수 있고 innerHTML은 태그까지 넣을 수 있음!) 이미지 수정 이미지요소.src = '파일주소'
Front-end/JavaScript
Front-end/JavaScript
[JavaScript] DOM - 웹 요소 접근 getElement, querySelector
getElement 메소드 document.getElementById('') : 아이디 값과 일치하는 요소 선택 document.getElementsByClassName('') : 클래스 이름과 일치하는 모든 요소 선택 document.getElementsByTagName('') : 해당 태그 이름과 일치하는 모든 요소 선택 getElementsByName('') : name 속성과 일치하는 모든 요소 선택 querySelector 메소드 document.querySelector('') : 첫 번째로 일치하는 요소 선택 document.querySelectorAll('') : 일치하는 모든 요소 선택 배열로 저장이 되어 for문을 사용해주어야 함! 둘의 차이 getElement는 속성 값으로 요소 선택 ..
Front-end/JavaScript
[JavaScript] 이벤트 핸들러 사용법, 이벤트 종류
이벤트 사용법 3가지 1. HTML 태그에 함수 연결 2. 스크립트에서 함수 연결 요소.on이벤트명 = 함수; 3. 이벤트 리스너로 이벤트 처리 요소.addEventListener('이벤트', 함수) ( 이벤트 리스너의 값을 서버로 안보내게 하려면 e.preventDefault() ) 이벤트 종류 마우스 이벤트 -키보드 이벤트 keydown keypress keyup -문서 로딩 이벤트 -폼 이벤트
Front-end/JavaScript
[JavaScript] 함수 (익명 함수, 화살표 함수, 콜백 함수)
함수 function 함수명(매개변수){ 명령 } 함수명(인수) 매개변수의 초기값 설정 가능! 익명함수 ( function(매개변수){ 명령 } (인수)); 화살표 함수 let 함수명 = function(){ return 'hello'; } 를 화살표 함수로 바꾸면 let 함수명 = () => 'hello'; (호출할 때, 변수명() 괄호 넣어줘야 함!) 콜백 함수 : 다른 함수의 인수로 사용하는 함수 function display(){ alert('클릭했다'); } btn.addEventListener('click', display); ex) addEventListener함수의 인수로 콜백 함수 사용 ex) 화살표 함수로 콜백 함수 사용
