본문 바로가기
SMALL

JavaScript135

Javascript) 정규표현식(3) - [ ](숫자,영문,한글 범위), 단축문자(\d, \w, \s, \D, \W, \S), groung/or, escaping 처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. [ ] - 하나의 문자에 대한 값 목록(순서 상관없음), 범위(ascii code(유니코드)상 작은 순-큰 순 -[^abc]처럼 [ ] 안에 사용된 ^는 반전을 의미 HTML 코드 [] Javascript 코드 숫자 범위 const SUBSTITUETE = "$&"; btn6.onclick = () => { const str = "Javascript jQuery Ajax 12345 안녕 ㄱㄴㄷ ㅏㅔㅣㅗㅜ"; area6.innerHTML = `${str.replace(/[0123456789]/g, SUBSTITUETE)} `; area6.innerHTML += `${str.replace(/[.. 2022. 5. 31.
Javascript) 정규표현식(2) - flag문자(g,i,m), Anchor(^, $), 임의의 한글자 표현(.) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. flag 문자 - 정규표현식 옵션 HTML 코드 flag Javascript 코드 flag문자를 주지 않았을 때 const SUBSTITUETE = "$&"; btn3.onclick = (e) => { const str = "Javascript jQuery Ajax Sass"; area3.innerHTML = `${str.replace(/a/, SUBSTITUETE)} `; }; /a/ 조건에 맞는 첫 매칭만 처리된 것을 확인할 수 있습니다. g (global) - 전역비교수행 - 여러 건 매칭을 처리 (g 생략 시 첫 매칭만 처리) const SUBSTITUETE = "$&"; btn3... 2022. 5. 31.
Javascript) 정규표현식(1) - 객체 생성 방법, 정규식 메소드(test,exec), 문자열 메소드(search, replace, split, match), 대체문자 ($&, $`,$') 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 정규표현식이란? (Regular Expression) - 특정 규칙을 가진 문자열 집합에 대한 표현식 - 유효성 검사, 검색, 문자열 대체에 유용 - 언어 독립적 - 간결하게 복잡한 조건을 검사 HTML 코드 정규표현식 객체 Javascript 코드 정규표현식 객체 생성 방법 숫자 포함 여부 검사용 정규표현식 btn1.addEventListener('click', (e) => { const regexp1 = /[0-9]/gi; const regexp2 = new RegExp(/[0-9]/gi); const regexp3 = new RegExp("/[0-9]/", "gi"); console... 2022. 5. 31.
Javascript) 이벤트 전파, Trigger Event 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 이벤트 전파 (Event Propagation) - 이벤트는 전파됨 - bubbling : 자식 요소에서 부모 요소로 전파 (기본속성) HTML 코드 CSS 코드 Javascript 코드 document.body.addEventListener('click', (e) => { console.log('body 클릭!', e.target); }); document.querySelector('#bubble1').addEventListener('click', (e) => { console.log('#bubble1 클릭!', e.target); }); document.querySelector('#bu.. 2022. 5. 30.
Javascript) keyEvent(keydown, keypress, keyup), FocusEvent(focus, blur), submitEvent 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. keyEvent HTML 코드 KeyEvent | FocusEvent Javascript 코드 keydown message.addEventListener('keydown', (e) => { console.log('keydown'); console.log(e); }); keypress - 기능키 (ctrl, shift...) / 한글일 때는 발생하지 않음 message.addEventListener('keypress', (e) => { console.log('keypress'); console.log(e); }); 한글과 기능키가 입력될 때는 발생하지 않습니다. keyup message.ad.. 2022. 5. 30.
Javascript) 이벤트 객체, 이벤트 발생 객체, this 용법(7) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 이벤트 객체 - 이벤트 관련 정보를 가진 객체 - 핸들러의 매개인자로 전달 이벤트 발생 객체 - 이벤트 객체의 target 속성 - 이벤트 핸들러 안의 this 속성 HTML 코드 이벤트객체 | 이벤트발생객체 Javascript 코드 this 용법 7) 이벤트 핸들러 안의 this는 이벤트 발생 객체(일반함수기준) btn5.addEventListener('click', function(event) { console.log(event); console.log(this); console.log(event.target); }); 이벤트 객체의 target 속성과 this 속성이 같은 것을 확인할.. 2022. 5. 30.
LIST

티스토리툴바