coding with cong

DOCTYPE html> 생성자 함수 클래스, 리터럴 객체(리턴할수있는객체), 생성자 함수를 통해 객체 생성 //클래스 생성 - 리터럴 객체(비어있는객체) 생성 - 생성자 함수 생성 //정의할 프로퍼티(멤버변수) : firstName., lastName, age, address //메서드 : 함수를 호출하면 프로퍼티의 값이 출력 (toString같은 개념) class Make{ // 생성자 constructor(firstName,lastName,age,address){ this.firstName = firstName; this.lastName = lastName; this.age = age; this.address = address; } //출력메서드 toString(){ // console.log(th..

DOCTYPE html> 생성자 함수 클래스, 리터럴 객체(리턴할수있는객체), 생성자 함수를 통해 객체 생성 //클래스 생성 - 리터럴 객체(비어있는객체) 생성 - 생성자 함수 생성 //정의할 프로퍼티(멤버변수) : firstName., lastName, age, address //메서드 : 함수를 호출하면 프로퍼티의 값이 출력 (toString같은 개념) class Make{ // 생성자 constructor(firstName,lastName,age,address){ this.firstName = firstName; this.lastName = lastName; this.age = age; this.address = address; } //출력메서드 toString(){ // console.log(th..

함수와 파라미터 (arguments) : 자바스크립트의 파라미터 특징과 기능 파라미터의 개수와 관계없이 함수나 메서드의 이름이 같다면 호출가능 파라미터의 개수와 불일치하여 값을 받지 못하는 파라미터는 undefined 처리 값을 받아오지 못하는 파라미터가 undefined 일 경우, 별도로 파라미터에 기본값을 설정할 수 있음 => optional parameter 옵셔널 파라미터 모든 파라미터를 관리하는 arguments라는 프로퍼티를 이용하여 파라미터를 배열에 담아 사용할 수 있음 프로토 타입의 속성(프로퍼티)을 사용하는 방식 (단, 옵셔널 파라미터는 저장하지 않는다) 옵셔널 파라미터는 다른 파라미터보다 항상 뒤에 있어야함 사용 function testFun(p1, p2, p3, p4, p5=1){ c..

JSON : Javascript Object Notation 자바스크립트 객체 표기법 데이터 요청 및 응답처리에 필요한 데이터의 표준형식을 제공하는 타입 백앤드(서버)언어의 종류에 상관없이 데이터 송수신 단일 형식으로 통일 많은 양의 데이터를 실시간으로 전송하는 경우 사용 자바스크립트의 객체 형태를 갖고 있기떄문에 구조파악이 잘되고, 제작도 쉽다 ( 특히 웹 분야의 자바스크립트가 모든 프론트에 호환된다는 점을 활용 ) 입출력시에는 JSON을 사용! 왜? 데이터의 전송은 전부 String타입으로 이루어짐 서버로 데이터를 보낼때 : json to string > JSON.stringify(jsObject); 서버로부터 데이터를 받을때 : string to json > JSON.parse(stringData)..

랜덤 숫자 생성 버튼 다시하기 정답! " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>업다운 게임title>head> body>      h1>        button type="button" id="ranBt..

DOCTYPE html> 정규표현식 let testText = 'This is Javascript Regular Expression'; // 전체에서 la가 포함된 것을 배열로 출력 console.log(testText.match(/[la]/g)); // l과 a 추출 console.log(testText.match(/la/g)); // la 추출 console.log(testText.match(/is/g)); // is 추출 const fileName = ['abc.jpg', 'main.gif', 'doc.pdf', 'movie.mpg', 'code.js']; // 배열을 탐색해 하나의 문자열에 png, jpg, jpeg, gif가 있는지 확인 출력 for(const file of fileName){ ..

DOCTYPE html> 배열 순환 탐색 메서드 배열의 순환할 수 있는 구조를 이용하여 특정 기능을 할 수 있는 메서드 제공 const fruits = ['apple', 'Orange', 'apple', 'banana']; // 뒤쪽 apple에 있는 'l' 찾기 let key = fruits[fruits.indexOf('apple',1)]; //1번지부터 검색해 나온 apple console.log(key); // let key1 = fruits[fruits.indexOf('apple',1)].indexOf('l'); //1번지부터 검색해 나온 apple의 l의 위치: 3 let key1 = fruits[fruits.indexOf('apple',1)].indexOf('app')+'app'.length;..

DOCTYPE html> 배열 순환 배열의 순환할 수 있는 구조를 이용하여 특정 기능을 할 수 있는 메서드가 제공됨 array.forEach(callback function) : 일반 반복문과 유사한 형태 array.map(callback function) : (forEach 수행) + 연산결과를 리턴하여 새로운 배열을 만들어줌 array.filter(callback function) : map처럼 수행하면서 연산결과를 리턴하는데, 비교연산의 결과에서 true에 해당하는 값만 필터링해서 리턴함 const numArr = [3, 2, 1, 5, 10, 13, 12]; const strArr = ['a', 'f', 'g', 'k', 'm']; // 문자와 숫자가 섞여있어도 상관없이 사용 가능 // elem_..

DOCTYPE html> 데이터 구조화 많은 량의 데이터가 실시간으로 전달 되어야할떄 가장 효율적인 방식 = 구조화된 텍스트 구조화된 텍스트를 만들기 위해 json 데이터를 많이 활용하고 있음 자바스크립트의 객체 형태를 갖고 있기떄문에 구조파악이 잘되고, 제작도 쉽다 특히 웹 분야의 자바스크립트가 모든 프론트에 호환된다는 점을 활용 데이터수집, 출력용으로 거의 모든 플랫폼 서비스에서 사용되고 있음 // 네이버파이넨스의 top종목 데이터를 구조화 해보기 const top = { '거래상위': [ { name: '이화전기', price: 1168, updown: 259, ratio: 28.49 }, { name: 'KODEX 200선물인버스2X', price: 2620, updown: 5, ratio: 0...

DOCTYPE html> 배열의 정렬 배열의 정렬은 문자기반! array.sort() : 문자기준 오름차순 정렬 (ascending) array.reverse() : 문자기준 내림차순 정렬 (descending) 정렬할 배열의 원소가 숫자인 경우 : 콜백함수를 이용하여 내부 연산하여 정렬 (콜백 함수 : 바로 사용하는 함수) 순차 정렬 (오름차순) array.sort(function(a,b){ return a- b; }) // a와 b는 배열의 첫번째 요소, 두번째 요소 // a와 b를 비교하여 작으면 -1, 크면 1을 리턴해서 순서를 바꿔주는 구조 역 정렬 (내림차순) array.sort(function(a,b){ return b - a; }) // myArr : 1~45까지의 랜덤 숫자 6개를 생성해..