본문 바로가기
728x90
반응형

Javascript: to do list22

19 Interval & Timeout 시간 만들기 시간 표시하기 setInterval(a,00) : a함수를 00초마다 실행하라! (alarm개념) setTimeout(a,00) : a함수를 00초 후에 실행하라! (delay개념) 1. Date 현재 시간을 표시 new Date() : 오늘 날짜 new Date().getHours 라고 콘솔에 적어보면 시간을 불러온다. getMinutes는 분, getSeconds는 초. const date = new Date(); console.log(date.getHours(),date.getMinutes(),date.getSeconds()); 2. Interval의 적용 const date = new Date(); function getClock(){ console.log(date.getHours(),date.g.. 2023. 6. 1.
18 Local Storage에 저장하기 Local Storage를 활용하여 저장하기 key, value로 이뤄짐. 작은 DB를 사용한다고 보면 됨. 1. 메서드 사용방법 localStorage.setItem( a, b) => key: a, value:b로 저장한다는 의미 localStorage.getItem( a) => key: a에 저장된 value를 불러온다는 의미 그 외에 삭제 시에는 removeItem() 이런 식으로 사용함 콘솔창 메뉴에 애플리케이션을 선택하면 "로컬스토리지"항목이 좌측메뉴에 보인다. 우측 창에 키(key)와 값(value)이 있다 이곳에 우리가 입력한 값이 저장되도록 하는 것이다. . js에 다음과 같이 추가해 준다. localStorage.setItem("name", username); 2. 로컬 스토리지에 저장되.. 2023. 6. 1.
17 선택자 class와 id 클래스와 아이디 .hahaha : 클래스 class : 그룹핑 #hoho : 아이디 id : 1개 식별자 hehe : 태그 tag : 해당 구문 묶음 *줄바꿈 x : 해당 구문 포함한 전체를 묶음 *줄바꿈 o : 내용을 서버에 제출 서브밋과 버튼 : 버튼과 동일하게 사용, '폼'을 서버에 자동 제출함 (enter키 적용) : 버튼을 생성하는 하나의 방법인데, 이도 마찬가지로 서버에 제출이 되는 형식임 : 버튼 태그 사용으로 다양한 태그 기능 추가 가능, 서버에 제출되지 않는 형식임, form 안에 있다면 제출됨! 미션1. submit form으로 인해 화면이 리프레쉬되지 않도록 하기 1. 더이상 이벤트 리스너의 click 이벤트는 필요치 않다. submit 이벤트로 바꿔주자 - submit 이벤트가 발생.. 2023. 6. 1.
16 Validate 유효성 체크 유효성 체크를 해봅시다. 1. 입력필드에 아무것도 넣지 않으면 > "이름을 입력하세요!!" 2. 입력필드에 입력한 글자수가 5 글자를 넘지 않으면 > "5글자 이상 채우세요!" 3. 입력필드에 입력한 글자수가 20자를 넘으면 > "너무 길게 입력했어요!" 라고 alert을 띄워보자. 1. 함수 부분을 건드려 봄 앞서 진행했던 것에서 먼저 글자수에 해당하는 loginInput.value를 변수로 할당한다. const userName = loginInput.value; 그 다음 위 의 세 가지 경우의 수를 조건문으로 만들자. if ( userName === ""){ alert ("Please insert your name!"); } else if (userName.length < 5){ alert ("Ple.. 2023. 6. 1.
15 Log in 로그인 화면 만들기 로그인 화면을 만들어보자. html에서 필요한 것 1. id 입력할 text field 1개 2. 입력을 확인할 button 1개 3. 이들을 묶어놓은 group의 id 이름 1. id 입력할 text field 내부에 다음과 같이 작성한다. Log-in div를 묶어서 하나의 id로 지정한다. 아이디 이름은 login-form이다. input 이라는 입력필드를 만드는데 text 값으로 입력할 것이며, placeholder는 힌트로서 미리 보여줄 문장을 what is your name이라 적었다. 그리고 button 하나 만들고 레이블을 Log-in 이라고 적었다. html 화면에 이렇게 나올 것이다. 이제 js에서 불러와서 사용할 준비가 되었다. 버튼이 잘 눌러지는지, 입력한 텍스트가 잘 출력되는지 확.. 2023. 6. 1.
14 ClassName과 ClassList의 차이 className & classList 차이 1. Toggle Button의 원리 2. className과 classList 두 방식의 차이점 1. Toggle Button의 원리 이제껏 구현하려 했던 것이 다름 아닌 toggle button의 원리이다. 그것은 클래스와 이벤트 리스너로 이뤄어져있다. 글자의 색 정보를 담고 있는 클래스와 색을 변화시킬 수 있는 function. 그리고 버튼을 클릭하면 동작을 실행하라는 명령으로 되어있는 것이다. 이전 장에서 글자 색 정보를 css에서 클래스로 정의하고, js에서 function을 만들고, eventListener로 실행하게 해 주었다. 이 function 내에서도 className이라는 아이에게 변수를 할당하여 조건에 따라 글자색의 클래스를 바꾸도록 기능.. 2023. 6. 1.
13 CSS로 Style 작성하기 기초 I css로 style작성하기 1. CSS에서 해야 할 것들 2. 해석해보기 1. CSS에서 해야 할 것들 지금까지 js에서 작성해보면서 테스트를 했다. 사실 text color 같은 것들은 style에 속하고, css에서 변경하는 것이 맞다. 그렇게 하는 것이 코드도 간결해지고, 에러도 줄일 수 있는 일관성을 갖는데 유리하다. 초기 작성했던 css로 가보자. body{ background-color: beige; } 이것만 있을 것이다. 배경색 베이지로 정했었다. 여기에 h1 글자색을 정의를 추가하자. 그리고, 글자색을 바꿔줄 class도 하나 만들자. 이 class가 h1의 컬러를 담당할 변수를 대신한다고 보면 되겠다. 그럼 전에 했던 currnetColor 또는 newColor 같은 번거로움이 사라진다.. 2023. 6. 1.
12 Event 토글 버튼의 원리을 알자 토글 버튼의 원리 Text를 click 하면 색이 바뀌고, 다시 click 하면 원래 색으로 바뀌고, 이걸 반복하는 걸 만듭니다. 일종의 토글버튼같은 방식을 구현해보려 합니다. ① 먼저, 현재 색과 바뀔(새로운) 색 두 가지 변수에 대해 생각해 보고, ② 색을 바꿔줄 함수, 조건문으로 처리하는 방식으로 작성하고, ③ click 이벤트에 따라 함수를 실행시키게끔 연결시켜 주는 작업을 합니다. 변수 1 : 현재색 : currentColor라고 하겠습니다. 변하지 않을 것이기 때문에 const로 type을 정합니다. 변수 2 : 변할 색 : newColor라고 하겠습니다. 변할 것이기 때문에 let이라고 type을 정합니다. *여기서 변할 것이란 것은 우리가 이벤트를 줄 때마다 다른 값이 들어갈 것이기 때문입.. 2023. 5. 31.
11 Event 다양한 변화에 반응하게 만들기 여러가지 변화에 대한 반응 지금까지 event를 반영한 대상은 text였습니다. 본문에 있는 title이라는 요소를 js에서 가져와서 어떤 function을 적용하는 방식이죠. 이번에 window라는 속성을 변경시켜 볼게요. 윈도는 웹브라우저 창이라고 생각하면 될 것 같습니다. window에 해당하는 event들은 어떤 게 있을까요? google에서 "window mdn"이라고 검색하면 다음처럼 확인할 수 있고, 다양한 함수가 document 에서처럼 많이 존재한다는 걸 볼 수 있습니다. 아래로 계속 내리다 보면 resize라는 걸 찾을 수 있을 겁니다. 리사이즈란, 브라우저 창의 크기를 조절한다는 뜻이죠. 그래서 뭘 할 거냐면 창의 사이즈를 직접 조절하게 되면 창의 배경색이 바뀌는 것을 해볼 겁니다. .. 2023. 5. 31.
10 Event 마우스에 반응하게 만들기 마우스에 대한 반응 javascript 작성 시 필요한 document, object, function에 관해 찾고자 할 때 html headingElement mdn을 google에서 검색합니다. h1 html heading element Web APIs Mdn (mdn= mozilla developer network) 또한, 우리는 콘솔에서도 확인 가능하죠. js파일에서 다음과 같이 입력하면 됩니다. console.dir(document); event에 관해 좀 더 적용해 봅니다. 마우스 클릭했을 때, 마우스 오버 했을 때, 마우스가 벗어났을 때 이렇게 해보죠. onmouse으로 시작하는 걸 찾아보면 되겠어요. onmouseenter : 마우스 오버했을 때 onmouseleave : 마우스 벗어났을 .. 2023. 5. 31.

티스토리툴바