자바스크립트 기초5 바닐라 자바스크립트 - 유효성 검사 더보기 출처 및 참고 : - https://nomadcoders.co/ 본 포스팅은 노마드 챌린지의 무료 강의를 참고해 포스팅 하였습니다. username 유효성 검사하기 우선적으로 username이 비어서도 안되고 너무 길어서도 안된다. 우리는 if, else문을 활용하여 username이 빈 인풋값인지 확인하고 15글자가 넘는지 확인하는 법을 알아볼 것이다. HTML Log In # JS로의 검사 먼저 자바스크립트로의 검사 코드이다. const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnCl.. 2021. 9. 24. 바닐라 자바스크립트 - Input과 Button 더보기 출처 및 참고 : - https://nomadcoders.co/ 본 포스팅은 노마드 챌린지의 무료 강의를 참고해 포스팅 하였습니다. 본격적인 앱 만들기 강의에 들어갔다. 그래도 기초적인 부분은 다뤄야 하니 input과 button을 이용한 value를 테스트하는 시간을 가져보자 Input과 Button # 설계 - 앱이 사용자에게 질문한다. 너는 누구인가? (이름, ... 등등) - 해당 정보를 어떻게 받아올 것인가 - 받아온 정보를 어떻게 화면에 보여줄 것인가. * 기초원리 user의 이름을 기억하는 것처럼 JavaScript에는 value(값)를 기억하게 하는 아주 쉬운 방법이 있다. 하지만 모든 것은 HTML에서 시작되어야 한다. HTML을 작성한 다음 그 안에 존재하는 element들을 가.. 2021. 9. 24. 바닐라 자바스크립트 - CSS와 JavaScript 분리하기 더보기 출처 및 참고 : - 노마드 코더 챌린지(바닐라 JS로 크롬 앱 만들기) : https://nomadcoders.co/ # CSS in JavaScript 우리는 자바 스크립트 내에서 CSS를 변경시켰다. 하지만 이는 무언가 좋지 않아보인다. 각각의 일들을 독립시켜줄 필요가 있다. 자바스크립트는 HTML을 변경할 것이고 CSS는 HTML을 바라보고 있는 구조가 된다. JavaScript는 상호작용으로 이용하는걸 선호한다. 1. element를 찾기 2. event listen 하기 3. 해당 event에 반응하기(어떤것을 보여주거나, 감추거나 색을 바꾸거나 등등) JavaScript : 애니메이션 작업 CSS : Style 작업 // CSS body { background-color: beige;.. 2021. 9. 23. 바닐라 자바스크립트 시작 (2) 더보기 본 글은 노마드 코더 챌린지 하기 전 기본내용에 대한 자료를 바탕으로 썼습니다. 출처 및 참고 : https://nomadcoders.co/vanillajs-challenge 조건문 (Conditional) 조건문(conditional)은 true인지 false인지 알려주기 때문에 아주 중요하다 무언가를 확인해야할 때 거의 대부분 사용한다. - 사용자가 로그인되어 있으면 무언가를 보여준다던가 - 사용자가 무언가를 할 때 반응하는 것을 보여준다던가 prompt() : 사용자에게 창을 띄울 수 있게 해준다. - 조건문을 사용한 함수라고 보면 된다. * prompt 함수가 실행되면 자바스크립트 전체가 일시적으로 정지된다고 한다. Document에 대해 - console.dir(document) 로 do.. 2021. 9. 8. 이전 1 2 다음
