기초공사 (html,css,javascript)

// https://donghyun-dev.tistory.com/10 JavaScript - 5. 반복문 ✔ 자바스크립트의 반복문에 대해 정리합니다. 반복문에 대해서 :) 반복문은 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 하는 실행문이다. → 조건식을 통해 반복 횟수 donghyun-dev.tistory.com for (초깃값; 조건식; 증가식) { ..... } for문은 배열에 있는 값을 하나씩 가져온다. 그러므로 배열의 갯수를 알아야한다. // forEach 문 배열명.forEach(콜백 함수) {.........} //forEach문으로 배열값 가져오기 const students = ["park", "kim", "Lee", "kang"]; students.forEach(fu..

// 검색해보면 다 나오지만, 책을 보면서 정리한다는 생각으로 1. if....else if....else if(조건) { 조건이 맞을때 실행할 명령 } else if (조건2) { 조건2가 맞을때 실행할 명령 } else { 어떤 조건에도 맞지 않을 떄 실행할 명령. } 2. if

// 클래스함수로 정의하고, 인스턴스 객체를 만들었다. 버튼을 클릭하고, 사용자가 입력한 값을 전달받고, 결과값 위치에 출력한다. 1.button addEventListener 2.....value; 이부분을 헤맸었다.(입력한 값을 어떻게 가져오지? 했었다!value라니!!! 3.result.innerText 사용한다. //class로 객체만들기. class Cylinder{ constructor(cylidame , cyliheight ){ this.diameter = cylidame; this.height = cyliheight; } //methods getVolume(){ let radius = this.diameter / 2; //반지름 return(Math.PI * radius * radius *..

// 등록하기 버튼을 클릭하면 이름과 전공 밑의 td밑에 추가되어 화면에 출력된다. //html 참가자 명단 이 름 전 공 등록하기 이 름 전 공 // js /* 마무리문제 : 이름과 전공을 입력하면 그 값을 받아서 표에 표시하는 소스를 작성해보기 생각노트 1. 변수지정 - 이름 / 전공 2. input#username.value = 이름칸에 입력하는 문자를 표시한다 input#major.value = 전공칸에 입력하는 문자를 표시한다. 3. 노드추가 -새로운 tr요소를 만든다. 요소노드추가 document.crateElement(요소명) -새로운 td요소를 두개 만든다. 텍스트노드추가 - input의 값을 가져오는 것이므로 innerText 아니면 innerHTML -2개의 td요소를 tr요소에 연결한..

마무리문제2 컴퓨터를 사용하다 보면 화면의 오른쪽에 실시간으로 알림 메세지가 나온다. 이것과 비슷한 효과를 만들어보자 [클릭] 버튼을 클릭할 떄마다 화면의 오른쪽 위에 '알림내용이 표시된다.' 라는 메세지를 표시해보자 그리고, 메세지가 계속 화면에 나타나면 불편하므로 나타났던 메세지가 3초 후에 자동으로 삭제되도록 해보자 실행 gogogo~~ // html 클릭! // css .noti { margin:1rem; padding:1rem; background-color:#eee; border-left:3px solid #222; } // js /* 생각노트 : 1.알림내용이 표시될 영역 을 웹브라우저 오른쪽위에 배치하고, 나중에 만들 새로운 요소에 연결한다. 2. 버튼을 클릭하면 div요소를(알림메세지 내..

1.Book List 만들기 [저장하기]버튼을 클릭하면 '제목'과 '저자'필드에 입력된 내용을 가져와서 bookList영역에 태그와 함께 추가하자. 텍스트 필드 내용은 title.value처럼 텍스트 필드 요소의 이름 뒤에 .value를 붙여서 가져올 수 있다. //html Book List 제목 저자 취소하기 저장하기 // js /* 1. '저장하기'버튼을 클릭하면 제목,저자쓴것이 bookList에 표시가 되고, ul인거보니 li가 생길것이므로 li를 추가하는 요소노드를 입력하자. : 제목,저자 쓴것을 가져온다.--> 변수로 지정 :저장해야 하므로 --> 변수 지정 2. '취소하기' 버튼을 클릭하면 삭제된다. */ /* 생각노트 -클릭하면 뭐가와야해? 제목,저자 입력값을 가져와야한다. title.val..

DOM을 활용해 웹 문서에 필요한 요소를 추가, 삭제하는 방법을 살펴보자. DOM은 웹 문서의 구조를 부모 노드와 함께 형제 노드처럼 계층 구조로 표현할 수 있다. DOM에 접근할 때 querySelectorAll( ) 메서드를 사용하면 여러 개의 노드를 한꺼번에 가져올 수 있는데 이렇게 가져온 다양한 노드 정보를 저장한 것을 '노드리스트'라고 한다. 1.웹 문서에 새로운 노드 추가하기 1. 요소 노드 만들기 - createElement( ) 메서드 : 어떤 태그를 사용할지 태그를 만들어 주는 것이라고 생각하면 된다. document.creatElement(요소형) ex) let newP = document.createElement("p") // ....가 추가된다. 새로운 노드만 만들어진 거다, 그 안..

간단한예제 스타일변경하기 1. li color 변경하기 2. li '저자'클릭하면 alert뜨기 // html Do it! HTML+CSS+자바스크립트 웹 표준의 정석 저자 고경희 발행일 2021-01-22 쪽수 648쪽 ISBN 979-11-6303-221-2, 13000 상세 설명 보기 / 닫기 스타일변경하기 -------------------------- 웹 분야 1위! 그만한 이유가 있다! 키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다! -------------------------- 웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ ..

//마무리문제 Do it! HTML+CSS+자바스크립트 웹 표준의 정석 저자 고경희 발행일 2021-01-22 쪽수 648쪽 ISBN 979-11-6303-221-2, 13000 상세 설명 보기 / 닫기 -------------------------- 웹 분야 1위! 그만한 이유가 있다! 키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다! -------------------------- 웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ 배우고 싶다는 많은 독자의 요구를 모아 최신 경향을 반영한 이 책을 집필했다. 웹 개발을 시작하는 입문자도 쉽게..

1.텍스트 필드에 입력한 값 가져오기 자바스크립트에서 value 프로퍼티를 사용하면 폼 요소중 텍스트 필드나 이메일 필드에서 사용자가 입력한 값을 가져올 수 있다. 요소.value 주문 정보 이름 : 연락처 : 주소 : 콘솔 창에 다음과 같이 입력 document.querySelector("#order-name").value --> 이름 필드에 입력한 콘솔창에 출력된다. 2.name 속성값을 사용해 폼 요소에 접근하기 폼요소에 id나 class속성이 없고 name속성만 있으면 name식별자를 사용해 폼 요소에 접근할 수 있다. 간단한예시 '상품'항목에 내용을 입력한 후 자바스크립트를 사용해 입력한 내용을 가져오는 소스를 '콘솔'창에 작성하시오 상품 정보 상품 : 갯수 : document.order.pro..