잡담
작심삼일이라 했던가.. 몇일 올리고 또 쉬었습니다. 수업은 계속 듣는데 홈페이지 정리하는건 힘든 과정인거같아요, 매일 꾸준히 올리시는분들 대단하다고 느낍니다.
못올리는동안 정보처리기사필기도 한번에 합격했습니다. 그래도 앞으로 가고 있는거 같습니다....
내장 객체 자바스크립트에는 여러 내장 객체들이 있습니다. 이러한 내장 객체들은 JavaScript 언어 자체에 내장되어 있어서 추가적인 설치나 설정 없이 사용할 수 있습니다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있습니다
Object : 자바스크립트의 모든 객체는 Object의 인스턴스입니다. 객체를 생성하거나 프로퍼티와 메서드를 추가하고 수정하는 데 사용됩니다.Array : 배열을 생성하고 조작하는 데 사용됩니다. 요소들을 추가, 제거, 정렬하거나 배열을 반복하는 등의 기능을 제공합니다.String : 문자열을 생성하고 조작하는 데 사용됩니다. 문자열 길이, 검색, 분할 등의 기능을 제공합니다.Number : 숫자를 생성하고 조작하는 데 사용됩니다. 숫자의 형태를 변환하거나 수학 연산을 수행하는 등의 기능을 제공합니다.Boolean : true 또는 false 값을 나타내는 객체입니다. 주어진 조건이 참인지 거짓인지 판별하는 데 사용됩니다.Function : 함수를 생성하고 조작하는 데 사용됩니다. 코드를 그룹화하고 재사용 가능한 블록으로 만들 수 있습니다.Date : 날짜와 시간을 나타내는 객체입니다. 날짜 및 시간을 생성하고 조작하는 데 사용됩니다.RegExp : 정규 표현식 객체입니다. 문자열에서 패턴을 검색하고 매치하는 데 사용됩니다.
이 외에도 Math, JSON 등 다양한 내장 객체들이 있습니다. 각각의 내장 객체는 특정한 목적에 따라 사용되며, JavaScript 프로그래밍에서 매우 중요한 역할을 합니다.
Math 내장 객체
result = Math . max ( 10 , 20 , 30 ) //maximum-최대의
document . write ( result , "<br>" ); //30
result = Math . min ( 10 , 20 , 30 ); //minimum-최소의
document . write ( result , "<br>" ); //10
result = Math . abs (- 10 );
document . write ( result , "<br>" ); //10
result = Math . pow ( 2 , 10 ); //power-제곱
document . write ( result , "<br>" ); //1024
Array 내장 객체 배열(Array)은 자바스크립트에서 가장 일반적으로 사용되는 내장 객체 중 하나입니다. 배열은 동적으로 크기가 조정될 수 있는 순서가 있는 요소들의 집합입니다. JavaScript 배열은 다양한 데이터 유형을 포함할 수 있으며, 각 요소에는 인덱스를 사용하여 접근할 수 있습니다.
아래는 배열을 다루는 주요 메서드들입니다.
let myArray = []; // 빈 배열 생성
let myArray2 = [ 1 , 2 , 3 ]; // 요소를 포함한 배열 생성
myArray . push ( 4 ); // 배열의 끝에 요소 추가
myArray . pop (); // 배열의 끝 요소 제거
myArray . unshift ( 0 ); // 배열의 앞에 요소 추가
myArray . shift (); // 배열의 첫 번째 요소 제거
myArray . length ; // 배열의 길이 반환
myArray [ index ]; // 특정 인덱스의 요소에 접근
myArray . forEach ( function ( item , index ) {
console . log ( item ); // 배열의 각 요소에 대해 함수 실행
});
myArray . map ( function ( item ) {
return item * 2 ; // 배열 요소에 함수 적용 후 새로운 배열 반환
});
let newArray = myArray . concat ([ 4 , 5 , 6 ]); // 다른 배열과 결합하여 새로운 배열 생성
myArray . sort (); // 배열을 정렬하여 변경
let filteredArray = myArray . filter ( function ( item ) {
return item > 2 ; // 특정 조건을 만족하는 요소들로 새로운 배열 생성
});
Array sllice 예제
//Array
var arr1 =[ 10 , 20 , 30 ];
var arr2 = new Array ( 3 );
arr2 [ 0 ]= 10 ;
arr2 [ 1 ]= 20 ;
arr2 [ 2 ]= 30 ;
var result = arr1 . slice ( 2 ); //1개만 준다?
//시작인덱스값만 준다. 2번재 이상부터 ~끝까지.
document . write ( result , "<br>" ); //[30,40,50]
result = arr1 . slice ( 2 , 4 ); //2개면?, 시작인덱스, 끝인덱스
document . write ( result , "<br>" ); //[30,40]
//시작인덱스 이상 부터, 끝인덱스 미만까지.
Number 내장 객체 JavaScript에서 Number 내장 객체는 숫자와 관련된 작업을 수행하는 데 사용됩니다. Number 객체는 숫자 값을 생성하고 조작하는 데 사용됩니다. 아래는 Number 객체의 주요 기능과 사용 예시입니다.
let num = new Number ( 42 ); // Number 객체 생성
num . toString (); // 숫자를 문자열로 변환
num . toFixed ( 2 ); // 소수점 이하 자릿수를 지정하여 문자열로 반환
isNaN ( num ); // NaN(Not a Number) 여부 확인
isFinite ( num ); // 유한한 숫자 여부 확인
parseInt ( "10" ); // 문자열을 정수로 변환
parseFloat ( "3.14" ); // 문자열을 부동 소수점 숫자로 변환
Number . MAX_VALUE ; // JavaScript에서 표현 가능한 최대 숫자 값
Number . MIN_VALUE ; // JavaScript에서 표현 가능한 최소 양수 숫자 값
Number . POSITIVE_INFINITY ; // 양의 무한대
Number . NEGATIVE_INFINITY ; // 음의 무한대
Number . NaN ; // 숫자가 아님(Not a Number)
Number . isNaN ( num ); // NaN 여부를 확인
Number . isInteger ( num ); // 정수 여부를 확인
Math . abs ( num ); // 절대값 반환
Math . sqrt ( num ); // 제곱근 반환
Math . pow ( num , exponent ); // 거듭제곱 계산
Math . sin ( num ); // 사인 값 반환
Math . cos ( num ); // 코사인 값 반환
Math . min ( num1 , num2 , ...); // 주어진 숫자 중 최소값 반환
Math . max ( num1 , n um2 , ...); // 주어진 숫자 중 최대값 반환
Number 예제
toString
var num1 = 10 ;
var num2 = new Number ( 10 );
var result = num1 . toString ();
document . write ( typeof ( num1 ), "<br>" ); //number
document . write ( typeof ( result ), "<br>" ); //string
toFixed
var num1 = 3.141592 ;
//toFiexd는 소수점 고정해서 출력
var result1 = num1 . toFixed ( 2 ); //2째자리까지 표현 + 3째 자리에서 반올림
var result2 = num1 . toFixed ( 4 ); //4째자리까지 표현 + 5째 자리에서 반올림
document . write ( result1 , "<br>" ); //3.141 -> 3.141
document . write ( result2 , "<br>" ); //3.14159 -> 3.1416
fix <-> float
String 내장 객체 JavaScript에서 String 내장 객체는 텍스트 데이터를 다루는 데 사용됩니다. 아래는 String 객체의 주요 기능과 사용 예시입니다
let str = new String ( "Hello" ); // String 객체 생성
let str2 = "Hello" ; // 문자열 리터럴
str . length ; // 문자열의 길이 반환
str . charAt ( 0 ); // 주어진 인덱스의 문자 반환
str [ 0 ]; // 배열처럼 인덱스로 문자에 접근
str . substring ( startIndex , endIndex ); // 시작 인덱스부터 끝 인덱스 전까지의 부분 문자열 반환
str . slice ( startIndex , endIndex ); // 시작 인덱스부터 끝 인덱스 전까지의 부분 문자열 반환
str . indexOf ( "lo" ); // 문자열에서 특정 문자열의 인덱스 반환
str . lastIndexOf ( "l" ); // 문자열에서 특정 문자열의 마지막 인덱스 반환
str . indexOf ( "lo" ); // 문자열에서 특정 문자열의 인덱스 반환
str . lastIndexOf ( "l" ); // 문자열에서 특정 문자열의 마지막 인덱스 반환
str . toUpperCase (); // 문자열을 대문자로 변환
str . toLowerCase (); // 문자열을 소문자로 변환
str . replace ( "Hello" , "Hi" ); // 문자열에서 특정 부분 문자열을 다른 문자열로 치환
str . split ( " " ); // 문자열을 주어진 구분자로 분할하여 배열 반환
str . concat ( " " , "World" ); // 문자열을 다른 문자열과 결합
str . trim (); // 문자열의 앞뒤 공백 제거
String 예제
charAt
var str1 = "Hello JavaScript!" ;
var str2 = new String ( "Hello JavaScript!" );
var idx = str1 . charAt ( 6 ); //특정 index번호 위치와 문자
document . write ( idx , "<br>" ); //J
indexOf
var str1 = "Hello JavaScript!" ;
var str2 = new String ( "Hello JavaScript!" );
var idx = str1 . indexOf ( "J" ); //문자의 인덱스 반환
document . write ( idx , "<br>" ); //6
length
var str1 = "Hello JavaScript!" ;
var str2 = new String ( "Hello JavaScript!" );
var len = str1 . length ;
document . write ( len , "<br>" ); //17
trim
var str3 = " hello "
var result = str3 . trim ();
document . write ( str3 , "<br>" ); // " hello "
document . write ( result , "<br>" ); // "hello"
split
//split-분리하다.
var str1 = "Hello JavaScript World" ;
var result = str1 . split ( " " );
console . log ( result )
var str1 = "Hello JavaScript-World" ;
var result2 = str1 . split ( "-" );
console . log ( result2 )
split console.log
Date 내장객체 JavaScript에서 Date 내장 객체는 날짜와 시간을 다루는 데 사용됩니다. Date 객체는 현재 시간을 기반으로 한 날짜 및 시간 정보를 제공하며, 특정 날짜 및 시간에 대한 조작도 가능합니다. 아래는 Date 객체의 주요 기능과 사용 예시입니다
Date 예제
//Date객체
var date = new Date ();
date . getFullYear ();
var year = date . getFullYear ();
var month = date . getMonth ()+ 1 ;
var day = date . getDate ();
var hour = date . getHours ();
var min = date . getMinutes ();
var sec = date . getSeconds ();
if ( month < 10 ){
month = "0" + month ;
}
if ( day < 10 ){
day = "0" + day ;
}
if ( hour < 10 ){
hour = "0" + hour ;
}
if ( min < 10 ){
min = "0" + min ;
}
if ( sec < 10 ){
sec = "0" + sec ;
}
var format1 = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec ;
var format2 = ` ${ year } - ${ month } - ${ day } ${ hour } : ${ min } : ${ sec } ` ;
위에 알고리즘을 간단하게 라이브러리를 이용해서 작성할 수 있다. Moment.js 사용 https://momentjs.com/
Moment.js | Home
Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"
momentjs.com
메인페이지에서 다운로드를 찾아 moment.js를 다운로드해준다. 메인 페이지 아래에 있는 다운로드
Ctrl + s 를 통해 다른 이름으로 저장해준다. (확장자명은 .js)
Moment.js
라이브러리를 스크립트로 불러와 사용해주면 간단한 코딩으로 만들 수 있다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< script src = "./moment.js" ></ script >
< script >
var date = moment ()
console . log ( date . format ( "YYYY-MM-DD hh:mm:ss" ))
</ script >
</ head >
< body >
</ body >
</ html >
수정된 부분
<script src="./moment.js"></script>
다양한 활용방법
사용자 정의 객체 사용자 정의객체에 대해 자세히 알고 싶다면?
https://developer.mozilla.org/ko/docs/learn/JavaScript/Objects/Basics
JavaScript 객체 기본 - Web 개발 학습하기 | MDN
이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는
developer.mozilla.org
사용자 정의 객체(또는 사용자 정의 클래스)는 JavaScript에서 사용자가 직접 정의하여 만든 객체입니다. 이러한 객체를 사용하면 개발자가 자신만의 데이터 구조를 만들고 메서드를 정의하여 특정 기능을 수행할 수 있습니다.
아래는 JavaScript에서 사용자 정의 객체를 만드는 간단한 예시입니다.
// 사용자 정의 객체 생성
function Person ( name , age ) {
this . name = name ;
this . age = age ;
}
// 메서드 추가
Person . prototype . sayHello = function () {
console . log ( "Hello, my name is " + this . name + " and I'm " + this . age + " years old." );
};
// 객체 생성
let person1 = new Person ( "Alice" , 30 );
let person2 = new Person ( "Bob" , 25 );
// 메서드 호출
person1 . sayHello (); // 출력: Hello, my name is Alice and I'm 30 years old.
person2 . sayHello (); // 출력: Hello, my name is Bob and I'm 25 years old.
위 예시에서 Person 함수는 사용자 정의 객체를 생성하는 생성자 함수입니다. name과 age라는 속성을 가지고 있습니다. sayHello 메서드는 Person의 프로토타입에 추가되어 있으며, 이를 통해 Person 객체들이 공유할 수 있습니다.
사용자 정의 객체를 만들 때에는 생성자 함수와 프로토타입을 사용하여 메서드를 추가하는 방식이 일반적으로 사용됩니다. 이를 통해 코드의 재사용성과 유지 보수성이 향상됩니다. 사용자 정의 객체를 활용하여 자신만의 데이터 구조와 기능을 만들어 사용할 수 있습니다.
사용자 정의 객체 예제
//사용자 정의 객체
//사용자가 만드는 객체
//객체 리터럴 방식, lietral
const person = {
name : 'kim' ,
age : 20 ,
height : 176.6 ,
introduce : function (){
document . write ( "이름: " + this . name , "<br>" );
document . write ( "나이: " + this . age , "<br>" );
document . write ( "신장: " + this . height , "<br>" );
}
}
person . introduce (); //내장메서드 introduce 호출
document . write ( person . name , "<br>" );
document . write ( person . age , "<br>" );
document . write ( person . height , "<br>" );
이름: kim
비슷한 방식으로
//객체 리터럴 방식, lietral
const person = new Object ();
person . name = 'kim' ;
person . age = 20 ;
person . height = 176.6 ;
person . introduce = function (){
document . write ( "이름: " + this . name , "<br>" );
document . write ( "나이: " + this . age , "<br>" );
document . write ( "신장: " + this . height , "<br>" );
}
person . introduce ();
이름: kim
