[개발] 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. 이전 1 2 3 4 5 다음
