자바스크립트에서 제공하는 전역 함수
대표적인 자바스크립트 함수
- eval()
- parseInt()
- isNaN()
eval()
eval("")함수의 파라미터 값을 연산하여 결과값을 출력
ex)
var res = eval("2*3+4*6"); // 30 리턴parseInt()
숫자형문자열을 숫자로 변환하여 리턴
ex)
var number = parseInt("32"); //숫자32
var number2 = parseInt("0x32"); // 10진수로 변환해서, 정수 50을 리턴
isNaN()
값이 숫자이면 false 리턴
ex)
isNaN(32); // false 리턴
자바스크립트 객체
객체 : object
ex) in 현실세계
자동차 : <색상 : 회색, 배기량 : 3500cc, 제조자 : bmw, 차 번호 : 193차9241>
추상적인 내용을 프로그래밍 가능하게 구체화 하는 작업이 필요하다.
자바스크립트 객체 구성
- 프로퍼티(property)
- 객체의 고유한 속성(명사적 특징)
- ex) 계좌번호, 소유주이름, 잔액
- 메서드(method)
- 함수(동사적 특징)
- ex) 입금, 출금, 잔액조회
var account = {
// 프로퍼티(명사적 요소), 변수
accountNo : "1111",
owner : "황기태",
balance : 35000,
// 함수, 메서드(클래스 / 객체에서 정의된 함수)(동사적 요소)
deposit : function( money ){
balance += money;
return balance;
},
withdraw : function( money ){
balance -= money;
return balance;
},
inquiry : function(){
return balance;
}
}
객체 기반 언어
자바스크립트는 객체 기반인 언어이지만, 객체 지향 언어는 아니다.
자바스크립트 객체의 유형
1. 코어객체
자바스크립트 언어가 실행되는 어디서나 사용 가능한 기본 객체
기본 객체로 표준 객체 (Array, Date, String, Math 타입 등)가 있다.
웹 페이지 자바스크립트 코드에서 혹은 서버에서 사용 가능하다.
2. HTML DOM 객체
HTML 문서에 작성된 각 HTML 태그들을 객체화한 것들.
HTML 문서의 내용과 모양을 제어하기 위한 목적
W3C의 표준 객체
3. 브라우저 BOM 객체
자바스크립트로 브라우저를 제어하기 위해 제공되는 객체
BOM(Browser Object Model)에 따르는 객체들
비표준 객체
코어객체
종류
Array, Date, String, Math 등
생성
new 키워드로 생성
ex) var today = new Date(); // 시간 정보를 다루는 Date 타입의 객체를 생성해라.
+) 변수 생성 vs 객체 생성
- 변수를 생성한다
var today = "20240805"; // 변수는 데이터값 1개만 갖게 된다.
var acc = "1111"
- 객체를 생성한다
객체가 생성되면 객체 내부에 정의된 프로퍼티와 메소드들을 내 멤버로 생성하게 된다.
객체는 변수처럼 값을 바로 대입하는 것이 아니고, 메모리에 별도의 공간을 마련한 수 대입할 수 있게 된다.
var acc = new account(); // new : 객체 타입(account()타입)을 메모리에 생성해라.
var account = {
accountNo : "1111",
owner : "황기태",
balance : 35000,
deposit : function(){ - - - },
withdraw : function(){ - - - },
inquiry : function(){ - - - }
}
객체 접근
객체와 멤버 사이에 점(dot(.)) 연산자를 이용해서 접근할 수 있다.
.이란? : 소속의 의미
사용자 객체 만들기
사용자가 새로운 타입의 객체를 생성할 수 있다.
새로운 타입의 객체를 만드는 2가지 방법
- new Object() 이용
- 리터럴 표기법 이용
<html>
<head>
<title>new Object()로 사용자 객체 만들기</title>
<script>
function inquiry() {return this.balance;}
function deposit(money) { this.balance += money; }
function withdraw(money) {
if(money > balance){
document.write("출금할 수 없습니다. 잔액이 부족합니다.");
}else{
this.balance -= money;
}
}
//사용자 객체 만들기
var account = new Object();
account.owner = "황기태";
account.code = "1111";
account.balance = 35000;
account.inquiry = inquiry;
account.deposit = deposit;
account.withdraw = withdraw;
</script>
</head>
<body>
<h3>new Object()로 사용자 객체 만들기</h3>
<hr>
<script>
document.write("account: ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000);
document.write("10000원 예금후 잔액은 : " + account.inquiry() + "<br>");
account.withdraw(55000);
</script>
</body>
</html><html>
<head>
<title>리터럴 표기법으로 사용자 객체 만들기</title>
<script>
var account = {
owner : "황기태",
code : "1111",
balance : 35000,
inquiry : function() { return this.balance; },
deposit : function(money) {
this.balance += money;
},
withdraw : function(money) {
this.balance -= money;
}
};
</script>
</head>
<body>
<h3>리터럴 표기법으로 사용자 객체 만들기</h3>
<hr>
<script>
document.write("account: ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>"); //35000
account.deposit(10000); // balance + money -> 35000 + 10000
document.write("10000원 예금후 잔액은 : " + account.inquiry() + "<br>"); // 45000
account.withdraw(5000); // this.balance - money -> 45000 - 5000 = 40000
document.write("5000원 출금후 잔액은 : " + account.inquiry() + "<br>"); // 40000
</script>
</body>
</html>
JavaScript 배열
특징
- 배열도 객체이다.
- 전체를 하나의 단위로 다룬다.
- 여러 타입의 데이터를 섞어서 저장할 수 있다.
- 배열 선언시, [ ] 블록을 사용한다.
- 배열의 요소에 접근할 때는 [ ] 배열 연산자로 부른다.
- 배열의 순서를 인덱스(index:목차, 순서)라 부른다.
- 인덱스는 0부터 시작한다.
배열을 만드는 2가지 방법
1. [ ]로 배열 만들기
[ ]안에 원소들의 초기값 나열
var week = ["월","화","수","목","금","토","일"]
var plots = [-20, -5, 0, 15]
배열 크기는 고정되지 않고, 마지막 원소 추가시 늘어남
2. Array 객체로 배열 만들기
초기 값을 가진 배열 생성(값을 계속 추가해서 늘려갈 수 있다.)
var week = new Array("월","화","수","목","금","토","일");
초기화되지 않은 배열 생성
일정 크기의 배열을 먼저 생성한 후, 나중에 값을 대입할 수 있다.
나중에 원소값을 대입할 때에는, 각각의 요소에 따로따로 일일히 값을 대입해줘야 한다.
var week = new Array(7);
week[0] = "월";
---
week[6] = "일";
빈 배열 생성
원소의 개수를 예상할 수 없는 경우
var week = new Array();
week[0] = "월"; // 배열 week 크기가 자동으로 1로 변경
week[1] = "화"; // 배열 week 크기가 자동으로 2로 변경
+) 배열의 원소 개수 (length 프로퍼티)
배열의 크기 : Array 객체의 length 프로퍼티를 이용
length 프로퍼티는 read only 이다.
var plots = [-10, -5, 0, 15, 20];
var week = new Array("월","화","수","목","금","토","일");
var m = plots.length; // m = 5
var n = week.length; // n = 7
length는 read only 읽기 전용프로퍼티이기 때문에, 배열의 길이를 늘리고싶다고 다음과 같은 코드를 작성할 수 없다.
plots.length = 10; //error
<html>
<head>
<title>배열객체의 메소드 활용</title>
<script>
function pr(msg, arr) {
document.write(msg + arr.toString() + "<br>");
}
</script>
</head>
<body>
<h3>배열객체의 메소드 활용</h3>
<hr>
<script>
var a = new Array("황", "김", "이");
var b = new Array("박");
var c;
pr("배열 a = " , a);
pr("배열 b = " , b);
document.write("<hr>");
c = a.concat(b); //concat() 문자열 +연산과 같다. 이어서 출력해준다.
pr("c = a.concat(b)후 c = " , c); // a + b 값이 저장 됨.
pr("c = a.concat(b)후 a = " , a); //a는 값만 넘겨줬을 뿐, 값은 동일하다.
document.write("<hr>");
c = a.join("##"); //각 요소의 구분자로 ##이 들어가서 표시됨.
pr("c = a.join()후 c = " , c);
pr("c = a.join()후 a = " , a);
document.write("<hr>");
c = a.reverse(); // 뒤집다. 순서를 뒤집어서 출력해준다.
pr("c = a.reverse()후 c = " , c);
pr("c = a.reverse()후 a = " , a);
document.write("<hr>");
c = a.slice(1,2); // 자르다. (시작인덱스, n-1까지)
pr("c = a.slice(1,2)후 c = " , c);
pr("c = a.slice(1,2)후 a = " , a);
document.write("<hr>");
c = a.sort(); //정렬 A~Z, a~z 까지 정렬 , 한글도 정렬 가능 ㄱ~ㅎ
pr("c = a.sort()후 c = " , c);
pr("c = a.sort()후 a = " , a);
document.write("<hr>");
c = a.toString(); // toString() 원소 사이에 ,를 넣어서 문자열로 변환
document.write("a.toString() : " + c);
</script>
</body>
</html>
Date 객체
시간 정보를 담는 객체
- 현재 시간 정보
- var now = new Date(); // 현재 날짜와 시간(시,분,초)값으로 초기화된 객체 생성
- 학기 시작일 2024년 9월 1일이다.
- var startDay = new Date(2024, 8, 1); // 2024년 9월 1일 (8은 9월을 뜻함)
Date 객체 활용
현재 날짜와 시간 : var now = new Date();
오늘 날짜 : var date = now.getDate();
지금 시간 : var hour = now.getHours();
String
문자열을 담기 위한 객체
ex)
var hello = new String("Hello");
var hello = "Hello";
String 객체는 일단 생성되면 수정 불가능.
- var hello = new String("Hello");
- hello String 객체는 Hello 값을 가지게 된다.
- hello값은 연산후에도 변하지 않는다.
- var res = hello.concat("Javascript");
- res String 객체는 : hello +"Javascript" -> "Hello" +"Javascript" ->"HelloJavascript"
var hello = "Hello"; // 1. hello 객체 (1, 2번은 다르다.)
hello = "Hi"; // 2. hello 객체 , 1번이 삭제되고 새로 hello 만들어진다.
String 객체는 생성되서 값을 한번 대입되게 되면 그값으로 고정 된다. : var hello = "Hello";
hello = "Hi" : 프로그램 내부적으로 새로 hello 객체가 생성되게 된다.
document.write(hello); -> hi
length 프로퍼티
길이
- 배열일 경우 : 배열원소의 숫자
- 문자열일 경우 : 문자열 길이
String 객체의 특징
- 문자열의 길이 , length프로퍼티 : read only 읽기 전용
var hello = new String("Hello");
var every = "Boy and Girl";
var m = hello.length; // m = 5
var n = every.length; // n = 12
var o = "Thank you".length // o = 9
- 문자열을 배열처럼 사용 -> [ ] 연산자를 사용하여 각 문자 접근
var hello = "Hello"; // index는 0부터 0,1,2,3,4
var c = hello[0]; // c = "H" 문자열이 저장된다.
Math 객체
수학 계산을 위한 프로퍼티와 메서드를 제공
new Math()로 객체를 생성하지 않고 바로 사용한다.
var sq = Math.sqrt(4); // 제곱근 , 루트 2
var area = Math.PI*r*r; // 반지름이 r인 원의 넓이
난수 발생 (random값)
Math.random() : 0~1사이의 랜덤한 실수 리턴
Math.floor(m) : m의 소수점 이하를 제거한 정수 리턴
ex) 0~99까지의 랜덤한 정수를 10개 만드는 코드
for(i=0; i<10; i++){
var m = Math.random() * 100; // m은 0~99.999 보다 작은 실수 난수값을 발생
var n = Math.floor(m); // m의 붙어있는 소수점을 전부 제거, 정수값만 저장하게 된다. (0~99)
document.write(n + " ");
}
<html>
<head>
<title>Math 객체 활용</title>
</head>
<body>
<h3>Math 객체 활용</h3>
<hr>
<script>
for(var i=0; i<10; i++){
var m = Math.random() * 100;
var n = Math.floor(m);
document.write(n + " ");
}
</script>
</body>
</html>
'Front-end' 카테고리의 다른 글
| [JavaScript] 특징, 작성위치, 다이얼로그, 문장, 변수 (0) | 2024.08.01 |
|---|---|
| CSS 배치, 블록/인라인/인라인블록박스(display, position), 리스트/표/폼 꾸미기 (0) | 2024.08.01 |
| CSS 기본_ 셀렉터, 색/텍스트/폰트/박스/배경/커서 (0) | 2024.07.31 |
| CSS 스타일 시트 (0) | 2024.07.31 |
| [HTML5] 웹 폼 (0) | 2024.07.31 |