-
📣 3주차 웹해킹 스터디 정리Study/WebHacking 2022. 3. 6. 15:25
1. JavaScript
👉 기본
- <script>태그 안에 있는 부분이 자바스크립트 부분이다.
- 자바스크립트는 브라우저에서 동작하는 언어이다.
- 텍스트 편집기, 메모장을 이용해서 실행, 실습할 수 있다.
👉 숫자와 문자
- 큰따옴표나 작은따옴표가 붙지 않는 숫자는 숫자로 인식한다.
alert(1 + 1); alert(1.1 + 2.4);
- 곱하기는 * 를 사용
alert(2 * 5)
- 나누기는 /를 사용
alert(6 / 2)
- 숫자의 연산
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, 9의 제곱근 Math.random(); // 0부터 1.0 사이의 랜덤한 숫자
- 문자는 큰 따옴표 혹은 작은 따옴표로 감싸야한다.
alert("coding everyday"); alert('coding everyday'); alert(typeof "1") //string, typeof는 값의 데이터 형을 알려준다. alert(typeof 1) // number, 따옴표 없는 숫자는 number가 출력된다.
- \n는 줄바꿈을 의미한다.
- 문자 연산
alert("coding" + " everybody"); //coding everybody alert("coding everybody".length) //16, 문자의 길이를 구할 때는 문자 뒤에 .length를 붙인다.
👉 변수
- 변수 선언 : javascript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다.
var a=1; var b="coding"; var c='coding';
- 변수 수정 : 이미 선언된 변수에 대해서는 수정할 때 var을 사용하지 않아도 된다.
a = 2; b = "dingding";
- 변수는 코드의 재활용성을 높여준다.
👉 주석
- //을 사용한다. 주석은 자바스크립트가 해석하지 않는다.
//주석, comment
- /* */ 여러줄의 주석을 사용할 때 사용한다.
/* 여러줄의 주석 여러줄의 주석 */
👉 줄바꿈과 여백
- 세미콜론 ; : 명령이 끝났다는 것을 명시적으로 알려준다. 세미콜론 생략 가능, 이 경우 줄바꿈을 명령의 끝으로 간주한다.
👉 비교 (비교 연산자)
- 동등 연산자 == : 좌항의 값과 우항의 값이 같은가 확인한다. true, false(블린 데이터 형식)
- 일치 연산자 === : 좌항과 우항이 정확하게 같을 때 true 다르면 false
정확하다는 것은 데이터형까지 같음을 의미한다. ===사용하는 것을 권장.
+) null은 값이 없음을 명시적으로 표시, undefined는 값이 없는 상태
alert(null == undefined); //true alert(null === undefined); //false
alert(true == 1); //true alert(true === 1); //false alert(true == '1'); //true alert(true === '1'); //false
NaN은 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형, 계산할 수 없음 혹은 숫자가 아니라는 뜻이다.
alert(0 === -0); //true alert(NaN === NaN); //false
- 부정 != : !는 부정을 의미한다. !=는 같지 않다를 의미한다. ==와 정반대의 결과를 보여준다.
- 부정 !== : 정확하게 같지 않음을 의미한다.
- 부등호 > < <= >=
👉 조건문
- if로 시작한다. 괄호에 조건이 오고, 조건이 될 수 있는 값을 boolean이다. else는 주어진 조건이 거짓일 때 실행된다.
if(true) { alert(1); } else if(true){ alert(2); } else if(true) { alert(3); } else { alert(4); }
- 변수와 비교연산자
<script> id = prompt('아이디를 입력해주세요.') if(id=='egoing'){ alert('아이디가 일치 합니다.') } else { alert('아이디가 일치하지 않습니다.') } </script>
- 논리 연산자
&& : and 연산자 : 좌항과 우항이 모두 참일 때 참이된다.
|| : false 연산자 : 좌우항 중에 하나라도 참이라면 참이된다.
! : not 연산자 : 부정의 의미로 Boolean의 값을 역전시킨다. - Boolean 대체제
0은 false, 0이 아닌 값은 true이다. - 기타 false로 간주되는 데이터 형
if(!''){ alert('빈 문자열') } if(!undefined){ alert('undefined'); } var a; if(!a){ alert('값이 할당되지 않은 변수'); } if(!null){ alert('null'); } if(!NaN){ alert('NaN'); }
👉 반복문
- while 을 사용한다.
while(조건) { 반복해서 실행할 코드 }
-for을 사용한다.
for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드) { 반복해서 실행될 코드 }
- 반복문의 제어
break을 사용하면 반복작업을 중간에 중단시킬 수 있다. -> 반복문 완전 종료
continue을 사용하면 실행을 즉시 중단하면서 반복을 지속돼게 한다.
👉 함수
- 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
function 함수명 ( [인자...[,인자]]) { 코드 return 반환값 }
- 인자는 함수를 호출할 때 함수의 로직으로 전달될 변수다. 생략 가능하다.
- 함수 실행 : 함수를 호출한다.
함수이름();
- return : return 뒤에 따라오는 값을 함수의 결과로 반환함과 동시에 함수를 종료시킨다. 한 함수 안에 return을 여러개 만든다면, 맨 위의 결과값만 출력된다.
- 함수를 정의하는 다른 방법
var 함수명 = function () { 함수 내용 }
👉 배열
- 연관된 여러개의 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입.
- 배열의 생성
var 배열명 = [원소1, 원소2, 원소3]
- 배열의 접근
배열명[0] 배열명[1]
- 배열의 크기 배열명.length
var arr = [1,2,3,4,5]; alert(arr.length);
- 배열의 조작
데이터의 추가 :배열명.push, .concat, .unshift, .splice
var arr = ['a','b','c','d','e']; arr.push('f'); alert(arr); // 배열의 끝에 원소를 추가
var arr = ['a','b','c','d','e']; arr = arr.concat(['f','g']); alert(arr); // 복수의 원소를 배열에 추가
var arr = ['b','c','d','e']; arr.unshift('a'); alert(arr); // 배열의 시작점에 원소 추가, 기존 값들의 인덱스를 1씩 증가
var arr = ['a','b','c','d','e']; arr.splice(2,0,'B'); alert(arr); // b, B // 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다. 세번째 인자를 첫번째 인자의 원소 뒤에 추가한다.
- 배열의 제거 : shift, pop
var arr = ['a','b','c','d','e']; arr.shift(); alert(arr); // 배열의 첫번째 원소를 제거 // b, c, d, e
var arr = ['a','b','c','d','e']; arr.pop(); alert(arr); // 배열의 마지막 원소를 제거 // a, b, c, d
- 배열의 정렬 : sort, reverse
var arr = ['c','e','a','b','d']; arr.sort(); alert(arr); // 알파벳 순 정렬
var arr = ['a','b','c','d','e']; arr.reverse(); alert(arr); // 역순으로 정렬
👉 객체
- 배열은 인덱스로 숫자를 사용하였다. 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용한다. 연관배열 또는 맵, 딕셔너리 데이터 타입이 객체에 해당한다.
- 객체의 생성
// 방법 1 var grades = ['egoing' : 10, 'ju' : 6, 'min' : 80); // egoing은 key가 되고, 10은 value가 된다.
// 방법 2 var grades = (); // 여기서, 대신에 new Object();를 사용해도 된다. grades['egoing'] = 10; grades['ju'] = 6; grades['min'] = 80;
- 객체의 접근
// 방법 1 alert(grades['ju']); // 방법 2 alert(grades.ju);
- 객체와 반복문
var grades = {'egoing': 10, 'ju': 6, 'min': 80}; for(key in grades) { document.write("key : "+key+" value : "+grades[key]+"<br />"); }
- 객체 지향 프로그래밍
객체에는 객체를 담을 수도 있고 함수도 담을 수 있다.
var grades = { 'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}, // list는 key, {객체}는 value 'show' : function(){ for(var name in this.list){ // this는 grades(객체)를 가리킨다. list key안에 객체 반복문 돌림 document.write(name + ':' + this.list[name] + "<br />"); } } // show는 key, function()는 value }; grades.show(); // 또는 grades['show'];
👉 모듈
- 코드를 여러개의 파일로 분리하는 것
- <모듈화의 효과>
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
- 모듈의 사용
새로운 파일을 만든다. 함수를 외부 파일로 분리한다. 파일명.js 확장자는 js를 사용한다.
호스트 환경에 따라 모듈을 로드하는 방법은 달라진다.
<script src="파일명.js"> </script> // 브라우저는 src속성에 있는 파일을 다운로드해서 실행시킨다.
- 라이브러리
모듈과 비슷한 개념이다. 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합.- 홈페이지에서 파일을 다운로드 받는다.
- 메뉴얼을 이용해서 사용법을 파악한다.
- 라이브러리의 사용 : jQuery
👉 UI와 API 그리고 문서보는 법
- API(Application Programming Interface) : 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 프로그래밍 언어를 통해서 조작 가능
javascript:alert("Hello world");
- UI(User Interface) : 사용자를 대면하는 포괄적인 접점. 입력장치들.
- 레퍼런스 : 명령어의 사전
- 튜토리얼 : 언어의 문법을 설명
- 자바스크립트의 API와 문서 : 크게 두가지로, 자바스크립트 자체의 API(ECMAScript) 와 자바스크립트가 동작하는 호스트 환경의 API(Node.js)로 구분된다.
👉 정규표현식
- 문자열에서 특정한 문자를 찾아내는 도구
- 컴파일(compile) -> 실행(execution)
- 컴파일 : 검출하고자 하는 패턴을 만드는 일. 우선 정규표현식 객체를 만든다.
/* a라는 텍스트를 찾아내는 정규표현식 만들기 */ var pattern = /a/; //정규표현식 리터럴 var pattern = new RegExp('a'); //정규표현식 객체 생성자
- 추출 : 필요한 정보를 추출
- test : 확인하고자 하는 정보가 있는지 테스트
- 치환 : 검색된 정보를 다른 정보로 치환
/* 추출 */ pattern.exec('abcde'); // ["a"] pattern.exec('bcdef'); // null
var pattern = /a./; // a뒤의 .은 아무 문자를 뜻한다. pattern.exec('abcde'); // ["ab"]
/* 테스트 */ pattern test('abcde'); // true pattern text('bcdef'); // false
문자열 메소드 실행 : match(), replace()
var pattern = /a/; 'abcdef'.match(pattern); //["a", index: 0, input: "abcdef", groups: undefined] //exec()와 비슷
var pattern = /a/; 'abcdef'.replace(patten,'A'); // "Abcdef" // 패턴을 검색하고 변경한 후, 변경된 값을 리턴
- 옵션 : i(대소문자 구분X), g(검색된 모든 결과 리턴)
var oi = /a/i; "Abcde".match(oi); // ["A"] // i가 없다면 null
var og = /a/g; "abcdea".match(og); // (2) ["a", "a"] // g가 없다면 ["a", index: 0, input: "abcdea", groups: undefined]
- 캡처 : 그룹을 지정하고 그 지정된 그룹을 가져와서 사용하는 기능. 괄호 안의 패턴은 변수처럼 재사용 가능. 기호$사용
(\w+) \s (\w+)
\w : word, 단어
+는 수량자로 하나 이상일 때 유효
\s : space, 공백
$1 : 첫번째 그룹(앞의 \w+)
$2 : 두번째 그룹(뒤의 \w+)- 치환
var pattern = /(\w+)\s(\w+)/; // 단어 + (공백) + 단어 var str = "coding everybody"; var result = str.replace(pattern, "$2, $1"); // str에서 패턴을 찾고, "$2, $1" 형식으로 바꾼다. result // "everybody, coding"
(+참고) 아래 코드는 본문 중의 URL을 링크 html 태그로 교체한다.
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim; var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. '; var result = content.replace(urlPattern, function(url){ return '<a href="'+url+'">'+url+'</a>'; }); // 생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다. 네이버 : <a href="http://naver.com">http://naver.com</a> 입니다.
2021.01.19에 작성한 글
'Study > WebHacking' 카테고리의 다른 글
📣 2주차 웹해킹 스터디 정리 (0) 2022.03.06 📣 1주차 웹해킹 스터디 정리 (0) 2022.03.06