3주차 JavaScript

2021. 4. 7.

by. Sooming_

JavaScript

: 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 웹브라우저에서 유일하게 사용할 수 있는 언어

숫자와 문자

자바 스크립트에서 "" 나 ''가 붙지 않은 숫자는 숫자로 인식

정수나 실수의 구분은 크게 중요하지 않음

Math.pow(3,2);       // 9,   3의 2승 
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   3의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자

문자(String)는 "" 혹은 '' 중 하나로 감싸야 함

숫자를 따옴표로 감싸면 문자가 됨

typeof : 값의 데이터 형을 알려주는 기능

alert(typeof "1");
// string

alert(typeof 1);
// number

Escape

\를 따옴표 앞에 위치시키면 문자열의 구분자가 아니라 단순히 문자로 해석하도록 강제할 수 있음

alert('Sooming_\'s javascript');

// Sooming_'s javascript

여러줄의 표시

\n : 는 줄바꿈을 의미하는 특수한 문자

alert("안녕하세요.\nSooming_입니다.");

// 안녕하세요.
// Sooming_입니다.

문자 + 문자

alert("coding"+" everyday");

// coding everyday

문자열의 길이 (.length)

alert("coding everyday".length)

// 15

변수

변수의 선언

var은 변수를 선언하겠다는 것을 의미

var을 생략할 수도 있지만 이것은 유효범위라는 것에 영향을 미침

변수의 이름은 $, _, 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있음

var a = 1;
alert(a+1);  // 2
 
var a = 2;
alert(a+1);  // 3

var first = "coding";
alert(first+" everyday"); // coding everyday

var a = 'coding', b = 'everyday';
alert(a + b); // coding everyday

주석, 줄바꿈, 여백

// : 한 줄 주석

/* */ : 여러 줄 주석

; : 명령어의 단위

(tab) : 들여쓰기

비교

대입 연산자 (=)

: 우항의 값을 좌항의 변수에 대입

비교연산자

: 비교 연산자의 결과는 true나 false 중의 하나

: 우변과 좌변이 같은 지 비교

alert(1==2)             //false
alert(1==1)             //true
alert("one"=="two")     //false 
alert("one"=="one")     //true

=== (일치연산자)

: 데이터형이 같아야 True

alert(1=='1');              //true
alert(1==='1');             //false

undefined : 의도하지 않고 정의 안됨
null : 의도적으로 정의 안됨
NaN : 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아님

alert(null == undefined);       //true
alert(null === undefined);      //false
alert(true == 1);               //true
alert(true === 1);              //false
alert(true == '1');             //true
alert(true === '1');            //false
 
alert(0 === -0);                //true
alert(NaN === NaN);             //false

부정과 부등호

: '!'는 부정을 의미

alert(1!=2);            //true
alert(1!=1);            //false
alert("one"!="two");    //true
alert("one"!="one");    //false

!==

: '!=='는 '!='와 '=='의 관계와 같음

조건문

조건문의 문법

: if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값은 Boolean

Boolean의 값이 true라면 중괄호 구문이 실행됨

if(true){
    alert('result : true');
}

// result : true


if(false){
    alert('result : true');
}

// 아무것도 출력하지 않음

else

: if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행됨

if(false){
    alert(1);
} else {
    alert(2);
}

else if

: if나 else와는 다르게 여러개가 올 수 있고, else if의 모든 조건이 false라면 else가 실행됨. else는 생략 가능

if(false){
    alert(1);
} else if(false){
    alert(2);
} else if(true){
    alert(3);
} else {
    alert(4);
}

// 3

변수와 비교연산자

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        id = prompt('아이디를 입력해주세요.');
        if(id=='Sooming_'){
            password = prompt('비밀번호를 입력해주세요.');
            if(password==='123456'){
                alert('인증 했습니다.');
            } else {
                alert('인증에 실패 했습니다.');
            }
        } else {
            alert('인증에 실패 했습니다.');
        }
    </script>
</body>
</html>

논리 연산자

&& (AND 연산자)

: 좌항과 우항이 모두 참(true)일 때 참

if(true && true){
    alert(1);
}
if(true && false){
    alert(2);
}
if(false && true){
    alert(3);
}
if(false && false){
    alert(4);
}

// 1

|| (or 연산자)

: '||'의 좌우항 중에 하나라도 true라면 true

if(true || true){
    alert(1);
}
if(true || false){
    alert(2);
}
if(false || true){
    alert(3);
}
if(false || false){
    alert(4);
}

// 1
// 2
// 3

! (NOT 연산자)

: '!'는 부정의 의미로, Boolean 값을 역전시킴

if(!true && !true){
    alert(1);
}
if(!false && !true){
    alert(2);
}
if(!true && !false){
    alert(3);
}
if(!false && !false){ 
    alert(4);
}

// 4

boolean의 대체제

0, 1

관습적인 이유로 0는 false 0이 아닌 값은 true로 간주

if(0){
    alert(1)
}
if(1){
    alert(2)
}

// 2

기타 false로 간주되는 데이터 형

if(!''){
    alert('빈 문자열') // 빈 문자열
}
if(!undefined){
    alert('undefined'); // undefined
}
var a;
if(!a){
    alert('값이 할당되지 않은 변수'); // 값이 할당되지 않은 변수
}
if(!null){
    alert('null'); // null
}
if(!NaN){
    alert('NaN'); // NaN
}

반복문 (Loop, Iterate)

반복문의 문법

while

: while문 뒤에 따라오는 괄호 안의 조건이 참(true)이면 중괄호 안의 코드 구간을 반복적으로 실행

while (조건){
    반복해서 실행할 코드
}

var i = 0;
// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.
while(i < 10){
    // 반복이 실행될 때마다 coding everybody <br />이 출력된다. <br /> 줄바꿈을 의미하는 HTML 태그
    document.write('coding everybody <br />');
    // i의 값이 1씩 증가한다.
    i++
}

// coding everybody
// coding everybody
// coding everybody
// coding everybody
// coding everybody
// coding everybody
// coding everybody
// coding everybody
// coding everybody
// coding everybody

for

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

for(var i = 0; i < 10; i++){
    document.write('coding everybody'+i+'<br />');
}

// coding everybody0
// coding everybody1
// coding everybody2
// coding everybody3
// coding everybody4
// coding everybody5
// coding everybody6
// coding everybody7
// coding everybody8
// coding everybody9

반복문의 제어

break

: 반복문 안에서 break가 실행되면 반복문을 즉시 종료

for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('coding everybody'+i+'<br />');
}

// coding everybody 0
// coding everybody 1
// coding everybody 2
// coding everybody 3
// coding everybody 4

continue

: 실행을 즉시 중단하면서 반복은 지속

for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('coding everybody'+i+'<br />');
}

// coding everybody 0
// coding everybody 1
// coding everybody 2
// coding everybody 3
// coding everybody 4
// coding everybody 6
// coding everybody 7
// coding everybody 8
// coding everybody 9

반복문의 중첩

// 0부터 9까지 변수 i에 순차적으로 값을 할당        
for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){    
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');
    }
}

함수

: 하나의 로직을 재실행 할 수 있도록 하는 것

재사용성
유지보수의 용이
가독성

함수의 형식

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

function numbering(){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

// 0123456789

입력과 출력

return

: 함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환하며 동시에 함수를 종료시킴

function get_member1(){
    return 'A1';
}
 
function get_member2(){
    return 'A2';
}
 
alert(get_member1());
alert(get_member2());

// A1
// A2

return은 결과를 반환하는 것 외에 함수를 중지시키는 역할도 함

function get_member(){
    return 'A1';
    return 'A2';
    return 'B1';
}
alert(get_member());

// 'A1'만 출력

인자

: 함수로 유입되는 입력 값

function get_argument(arg){
    return arg;
}
 
alert(get_argument(1));
alert(get_argument(2));

// 1
// 2

복수의 인자

function get_arguments(arg1, arg2){
    return arg1 + arg2
}
 
alert(get_arguments(10, 20));
alert(get_arguments(20, 30));

// 30
// 50

다양한 함수 정의 방법

var numbering = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

배열

: 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입

var member = ['Dopa', 'Paka', 'Ralo']

index

: 배열에 담겨있는 값을 가져올 때는 대괄호 안에 넣는 숫자. 0부터 시작

var member = ['Dopa', 'Paka', 'Ralo']
alert(member[0]); // Dopa
alert(member[1]); // Paka
alert(member[2]); // Ralo

배열과 반복문

function get_members(){
    return ['Dopa', 'Paka', 'Ralo'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());   
    document.write('<br />');

// DOPA
// PAKA
// RALO

배열의 제어

크기 (.length)

var arr = [1, 2, 3, 4, 5];
alert(arr.length);

// 5

배열의 조작

추가

.push(), .concat(), .unshift(), .splice()

var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f'); // 배열 맨 끝에 추가
alert(li);

// ['a', 'b', 'c', 'd', 'e', 'f']

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']); // 다중 원소 추가
alert(li);

// ['a', 'b', 'c', 'd', 'e', 'f', 'g']

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z'); // 배열 맨 앞에 추가
alert(li);

// ['z', 'a', 'b', 'c', 'd', 'e', 'f']

var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B'); // 배열 중간에 추가 // array.splice(index, howmany, element);
alert(li);

// ['a', 'b', 'B', 'c', 'd', 'e']

제거

.shift(), .pop()

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift(); // 맨 앞 원소 제거
alert(li);

// 'a'
// ['b', 'c', 'd', 'e']

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop(); // 맨 뒤 원소 제거
alert(li);

// 'e'
// ['a', 'b', 'c', 'd']

정렬

.sort(), .reverse()

var li = ['c', 'e', 'a', 'b', 'd'];
li.sort(); // 정렬
alert(li);

// ['a', 'b', 'c', 'd', 'e']

var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse(); // 역순 정렬
alert(li);

// ['e', 'd', 'c', 'b', 'a']

객체 (Dictionary)

: 인덱스로 문자를 사용하는 배열

객체의 생성

var birthday = {'A1': 0612, 'A2': 1018, 'A3': 0827};

var birthday = {};
birthday['A1'] = 0612;
birthday['A2'] = 1018;
birthday['A3'] = 0827;

var birthday = new Object();
birthday['A1'] = 0612;
birthday['A2'] = 1018;
birthday['A3'] = 0827;

위 예제에서 'A1'은 key가 되고, 0612는 value

value값 접근 방법

var birthday = {'A1': 0612, 'A2': 1018, 'A3': 0827};
alert(birthday['A3']);
alert(birthday.A3);

// 0827
// 0827

객체와 반복문

var birthday = {'A1': 0612, 'A2': 1018, 'A3': 0827};
for(key in birthday) {
    document.write("key : "+key+" value : "+birthday[key]+"<br />");
}

// key : A1 value : 0612
// key : A2 value : 1018
// key : A3 value : 0827

객체지향프로그래밍

var birthday = {
    'list': {'A1': 0612, 'A2': 1018, 'A3': 0827},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
birthday.show();

// A1 : 0612
// A2 : 1018
// A3 : 0827

모듈

모듈의 효과

자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있음
코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선됨
코드 수정 시에 필요한 로직을 빠르게 찾을 수 있음
필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있음
한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있음 (브라우저에서만 해당)

모듈의 사용

greeting.js

function welcome(){
    return 'Hello world';
}

main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script>
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

<script> 태그

: 브라우저에게 어디서부터 어디까지가 JS이고, HTML인지 알려주는 HTML 태그

Ex) <script src="greeting.js"></script>

Node.js에서의 모듈 로드

var PI = Math.PI;
  
exports.area = function (r) {
return PI * r * r;
};
  
exports.circumference = function (r) {
return 2 * PI * r;
};

var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
           + circle.area(4));
// F:\BitNami\wampstack-5.4.22-0\apache2\htdocs\javascript\module>node node.demo.js
The area of a circle of radius 4 is 50.26548245743669

라이브러리

: 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미

Ex) jQuery를 이용한 예제

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>

UI와 API

UI : User Interface

API : Application Programming Interface

정규표현식

: 문자열에서 특정한 문자를 찾아내는 도구

컴파일

정규표현식 리터럴

var pattern = /a/

정규표현식 객체 생성자

var pattern = new RegExp('a');

정규표현식 메소드 실행

RegExp.exec()

var pattern = /a/

console.log(pattern.exec('abcdef')); // ["a"]
console.log(pattern.exec('bcdefg')); // null

RegExp.test()

: test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴

var pattern = /a/

console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false

String.match()

: RegExp.exec()와 비슷

var pattern = /a/

console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null

String.replace()

: 문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴

var pattern = /a/

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef

옵션

: i를 붙이면 대소문자를 구분하지 않음

var xi = /a/;
console.log("Abcde".match(xi)); // null

var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];

: g를 붙이면 검색된 모든 결과를 리턴

var xg = /a/;
console.log("abcdea".match(xg)); // ["a"]

var og = /a/g;
console.log("abcdea".match(og)); // ["a", "a"]

캡쳐

: 그룹을 지정하고 그 지정된 그룹을 사용하는 개념

(\w+)

: \w는 a~z, A~Z, 0~9 사이의 문자

+ 는 수량자로써, 앞의 타입이 하나 이상이면 발동

\s : 공백
$ : 그룹 지정

Ex) $1 : 첫번째 그룹

var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);

// everybody coding

치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '네이버 : https://www.naver.com/ 입니다.';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

// 네이버: <a href="https://www.naver.com/">https://www.naver.com/</a> 입니다.

워게임

1번) Javascript- Source

풀이 : paka99.tistory.com/17

Root me : Javascript - Source

비밀번호를 쳐야한다! F12로 개발자도구를 열어 에서 비밀번호를 확인한다 입력창에 비밀번호를 입력해주면 성공! 문제 : https://www.root-me.org/en/Challenges/Web-Client/Javascript-Source Challenges/Web..

paka99.tistory.com

2번) Javascript- Authentication 2

풀이 : paka99.tistory.com/18

Root me : Javascript - Authentication 2

로그인을 해야한다! Username을 찾아야하나보다 login.js가 수상하다 TheList에서 :을 기준으로 나누어 TheSplit의 원소로 넣는다 TheSplit[0]이 Username, TheSplit[1]이 Password인 것 같다 따라서 Passw..

paka99.tistory.com

3번) Webhacking.kr- Challenge 14

풀이 : paka99.tistory.com/19

Webhacking.kr - Challenge 14

? 뭘까 개발자도구에서 function ck()를 확인한다 URL에서 .kr이 몇 번째 인덱스인지 구하고 거기에 30을 곱해주면 되는 것 같다 18번째이므로 ul은 540이다! 성공! 문제 : https://webhacking.kr/challenge/j..

paka99.tistory.com

4번) Webhacking.kr - Challenge 15

풀이 : paka99.tistory.com/20

Webhacking.kr - Challenge 15

문제를 누르면 이 창이 뜨면서 다시 메인 페이지로 돌아가게된다! Burp Suite를 사용하여 서버에서 클라이언트로 오는 Response를 확인해보자 Forward를 눌러 다음 응답을 실행시켜준다 아까 Access_Denied

paka99.tistory.com

'Hacking > Web Hacking' 카테고리의 다른 글

6주차 CSRF (0)	2021.05.24
5주차 XSS (0)	2021.05.16
4주차 PHP (0)	2021.05.02
2주차 HTML (0)	2021.03.29
1주차 Introduction of Webhacking (0)	2021.03.23

맨 위로

3주차 JavaScript

JavaScript

숫자와 문자

Escape

여러줄의 표시

문자 + 문자

문자열의 길이 (.length)

변수

변수의 선언

주석, 줄바꿈, 여백

비교

대입 연산자 (=)

비교연산자

부정과 부등호

조건문

​조건문의 문법

변수와 비교연산자

논리 연산자

boolean의 대체제

기타 false로 간주되는 데이터 형

반복문 (Loop, Iterate)

반복문의 문법

반복문의 제어

반복문의 중첩

함수

함수의 형식

입력과 출력

인자

다양한 함수 정의 방법

배열

배열과 반복문

배열의 제어

배열의 조작

객체 (Dictionary)

​객체의 생성

객체와 반복문

객체지향프로그래밍

모듈

모듈의 효과

모듈의 사용

Node.js에서의 모듈 로드

라이브러리

UI와 API

정규표현식

컴파일

정규표현식 메소드 실행

옵션

캡쳐

치환

워게임

1번) Javascript- Source

2번) Javascript- Authentication 2

3번) Webhacking.kr- Challenge 14

4번) Webhacking.kr - Challenge 15

'Hacking > Web Hacking' 카테고리의 다른 글

관련글

티스토리툴바

조건문의 문법

객체의 생성