분류 전체보기 (101) 썸네일형 리스트형 #4.1 Form Submission js로 username의 유효성 검사 function LoginButtonClick(){ const username = loninInput.value; if(username === ""){ //username이 공백이라면 alert("이름을 입력해 주세요."); }else if(username.length > 15){ //username의 길이가 15를 넘는다면 alert("이름이 너무 길어요"); } } html을 활용해서 username의 유효성 검사 -> input의 유효성을 검사하려면 input은 form안에 위치해야 함 form안에서 enter를 누르고 input이 더이상 존재하지 않으면 submit form안에 있는 버튼을 눌렀을 때도 form은 자동으로 submit -> 더 이상 click에.. #4.0 Input Values 요소 찾기 const loginForm = document.getElementById("login-form"); //html에서 login-form(html element)을 찾음 const loninInput = loginForm.querySelector("input"); const loninButton = loginForm.querySelector("button"); 로그인버튼 눌러서 값 가져오기 Log In const loninInput = document.querySelector(".login-form input"); //왜 .으로 해야 에러가 안뜨지 const loninButton = document.querySelector(".login-form button"); function LoginBu.. #3.8 CSS in Javascript part Three classList로 클래스 이름을 바꾸는 것이 아닌 classname 목록들 관리하기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked"; if(h1.classList.contains(clickedClass)){ //classList가 clickedClass를 포함하고 있다면 h1.classList.remove(clickedClass); //classList에 clickedClass를 제거 }else{ //포함하고 있지 않다면 h1.classList.add(clickedClass);//classList에 clickedClass를 추가 } } h1.addEventListener.. 리액트 6강 리액트 폴더 구조 public : 나중에 배포시에 서버에서 누구나 접근할 수 있는 파일들 src : 기본 컴포넌트 및 다른 소스 모듈, 리액트 앱을 구성하는 파일들 node_modules : 서드파티 노드 모듈 즉 npm으로 설치한 패키지가 들어감 gitignore : 어떤 깃 파일을 추적하고 추적하지 않을지 정해놓은 파일 package json : 프로젝트의 메타데이터를 담고 있음 README.md : create-react-app으로 만든 앱에 관한 간단한 설명 터미널 여는 법 : vs코드에서 터미널-새 터미널 (cmd로 실행되게 해야 함.. 폴더 경로는 C:\Users\yn112\OneDrive\바탕 화면\react\sample-react-app로 해야 함...) 터미널을 열었으면 npm start.. 리액트 5강 cmd에서 폴더 경로 바꾸기 : cd 경로 node.js 자바스크립트는 브라우저에서만 동작하는 언어, 자바스크립트를 컴퓨터에서 일반언어처럼 사용할 수 있게 해주는 런타임 JVM,인터프리터 같은 매개체 역할 node.js를 설치하면 npm,npx도 함께 설치됨 npm : 특정 패키지를 설치, 제거, 업데이트하는 도구 -> 실행결과가 컴퓨터에 남음 npx : npm레지스터에 있는 최신 버전의 패키지를 사용해 명령어를 실행해줌 -> 실행결과가 컴퓨터에 남지 않을수도 리액트 프로젝트 생성하는 법, cmd에 치면 됨(윈도우 + R) C:\Users\yn112\OneDrive\바탕 화면\react>npx create-react-app sample-react-app create-react-app을 치면 아래 것들도 .. #3.7 CSS in Javascript part Two Click Me! //js파일 연결 body{ background-color: beige; } h1{ color: blue; transition: color.5s ease-in-out; } .clicked{ /*clicked라는 이름의 클래스 생성*/ color: tomato; } .sexy-font{ font-family: 'Courier New', Courier, monospace; } const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked sexy-font"; //string을 변수에 저장해서 이름 잘못쳐서 에러날수 있는거 방지 if(h1.className === clicke.. #3.6 CSS in Javascript 조건문으로 색 바꾸기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const currentColor = h1.style.color; let newColor; if(currentColor === "blue"){ newColor = "tomato"; }else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click",mouseClick); 핵심은 요소를 찾고, 이벤트 추가하고, 함수로 반응만들기 #3.5 More Events vs코드 글자들 한번에 바꾸는 키 : f2 document.body(head,title ...)은 호출가능 나머지 div이런건 getElementById같은걸로 찾아와야함 function handleWindowResize(){ document.body.style.backgroundColor="tomato"; //중요한 부분, h1 처럼 못가져옴 } function handleWindowcopy(){ alert("카피했당"); } function handleWindowOffline(){ alert("살려주세유"); } function handleWindowOnline(){ alert("살아있어유"); } h1.onclick = mouseClick; //이렇게도 사용가능, 근데 이거 구림 h1.addEven.. 이전 1 ··· 8 9 10 11 12 13 다음
