방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Javascript74 Javascript 간단한 알림 기능(Alert, alarm, toast) 핸드폰을 사용하면 간단한 알림메시지를 볼 수 있습니다. 이러한 기능을 Toast라고 불리는데(아이폰은 토스트라 불리우지 않을 수도 있습니다..ㅎ) 웹에서 간단하게 구현하기 위해 만들어 보았습니다. 구동모습은 아래와 같습니다. flex 속성을 부여하였기 때문에 브라우저 크기에 맞추어서 알아서 가운데로 이동하여 줍니다. 물..론 익스플로러 사용자라면 동작을 안할 수도 있습니다..ㅠ 위 내용에 사용된 소스코드 입니다. 딱히 어려운 코드는 아니므로 기능을 수정하시는 데 어렵지는 않을 것 같습니다. 굳이 부모 노드에서 자식 노드를 다시 생성하지 않아도 되는데.. 브라우저의 돔 접근을 최소화 하기 위해서는 조금 고민할 필요는 있겠습니다. 궁금한점이나 문의사항은 언제든지 연락주세요! 👻 2022. 4. 29. 'import' is only available in ES6 (use 'esversion: 6'). (W119) vs코드에서 간혹 만나는 경고문구 입니다. 개발하는 데 불편하므로 가급적 해결하고 넘어가는 것이 좋습니다. jsHint 에서 ES6문법이 적용되지 않아서 생긴 것이므로 아래처럼 간단한 방법으로 해결 가능 합니다. 1. 작업중인 root 폴더에서 .jshintrc 파일을 만들어 줍니다. 2. 키 값으로 esversion을 입력하고 값을 6으로 설정 해 줍니다. { "esversion": 6 } 궁금한점 또는 틀린부분 언제든 연락주세요!👻 2022. 3. 16. 브라우저 개발도구 이벤트 감지(javascript detect development tool working) 자바스크립트로 브라우저의 개발도구가 동작하는지를 확인하는 코드입니다. 이러한 천재적(?)인 생각을 만드신분께 정말 대단하다는 말씀을 드리고 싶습니다. !function() { function detectDevTool(allow) { if(isNaN(+allow)) allow = 100; var start = +new Date(); // Validation of built-in Object tamper prevention. debugger; var end = +new Date(); // Validates too. if(isNaN(start) || isNaN(end) || end - start > allow) { // input your code here when devtools detected. } } i.. 2022. 2. 24. Javascript 비밀번호 정규식 검증하기 1. 최소길이 6, 1개이상 문자, 1개이상 특수문자 function isOkPwd(password){ let regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,}$/ if( !regex.test(password) ) { return false } return true } 2. 최소 6자, 하나 이상의 대문자, 하나의 소문자 및 하나의 숫자 정규식 function isOkPwd(password){ let regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,}$/ if( !regex.test(password) ) { return false } return true } 2021. 12. 6. 안녕 Javascript ThreeJs, Three.js(자바스크립트 트리Js) 트리Js(three.js)는 3d 형태의 기능을 웹에서 쉽게 구현 할 수 있는 라이브러리(프레임워크) 입니다. 여러 사용자들에 의해서 이미 검증이 완료 되어있으며, 잘만 사용 한 다면 게임도 만들 수 있습니다. 마치 웹에서 유니티(Unity)를 하는 느낌과 비슷 합니다. 장면(scene), 카메라(camera), 대상(mesh), 조명(light), 렌더러(renderer) 등 대표적으로 5개의 형태로 구현되어 있습니다. 또한 3D 효과를 지원하므로 벡터에 대한 공간 개념을 잘 알고 접근해야 합니다. 장면(scene)과 대상(mesh)을 통해 화면이 구성이 되면(그림이 그려 지면) 카메라(camera)에 의해서 사용자가 바라보는 모양의 형태가 결정이 되고 조명(light)이 음양 및 그림자를 결정해 주어.. 2021. 6. 22. 익스플로러 ES6(ECMA6) 쉽게 적용하기 익스플로러에서 ES6 이상의 문법은 지원되지가 않습니다. 그래서 개발 할 때 웹페이지는 매우 예전 스타일의(?) 코드로 작성을 해야 하였습니다. 그래서 파셀, 웹팩 같은 번들러에 바벨 로더를 붙여서 개발한 뒤에 페이지에 기능을 추가하여야 했습니다. 그러나 이러한 번들러를 사용하지 않고 좀 더 쉽게할 수 있는 방법이 있습니다. 익스플로러에서 아래 코드를 한번 실행하여 봅니다. 이를 실제 익스플로러에 실행하면 아래와 같은 결과가 나오게 됩니다. ECMA6에서의 멋진 기능인 class 기능이 익스플로러에서 이상 없이 동작하는 것을 볼 수 있습니다. 위 코드에서 유의해야 되는 점은 사용할 스크립트에 type값으로 "text/babel"을 부여해야 한다는 점 입니다. 이상으로 익스플로러(explorer)에서 ES.. 2021. 6. 17. 이전 1 2 3 4 5 6 ··· 13 다음
