검색결과 리스트
난독화/자바스크립트 공부에 해당되는 글 8건
- 2013.11.26 자바스크립트 정리 8 (정규표현식)
- 2013.11.16 자바스크립트 정리 7 (이벤트)
- 2013.11.16 자바스크립트 정리 6 (객체)
- 2013.11.15 자바스크립트 정리 5 (함수)
- 2013.11.13 자바스크립트 정리 4 (배열)
- 2013.11.13 자바스크립트 정리 3 (반복문)
- 2013.11.13 자바스크립트 정리 2 (조건문)
- 2013.11.10 자바스크립트 정리 1 (연산자)
글
자바스크립트 정리 8 (정규표현식)
## 정규표현식
1. 정규표현식 (특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어)
1) 형태 ()
- var test = new RegExp("정규표현식");
- var test = /정규표현식/;
2) 정규표현식 검증 메소드
2-1) test(); : 검증할 문자열에 포함되었지 검증하여, true 또는 false를 반환
ex)
<script>
var kwang = /[0-9]/; //-- 정규표현식: 숫자가 하나라도 포함되면 true
var vara = kwang.test("ffefafa"); // 검증할 문자열
alert(vara); //-- 결과값 출력 → 검증할 문자열에 숫자가 없으므로 false 출력
</script>
2-2) exec(); : 검증할 문자열에서 일치하는 문자열을 찾아 반환
2-3) match(/정규표현식/) : 검증할 문자열에서 일치하는 문자열을 찾아 반환
ex)
<script>
//-- exec 예제
var kwang = /\d\s\d\s\d\?/; //-- 정규표현식
var vara = kwang.exec("1 9 3?43456664efafaefae"); // 검증할 문자열
alert(vara); //-- 1 9 3? 가 출력됨
//-- match 예제
var gue = "kwangguevara.tistory.com"; //-- 검증할 문자열
s = gue.match(/\w\.\w\w/); //-- 정규표현식
alert(s); //-- a.ti 가 출력됨
</script>
3) 정규표현식에서 특수 문자 사용
- 의미가 정해진 기호(+, ^, ?, $ 등)를 일반문자처럼 사용하려면 앞에 \를 써주면 된다
- /\?/ -- 검증문자열에 ?가 있으면 일치
＊물음표(?)는 수량한정자로 \ 없이 /?/로 표기 할 경우 오류가 발생한다.
2. 정규표현식 패턴 정리
1) /[abc]/ : 검증할 문자열에 대괄호([]) 안의 문자가 하나라도 존재하면 일치
- /[1234]/, /[0-9]/, /[a-z]/ ... ← [0-9] 은 [0123456789] 와 동일한 표현
2) /[^abc]/ : 검증할 문자열에 대괄호([]) 안의 문자외의 패턴이 하나라도 존재하면 일치
- /[^1234]/, /[^0-9]/, /[^a-z]/ ... ← [^0-9] 은 숫자외의 문자가 하나라도 있으면 일치
3) /\d/ : 검증할 문자열에 숫자가 존재하면 일치
/\D/ : 검증할 문자열에 숫자가 존재하면 일치
4) /\w/ : 검증할 문자열에 문자나 숫자가 하나라도 존재하면 일치
/\W/ : 검증할 문자열에 문자나 숫자이외의 패턴이 하나라도 존재하면 일치
5) /\s/ : 검증할 문자열에 공백, 탭, \n 이 존재하면 일치
ex)
var kwang = /\d\s\d\s\d/; //-- 순서에 맞게 패턴이 동일해야 일치
var vara = kwang.test("1 9 3"); //-- [숫자][공백][숫자][공백][숫자] 패턴
alert(vara);
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 7 (이벤트) (0) | 2013.11.16 |
|---|---|
| 자바스크립트 정리 6 (객체) (0) | 2013.11.16 |
| 자바스크립트 정리 5 (함수) (0) | 2013.11.15 |
| 자바스크립트 정리 4 (배열) (0) | 2013.11.13 |
| 자바스크립트 정리 3 (반복문) (0) | 2013.11.13 |
글
자바스크립트 정리 7 (이벤트)
## 이벤트
1. 이벤트 뛰우기 예제
ex1) 버튼 클릭시 경고창 뜨는 예제
<html>
<head>
<script>
function test(){
alert("goodjob!!");
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test();"/>
</body>
</html>
ex2) 버튼 누르면 구구단의 9단을 반복하도록 하는 예제
<html>
<head>
<script>
var test=0;
</script>
</head>
<body>
<input type="button" value="click" onclick="i=9;test++;result=test*i;alert('9곱하기'+test+'는'+result);" />
</body>
</html>
=> 누를때 마다 구단 진행
2. 이벤트 종류
- 클릭
1) 클릭 이벤트: onclick (대부분 지원)
2) 더블클릭 이벤트: ondblclick (대부분 지원)
- 포커스
3) 포커스를 얻을때: onfocus (<button>, <input>, <label>, <select>, <textarea>, <body>)
4) 포커스를 읽을때: onblur (<button>, <input>, <label>, <select>, <textarea>, <body>)
ex) 포커스 얻을때, 읽을때
<html>
<body>
<input type="textaea" onfocus="alert('on')" onblur="alert('off')" />
</body>
</html>
- 마우스
5) 마우스 버튼 늘렀을때 : onmousedown (대부분 지원)
6) 마우스 버튼 땟을때 : onmouseup (대부분 지원)
7) 마우스 움직였을때 : onmousemove (대부분 지원)
8) 마우스를 요소밖으로 움직였을때 : onmouseout (대부분 지원)
9) 마우스를 요소위로 움직였을때 : onmouseover (대부분 지원)
## 더 많은 자바스크립트 이벤트 보기 ↓↓↓↓↓↓↓
▶ http://www.technote.co.kr/php/technote1/board.php?board=apple2&command=body&no=257
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 8 (정규표현식) (0) | 2013.11.26 |
|---|---|
| 자바스크립트 정리 6 (객체) (0) | 2013.11.16 |
| 자바스크립트 정리 5 (함수) (0) | 2013.11.15 |
| 자바스크립트 정리 4 (배열) (0) | 2013.11.13 |
| 자바스크립트 정리 3 (반복문) (0) | 2013.11.13 |
글
자바스크립트 정리 6 (객체)
## 객체
1. 객체 (프로퍼티와 메소드)
1) 호출 및 접근
- 객체이름.함수이름(); //-- 객체안의 함수 호출
- 객체이름.메소드이름(); //-- 객체안의 메소드 호출
- 객체이름.개체데이터이름 //-- 객체의 데이터(프로퍼티)에 접근
[참고] 객체지향 언어에서의 용어
- 함수를 메소드(Method)라는 용어를 사용
- 객체안의 데이터를 프로퍼티(property)라는 용어를 사용
* 'this.메소드'에서 this의 의미
- 자바스크립트를 객체기반 프로그램과 객체지향 프로그램에서 메소드가 소속된 객체를 의미한다.
## 클래스
1. 클래스 (객체의 틀, 비슷한 부류의 객체들의 공통성을 모은 것)
- 역활: 객체를 만드는 틀을 제공
-> A.class -> A-1 객채를 만들때 필요한 정보를 가지고 있음
- 클래스를 통해서 만들어진 객체를 인스턴스라고 함
2. 클래스 프로퍼티
- 클래스 프로퍼티로 정의하면 클래스에만 생기고 객체에는 생기지 않는다.
- 클래스 프로퍼티는 해당 클래스의 모든객체에서 공유할 수 있다.
=> 동일한 프로퍼티가 모든 객체에 생기면 비효율 적이기 때문에
1) 형태
- 클래스이름.클래스프로퍼티이름
3. 인스턴트 프로퍼티
1) 형태
- 객체이름.프로퍼티이름
4. 클래스 메소드와 인스턴스 메소드
1) 형태
- 클래스이름.클래스메소드이름(); //-- 클래스 메소드 호출
- 객체이름.인스턴스메소드이름(); //-- 인스턴스 메소드 호출
2) 차이점
- 클래스메소드: 객체의 프로퍼티 값을 사용하지 않아도 되는 메소드를 사용
-> 모든 객체에 동일하게 적용되는 메소드를 사용
- 객체의 프로퍼티 값을 사용해야하는 메소드에 해용
-> 객체의 구분이 필요한 메소드에 사용
5. 객체로 구성되는 객체
- 객체 안에 객체들로 구성된 객체의 메소드를 호출하는 방법
-> 객체1.객체1-1.객체1-1-1.객체1-1-1-1(); //-- 점(.)을 이용하여 구분해서 호출
- 객체 안의 객체들로 구성된 객체의 프로퍼티 접근 방법
- 객체1.객체1-1.객체1-1-1.객체1-1-1-1 = 13;
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 8 (정규표현식) (0) | 2013.11.26 |
|---|---|
| 자바스크립트 정리 7 (이벤트) (0) | 2013.11.16 |
| 자바스크립트 정리 5 (함수) (0) | 2013.11.15 |
| 자바스크립트 정리 4 (배열) (0) | 2013.11.13 |
| 자바스크립트 정리 3 (반복문) (0) | 2013.11.13 |
글
자바스크립트 정리 5 (함수)
## 함수
1. 함수 형태
1) 형태 (선언)
- var 함수이름 = function() { } 또는 var 함수이름 = function(매개인자) { }
- function 함수이름() { } 또는 function 함수이름(매개인자) { }
2) 호출
- 함수이름() -- 매개인자가 없을 경우
- 함수이름(매개인자) -- 매개인자가 있을 경우
2. 내장함수 : 자바스크립트에서 이미 정의 해놓은 함수
1) alert() : 데이터를 경고창을 뛰워 보여줌
2) document.write() : 데이터를 웹브라우져 화면에 출력
3) eval() : 실행함수
4) confirm() : 경고창으로 뜨며, 사용자에게 확인을 받을때 사용
→ 확인을 누를 경우 true 값을 반환하고, 취소를 누를경우 false 값을 반환한다
5) prompt() : 사용자에게 문자열 입력을 받아 프로그램에 이용할 때 사용
ex) prompt("매개인자1","매개인자2") -- 아래 그림 참조
6) isFinite() : 매개인자가 유한한 수이면 true, 무한하거나 숫자가 아니면 false
7) isNaN() : 매개인자가 숫자면, false를 숫자가 아니면 true를 반환
* 이외에도 다양한 내장함수가 있다.
3. 전역변수와 지역변수
- 전역변수: 모든 함수 에서 공유하는 변수
- 지역변수: 함수 안에서 변수를 정의하며, 그 함수 안에서만 사용가능한 변수
ex)
<script>
var s = "전역변수"; //-- 전역변수 선언
function a(){
var s = "지역변수"; //-- 함수안에서 지역변수 선언
alert(s); //-- 지역변수가 출력된다.
}
function b(){
alert(s); //-- 전역변수가 출력된다.
}
a(); //-- 함수 a 실행
b(); //-- 함수 b 실행
</script>
[참고] ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
위의 예제에서 지역변수 선언 부분을 var s = "지역변수"가 아닌 s = "지역변수" 로 하면 b 함수
실행 시 "지역변수"가 출력된다.
s = "지역변수" 는 s변수를 선언하는게 아닌, s변수에 "지역변수" 문자를 할당 한다는 의미이기
때문이다.
* 함수에 대해서는 이미 난독화 공부에서 정리했기 때문에 그외의 부분만 정리하였다.
자세한 내용이 궁금하다면 아래 링크를 참조하기 바란다
- 바로가기 : http://kwangguevara.tistory.com/19
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 7 (이벤트) (0) | 2013.11.16 |
|---|---|
| 자바스크립트 정리 6 (객체) (0) | 2013.11.16 |
| 자바스크립트 정리 4 (배열) (0) | 2013.11.13 |
| 자바스크립트 정리 3 (반복문) (0) | 2013.11.13 |
| 자바스크립트 정리 2 (조건문) (0) | 2013.11.13 |
글
자바스크립트 정리 4 (배열)
## 배열
1. 일차원 배열
1) 형태 (선언)
- var a = new Array();
- var a = new Array(10); -- 요소를 10개 가진 배열 선언
- var a=[1,2,3,4];
ex)
<script>
var a = new Array();
a[0] = 1;
a[1] = 2;
a[2] = 3;
a[3] = 4;
alert(a);
</script>
- alert(a.length); // -- 배열의 요소 갯 수를 알수 있다.
[참고]
1. 자바스크립트 배열은 객체로 취급된다.
2. 자바스크립트에서 배열은 여러 타입의 데이터가 들어갈 수 있다
3. 배열로 정의한 변수에 다시 숫자, 문자 등을 할당하면, 배열로 사용할 수 없다.
2. 2차원 배열
1) 형태 (선언)
- var a = new Array(2);
a[0] = new Array(4);
a[1] = new Array(4);
- var a = new Array(new Array(4), new Array(4));
- var a = [[1,2,3,4], [5,6,7,8,]];
* 데이터 저장: a[0][1] = 1;
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 6 (객체) (0) | 2013.11.16 |
|---|---|
| 자바스크립트 정리 5 (함수) (0) | 2013.11.15 |
| 자바스크립트 정리 3 (반복문) (0) | 2013.11.13 |
| 자바스크립트 정리 2 (조건문) (0) | 2013.11.13 |
| 자바스크립트 정리 1 (연산자) (0) | 2013.11.10 |
글
자바스크립트 정리 3 (반복문)
## 반복문
1. for 문
1) 형태: for (초기식; 판별식 ; 증감식) { 반복 실행할 값 }
2. while 문
1) 형태
- while (판별식) { 반복 실행 할 값 } - 판별식이 거짓이면 끝
- do{ 반복 실행 값 } while( 판별식 )
3. break 문
1) break; -- 반복을 끝내고 반복문을 빠져나감
ex)
<script>
a=1;
for (i=1;i<100 ;i++ )
{
if (a >20) { break } //-- a 가 24보다 크면 for문 종료
a = a*i
alert(a);
}
</script>
4. continue문
1) continue; -- continue; 아래를 실행하지 않고 다음 반복을 시작
ex)
<script>
a=1;
for (i=1;i<8;i++ )
{
a = a*i
if (a==24) {continue} //-- a 가 24면 아래 부분을 생략하고 다시 위로 올라감
alert(a
}
</script>
5. label 문
1) [label명]:
ex)
<script>
s=0;
bolaven:
for (i=1;i<10 ;i++ )
{
for (j=1;j<10 ;j++ )
{
if (s==25)
{break bolaven;} //-- label bolaven을 찾아 아래 for을 종료한다
s= i*j
document.write(s+" ")
}
document.write("<br> ")
}
</script>
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 6 (객체) (0) | 2013.11.16 |
|---|---|
| 자바스크립트 정리 5 (함수) (0) | 2013.11.15 |
| 자바스크립트 정리 4 (배열) (0) | 2013.11.13 |
| 자바스크립트 정리 2 (조건문) (0) | 2013.11.13 |
| 자바스크립트 정리 1 (연산자) (0) | 2013.11.10 |
글
자바스크립트 정리 2 (조건문)
## 조건 문
1. if문 (조건이 참일때와 거짓일때를 나누어 실행)
1.1 형태
1) if (조건문) { 참일 때 실행 값 }
- 조건 부분에는 참이나 거짓을 돌려줄수 있는 상태 판별 문장이 들어가야함
2) if(조건) { 실행 값 }
else {거짓일 때 실행값}
3) if(조건) { 실행 값 }
else if (조건) { 실행 값 }
else if (조건) { 실행 값 }
else {거짓일 때 실행값}
2. switch문 (if문 보다 여러 결과를 도출할 때 사용)
2.1 형태 (switch / case문 - 변수와 검사값을 비교하여 같은 값의 실행값으로 감)
1) switch (변수) {
case 검사 값1:
실행 값
break;
case 검사 값2:
실행 값
break;
case 검사 값3:
실행 값
break;
case 검사 값4:
실행 값
break;
}
ex) 테스트를 위한 예제
<script>
model = "아이뻐"; ;
a1="갠역시", a2= "베그", a3= "아이뻐", a4= "럭셔리";
var pr = 0 ;
switch(model){
case a1:
pr = "200원" ;
break;
case a2:
pr = "150원";
break;
case a3 :
pr = "100원";
break;
case a4 :
pr = "50원";
break;
default :
pr = "안 파라";
break;
}
alert(pr);
</script>
[참고] if문은 일치 및 다양한 조건검사를 할수있지만, switch문은 일치(===)검사만 가능
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 6 (객체) (0) | 2013.11.16 |
|---|---|
| 자바스크립트 정리 5 (함수) (0) | 2013.11.15 |
| 자바스크립트 정리 4 (배열) (0) | 2013.11.13 |
| 자바스크립트 정리 3 (반복문) (0) | 2013.11.13 |
| 자바스크립트 정리 1 (연산자) (0) | 2013.11.10 |
글
자바스크립트 정리 1 (연산자)
자바스크립트 난독화 공부를 하면서 자바스크립트에 대해 좀 더 공부해보고 싶어졌다 !!
내가 자바스크립트를 공부하면서 새롭게 알았거나, 꼭 알아두어야 하는 것들을 정리해본다.
상식적인 것이나 대부분 알고 있는 내용은 과감히 생략해 본다.
## 자바스크립트란? -> 검색!!
## 기초지식
1. 문장종료: 세미콜론(;)을 사용하여 종료
2. 주석처리: // 한줄 주석 처리, /* */ 여러줄 주석 처리
3. 변수 선언: var 를 이용하여 선언, 데이터 타입 명시하지 않음. (var 쓰지않아도됨)
## 식별자 (변수의 이름이나 함수의 이름)
1. 대소문자를 구별한다
2. 식별자의 첫글자는 반드시 문자나 _, $로 시작되어야한다 (숫자 X)
3. _, $를 제외한 특수문자는 식별자에 사요할 수 없다
4. var 처럼 키워드는 식별자로 사용할 수 없다
## 연산자
⊙ 피연산자의 갯수에 따른 종류: 단항 연산자, 이항연산자, 삼항 연산자
ex) 단 항 연산자: i++, i-- ...
ex) 이 항 연산자: 1+2, 4-3, 12/3 ...
ex) 삼 항 연산자: (a==b) ? 2:4
⊙ 연산자의 종류와 우선순위
- 증감연산자 > 산술연산자 > 비교연산자 > 논리연산자 > 할당연산자
1.산술연산자
- 사칙연산하는 연산자 (+, -, *, %)
- 더하기(+)는 문자열을 더하기 연산가능하지만 다른 연산자는 할 수 없다
ex) 더하기
1+20= 21, 1+'20'= 120, '1'+'20'=120, '가'+'나'=가나 ..
ex) 빼기
1-20=-19, '1'-20=-19, '1'-'20'=-19, '가'-'나'=NaN
- 데이터 값이 true이면 숫자 1로, false 이면 숫자 0으로 연산된다.
1.1 증가(++)연산자, 감소(--)연산자
- 전치 증가/감소 (++i): 연산자가 피연산자 앞에 오는 경우 피연산자에 1을 더한 수 값을 돌려준다.
- 후치 증가/감소 (i++): 연산자가 피연산자 뒤에 오는 경우 피연산자 값을 돌려준 후 1을 증가 시킨다.
ex) 전치 증가
a = 10;
b = ++a;
alert(b); //-- b = 11
alert(a); //-- a = 11
ex) 후치 증가
a = 10;
b = a++;
alert(b); //-- b = 10
alert(a); //-- a = 11
2.관계 연산자
2.1 동등 연산자(==) 와 일치 연산자(===)
- 동등연산자: 데이터 타입이 달라도 변환했을 때 같은 값을 가질 수 있으면 true, 데이터값이 다르면 false를 반환
- 일치연산자: 값뿐만아니라 데이터 타입도 같아야 true를 반환함
ex) 동등연산자와 일치연산자 비교
a = 7;
b = "7";
alert(a==b); //-- true 를 반환
alert(a===b); //-- false를 반환
2.2 비동등 연산자(!=) 와 불일치 연산자 (!==)
- 피연사잔의 값이 동일할 때 false를 불일치 할 때 true를 나타낸다.
- 2.2.1과 동일하게 비동등연산자는 데이터 변환을 허용하고, 불일치 연산자는 데이터 타입도 비교한다.
2.3 비교연산자(<, >, <=, >=)
- 두 피연산자를 비교하여 true 또는 false를 반환한다.
- 숫자 뿐만아니라 문자도 비교 가능하고, 두 데이터의 비교가 불가능 할 경우 항상 false가 반환된다.
ex) a = "abc";
b = "bcd";
alert(a<b); //-- true를 반환 (b가 a보다 크다고 인식됨, "가", "나"를 비교하면 "나"를 크다고로 인식함
=> 한번씩 해보세요~
3. 논리 연산자
- && : and 연산자
- || : or 연산자
- ! : NOT 연산자 (피연산자의 값이 true이면 false, false이면 true를 돌려주는 연산자)
4 비트 연산자 (2진수에 대한 연산)
- & : and 연산자
- | : or 연산자
- ^ : xor 연산자
- ~ : NOT 연산자
4.1 쉬프트 연산자 (>>, <<, >>>): 방향에 따라 오른쪽, 왼쪽으로 비트를 이동한다.
- >> 연산자는 오른쪽으로 이동 후 부호 비트에 양수는 0, 음수는 1로 채운다
- >>> 연산자는 오른쪽으로 이동 후 부호 비트에 무조건 0으로 채운다.
5. 할당 연산자
- a = 11 처럼 a의 변수에 11 이라는 데이터 값을 할당하는 것
- 종류: +=, -=,*=,%=, >>=, <<=, >>>=, &=, ^= ...
ex) +=의 사용(더하기 후 할당한다)
a = 10;
b = 2;
b += a; // b = b + a; 와 동일한 표현이다.
alert(b); //-- 12
6. 기타연산자
- 3항 연산자 - [조건] ? [참일때 값] : [거짓일때 값]
ex)
a=4;
b=5;
c = (a >= b)?'a>b':'b>a'; //-- a>b 참이면 a>b를 출력하고, 거짓이면 b>a를 출력
alert(c); //-- 출력값: b>a
- typeof 연산자: 데이터의 타입을 확인 할 때 사용
ex) a = 11;
alert(typeof(a)); //-- number (데이터의 타입이 출력됨)
'난독화 > 자바스크립트 공부' 카테고리의 다른 글
| 자바스크립트 정리 6 (객체) (0) | 2013.11.16 |
|---|---|
| 자바스크립트 정리 5 (함수) (0) | 2013.11.15 |
| 자바스크립트 정리 4 (배열) (0) | 2013.11.13 |
| 자바스크립트 정리 3 (반복문) (0) | 2013.11.13 |
| 자바스크립트 정리 2 (조건문) (0) | 2013.11.13 |