javascript 썸네일형 리스트형 [WEB2 - JavaScript] Lecture 18. 리팩토링 중복의 제거 인프런 18강 "리팩토링 중복의 제거" 리팩토링 = re + factoring : 코딩 완료 후 코드의 비효율적인 부분 수정을 통해 코드를 좀 더 효율적으로, 가독성이 좋게, 유지보수가 쉽도록 재정비하는 과정 기존 코드가 다음과 같이 주어졌을 때에, id가 night_day인 버튼을 내용 밑에 추가하려고 함. 그렇게 하면, 버튼은 정상적으로 생성되지만, 아래 버튼 클릭 시 버튼 text가 day로 변경되지 않는 것 확인 가능 그리고 위에 있는 버튼의 text가 day로 바뀌는 것 확인 가능 아래 버튼도 동일하게 동작하도록 하기 위해서는 아래 버튼의 id를 달리 해주어야 함 지금은 하나의 버튼을 더 추가한 것이기 때문에 상관없지만, 정말 많은 양의 동일한 버튼을 생성하는 경우 번거로움 발생 이를 해결하기 .. 더보기 [WEB2 - JavaScript] Lecture17. 조건문의 활용 인프런 17강 "조건문의 활용" - 이전 코드 참고하여, 다크 모드와 라이트 모드를 하나의 버튼으로 조절할 수 있도록 버튼 생성 - "night" 값을 가지는 버튼 생성, 버튼의 고유 id는 "night_day" - if문 사용하여 night_day id를 가지는 경우, 다크모드로 설정하도록 코드 작성 ↓ - night 버튼 클릭 시 if문 만족하므로 다음과 같이 다크 모드 출력 - 지금까지 작성한 코드는 night 값을 가진 경우 다크 모드로 변경하는 것이었는데, 라이트 모드로 재변경할 수 있는 코드 작성 필요 - if문 실행 코드 중 다크 모드로 변경 후 값 바뀌도록 설정 - document.querySelector('#night_day').value = 'day'; - 반대로 else문 실행 코드에.. 더보기 [WEB2 - JavaScript] Lecture16. 조건문 인프런 16강 "조건문" - 이번 강의의 제목 가장 위에 적어주기 ↓ - 제목 아래에 글자 입력 - document.write("1 "); : 1 출력 후 줄 바꿈 의미 ↓ - if문 사용하여 true인 경우 출력하도록 작성 ↓ - false인 경우 출력하도록 작성 ↓ 더보기 [WEB2 - JavaScript] lecture15 비교연산자와 블리언 인프런 15강 "비교 연산자와 블리언" - 기본적인 html 코드에 이번 강의의 주제를 제목으로 넣어줌 ↓ - 제목 아래에 script로 1===1 출력한다면 비교연산 후 결과 값을 출력해줌 ↓ - 그 아래에 1===2 비교연산 진행 후 결과 값 출력 ↓ ** 비교연산의 결과는 연산 후 Boolean 타입의 결과값을 출력해줌 (true, false) - 11 비교연산 진행 후 출력 - 비교연산 수행 시 는 > 사용 ↓ 더보기 [WEB2 - JavaScript] section5 조건문 인프런 14강 "조건문 예고" 이전 코드의 경우 'Night' 버튼 클릭 시 어두운 모드, 'Day' 버튼 클릭 시 밝은 모드가 되었는데, 두 개의 버튼이 존재하는 것이 깔끔하지 않아 보일 수도 있어 조건문 사용하여 두 가지 역할을 하는 토글 기능하는 버튼 생성 토글이란? - 두 가지 상태 밖에 없는 상황에서, 스위치를 누르면 어떠한 값이 되고, 다시 한 번 누르면 다른 값으로 변하는 것 의미 - www.terms.co.kr/toggle.htm 정의 참고 - 토글 버튼 추가 위의 코드 실행 시 - 처음에는 버튼 이름이 'black'으로 되어 있는 것 확인 - 버튼 클릭 시 'night'으로 변경되며, 밝은 모드 상태인 것 확인 가능 - 버튼 한 번 더 클릭 시 'day'로 변경되며, 어두운 모드로 변경되.. 더보기 [WEB2 - JavaScript] CSS 기초 (2) 인프런 12강 "제어할 태그 선택하기" 기존 코드에서 조금 수정하여 태그를 선택하여 해당 태그 제어하는 것 학습하기 ! 기존 코드 ↓ → 버튼 추가 ↓ → 버튼 클릭 시 이벤트 추가 - 문서에서 태그 선택하도록 명시 - document.querySelector('body') - 만약 태그에 id를 지정해준다면, - document.querySelector('#target') - 태그 선택하여 설정 변경 (ex) background-color - document.querySelector('body').style.backgroundColor = 'black'; - document.querySelector('body').style.color = 'white'; 더보기 [WEB2 - JavaScript] CSS 기초 인프런 9강 "style 속성을 이용해서 CSS 사용하기" ** style 속성 안에는 CSS로 와야 함 - 글자 색상 변경 - JavaScript : 문자열 JavaScript의 글자색 변경됨 - 배경 색상 변경 - developer.mozilla.org/ko/docs/Web/CSS/background-color 참고 - JavaScript : 해당 문자열의 배경 색상 변경 인프런 10강 "style 태그를 이용해서 CSS 사용하기" - 내용 중 특정 부분을 진하게 하고 싶은 경우 (제목이 아닌 경우) - JavaScript : JavaScript만 볼드체로 강조해줌 - ... JavaScript ... - 처음 상태와 전혀 변화 없음 - ... JavaScript ... - 클래스명으로 선언해 준 경.. 더보기 [WEB2 - JavaScript] 변수와 대입 연산자, 웹브라우저 제어 인프런 7강 "변수와 대입 연산자" 변수 (variable) - 대입연산자 '=' : 오른쪽의 값을 변수에 대입한다는 의미 - x = 1; → x라는 변수에 값 1 대입 - 1 = 2; → error 발생 ** variable vs constant - constant (상수) : 1과 2와 같은 변하지 않는 수 - 변수를 사용하는 이유 - ex) 아무 의미 없고 정말 긴 문자열에서 반복되는 내용을 변수로 넣어준다면 (예를 들어 이름) 다른 문자열로 수정도 가능해지며, 훨씬 편리함 인프런 8강 "웹브라우저 제어" - : 웹 페이지 전체를 감싸는 태그 - : 배경은 검정 / 글자는 흰색으로 설정 - CSS에 대해 약간은 알고 있어야 함 더보기 이전 1 2 3 다음
