기초공사 (html,css,javascript)

// //1. String concatenation console.log("my" + "cat"); // my cat console.log("1" + 2); //12 console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals:1+2=3 //2. Numeric operators console.log(1 + 1); //add console.log(1 - 1); //substract console.log(1 / 1); //divide console.log(1 * 1); //multiply console.log(5 % 2); //remainer console.log(2 ** 3); //2의 3승.. //3. Increment and decremen..

// 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

// html에는 img 태그가 없는데 생겼다. DOM트리에 추가가 한것이고. body 요소 내 표시하고자 할때는 document.body.appendChild()를 사용한다. 똒같은 프로퍼티와 메서드를 가지고 있는 객체를 반복해서 만든다면, 그만큼 메모리 공간이 낭비된다. 이때 생성자 함수와 클래스를 유용하게 사용할 수 있다. 생성자 함수와 클래스는 비슷한 개념이지만, ... 객체의 틀을 만들때 함수를 사용하는데 이 함수를 생성자 함수라고 한다, 생성자 함수를 사용해서 찍어내는 객체를 인스턴스 객체라고한다. 1. new예약어를 사용해 인스턴스 만들기 today = new Date( )

// 클래스함수로 정의하고, 인스턴스 객체를 만들었다. 버튼을 클릭하고, 사용자가 입력한 값을 전달받고, 결과값 위치에 출력한다. 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 *..

//생성자함수로 객체만들기 소스에서 보는 것처럼 생성자의 함수 이름의 첫 글자는 항상 영문자의 대문자로 쓴다는 것을 꼭 기억한다.!! Book( ) 함수에서는 매개변수로 title과 pages, done을 받는다. 생성자함수에서 사용하는 this는 이 생성자 함수를 사용해서 만들어지는 인스턴스 객체를 가리킨다. 여기에서 this는 인스턴스 객체인 점프 투 파이썬이나 웹표준의 정석을 의미한다. //

// 클래스로 객체만들기 01 클래스 선언하기 클래스를 만들때는 class예약어를 클래스명을 작성한다. 중괄호 안에서는 ( { } ) 안에서 프로퍼티와 메서드를 분리해서 정의한다. constructor( ) 함수의 안에는 프로퍼티를 넣고 밖에는 메서드를 정의한다. // // // 클래스로 객체만들기 02 // 클래스를 정의 했으면 new예약어를 사용해서 인스턴스 객체를 만들수 있고, 각 객체의 내용을 표시할 수 있다.

// 등록하기 버튼을 클릭하면 이름과 전공 밑의 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..