1. retrun문 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환하는 것 1) 조건문을 줄때 중첩된 if문을 쓴다면 function 함수명() { if (조건문) { if (조건문) { ... } } } 이렇게 쓰는경우가 있는대 가독성이 떨어지고 복잡해 보인다. 2) 이럴때 처음부터 조건에 맞지 않을 경우 리턴 시켜버리면 중첩은 줄어들고 가독성은 올라간다. function 함수명() { if(조건문1) return; if (조건문2) { ... } } 조건문1에 맞지않으므로 2를 타지 않고 종료해 버린다. 중복된 조건이 있다면 조건식과 반대되는 경우 return을 선언하고 그다음 필요한 조건을 작성하면 된다. 자바스크립트 function 안에선 return 이라는 키워드를 만나면 retur..
룰렛관련된 css를 찾다가 제일 오류가 적고 버벅거림이 없어서 이소스를 이용하게 되었다. js로 들어간 값들은 db에 넣어서 함께 관리 할 수도 있다. 플러그인 없이 캔버스로 구현한 것이라 나름 가벼울 것으로 생각되었다. See the Pen Canvas Roulette by dev_Sunny (@sunny_dev) on CodePen. 출처는 해당코드펜 안에 적어두었다. 나의 경우는 코드자체만 남기는것도 좋아하지만 코드펜이나 코드샌드박스를 사용하여 결과물과 함께 가지고 있는것을 좋아한다. 뭐든 백번글을 읽기보다는 한번 보는게 이해가 빠르기 때문이다. 추후에 포토폴리오는 블로그처럼 예시 코드도 볼수 있게 해서 첨부할 예정이다.
ES6 1. ECMAScript 2015와 동일한 언어 2. 리액트, 뷰, 앵귤러에서 권고하는 언어형식 3. ES5에 비해 문법이 간결해 져서 코딩하기 수월함 Babel - ES6 문법을 각 브라우저의 호환에 맞게 ES5로 변환하는 컴파일러(구버전에서 작동하지 않으므로 transpiling이 필요) https://babeljs.io/ const&let - 새로운 변수 선언방식 - 블록단위 {}로 변수의 범위가 제한되어있음(스코프 단위) - const : 한번 선언한 값에 대해서 변경할 수 없음(상수개념) - 재할당하지 않을 경우 사용 //const를 쓰면 재선언할 수 없어 디버깅할 때 충돌을 줄일 수 있음 - let : 한번 선언한 값에 대해서 함수 본문 또는 블록단위에서 다시 선언 할 수 없음 //반복..
#배열 /* #배열선언 const 배열 = new Array(); 배열[0] = '값'; #배열 리터럴 표현식 const 배열 = ['값','값1']; 배열[0] 키(인덱스) = 값 (value); map - 배열에서 새로운 배열을 만듬 filter - 배열에서 골라내기 */ //배열선언방식 const array = new Array(); array[3] = 1; //4번째자리 1 array.push("뒤"); array.unshift("앞"); array.shift(); array.pop(); console.log(array); /* 배열 추가 삭제 https://gent.tistory.com/295 array.push('뒤'); // 배열의 끝에 요소를 추가 array.unshift('앞'); // ..
//console.log("sun"); //변수선언 let suuun; // console.log(suuun); //할당되지 않았으므로 => undefined suuun = "써니"; //console.log(suuun); //할당되었으므로 => 써니 //const suuun; //할당되지 않아서 에러가 발생 const suuun = "써니"; //선언과 동시에 할당을 해야함 //let this = "뭘까?"; == 예약어는 변수로 쓸 수 없음 console창으로 확인해 보자! 문자, $, _를 사용하여 변수명을 생성 공백과 대소문자를 구분 예약어(class, this, function, if, for, true , false, undefined, null 등등)은 변수명으로 사용 불가 *변수 let -..
I'm box! I'm box2! I'm box3! const box = document.getElementById("box"); const box2 = document.getElementById("box2"); console.log(box, typeof box); //객체다! const text_change = function () { //const에는 함수를 담을 수 있음 this.innerHTML = "박스이름 바꿔!"; //box.innerHTML = "박스이름 바꿔!"; }; box.addEventListener("click", text_change); //클릭이라는 이벤트를 추가(addEventListener) //변수.이벤트추가('이벤트명',함수) box2.onclick = function ..
#자바스크립트 기본 let a = 1; let b = "1"; let c = "true"; let d = true; let e; let f = null; console.log(a, b, c, d, e, f); /* 1.각변수들의 자료형 확인 2. 숫자 number 문자 string 참/거짓 boolean undefined null 객체 */ /* 자료형 확인 - typeof */ console.log( typeof a, //number typeof b, //string typeof c, //string typeof d, //boolean typeof e, //undefined 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형 typeof f //object - null은 객체! 변수는 존재하나, n..
#탭메뉴 See the Pen 자스로 탭 메뉴 by Kim Mi Seon (@miseon920) on CodePen. ++console.log(e.currentTarget, e.target); 핵심은 currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다! 즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다. *querySelector는 해당 셀렉터 내용 중 제일 첫 번째 것만 선택 되므로 querySelectorAll을 써서 모두 가져온다. 따라서 배열로 담기므로 forEach로 반복문으로 처리해야 한다. 배열처럼 보이나(유사배열) 사실 NodeL..
#YTPLAYER #비메오 +YTPLAYER 참조 https://github.com/pupunzi/jquery.mb.YTPlayer GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery framework use a custom yutube player for a video as background on jQuery framework - GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery framework github.com +비메오참조 https://git..
