coding with cong

DOCTYPE html> JSON const stringData = '{"id":"1234", "type":"donut","name":"cake",'+ '"image":{"url":"img/0001.jpg","width":"200","height":"200"},'+ '"thumbnail":{"url":"img/thumbnail/0001.jpg","width":"20","height":"20"}}'; let parseData = JSON.parse(stringData); console.log(parseData); //console에 key : value 형식으로 출력해보기 //for in으로 접근하기 for(const s in parseData){ if(s == 'image'){ //image의 경우 co..

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

랜덤 숫자 생성 버튼 다시하기 정답! " 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개를 생성해..

DOCTYPE html> 배열 관련 메서드 배열관련 메서드 : 유사(연관)배열 에서는 사용제한이 있음 1. join() : 배열 원소 사이에 문자를 삽입하여 새로운 문자열을 생성 2. push(value) : 배열의 마지막에 value를 추가 => push 후 배열의 길이를 리턴 (array[array.length]=value;와 동일 효과) 3. unshift(value) : 배열의 가장 앞에 원소를 추가 => 추가 후 배열 길이 리턴 4. pop() : 배열의 마지막 원소 제거 => 제거한 원소의 값 리턴 5. shift() : 배열의 첫 원소를 제거 => 제거한 원소의 리턴 const ourClass = []; ourClass[ourClass.length] = '정은'; ourClass[ourCla..