5. 함수
-> 코드의 집합
-> alert(), prompt()
5.1 익명 함수
-> 함수의 형태
-> 괄호 내부에 코드를 넣음
ex)
var 함수 = function () { };
함수의 생성과 출력
-> 문자열 처럼 보일 수 있지만 typeof 연산자를 사용하면 함수 자료형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 생성합니다.
var 함수 = function() {
var output = prompt('숫자를 입력해 주세요','숫자');
alert(output);
};
alert(함수);
</script>
</body>
</html>
함수의 생성과 출력
-> 익명함수 : function() {} 형태는 함수이나 이름이 없음
-> 선언적 함수 : 이름이 있는 함수
-> 함수 호출 : 뒤에 괄호를 열고 닫음으로 코드를 실행
5.2 선언적 함수
선언적 함수
-> 선언적 함수 생성
ex)
function 함수() {
}
var 함수 = function() { };
선언적 함수의 재정의
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function 함수() {alert('함수 A');}
function 함수() {alert('함수 B');}
함수();
</script>
</body>
</html>
5.3 매개변수와 리턴 값
매개변수
-> 함수를 호출 할 때 괄호 안에 적는 것
리턴값
-> prompt() 함수를 사용하면 사용자가 입력한 문자열로 변환
매개변수와 리턴값으로 함수 만들기
-> 모든 함수에 매개변수와 리턴값을 사용하지 않음
-> 선택적 매개변수와 리턴값 사용
ex)
function 함수이름(매개변수, 매개변수, 매개변수){
// 함수 코드
return 리턴값;
}
input : 매개변수 / output : 리턴값
5.4 매개변수
매개변수
-> 함수 호출과 함수 연결의 매개가 되는 변수
-> 함수 생성 시 지정한 매개 변수의 수가 많거나 적은 사용도 허용
-> 지정하지 않은 매개변수는 undefined로 입력
Array() 함수
함수 형태 |
설명 |
Array() |
빈 배열을 만듭니다. |
Array(number) |
매개변수만큼의 크기를 가지는 배열을 만듭니다. |
Array(any, ... , any) |
매개변수를 배열로 만듭니다. |
5.5 가변 인자 함수
-> 매개변수의 개수가 변할 수 있는 함수
-> 매개변수가 선언된 형태와 다르게 사용했을 때 매개변수를 모두 활용하는 함수를 의미
-> 가변인자 함수의 예 : Array() 함수
sumAll() 함수
-> arguments
※ arguments : 자바스크립트 내부 변수의 기본으로 제공, 매개변수의 배열
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function sumAll() {
var output = 0;
for(var i=0; i<arguments.length; i++){
output +=arguments[i];
}
return output;
}
//함수를 호출 및 출력한다.
alert(sumAll(1,2,3,4,5,6,7,8,9));
</script>
</body>
</html>
5.6 리턴값
리턴 키워드
-> 함수 실행 중 함수를 호출한 곳으로 돌아가라는 의미
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//함수 생성
function returnFunction(){
alert('문장A');
return;
alert('문장B');
}
//함수를 호출합니다.
returnFunction();
</script>
</body>
</html> 
리턴값
-> 리턴 키워드 뒤에 값을 입력하지 않을 경우
-> 리턴하지 않으면 아무것도 들어가지 않음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//함수 생성
function returnFunction(){
alert('문장A');
return;
alert('문장B');
}
//함수를 호출합니다.
var output=returnFunction();
alert(typeof (output) + ':' + output);
</script>
</body>
</html>
5.8 콜백 함수
-> 매개변수로 전달하는 함수
-> callTenTimes () 함수 : 함수를 매개변수로 받아 해당 함수를 10번 호출
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//함수를 선언합니다.
function callTenTimes(callback){
//10회 반복합니다.
for (var i=0; i<10; i++){
//매개변수로 전달된 함수를 호출합니다.
callback();
}
}
//변수를 선언한다.
var callback = function(){
alert('함수호출');
};
//함수를 ㅎ출한다.
callTenTimes(callback);
</script>
</body>
</html>
5.9 자바 스크립트 내장 함수
내장함수
-> 기본적으로 내장된 함수
-> alert() 함수와 prompt () 함수
타이머 함수
-> 특정한 시간에 특정한 함수를 실행 가능하게 함
메서드 이름 |
설명 |
setTimeout(function, millsecond) |
일정 시간 후 함수를 한 번 실행한다. |
setInterval(function, millisecond) |
일정 시간마다 함수를 반복해서 실행한다. |
clearTimeout(id) |
일정 시간 후 함수를 한번 실행하는 것을 중지한다. |
clearInterval(id) |
일정 시간마다 함수를 반복하는 것을 중단한다. |
setTimeout () 메서드 : 특정한 시간 후에 함수를 한 번 실행
setInterval() 메서드 : 특정한 시간마다 함수를 실행
setTimeout() 함수의 주의사항 : 특별히 없음
setInterval() 함수의 주의사항 : 지속적 자원의 소비
-> 해결방법 : 타이머를 멈춤
-> clearTimeout () 함수 / clearInterval() 함수를 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//1초마다 함수를 실행한다.
var intervalID = setInterval(function(){
alert('<p>'+new Date() + '</p>');
},1000);
//10 초 후 함수를 실행한다.
setTimeout(function() {
//타이머를 종료한다.
clearInterval(intervalID);
},10000);
</script>
</body>
</html>
인코딩과 디코딩 함수
-> 인코딩 : 문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 무호화 하는 방법
-> 디코딩 : 인코딩을 원래대로 되돌리는것
인코딩과 디코딩 함수
함수 이름 |
설명 |
escape() |
적절한 정도로 인코딩 합니다. |
unescape() |
적절한 정도로 디코딩 합니다. |
encodeURL(uri) |
최소한의 문자만 인코딩 합니다. |
decodeURI(encodedURI) |
최소한의 문자만 디코딩 합니다. |
encodeURIComponent(uriComponent) |
대부분의 문자를 모두 인코딩합니다. |
decodeURIComponent(encodedURI) |
대부분의 문자를 모두 디코딩 합니다. |
비슷한 기능을 수행하는 함수가 많은 이유
-> 초기 escape() 함수만 있었으나 시간이 지남에 따라 진화
-> escape() 함수는 + 기호를 인코딩하지 않는 문제
-> 현재는 encodeURIComponent() 함수를 가장 많이 사용
코드 실행 함수
-> 자바스크립트는 문자열을코드로 실행할 수 있는 특별한 함수를 제공
-> eval() 함수는 문자열을 자바스크립트 코드로 실행하는 함수
함수 이름 |
설명 |
eval(string) |
string을 자바스크립트 코드로 실행한다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//문자열을 생성한다.
var willEval='';
willEval += 'var number=10;';
willEval += 'alert(number);';
//eval () 함수를 호출합니다.
eval(willEval);
</script>
</body>
</html>
숫자 확인 함수
-> 변수의 숫자가 Infinity와 NaN 같은 특별한 숫자인지 확인하는 함수
-> 대부분의 프로그래밍 언어 : 0으로 숫자를 나누면 오류 발생 및 프로그램이 멈춤
-> 자바스크립트 : 0으로 숫자를 나누면 infinity 값이 들어감
함수 이름 |
설명 |
isFinite() |
number가 무한한 값인지 확인합니다. |
isNan() |
number가 Nan인지 확인합니다. |
isFinite() 함수
-> 무한대의 수를 확인할 때 사용
ex)
<script>
var number = 1/0;
alert(number + ':' + isFinite(number));
</script>
NaN변수
-> 스스로 비교할 수 없다.
ex)
<script>
if(NaN == NaN) {
alert('NaN == NaN');
} else {
alert('NaN != NaN');
}
</script>
-> Nan 확인시 isNan() 함수 사용
숫자 변환 함수
함수 이름 |
설명 |
parseInt(string) |
string을 정수로 바꾸어줍니다. |
parseFloat(string) |
string을 유리수로 바꾸어줍니다. |
-> 숫자 변환 함수의 예 : Number() 함수
-> Number() 함수의 단점
-> Number() 함수는 숫자로 바꿀 수 없으면 Nan로 변환함
ex)
<script>
var won = '1000원';
var dollar = '1.5$';
alert(Number(won) + ':' + Number(dollar));
</script>
-> parseInt() 함수 / parseFloat() 함수
- 변환할 수 있는 부분까지 모두 숫자로 변환
ex)
<script>
var won = '1000원';
var dollar = '1.5$';
alert(parseInt(won) + ':' + parseInt(dollar));
alert(parseFloat(won) + ':' + parseFloat(dollar);
</script>
6.1 객체
배열의 자료형
-> 자바스크립트의 기본 자료형
-> 숫자, 문자열, 불, 함수, undefined
ex)
<script>
alert(typeof ([]));
</script>
object라 뜰텐데 이게 객체의 의미이다.
ex)
<script>
//변수를 선언한다.
var array=['사과','바나나','망고','딸기'];
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언한다.
var array=['사과','바나나','망고','딸기'];
var product={제품명:'7D 건조 망고',유형: '당절임',성분:'망고,설탕,메타중아황산나트륨,치자황색소',원산지 : '필리핀'};
/*
객체 뒤에 대괄호를 사용하고 키를 표시 -> 요소에 접근
ex)
'product['제품명']
대괄호 외 일반적으로 사용하는 방법
ex)
product.제품명
*/
alert(array);
alert(product.성분);
</script>
</body>
</html>
객체의 키
-> 식별자 또는 문자열 모두 사용 가능
ex)
<script>
//변수를 선언합니다.
var object = {
'with space': 273,
'with ~!@#$%^&*()_+':52
};
</script>
6.2 속성과 메서드
속성
-> 요소 : 배열 내부에 있는 값
-> 속성 : 객체 내부에 있는 값
메서드
-> 객체의 속성 중 함수 자료형인 속성
- 속성과 메서드의 구분
-> 객체 person : name 속성, eat 속성
-> eat 속성은 함수 자료형이므로 eat() 메서드라 부름
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="button1" onclick="button1_click();">버튼1</button>
<script>
function button1_click() {
alert("버튼1을 누르셨습니다.");
}
</script>
<script>
//변수를 선언합니다.
var person = {
name:'윤인성',
eat:function (food){}
};
//메서드를 호출합니다.
person.eat();
alert(person.name);
</script>
</body>
</html>
this 키워드
-> 자기 자신이 가진 속성을 출력하고 싶을 때
-> 자신이 가진 속성임을 표시하는 방법
ex)
<script>
//변수선언
var person={
name : '김종규',
eat : function (food) {
alert(this.name + '이' + food + '을/를 먹습니다.');
}
};
//메서드를 호출한다.
person.eat('밥');
</script>
6.3 객체와 반복문
객체와 반복문
-> 객체는 단순 for 반복문으로 객체의 속성을 살펴보는 것이 불가능
-> 객체의 속성을 모두 살펴보려면 for in 반복문 사용
6.4 객체 관련 키워드
-> in 키워드
-> with 키워드
ex)
<script>
//변수를 선언한다.
var student = {
이름 : '연하진',
국어 : 92, 수학 : 98,
영어 : 96, 과학 : 98
};
</script>
with 키워드
ex)
with(객체) {
//코드
}
6.5 객체의 속성 추가와 제거
-> 객체 생성 이후 속성을 추가하거나 제거
-> 동적으로 속성을 추가한다.
-> 동적으로 속성을 제거한다.
ex)
<script>
//변수를 선언한다.
var student ={};
//객체에 속성을 추가한다.
student.이름 = '윤인성';
student.취미 = '악기';
student.특기 = '프로그래밍';
student.장래희망 = '생명공학자';
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언
var student={};
student.이름 = '김종규';
student.취미 = '악기';
student.특기 = '프로그래밍';
student.장래희망 = '생명공학자';
//toString() 메서드를 만듭니다.
student.toString = function() {
var output = '';
for(var key in this){
//toString() 메서드는 출력하지 않게 한다.
if(key !='toString'){
output += key + '\t'+this[key]+'\n';
}
}
}
//출력한다.
alert(student.toString())
</script>
</body>
</html>
6.6 객체와 배열을 사용한 데이터 관리
-> 객체와 배열을 사용한 데이터 관리
-> 추상화
-> 현실에 존재하는 객체의 필요한 속성을 추출하는 작업
-> 학생의 성적 총점과 평균을 계산하는 예제 작성
<script>
var student0 = {이름 : '김종규', 국어: 100, 수학 : 100, 영어 : 100, 과학 : 100};
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//학생정보의 배열을 만든다.
var students = [];
students.push({이름 : '김종규', 국어:95, 수학:92, 영어:88, 과학:70});
students.push({이름 : '김종규1', 국어:95, 수학:92, 영어:88, 과학:70});
students.push({이름 : '김종규2', 국어:95, 수학:92, 영어:88, 과학:70});
students.push({이름 : '김종규3', 국어:95, 수학:92, 영어:88, 과학:70});
students.push({이름 : '김종규4', 국어:95, 수학:92, 영어:88, 과학:70});
students.push({이름 : '김종규5', 국어:95, 수학:92, 영어:88, 과학:70});
students.push({이름 : '김종규6', 국어:95, 수학:92, 영어:88, 과학:70});
students.push({이름 : '김종규7', 국어:95, 수학:92, 영어:88, 과학:70});
//모든 배열내의 객체에 메서드를 추가한다.
for(var i in students){
//총점을 구하는 메서드를 추가합니다.
students[i].getSum = function (){
return this.국어 + this.수학 + this.영어 + this.과학;
};
//평균을 구하는 메서드를 추가합니다.
students[i].getAverage = function(){
return this.getSum()/4;
};
}
//출력하는부분
var output = '이름'+'\t'+'총점'+'\t'+'평균'+'\n';
for (var i in students){
with (students[i]){
output+=이름 + '\t'+getSum()+'\t'+getAverage()+'\n';
}
}
alert(output);
</script>
</body>
</html>
7.1 생성자 함수 개요
생성자 함수란?
-> new 키워드를 사용해 객체 생성할 수 있는 함수
student 생성자
-> student 생성자 함수를 만드는 코드
ex)
<script>
function Student() {
}
</script>
ex2)
<script>
<student>
function Student() {
}
var student = new Student();
</script>
<script>
function Student(name,korean,math,english,science){
this.이름 = name;
this.국어 = korean;
this.수학 = math;
this.영어 = english;
this.과학 = science;
}
var student = new Student('윤하린',96,98,92,98);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function Student(name,korean,math,english,science){
this.이름 = name;
this.국어 = korean;
this.수학 = math;
this.영어 = english;
this.과학 = science;
this.getSum = function() {
return this.국어 + this.수학 + this.영어 + this.과학;
};
this.getAverage = function() {
return this.getSum() /4;
};
this.toString = function() {
return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
};
}
var students = [];
students.push(new Student('김종규',100,100,100,100));
students.push(new Student('김종규1',100,100,100,100));
students.push(new Student('김종규2',100,100,100,100));
students.push(new Student('김종규3',100,100,100,100));
students.push(new Student('김종규4',100,100,100,100));
students.push(new Student('김종규5',100,100,100,100));
//출력합니다.
var output = '이름\t총점\t평균\n';
for(var i in students) {
output += students[i].toString()+'\n';
}
alert(output);
</script>
</body>
</html>
7.2 프로토타입
생성자 함수
-> 기존의 객체 구조
-> 이름, 국어, 수학, 영어, 과학 속성
-> getSum () , getAverage () , toString () 메서드
메모리에 따른 문제 해결
-> 프로토타입
-> 동일한 함수 생성에 따른 비효율적인 메모리 이용을 해결
-> 생성자 함수로 생성된 객체가 공통으로 가지는 공간
생성자 함수 구성
-> 한 개의 메서드로 모든 객체가 사용
-> 생성자 함수로 객체를 만들 때 -> 생성자 함수 내부에 속성만 넣음
프로토타입
-> 자바스크립트의 모든 함수는 변수 prototype을 갖음
-> prototype은 객체
7.3 new 키워드
new 키워드를 사용하지 않으면?
-> this 키워드 사용 -> window 객체를 나타냄
-> 일반 함수 호출과 같이 new 키워드를 사용하지 않으면
-> 함수 실행 중 window 객체에 속성이 추가한 것이 됨
-> new 키워드로 함수 호출
-> 객체를 위한 공간 생성(this 키워드가 해당 공간을 의미)
7.4 캡슐화
-> 다양한 사람이 많아져 만들어진 기술
-> 예제 : Rectangle 객체를 만들어 봄
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//생성자 함수를 선언한다.
function Rectangle(width, height){
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function() {
return this.width * this.height;
};
//변수를 선언합니다.
var rectangle = new Rectangle(5,7);
//출력합니다.
alert('AREA:'+rectangle.getArea());
</script>
</body>
</html>
캡슐화는 잘못 사용될 수 있는 객체의 특정 부분을 사용자가 사용할 수 없게 막는 기술
getter : getOO () 형태의 메서드와 같이 값을 가져오는 메서드
setter : setOO () 형태의 메서드와 같이 값을 입력하는 메서드
게터와 세터를 만드는 것이 캡슐화는 아님
캡슐화는 만일의 상황에 특정 속성이나 메서드를 사용자가 사용할 수 없도록 숨겨 놓는 것임
7.5 상속
상속이란?
-> 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는것
-> 상속으로 만들어지는 객체는 기존 객체의 특성이 모두 있음
-> 상속을 사용하면 이전에 만들었던 객체와 비슷한 객체를 쉽게 만들 수 있음
상속의 예
생성자 함수 Square 내부에서 작성한 것
-> base 속성에 생성자 함수 Rectangle을 넣고 실행한 것
-> 생성자 함수 Square의 프로토타입에 Rectangle의 프로토 타입을 넣은 것
base속성을 사용해 Rectangle 객체의 속성을 Square 객체에 추가
생성자 함수 를 사용해 Rectangle 객체의 프로토타입이 가진 속성 또는 메서드를 Square 객체의 프로토타입에 복사
<script>
//생성자 함수를 선언합니다.
function Square(length){
this.base = Rectangle;
this.base(length, length);
}
Square.prototype = Rectangle.prototype;
Square.prototype.construct = Square;
//변수를 선언
var rectangle = new Rectangle(5,7);
var square = new Square(5);
alert(rectangle.getArea() + ':' + square.getArea());
</script>
8. 기본 내장 객체
8.1 기본 자료형과 객체의 차이점
기본 자료형
-> 숫자, 문자열, 불 세가지 자료형을 의미
-> 변수 primitiveNumber는 기본 자료형 숫자
-> 변수 objectNumbers는 생성자 함수를 사용하므로 객체
8.2 Object 객체
생성
-> Object 객체는 자바스크립트의 최상위 객체
-> 두가지 방법으로 Object 객체 생성
var object = {};
var object=new Object();
Object 객체의 속성과 메서드 7가지!
1. constructor
2. hasOwnProperty
3. isPrototypeOf
4. propertyIsEnumerable
5. toLocaleString
6. toString
7. valueOf
메서드 이름 |
설명 |
constructor() |
객체의 생성자 함수를 나타냄 |
hasOwnProperty() |
객체가 name 속성이 있는지 확인 |
isPrototypeOf(object) |
객체가 object의 프로토타입인지 검사합니다. |
propertylsEnumerable(name) |
반복문으로 열거할 수 있는지 확인한다. |
toLocaleString() |
객체를 호스트 환경에 맞는 언어의 문자열로 바꿔준다. |
toString() |
객체를 문자열로 바꿔준다. |
valueOf() |
객체의 값을 나타낸다. |
8.3 Number 객체
-> 가장 단순한 객체로 숫자를 표현할 때 사용
-> Number 객체 생성
메서드
-> Object 객체가 갖는 일곱 가지 메서드 + 세 가지 메서드 추가
Number 객체의 메서드
메서드 이름 |
설명 |
toExponential() |
숫자를 지수 표시로 나타낸 문자열을 리턴한다. |
toFixed() |
숫자를 고정 소수점 표시로 나타낸 문자열을 리턴한다. |
toPrecision() |
숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열을 리턴한다. |
8.4 String 객체
-> 자바스크립트에서 가장 많이 사용하는 내장 객체
생성
-> 2가지 방법으로 생성
String 객체는 length 속성을 갖는다.
String 객체의 메서드
String 객체의 HTML 관련 메서드
'IT일반과목 > 자바스크립트' 카테고리의 다른 글
| (집공부)자바스크립트 함수와객체, 윈도우객체와 문서 객체 (0) | 2018.09.30 |
|---|---|
| 자바스크립트 기본문법(집공부) (0) | 2018.09.21 |
| 자바스크립트 개요, 기본 문법, 배열, 함수 (0) | 2018.09.20 |
| 자바스크립트개요 (0) | 2018.09.18 |
