728x90
반응형
document.getElementById("btn1").addEventListener("click",function(){
// 문자열.indexof("");
//문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환
//없으면 -1 반환
const str1 = "Hellow word";
console.log(str1.indexOf("e")); //1
console.log(str1.indexOf("1")); //2 가장 먼저 검색된 인덱스 반환
console.log(str1.indexOf("A")); //-1
//문자열.substring(시작인덱스, 종료인덱스) : 문자열 일부 잘라내기
// -시작 이상 종료 미만
const str2="abcdefg";
console.log(str2.substring(0,3));
console.log(str2.substring(2,6));
//문자열.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(7/0);
if(7/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(), ceil(), 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"));
})
//동등 / 동일 비교 연산자 확인
document.getElementById("btn4").addEventListener("click",function(){
if("1"==true){
console.log("동등 합니다.");
}
if("1"===1){
console.log("동일합니다.")
}
})
<!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>문자열(Strinig 내장 객체)</h2>
<pre>
자바스크립트에는 문자열을 나타내는 객체가 존재하며
문자열과 관련된 기본적인 함수를 제공해준다.
</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>
parseInt(문자열) : 정수로만 변환 가능
parseFloat(문자열) : "정수" -> 정수, "실수" -> 실수
Number(문자열) : "정수"- > 정수, "실수" -> 실수
</pre>
<button id="btn3">형변환 확인(콘솔확인)</button>
<hr>
<h2>동등 /동일 비교 연산자</h2>
<pre>
동등 비교 연산자 (==, !=)
-> 값이 같으면 true(자료형 관계 없음)
ex ) "1" == 1 == true(1)
동일 비교 연산자(===, !==)
-> 값과 자료형이 모두 같아야 true
</pre>
<button id="btn4">동등/동일 확인(콘솔 확인)</button>
<script src="js/08_문자열숫자형변환.js"></script>
</body>
</html>
728x90
반응형
'괴발개발 > js' 카테고리의 다른 글
| window 내장객체 (0) | 2024.06.19 |
|---|---|
| 배열 (0) | 2024.06.18 |
| 정규표현식 (0) | 2024.06.17 |
| 자바스크립트 js 이벤트 (0) | 2024.06.14 |
| 요소 접근 방법 (0) | 2024.06.13 |