프론트개미

01. 계산된 프로퍼티 객체를 생성할 때 프로퍼티를 변수로 받아 오거나 계산을 해서 만들 수 있다. let a = '나이'; const user = { name : 'Ant', [a] : 27, [2+3] : 5, ['취미를' + ' 적어주세요'] : '축구' }; 이렇게 user라는 객체를 생성해주면 [a]에는 '나이'라는 값이 들어가고 [2+3]과 ['취미를' + '적어주세요']에는 각각 5와 취미를 적어주세요라는 키값이 적용된다. 02. 객체 메소드 - 객체 복제 Object.assign( ); 객체를 복제할 때 단순히 객체의 이름으로 다른 변수를 생성해주면 생성해준 객체의 데이터 값을 바꿀 때 기존 객체의 값도 같이 변경이되는 오류가 발생한다. 이에 있어서 Object.assign( ); 을 사용..

배열안에는 문자, 숫자, 불린, 객체, 함수등이 포함될 수 있다. 이러한 것들을 배열 바깥에서 추가, 삭제하는 방법을 정리할 것이다. 01. push push는 배열의 끝에 새로운 요소를 추가해주는 방법이다. let week = ['월요일','화요일','수요일']; week.push('목요일'); 한 개만 가능한게 아닌 여러개도 추가가 가능하다. 이렇게 적용하면 배열의 맨 마지막에 목요일이 추가가 되어서 월요일, 화요일, 수요일, 목요일로 배열이 구성된다. 02. pop pop은 배열 끝에 마지막 요소를 삭제하는 방법이다. let week = ['월요일','화요일','수요일']; week.pop(); 이렇게 적용하면 맨 마지막에 위치한 수요일이 사라지고 월요일과 화요일만 배열에 남게된다. 03. unsh..

01. 화살표 함수(arrow function)이란? 함수(function)을 보다 간결하게 작성할 수 있는 방법. 02. 화살표 함수(arrow function)로 변경하는 법 function showError(){ console.log('error'); } 먼저 showError라는 함수를 화살표 함수로 변경을 하면 let showError = () => { console.log('error'); } 이렇게 사용이 가능하다. 함수의 이름을 변수로 선언한 뒤에 매개 변수와 실행문장 사이에 => 화살표를 넣어준다. 다음으로 매개 변수가 있는 함수이다. const sayHello = function(name){ const msg = `Hello, ${name}`; console.log(msg); } 이렇게..

숫자를 랜덤으로 가지고 올 수 있는 Math.random( ); 을 이용한 예제입니다. - html + 행운번호 추첨 - css #lotto{ width:1920px; position:relative; margin:0 auto; } #lotto div{ border:2px solid #aaa; width:100px; height:100px; float:left; margin-top:50px; margin-left:30px; text-align: center; line-height:100px; font-size:30px; border-radius:5px; } #lotto #plus{ border:none; font-size:40px; } #lotto #bonus{ color:rgb(32, 118, 255)..

01. 배열(Array) 생성하는 법 const arr1 = new Array(); const arr2 = [1,2]; object를 만드는 것 처럼 new 를 사용하여 배열을 만들 수 있고, [ ] 를 이용하여 배열을 만들 수가 있다. 배열은 index번호를 가지는데 현재 위에 숫자 1,2 는 index번호로 0,1 이다. 왜냐하면 배열의 시작은 0부터 시작하기 때문이다. 02. 배열(Array)의 index 이 index번호를 활용해서 제일 마지막에 있는 데이터를 부를 수 있는 방법은 const arr1 = new Array(); const arr2 = [1,2]; console.log(arr2[arr2.length-1]); 배열의 length에 -1을 해주면 마지막에 있는 데이터를 부를 수 있다. ..

function과 if문을 이용하여 만든 자판기 예제입니다. - html 아메리카노(4000원) 자몽에이드(4500원) 아이스티(3700원) 1000원 500원 100원 현재 금액 : - css #vending{ width:500px; height:200px; border:1px solid #ddd; } .drink{ text-align: center; margin-top:20px; } .drink button{ width:30%; } .cash{ margin:20px 0 0 19px; } #price{ margin:45px 0 0 19px; font-weight: bold; } 자바스크립트 예제이기 때문에 간단하게 틀만 짜서 제작했습니다. 이렇게 코드를 입력하면 출력되는 화면입니다. 화면을 통한 자바스..

01. Object 란? 클래스를 이용해서 실제로 데이터를 넣어서 만드는 것. 또한 object는 key : value 로 구성되어있다. object를 생성하는 방법은 2가지가 있다. const obj1 = {}; const obj2 = new Object(); { } 를 이용하여 만드는 오브젝트와, new라는 키워드를 붙여서 class를 이용한 방법이 있다. const ant = {name : 'ant', age: 27}; function print(person){ console.log(person.name); console.log(person.age); } print(ant); 이와같이 ant라는 object를 만들어 준 후 함수에 적용을 시키면 person에는 object인 ant가 대입이 되면서 ..

01. class란? 속성(field)와 행동(method)이 종합적으로 모여있는 것. class Person{ constructor(name,age){ this.name = name; this.age = age; } speak(){ console.log(`${this.name}: hello!`); }; } class라는 키워드를 이용해서 사람이라는 class를 만들고 constructor이란 생성자를 이용하여 나중에 오브젝트를 만들어 정보를 대입한다. class Person{ constructor(name,age){ this.name = name; this.age = age; } speak(){ console.log(`${this.name}: hello!`); }; } const ant = new Pe..

01. while문 예제 while문을 사용하여 1~100까지 숫자의 합계를 구하는 방법이다. var sum = 0; var i = 1; while(i card){ high = n; alert("정답은 " + n + "보다 작은 수 입니다."); } else if(n < card){ low = n; alert("정답은 " + n + "보다 큰 수 입니다."); } } } } 1~100 을 초과하거나 소수의 숫자를 입력했을 때 정확한 값을 입력해달라는 값과, 사용자가 입력한 값이 랜덤으로 나온 숫자를 맞춘 true값이 나왔을 때 그리고 사용자가 입력한 값이 정답보다 크거나 작았을 때를 if문으로 표현한 방법이다. 여기서 정답을 맞춰서 값이 true가 되면 break;가 실행되며 if문이 있는 바로 상위 w..

01. 반복문 for (싱글루프) ① 카운터 변수를 기준으로 명령을 여러번 실행한다. (false가 될 때까지) ② 여러 명령을 늘어 놓지 않고 소스를 간단하게 작성 가능. ③ 소스의 양이 줄어 가독성이 높고 실행속도가 빨라진다. ④ 반복 횟수가 기준이라면 for문을 사용한다. var sum = 0; for( var i = 1; i < 10; i++){ sum += i; } : 먼저 var i = 1; 로 초기화를 시켜준 후 i < 10; 에서 i 값이 true라면 i++가 아닌 sum += i;를 먼저 실행 시켜준다. 그리고 i++(후위증감)을 통해서 i 의 값을 1 올려주고 다시 var i = 1;로 초기화를 해주는 것이 아닌 i < 10; 으로 돌아가 값이 false가 나올 때까지 반복을 해준다. ..