728x90 반응형 웹개발/JavaScript24 [자바스크립트] 조건문 사용하기 아이디를 입력하는 칸과 전송버튼을 만들고, 아이디칸에 아무것도 입력되지 않았을 때는 경고창이 뜨도록 만들어 보자. 폼에 입력된 값은 $('요소명').value로 알 수 있다. $('.btn-primary').on('click',function(){ if($("#user-id").val().length==0){ alert("아이디를 입력하셔야죠"); return false; } }); btn-primary 클래스를 가진 요소를 클릭했을 때 #user-id의 값의 길이가 0이라면 "아이디를 입력하셔야죠" 알림창 뜨게 하기. if-else문은 우리가 C언어,자바 등등에서 사용하는 그 if문과 같다고 보면 된다. 추가로, form태그에서 submit이벤트가 발생하기 때문에 $('form').on('submit'.. 2023. 1. 18. [자바스크립트] jQuery 라이브러리 사용하기 jQuery라이브러리를 설치해서 자바스크립트를 쉽고 간결하게 사용 해 보자. 우선 이 스크립트 태그를 HTML파일에 붙여넣자. 참고로 이 태그 아래에 스크립트를 작성해야 jQuery가 잘 작동하니 주의하자. jQuery 예시들이다. document.querySelector('요소명')을 간단하게 $('요소명')으로 쓸 수 있다. 2023. 1. 16. [자바스크립트] 서브메뉴 만들기 이런 Navbar가 있다. 오른쪽에 상병마크 버튼을 누르면 이렇게 메뉴리스트가 튀어나오도록 만들어 보자. Navbar An item A second item A third item A fourth item And a fifth one 아래 스크립트태그를 보자. 우선 내브바에 있는 상병마크에 이벤트 리스너를 추가한다.(클릭 시 동작) (여기서 getElementByClassName('클래스명')[0] 이라고 적었는데, 나중에 오류가 발생하지 않도록 인덱스번호를 적어주는 편이 좋다.) 이벤트리스너 function 내부에는 .classList.toggle('클래스명') 이라는 메소드를 사용하였는데, 해당 클래스가 있으면 삭제하고, 없으면 추가하라는 메소드이다. 이것을 이용해서 클래스를 추가하고 뺄 수 있다. .. 2023. 1. 16. [자바스크립트] 알림창 띄우기, 이벤트리스너 자바스크립트로 HTML을 조작할 수 있다. 안녕하세요 안녕하세요 라고 적힌 글을 자바스크립트를 이용해서 조작 해 보자. 안녕하세요 id를 hello로 만들어 준 뒤, 아래에 script 태그를 열어 document.getE... 블라블라 적어주면 된다. innerHTML으로 내용을 안녕안하세요 로 바꾸고, style.background를 red로 설정했더니 잘 적용된 모습이다. 버튼을 누르면 나타나는 알림창 만들기 알림창 닫기 버튼 HTML 삽입 미리보기할 수 없는 소스 버튼을 누르면 알림창이 열리고, 알림창에 있는 버튼을 누르면 다시 알림창이 없어진다. 이번에는 script 태그를 열지 않고, onclick 속성으로 바로 자바스크립트를 작성했다. function 이용하기 버튼 script태그 안에 fu.. 2023. 1. 16. 이전 1 2 다음 728x90 반응형
