728x90 반응형 study_front/javascript7 [javascript] 화살표 함수 기본 내용참조는 코딩에브리바디의 글. 1. 화살표 함수 와 일반 함수let addFunction = function(a,b) { retrun a+b;}; 는 화살표 함수let addFunction = (a,b) => { return a+b };와 같다.이 때, 함수의 내용이 한 줄 일 경우(단일 표현식)인 경우, 중괄호 {} 와 return 키워드를 생략할 수 있다. 즉, 아래 함수들은 같은 동작을 하는 함수이다.let addFunction = (a,b) => { return a+b };let addFunction = (a,b) => a+b; 2. 화살표 함수의 인수가 하나일 땐 소괄호()를 생략할 수 있다.아래 함수들은 같은 작동을 하는 함수이다.let sayHi = (name) => alert("안녕하세.. 2024. 9. 24. [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. 이전 1 다음 728x90 반응형
