Web/JavaScript (7) 썸네일형 리스트형 [과제 #1] 바닐라 자바스크립트로 To Do App 만들기 웹 크기 조절 시 박스가 원하는 모양으로 커지지 않아서 padding, margin값 조절하면서 계속 헤맸는데, 처음 설정할 때 input 부분 width를 80%로 해서 양쪽에 남게 나오는 것이었다. width: 100%로 변경 후 남는 부분 없이 꽉 차게 수정. document.querySelector(“` “); 통해 document에서 매치되는 첫번째 요소 가져오기 vercel 배포 방법 새로 알게 되었다. 처음 배포한 후 설정에 들어가서 브랜치를 수정해도 계속 메인 브랜치 화면이 떴는데, 코드에 수정사항이 생긴 후 다시 push하면 내 브랜치로 잘 뜬다. 추가 버튼에 커서를 올렸을 때 색이 변하게 하고 싶어서 button:hover background-color랑 color값 따로 설정. dis.. 객체 - 정보의 양이 많아졌을 때 정리 정돈하기 위해서 사용 - 순서에 따라 정보를 저장 - 배열 리터럴: 대괄호 [] - 순서 없이 정보 저장 - 다시 꺼낼 일이 있기 때문에 마구잡이로 집어넣으면 안 되고 이름과 함께 저장해야 한다. - 이름이 있는 정리 정돈 상자 - 오브젝트 리터럴: 중괄호{} - 객체의 쓰기와 읽기 → 객체 생성 - 정보를 그냥 넣으면 안 되고 이름을 붙여서 넣어야 한다. (ex. "programmer" : "egoing") → 객체에서 정보 꺼내오기 - coworkers.designer의 .은 object access operator, 즉 coworkers라는 객체에 접근하는 operator이다. - document.write(): document 객체에 html 콘텐츠를 삽입 - +.. 함수(Function) 위 예시의 input 태그가 만약 1억 개가 된다면, 즉 1억 개의 사용처에서 이러한 동일한 작업을 수행하려 한다면 수정사항이 생겼을 때 하나하나 바꿔줄 수도 없고, 비효율적으로 긴 코드가 될 것이다. 이와 같은 불필요한 반복을 피하고 내용을 쉽게 수정할 수 있도록 "함수(function)"를 활용한다. head 부분의 안에 새로운 함수를 function 키워드로 만들어준다. 함수의 이름을 nightDayHandler로 지정해주고 전에 input 태그에 작성한 코드를 함수에 그대로 작성한다. 이때 input 태그의 onclick이라는 event 안에서 this는 event가 소속되어있는 태그, 즉 input 태그를 가리키도록 약속되어있는 것이다. 그러므로 input 태그와 독립된 함수를 만들게 되면 th.. Array&Loop 1) 변수 fruits에 배열 만들어 원소 저장 var fruits = ["apple", "banana"]; 2) 배열의 길이 측정 fruits.lenth 3) 인덱스를 이용해 배열의 원소 선택 fruits[0] fruits[fruits.length-1]: 배열은 0번째부터 시작하기 때문에 마지막 원소는 (length-1)번째에 위치한다. 따라서 fruits의 (fruits.length-1)번째 원소는 배열의 가장 마지막 원소를 뜻한다. 4) 배열의 끝에 원소 추가 fruits.push("orange"); 5) 배열의 끝부터 원소 삭제 (마지막 원소 삭제) fruits.pop(); 배열의 앞부터 원소 삭제 (첫번째 원소 삭제) fruits.shift(); +) document.write: 열린 문서에 텍.. 리팩토링 - 전과 동일하게 작동하지만 코드 자체를 좀 더 효율적으로 바꾸는 과정 - 가독성을 높이고 유지 보수하기 쉽게 만들며, 중복된 부분을 최대한 없애는 방향으로 코드를 개선 - 소프트웨어의 규모가 커질수록 틈틈이 리팩토링 과정을 거쳐야 좋은 프로그램을 만들 수 있다. → 이 예시 코드의 윗부분에 버튼이 하나 있고, 아래에 버튼을 하나 더 만들고 싶어 아래쪽에 버튼을 추가한 모습이다. 원래는 누를 때마다 day/night이 바뀌어가며 나오도록 짠 코드인데 위에 이미 input 태그의 id 값을 night_day로 설정했기 때문에, 아래에 똑같은 코드를 복사 붙여 넣기 해 night_day가 두 개가 되어 제대로 작동하지 않고 있다. → 위의 문제를 해결하기 위해 id값을 night_day2로 바꾸니까 버튼의 .. 조건문 → HTML에서 style 속성을 이용해 CSS의 속성을 태그에 첨가할 수 있었던 것처럼 JavaScript에서도 querySelector 메소드가 CSS 선택자를 사용해 특정 요소를 찾는다(선택한다). document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color='white'; → querySelector 메소드를 통해 body 부분을 찾고, style 속성을 통해 그 body의 backgroundColor는 black, text color는 white로 설정 ex) document.querySelector('.example'): example이라는 class명을 가진 요소.. JavaScript 개요 - Javascript를 이용하면 동적인, 사용자와 상호작용할 수 있는 웹 페이지를 만들 수 있다. 따라서, 우선 html을 이용해 웹 페이지를 만든 후, javascript를 이용해 사용자와 상호작용할 수 있도록 기능을 추가한다. 이로써 html의 정보와 javascript의 기술이 융합된 웹 페이지를 만들 수 있는 것이다. - 기본적으로 javascript는 html 위에서 동작하는 언어다. 1) - 웹 브라우저한테 html의 코드로 javascript가 시작된다고 알리는 태그 - 태그 안쪽의 코드를 javascript로 인식 - html은 정적, javascript는 동적인 언어 - html은 1+1을 입력하면 그대로 출력 / javascript는 1+1을 2로 계산해 출력 2) event - 웹 .. 이전 1 다음
