본문 바로가기

javascript강좌

[javascript]이스케이핑 encodeURIComponent() 웹에서 데이터 전송시 특정 문자들은 특수기능으로 사용되는데, 해당특수문자들은 그대로 전송하면 시스템이 인식할 수 없게 됩니다. 그래서 이렇게 치환해줍니다. const url = 'http://www.kakao.com'; const url2 = '?id=한글'; console.log(url+url2); //"http://www.kakao.com?id=한글" console.log(url+encodeURIComponent(url2)); // "http://www.kakao.com%3Fid%3D%ED%95%9C%EA%B8%80" 더보기
[javascript]정말로 지울까요? window.confirm 삭제 버튼을 눌렀을때 한번더 물어보게끔 하고 싶다면 이 방법을 쓰면 됩니다. window.confirm('Delete?'); 조금 더 응용해서 이렇게 한다면 OK 했을때의 행동, Cancel 했을때의 행동도 각각 따로 제어 할수 있습니다. if(window.confirm('Delete?')){ console.log('지운 후에 할 행동'); } else { console.log('취소한 후에 할 행동'); } 더보기
[javascript]Array.of 에 관한 실험 Array.of에 관해서 알아보겠습니다. Array.from은 많이 썼는데, Array.of는 다소 생소하게 느껴집니다. 몇가지 실험을 해보겠습니다. console.log([1,2,3,"haha", 23*9]); //[1, 2, 3, "haha", 207] Array.of를 사용해보겠습니다. console.log(Array.of(1,2,3,"haha",23*9)); //[1, 2, 3, "haha", 207] 외관상 보기에는 동일하네요. type비교 그럼 같은 타입일까요? function getType(n) { if (typeof n === 'object') { if (n.constructor === Array) n = 'array'; } return n; } const a = Array.of(1, 2,.. 더보기
[javascript]스크롤시, 오디오 자동재생 특정 스크롤 영역을 지날때 오디오를 재생하게끔 하는 요청이 들어왔습니다. 테스트를 위해 짜본 코드 공개합니다. html javascript var audio = new Audio('오디오파일.mp3'); //저작권 문제로 오디오 파일은 지웠습니다. //audio.play(); $(window).scroll(function () { var position = $(window).scrollTop(); $('#info').innerText = position; if (position > 100) { console.log('detect'); audio.play(); } }); 스크롤로 100px 영역을 지날때 자동적으로 사운드가 재생됩니다. 재생 되더라도 버튼으로 제어도 가능합니다. 더보기
[javascript]parseInt 정수 처리 javascript에서 정수로 바꾸는 방법은 저번에 다뤘던 Math.floor/round/ceil을 하면 되는데, 한가지 더 다뤄볼게 있습니다. parseInt(number) 사용방법은 아주 간단합니다. 바꾸길 원하는 수 혹은 변수를 parseInt로 싸주면 됩니다. 반올림은 안됩니다. 그래서 Math.floor 랑 비슷한 편인데, 아주 똑같진 않습니다. 예제를 통해 설명하겠습니다. 예제 let a = 2.2; console.log(parseInt(a), Math.floor(a)); // 2, 2 let b = 2.6; console.log(parseInt(b), Math.floor(b)); // 2, 2 let c = 3; console.log(parseInt(c), Math.floor(c)); // .. 더보기
[javascript]배열 복사 영향 안받게하려면? array.slice(); 배열을 선언하고 복사를 하고 나면 우리가 생각하는대로 원본은 그대로 있어야 하는데 원본도 같이 바뀝니다. 예제를 보시면 이해가 빠를거예요. let a = [2,3,1]; let a1 = a.sort((a,b)=>a-b) console.log(a1); console.log(a); //문제 a를 출력해보면 우리가 처음 봤던 a와는 다르게 a1이랑 같은 결과가 나옵니다. 기본적으로 배열은 원본을 참조하도록 설정 되어 있습니다. 이 연결을 끊어주려면 이렇게 해주면 됩니다. let a = [2,3,1]; let a1 = a.slice(); a1 = a1.sort((a,b)=>a-b) console.log(a1); //[1,2,3] console.log(a); // [2,3,1] 이제 서로 영향을 받지 않습니다. 더보기
[javascript]배열 순서 바꾸기기 배열의 순서를 바꾸는 법은 생각보다 간단합니다. 예제를 통해서 설명 드리겠습니다. let arr = [1,2,3,4]; [arr[1], arr[2]] = [arr[2], arr[1]]; console.log(arr); // [1,3,2,4] 더보기
[javascript]stack, queue 예제로 살펴 보겠습니다. 배열을 하나 만들어보겠습니다. let test = [1,2,3,4,5,6,7,8]; 당연한 얘기겠지만 String으로는 아래 명령어들을 실행할 수 없습니다. 배열에서만 적용 되는 명령어니까요. Stack 스택은 배열이 한개씩 사라진다고 가정했을때, 가장 마지막에 들어온게 가장 먼저 빠집니다. let test = [1,2,3,4,5,6,7,8]; test.pop(); console.log(test); // 1,2,3,4,5,6,7 좀 더러운 예를 들자면 스택은 먹은걸 목구녕으로 토해내는겁니다. Queue 큐는 배열이 한개씩 사라진다고 가정했을때, 가장 먼저 들어온게 가장 먼저 빠집니다. let test = [1,2,3,4,5,6,7,8]; test.shift(); console.l.. 더보기