천천히 차근차근

'use strict'; // 객체 지향 프로그래밍 // class : template // object : instance of a class class Person { constructor(name, age) { this.name = name; this.age = age; } speak() { console.log(`${this.name} : hello !`); } } const ellie = new Person('ellie', 30); console.log(ellie.name); console.log(ellie.age); ellie.speak(); // 두번째 class User { constructor(firstName, lastName, age){ this.first..

function calculate(command, a, b ) { switch ( command ) { case 'add': console.log(a + b); break; case 'minus': console.log(a -b); break; default: throw Error('input again'); } } let num = calculate('minusffff', 1, 2);

console.clear(); 'use strict'; function helloPrint() { console.log('Hello'); } helloPrint(); function log(message) { console.log(message); } log('안녕하세요.'); // Object는 reference에 할당된다. function changeName(obj) { obj.name = 'coder'; } const ellie = { name: 'ellie'}; changeName(ellie); console.log(ellie); // 3. Default parameters (added in ES6) function showM..

for ( let i = 0; i

let i = 3; while ( i > 0 ) { console.log(`while: ${i}`); i--; } do { console.log(`do while : ${i}`); --i; } while ( i > 0 ); do ~while은 먼저 do 블럭 안에서 실행을 하고, 마지막에 조건을 확인한 다음에 조건에 맞다면 멈춘다. 실행을 먼저할지, 나중에 할지를 판단해서 사용하도록 한다.

let nameValue = 'success'; switch ( nameValue ) { case 'test': case 'success': console.log('Bingo'); break; case 'fail': console.log('Fail'); break; } 결과가 같은 조건이라면 case를 겹쳐서 사용할 수 있다.

'use strict'; console.log('Hello World'); let a; a = 3; console.log(a); 'use strict'; 를 입력해주는것 만으로 자바스크립트의 장점이자 단점인 유연함을 조금이나마 타이트하게 관리할 수 있다.

개별 자료 구조에서 한발 뒤로 물러나 순회에 관해 이야기 나누어봅시다. 이전 챕터에서 map.keys(), map.values(), map.entries()와 같은 메서드들에 대해 알아보았습니다. 이 메서드들은 포괄적인 용도로 만들어졌기 때문에 이 메서드들이 적용될 자료구조는 일련의 합의를 준수해야 합니다. 자료구조를 직접 만들어서 사용하려면 기존에 구현된 메서드를 쓰지 못하고 직접 커스텀 메서드를 구현해야 합니다. keys(), values(), entries()는 아래와 같은 자료구조에 적용할 수 있습니다. Map Set Array 일반 객체에도 유사한 메서드를 적용할 수 있는데, Map, Set, Array에 적용하는 메서드와는 문법이 약간 다릅니다. Object.keys, values, entri..

Class 자바스크립트에서는 함수처럼 활용된다. constructor 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 한다. 클래스를 구성하기 위한 껍데기 // Class class Person { constructor(region_, gender_) { this.region = region_; this.gender = gender_; } greetings(val = 'an-nyeong') { console.log(val); } } let person = new Person('Korea', 'male'); console.log(person); person.greetings(); // extends 상속 class American extends Pe..

//방법1 let drink = { caffe: 'latte', coca: 'cola' } let newDrink = { lemon: 'tea', orange: 'juice', drink } console.log(newDrink); //방법2 let drink2 = { caffe: 'latte', coca: 'cola' } console.log('-------------------------') let newDrink2 = { lemon: 'tea', orange: 'juice', ...drink2 } console.log(newDrink2);

Spread Operator 함수를 호출할때 인수로 사용할 수도 있고 배열 안에 들어갈 수도 있고, 객체 안에 들어갈 수도 있다. spread-operator는 rest-operator와는 다르게 함수를 호출해서 사용하기 때문에 중간에 낑겨 있어도 된다. 함수 호출에서 사용하는 방법 function sum(a, b, c ) { return a + b + c; } console.log(sum(10, 10, 10)); // 배열의 합을 계산해주는 함수 활용법 let arr = [10, 20, 30]; console.log(sum.apply(null, arr)); // 배열의 합을 계산하는 spread-operator 사용법 let arr2 = [100, 200, 300]; console.log(sum(.....

Rest Operator 모든 나머지 인자를 표준 자바스크립트 배열로 대체하기 위한 문법 arguments 함수로 전달된 모든 인수를 포함하는 객체 arguments 객체가 가지고 있는다. // 방법1 function printNum(num1, num2 ) { console.log(num1, num2); } printNum(1, 2, 3, 4, 5); // 방법2 function printNum2(num1, num2 ) { console.log(arguments); } printNum2(1, 2, 3, 4, 5); // 방법3 function printNum3(num1, ...num2) { console.log(num1, num2); } // num1의 1을 제외하고 나머지 인자를 배열로 담아서 보여준다..

let array = [10, 20, 30, 40, 50]; // in : key 를 반환 for ( let val in array) { console.log(val); } // in : key를 사용해서 value를 반환 for ( let val in array) { console.log(array[val]); } // of : value를 반환 for ( let val of array ) { console.log(val); } 객체 속성 값을 출력

const val01 = 'Hello'; const val02 = 'World'; const val03 = val01 + ' ' + val02 + '!!!'; console.log(val03); // String Literal 사용법 const litVal = `${val01} ${val02}!!!!!!!`; console.log(litVal); 문자 또는 정수를 문자열로 사용하기 편리한 호호

URL 형식에서 1개의 파라미터를 받아올 때 사용법 URL 1번 http://localhost:8085/admin/article/event-modify?id=1 URL 2번 http://aaaa.tistory.com?param=hi var param = $(location).attr('search').slice($(location).attr('search').indexOf('=') + 1); URL 1번 결과값 : 1 URL 2번 결과값 : hi

※ nth-child(n) / nth-of-type(n) 사용법 - nth-child(n)는 부모의 모든 자식중에서 n번째 자식을 찾는다. - nth-of-type(n)은 부모의 자식 중 해당하는 특정 타입의 n번째 자식을 찾는다. 버튼1 버튼2 버튼3 button { font-size:3rem; display:block; margin-bottom:50px; transition: font-size 1s; } body { transition:background-color 1s;1 } $('button:nth-of-type(1)').click(function(){ $('button').css('font-size', '3rem'); $('button:nth-of-type(1)').css('font-size',..

BANANA APPLE ORANGE .fruit { display:flex; } .fruit > div { margin-left:30px; } .fruit > div > .btn { height:50px; width:100px; background-color:gold; border:none; cursor:pointer; } console.clear(); // 문제 : 엘리먼트를 3개 만들고 각각을 클릭하면 서로 다른 경고창 내용이 나오도록 해주세요. // 조건 : 사단장 변수 없이 진행해주세요. // 방법 1. $('.fruit > .banana > .btn').click(function(){ alert("I'm BANANA ,,,,,"); }); $('.fruit > .apple > .btn').cli..

console.clear(); var person = {}; // person.name = '홍길동'; person['name'] = '홍길동'; //person.age = 30; person['age'] = 30; person['character'] = '정의로움'; console.log(person.name); console.log(person['age']); console.log(person); 객체의 변수를 선언하는 방법은 일단은 2가지... 가 있다. 2가지 모두 선언하는 방법은 다르나 결과값은 같다. 같은 의미이다. console.clear(); var person = { 'name' : '홍길동', 'age' : 33 }; person.character = '정의로움'; console.log..

var msg = '안녕하세요'; function hello(mode, num) { if ( mode == '일본어' ) { msg = '곤니찌와'; } else if ( mode == '영어' ) { msg = '헬로'; } for ( var i = 1; i

console.clear(); function hello(mode) { var msg = '안녕하세요.'; if ( mode == '일본어' ) { msg = '곤니찌와'; } else if ( mode == '영어' ) { msg = '헬로'; } console.log(msg); } hello('한국어'); hello('일본어'); hello('영어'); var hello22 = function(mode) { var msg = '안녕하세요.'; if ( mode == '일본어' ) { msg = '곤니찌와'; } else if ( mode == '영어' ) { msg = '헬로'; } console.log(msg); } hello22('한국어'); hello22('일본어'); hello22('영어');