☝🏻오늘 배운 것
1. 문자열 관련 함수
- 문자열(string 내장 객체)
: 자바스크립트에는 문자열을 나타내는 객체(String)가 존재하며, 문자열과 관련된 기본적인 함수를 제공해준다.
: 문자열.indexOf("str")
-> 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환. 없으면 -1 반환
: 문자열.substring(시작인덱스, 종료인덱스)
-> 문자열 일부 잘라내기 (시작인덱스 이상 ~ 종료인덱스 미만)
: 문자열.split("구분자")
-> 문자열을 "구분자"로 잘라서 배열로 반환
<button id="btn1">문자열 관련 함수(콘솔확인)</button>
document.getElementById("btn1").addEventListener("click", function(){
// 문자열.indexOf("str")
// 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환
// 없으면 -1 반환
const str1 = "Hello World";
console.log( str1.indexOf("e") );
console.log( str1.indexOf("1") ); // 2 (가장 먼저 검색된 인덱스 반환)
console.log( str1.indexOf("가") ); // -1
// 문자열.substring(시작인덱스, 종료인덱스) : 문자열 일부 잘라내기
// - 시작인덱스 이상 ~ 종료인덱스 미만
const str2 = "abcdefg";
console.log( str2.substring(0, 3) ); // abc
console.log( str2.substring(1, 2) ); // b
console.log( str2.substring(2, 6) ); // cdef
// 문자열.split("구분자") : 문자열을 "구분자"로 잘라서 배열로 반환
const str3 = "햄버거, 피자, 김밥, 파스타, 삼겹살";
const arr = str3.split(", ");
console.log( arr );
});
2. 숫자 관련 함수
- 숫자(Math 내장 객체)
- 숫자(number)타입 리터럴 표기법
: 12(정수), 3.14(실수), Infinity(무한), NaN(Not a Number)
: Math -> 숫자 관련 함수를 제공하는 JS 내장 객체
ex) Math.random() : 난수
<button id="btn2">숫자 관련 함수(콘솔 확인)</button>
// 숫자 관련 함수
document.getElementById("btn2").addEventListener("click", function(){
// Infinity 리터럴 확인
console.log( 5/0 );
if(5/0 == Infinity){
console.log("무한입니다");
}
// NaN 리터럴 확인
console.log( "aaa" * 100 );
// "aaa" * 100 == NaN --> 연산 불가
// isNaN(값) : 값이 NaN이면 true, 아니면 false 반환
if( isNaN("aaa"*100) ){
console.log("숫자가 아닙니다");
}
// Math.random() : 0이상 1미만의 난수 발생 (0 <= random < 1)
console.log(Math.random());
// 소수점 관련 함수
// round(), ceil(), floor(), trunc()
// 반올림 올림 내림 버림
// -> 소수점 자리를 지정할 수 없다. 정수까지 처리해줌
console.log( Math.round(10.555) ); // 11
console.log( Math.ceil(10.555) ); // 11
console.log( Math.floor(10.555) ); // 10
console.log( Math.trunc(10.555) ); // 10
// 버튼 배경색 랜덤으로 바꾸기
const r = Math.floor( Math.random() * 256); // rgb : 0~255
const g = Math.floor( Math.random() * 256); // rgb : 0~255
const b = Math.floor( Math.random() * 256); // rgb : 0~255
this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"
// 숫자.toFixed(자릿수) : 지정된 자릿수까지 반올림해서 표현
console.log( (3.55).toFixed(1) ); // 3.5
});
3. 형변환
// 형변환 확인
// parseInt() : 정수로 변환해줌 ("3.14" -> 3)
console.log( typeof parseInt("3.14") ); // number
// parseFloat() : "정수" -> 정수, "실수" -> 실수
console.log( parseFloat("3.14") ); // 3.14(number) 4. 배열
- 배열
- 배열 : 변수를 묶음으로 다루는 것(변수가 연속적으로 나열됨)
- JS 배열의 특징 (자바 컬렉션의 List와 비슷)
- 자료형의 제한이 없음
- 길이 제한이 없음
<button id="btn1">배열 확인1(콘솔)</button>
// 배열확인 1
document.getElementById("btn1").addEventListener("click", function(){
// 배열 선언 방법
const arr1 = new Array(3); // 3칸짜리 배열 생성
const arr2 = new Array(); // 0칸짜리(비어있는) 배열 생성
// 다른 자료형 대입
arr1[0] = "김밥";
arr1[1] = 123;
arr1[2] = true;
console.log( arr1 );
// 0칸짜리 배열 대입 -> 자동으로 길이 증가
arr2[0] = "김밥";
arr2[1] = 123;
arr2[2] = true;
console.log( arr2 );
// 배열 선언 방법
const arr3 = []; // 비어있는 배열만 선언
const arr4 = ["사과", "딸기", "바나나"]; // 선언과 동시에 초기화
// for문으로 배열 요소 반복 접근하기
// 1. 일반 for문
// 2. 향상된 for문 (for...of) : 배열용 향상된 for문
for(let item of arr4){
console.log(item);
}
});
- 배열 관련 함수
push() : 배열 마지막 요소로 추가
pop() : 배열 마지막 요소를 꺼내옴배열.indexOf("값") : 일치하는 값을 가진 요소의 index를 반환, 없으면 -1반환
배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순으로 정렬(문자열)
단, [정렬기준 함수]가 작성되면 정렬결과가 달라짐배열.toString() : 배열 요소를 하나의 문자열로 출력
-> 요소 사이에 "," 추가배열.join("구분자") : 배열 요소를 하나의 문자열로 출력
-> 요소 사이에 "구분자"가 추가
<button id="btn2">배열 확인2(콘솔)</button>
document.getElementById("btn2").addEventListener("click", function(){
// 비어있는 배열
const arr = [];
// push() : 배열 마지막요소로 추가
arr.push("삼겹살");
arr.push("곱창");
arr.push("국밥");
arr.push("소주");
arr.push("맥주");
console.log(arr);
// pop() : 마지막요소 꺼내오기
console.log( "꺼내온 요소 : " + arr.pop() );
console.log( arr );
// 배열.indexOf("값") : 일치하는 값을 가진 요소의 index 반환
console.log("국밥 인덱스 : " + arr.indexOf("국밥"));
console.log("갈비탕 인덱스 : " + arr.indexOf("갈비탕")); // 없는경우 -1반환
// 배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순으로 정렬(문자열 기준)
const arr2 = [5,3,2,10,1];
console.log( arr.sort() );
console.log( arr2.sort() ); // 문자열 기준
// 숫자 기준 정렬
console.log( arr2.sort( function(a,b) {return a-b} ) ); // 숫자 오름차순 정렬
console.log( arr2.sort( function(a,b) {return b-a} ) ); // 숫자 내림차순 정렬
// 문자열로 출력
console.log( arr.toString() );
console.log( arr.join(" / ") );
});
5. window 내장 객체
- Window 객체
브라우저 창 자체를 나타내는 객체
Window 객체는 자바스크립트의 최상위 객체이며 DOM, BOM으로 분류됨
DOM(Document Object Model) : document
BOM(Browser Object Model) : location, history, screen, navigator
- window 객체는 창 자체를 나타내고 있으므로 어디서든 접근이 가능하다.
그래서 window라는 객체 호출부를 생략할 수 있다.
ex) window.alert() == alert()
- window.setTimeout(함수, 지연시간(ms))
: 지연시간 후 함수가 1회 실행
<button id="btn1">setTimeout 확인</button>
document.getElementById("btn1").addEventListener("click", function(){
setTimeout( function(){
alert("3초 후 출력!")
}, 3000);
});
- window.setInterval(함수, 지연시간(ms))
: 지연시간 마다 함수 실행
전자 시계 만들기
<div id="clock">10 : 41 : 19</div>
let interval; // setInterval을 저장하기 위한 전역변수
// 현재 시간 문자열로 반환 함수
function currentTime(){
const now = new Date();
let hour = now.getHours(); // 시
let min = now.getMinutes(); // 분
let sec = now.getSeconds(); // 초
if(hour < 10) hour = "0" + hour;
if(min < 10) min = "0" + min;
if(sec < 10) sec = "0" + sec;
return hour + " : " + min + " : " + sec;
}
function clockFn(){
const clock = document.getElementById("clock");
clock.innerText = currentTime();
interval = setInterval(function(){
clock.innerText = currentTime();
}, 1000);
}
clockFn(); // 함수호출- window.clearInterval(setInterval이 저장된 변수)
: interval 함수 멈추게 하기
전자 시계 멈추기
<button id="stop">STOP</button>
// clearInterval
document.getElementById("stop").addEventListener("click", function(){
clearInterval(interval);
});