프로그래밍 언어 응용 30일차 (24/12/20)

웹프로그래밍/JavaScript

프로그래밍 언어 응용 30일차 (24/12/20)

wkun 2024. 12. 20. 15:57

CONTENTS

JavaScript

10.객체

4)내장객체(String)

5)내장객체(Date)

6)내장객체(Math)

7)내장객체(Number)

8)내장객체(RegExp)

---------------------------------------------------------

JavaScript

10.객체

4)내장객체(String)

String메서드

let str01 = "this is JavaScript";

document.write("1. 인덱스가 1인 문자는: " + str01.charAt(1) + "<br>");

document.write("2. 결합된 문자열: " + str01.concat('World...') + "<br>");

document.write("3. 검색된 'Ja'인덱스는 " + str01.indexOf('Ja') + "<br>");

document.write("4. 9번부터 검색된 'Ja'인덱스는: " + str01.indexOf('Ja',9) + "<br>");

document.write("5. 'Ja'문자열이 있으면 결과출력: " + str01.match('Ja') + "<br>");

document.write("6. this를 my partner로 바꾸어 출력: " + str01.replace('Java', 'My partner') + "<br>");

document.write("7. Script가 최초로 발견된 인덱스: " + str01.search('script') + "<br>");

document.write("8. 인덱스가 2번~6번째까지 잘라 반환: " + str01.slice(2,7) + "<br>");

document.write("9. 'a'를 콤마 대체하여 출력: " + str01.split('a')+ "<br>");

document.write("10. 인덱스가 2~6번째까지 잘라 반환: " + str01.substring(2,7) + "<br>");

document.write("11. 객체의 값을 문자열로 출력: " + str01.toString() + "<br>");

document.write("12. 대문자로 출력: " + str01.toUpperCase() + "<br>");

document.write("13. 소문자로 출력: " + str01.toLowerCase() + "<br>");

document.write("14. 객체의 값 그대로 출력: " + str01.valueOf() + "<br>");

</script>

◎indexOf(), search()

-상당히 동일한 기능이나 search() 메서드는 인수가 하나이고 훨씬 더 강한 검색 값을 갖음

◎문자열 일부 추출

총 3가지 방법

1)slice()는 문자열의 일부를 추출하고 추출된 부분을 새 문자열로 반환함. 해당 메서드는 시작 인덱스와 끝 인덱스의 두 매개변수를 사용함. 인수가 음수면 문자열의 끝에서부터 계산함. 만약 두번째 인자가 없다면 문자열의 나머지 부분을 잘라냄

2)substring()은 slice()와 비슷하나 음수 인덱스를 허용하지 않음

3)substr()도 slice()와 유사하나 두번째 인수가 추출될 부분의 길이를 지정함. 첫번째 인수가 음수면 문자열의 끝부터 계산하며, 두번째 인수는 문자의 길이를 나타내므로 음수가 올 수 없음

String 메서드

let str01 = "JavaScript objects are containers for name values, called properties and methods.";

let position01 = str01.indexOf("containers", 15);

//정규표현식 미지원, 찾으려는 단어가 여러개면 첫번째 단어 index반환

document.write(`1.indexOf('containers',15): ${position01} <br>`);

let position02 = str01.search("containers");

//정규표현식 지원(더 구체적 검색), 찾으려는 단어가 여러개면 첫번째 단어 index 반환

document.write(`2.search('containers'): ${position02} <br>`);

let result01 = str01.slice(7,13); //7번째부터 13번째 전까지

//음수 인데스 지원(뒤에서부터 카운트), 시작 index가 종료 index보다 크면, 빈문자열 반환

document.write(`3.slice(7,13): ${result01} <br>`);

let result02 = str01.slice(-12,-6);

document.write(`4.slice(-12,-6): ${result02} <br>`);

let result03 = str01.slice(7);

document.write(`5.slice(7): ${result03} <br>`);

let result04 = str01.slice(-12);

document.write(`6.slice(-12): ${result04} <br>`);

let result05 = str01.substring(7,13);

//음수 index는 0으로 처리, 시작 index가 종료index보다 크면, 2개 위치 바꿔서 처리

document.write(`7.substring(7,13): ${result05} <br>`);

let result06 = str01.substr(7,6);

//음수 index 지원(뒤에서부터 카운트), 2번째 인수가 추출하려는 글자길이

document.write(`8.substr(7,6): ${result06} <br>`);

</script>

◎replace()

-지정된 값을 문자열의 다른 값으로 바꿈. 그러나 호출된 문자열(기존의 문자열)을 바꾸는 것이 아니라 새로운 문자열을 반환함. 기본적으로 첫번째 일치된 항목만 바꿈. 모든 매치된 문자열을 바꾸기 위해서는 '\g'플래그를 사용함. 대소문자를 구분 안하려면 '\i' 플래그를 사용한함. 섞어쓰려면 '/ig'

String 메서드_replace()

<body>

<p>Replace "java" is replaced by "javaScript."</p>

function myFunction() {

let str = "this program is written by java. java is the best program.";

let txt = str.replace("java", "javaScript");

document.querySelector("#demo01").innerHTML = txt;

let txt2 = str.replace(/java/g, "javaScript");

document.querySelector("#demo01").innerHTML = txt2;

}

</script>

◎split()

-문자열을 split() 메서드를 사용하여 첫 번째 인수로 전달한 문자열/정규표현식을 검색하여 문자열을 구분한 후 분리된 문자열로 이루어진 배열을 반환함

String 메서드_split()

<body>

<p>A string can be converted to an array</p>

function myFunction() {

let str = "javascript, c++, java, html6, python, jQuery";

let arr = str.split(",");

document.querySelector("#demo01").innerHTML = arr[0];

}

</script>

</body>

◎trim()

-대상 문자열 앞 뒤에 공백 문자가 있을 경우 이를 제거한 문자열을 반환함

String 메서드_trim()

let str = " 앞뒤공백 ";

document.write("원본: " + str + "<br>");

document.write(str.trim());

</script>

◎repeat()

-문자열을 인수로 전달받은 정수만큼 반복해 연결하여 새로운 문자열을 반환함

String 메서드_repeat()

<body>

<p>A string can be converted to an array</p>

let str = "abc";

document.write(str.repeat() + "<br>");

document.write(str.repeat(1) + "<br>");

document.write(str.repeat(2) + "<br>");

document.write(str.repeat(2.5) + "<br>");

document.write(str.repeat(-1) + "<br>");

</script>

</body>

5)내장객체(Date)

-Date 객체는 날짜와 시간(녀, 월, 일, 시, 분, 초, 밀리 초)에 관한 작업을 하는데 사용되는 기본 객체임. 자바스크립트에서는 날짜는 문자열로 작성할 수 있고, 숫자로도 작성됨. 숫자로 표현된 날짜는 1970년 1월 1일 00:00:00 이후의 밀리 초를 계산하여 나타냄. 상당히 많이 사용되는 객체이며 웹 브라우저에서 Date 객체를 이용해야하는 경우가 많음.

입력 포맷	예시
ISO Date	"2018-06-06" (국제 표준 표현)
Short Date	"06/06/2018"
Long Date	"Jun 06 2018" 또는 "01 Jun 2018"
Full Date	"Wednesday June 06 2018"

출력 포맷	예시
Full Date	Wde June 06 2018 09:00:00 GMT+0900 (대한민국 표준시)
Number Date	1970년 1월 1일 0시 이루 날짜와 시간까지 밀리초로 계산한 숫자로 표현

-사용법

var 객체 이름 = new Date();

생성방법	설명
new Date()	현재의 날짜와 시간을 표시할 수 있도록 함
new Date(miliseconds)	19070년 1월 1일 0시 이후 날짜와 시간이 주어진 밀리초만큼 경과했으니 계산하여 날짜로 변환해줌
new Date(datestring)	괄호에 명시된 날짜 문자열을 사용하여 지정된 날짜와 시간에서 날짜 객체를 만듬
new Date(year, month, day) new Date(year, month, day, hour, minute, second, milisecond)	괄호의 순서에 따라 3개(7개)의 숫자를 순서적으로 매치하여 값이 지정됨

◎get 메서드

-날짜의 일부를 가져오는데 사용됨

get 메서드	설명
getDate()	(1-31)의 숫자로 날짜를 구함
getDay()	(0-6)의 숫자로 요일을 구함. 0은 일요일
getFullYear()	4자릿수의 년도를 구함
getHours()	(0-23)의 숫자로 시간을 구함
getMiliseconds()	1/1000초까지 구함
getMinutes()	(0-59)의 숫자로 분을 구함
getMonth()	(0-11)의 숫자로 월을 구함
getSeconds()	(0-59)의 값으로 초를 구함
getTime()	1970년 1월 1일 0시로부터 지정된 시간까지 1/1000초로 표현함

◎set 메서드

-날자의 일부를 설정하는데 사용됨

set 메서드	설명
setDate()	(1-31)의 숫자로 날짜를 설정함
setFullYear()	4자릿수의 년도를 설정함
setHours()	(0-23)의 숫자로 시간을 설정함
setMiliseconds()	1/1000초까지 설정함
setMinutes()	(0-59)의 숫자로 분을 설정함
setMonth()	(0-11)의 숫자로 월을 설정함
setSeconds()	(0-59)의 값으로 초를 설정함
setTime()	1970년 1월 1일 0시부터 지정된 시간까지 1/000초로 설정함

Date객체_get 메서드

let toDay = new Date();

document.write("getTime():" + toDay.getTime() + "<br>");

document.write("getDate(): " + toDay.getDate() + "<br>");

document.write("getDay(): " + toDay.getDay() + "<br>");

document.write("getFullYear(): " + toDay.getFullYear() + "<br>");

document.write("getHours(): " + toDay.getHours() + "<br>");

document.write("getMilliseconds(): " + toDay.getMilliseconds() + "<br>");

document.write("getMinutes():" + toDay.getMinutes() + "<br>");

document.write("getMonth(): " + toDay.getMonth() + "<br>");

document.write("getSeconds(): " + toDay.getSeconds() + "<br>");

</script>

Date객체_set메서드

let thisDay = new Date();

thisDay.setFullYear(2024,8,6);

document.write("setFullYear(): " + thisDay + "<br>");

thisDay.setDate(20);

document.write("setDate(): " + thisDay + "<br>");

thisDay.setDate(thisDay.getDate() + 50);

document.write("setDate(): " + thisDay + "<br>");

thisDay.setHours(15);

document.write("setHours(): " + thisDay + "<br>");

thisDay.setMilliseconds(2345);

document.write("setMilliseconds(): " + thisDay + "<br>");

thisDay.setMinutes(34);

document.write("setMinutes(): " + thisDay + "<br>");

thisDay.setMonth(7);

document.write("setMonth(): " + thisDay + "<br>");

thisDay.setTime(840023400);

document.write("setTime(): " + thisDay + "<br>");

</script>

◎parse(), now()

-parse() 메서드는 유효한 날짜 문자열이 있는 경우 밀리 초로 변환할 수 있고 now() 메서드는 현재 시간에 해당하는 숫자 값(밀리 초)를 반환함. 두 메서드는 1970년 1월 1일 00:00:00 UTC 이후로 시간(밀리 초)임

Date객체_parse(),now()

let milisec = Date.parse("july 13, 2015");

document.write(milisec+"<br>");

let string_Date = new Date(milisec);

document.write(string_Date+"<br>");

let cursec = Date.now();

document.write(cursec+"<br>");

</script>

◎비교 연산하기

-사용자로부터 받은 날짜를 지정된 다른 날짜와 비교할 수 있음. 날짜를 비교할 때에는 두 날짜를 1970년 1월 1일 이후의 밀리 초로 계산하여 크기를 비교함. 다음은 2017년 1월 14일 빌려간 cd의 경과 기간을 계산함

Date객체_비교연산

let today, someday, text;

today = new Date();

someday = new Date();

someday.setFullYear(2017,0,14);

if(someday>today) {

text = "Today is before January 14, 2017";

}else{

text = "Today is after January 14, 2017";

let diff = today.getTime() - someday.getTime();

let del_Day = diff/(1000*60*60*24); //오늘 날짜 기준 밀리세컨트 - 특정날짜 기준 밀리세컨드 : diff/(1000*60*60*24)

//1000: 1초 1000밀리세컨드, 60: 1분 60초, 60: 1시간 60분, 24: 1일 24시간

//1일 밀리세컨트 변환(86,400,000)

document.write(text + "<br>" + del_Day + "일 경과했습니다.");

}

</script>

6)내장객체(Math)

-자바스크립트에서 Math 객체를 사용하면 숫자에 대한 수학적 작업을 할 수 있음. Math는 생성자가 아닌 객체임. 그래서 new 연산자를 통하여 객체를 생성하는 것이 아닌, Math 자체가 객체이므로 바로 사용하면 됨

◎Math객체의 상수

상수	예시
E	오일러의 상수(약 2.718)
LN2	밑수가 2인 자연로그(약 0.693)
LN10	밑수가 10인 자연로그(약 2.302)
PI	PI 값(약 3.14)
SQRT1_2	1/2의 제곱급(약 0.707)
SQRT2	2의 제곱근(약 1.414)

Math객체 상수

document.write("<b>Math.E: <br>" + Math.E + "</br>");

document.write("<b>Math.PI: <br>" + Math.PI + "</br>");

document.write("<b>Math.SQRT2: <br>" + Math.SQRT2 + "</br>");

document.write("<b>Math.SQRT1_2: <br>" + Math.SQRT1_2 + "</br>");

document.write("<b>Math.LN2: <br>" + Math.LN2+ "</br>");

document.write("<b>Math.LOG2E: <br>" + Math.LOG2E + "</br>");

</script>

Math객체의 메서드

메서드	설명
abs()	x의 절대값
acos(x), asin(x), atan(x)	x(라디안) 의 아크 삼각함수
ceil(x)	실수를 정수로(올림)
cos(x), sin(x), tan(x)	x(라디안)의 삼각함수
exp(x)	지수 함수
floor(x)	실수를 정수로(버림)
log(x)	로그 함수
max(x,y,z,...,n)	최대값
min(x,y,z,...,n)	최소값
pow(x,y)	지수 함수 x의 y승
random()	0과 1사이의 난수 값
round(x)	반올림한 정수
sqrt(x)	x의 제곱근

*라디안 값: 각도*Math.PI/180;

Math객체 메서드

let a = Math.round(4.7);

let b = Math.round(4.4);

let c = Math.pow(8,2);

let d = Math.sqrt(65);

let e = Math.abs(-4.7);

let f = Math.ceil(4.7);

let g = Math.floor(4.7);

let h = Math.sin(90*Math.PI/180);

let i = Math.cos(0*Math.PI/180);

let j = Math.max(3,124,32,-8,99,-17);

let k = Math.min(3,124,32,-8,99,-17);

let l = Math.random();

document.write("<b>Math.round(4.7): <b>" + a + "<br>");

document.write("<b>Math.round(4.4): <b>" + b + "<br>");

document.write("<b>Math.pow(8,2): <b>" + c + "<br>");

document.write("<b>Math.sqrt(65): <b>" + d + "<br>");

document.write("<b>Math.abs(-4.7): <b>" + e + "<br>");

document.write("<b>Math.ceil(4.7): <b>" + f + "<br>");

document.write("<b>Math.floor(4.7): <b>" + g + "<br>");

document.write("<b>Math.sin(90*Math.PI/180): <b>" + h + "<br>");

document.write("<b>Math.cos(0*Math.PI/180): <b>" + i + "<br>");

document.write("<b>Math.max(3,124,32,-8,99,-17): <b>" + j + "<br>");

document.write("<b>Math.min(3,124,32,-8,99,-17): <b>" + k + "<br>");

document.write("<b>Math.random(): <b>" + l + "<br>");

</script>

7)내장객체(Number)

-new 키워드를 사용하여 객체로 정의할 수 있음. 일반적 연산의 경우, Number 객체를 만들어 사용하면 오히려 실행 속도가 느리고 비교 과정에서 문제점이 발생함

ex) let x = 500;

let y = new Number(500);

// '==' 연산자를 사용하여 x,y를 비교할 수 있으나 "===" 연산자를 사용하면 다른 결과가 나옴.

ex) let x = new Number(500);

let y = new Number(500);

// 객체를 비교할 수 없기에 x==y 연산을 할 수 없어 'false'

*참고로, Number()의 인자로 16진수나 8진수 등은 숫자가 아닌 값으로 처리함

◎Number객체 속성

속성	설명
MAX_VALUE	가장 큰 양의 표현 가능 숫자
MIN_VALUE	가장 적은 양의 표현 가능 숫자
NaN	특별한 "숫자가 아닌" 값
NEGATIVE_INFINITY	음수의 무한대
POSITIVE_INFINITY	무한대

◎Number객체 메서드

메서드	설명
isNaN()	전달된 값이 NaN인지 확인
isFinite()	전달된 값이 유한수인지 확인
isInteger()	전달된 값이 정수인지 확인
toExponential()	지수 형태의 문자열로 반환
toFixed()	고정 소수점 표기법의 문자열로 반환
toPrecision()	고정 소수점 또는 지수 표기법의 문자열로 변환 (전체 자릿수 기준)
~~toSource()~~	~~지정된 Number 객체를 나타내는 객체 리터럴~~(옛날 메서드)
toString()	지정된 진법으로 지정된 객체를 나타내는 문자열
valueOf()	지정된 객체의 프리미티브 값

Number객체 메서드

let x = 123.456;

document.write("<b>x.toExponential(): </b>" + x.toExponential() + "<br>");

document.write("<b>x.toExponential(2): </b>" + x.toExponential(2) + "<br>");

document.write("<b>x.toFixed(): </b>" + x.toFixed() + "<br>");

document.write("<b>x.toFixed(4): </b>" + x.toFixed(4) + "<br>");

document.write("<b>x.toPrecision(): </b>" + x.toPrecision() + "<br>");

document.write("<b>x.toPrecision(): </b>" + x.toPrecision(2) + "<br>");

document.write("<b>x.toPresition(): </b>" + x.toPrecision(5) + "<br>");

</script>

8)내장객체(RegExp)

-정규 표현식은 문자의 패턴을 검색하기 위한 일련의 문자임. 텍스트 검색 및 텍스트 바꾸기 작업에 검색 패턴을 사용할 수 있음. 예를 들어 회원가입의 경우 E-mail 주소를 입력할 때 id@주소와 같은 형식으로 입력하기 위한 문자 패턴을 정의하는데 유용함.

var 변수 = /패턴/플래그; //리터럴방식
var 변수 = new RegExp("패턴", "플래그"); //객체생성방식

*일반적으로 객체의 생성보다는 리터럴 방식의 정규식을 많이 사용함

◎RegExp 메서드

메서드	설명
search()	String 객체의 메서드 항목을 검색하고, 위치를 반환
replace()	String 객체의 메서드 항목을 검색하고, 해당 문자 반환
test()	정규 표현식과 일치한 문자열이 있으면 true 반환
exec()	정규 표현식과 일치하는 문자열 반환
match()	정규 표현식과 일치하는 문자열 반환

RegExp 객체 메서드

◎test(), exec(), match()

-test()와 exec() 메서드는 정규식의 패턴에 대해 문자열을 검색함. 검색 결과에 따라 test()는 ture/false 반환, exec()는 발견된 텍스트 /null 반환. match() 메서드는 exec()와 유사하나 String 객체의 메서드인게 다르고, 인수로 정규 표현식의 패턴이 옴.

플래그	설명
i	대/소문자를 구분하지 않음
g	문자열 내에서 모든 일치 항목을 검색 (배열로 반환)
m	여러 줄의 문자열을 비교함 (각 줄의 시작(^)과 끝($)을 찾을 때)

◎정규식 패턴

패턴	설명
abc	abc문자열을 검색함
[abc]	a,b,c 중 하나의 문자를 검색함
[^abc]	a,b,c를 제외한 문자 하나를 검색함
[A-Z]	알파벳 대문자를 검색함
a.b	a와 b사이에 임의의 한 문자가 있을 경우를 찾음
[0-9]	0~9까지의 숫자를 검색함
n+	1회 이상 반복 bo+: "bo", "boo" 등과 일치, "b"는 불일치
n*	0회 이상 반복 bo*는 "b", "bo", "boo" 등과 일치
n?	?: 0회 또는 1회 반복 bo?는 "b" 또는 "bo"와 일치
\w	단어 문자와 일치(알파벳, 숫자, 밑줄 포함)
\W	단어 문자가 아닌 문자와 일치(공백이나 구두점)
\d	숫자를 검색
\D	숫자 제외하고 검색
\s	하나의 공백 검색
\S	공백 제외하고 검색
^	행의 첫 문자가 일치해야함 ^Hello는 "Hello"로 시작하는 문자열과 일치
$	행의 끝 문자가 일치해야함 world$는 "world"로 끝나는 문자열과 일치
{}	숫자의 갯수 지정 가능 /\d{3}/은 숫자 3개(3자리수)를 의미
a\|b	a혹은 b를 검색함
(abc)	그룹화를 의미 (abc)+는 "abc", "abcabc" 등과 일치

'웹프로그래밍 > JavaScript' 카테고리의 다른 글

프로그래밍 언어 응용 32일차 (24/12/24) (0)	2024.12.24
프로그래밍 언어 응용 31일차 (24/12/23) (0)	2024.12.23
프로그래밍 언어 응용 29일차 (24/12/19) (4)	2024.12.19
프로그래밍 언어 응용 28일차 (24/12/18) (0)	2024.12.18
프로그래밍 언어 응용 27일차 (24/12/17) (0)	2024.12.17

현재글프로그래밍 언어 응용 30일차 (24/12/20)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그