• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Operator] JS - void 연산자 (= void Operator = 보이드 연산자) + 클릭 배경색 변경

목차
  1. void 정의
  2. void 예제 - <a> 태그의 href 속성에 사용된 경우
  3. void 예제 - <img> 태그의 src 속성에 사용된 경우

 

void 정의


  • 표현식 평가 후, undefined 반환. (※ 반환값 사용 않고 표현식 평가할 때 유용.)
  • 종종 "void (0)" 사용해 미정의 초기값 (undefined primitive value) 얻는 데 사용되며, 클릭 이벤트 발생 시 페이지 새로고침을 방지해 페이지 이동 자체를 막음. (예) href="javasctipt:alert('미승인 글');void(0);"


 

void 예제 - <a> 태그의 href 속성에 사용된 경우

 

<a href="javascript:void(0);">

  홈짱닷컴 (Homzzang.com) - 사용 않는 링크

</a>

<br>

<a href="javascript:void(document.body.style.backgroundColor='red');">

  홈짱닷컴 (Homzzang.com) - 사용 않는 링크. 단, 배경 빨간색으로 변경

</a>


결과보기 

 

void 예제 - <img> 태그의 src 속성에 사용된 경우

G5/plugin/kcaptcha/kcaptcha.lib.php 파일 249 ~ 250 라인

 

  • 예전: $html .= "\n".'<img src="#" alt="" id="captcha_img">';
  • 최근: $html .= "\n".'<img src="javascript:void(0);" alt="" id="captcha_img">';

 


PS. 의미 해석

  • 예전에는 <img> 태그의 src 속성값을 #으로 설정했음. 이것은 브라우저에게 해당 이미지를 가져오라는 요청이지만, #은 일반적으로 현재 페이지의 맨 위로 스크롤하는 데 사용되는 기본 앵커임. 따라서 브라우저는 이 요청을 무시하고 아무것도 표시하지 않았을 가능성이 있음.
  • 최근에는 javascript:void(0); 사용해 src 속성값을 설정함. 이것은 브라우저가 JavaScript를 실행하고 그 결과가 undefined로 평가되므로 아무것도 표시되지 않음. 이것은 일종의 "아무 작업도 하지 않음" 명령임. 
  • 주요 차이점은 예전의 #은 페이지 상단으로 스크롤되는 것이 가능하지만, JavaScript 통해 void(0); 호출하면 페이지 위치를 변경 안 함.

 



분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012