1. Array
<title>Array 생성자 함수</title>
</head>
<body>
<script type="text/javascript">
const array1 = new Array(); //빈 배열 생성, const array1 = [];과 같음
document.write(array1 +'<br>');
document.write(array1.length + '<br>');
document.write('---------------<br>');
const array2 = new Array(10); //배열의 길이를 10으로 지정
document.write(array2 + '<br>');
document.write(array2.length + '<br>');
document.write('---------------<br>');
//배열 생성(초기값 지정)
const array3 = new Array(52,273,103,57,32);
document.write(array3 + '<br>');
document.write(array3.length + '<br>');
</script>
</body>
</html>2. String
1)
<title>String</title>
</head>
<body>
<script type="text/javascript">
let characters = prompt('사용할 비밀번호를 입력하세요','6글자 이상');
if(characters.length < 6){
document.write('6글자 이상으로 입력하세요');
}else{
document.write('참 잘했어요!!');
}
</script>
</body>
</html>2)
<title>영문자 대문자로 변경하기</title>
<script type="text/javascript">
function trans(){
let txt = document.form1.id.value; //전체문서.form1태그.id태그.value속성
txt = txt.toUpperCase(); //대문자로 변환
//name이 id인 input 태그의 값을 변경
document.form1.id.value = txt;
}
</script>
</head>
<body>
<form name="form1">
ID를 소문자로 입력하세요. 대문자로 변환됩니다.<br>
ID : <input type="text" name="id">
<input type="button" value="입력" onclick="trans()">
</form>
</body>
</html>3)
<title>이메일 체크</title>
<script type="text/javascript">
function check(){
let email = document.form1.email.value;
let n = email.indexOf('@'); //@의 위치를 알려줌
if(n > 0){ //@이 맨 앞에 오는건 제외하고 체크
//(시작인덱스,추출할 문자 개수)
document.form1.id.value = email.substr(0,n);
}else{
document.form1.email.value = '';
alert('이메일 형식에 맞게 입력하세요!');
}
}
</script>
</head>
<body>
<form name="form1">
id : <input type="text" name="id" placeholder="아이디는 이메일에서 추출" readonly="readonly">
Email : <input type="text" name="email"><br>
<input type="button" value="입력" onclick="check()">
</form>
</body>
</html>4)
<title>String의 메서드 사용</title>
</head>
<body>
<script type="text/javascript">
let msg = '세상의 끝에서 세상을 노래하다';
document.write(msg.length + '<br>');
document.write(msg.charAt(8) + '<br>');
document.write(msg.indexOf('상') + '<br>');
document.write(msg.indexOf('노래') + '<br>');
document.write(msg.indexOf('수') + '<br>');
document.write(msg.lastIndexOf('상') + '<br>');
document.write('----------------------<br>');
//지정한 인덱스부터 끝 인덱스까지 추출
document.write(msg.substring(5) + '<br>');
//지정한 인덱스부터 끝 인덱스까지 추출
document.write(msg.substr(5) + '<br>');
//지정한 인덱스부터 끝 인덱스까지 추출
document.write(msg.slice(5) + '<br>');
document.write('----------------------<br>');
//시작 인덱스부터 끝 인덱스 전까지 추출
document.write(msg.substring(1,5) + '<br>');
//시작 인덱스부터 추출할 문자 개수 만큼 추출
document.write(msg.substr(5,2) + '<br>');
//시작 인덱스부터 끝 인덱스 전까지 추출
document.write(msg.slice(1,5) + '<br>');
document.write('----------------------<br>');
let msg2 = 'Hello WORLD';
document.write(msg2.toUpperCase() + '<br>'); //대문자로 변환
document.write(msg2.toLowerCase() + '<br>'); //소문자로 변환
document.write('----------------------<br>');
let msg3 = '하하';
//인자로 전달된 문자열을 연결해서 새로운 문자열 반환
document.write(msg.concat(msg3) + '<br>');
document.write('----------------------<br>');
let msg4 = '2023-10-25';
let array = msg4.split('-');
document.write(array);
</script>
</body>
</html>3. Date
1)
<title>Date</title>
</head>
<body>
<script type="text/javascript">
const now = new Date();
document.write('now의 값 : ' + now + '<br>');
document.write('now.toString() : ' + now.toString() + '<br>');
document.write('오늘 : ' + now.toLocaleString() + '<br>');
document.write('오늘의 날짜 : ' + now.toLocaleDateString() + '<br>');
document.write('오늘의 시간 : ' + now.toLocaleTimeString() + '<br>');
document.write('--------------------------------<br>');
document.write('연도 : ' + now.getFullYear() + '<br>');
document.write('월 : ' + (now.getMonth()+1) + '<br>'); //월은 0~11로 나와서 +1 해줘야됨
document.write('일 : ' + now.getDate() + '<br>');
document.write('요일 : ' + now.getDay() + '<br>'); //0(일)~6(토)
document.write('시 : ' + now.getHours() + '<br>'); //0~23시
document.write('분 : ' + now.getMinutes() + '<br>');
document.write('초 : ' + now.getSeconds() + '<br>');
document.write('밀리초 : ' + now.getMilliseconds());
</script>
</body>
</html>2)
<title>Date</title>
<script type="text/javascript">
//윈도우가 로드될 때 호출
window.onload=function(){
//일정 시간마다 매개변수로 전달된 함수를 반복해서 실행
setInterval(function(){
const time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
let clock = '';
clock += ((hours < 10) ? '0' : '') + hours;
clock += ((minutes < 10) ? ':0' : ':') + minutes;
clock += ((seconds < 10) ? ':0' : ':') + seconds;
//span을 호출해서 시간을 span태그의 내용으로 표시
document.getElementById('display').innerHTML = clock;
},1000);
};
</script>
</head>
<body>
<span id="display"></span>
</body>
</html>4. Math
<title>Math</title>
</head>
<body>
<script type="text/javascript">
document.write('Math.ceil(5.3) : ' + Math.ceil(5.3) + '<br>'); //올림
document.write('Math.floor(5.9) : ' + Math.floor(5.9) + '<br>'); //절삭
document.write('Math.round(5.67) : ' + Math.round(5.67) + '<br>'); //반올림
document.write('Math.max(52,32,103,57,273) : ' + Math.max(52,32,103,57,273) + '<br>');
document.write('Math.min(52,32,103,57,273) : ' + Math.min(52,32,103,57,273) + '<br>');
document.write('Math.abs(-5) : ' + Math.abs(-5) + '<br>');
//0이상 1미만의 실수값
document.write('Math.random() : ' + Math.random());
</script>
</body>
</html>5. Number
<title>toFixed(),toLocaleString()</title>
</head>
<body>
<script type="text/javascript">
document.write('반올림(자리수 지정)<br>');
let newNum = 12254.437;
document.write('소수점 셋째자리에서 반올림 : ' + newNum.toFixed(2) + '<br>');
let number = 1234567;
document.write('number = ' + number.toLocaleString() + '<br>');
let number2 = 1234567.493838; //디폴트 소수점 3자리 표시(넷째자리에서 반올림)
document.write('number2 = ' + number2.toLocaleString() + '<br>');
//지정된 지역에서 사용하는 숫자의 표현 방식으로 문자열로 반환
//locales, 옵션
document.write('number2 = ' + number2.toLocaleString(undefined,{maximumFractionDigits:5}));
</script>
</body>
</html>