본문 바로가기
728x90

전체 글

[javascript] 폼태그 연산 이벤트만들기 change,click 2022. 5. 19. See the Pen Untitled by 김수한 (@jmlbpwod-the-lessful) on CodePen. 1. 숫자를입력 후 연산을 클릭시 버튼에 걸어놓은 click 이벤트로 두개의 값이 더해진다. 2. 문자를 입력시 경고창이 나오도록 if문비교 if( Number(a) != isNaN ) isNaN은 if문으로 비교가 불가능하다. if(isNaN(a)) 로 입력해 true, false를 확인하도록 한다. // isNaN은 문자열이있어 연산이 불가능한 경우 나타난다. 3. 숫자를 입력후 수량을 선택시 select문에 걸어놓은 change 이벤트로 값이 곱해진다. 4. chackbox를 체크 후 버튼을 누르면 click 이벤트로 해당값들이 더해진다. 해당값들을 더할땐 checked의 true fa..
[javascript] 폼태그 선택자 2022. 5. 18. 안녕하세요 아이디 선택후 Enter 누를시 다음으로 이동 1. 폼과 요소 탐색하기 폼은 특수한 컬렉션인 document.forms의 구성원 1) 폼의 name값으로 접근 : document.forms.폼이름 ex > document.forms.myForm 2) 폼의 순서로 접근 : document.forms[0] -> 문서내의 첫번째 폼 3) 폼의 요소에 접근 form.elements.요소name값 ex> form.elements.userId -> input의 name이 userId인것을 선택 짧은 표기법 form.name 4) focus 지정하기 - autofocus 속성 추가 - node.focus() 메서드 선택하는방법이지만 document.querySelector 문으로도 선택이 가능하기에 있다는..
[javascript] 마우스 이동에따라 img 변경하기 2022. 5. 17. See the Pen Untitled by 김수한 (@jmlbpwod-the-lessful) on CodePen. 이미지를 넣어야해서 코드가 괴랄해 원레 스크립트 첨부.. let div = document.querySelector('div') let img = document.querySelector('div img') let pic = []; for(i=0; i < 5; i++){ pic[i] = `images/img_lights${i}.jpg` } // 이미지를 배열 pic에 넣어준다. div.addEventListener('mousemove',function(a){ // console.log(a.pageX) x와 y축값을 확인할 수 있다. let num = Math.round(a.pageX/175)..
[javascript] tansform , translateZ 값 변경하기 + 원근값 2022. 5. 17. See the Pen Untitled by 김수한 (@jmlbpwod-the-lessful) on CodePen. perspective: 2500px 원근값을 반드시줘야함 아니면 겹쳐있음.
[javascript] 부모,자식요소에 접근 실습 2022. 5. 17. See the Pen Untitled by 김수한 (@jmlbpwod-the-lessful) on CodePen.
[javascript] 스크롤 이벤트 실습 2022. 5. 16. See the Pen Untitled by 김수한 (@jmlbpwod-the-lessful) on CodePen. 잘안보이네.... ㅠㅠ
[javascript] 스크롤 이벤트 2022. 5. 16. See the Pen Untitled by 김수한 (@jmlbpwod-the-lessful) on CodePen.
[javascript] 홈페이지메뉴 이벤트창 만들기 2022. 5. 16. See the Pen Untitled by 김수한 (@jmlbpwod-the-lessful) on CodePen. 메뉴가 나올땐 클래스에 on을 추가하고 제거함 메뉴선택에선 forEach문으로 선택된 li에 on을 붙여줌.
728x90

티스토리툴바