개발자연습노트

저번시간 숙제는 다크모드 버튼눌렀을 때 버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~버튼 누른 횟수가 짝수면 버튼 내부 글자를 Dark로 변경해주세요~코드를 짜봅시다.그대로 코드로 번역만 하면 됩니다.    설명하다 var count = 0;$('.badge').on('click', function(){ count += 1; if (count가 홀수면) { 내부글자를 Light로 변경 } else { 내부글자를 Dark로 변경 }});한글만 잘 채우면 되겠네요.count += 1 왜하냐고요?버튼누를 때 마다 버튼누른 횟수를 계속 업데이트하고싶으니까 쓴 것임     설명하다 var count = 0;$('.badge').on('click', function(){ ..

and/or 연산자 if문 소괄호 안에 조건식을 여러개 동시에 입력하고 싶을 때가 있습니다.1 == 12 == 2이런거 동시에 비교해서 참이면 뭔가 코드를 실행하고 싶으면 and/or 기호와 함께 적으면 됩니다.   if (1 == 1 && 2 == 2){ console.log('안녕')}&& 기호는 논리학의 and 역할을 해줍니다.그니까 왼쪽 오른쪽이 둘 다 true면 전체를 true로 바꿔줍니다.  if (1 == 1 && 2 == 3){ console.log('안녕')}그럼 이건 안녕이 출력안될듯     if (1 == 1 || 2 == 3){ console.log('안녕')}|| 기호는 논리학의 or 역할을 해줍니다.그니까 왼쪽 오른쪽 둘 중 true가 적어도 1개 있으면 전체를 true로 ..

만들기  과 기능을 만들면서 if else 문법을 배워보도록 합시다. 설명하다  전송 닫기 ▲ 모달창 안에 폼 이렇게 만들어보십시오. 그리고 전 닫기버튼도 폼 안으로 옮겼습니다.그리고 success.html 파일도 같은 폴더에 하나 만들어두면 되겠습니다. 파일 내용은 아무 글자나 채웁시다.   지금은 전송버튼 누르면 폼 전송이 되며 success.html로 이동합니다.근데 여기에 제한을 걸어봅시다. 첫 에 입력한 값이 아무것도 없으면 전송버튼 누를 때 알림을 띄워봅시다.  그럼 자바스크립트로 전송버튼누르면저기 에 입력된 값이 공백이면 알림띄워주세요 코드 짜면 되는데 "이런 경우에만 코드 실행해주세요~" 라는 표현법은 배우지 않았습니다.이 경우엔 자바스크립트 if..

모달창 띄우기 숙제 1. 클래스부터 만들어놓읍시다( 재연이 안됨.) 버튼 누를 때 display : block 그냥 대충 줘도 되겠지만 나중을 위해 class 부착식으로 만들어봅시다.  설명하다 .black-bg { (생략) display : none;}.show-modal { display : block;}그래서 css 파일열어서모달창에 붙어있던 기본 class엔 display : none을 추가했고show-modal 이라는 class를 만들었습니다.이제 show-modal 원할 때 부착하면 모달창 보일듯요      모달창 띄우기 숙제 2. 버튼클릭시 모달창 띄워주세요 버튼클릭시 모달창 띄워달라고 컴퓨터에게 명령주면 되는데"띄워주세요~" 라고 코드짜면 컴퓨터가 알아듣겠습니까.지능이 없는 친구이기 ..

버튼누르면 등장하는 서브메뉴를 만들며자바스크립트로 class 탈부착하는 문법을 배워봅시다.   Bootstrap 설치해서 쓸 것임 Bootstrap css 파일을 설치해놓으면버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있습니다.css 짜기 귀찮으니 설치해봅시다.구글에 bootstrap 검색하면 나오는 맨 첫 사이트 들어가보면 되겠습니다. 그리고 get started 버튼 누르면 됩니다.1. 우선 우측 위에서 버전이 5.X 버전인지 확인한 후에   2. css 파일은 태그 안에,3. js 파일은 태그 끝나기 전에 붙여넣으면 설치 끝입니다. https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template모르겠다면 그냥 sta..

1. 갑자기 CSS 가 적용 되지않는다.  콘솔에서도 오류가 나오지않음2. 인터넷 캐쉬 삭제3. CSS 경로 확인 // 검사 - 네트워크 - CSS 파일이 있는지 확인 (O)4. 스크립트가 작동하는지 확인 console.log('Button clicked'); 5. CSS 에서!important 를 붙여줌 해결됨.( CSS가 겹치는 상황이 나와서 그런것같음) 해결!

버튼1 누르면 '아이디입력하세요' 라는 alert 박스가 떠야함버튼2 누르면 '비번입력하세요' 라는 alert 박스가 떠야함  구현방법은 2개가 있겠군요1. 미리 html로 alert 박스를 2개 만들어놓고 버튼1 누르면 박스1 띄우기~버튼2 누르면 박스2 띄우기~ 이렇게 짜도 되겠지만 이러면 나중에 alert 박스가 100종 필요하면 어떻게 되겠습니까. 끔찍하군요 2. 기존에 있던 alert 박스를 재사용하는겁니다.버튼1 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 버튼2 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 이러면 효율적일듯요 자바스크립트가 가장 잘하는게 html 변경이니까 제목 바꾸는건 일도 아님     H..

function에 사용가능한 파라미터 문법  파라미터라고 하면 어려우니까 구멍이라고 합시다.함수내에 구멍을 뚫어줄 수 있습니다.  function 알림창열기(구멍){ document.getElementById('alert').style.display = 구멍;}지금 함수 내에 구멍을 뚫었습니다.구멍을 뚫는 법은1. () 소괄호 내에 아무 글자나 적고2. {} 중괄호 내에도 같은 글자 아무데나 적으면 됩니다.    구멍을 왜 뚫냐고요?-> 구멍을 뚫으면 함수를 업그레이드해서 사용할 수 있습니다.  구멍이 뚫려있으면 이제 함수를 쓸 때 그냥 쓰는게 아니라소괄호 내에 뭔가 문자나 숫자등을 입력해서 사용가능합니다.    설명하다 function 알림창열기(구멍){ document.getElementById(..

function (일명 함수) 라는 문법이 있는데 이 문법 쓰는 이유부터 알고 지나가봅시다. 함수는 길고 더러운 코드 한 단어로 축약하고 싶을 때 쓰는 문법입니다.간지나는 개발자말로 표현하면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법 인데어려우니 그냥 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법이라고 외우면 됩니다.  function 자유롭게작명(){ 축약하고 싶은 긴 코드}1. function 키워드 쓰고 소괄호, 중괄호 붙이면 됩니다.2. 그리고 소괄호 왼쪽에 작명하고3. 긴 코드를 중괄호 안에 담으면 코드 축약 끝입니다.그럼 이제 자유롭게작명() 이거 쓸 때 마다 그 자리에 긴 코드가 실행됩니다.진짜임 실험해보셈       Alert 여는 코드 function으로 축약해보기 버튼의 o..