HTML (5) 썸네일형 리스트형 [JavaScript] To-do List 만들기 - 1 (박스 만들기, list의 marker로 checkbox 사용) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 아래 코드는 1~4번까지 완료된 코드이다 To-Do List 리스트의 marker를 체크박스로 바꾸는 과정에서 어려움을 겪었는데, 이 문제는 CSS default로 설정되어 있는 disc 형태의 marker를 삭제하고(list { list-style-type: none; }), JS checkbox 요소를 추가해주면 된다. (for문의 createElement) 이.. [JavaScript] 객체와 메소드와 반복문 객체(object): 서로 연관된 함수와 변수를 같은 이름으로 그룹핑해 잘 정리하기 위한 도구 → 함수 위에 존재 매소드(method): 객체에 속해있는 함수 1. 객체 생성 객체는 { }를 이용해 생성한다 Object Create Object 정보를 넣을 때, 정보에 대한 이름을 함께 넣어줘야한다. 위 코드에서는 grogrammer과 designer가 정보에 대한 이름이고, egoing과 leezche가 정보이다. 만약 이미 존재하는 객체에 정보를 추가하고 싶을 땐, 객체.정보에 대한 이름 = 정보 와 같은 형태로 작성해주면 되는데, 정보에 대한 이름에 공백이 포함되어 있다면 배열과 같은 형태로 정보를 추가할 수 있다. 2. 반복문 Object Iterate JavaScript에서의 반복문으로 객체에 .. [JavaScript] 반복문과 함수 반복문으로 모든 a 태그를 찾아 a 태그의 style을 바꿔주었다. 또한, a 태그의 style을 바꿔주는 부분을 함수로 만들어서, 같은 내용을 반복해 사용할 경우에도 코드가 중복되지 않도록 했다. 1. 반복문 WEB hello world CSS JavaScript 자바 스크립트를 활용해 다크모드&라이트 모드 만들기~ 위 코드에서 onclick 안에 있는 코드가 while문을 활용해 모든 a 태그를 찾고, dark모드가 될 경우엔, 글씨 색을 powderblue로, light모드가 될 경우엔, 글씨 색을 blue로 바꾸어 주었다. document.querySelectorAll('a')은 모든 a 태그를 찾아 배열에 담아주는데, 반복문을 통해 배열에 담긴 모든 a 태그의 style을 바꿔줄 수 있다. 2... [JavaScript] button과 이벤트 버튼의 이벤트 속성으로는 무조건 JS가 와야한다. 1. 버튼 만들기 을 사용하면, button을 만들 수 있다. value는 button위에 나타날 글자를 설정해줄 수 있다. 2. onclick 이벤트 onclick 을 사용하면 버튼을 눌렀을 때 일어날 이벤트를 만들어줄 수 있다. 위 코드에서는 버튼을 눌렀을 때, " button clicked! "라는 알림이 뜨도록 했다. onclick 이외에도 onchange, onselect 등 많은 이벤트들이 있다. 3. 나이트 모드와 라이트 모드 구현 나이트 모드와 라이트 모드 onclick 에 document.querySelector('body')는 'body' 태그 내에 적용할 효과라는 의미이고, .style.backgroundColor(또는 color)은 .. [JavaScript] JS vs HTML JavaScript 는 동적이다. → html 위에서 작동하며, 사용자와 상호작용한다. 1. JavaScript를 html 코드에 넣기 JavaScript 1 태그 안에 HTML 1+1 html과 JavaScript의 차이점은 JavaScript는 동적이고, html은 정적이라는 것이다. 이전 1 다음
