공부흔적

html include방법=> jquery .load() 매서드를 사용해 불러오기=> 로컬에서 열면 오류=> 서버에서 열면 동작    [ jquery ] header footer를 include하는 제이쿼리 load메서드* header footer를 include하는 제이쿼리 load메서드 header footer 만들고 index.html에 include 하기 // header.html header // footer.html footer 절대경로, 제이쿼리 load()메서드는 서버환경에서만 돌아간다. vscode에서 liveayoung44.tistory.com

CORS 에러 해결방법. Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy: Cross origin requests 해결 소요시간 2분, 시간없으면 해결방법만 보시면 됩니다. 문제/에러명 - 문제/에러 설명 XMLHttpRequest를 이용해서, 'file:///C:/Users/.../favorite_food.xml'로 접근하려고 했는데, CORS 정책때문에, 개발자가 i5i5.tistory.com

자바스크립트에는 DOM 요소에 접근하기 위한 여러 선택자 메서드가 있다. 그 중에 노드를 유사배열로 리턴해주는것들이 있다. getElementsByTagName getElementsByClassName querySelectorAll 만약에 HTML에서 div 태그를 찾는다면 getElementByTagName 또는 querySelectorAll를 사용해 볼 수 있다. 둘의 결과값은 같을 것 같지만 약간의 차이가 있다. getElementsByTagName을 사용했을 때, querySelectorAll을 사용했을 때, 즉, getElementsByTagName, getElementsByClassName은 HTMLCollection으로 querySelectorAll은 NodeList에 담겨 리턴된다. 차이점..

문자열 만들기 var str1 = 'hello world'; // 문자열은 따옴표 사용 특정 위치 문자열 추출 (.charAt) var str1 = 'hello world'; var n = str1.charAt(2); console.log(n); 문자열 합치기 (.concat) var str1 = 'hello world'; var str2 = 'javascript'; var newStr1 = str1.concat(str2); // str1에 str2을 합쳐라 console.log(newStr1); 특정 문자의 인덱스 번호 찾기 (.concat) var str1 = 'hello world'; var index = str1.indexOf('world'); // str1에서 문자열'world'의 인덱스 번호는..

배열 만들기 // 빈 배열 만들기 var arr = []; // 첫번째 방법 var arr = new Array(); // 두번째 방법 // 배열 생성, 값 지정하기 ----------------------------- /* 첫번째 방법 var Kor = []; Kor[0] = '가'; Kor[1] = '나'; Kor[2] = '다'; */ // 두번째 방법 var Kor = ['가','나','다']; 배열 확인 매소드 var Kor = ['가','나','다']; console.log(Kor); console.log(Kor.length); // 배열의 갯수 console.log(Kor.reverse()); // 배열값 거꾸로 console.log(Kor[0]); // 첫번째 배열 console.log(K..

[ 함수 등록과 선언 ] // 함수 '등록' function plus(x, y){ //x,y는 매개변수(=parameter) var z = x + y; return z; } // 함수 '선언' => 선언해야 동작함 plus(3,2) // 매개변수 x,y에 3,2라는 인자 대입 (+) 함수 등록과 선언의 순서가 바뀌어도 실행된다 => 이름이 있는 함수가 익명함수(이름이 없는 함수)보다 먼저 처리되기 때문에 // 함수 '선언' plus(3,2) // 매개변수 x,y에 3,2라는 인자 대입 // 함수 '등록' function plus(x, y){ //x,y는 매개변수(=parameter) var z = x + y; return z; } [ 전역변수 / 지역변수 ] var a = 10; var b = 20; /..

브라우저 크기 구하기 window.screenTop : 상단으로부터 브라우저 위치 window.screenLeft : 왼쪽으로부터 브라우저 위치 window.innerWidth : 브라우저 화면의 너비(viewport) window.innerHeight : 브라우저 화면의 높이(viewport) window.outerWidth : 브라우저 전체의 너비(메뉴, 툴바, 스크롤바 포함) window.outerHeight : 브라우저 전체의 높이(메뉴, 툴바, 스크롤바 포함) 문서 크기 구하기 ※ 브라우저 마다 높이를 구하는 방식이 조금 다르기 때문에 값이 다르게 찍힘. document.clientHeight : 요소의 내부 높이. (패딩 값은 포함 / 스크롤바, 테두리, 마진은 제외) document.scro..

this, currentTarget : 핸들러가 실제 할당된 요소, 이벤트 리스너를 가진 요소 target :이벤트가 발생한 요소 target과 currentTarget, 차이가 뭘까?(feat.자바스크립트) - WORLD IS WIDE target과 currentTarget의 차이점에 대해 알아보고 이벤트 버블링과 이벤트 캡쳐의 개념과 사용법에 대해 알아봅니다. target VS currentTarget, 이벤트버블링 VS 이벤트캡쳐 choonse.com javascript target ... codepen.io

getElementsByClassName로 정의하면 변경된 값이 live로 갱신된다. 예) .cloneNode()를 사용해 li요소 3개를 '순서대로' 복사 1. querySelectorAll 사용할 경우 (.html) banner1 banner2 banner3 (.js) const slides = document.querySelector('.slides'); const slide = document.querySelectorAll('.slide li'); const slideCount = slide.length; makeClone(); function makeClone(){ for(var i=slideCount - 1 ; i>=0 ; i--){ var cloneSlide = slide[i].cloneNo..

변수선언 방식에는 var / let /const 가 있다. 1. var 재정의 가능 (재정의 된 걸 간과하고 지나칠 수 있음) 업데이트 가능 정의되는 위치(함수 외부/내부) 안에서만 접근할 수 있음. (ex - 함수내에서 정의된 변수는 함수내에서만 사용이 가능) 2. let 재정의 불가능 let name = 'john' let name = 'jane' (x) 업데이트 가능 let name = 'john' name = 'john' (o) 블록({})에서 정의된 변수는 블록안에서만 사용할 수 있음 3. const 재정의 불가능 let name = 'john' let name = 'jane' (x) 업데이트 불가능 let name = 'john' name = 'john' (x) 블록({})에서 정의된 변수는 ..