Tag Javascript
jQuery로 만든 Tab Menu 플로그인.
웹에서 자주 사용하는 Tab Menu를 플로그인으로 만들어봤습니다. 소스는 초보자들을 위해서 만들었으니 참고 부탁드립니다.
동적인 애니메이션을 만들기 위해서는 CSS3를 이용을 해야한다. CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 간단히 애니메이션에 대해서 알아보도록 하자. 애니메이션 속성 animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션 시작될지 지정한다. animation-direction: 애니메이션 종료되고 다시 처음부터 시작할지 역방향으로… Continue Reading →
새로고침할 때마다 이미지 바뀌는 것을 해보았다. background-image 스타일 이미지로 변경하기 var banner = new Array(); banner[banner.length] = ‘bg01.jpg’; banner[banner.length] = ‘bg02.jpg’; banner[banner.length] = ‘bg03.jpg’; var obj = document.getElementById(‘backGround’); var size = Math.floor(Math.random()*(mainBg.length)); j = (isNaN(size)) ? 0 : size; obj.style.backgroundImage… Continue Reading →
document 노드 개요 HTMLDocument 생성자(document로부터 상속됨)는 DOM 내에 DOCUMENT_NODE(예: window.document)를 생성. HTMLDocument의 속성 및 메서드(상속된 것 포함) //document 고유 속성 console.log(Object.keys(document).sort()); //document 고유 속성 및 상속받은 속성 var documentPropertiesIncludeInherited = []; for (var p in document) { documentPropertiesIncludeInherited.push(p); } console.log(documentPropertiesIncludeInherited.sort());… Continue Reading →
노드 유형과 그 값을 출력 ELEMENT_NODE = 1 ATTRIBUTE_NODE = 2 TEXT_NODE = 3 CDATA_SECTION_NODE = 4 ENTITY_REFERENCE_NODE = 5 ENTITY_NODE = 6 PROCESSING_INSTRUCTION_NODE = 7 COMMENT_NODE = 8 DOCUMENT_NODE = 9 DOCUMENT_TYPE_NODE = 10 DOCUMENT_FRAGMENT_NODE = 11 NOTATION_NODE =… Continue Reading →
마우스가 접근했을 때 다른 이미지로 교체하는 방법 Class를 이용하는 방법 img태그에 class를 기입한다. <img src=”img_off.png” class=”rollover” /> jQuery로 변경을 한다. $(“.rollover”).on(‘mouseenter’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_off”,”_on”)); }).on(‘mouseleave’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_on”, “_off”)); }); .index()를 이용하는 방법 리스트내에서 순서를 부여해 해다하는 객체만… Continue Reading →
메소드 기능 charAt(index) index위칭의문자를알아냄 concat(문자열) 두문자열을하나의문자열로만듬 indexOf(문자열) 왼쪽부터문자를검색후지정된위치의문자를알아냄 lastIndexOf() 오른쪽부터문자를검색후지정된위치의문자를알아냄 slice() 문자열의일부분을추출해냄 split() 문자열을분리시킴 substr() 문자열을추출해냄 subString() 문문자열을추출해냄 toLowerCase() 문자열을소문자로만듬 toUpperCase() 문자열을대문자로만듬
<script type=”text/javascript”> //////////////////////////////////////////////// // Javascript made by http://peters1.dk/tools // //////////////////////////////////////////////// // REMEMBER: To change the path, where snow.gif is saved… snow_img = “http://www.domain.com/snow.gif”; // EXTRA: You can adjust the numbers of snowflakes you want on each page… snow_no = 15;… Continue Reading →
객체 생성
배열 Array 배열 내부에 있는 값 하나하나를 요소(element)라고 부른다. 반면 객체 내부에 있는 하나하나의 값은 속성(property)이라고 부른다. 배열생성
URL 인코드/디코드 인코딩은 문자롬 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 방법업니다. 웹상에서는 통신할 때
함수에서는 선언적 함수와 익명 함수가 있다. 선언적 함수 선억적 함수는 fucntion 함수명 () { } 이렇게 생성된 것을 선언적 함수라고 한다. 익명함수는 var 함수명 = function() { }; 이 형태는 함수이지만 이름을 가지고 있지 않으므로 익명함수라고 한다.
2017.08.27 소스코드 하이라이트가 깨져서 수정하였습니다. for문 JavaScript: //초기식 조건식 증감식 for(var i=0;i<5;i++){ document.write(i + '번째 반복문<br>'); } document.write('===========================<br>'); //반복문을 1~100까지의 합을 구하기 var total = 0; for(var i=1;i<=100;i++){ //단일 for문 total += i; //total = total + i } document.write('total… Continue Reading →
Switch문 document.write(”); 이것을 써서 바로 출력을 할 수는 방법이 있지만 <button> 을 사용하지 않을경우 페이지가 로딩되면 바로 경고창, 확인창, 입력창이 뜰 수 있기 때문에 <button> 을 만들었다.
페이지를 열면 바로 확인창이 뜰 수 있어서 함수를 만들어 놓고 불러오게 했다. 삭제 버튼을 누르면 실행 되게 한 것이다. 만약 html을 보고 싶다면 화면의 오른쪽에 상단에 Edit in JSFiddle 를 보면 html도 볼 수가 있다. 단일 조건 체크 if문
증감연산자
자바스크립트는 기본적으로 html안에서 호출되어서 실행이 된다. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>임베트 형태</title> <script type=”text/javascript”> /* 여러줄 주석 */ //한줄 주석 //document.write(‘하하<br>’); document.write(‘head에서 실행<br>’); </script> </head> <body> <script type=”text/javascript”> document.write(‘body에서 실행’); </script> </body> </html> 이런식으로 들어가게 된다. 위의 내용중에… Continue Reading →
checked 여부 확인 $(“input:checkbox[id=’ID’]”).is(“:checked”) == true : false /* by ID */ $(“input:checkbox[name=’NAME’]”).is(“:checked”) == true : false /* by NAME */ checked/unchecked 처리 $(“input:checkbox[id=’ID’]”).attr(“checked”, true); /* by ID */ $(“input:checkbox[name=’NAME’]”).attr(“checked”, false); /* by NAME */ 특정 라디오버튼 선택… Continue Reading →
스크롤 내릴때와 올릴때 다른 이벤트를 적용하고 싶은데…헷갈려서 구글링 한결과 다음 같이 나왔다. <script type=’text/javascript’> $(function(){ //Keep track of last scroll var lastScroll = 0; $(window).scroll(function(event){ //Sets the current scroll position var st = $(this).scrollTop(); //Determines up-or-down scrolling if (st >… Continue Reading →
noUiSlider는 IE7++ 크롬, 파이어폭스, IE,오페라, 사파리 주요사용하는 모든 브라우저에 사용이 가능합니다. 사용방법: <!– jQuery or Zepto –> <script src=”jquery / zepto.js”></script> <!– The noUiSlider script and stylesheet –> <link href=”jquery.nouislider.css” rel=”stylesheet”> <script src=”jquery.nouislider.js”></script> 다운받기: http://refreshless.com/nouislider/download 출처: http://refreshless.com/nouislider/
parents() http://api.jquery.com/parents/ 선택된 엘리먼트의 모든 부모 엘리먼트 요소를 가지오게 된다. 예) <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>parents demo</title> <style> p, div, span { margin: 2px; padding: 1px; } div { border: 2px white solid; } span { cursor:… Continue Reading →
<script LANGUAGE=”JavaScript”> var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|iPad|Android|Windows CE|BlackBerry|Symbian |Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia |SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) location.href = “http://m.도메인 명”; </script> <head></head>안에 넣어주면된다.
javascript로 브라우저 이름을 알기 위해서는 useragent를 많이 사용하지만 알아본결과 appName을 많이 사용하기도 한다. txt = “<p>Browser CodeName: ” + navigator.appCodeName + “</p>”; txt+= “<p>Browser Name: ” + navigator.appName + “</p>”; txt+= “<p>Browser Version: ” + navigator.appVersion + “</p>”; txt+= “<p>Cookies… Continue Reading →
Tab 1 Tab 2 tab-1 내용 tab-2 내용
/** Jquery를 이용한 ← (백스페이스) 사용 막기 **/
모바일 웹에서 회전을 했을경우 새로고침 하는 소스이다. //회전시 새로고침 window.orientationchange = orientationEventHandler; window.addEventListener(‘orientationchange’, orientationEventHandler, false); function orientationEventHandler(){ var orientation = window.orientation; // 회전했을 경우 처리 if(orientation == 90 || orientation == -90){ location.reload(); } else { // 회전하지 않았을 경우… Continue Reading →