새벽코딩

이번 포스팅에서는 form 의 input tag 안에서 1. input에 입력된 값을 get하는 방법 2. 그 값이 공백인 경우에 alert을 띄워주는 방법 3. 또한 값이 특정 길이 보다 짧을 경우에 alert을 띄워주는 방법을 알아 볼 예정이다. 아래와 같이 로그인을 위한 을 생성 한 후 로그인하세요 전송 닫기 미리보기 1. input에 입력된 값을 어떻게 get할까? 먼저, 위에 첫번째 input field는 email을 입력하는 부분이고, 해당 field에(id="email" 인 tag) 입력된 값이 무엇인지 아래와 같이 확인 할 수 있다. document.getElementById('email').value // id='email'인 요소의 value를 나타낸다 2. 입력값 (email 또는 p..

이전 포스팅에서 bootstrap을 이용하여, Navbar구현하는 법에 대해서 알아보았다. https://midnightcoding.tistory.com/100 [JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap) 부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다. 사용법 1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다. 2. Bootstrap 웹페이지로 들어가서 상 midnightcoding.tistory.com 이번 포스팅에서는 Bootstrap을 이용하여, Navbar 버튼을 눌러서 서브메뉴를 보여줄수 있도록 해보자 여기에서는 div tag에 class를 탈부착하여, 요소가 보이게 또는 안보이게 만들예..

셀렉터(selector) 란? 앞에서 셀렉터(selector)에 대해서 언급을 하지 않았지만, 이미 사용하고 있다. 셀렉터는 HTML Tag를 스타일링해주기 위해 특정 tag를 선택하기 위해 사용한다. 셀렉터의 종류 - id를 선택할 때 : getElementById('id 이름') - class를 선택할 때 : getElementsByClassName('class 이름') 사용예시 alert1 X ** 하지만, class는 id와 다르게 여러개를 지정할 수 있기 때문에, 뒤에 indexing을 꼭 해줘야한다. 위에 코드를 아래와 같이 바꿔줘야 작동을 한다. (class를 찾은 것 중에 몇번째인지 써줘야 함) document.getElementsByClassName('title')[0].innerHTML..

앞선 포스팅에서 함수에 대해서 알아보았다. https://midnightcoding.tistory.com/97 [JavaScript기초] 2. 자바스크립트 동적 UI 만들기 with 함수란? UI 만드는 스텝 1. HTML/CSS로 미리 디자인 2. 필요할 때 보여질수 있도록, 자바스크립트로 구현 먼저, 스타일링을 위해서 따로 main.css 라는 파일을 만들어주고, css파일을 아래와 같이 UI 만드는 스텝 midnightcoding.tistory.com 함수(function)에 사용가능한 문법 중 매개변수(parameter)가 있다. function 함수(매개변수자리) 이런 형태로 괄호안에 넣어주는것을 매개변수, 영어로 parameter라고 한다. 아래 비슷한 형태의 두 함수를 매개변수를 이용해서 수..