웹보안_5. Javascript문법

Javascript문법

Javascript의 여러가지 문법에 대해서 다뤄보도록하자.

먼저 변수선언을 확인해보자.

 

변수는 var을 이용해 선언한다.

선언과 동시에 정수또는 문자열로 선언해도 되고 값이 선언이 안되면 해당 변수는 값이 정의되지 않는다. 따라서 undefined라는 값을 가지게된다.

 

변수 선언시 , 를 이용하면 한꺼번에 선언 할 수 있다.

다음으로 연산자들을 알아보자 먼저 산술연산자에서 주의할 사항이있다. 보통 다른언어들은 숫자 + 문자를 하게되면 에러가나지만 javascript에서는 에러가 나지않는다. 아래를 통해 확인해보자.

 

정수 + 문자를 하면 문자열로 나타나는것에 주의하자.

비교연산자에서도 주의사항이있다. 다른언어에는 없는 ===, !=== 두종류에대해서 알아보자.

 

== 연산자는 타입과 상관없이 비교해주고 === 연산자는 type을 비교해준다.

논리연산자로는 and를 나타내는 && or을 나타내는 || not을 나타내는 !가있다.

 

자바스크립트에서 배열은 [ ] 이다. type은 object로 구분된다.

{ } 는 객체를 나타내는 파이썬의 딕셔너리라고 생각하면 편하다.

 

자바스크립트에서 배열은 배열안에 원소로 정수와 문자가 같이 존재할 수도있다.

객체와 문자열, 객체와 객체의 비교를 아래를 통해확인해보자.

 

객체와 객체를 비교하는 경우 값이 같아도 ==, ===연산자 모두 false를 나타낸다.

문자와 객체를 비굑하는 경우에는 값이 같으면 == 연산자는 true === 연산자는 false이다.

 

객체나 배열의 원소들을 초기화할때는 null과 undefined가 있는데 둘의 차이를 비교해보자.

 

null을 이용해 초기화할경우 값은 null, type은 object로 되고 undefined를 이용해 초기화할 경우 값과 type모두 undefined로 나타내어진다. 그렇다면 값을 ""로 하게될경우 어떻게될까?

 

변수의 값을 ""로 지정하게되면 값은 ""로 비어있게되고 type은 String으로 구분되어진다. 아래를통해 정리해보자.

 

#String, Number

 

숫자를 문자로 변환하려면 String(변수)또는 변수.toString()을 사용하고 문자를 숫자로 변환하려면 Number(변수)또는 parseInt(변수)를 이용한다. 

 

이제는 문자열에 대해서 살펴보자. 문자열안에서 "단어"를 표현하려면 \"단어\"를 사용한다 이것을 이스케이프시퀀스라하는데 아래를통해 살펴보자

 

문자열은 여러가지 문자열 메소드들이 존재한다. 다 알수는 없지만 아는만큼 바로바로 사용할 수 있으니 최대한 많이 알아보도록 하자.

 

<문자열>

먼저 문자열에서 문자열을 찾을수 있는 메소스들의 종류다.

# indexOf(), lastIndexOf(), search()

 

indexOf는 해당 문자열이있는 인덱스값으로 알려준다. lastindexOf는 해당문자열이 여러개일경우 마지막에 있는 문자의 인덱스값으로 알려준다. search는 해당 문자열이 있는 인덱스 값으로 알려준다.

 

다음으로 문자열의 일부분을 추출하는 메소드들을 알아보자.

#slice(), substring(), substr()

slice(시작, 끝), substring(시작, 끝), substr(시작, 길이)

 

slice와 substring은 사용이 비슷하지만 slice는 음수로도 표현가능하고 substring은 음수표현은 불가능하다. substr은 slice, substring과는 다르게 길이로 해당문자열을 추출한다.

 

문자열의 내용을 바꿀수 있는 메소드들을 알아보자.

# replace()

replace메소드는 아래의 사진을 통해서 알아보자.

 

replace('x','y')는 문자열x를 문자열y로 변환하는 것이다.

다른표현법으로는 replace(/x/i, 'y')가있고 x문자열이 많을때 한번에 바꾸고 싶다면 replace(/x/g, 'y')를 이용하면 한번에 바뀌게된다. 기본적으로 replace는 첫번째 일치 항목만 바꾼다.

 

# toUpperCase(), toLowerCase()

문자열의 대소문자를 한꺼번에 바꾸어주는 메소드로 toUpperCase()는 전부대문자로 toLowerCase()는 전부소문자로 바꾸어준다.

 

# concat()

두개이상의 문자열을 합쳐준다.

 

# charAt(), charCodeAt()

문자열의 문자를 추출하는 2가지 방법이있다.

charAt('인덱스')를 이용해 해당문자를 획득하거나, charCodeAt('인덱스')를 이용해 해당문자의 유니코드를 얻어낼 수 있다.

 

 

# split()

마지막으로 문자열을 배열로 엑세스하는것은 안전하지않고 예측할 수 없다. 따라서 split을 이용해 문자열을 배열로 만들어보자.

 

split을 사용하면 해당 문자열을 배열로 표현된다는 것을 확인할 수 있다.

 

<배열>

다음으로는 배열에 관련된 메소드를 알아보자.

# pop(), push()

먼저 pop과 push를 알아보자

 

pop()을 사용하면 배열의 마지막 원소를 해당배열에서 삭제하고 끄집어낸다. 반환하는 값은 끄집어낸 원소이다.

push('원소')를 사용하면 해당원소를 배열의 마지막에 붙여넣는다. 반환하는 값은 붙여넣은 원소를 포함한 배열의 길이이다.

 

# shift(), unshift()

pop과 push는 마지막의 원소를 다룬다면 shift와 unshift는 처음의 원소를 다룬다.

 

 

shift()를 사용하면 배열의 처음 원소를 해당배열에서 삭제하고 끄집어낸다. 반환하는 값은 끄집어낸 원소이다.

unshift('원소')를 사용하면 해당원소를 배열의 처음에 붙여넣는다. 반환하는 값은 붙여넣은 원소를 포함한 배열의 길이이다.

 

# slice(), splice()

다음으로는 slice와 splice에 대해서 알아보자.

 

 

먼저, splice(x,y)를 하게되면 배열의 x번째인덱스부터 y개만큼의 원소를 삭제하고 끄집어낸다. 반환하는 값은 삭제한 원소이다.

splice(x,y,'원소','원소'...)를 하게되면 배열의 x번째인덱스부터 y개만큼의 원소를 삭제하고 ,뒤의 작성한 원소만큼 해당자리에 붙여넣는다. 반환하는 값은 삭제한 원소이다.

 

 

다음으로, slice(x)를 하게되면 배열의 처음부터 x개만큼 자른다. 반환하는 값은 배열에서 자른것을 제외한 나머지 배열이다. 배열의 원소는 그대로있다.

slice(x,y)를 하게되면 배열의 x번째 인덱스부터 y-1번째 인덱스까지 삭제한다. 반환하는 배열에서 자른 원소이다. 배열의 원소는 그대로있다.

 

# toString(), join()

다음으로는 toString과 join에 대해서 알아보자

 

배열을 toString()하게되면 원소,원소,원소,...형태의 문자열로 나타낼수있다.

,대신에 다른 특수기호를 설정하려면 join('특수기호')를 사용하면 배열을 특수기호가 포함된 문자열로 바꿀수있다.

 

# concat()

마지막 메소드로 concat을 알아보자. concat은 문자열에서도 사용되고 배열에서도 사용된다. 따라서 배열과 배열을 하나의 배열로 합쳐준다. 2개이상의 배열을 합칠 수 있는데 아래 표현을 확인해보자.

 

<조건문>

# if문

조건문으로는 if문이 있다. 조건을 정해놓는다고 생각하면된다. if ( 조건 ) { 동작or내용 } 조건이 만족하면 동작하게하거나 해당내용을 실행한다.

 

 

# switch문

switch ( 참조변수 ) { case 값 : 실행구문; }

조건에 해당하는 값을 만나면 해당하는 case를 실행하고 끝낸다.

 

필요한 조건에 만족하는 경우마다 각각 다른 조건을 매칭하여 실행시킬 수 있다. 또한 각각의 개별조건들이 많은 경우 맞는 조건을 만나면 실행후 루프에서 바로 벗어날 수 있어 자원관리에 보다 효율적인 장점이있다.

 

 

<반복문>

# for문

for문의 형태를 아래를 통해 확인해보자

 

i=0부터 ++연산자로인해 1, 2, 3, .. 1씩증가하는데 i<5조건에 의해 i=4일때 까지만 실행된다.

 

# for / in문

객체와 배열을 사용하는 경우 for ( x in 객체/배열 ) 을 사용하면 x자리에는 객체의 속성이름 배열에서는 인덱스 값이 x에 반영된다.

 

 

# while문

구조만 다른 for과 동일하게 반복문처럼 사용된다.

 

 

# do / while문

while문에 해당조건이 만족하지않으면 while문 안의 문장이 실행되지않지만 do .. while문을 사용하면 해당조건이 만족하지않아도 do 안에있는 문장은 무조건 1번실행하고 조건을 고려한다.

while문 조건이 일치하지않으면 위와같이 result값은 원래값인 1이다.

while문의 조건이 일치하지않아도 do안에 연산은 한번 실행된뒤 조건을 고려한다.

 

<함수>

# 함수의 구조

 

 

<난수>

# 함수의 구조

 

기본형태는 Math.random()이다. 0부터 1까지 소수를 나타낸다.

Math.floor(Math.random() * x)를 하면 0부터 x-1까지의 정수를 나타낸다.

 

## 야구게임 만들어보기

 

-> 숫자맞추기 게임
-> 임의숫자 혹은 랜덤 : 825
-> 사용자한테 값을 입력받아 10번안에 맞추도록
-> 자리수랑 숫자까지 일치하면 strike
-> 자리는다른데 숫자가같으면 ball
-> 자리랑숫자 모두 불일치하면 out
-> 중복된 숫자는 없다.(세자리모두 중복되지않은 숫자)

-> 입력받는값은 문자
-> prompt로 입력받기, 받는 모든값은 문자열

 

<정해진 수로사용>

 

<랜덤사용>