1. 내장함수
1-1. evalue(문자열)
- 주어진 문자열을 수식으로 변환하여 리턴한다.
let c = eval("1+1");
document.write("<h1>" + c + "</h1>");
결과 : 21-2. Number
- 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.
let num1 = Number(value);
let result1 = value + 1;
document.write("<h1>result1 = " + result1 + "</h1>");
결과 : result1 = 10011-3. parseInt(문자열)
- 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.
- 정수값만 취급
let value = "100.6";
let num2 = parseInt(value);
let r2 = num2 + 1;
document.write("<h1>r2 = " + r2 + "</h1>");
결과 : r2 = 1011-4. 숫자 변환 함수의 한계
- Number 함수와 parseInt 함수는 파라미터로 전달된 문자열이 숫자형태가 아닌 경우 "NaN"이라는 값을 리턴하는데, 이 "NaN"값과 숫자값과의 연산은 모든 결과가 "NaN"이다.
let a = Number("a"); // NaN
document.write("<h1>a = " + a + "</h1>");
// NaN
let a_sum = a + 1;
document.write("<h1>a_sum = " + a_sum + "</h1>");
// NaNstr
let a_str = a + "str";
document.write("<h1>a_str = " + a_str + "</h1>");
결과 :
a = NaN
a_sum = NaN
a_str = NaNstr
1-5. 변수의 NaN여부를 검사하는 함수
- isNaN 함수는 파라미터로 전달되는 변수의 NaN 여부를 boolean 형태로 리턴한다.
- 파라미터가 숫자로 변환할 수 없는 문자열일 경우에는 NaN 형태이므로 true를 리턴한다.
- 파라미터가 숫자 모양을 한 문자열이거나 실제 숫자형 변수일 경우에는 NaN이 아니므로 false를 리턴한다.
- 숫자인지 검사하기
-> parseInt 함수나 Number 함수의 정상동작을 보장하기 위해서는 파라미터를 전달하기 전에 해당 값이 NaN이 아니라는 것을 검사해야 한다.
-> isNaN 함수의 결과를 부정하면 그 값은 숫자값이거나 숫자형으로 변환 가능한 문자열이라는 의미가 된다.
-> let is_num = !isNaN(검사할 값);
function sumInt(x, y){
let isStrX = !isNaN(x); // 숫자 : true, 문자 : false
let isStrY = !isNaN(y);
// 둘 중 하나라도 숫자 모양이 아니라면 실행을 중단하고 메세지를 리턴
if( !isStrX || !isStrY ){
return "숫자형태 이거나 숫자값이 전달되어야 합니다.";
}
let result = parseInt(x) + parseInt(y);
return result;
}
let sum1 = sumInt("a", 1);
let sum2 = sumInt("1", "2");
let sum3 = sumInt(100, "5.1");
let sum4 = sumInt(-1, "-100");
document.write("<h1>" + sum1 + "</h1>");
document.write("<h1>" + sum2 + "</h1>");
document.write("<h1>" + sum3 + "</h1>");
document.write("<h1>" + sum4 + "</h1>");
결과:
숫자형태 이거나 숫자값이 전달되어야 합니다.
3
105
-1011-6. alert 대화상자
- 웹 페이지에서 가장 일반적으로 사용되는 대화상자로, 사용자에게 정보를 보여주기 위하여 사용된다.
- 이 대화상자에는 "확인"버튼이 함께 표시된다.
- alert 대화상자를 웹 페이지에 표기하기 위해서는 alert 함수에 표시하고자 하는 메세지를 파라미터로 전달한다.
1-7. confirm 대화상자
- 사용자에게 어떠한 결정사항에 대한 긍정 혹은 부정의 답을 얻고자 하는 경우에 표시되는 대화상자이다.
- confirm 함수에 사용자에게 물어볼 내용을 문자열 파라미터로 전달한다.
- confirm 함수는 사용자가 긍정의 버튼을 클릭하면 true, 부정의 버튼을 클릭하면false를 리턴하여 주기 때문에, 이 값을 사용하여 if문을 구성하면 사용자의 선택에 따른 후속처리를 구현할 수 있다.
let is_ok = confirm("정말 삭제하시겠습니까?");
if( is_ok ){
alert( "확인을 선택하셨습니다." );
}else{
alert( "취소를 선택하셨습니다." );
}
1-8. prompt 대화상자
- 사용자가 입력 내용을 얻고자 한 경우에 사용하는 대화상자
- 이 함수에는 사용자에게 표시할 문구와 입력칸에 설정할 기본값을 파라미터로 전달한다.
- 만약 입력칸에 설정할 기본 내용이 없다면, 빈 문자열("")을 파라미터로 설정해도 된다.
- 사용자가 입력한 내용이 문자열 형태로 리턴
- 사용자가 아무런 값도 입력하지 않았으면 빈 문자열 입력
- 사용자가 취소 버튼을 눌렸다면 null이 리턴된다.
2. Math 객체
// 두 수 중에서 최대값
let max = Math.max(100,123);
document.write("<h1>최대값 : " + max + "</h1>");
// 두 수 중에서 최소값
const min = Math.min(100,123);
document.write("<h1>최소값 : " + min + "</h1>");
// 원주율
document.write("<h1>원주율 : " + Math.PI + "</h1>");
// 소숫점 반올림
let num1 = 3.7146;
document.write("<h1>소숫점 반올림 : " + Math.round(num1) + "</h1>");
document.write("<h1>소숫점 올림 : " + Math.ceil(num1) + "</h1>");
document.write("<h1>소숫점 내림 : " + Math.floor(num1) + "</h1>");
// 난수
document.write("<h1>난수 : " + Math.random() + "</h1>");
결과 :
최대값 : 123
최소값 : 100
원주율 : 3.141592653589793
소숫점 반올림 : 4
소숫점 올림 : 4
소숫점 내림 : 3
난수 : 0.9910661620815782 // 두 수 사이의 난수를 리턴하는 함수, int
function random(n1, n2){
return parseInt(Math.random() * (n2 - n1 + 1)) + n1;
}
// 함수 결과 확인, 0~9 사이의 랜덤값
let num = random(0,9);
document.write("<h1>0~9사이의 난수 : " + num + "</h1>");
// 응용, 5자리 인증번호 생성, 출력
let auth = "";
for( let i=0; i<5; i++ ){
auth += random(0,9);
}
document.write("<h1>인증번호 : " + auth + "</h1>");
결과:
0~9사이의 난수 : 5
인증번호 : 528913. date 객체
3-1. 두 날짜의 차이를 구하기 - TimeStamp값 사용
- 1970년 1월 1일 자정부터 지금까지의 지난 시각을 초 단위로 바꾼 값이다.
- getTime() 함수를 통해서 1/1000초 단위의 TimeStamp 형태로 변환하여 리턴해준다.
- (24시간 60분 60초 * 1000)으로 나누면 두 객체 사이의 날짜 차이값을 구할 수 있다.(Math.floor)
- 나눈 값은 소숫점 이하를 절단해야 한다. 두 객체 사이의 차가 3.5일로 계산된 경우 이는 3일 5시간을 의미하는데 그렇다고 해서 4일로 판단하지는 않기 떄문이다.
// 올해는 ***일 지났습니다.
let theday = new Date(2023, 0, 1);
let today = new Date();
let cnt = today.getTime() - theday.getTime();
let day = Math.floor(cnt/(24*60*60*1000));
document.write("<h1>올해는 " + day + "일 지났습니다.</h1>");4. setInterval 함수
- setInterval 함수는 다른 함수의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여 정해진 시간에 한 번씩 파라미터로 전달된 함수를 반복적으로 호출한다.
// 해당 함수를 1초에 한 번씩 반복해서 호출한다. setInterval(함수이름, 1000); // 지정된 시간만큼 딜레이한 수 파라미터로 전달된 함수를 1회만 호출한다. setTimeout(함수이름, 1000);
<body onload = "startTime()">
<h1 id="timer"></h1>
<script>
function printTime(){
// 현재 시각 구하기
let days = ['일', '월', '화', '수', '목', '금', '토']
let mydate = new Date();
let yy = mydate.getFullYear();
let mm = mydate.getMonth() + 1;
let dd = mydate.getDate();
let i = mydate.getDay();
let day = days[i];
let hh = mydate.getHours();
let mi = mydate.getMinutes();
let ss = mydate.getSeconds();
let result = yy + "-" + mm + "-" + dd + " "
+ day + "요일" + hh + ":" + mi + ":" + ss;
document.getElementById("timer").innerHTML = result;
}
function startTime(){
setInterval(printTime,1000);
}
</script>
</body>
결과:
2023-8-8 화요일18:1:244-1. 파라미터로 함수를 직접 정의하는 패턴
-
별도의 함수를 정의하는 형태가 아니라 다음과 같이 function(){} 블록을 직접 설정하는 것도 가능함.
-
이처럼 파라미터 형태로 전달되는 함수를 콜백함수라고 한다.
setInterval(function(){ // 콜백함수 ... }, 1000); setTimeout(function(){ ... }, 1000);
5. 객체
5-1. 객체의 생성 과정
-
빈 객체의 생성
-> 아무런 기능이 없는 상태의 빈 객체를 생성
-> prototype -
변수의 추가
-> 빈 객체 안에 변수들을 추가해 넣는다.
-> 용도에 따라서 객체를 생성하고 변수를 그룹화하기 위해서 사용된다. -
함수의 추가
-> 빈 객체 안에 함수들을 추가해 넣는다.
-> 기능은 서로 다르지만 용도가 비슷한 함수들을 하나의 그룹으로 묶기 위한 단위가 객체이다.
5-2. 빈 객체의 생성
let people = {}5-3. 변수의 추가
-
객체 안에 추가되어 있는 변수를 멤버변수 혹은 프로퍼티라고 한다.
-
변수를 추가하기 위해서는 객체이름.변수명 = 값 의 형식을 사용
-
선언을 위한 별도의 키워드는 사용되지 않는다.
people.name = "자바학생"; people.age = 20;
let people = {};
people.name = "자바학생";
people.age = 20;
document.write("<h1>" + people.name + "님은 " + people.age + "살 입니다.</h1>");6. String
let url = "http://www.naver.com";
document.write("<p>문자열 : " + url + "</p>");
// 문자열의 글자수
let len = url.length;
document.write("<p>문자열의 글자수 : " + len + "</p>");
// 파라미터로 설정된 위치의 글자를 리턴
let str = url.charAt(3); // 0부터 카운트
document.write("<p>3번째 글자 : " + str + "</p>");
// 파라미터로 전달된 글자가 처음 나타나는 위치를 리턴
// 검색 결과가 없을 경우 -1을 리턴. 있으면 안되는 특수문자를 검열할 떄 많이 사용.
let position = url.indexOf("A");
document.write("<p>'A'가 처음 나타나는 위치 : " + position + "</p>");
// 잘라내기 위한 시작 위치와 끝 위치를 파라미터로 설정
let substring = url.substring(0,5);
document.write("<p>문자열 자르기 : " + substring + "</p>");
// 두 번째 파라미터가 없을 경우 7번째부터 끝까지 자른다.
let substring2 = url.substring(7);
document.write("<p>문자열 자르기2 : " + substring2 + "</p>");
// 모든 문자를 대문자로 변환
let up = url.toUpperCase();
document.write("<p>모든 문자 대문자 반환 : " + up + "</p>");
// 모든 문자를 소문자로 변환
let low = url.toLowerCase();
document.write("<p>모든 문자 소문자 반환 : " + low + "</p>");
결과:
문자열 : http://www.naver.com
문자열의 글자수 : 20
3번째 글자 : p
'A'가 처음 나타나는 위치 : -1
문자열 자르기 : http:
문자열 자르기2 : www.naver.com
모든 문자 대문자 반환 : HTTP://WWW.NAVER.COM
모든 문자 소문자 반환 : http://www.naver.com7. 웹 브라우저와 javascript
- HTML : 정보
- CSS : 디자인
- JavaScript : 웹 브라우저 HTML 제어
<style>
#selected{ color: tomato; }
.dark{
background-color: black;
color: white;
}
.dark #selected{color: yellow;}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id = "selected">JAVASCRIPT</li>
</ul>
<input type="button" value="dark"
onclick="document.body.className = 'dark'">
개발자