myej+I+n s+T+udying

(참고) 폼 전송 막으려면 e.preventDefault() 위 함수 추가 전= 값을 입력하세요 알림 창은 뜨지만 확인 버튼 클릭 시 전송완료~~페이지로 넘어간다. 위 함수 추가 후= 알림 창의 확인 버튼을 눌러도 폼이 전송되지 않는다 ese-if 문법: 1. 조건식을 연달아 쓰고 싶으면 2. 몇 번이고 연달아 사용 가능 else-if 의 조건이 참이기 때문에 콘솔 창에 맞아요2가 출력되는 것을 확인할 수 있다. -오늘의 숙제- 1. 전송 누르면 아이디/비번 입력란 둘 다 공백 검사 2. 비번이 6자 미만이면 더 길게 입력하라고 안내문 띄우기(value.length) 1. id/pw 값이 공백일 경우 2. 비번이 6자 미만일 경우 3. 조건 모두 만족 시 정상적으로 폼이 전송됨

모달창 안에 만들기 form 안의 전송=submit type=button 은 서버로 유저 정보 전송하려고 쓰는 것임 로그인하세요 전송 닫기 전송 버튼을 누르면 전송완료~~~~~로 작성해 둔 success.html로 이동한다. 조건 걸기 전송 버튼 누를 때 첫째 에 입력된게 없으면 alert 띄우기 컴퓨터에게 명령할 내용 아무것도 입력하지 않고 전송 버튼을 누르면 위와 같이 alert 창이 뜬다! 반대로 값을 입력해준 후 전송을 누르면 success.html 페이지로 넘어간다. 조건문 쓰는 법 : 조건이 충족될 때 코드 실행하고 싶으면 사용 if(조건){

css 짜기 귀찮을때, Bootstrap 라이브러리 활용 -버튼 -카드 -리스트 -Nav ...등 Navbar 만들기 1. 미리 서브메뉴를 html css로 디자인 2. 버튼 누르면 보여달라고 js 짬 -class 탈부착으로도 구현가능 => class 부착식으로 개발 시 애니메이션 추가 쉬움 => 나중에 재사용 편리 버튼 누르면 에 show 부착해보자 An item A second item A third item A fourth item And a fifth one 원하는 요소에 클래스명 추가하는 방법 버튼 클릭 시 sub 메뉴가 펼쳐진다. Q. 버튼 한 번 더 누르면 숨기기? classList.toggle('클래스명') : show가 있으면 제거, 없으면 추가하라는 뜻 이거 진짜 우아한 형제들 사이트 ..

EventListener 형식 //alert 창 닫기-id가 close인 요소에 클릭이 발생하면 닫아주세요 document.getElementById('close').addEventListener('click', function(){ document.getElementById('alert').style.display='none'; }); 버튼 1, 2 각각을 클릭했을 때의 실행 결과. EventListener를 사용하면 버튼에 온클릭 부여하지 않고도 처리 가능하다 Event에는 여러가지가 있음 click keydown scroll mouseover

오늘 배울 거: function 쓰는 이유 2 -> 함수 업그레이드하고 싶으면 파라미터 1. 함수에 구멍 뚫어놓으면 2. 앞으로 함수 쓸 때 (구멍) 안에 아무거나 입력 가능 파라미터의 장점 1. 함수 하나로 다양한 기능 만들기 가능! 2. 코드 양이 줄어듬 예시 1. Alert 박스 닫기 버튼 예시 2. function plus(n){ 2 + n } plus(1); plus(2); plus(3); Q. 구멍이 여러개 필요한 경우? 1. 콤마로 구분 2. 자유 작명 3. 구멍 타고 들어온 데이터는 어디에 들어갈지 표시하기 -오늘의 숙제- alert 창 2개 만들기 (버튼1: 아이디를 입력, 버튼2: 비번을 입력) 방법 1. Alert-box 닫기 버튼1 버튼2 방법2. 파라미터 사용 Alert-box 닫..

오늘 배울 거: function 문법 + 언제 function이 등장해야 하는지 Q. function 문법을 쓰는 이유? 긴 코드를 깔끔하게 한 단어로 축약 가능 function 축약된이름( ){축약할 긴 코드} 초보 때 겪는 흔한 버그 위치가 중요함!! 변경할 HTML이 있으면 그 하단에 JS 코딩해야 함

UI 만드는 법 1. 미리 디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 * 핵심코드 Alert 박스 버튼 display=none 이었던 alert box의 css를 display block으로 바꿔주는 js

자바스크립트 사용처 -웹서버 -모바일앱 -머신러닝 but 원조는 웹개발 웹환경에서 JS의 목적=HTML 조작과 변경! 처음 배울거: HTML 조작 1. ALERT 창 띄우고 닫기 안녕하세요 올때메로나 1. 바꾸고 싶은 HTML 요소의 ID 적기 2. 뭐 바꿀지 뒤에 적기 ex. innerHTML document.getElementById('???').???='???'; 물음표 부분 잘 바꾸기가 관건

함수 선언문: 어디서든 호출 가능 자바스크립트는 인터프리터 언어임! *인터프리터 언어: 위에서 아래로 순차적으로 읽으며 실행됨 sayHello(); function sayHello(){ console.log('Hello'); } 근데 위의 코드는 실행됨 // 결과=Hello 어떻게? 자바스크립트 내부 알고리즘에 의해, 실행 전 코드의 모든 함수 선언문을 찾아 생성해 둠 -> 호이스팅(hoisting)이라 함 함수 표현식: 코드에 도달하면 생성 한 줄씩 읽으면서 실행하고 해당 코드에 도달했을 때 비로소 생성 -> 생성 이후에만 사용 가능 let sayHello=function(){ console.log('Hello'); } sayHello(); // 결과=Hello 함수 선언문을 사용하는게 더 자유롭고 편..

[반복문] for문 -> 명확한 횟수 정해진 경우 //1부터 10까지 로그 for(let i = 0; i 명확한 횟수 정해지지 않음 //while문 let i = 0; while(i