Category JavaScript
개요 node.js 설치를 하려고 하다가 버전 확인을 하는데 node -v 은 제대로 되는데 npm -v이 계속 npm WARN config global –global, –local are deprecated. Use –location=global instead 뜨길래 검색 후에 해결 방안이 있어서 공유합니다. 해결방법 Power Shell을 관리자 권한으로 실행한다. Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force… Continue Reading →
안녕하세요!UI개발을 하다보면 폼 요소 코딩을 많이 할 때가 있습니다. 처음 시작할 때는 마크업만 주고 했던 것이 경력이 늘어나면서 접근성도 생각하게 되고 더 나아가서는 유효성검사도 같이 넣어서 줄 때가 있습니다. 매번 스크립트 작성을 해서 넣는다는 것이 얼마나 시간을 투자를 해야하고 살짝… Continue Reading →
동적인 애니메이션을 만들기 위해서는 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 →
클릭을 했을 경우 href="#아이디값"으로 끊겨서 이동하는 것이 아니라 jQuery의 .animate()를 이용해서 화면이 부드럽게 이동되게 할 수 있다. 또 아이디 값이 없고 #만 있을 경우는 맨 위로 이동 시키게 할 수 있는데 참고 소스는 아래와 같다. 부드럽게 스크롤링의 접근성 원활한 스크롤링을… Continue Reading →
Dom 트리에 접근하고 수정하는 작업은 크게 두 단계로 나뉜다.
1. 작업을 수행 할 대상 요소를 표현하는 노드를 찾는다.
2. 해당 노드의 텍스트나 자식 요소, 특성 등을 조작한다.
jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있다. 바로 애니메이션 큐(queue) 이다. 예를들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로… 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문
증감연산자
변수명의 정의 1. 키워드(예약어)를 사용하면 안된다. 2. 숫자로 시작하면 안된다. 3. 특수문자는 ‘_’와 ‘$’만 허용 4. 공백 문자를 포함할 수 없다. 식별자를 잘못 지정한 예 break(키워드) 10alpha(숫자로 시작) #num(특수문자 사용) has space(공백 사용)
자바스크립트는 기본적으로 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 →
모바일에서 회전을 하면 그 페이지 새로고침 하는 스크립트이다. //회전시 새로고침 window.orientationchange = orientationEventHandler; window.addEventListener(‘orientationchange’, orientationEventHandler, false); function orientationEventHandler(){ var orientation = window.orientation; // 회전했을 경우 처리 if(orientation == 90 || orientation == -90){ location.reload(); } else { // 회전하지 않았을… Continue Reading →