본문 바로가기
728x90
반응형

javascript9

[javascript] 문서 로드시점 - document.ready, window.load 실행순서 ready는 HTML 문서 document(객체) 로딩이 끝나면 실행된다. onload이벤트보다 먼저 발생함 모든 문서의 모든 자원이 다운로드되었을 때 발생하는 onload와 달리 DOM트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할 때 적합함 여러번 사용되면 선언 순서에 따라 순차적으로 실행됨 $(function(){}); 으로 간략하게 사용가능 load는 iframe, img, vidio등 리소스 로딩이 끝나면 이벤트를 발생시킨다. 문서의 모든 컨텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트(load이벤트) 문서에 포함된 모든 컨텐스가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있음 동일한 문서에 오직 'onload'는 하나만 존재해야 함 (중복될 .. 2023. 10. 11.
[javascript] Swiper 라이브러리 사용하기 참고자료 https://iridescent-zeal.tistory.com/150 [JavaScript]자바스크립트 Swiper 라이브러리 사용하기 [ Swiper 라이브러리] swiper 라이브러리를 사용하면 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 추가할 수 있습니다. 아래 예시처럼, 화살표 버튼을 누르면 다음 슬라이드로 이동하거나 자 iridescent-zeal.tistory.com 2023. 10. 7.
[javascript] Any Chart - TimeLine Chart 사용 Any chart를 사용하여 타임라인 차트를 생성해보기 라이브러리 사용법은. 아래 링크에서 확인 가능 https://www.anychart.com/blog/2022/08/04/timeline-chart/ How to Make Timeline Chart (in JavaScript)Learn how to create an interactive Timeline Chart using JS in a few easy steps while visualizing the life of Elon Musk as a businessman.www.anychart.com 2023. 10. 6.
[javascript] find 사용하기 [find 사용하기] Array 객체의 find 메소드는 인자로 대입된 callback 함수를 통해 배열 내부를 순환하면서, 특정 조거믈 만족하는 첫 번째 요소를 반환한다. 확인하는 방식은 callback 함수 내부에 정의된 문장들을 통해 테스트하게 되는데, callback 함수의 반환값은 무조건 true 또는 false 이어야 한다. const arr = [ {name : '우림', age : 2}, {name : '현아', age : 5}, {name : '탄이', age : 30}, {name : '현일', age : 3}, {name : '혜림', age : 6} ]; const myFriend = arr.find(a => a.age === 30); console.log(myFriend); 결과 .. 2023. 4. 16.
[javascript] 모듈 이해하기 [모듈 이해하기] 모듈은 파일이나 코드의 묶음 단위로 애플리케이션 하나의 구성요소로 볼 수 있다. 이렇게 모듈로 정의하면 모듈 단위로 코드를 재사용 할 수 있고, 하나의 애플리케이션이라는 큰 기능을 작은 기능 단위로 잘게 분리하여 관리할 수 있다. var namespaceA = (function(){ var privateVariable = '비공개 변수'; return { publicApi : function(){ console.log(priavteVariable + '를 접근할 수 있습니다.'); } } })(); namespaceA.publicApi(); 기본적으로 변수와 함수를 선언하게 되면 전역으로 정의되어 다른 라이브러리나 타인의 코드에서 정의된 이름들과 충돌이 날 수 있기 때문이다. var 키.. 2023. 4. 16.
[javascript] 클립보드 복사 - window.navigator.clipboard [클립보드 복사 기능] - window.navigator.clipboard.writeText(text)를 하게되면 text가 복사되며, 메모장에 붙여보시면(Ctrl + V) 복사된 문자가 작성되는 것을 확인할 수 있다. - 클립보드, URL 복사, 링크 복사와 같은 기능을 사용할때 이용! window.navigator.clipboard.writeText("ㅇㅇ").then(() => { $.alert("ㅇㅇ" + " 클립보드에 복사되었습니다."); }); 2023. 4. 3.
javascript - map 사용법 배열의 요소를 일괄 변경해야하는 경우, Array 객체의 map 메소드를 활용한다. callback 함수를 인자로 받아서, callback 함수의 return으로 반환되는 값들을 재조합하여 새로운 배열로 만든다. const arr = [ {id : 0, name : '혜림', age : 0}, {id : 1, name : '현일', age : 3}, {id : 2, name : '현아', age : 5}, {id : 3, name : '우림', age : 2} ]; const arr2 = arr.map(el => { el.age = el.age + 1; return el; }); const arr3 = arr.map(el => el.name); console.log(arr2); //[ // {id : 0.. 2023. 3. 5.
함수 호이스팅 이해하기 * 자바스크립트에서는 함수를 선언하기 전에 호출이 가능하다. * 이러한 현상을 호이스팅이라고 한다. 호이스팅을 직영하면 '끌어올리기'인데 함수가 실제 호출하기 이전으로 끌어 올라간 것 처럼 동장하기 때문이다. [함수를 선언문이 아닌 표현식을 통해 변수에 할당하여 호출하기] TypeError 에러가 발생한다. 에러의 종류가 TypeError 의외일 수 있다. 실제로는 hello2 이름으로 선언된 변수는 호이스팅이 이루어졌고, 여기에는 undefined가 할당된다. 그래서 undefined는 호출할 수 없기 때문에 TypeError가 발생한 것이다. 만약 호이스팅이 이루어지지 않았더라면 ReferenceError로 hello가 선언되지 않았다는 에러가 나와야 한다. [NOTE] 호이스팅은 자바스크립트의 코드.. 2021. 9. 12.
javascript : 함수(Function) ? / 스코프 이해하기 함수(function)? - 함수는 독립적인 실행 코드를 하나로 묶어 둔 것을 의미한다. 이렇게 코드들을 묶어서 작성하는 것을 함수의 정의 (declaration)라고 하고 정의된 함수는 호출(call)을 통해 실행할 수 있다. function 함수명(매개변수){ 실행 코드 } 함수(Function)의 입력과 출력 - 수학에서의 함수는 미리 정해진 방정식에 미지수를 정의하면 해당 미지수에 값을 대입하고 y 값을 돌려받는다.' - 프로그래밍의 함수도 한 개 이상의 입력 = 매개변수 과 단일 출력 (=리턴값)을 구현할 수 있다. y = f(x) function convertDollarToWon(dollar) { return (dallar * 1201.2); } 스코프 이해하기 {}(중괄호) = > 블록(Bl.. 2021. 7. 25.
728x90
반응형