개발/html, css, js

[HTML, JavaScript] 정규표현식

정규표현식 정규표현식은 문자검색과 교체에 사용되는 패턴을 제공한다. 자바스크립트에서 RegExp 객체의 문자 함수를 조합해 정규표현식을 사용할 수 있다. let reg = new RegExp('안녕','i'); console.log(reg) 출력 값 : /안녕/i RegExp는 두개의 매개변수가 들어간다. => RegExp( 찾는 문자, 플래그) "/"는 자바스크립트에서 정규표현식을 생성하고 있다는 것을 알려준다. 문자열에서 따옴표를 쓰는것과 같다. 정규표현식을 사용하는 이유 : 이메일 형식인지 체크할 때, 아이디 조건 설정할 때 1. 플래그의 종류 [1] i : 대소문자 구분없이 구별할 수 있다. [2] g : 패턴과 일치하는 모든 것을 찾는다. g가 없으면 일치하는 것에서 첫번째 것만 가져온다. [3..

[JS, HTML, CSS] 이벤트

시작 // 이벤트 함수의 타겟 // 클릭이벤트 window.onclick = function(event){ //event.target은 이벤트가 발생한 요소 //event 태그의 이벤트가 담겨있다. console.log(event.target); event.target; //클래스가 무엇인지로 판단을 해서 이벤트를 적용시킬수도 있다. if(event.target.classList.contains("_target")){ console.log("있어") } //클래스가 무엇인지 가져와서 조건문으로 이벤트를 설정해 줄수 있다. let _class = event.target.className; switch(_class){ case "_target": break; case : break; default: brea..

[HTML, CSS] 이벤트리스너

//이벤트 리스너 //이벤트 리스너 제거 let el = document.createElement("div"); //el에 test클래스 추가 //클래스 여러개 추가 el.className = "test test2 test3"; //el에 id 추가 el.id = "test"; //익명함수를 변수에 담아 놓았다 let onevent = function(){ console.log("난 이벤트") el.removeEventListener("click",onevent); } //el에 이벤트를 추가하는데 이벤트 타입은 click이고 두번째 매개변수 함수는 //onevent 변수에 담긴 익명함수다. el.addEventListener("click",onevent); //removeEventListener 이벤트..

[HTML, JavaScript] 가위바위보, 일정 캘린더 만들기

1. 가위바위보 [1] HTML 주먹 가위 보 게임 시작하기 [2] css body{ height: 100vh; } .background { background-color: blanchedalmond; width: 100%; height: 50%; position: absolute; } #gameStart { text-align: center; width: 200px; height: 50px; position: relative; top: 25%; left: 50%; transform: translate(-50%,-50%); } #leftround button{ width: 100px; height: 50px; position: relative; top: 200px; left: 150px; } [3] Ja..

[JavaScript] 각종 이벤트

1. UI 이벤트 console.log(document.querySelector(".tag")); //load - 페이지와 기타 요소들의 로딩이 완료됬을때 window.onload = function(){ //로드가 완료되고 console.log("페이지가 로드됨"); console.log(document.querySelector(".tag")); } // window.addEventListener("load", function(){ //여기도 로드가 완료되고 실행되는 함수 console.log("페이지가 로드됨2"); }) //어트리뷰트를 사용하거나 //window.addEventListener("이벤트의 타입, 함수")를 사용하여 // 이벤트 핸들러에도 load이벤트를 등록할수 있다. //resize..

[JavaScript, CSS] 콜백, 콜백지옥

1. 콜백함수 비동기 방식으로 작성된 함수를 동기 처리 하기 위해 주로 사용 비동기 처리를 기본적으로 하고 일부 구간에서 순차적인 처리가 필요할때 (API) 응답을 받은 다음에 처리해야 할때 (1)forEach //배열의 길이 만큼 돈다 num.forEach(function(el,i){ console.log(el); console.log(i); }); [1] 함수 전달 (1) 함수의 이름만 전달하는 방법 함수를 선언한 뒤에 함수 타입 파라미터를 맨 마지막으로 하나더 선언해준다. function myFun(test,callBack){ //매개변수로 받은 text 보여줌 console.log(test); //매개변수로 받은 콜백함수 사용 callBack(); } function callFun(){ conso..