문자열, 숫자, 형변환, 연산자
script 태그
외부 js 파일과 연결하는 태그
<script src="js/08_문자열, 숫자, 형변환, 연산자.js"></script>// 문자열 관련 함수
document.getElementById("btn1").addEventListener("click", function(){
// 문자열.indexOf("str") :
// 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환
// 없으면 -1 반환
const str1 = "Hello world";
console.log(str1.indexOf("e")); // 1
console.log(str1.indexOf("l")); // 2 (가장 먼저 검색된 인덱스 반환)
console.log(str1.indexOf("가")); // -1
// 문자열.substring(시작인덱스, 종료 인덱스(미포함)) : 문자열 일부 잘라내기
// 시작 인덱스 이상, 종료 인덱스 미만
const str2 = "abcdefg";
console.log(str2.substring(0,3)); // abc
console.log(str2.substring(2,6)); // cdef
// 문자열.split("구분자") : 문자열을 구분자로 잘라서 배열로 반환
const str3 = "햄버거, 비빔밥, 김밥, 라면, 파스타, 스테이크";
const arr = str3.split(", ");
// console.log(arr);
for(let i =0; i<arr.length; i++){
console.log(arr[i]);
}
})
// 숫자 관련 함수
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 (X)
// isNan(값): 값이 NaN이면 true, 아니면 false 반환
if(isNaN("aaa"*100)) {
console.log("숫자가 아닙니다.");
}
// Math.random(): 0이상 1미만의 난수 발생 (0<=random<1)
// this.innerText=Math.random();
// 소수점 관련 함수
// round(), cell(), floor(), trunc()
// 반올림 올림 내림 절삭(버림)
// -> 소수점 자리를 지정할 수 없다.
console.log(Math.round(10.5)); //11
console.log(Math.ceil(10.5)); //11
console.log(Math.floor(-10.5)); //-11
console.log(Math.trunc(-10.5)); //-10
// 버튼 배경색 랜덤으로 바꾸기
const r = Math.floor(Math.random()*256); // 0~255
const g = Math.floor(Math.random()*256); // 0~255
const b = Math.floor(Math.random()*256); // 0~255
this.style.backgroundColor="rgb("+r+","+g+","+b+")";
// 숫자.toFixed(자릿수) : 지정된 자릿수까지 반올림해서 표현
console.log((1.45).toFixed(1));
})
// 형변환 확인
document.getElementById("btn3").addEventListener("click", function(){
console.log( parseInt("1.234") );
console.log( (parseFloat("1.234") )); // 숫자는 콘솔에 파란색
console.log(Number("1.234")); // 문자는 콘솔에 까만 색
})1️⃣ 문자열(String 내장 객체)
자바스크립트에는 문자열을 나타내는 객체(String)이 존재하며 문자열과 관련된 기본적인 함수를 제공해준다.
<h2>문자열(String 내장 객체)</h2>
<button id="btn1">문자열 관련 함수(콘솔 확인)</button>
2️⃣ 숫자(Math 내장 객체)
숫자(number) 타입 리터럴 표기법 : 12(정수), 3.14(실수), Infinity(무한), NaN(Not a Number)
Math : 숫자 관련 함수를 제공하는 JS 내장 객체
ex) Math.random() : 난수
<h2>숫자(Math 내장 객체)</h2>
<button id="btn2">숫자 관련 함수(콘솔 확인)</button>
3️⃣ 문자열 → 숫자 형변환
paseInt(문자열) : 정수로만 변환 가능
parseFloat(문자열) : "정수" → 정수 , "실수" → 실수
Number(문자열) : "정수" → 정수, "실수" → 실수
<h2>문자열 -> 숫자 형변환</h2>
<button id="btn3">형변환 확인(콘솔 확인)</button>
4️⃣ 동등/동일 비교 연산자
동등 비교 연산자 ( ==, != )
→ 값이 같으면 true (자료형과 관계가 없음)
ex) "1" == 1 == true(1)
동일 비교 연산자 ( ===, !==)
→ 값과 자료형이 모두 같아야 true
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_문자열, 숫자, 형변환, 연산자</title>
</head>
<body>
<h2>문자열(String 내장 객체)</h2>
<pre>
자바스크립트에는 문자열을 나타내는 객체(String)이 존재하며
문자열과 관련된 기본적인 함수를 제공해준다.
</pre>
<button id="btn1">문자열 관련 함수(콘솔 확인)</button>
<hr>
<h2>숫자(Math 내장 객체)</h2>
<pre>
숫자(number) 타입 리터럴 표기법 :
12(정수), 3.14(실수), Infinity(무한), NaN(Not a Number)
Math : 숫자 관련 함수를 제공하는 JS 내장 객체
ex) Math.random() : 난수
</pre>
<button id="btn2">숫자 관련 함수(콘솔 확인)</button>
<hr>
<h2>문자열 -> 숫자 형변환</h2>
<pre>
paseInt(문자열) : 정수로만 변환 가능
parseFloat(문자열) : "정수" -> 정수 , "실수" -> 실수
Number(문자열) : "정수" -> 정수, "실수" -> 실수
</pre>
<button id="btn3">형변환 확인(콘솔 확인)</button>
<hr>
<h2>동등/동일 비교 연산자</h2>
<pre>
동등 비교 연산자 ( ==, != )
-> 값이 같으면 true (자료형과 관계가 없음)
ex) "1" == 1 == true(1)
동일 비교 연산자 ( ===, !==)
-> 값과 자료형이 모두 같아야 true
</pre>
<script src="js/08_문자열, 숫자, 형변환, 연산자.js"></script>
</body>
</html>
Hello! My Name is oYJo