반응형

Web programing/Javascript 20

Javascript table filter 라이브러리

/* * http://sosal.kr/ * made by so_Sal */ Javascript로 HTML의 Table에서 수식으로 filtering이 가능하도록 하는 라이브러리 입니다. 아래 3가지 파일이 실제 라이브러리 파일이 있습니다. images_path: 'https://koalyptus.github.io/TableFilter/tablefilter/style/themes/' 이미지도 있어서 github에서 끌어와서 쓰는게 제일 편하겠네요. github가 영원히 망하지 않아야 이런 라이브러리를 계속 쓸 수 있을 텐데요 ^^;; 아래 소스 긁어서 쓰시면 됩니다.

로또번호 자동생성기

/* * http://sosal.kr/ * made by so_Sal */ Javascript, CSS를 공부하면서 실험삼아 만들어 봤습니다. 생성 버튼을 누르면 아래에 자동으로 예상번호가 생성됩니다. 혹시 고정하고 싶은 숫자가 있으시면 Digits: 안에 숫자를 적어주시면 됩니다. 숫자 이외의 수, 그리고 45를 초과하는 수는 입력하실 순 있지만, 로또의 범위에 맞지 않으므로 입력하시지 마세요. 로또생성 결과는 자동으로 정렬되어 아래에 파란 텍스트로 출력됩니다.

티스토리 블로그 배경에 눈내리는 효과 주기

/* * http://sosal.kr/ * made by so_Sal */ 크리스마스 시즌이 다가왔습니다.제 블로그에도 눈이 내리고 있죠? >_ 위 소스에서 이것의 역할은작은 눈이 천천히 내렸다가, 바람으로 몰아쳤다가, 등의 랜덤한 효과를 발생하는것 같아요.(귀찮아서 분석은 안했습니다.) 이것을 지우면 눈이 천천히 내리게 됩니다.저는 그래서 snowstorm-min.js 소스를 지운 상태이구요.어느정도 자바스크립트 볼줄 아시는 분은 js 소스 들어가서 눈의 속도랑 방향 등을 결정하는 소스를 수정하셔서자신만의 눈내리는 효과를 만들어 보세요 ^^ - 이 눈오는 소스의 저작권은 다음과 같습니다./* @license * DHTML Snowstorm! JavaScript-based snow for web page..

Javascript와 HTML Form 객체

/* * http://sosal.kr/ * made by so_Sal */ 포스팅 17.Javascript에서는 html에서 form이라는 태그에 대해서 살펴보았습니다. 그럼 이제 form 객체에 대해서 볼까요? form 객체 :: document 객체 하위에 있는 내장 객체 태그를 자바스크립트로 정의 폼 형식의 내용을 가져오거나 서버로 제출 document.form명.type명.속성(or 메소드, 이벤트) 이번에서는 실제 Javascript 'document' 객체 하위에 있는 내장객체 form으로 정의하여 type.method(or 속성, 이벤트) 등을 사용하는 방법을 이번장에서 보겠습니다 일단 간단한 form 객체를 만들어보겠습니다. NAVER 홍보글이 되어버린듯한? (사실 IU 홍보임) ㅋㅋㅋ아 ..

Javascript Array 배열, Location 객체

/* * http://sosal.kr/ * made by so_Sal */ Array 객체. 사용될 내용들에 번호를 매겨 체계적으로 정렬하여 사용할 수 있도록 하는 객체. 배열 객체 정의 방법 a = new Array(n) a는 객체의 이름. new :: 객체를 정의해주는 연산자 (내장 객체인 Array 객체를 만들겠다.) n :: 매개변수의 개수. 객체에 사용될 내용들에 번호를 주는데, 그 번호의 수 ** 배열의 속성과 메소드 * length() : 배열의 개수 연산 메소드 -> 배열명.length ex) document.write(a.length) -> 위에서 3개를 만들었으므로 ' 3 ' 출력 * join() : 특정 기호를 사용해서 문자열로 나열한다. ex) document.write(a.join..

Javascript 내장객체 사용법

/* * http://sosal.kr/ * made by so_Sal */ * 객체 :: 작업의 대상이 되는것 (작업의 대상의 예를 들면 들면 붕어빵, 자동차..) 객체 지향 :: 같은 특성을 가지는 대상을 새롭게 만들어서 사용 객체 기반 :: 만들어져 있는 대상(내장 객체)을 사용하여 속성을 바꿈. (자동차의 색, 붕어빵에 들어갈 양념을 바꾼다는 등..) ** Javascript는 객체지향이지만, 거의 내장객체를 사용하기 때문에 객체 기반으로 분류한다. ** * 속성 :: 객체의 상태. * 메소드 :: 속성을 가지는 객체의 동작 방식을 설정 객체를 생성할때 속성과 메소드도 새로 만들어진다. 속성과 메소드를 새로 만드는것은 * 생성자 * 함수가 역할을 한다. 생성자 :: 객체를 정의할때 속성과 메소드를 ..

Javascript 내장함수 eval() isNaN() parseInt()

/* * http://sosal.kr/ * made by so_Sal */ :: 내장함수 :: function이란 함수 명령으로 새로운 함수를 정의하지 않고 간단한 명령어를 사용하여 그 기능을 대신하는것. // 새로 만드는 것이 아닌, 자바스크립트 내부에 이미 존재하는 함수들 alert(), prompt() 또한 내장함수로 볼 수 있다. :: eval() :: 내용을 계산하도록 하는 함수. (문자열을 수식으로 바꿔주는 함수) 계산할 수식을 eval함수의 매개변수로 입력한다면 입력된 매개변수를 계산하여 출력한다. 보통 prompt를 이용해 입력 받은 내용으로 계산할 때 사용한다. :: isNaN() :: Nan = Not a Number. 변수에 입력한 값이 숫자인지 아닌지 판별하는 함수. 혹시나 결과값이..

Javascript 함수 function

/* * http://sosal.kr/ * made by so_Sal */ 다른 언어와의 차이점은 없다. 역시나 프로그래밍 언어의 함수이다. :: 함수 function :: 자바스크립트 내용을 간략한 이름으로 정의해 놓은것. 내용별로 구분하여 정의 가능 함수로 정의해 놓은 내용을 반복 사용 가능 수정이 쉽다. 함수는 실행되지 않고 기억만 한다. function func_name(a,b) { 함수 내용 } function :: 함수를 정의 (이것은 함수임을 알 수 있다.) 함수 이름 :: 함수의 이름으로 내용을 정의할 수 있다. 이름을 통하여 함수를 불러와 사용 가능 func_name() 함수를 호출하여 실행하게 한다. (a,b)는 함수 안에 들어갈 매개변수를 말한다. ex) I Love you를 100번..

Javascript 제어문 if, switch, for

/* * http://sosal.kr/ * made by so_Sal */ 프로그램 안에서 원하는 기능을 구현하기 위해 만들어 놓은 형식 어떤 특정 조건 하에 특정 조건을 반복 :: 제어문 어떤 언어에서든지 동일한 기능을 함. 프로그램을 구조화 시킨다. 특정위치로 이동. 같은 기능을 반복하는 등의 역할을 한다. ** if :: 조건 제어문 ** if ( 조건 ) { } 조건이 참이면 { } 내부안에 들어가게 된다. if문이 틀렸다면, 나머지 전부의 뜻으로 if(){ } else { } else가 쓰인다. else에서는 if가 만족하지 않을때 들어가게 한다. // else에는 조건이 없다 . if(조건){ } else if ( 조건){ } else{ } //else if에는 if라는 조건이 틀렸을때, 또다..

Javascript onkeypress, onkeydown 키보드 이벤트

/* * http://sosal.kr/ * made by so_Sal */ onkeypress :: 키보드 이벤트. 화면에서 키보드를 눌렀을때 이벤트를 발생시켜준다. ㅎㅎ body 태그 안에서 사용 하는 이유는 브라우저 전체에서 onkeypress를 작동시키기 위함이다. body는 브라우저 몸체 전체를 포함하기 때문. onkeydown :: 문서가 활성화 되어있는 상태에서 키보드를 눌렀을때 나타나는 이벤트 핸들러 onkeypress와 아주 유사합니다. ** onkeypress와 onkeydown 의 차이점 ** onkeypress :: 아스키 코드에 포함되어 있는 모든 값들 onkeydown :: 확장 키보드값. 어떤 키가 눌리던지 항상 실행된다. .. onkeydown이 onkeypress보다 이벤트가..

반응형