.log('FE')

2018/12/31 - [JavaScript] - [saimpleExample] JS Tab Menu 이전의 탭메뉴는 정상적으로 동작은 하는데 추가적으로 다른 탭메뉴를 만들려고하면 중복되는 코드가 발생하고 코드라인도 길어지게된다. 기존의 탭메뉴를 그대로 복사해 내부의 class 명을 모두 변경해줘야하기때문에 유지보수도 어렵고 가독성도 떨어지는 스크립트가 되어버린다. 그래서 기존의 탭메뉴를 활용하여 재활용성이 높은 클래스형태로 만들려고한다, 그중에서도 메서드를 공유하게되는 Prototype 방식을 활용한다. JavaScript 에서는 별도의 클래스 타입이 없기때문에(아직은..) 함수형태로 클래스를 만든다. 이때 함수명은 첫글자부터 대문자를 사용하여 클래스로 사용되는 함수임을 명시해준다. 클래스로지정한 함수..

1. JS 만을 활용한 TAB 메뉴 구성 2. 탭 메뉴 클릭시 컨텐츠 내용 변경 3. 탭 메뉴 클릭시 메뉴의 디자인 변경 HTML Home Resume Self introduvtion Portfolio Connect 안녕하세요 CodeReading 소개에 오신것을 환영합니다. 이력서 자기소개 포트폴리오 연락처 CSS * { margin:0; padding:0; } .tab { width:100%; height:40px; background: #eeeeee; display: flex; justify-content: center; align-items:center; list-style:none; } .tab li { margin:0 1rem; cursor:pointer; padding:1rem 2rem; }..

1. 전화번호중 마지막 4자리는 숨김처리 2. 11자리 넘어가면 더이상 입력 안되도록 3. 출력도 입력된 전화번호만 나오도록 * 실제로 써먹을 용도가 아닙니다 순수하게 연습용입니다. * 실제 처리할때는 정규표현식을 사용합니다. * 숫자는 input 속성의 maxlength 가 안먹힙니다. html css html, body { background: #333333; height:100%; } .wrap { display:flex; justify-content:center; height:100%; align-items:center; flex-direction: column; } .wrap form .number { border:1px solid #cccccc; border-radius:5px; font-si..

* null : 자바스크립트의 원시 값 중 하나로 어떤 값이 의.도.적 으로 비어있음을 표현합니다 - MDN function getVowels(str) { var m = str.match(/[aeiou]/gi); if (m === null) { return 0; } return m.length; } console.log(getVowels('sky')); // expected output: 0 - getVowels() 함수는 1개의 인자를 받는다. - 블록스코프 내부에 m 이라는 변수에 str.match() 를 통해 정규현식으로 동일한 문자가 있는지 확인하고 그 값을 저장한다. - if 문으로 m 이라는 변수가 비어있으면 0을 리턴하고 - 그렇지않으면 m 에 저장된 배열의 갯수를 출력한다. - sky 문자..