01: 소스코드위치
자바스크립트는 기본적으로 HTML 문서의 <head></head> 사이에 위치 합니다.
1) html 내부 자바스크립트
<script>
alert('hello world');
</script>
2) 외부 JavaScript
HTML 문서 외부에 별도의 파일을 생성하고 HTML 에서 불러와 사용하는 방식
//external.js 파일
function printDate() {
alert('hello world');
}
<head>
<script src="../external.js"></script>
<!-- 외부 서버의 js파일 참고인 경우 다음과 같이 사용 -->
<script src="https://www.cdn.com/myjs/external.js"></script>
</head>
3) 소스파일 위치 결정
브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될때까지 브라우저 렌더링을 멈춤.
삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미치기 때문에 적절한 위치선정이 필요.
<head></head>
브라우저 렌더링에 방해가 될 수 있으며 무거운 스크립트가 실행되는 경우 오랫동안 화면이 보여지지 않을수 있음.
문서를 초기화하거나 설정하는 가벼운 스크립트들을 주로 사용.
<body></body>
태그내 모든 위치에 둘 수 있음.
웹페이지 로딩이 완료된 다음 실행하기 위해 일반적으로는 </body> 바로 앞에 위치.
02: 변수와 자료형
자바스크립트는 다른 언어들과 달리 자료형이 고정되어 있지 않은 동적타입 언어 입니다.
1) 자료형
내부적으로는 Primitive(기본형)과 Object(객체형)
Primitive
Boolean: true, false
null: 빈 값을 표현
undefined: 값을 할당하지 않은 변수가 가지는 값
Number: 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자가 아님)등.
String: 문자열
Object
Reference 타입
클래스 뿐만 아니라, 배열과 함수, 사용자 정의 클래스도 모두 Object.
JSON(Java Script Object Notation)의 기본 구조.
2) 변수 선언
변수이름은 대소문자를 구별.
여러 변수를 한번에 선언할 수 있음.
지역변수와 전역변수가 있음.
기본적으로 소문자로 시작되는 Camel Case 를 사용.
var, let, const
var는 지역변수 개념으로 함수 범위에서 유효함.
var를 선언하지 않으면 자동으로 전역변수가 됨.
let과 const 는 ES6 에서 등장한 block-scoped 변수 선언.
let은 값의 재할당이 가능하고 const 는 불가능(immutable).
const로 선언된 배열이나 객체의 경우 새로운 객체로 재할당하는 것은 안되고, 배열값의 변경/추가, 객체의 필드 변경등은 가능
hoisting
호이스팅은 끌어올리기라는 사전전 의미를 가지고 있습니다.
자바스크립트 변수에 있어 변수의 선언이 위치와 상관없이 최상위 레벨로 끌어올려진다고 이해
String 변수
자바스크립트는 " ",' ' 를 모두 사용할 수 있음.
03: 출력문
자바스크립트는 HTML 문서를 통해 웹브라우저에서 출력되므로 따로 출력문이 존재한다기 보다는 HTML 문서의 구성요소에 동적으로 출력하거나 웹브라우저의 경고창을 이용해 출력하는 형태가 출력문으로 볼 수 있음.
1) HTML 문서에 출력
다음 예제는 5+6 의 연산결과를 웹브라우저에 출력 합니다.
<script>
document.write(5 + 6);
</script>
<body>
<h2>Hello World</h2>
</body>
2) HTML 문서의 특정부분에 출력
<script>
document.getElementById("result").innerHTML = 5 + 6;
</script>
<body>
<h2>Hello World</h2>
<div id="result">
</div>
</body>
3) Alert 창을 이용한 출력
<script>
alert(5 + 6);
</script>
4) 브라우저 콘솔창을 이용한 출력
<script>
console.log(5 + 6);
</script>
04: 연산자와 제어문
| 비교 연산자 | 연산자 설명 |
| == | 값이 같은지 비교 |
| === | 값과 타입이 모두 같은지 비교 |
| != | 같지 않음 |
| !== | 값이나 타입이 같지 않음 |
| > | 크다 |
| < | 작다 |
| >= | 같거나 크다 |
| <= | 작거나 크다 |
| ? | 3항연산 (조건)? 참인경우 수행 : 거짓인경우 수행 |
| 논리 연산자 | 연산자 설명 |
| && | AND 연산자 |
| || | OR 연산자 |
| ! | NOT 연산자 |
2) 조건문
if, else if
switch
3) 반복문
for
while
forEach
배열의 모든 원소에 대해 특정 코드블럭을 수행할 수 있는 방법입니다.
const colors = ['red', 'blue', 'green'];
colors.forEach(function(value) {
console.log(value);
});
ES6 에서는 arrow 연산자를 통해 다음과 같이 간결하게 사용할수 있음.
const colors = ['red', 'blue', 'green'];
colors.forEach( value => console.log(value));
예외를 발생시키는 것 외에는 forEach() 루프를 중지하거나 중단할 수 있는 방법이 없습니다.
루프를 중지하는 동작이 필요하다면, forEach() 메서드는 적절한 도구가 아닐 수 있습니다.
for-in, for-of
최근 다른 언어들에 도입된 -in 형태의 구문 입니다.
다만 -in 의 경우 배열원소의 값에 접근할 수 없고 키 혹은 인덱스만 접근이 가능하므로 다른 언어에서의 -in과 같은 형태로 사용하려면 for-of를 사용해야 합니다.
const colors = ['red', 'blue', 'green'];
for (var index in colors) {
console.log( colors[index] );
}
for (var value of colors) {
console.log( value );
}
05: 배열과 자료구조
1) 배열
배열의 선언은 [] 나 new Array() 로 생성하고 크기의 제약이 없으며 하나의 배열에 서로 다른 타입의 변수가 들어갈 수 있습니다.
예시
var emptyArray = [];
var numbers1 = [10, 30, 50, 70, 90];
var numbers2 = new Array(20, 40, 60, 80, 100);
var mixedArr = ['a', 1, 'b', 2, new Date(), "today"];
console.log(numbers2[2]);
console.log(mixedArr[4]);
배열에 자바스크립트 객체를 넣을 수 있음
예시
var objArr = [
{
"id" : 20192010,
"name" : "홍길동",
"dept" : "컴퓨터공학과"
},
{
"id" : 20192011,
"name" : "김사랑",
"dept" : "경영학과"
},
{
"id" : 20192012,
"name" : "강동수",
"dept" : "전자공학과"
}
];
console.log(objArr[2].name + "," + objArr[2].dept);
배열의 주요 메서드
데이터 변경
push(): 배열의 끝에 값을 추가.
pop(): 배열 마지막 값을 제거.
shift(): 배열 데이터를 왼쪽으로 하나씩 밀어 맨앞 값을 제거.
splice(): 배열값을 추가하거나 제거해서 반환.
reverse(): 배열을 역순으로 재배치.
sort(): 배열 데이터를 정렬.
배열의 일부를 반환
concat(): 두개의 배열을 합침.
join(): 배열 데이터 사이에 원하는 문자열을 넣어 구분자로 사용.
slice(): 배열의 일부을 지정해서 가져옴.
데이터 순회
map(): 모든 배열 데이터마다 반복 처리가 필요한 경우 사용.
filter(): 특정 조건을 만족하는 데이터만 처리할 경우 사용.
reduce(): 모든 데이터를 순화하면서 누적 연산이 필요한 경우 사용.
2) Map, Set
ES6 에서 새롭게 추가된 자료 구조 입니다. 상세 사용법 따로 공부 필요
06: 함수(Function)
함수선언
기본적으로 function 키워드로 선언하며 인자를 가질 수 있습니다.
자바스크립트는 타입을 명시하지 않기 때문에 리턴값의 유무와 상관없이 함수 선언부에 리턴 데이터에 대한 선언은 없습니다.
필요시 함수 바디에서 return 문을 사용해 값을 반환하면 됩니다.
function calc(a, b) {
let sum1 = a + b;
sum2 = a + b;
return sum1;
}
console.log(calc(20, 30)); // 50
console.log(sum2); //50 let으로 정의 안해서 출력이 됨.
console.log(sum1); //Error - not defined
익명함수(Anonymous Function)
익명함수는 이름이 없는 함수로 변수에 함수를 구현하거나 함수를 리턴하는 형태가 가능하며 이를 사용하면 소위 콜백 함수의 구현이 가능해 집니다.
화살표 함수
화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다
화살표 함수의 호출
화살표 함수는 익명 함수로만 사용할 수 있습니다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용합니다.
// ES5
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100
// ES6
const pow = x => x * x;
console.log(pow(10)); // 100
콜백함수(Callback Function)
자바스크립에서 콜백함수는 특히 이벤트 처리에 많이 사용됩니다.
특정 UI에서 이벤트가 발생되었을때 처리될 코드를 익명함수에 넣고 콜백되어 처리될 수 있도록 하는 형식 입니다.
다음은 제곱을 구하는 함수에서 콜백함수를 호출하는 예 입니다.
콜백함수의 기능은 단순히 값을 콘솔에 출력하고 있습니다.
여기서는 200밀리초 이후 callback을 호출 하며 파라미터로 제곱값을 전달하게 되어 있습니다.
function square(x, callback) {
setTimeout(callback, 200, x*x);
}
square(2, function(number) {console.log(number);});
>> 4
📚 콜백 함수(Callback) 개념 & 응용 - 완벽 정리
자바스크립트 콜백 함수 란? 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 예를 들어 아래 코드와 같이 sayHello(
inpa.tistory.com
자료구조의 값에 함수 사용
함수를 객체의 속성으로 사용할 수 있으며 Map 의 Value 혹은 배열의 원소로도 사용할 수 있습니다.
// 배열원소로 함수 선언.
let funcArr = [function() {console.log("v1")},"v2"];
// 맵원소로 함수 선언.
let mapArr = new Map();
mapArr.set("calcFunc",function(n1,n2) {return n1*n2});
// 객체의 속성으로 함수 선언.
let student = {
'id': 2019101,
'name': '홍길동',
'score': function() {
alert('A+');
}
}
console.log(funcArr[0]());
console.log(mapArr.get("calcFunc")(20,10));
console.log(student.id);
student.score();
07: 객체와 클래스
1) 객체(Object)
ES6에서 클래스가 나오기 이전에는 Object 타입을 주로 사용 해서 객체를 정의 했습니다.
Premitive 타입과 달리 참조형이며 배열도 객체 입니다.
객체는 속성의 모음이며 속성은 Key:Value 구조를 가집니다.
속성값이 함수인 경우 메서드(Method) 라고 표현 합니다.
다음은 자바스크립트 객체의 사용 예 입니다.
let student = {
'id': 2019101,
'name': '홍길동',
'scores': [95,80,91,85],
'getTotalScore': function() {
return this.scores.reduce((prev, curr) => prev + curr);
}
}
console.log(student.getTotalScore());
생성자를 이용한 객체 생성
만일 클래스와 같이 구체적인 값을 가지지 않는 형태를 미리 선언하고 객체를 생성하려면 다음과 같이 생성자 함수를 정의하고 사용할 수 있습니다.
function Product(name, price) {
this.name = name;
this.price = price;
this.getInfo = function() {
return this.name + " , " + this.price;
}
}
let p1 = new Product("애플 아이폰",1000000);
let p2 = new Product();
p2.name = "삼성 갤럭시"
p2.price = 1100000;
console.log(p1.getInfo());
console.log(p2.getInfo());
2) 클래스(Class)
ES6에서 부터 지원되기 시작했으며 좀 더 객체지향 개념에 가까운 객체 사용을 가능하게 합니다.
클래스 구조
새로운 class 키워드로 선언 합니다. 클래스 이름은 보통 대문자로 시작합니다.
class 클래스명 {
constructor(인자..) {
this.var = 인자;
... }
메서드() { }
get 메서드() { return .. }
set 메서드() { }
}
다음은 클래스 문법에 따른 클래스 사용 예 입니다.
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
getInfo() {
return this.name + " , " + this.price;
}
}
let p1 = new Product("애플 아이폰",1000000);
let p2 = new Product();
p2.name = "삼성 갤럭시"
p2.price = 1100000;
console.log(p1.getInfo()); //애플 아이폰 , 1000000
console.log(p2.getInfo()); //VM273:18 삼성 갤럭시 , 1100000
'컴퓨터보안 > 웹클라이언트' 카테고리의 다른 글
| ClientSide: XSS-2 (0) | 2024.05.13 |
|---|---|
| ClientSide: XSS(Cross-Site-Scripting (XSS)) (0) | 2024.05.10 |
| Same Origin Policy 과 Cross Origin Resource Sharing (0) | 2024.05.10 |
| 1. 자바 스크립트 개요(프레임 워크 이름 설명) (0) | 2024.05.10 |
| 3. onload() + 이벤트와 DOM (자바 스크립트) (0) | 2024.05.10 |
