[개발] Programming/Javascript25 자바스크립트 로그 찍기 : console.log (콘솔 디버깅) 자바스크립트 로그 찍기 자바스크립트로 개발하다 보면 로그를 봐야 할 때가 있습니다. 이때 로그를 브라우저 콘솔로 쉽게 출력할 있는 방법이 있어 소개하겠습니다. 결과 확인이나 디버깅 용도로도 흔히 쓰이는 매소드이니 알아두면 개발하는데 많은 도움이 될 것입니다. 자바로 따지면 system.out 과 같은 기능을 합니다. 자바스크립트 console 객체 자바스크립트의 console 객체는 당양한 메소드를 지원합니다. 그중에서 디버깅이나 로그 출력을 위한 메소드는 아래와 같습니다. * 함수 사용 방법 console.debug(" 출력할 문자나 숫자 "); console.error(" 출력할 문자나 숫자 "); console.info(" 출력할 문자나 숫자 "); console.log(" 출력할 문자나 숫자 ").. 2022. 12. 8. 자바스크립트 Uncaught SyntaxError: missing ) after argument list 오류 해결 Uncaught SyntaxError: missing ) after argument list 웹 프로그래밍을 하다 보면 흔히 발생하는 문법 오류가 있다. 그중 위와 같은 오류가 발생했다면, (경험상) 대부분 세 가지 오류에 해당된다. 01 괄호 오류 정말 말 그대로 괄호를 빼먹은 케이스다. JSTL을 사용 한다면, '}' 또는 '{'를 실수로 빼먹을 수도 있고 '(' 또는 ')' 를 빼먹을 수도 있으니 브라우저의 콘솔로 확인해보자. 02 ' 또는 " 오류 실수로 ' 또는 "를 추가로 넣은 경우 발생한다. 예를 들어, 아래처럼 입력하면 오류가 나지 않는데, var aa = "뿌잉 뿌잉"; var bb = "오빠 " + aa; var tmp = "오빠" aa; 또는 var tmp = "오빠 + aa; 와 같.. 2021. 12. 9. 자바스크립트 노드(태그) 리스트 조회하는 함수 - querySelectorAll() 웹 개발하다 보면 동적으로 특정 노드(엘리먼트)를 수정하게 되는 경우가 흔히 발생한다. 이때 자바스크립트 함수 querySelectorAll()을 사용하면 태그의 id로 하위 노드의 객체를 리스트 형태로 모두 호출할 수 있다. 해당 함수는 아래와 같이 사용할 수 있다. var list = document.querySelectorAll("id 또는 class 명"); querySelectorAll()의 특징이 있는데, CSS 같은 방법으로 사용한다는 점이다. 즉, 노드를 접근할 때 아래와 같이 계층 구조로 접근하면 된다는 것이다. idName 이라는 태그 하위에 li 태그들을 호출한다는 의미이다. var list = document.querySelectorAll("#idName li"); 그럼 예를 들어 .. 2021. 7. 27. 자바스크립트, 태그에 이벤트 함수 바인딩하기 - addEventListener() html 노드(엘리먼트)에 이벤트를 바인딩하는 방법은 간단하게 addEventListener()라는 함수로 해결할 수 있다. 그럼 동적으로 생성되는 태그에도 onchange, onclick 같은 함수들을 사용할 수 있게 된다. 우선 함수는 아래와 같이 사용하면 된다. window.addEventListener("load", function(){ 노드객체.addEventListener( "이벤트 종류", 함수 정의 ); }); 예제를 통해 사용 방법을 알아보자. 아래와 같은 html 코드가 있고, test2 태그에 click 이벤트를 바인딩해본다. test1 test2 해당 태그의 id 값은 test2이고 이를 가지고 해당 태그의 객체를 읽어 온다. 객체는 document.querySelector("#te.. 2021. 7. 25. 자바스크립트 document.getElementById() - id로 dom 요소 찾기 바닐라 자바스크립트로 특정 엘리먼트(요소)를 id 기준으로 찾기 위해서는 document.getElementById() 메서드를 사용할 수 있다. 이 함수를 이용하면 해당 태그의 객체를 반환받아 여러 가지 작업을 진행할 수 있다. 형식 : document.getElementById("아이디 명"); 예로 아래와 같은 HTML 소스가 있다고 가정하고, 1 2 3 4 5 자식1 자식2 자식3 cs id가 test2인 엘리먼트의 객체를 접근하고 싶으면 아래와 같이 할 수 있다. 그러면 test2에 해당되는 요소의 객체가 반환될 것이고, 콘솔 창에 출력해보고 싶으면 'textContent'를 활용하면 된다. 그러면 결과 값은 '자식2'가 나온다. 1 2 3 4 5 6 7 8 9 var tmp2 = documen.. 2021. 7. 20. 마우스 스크롤 시 실행되는 jQuery 함수 - window scroll jQuery Window Scroll 마우스 스크롤을 움직이면 실행되는 jQuery 함수 window scroll. 페이지를 추가로 로딩하거나 페이지를 그릴 때 사용할 수 있다. 사용 방법은 trigger 함수와 동일한 방식이다. $(window).scroll( 실행할 내용 추가 ); 실제 적용 예시를 보면 아래와 같다. 실행할 함수나 기능을 선언해주고, 윈도우 스크롤 함수를 선언해주면 스크롤할 때마다 doSomething 함수가 실행된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function doSomething() { alert(" 뿌잉 뿌잉 "); } $(function () { $(window).scroll( function() { doSomething(.. 2021. 3. 20. 자바스크립트, 유입 경로의 url 알아내기 (이전 페이지 주소) 마지막으로 방문한 페이지의 url을 조회하고 싶은 경우 document 객체의 referrer 속성을 참고하면 된다. 한 가지 문제는 AJAX를 통해서 페이지를 이동한 경우 referrer로 조회가 되지 않는다. document.referrer; 사용 예시) var preUrl = document.referrer; // 콘솔에 이전에 방문한 url이 찍힌다. console("이전 Url: " + preUrl); cs 만약 이전에 방문 페이지로 바로 이동하고 싶다면 history.go() 또는 history.back()을 사용하면 된다. 단순히 이전 페이지로 이동하고 싶은 경우에는 history.go() 또는 history.back(-1)을, 전전 페이지로 가고 싶은 경우 history.back(-2)를 .. 2020. 5. 31. [JS] A parser-blocking, cross site (i.e. different eTLD+1) script... 오류 자바스크립트 A parser-blocking, cross site 오류 " A Parser-blocking, cross-origin script, (호출하는 주소), is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. " 결국 구글 크롬에서 cross-origin document.write를 막으면서 발생하는 오류. 소스에서 document.write로 외부 js 링크를 호출하는 부분에서 오류가 발생하고 있었음. 소스에서 호출하는 형태는 아래와 같았다. document.write(''); 위 방법으로 호출하려는 이유는 자바스크립트에서 자바스크립트를 호출하려다 .. 2019. 12. 22. 자바스크립트 화면 크기, 브라우저 크기 구하기 screen 객체로 화면 크기 구하기 자바스크립트 screen은 브라우저 정보를 가져오는 객체입니다. screen 객체의 속성은 아래와 같습니다. screen.width // 화면(모니터 해상도)의 너비screen.availWidth // 모니터 화면의 작업 표시줄을 제외한 너비 screen.height // 화면(모니터 해상도)의 높이screen.availHeight // 모니터 화면의 작업 표시줄을 제외한 높이 브라우저 크기 구하기 만약 브라우저의 크기를 구하고 싶은 경우 사용할 수 있는 방법들입니다. HTML 표준 없음 // 실제 사용하는 브라우저의 안쪽 너비document.body.offsetWidth document.body.scrollWidth document.body.clientWidth /.. 2018. 12. 20. 이전 1 2 3 다음
