728x90 반응형 study_front8 [javascript] input 태그 엔터키 새로고침 현상 input 태그 엔터키 새로고침 현상이슈 ) 태그에 포커스가 있을 때, 엔터키를 누르면 페이지가 새로고침 되는 현상 원인 ) 태그 내부에 가 하나밖에 없다면, 엔터키 눌렀을 때 자동으로 submit 처리됨. 해결 방법 3가지 (출처 - 구글링)1. form 태그의 onsubmit 속성값 이용, return false; 처리 +) ajax 통신이 아닌 form submit 이 필요한 경우 $("#searchForm").prop("onsubmit", true);$("#searchForm").submit(); 2. 의미없는 input 박스 추가text type의 input 태그가 하나밖에 없어서 그런 것이므로, style=display:none; 인 인풋을 추가해준다. 제일 쉬운 방법 같지만 뭔가 야매스.. 2024. 6. 12. [javascript] 이벤트 캡처링과 버블링 (캡쳐링과 버블링이 발생하는 이유?) 이벤트 캡처링과 버블링(캡쳐링과 버블링이 발생하는 이유?) 이벤트 캡처링과 버블링에 대해 구글링해보고 내 입맛대로 이해한 내용을 정리했다. 1. 이벤트 캡쳐링과 버블링이 발생하는 이유 . 브라우저는 이벤트를 감지한다. 이벤트가 발생하면, 발생한 이벤트의 정보를 가지고 있는 event 객체를 생성한다. event 객체는 무조건 이벤트가 발생한 요소에 전달해야 한다. event 객체에는 많은 정보들이 있지만 그 중에서도, event.type = 발생한 이벤트의 타입 event.target = 이벤트가 발생한 위치의 요소 로 예를 들어보자면 (1) click했다. click event 객체가 만들어진다. event.type = "click" 이다. (2) document에서 가장 최상위 요소에서 click 이.. 2024. 4. 23. [javascript] event.preventDefault() 1. 사용하는 경우 페이지 이동을 하는 기본동작을 빼주어야 할 때 사용함. 우리가 보통 화면의 버튼에 이벤트를 걸기 위해서는 addEventListener 함수를 사용한다. 요소.addEventListener("이벤트", 함수명); 이벤트 중에서도 submit 이벤트는 form 내용을 제출하는 이벤트로, submit을 하게되면 action로 지정된 url로 이동하거나 url이 없는 경우에는 새로고침이 된다. ... 페이지 내 구조상, 여러 개의 form이 있고 각자 submit을 사용해야 할 필요가 있을 때 ! 페이지 이동 없이 input 내용을 submit하여 데이터를 주고 받을 수 있는 ajax 기능을 사용하게 된다. 다만 ajax는 제이쿼리에 있는 기능이며, vanilla script 로 구현하기 .. 2024. 4. 19. [javascript] classList 로 반환되는 DOMTokenList 1. DOMTokenList 의 정의 DOMTokenList The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList or HTMLLinkElement.relList, and many others. A DOMTokenList is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive. ( 해석내용 ) DOMTokenList 인터페이스는 space를 기준으로 구분되어지는 토큰의 set이다. Element.classList 또는 HTMLLink.. 2024. 4. 3. [javascript] 랜덤 로또 번호 뽑기 랜덤으로 로또번호 뽑기 만들기 - document.querySelector(cs선택자) - 요소.addEventListener("click", function) 결과물 index.html 로또번호 뽑기 app.js function getLottoNumber(){ // 숫자 6개 + 추가번호 1개 // 1~45 let html = ""; for(let i = 1; i 2024. 4. 2. 자바스크립트 객체 상속 (feat. [[Prototype]] 과 __proto__) 자바스크립트 객체 상속 (feat. [[Prototype]] 과 __proto__) 자바스크립트 객체에서도 상속관계처럼 다른 객체를 사용할 수 있다. 기본적으로 자바스크립트 객체는 숨김 프로퍼티인 [[Prototype]] 를 가진다. 그리고 [[Prototype]] 프로퍼티의 getter/setter 함수도 존재한다. 숨김 프로퍼티인 [[prototype]] 는 다른 객체로 설정해줄 수 있다. 무조건 객체타입만 가능하며, 객체 이외의 타입인 경우 설정이 무시된다. 이 Prototype 프로퍼티를, 상속관계처럼 사용할 수 있다. let animal = { walk() { // 또는 walk : function() { ... } if (!this.isSleeping) { alert(`동물이 걸어갑니다.`);.. 2024. 2. 28. <a> 태그나 <button>이 아니어도 클릭 가능한 것처럼 커서 보여주기 a태그나 button 이 아니어도 클릭 가능한 것처럼 커서 보여주기 style 에 cursor:pointer 삽입 문의유형 제목 작성자 1 title1 user1 2 title2 user1 이렇게 하고 onclick 이벤트를 걸어 상세화면으로 이동 가능하도록 구현했다. 2024. 1. 30. type script 시작하기 (VSCode와 Node.js) type script 환경 세팅 https://opentutorials.org/course/5080/32299 TypeScript 실습환경 - 내 컴퓨터에서 실행하기 - 생활코딩 Nodejs 설치 Typescript를 사용하기 전에, 먼저 Node.js를 설치해야 합니다. LTS(Long Term Support) 버전을 설치하세요. https://nodejs.org/ TypeScript 설치 Node.js를 설치한 후, 다음 명령어로 Typescript를 설치합니다. opentutorials.org 생활코딩 참조! 세팅 진행 순서 VS Code 설치 node.js 설치 npm 명령어 > typescript 설치 typescript 파일 생성해보기 1. VS Code 설치 먼저 코드를 실행할 환경으로, V.. 2023. 11. 4. 이전 1 다음 728x90 반응형
