inflearn 썸네일형 리스트형 [WEB2 - JavaScript] 객체 인프런 30강 "객체 쓰기와 읽기" - coworkers 라는 배열에 사전형식으로 데이터 넣어주기 ('key' : 'value') 형식 - value를 가져오기 위해 "배열명.키" 활용 - ex) coworkers.programmer - 초기에 선언하지 않고 추가도 가능 : 배열명.키 = "값" - ex) coworkers.bookkeeper = "duru"; - 띄어쓰기는 할 수 없기 떄문에 띄어쓰기가 존재하는 경우 다음과 같이 접근하여 추가 혹은 데이터 읽기 가능 - ex) coworkers["data scientist"] = "taeho"; : 추가할 때 - ex) coworkers["data scientist"] : 값 불러올 때 인프런 31강 "객체와 반복문" - 다음과 같이 반복문 사용하여 k.. 더보기 [WEB2 - JavaScript] 함수 인프런 25강 "함수의 기본" 함수 - function, method라고 부르기도 함 ** 어떤 것이 반복해서 출력되어야 할 때에, 반복문을 주로 사용하지만, 규칙이 없이 반복되는 경우도 존재 - 그럴 경우에는 함수를 만들어 사용 - line 12-13와 line 15-16이 동일한 것 확인해보면, 애매하게 다르기 때문에 반복문 사용은 어려움 - 반복되는 부분을 함수로 생성하려고 함 - script 태그 내부만 본다면, two라는 함수를 생성하여, 해당 부분에는 함수를 넣어주어 결과는 동일하지만, 코드는 간결하게 수정할 수 있음 인프런 26강 "매개변수와 인자" - Parameter & Argument 소제목 아래에 1+1 계산한 값 출력하도록 작성 - 동일하게 출력되도록 하되, 함수 내에 넣기 - 동일.. 더보기 [WEB2 - JavaScript] Lecture 23. 배열과 반복문의 활용 인프런 23강 "배열과 반복문의 활용" 이전 강의에서 학습한 배열과 반복문을 활용하여 night_day 실습에 활용하는 연습 - querySelector('a') 를 사용하면, a태그 하나만 가져오기 때문에 검색해보았을 때에, 검색하는 태그에 해당하는 것들을 모두 가져오고 싶을 때에는 document.querySelectorAll('a') 사용해야 함 - developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll 참고 - 결과는 정확하게 말하면 배열은 아니지만, 배열의 형태로 가져온다고 할 수 있음 - 예를 들어 결과를 list 이름의 배열에 저장한다고 하면, list.length를 통해 배열 원소의 개수 파악 가능 - line 10 : target.. 더보기 [WEB2 - JavaScript] Lecture 22. 배열과 반복문 inflearn JavaScript 22강 "배열과 반복문" - 코드에 여러 내용 추가해주면 다음과 같이 화면에 표현됨 - 같이 들어갈 내용이 여러 줄에 걸쳐 표현되었기 때문에 배열에 넣어주어 간단하게 표현 가능 ** 배열과 반복문 이용한 것 뿐 이전 화면과 차이는 없음을 확인할 수 있음 - 만약 coworkers 배열에 하나의 원소를 추가한다면, while문 조건 수정이 없다면 기존과 동일한 결과 확인 가능 - 하지만, coworkers 배열의 원소들은 변함 없지만, 조건이 원소의 개수보다 큰 수로 변경된다면, 나머지 값은 undefined로 출력됨 ** 더 좋은 방법은 직접 숫자를 지정해주는 것이 아니라, 배열 원소의 개수 구하는 함수 활용 (length) 이렇게 코드 실행 시킨다면 결과는 동일하게 .. 더보기 [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 비교연산 진행 후 출력 - 비교연산 수행 시 는 > 사용 ↓ 더보기 이전 1 2 다음
