새벽코딩

이번 포스팅에서는 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..

- jQuery 설치 구글에 jQuery cdn 검색 https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com jQuery 3.x 버전 아니면, 최신버전 jQuery 사용하려면 아래 코드를 body안에 ..

이전 포스팅에서 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를 탈부착하여, 요소가 보이게 또는 안보이게 만들예..

부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다. 사용법 1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다. 2. Bootstrap 웹페이지로 들어가서 상단 네브바에서 Docs로 들어간다 (상단 오른쪽 버전확인 v5.x ) 3. 위와 같이 Get started with Bootstrap 이라는 화면이 보이게 되는데, Quick start 순서대로 하면된다. 먼저 index.html을 만들고 아래 코드를 넣어준다 (vs code에서 느낌표+tab을 누르면 자동생성) Hello, world! 4. 그리고 Hello, world! 이제, 추가하고 싶은 요소를 찾아서 코드를 붙여 넣어주면 구현 가능하다. * Navbar를 추가하고 싶..

셀렉터(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라고 한다. 아래 비슷한 형태의 두 함수를 매개변수를 이용해서 수..

UI 만드는 스텝 1. HTML/CSS로 미리 디자인 2. 필요할 때 보여질수 있도록, 자바스크립트로 구현 먼저, 스타일링을 위해서 따로 main.css 라는 파일을 만들어주고, css파일을 아래와 같이 UI 만드는 스텝에 따라서 먼저, 스텝1. tag를 이용해서, alert 박스를 하나 만들고 styling시 display를 'none'으로 안보이도록 설정한다. 코드 : index.html alert1 button // 이 부분에 동작을 위한 자바스크립트 코드 추가 예정 코드 for styling : main.css .alert-box { background-color : skyblue; padding : 20px; color : white; border-radius: 5px; /* 해당 tag를 숨기..

- 자바스크립트 사용 목적? HTML을 조작하기 위해서 사용한다. - WHY? 1 HTML안의 텍스트, 스타일링을 할 수 있다. 2 Tab, Modal등 UI를 만들 수 있다. 3 버튼클릭시 서버로 데이터 요청 할 수 있다. 예시) 어떤식으로 자바스크립트를 사용할까? Hi 위 HTML의 tag안에, 출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'