◎ 생성자 함수 객체를 만드는 함수, 대문자로 시작하는 이름을 사용한다 //생성자함수 functio Product(name, price){ this.name = name; this.price = price; } //객체를 생성 let product = new Product("바나나", 2000); ※ 생성자함수 함수를 만들어 객체를 생성하는 방법 : 생성자함수 생성자함수를 통해 객체의 요소를 받고, 객체를 생성한다 ※ prototype 생성자함수를 통해 만들어진 객체에 method를 요소로 추가하는 방법 : prototype을 사용한다

JSP자체가 태그를 표현할 수도 있지만, 자신이 태그를 표현하지 않고 HTML에게 필요한 데이터만 응답하게 작성해보자 foodList.jsp ["설렁탕","김치찌개","생선구이"] DB에서 받아온 data라고 생각하고 연습한다 ["설렁탕","김치찌개","생선구이"] 직장인이 선호하는 점심메뉴 추가 출력 이렇게 받아오면 data가 string으로 들어오기때문에 eval을 통해 객체화해준다 ["설렁탕","김치찌개","생선구이"] 직장인이 선호하는 점심메뉴 추가 출력 json을 사용하면, 바로 객체화해서 데이터가 넘어오기 때문에 따로 eval()을 사용하지 않아도 된다 ["설렁탕","김치찌개","생선구이"] 직장인이 선호하는 점심메뉴 추가 출력

※ JQuery를 이용해서, Node를 동적으로 작성해보자 직장인이 선호하는 점심메뉴를 사용자에게 입력받고 버튼 3가지를 생성한다 1. 추가버튼 - 추가버튼을 누르면 번호가 없는 목록 (ul)태그에 입력값을 추가시킨다 - 다음값의 입력을 위해 입력창은 버튼을 누르면 초기화된다 2. 테이블버튼 - 테이블버튼을 누르면 추가한 목록들이 하나의 열로 보여진다 3. 초기화버튼 - 보여지는 모든 목록,테이블을 지우고 사용자 입력값도 초기화시킨다 empty() 함수를 사용할 것 empty() ==> 자식의 내용을 삭제하는 함수 예를들어 아래같은 태그가 있다면 $("#test").empty(); 를 적용하면 ul 태그 하위에 있는 내용이 삭제된다 직장인이 선호하는 점심메뉴 추가 목록테이블 초기화 초기 화면 입력창에 값..

※ HTML 태그로 생성되어있는 테이블에 목록을 자바스크립트로 추가해보기 이미 생성되어있는 테이블이 있다 그 테이블에 자바스크립트의 함수를 사용하여 동적인 노드를 작성해보자 사용되는 함수 createElement("태그") : 태그를 생성해준다 createTextNode("태그안에 들어갈 값") : 넣어줄 값을 생성한다 부모노드.appendChile(자식노드) : 부모노드에 자식노드를 추가한다 이름 나이 추가 ※ 위와 같은 방법으로, 사용자의 값을 받아 목록을 추가하는 코드를 작성해보자 직장인이 선호하는 점심메뉴 된장찌개 설렁탕 추가 입력창에 값을 입력하고, 추가버튼을 누르면 목록에 추가된다 ※ 만들어진 table에 사용자가 값을 입력하고 버튼을 누를때마다 행이 추가되게 만들기 이름 나이 주소 번호 이름..

※ 사용자에게 정보를 받아 객체형태로 배열에 저장하기 사용자에게 이름, 나이, 주소, 번호를 받는 input태그를 만들고 추가버튼을 누르면 작성된 정보가 객체형태로 배열에 저장된다 출력버튼을 누르면 console(개발자도구)에 출력되도록 만들어보자 이름 : 나이 : 주소 : 번호 : 배열에 추가하기 배열 출력하기 ※ 사용자에게 정보를 받아 객체형태로 배열에 저장하기 __ 2 사용자에게 이름, 나이, 주소, 번호를 받는 input태그를 만들고 등록버튼을 누르면 작성된 정보가 객체형태로 배열에 저장된다 출력버튼을 누르면 테이블의 형태로, 배열의 요소(객체) 정보들이 출력되도록 변형해보자 이름 : 나이 : 주소 : 번호 : 등록 출력 ※ 사용자에게 정보를 받아 객체형태로 배열에 저장하기 __ 3 사용자에게 이..

※ 배열에 데이터를 추가 push() ※ 사용자가 입력한 값을 배열에 추가해보기 추가 목록출력 ※ 목록출력버튼 없이 추가를 누를때마다 list를 갱신하여 출력해주는 방법 추가

◎ 객체 (Object) 객체를 선언하는 방법 let 객체변수명 = { 속성명: 값, 속성명: "값", ,,,,,, }; 출력하는 방법 console.log(객체변수명); 속성에 접근하는 방법 1. _ '.'으로 접근 객체변수명.속성명 속성에 접근하는 방법 2. _ '[ ]'으로 접근 객체변수명['속성명'] ※ 객체를 생성하고 console에 출력해보기 객체를 출력, 객체속성에 접근하는 두가지 방법 속성에 접근하는 변수를 생성하고, 변수를 통해 객체의 속성에 접근하려면 [ ] 연산자로만 접근가능하다 ※ 객체의 속성만큼 반복하기 ※ 객체의 속성만큼 동적으로 Node작성해보기 회원의 정보 확인 ※ 객체를 배열에 담아 동적인 Node로 테이블 생성해보기 회원의 정보 확인 < ↑↑↓↓ for문을 구성하는 방법을..

let news_list = [ "전세난에 경기도 아파트 신고가 행진…거래 3건중 1건이 최고가", "공격적 영입 약속하더니..토론토, ERA 4.40 투수와 계약", "'타인의 취향' 프랑스 배우 장 피에르 바크리 암으로 별세", "K-진단키트 수출 2989% 증가..중기, 4분기 수출 역대 최고", "코로나에도 초임연봉은 ↑..공공기관은 '무풍지대'"]; 위의 문자열이 담긴 배열을 이용해서, 동적인 뉴스타이틀을 구성해보자 배열에 담긴 제목 5개가 하나씩 출력되게 한다 단, 배열의 제목은 0.2초당 하나의 문자(char)가 더해져서 출력된다(글씨를 작성하듯) 마지막 제목까지 작성되면 다시 처음으로 돌아간다 substr()함수와, +더하기 연산을 사용하여 작성해보자 1. 누적시켜서 출력하기 문자열의 인덱..

◎ 숫자변환 함수 parseInt() : 문자열을 정수로 변환 parseFloat() : 문자열을 실수로 변환 문자열이 숫자의 형태일 때만 가능하다 문자열의 시작이 숫자형태면 숫자형태만 변환된다 // ex ) parseInt("1109동") ==> 1109 ◎ 타이머 함수 '특정시간후에' 또는 '특정시간마다' 어떤 일을 할 때 사용 시간은 밀리초로 지정한다 1초를 나타내려면 1000(밀리초)을 입력한다 setTimeout(함수, 시간) : 특정시간 후에 함수를 실행 //딱 한번 실행 setInterval(함수, 시간) : 특정시간 마다 함수를 실행 //계속 반복 ※ 타이머함수 복합적으로 연습해보기 2021/01/19 - [Web_Front-end/JavaScript] - [JavaScript] 2021...

◎ 익명함수 함수는 head에 작성한다 let 함수이름 = function(){ }; 함수이름(); //함수호출 매개변수로 값을 하나 받아, 값을 1부터 하나씩 누적하여 값까지 더하는 함수 만들기 ◎ 선언적함수 function 함수이름(){ }; 함수이름(); //함수호출 ※ 무명함수와 선언적함수를 만들어보기 선언적함수로는 두 수를 받아, 큰값을 반환하는 함수를 무명함수로는 배열을 받아, 배열의 요소 중 가장 큰 값을 반환하는 함수를 만들어보는 연습 ◎ 화살표 함수 ‘하나의 표현식을 리턴하는 함수’를 만들 때는 중괄호 생략 가능 작성법) 익명함수의 형태에서, function을 제거하고 ()뒤에 => 화살표를 명시한다 ▼ 수를 입력받아, n! 팩토리알을 연산하는 함수를 화살표함수로 만들어보기 ▼ ◎ 매개변..