천천히 차근차근

Stop Confetti Drop Confetti 요긴하게 써먹을 수 있을 것 같다 ㅇㅅㅇ,, js파일은 첨부한 파일을 사용하면 된다.

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

// 인덱싱 interface StringArray { [index: number]: string; } let arr: StringArray = [ 'a', 'b', 'c']; arr[0] = 'D'; console.log(arr); interface로 배열의 데이터도 정의할 수 있다. index를 숫자로 받고, 배열의 값을 string으로 정의해서 사용할 수 있다.

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을 제외하고 나머지 인자를 배열로 담아서 보여준다..

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

boolean1.js var bool = false; var result = () => { var a = bool ? '사실이다.' : '거짓이다.'; console.log(a); console.log('결과가 참, 거짓에 따라서 내가 원하는 값을 담을 수 있다.'); } module.exports = { result } boolean2.js var func = require('./boolean1'); func.result();

a.js var printHelloWorld = () => { console.log('Hello World'); console.log('Hello World!!!!'); }; module.exports = { printHelloWorld }; var test = 'doingsdf'; var printResult = () => { switch (test) { case 'start': console.log('start'); break case 'end': console.log('end'); break case 'doing': console.log('doing'); break def..

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

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('영어');

console.clear(); //전역변수 var mode = 0; var hello = function() { // 지역변수 var temp = 0; mode++; if ( mode == 1 ) { console.log('안녕하세요.'); } else if ( mode == 2 ) { console.log('반갑습니다.'); } else { console.log('헬로'); } } hello(); hello(); hello(); hello();

html css body, a { margin: 0; padding: 0; text-decoration: none; } .dan { font-size:3rem; font-weight:bold; color:red; } .limit { font-size:1.8rem; font-weight:bold; } javascript console.clear(); // 예제 3-1개 //var $test = $('.test'); //$test.append('안녕하세요'); var dan = function(dan) { var $dan = $('.dan'); $dan.append('구구단 ' + dan + '단'); } var limit = function(limit) { var num = 8; dan(num); var ..

// 문제 : 함수 3개를 정의하고 실행해주세요. console.clear(); // 함수 3-1개 var num = function(a) { console.log('구구단 ' + a + '단'); for ( var i = 1; i

console.clear(); var a = 1 > 1; var typeOfA = typeof(a); console.log(typeOfA); var b = 1 == 1; var typeOfB = typeof(b); console.log(typeOfB); var c = 1 + 1; var typeOfC = typeof(c); console.log(typeOfC); var d = "1 + 1"; var typeOfD = typeof(d); console.log(typeOfD); ※ typeof 함수 사용 기본법

var say = function() { console.log('== 함수 시작 =='); console.log('안녕하세요.'); console.log('반갑습니다.'); console.log('== 함수 끝 =='); } say(); say(); ※ 기초 함수 사용법