◑ 메세지 창 관련 함수
1. alert
2. confirm
3. prompt
◑ 팝업창 열기 함수
1. window.open
◑ 자동 연산 함수
1. eval
◑ 형 변환 함수
1. Number
2. parseInt(parseFloat)
3. String
◑ 문자 타입 관련 함수
1. length : 문자열의 길이
2. charAt : 해당 인덱스 값 반환
3. indexOf : 검색 값의 인덱스 값 반환
4. lastIndexOf : 검색 마지막 인덱스 값 반환
5. split : 구분자를 통하여 단어별 배열로 만든다.
6. toLowerCase() : 모두 소문자로 전환
7. toUpperCase() : 모두 대문자로 전환
◑ 숫자 관련 함수
1. Math.max(x,y) : 두 값 중 큰 값
2. Math.min(x,y) : 두 값 중 작은 값
3. Math.abs() : 절대 값
4. Math.floor(x) : 소수점 아래 버림 (정수)
5. Math.ceil(x) : 소수점 올림 (정수)
6. Math.round() : 반올림 (정수)
7. toFixed() : 소수점 자리 수까지 반올림, str.toFixed(2)
8. substring(시작번호,끝번호) : 시작번호(0부터시작)부터, 끝번호 이전까지 범위설정하여 가져옴
9. isNaN(문자열) : 주어진 문자열이 문자형이면 true, 숫자형이면 false를 리턴 (형변환 적용 안됨)
☆ 실습☆
1. 팝업 창
- window.open() 함수를 이용하여 팝업창 형식으로 브라우저를 열 수 있다.
(형식) window.open( 주소,이름,속성 );
(주소) 팝업으로 오픈할 웹 주소를 기록한다.(이름) 팝업이 띄워질 브라우저 이름을 설정한다. 존재하지 않는 이름이라면 새로 이름을 부여하여 팝업 오픈한다.
(속성) 팝업 창의 넓이,높이,위치 등을 설정한다. 기타 여러 기능 설정이 있으나 거의 IE 용으로 만들어진 설정이라 무용지물이 많음
- height=pixels : 창의 높이 지정
- width=pixels : 창의 넓이 지정
- left=pixels : 창의 화면 왼쪽에서의 위치 지정( 음수 사용 불가 )
- top=pixels : 창의 화면 위쪽에서의 위치 지정( 음수 사용 불가 )
※ 팝업창의 위치를 지정할 때 사용하는 자바스크립트 지원 기능
- window.screen.width : 화면 넓이
- window.screen.height : 화면 높이
예제1) test1.html을 팝업창으로 연다.
window.open("test1.html","popup","width=400,height=300");
예제2) 팝업의 위치를 설정한다.
옵션부분 :: "width=400,height=300,left=300,top=300";
예제3) 팝업의 위치를 가운데로 위치하게 한다.
var width = window.screen.width/2 - 200;
var height = window.screen.height/2 - 150;
2. 특수 기능 함수
(1) 자동연산 함수
var str = "10+20+30+40";
document.write( "eval : " + eval(str) + "<br>");
(2) 형변환 함수
var a = "100";
var b = "200";
var hap = Number(a)+Number(b);
document.write( a + "+" + b + "=" + hap );
(3) 문자숫자구분 함수
var data = "100"; // (또는) data = "abc";
if( isNaN(data) == true) {
alert("변수의 값은 문자입니다.");
} else {
alert("변수의 값은 숫자입니다.");
}
3. 문자열 관련 함수
var date = "2023-12-25";
(1) length : 문자열 길이 얻는 함수
document.write( date.length + "<br>" );
(2) charAt : 자리번호를 이용한 위치 값 얻는 함수
document.write( date.charAt(3) + "<br>" ); // 4번째 값
(3) split : 구분자를 통한 배열 처리 함수
var array = date.split('-');
document.write( array[0] + "<br>");
document.write( array[1] + "<br>");
document.write( array[2] + "<br>");
(4) substring : 범위 설정 함수
document.write( date.substring(0,4) + "<br>" );
document.write( date.substring(5,7) + "<br>" );
document.write( date.substring(8,10) + "<br>" );
(5) replace : 치환함수 (change)
document.write( date.replace( "2023","2024" ) ); // 2024-12-25
document.write( date.replace( "-","" ) ); // 20231225
var s1 = "JavaScript";
(6) 단어 검색 함수
document.write ( s1.indexOf('J') + "<br>" ); // 0 ;; 0 번 자리에 위치함.
document.write ( s1.indexOf('z') + "<br>" ); // -1 ;; 찾기 실패
document.write ( s1.indexOf('s') + "<br>" ); // -1 ;; 찾기 실패 ( 대문자 구별 )
document.write ( s1.indexOf('a') + "<br>" ); // 1 ;; 찾는 단어의 첫번재 위치 값을 얻는다.
document.write ( s1.lastIndexOf('a') + "<br>" ); // 3 ;; 찾는 단어의 마지막 위치 값을 얻는다.
document.write ( s1.indexOf('Java') + "<br>" ); // 0
document.write ( s1.indexOf('Script') + "<br>" ); // 4
(7) 대소문자 변환 함수
document.write ( s1.toLowerCase() + "<br>" );
document.write ( s1.toUpperCase() + "<br>" );
4. 수학 관련 함수
(1) document.write( Math.max(77,55) + "<br>"); // 77
(2) document.write( Math.min(77,55) + "<br>"); // 55
(3) document.write( Math.abs(-100) + "<br>"); // 100
(4) document.write( Math.ceil(3.1) + "<br>"); // 4
(5) document.write( Math.floor(3.1) + "<br>"); // 3
(6) document.write( Math.round(3.5) + "<br>"); // 4
(7) document.write( Math.round(3.4) + "<br>"); // 3
(풀어보기1)
var email = "himedia77@naver.com";
(1) "@"의 존재 유무로 "올바른 이메일입니다." 또는 "올바른 이메일이 아닙니다." 으로 출력한다.
(2) "naver" 를 "korea" 로 바꾸어 출력한다. (출력만하고 원본은 바꾸지 않음)
(3) 아이디 값과 도메인부분을 나누어 출력한다.
츨력) 아이디 : himedia77 , 도메인 : naver.com
(4) 아이디값의 (문자열)길이를 출력한다.
(5) 아이디값의 마지막 글자를 출력한다.
var str = "외국인시설과 내국인 시설 모두 좋은 시설이다.";
(6) 시설이라는 단어는 몇개인지 출력한다.