본문 바로가기

Programing/javascript

 (7)
[javascript] default parameter / arguments / rest parameter default parameter function plus (a, b = 10){ console.log(a + b) } plus(1); b값을 안 넣었을 때, 기본값으로 적용 arguments function example(a,b,c){ console.log(arguments) } example(2,3,4); [2,3,4] 를 담은 Array 출력. 모든 입력된 파라미터를 배열안에 넣어주는 역할 rest parameter function example2(...paramter){ console.log(paramter) } example2(1,2,3,4,5,6,7); paramter 종류가 많을경우, 들어오는 paramter 들을 전부 보여줌. * resp paramter 는 1개만 사용가능, 그리고 여러개 ..
[javascript] Spread Operator 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다. let array = ['hello','world'] console.log(...array); console.log('hello','world'); 배열에 붙이면 대괄호를 제거해준다. let a = [1,2,3] let b = ...a 배열,오브젝트 합치기/복사 (deep copy) * ...a 가 아닌 a를 넣게되면 값을 공유하기때문에 b값을 변경하면 a값도 변경이댐 하지만 ...a(deep copy)를 하게 된다면 독립적으로 사용 가능. 함수 파라미터 넣을 때 function plus(a,b,c){ console.log(a + b + c) } var array = ..
[javascript] Template literals Tagged Lierals 라고해서 함수로 문자를 해체할 수 있다. var name = 'park'; function nameSeparat(str, name){ console.log(str); console.log(name); } nameSeparat`안녕하세요 ${name} 입니다`; 첫번째 값으로 문자를 배열로, 중간중간 변수값들은 따로 저장이된다. 이전에 str + 변수 + str 처럼 했던 것 보다 훨씬 간편해졌다.
[javascript] this 키워드, arrow function 함수 안에서 쓰면 새로 생성되는 오브젝트를 뜻함 function userName() { this.name = 'park' } let createName = new userName(); 이벤트리스너 안에서는 e.currentTarget (지금 이벤트 동작한 곳) document.getElementById('btn').addEventListener('click', function(e) { console.log(this); console.log(e.currentTarget); }) 일반 함수에서는 window document.getElementById('btn').addEventListener('click', function(e) { var array = [1,2,3]; array.forEach(functio..
[javascript] 기본 문법 HTML 변경 하는 법 바나나 클릭 이벤트 리스너 바나나 버튼 변수 (자료저장) let name = '딸기'; const Count = 10; let 업데이트 가능, 재선언 불가능 const 업데이트, 재선언 불가능 함수(parameter) 바나나 버튼 array, object let name = ['바나나우유', '딸기우유']; let fruit = {name : '바나나우유', count: 10}; 조건부 //if else if (true) { console.log('true'); } else { console.log('false') } // for for (var i=0; i
javscript 정규표현식(Regular Expression) 정규표현식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다. 플래그 Flag Meaning Description i Ignore Case 대소문자를 구별하지 않고 검색한다. g Global 문자열 내의 모든 패턴을 검색한다. m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다. reg Description ^ 문자열의 시작 $ 문자열의 종료 * 앞에 문자가 없거나 0개이상인 경우 + 앞의 문자가 1개 이상인 경우 ? 앞의 문자가 없거나 1개 있는 경우 . 임의의 한 문자 자리수를 표현하며, 개행문자를 제외한 모든 단일 문자와 대응 | or 앞 또는 뒤 문자가 존재 [xy] x와 y중 하나 {n,m} 앞에 문자길이 최소n개 최대 m개 () 그룹..
javascript 360 파노라마 (pannellum) 360 파노라마 사이트 지원하는 기본 폼 실행화면 API type(string) - equirectangular - cubemap - multires 저는 equirectangular 이미지 구해서 테스트 진행 타이틀, 자동회전 및 시간설정, 줌 설정, 좌표, 마커 커스텀 및 이벤트도 API에서 지원된다. 여러가지 파노라마 모듈중 이걸 쓴 이유가 JSON 형식으로 간단하게 데이터를 넣을 수 있어서 채택! 더 많은 정보는 아래사이트에서 확인하시면 됩니다. pannellum.org/documentation/examples/simple-example/

티스토리툴바