728x90
반응형
SMALL
 const num = 10; // number 원시타입
        console.log(typeof(num));
        console.log(num.toString());
        console.log(typeof(num.toString()));
        console.log(typeof(num));

        // 지수 표기법(10의 n승으로 표기)
        const x1 = 102;
        console.log(x1.toExponential());
       
        // 반올림하여 문자열로 변환
        const x2 = 1234.12;
        console.log(x2.toFixed());
        console.log(typeof(x2.toFixed));
       
        // 로컬 형식의 문자형으로 변환
        console.log(x2.toLocaleString('ar-EG')); // 아랍어로 바꾼것

        const x3 = 0.1 + 0.2 - 0.2;
        console.log(x3);

        console.log(globalThis); // 환경이 어디서 돌아가고있는지

        const URL = 'https://대한민국.com'
        const encoded = encodeURI(URL);
        console.log(encoded);
        const decoded = decodeURI(encoded);
        console.log(decoded);

        // 모든 문자를 인코딩
        const encodeCom = 'https://대한민국.com';
        console.log(encodeURIComponent(encodeCom));

 

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript - 이벤트(Event)  (0) 2023.04.11
JavaScript - Wrapper Object, URL,URI  (0) 2023.04.11
JavaScript - 클래스 상속 예시  (0) 2023.04.11
JavaScript - 클래스 활용예시  (1) 2023.04.11
JavaScript - 객체 활용법 예시  (0) 2023.04.11
728x90
반응형
SMALL
class Animal{
            constructor (color) {
                this.color = color;
            }
            eat(){
                console.log('먹는다!');
            }
            sleep(){
                console.log('잔다!');
            }
        }
        class Dog extends Animal{
            play(){
                console.log('논다!');
            }
        }
        const Rucy = new Dog('white');
        console.log(Rucy);
        Rucy.eat();
        Rucy.sleep();
        Rucy.play();

        class Cat extends Animal{
            constructor (color, name){
                super(color);
                this.name = name;
            }
            eat(){
                console.log('맛있게 먹는다!');
            }
        }
        const Horang = new Cat('black', '호랑');
        console.log(Horang);
        Horang.eat();
        console.log('---------------------------------------------------');
        // 문제
        // 정직원, 아르바이트를 나타낼수 있는 클래스를 생성
        // FullTimeEmployee, PartTimeEmployee
        // 직원의 정보: 이름, 부서명, 한달 근무시간 (프로퍼티)
        // 급여: 정직원(20000), 알바(10000)
        // 매달 직원들의 정보를 이용해서 한달 급여를 계산하는 메소드를 구현(calculatePay())
        // ex) kim.calculatePay() -> 한달 급여

        // class Employee {
        //     // #name
        //     // #bu
        //     // #time
        //     // #pay
        //     constructor(name, bu, pay, time){
        //         this.name = name;
        //         this.bu = bu;
        //         this.time = time;
        //         this.pay = pay;
        //     }
        //     calculatePay(pay, time){
        //         if (this.time <= 0){
        //             return `급여가 없습니다`
        //         }else{
        //             console.log(this.pay * this.time);
        //         }
        //     }
        // }

        // class FullTimeEmployee extends Employee{
           
        // }
        // class PartTimeEmployee extends Employee{
           
        // }
        // const noname = new FullTimeEmployee('김직원', '인사팀', 20000, 120)
        // const kim = new PartTimeEmployee('김알바', '인사팀', 10000, 80)
        // noname.calculatePay();
        // kim.calculatePay();
        // console.log(noname);
        // console.log(kim);
        console.log('-----------------------');
        console.log('선생님 답안');
        class Employee {
            constructor(name, department, hourPerMonth, payRate) {
                this.name = name;
                this.department = department;
                this.hourPerMonth = hourPerMonth;
                this.payRate = payRate;
            }
            calculatepay(){
                return this.hourPerMonth * this.payRate;
            }
        }

        class FullTimeEmployee extends Employee{
            static PAY_RATE = 20000;
            constructor(name, department, hourPerMonth){
                super(name, department, hourPerMonth, FullTimeEmployee.PAY_RATE)
            }
        }

        class PartTimeEmployee extends Employee{
            static PAY_RATE = 10000;
            constructor(name, department, hourPerMonth){
                super(name, department, hourPerMonth, PartTimeEmployee.PAY_RATE)
            }
        }

        const kim = new FullTimeEmployee('김사과', '개발자', 160);
        const Orange = new PartTimeEmployee('오랜지', '디자이너', 100);
        console.log(kim.calculatepay());
        console.log(Orange.calculatepay());
728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript - Wrapper Object, URL,URI  (0) 2023.04.11
JavaScript - Wrapper  (0) 2023.04.11
JavaScript - 클래스 활용예시  (1) 2023.04.11
JavaScript - 객체 활용법 예시  (0) 2023.04.11
JavaScript - 함수 작성법 예시  (0) 2023.04.11
728x90
반응형
SMALL
// static
        // 정적 프로퍼티 및 메소드를 생성
        // 클래스 레벨 메소드(스테틱을 사용한 메소드)에서는 this를 참조할수 없다.
        // 메모리에 먼저 올라가기 때문에 값을 받아올수가 없음
        class Fruit {
            static count_fruits = 10; // 객체를 생성하지 않아도 메모리에 올라가 있다.

            constructor(name, emogi){
                this.name = name;
                this.emogi = emogi;
            }
            dispaly = () => {
                console.log(`${this.name}: ${this.emogi}`);
            }

            static makeBanana(){
                return new Fruit('banana', '🍌')
            }
        }

        const apple = new Fruit('apple', '🍎')
        const orange = new Fruit('orange', '🍊')
        console.log(apple);
        console.log(apple.name);
        console.log(orange);
        console.log(orange.name);
        console.log(Fruit.count_fruits);
        const banana = Fruit.makeBanana();
        console.log(banana);
        console.log('-----------------------------');

        class Dog{
            #name; // private 해당 속성이 적용된 클래스 외에서는 접근이 불가능함
            #color;
            constructor(name, color){
                this.#name = name;
                this.#color = color;
            }

            // 프로퍼티명과 꼭 일치할 필요는 없음
            set name(value){
                console.log('set', value);
                this.#name = value;
            }

            get name(){
                return `이름: ${this.#name}`;
            }

            run = () => {
                console.log(`${this.#color} 색상의 이로치 ${this.#name}이(가) 달립니다.`);
            }

            #eat = () => {
                console.log(`${this.name}는 먹습니다.`);
            }

            colorEat = () => {
                this.#eat();
            }
        }
       
        const Rucy = new Dog('루시', 'white');
        // Rucy.name = '류씨'; // name이 새로 생성됨
        console.log(Rucy);
        //Private field '#name' must be declared in an enclosing class
        // Rucy.#name = '류씨';
        console.log(Rucy);
        Rucy.name = '피카츄';
        console.log(Rucy);
        console.log(Rucy.name);
        Rucy.run();
        // Rucy.eat();
        Rucy.colorEat();
console.log('------------------------------');
        // 문제 카운터 만들기
        // 카운터를 0으로 값을 초기화 한뒤 하나씩 숫자를 증가할 수 있는 메소드를 구현
        class Counter {
            #value
            constructor(value){
                if(isNaN(value) || value < 0) this.#value = 0;{
                    this.#value = 0;
                }else{
                    this.#value = value;
                }
            }

                get value(){
                    return this.#value;
                }
                increment = () => {
                    this.#value++;
                }

        }
           

        const cnt = new Counter(0);
        cnt.increment(); //1
        cnt.increment(); //2
728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript - Wrapper  (0) 2023.04.11
JavaScript - 클래스 상속 예시  (0) 2023.04.11
JavaScript - 객체 활용법 예시  (0) 2023.04.11
JavaScript - 함수 작성법 예시  (0) 2023.04.11
JavaScript - 정규 표현식  (0) 2023.04.07
728x90
반응형
SMALL

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript - 클래스 상속 예시  (0) 2023.04.11
JavaScript - 클래스 활용예시  (1) 2023.04.11
JavaScript - 함수 작성법 예시  (0) 2023.04.11
JavaScript - 정규 표현식  (0) 2023.04.07
JavaScript - Node  (0) 2023.04.07
728x90
반응형
SMALL

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript - 클래스 활용예시  (1) 2023.04.11
JavaScript - 객체 활용법 예시  (0) 2023.04.11
JavaScript - 정규 표현식  (0) 2023.04.07
JavaScript - Node  (0) 2023.04.07
JavaScript - 문서객체모델  (0) 2023.04.07
728x90
반응형
SMALL

정규 표현식

/   ~   / 시작과 끝
    ^ : 패턴의 시작
    [ ] : 안의 문자를 찾음
    [x-z] : x~z 사이의 문자를 하나를 찾음
    x+ : x가 1번이상 반복
    x$ : 문자열이 x로 끝남
    ^x : 문자열이 x로 시작
    \d : 숫자
    x{n} : x를 n번 반복한 문자를 찾음
    x{n,m} : x를 n번 이상 m번 이하 반복한 문자를 찾음
    mdn 사이트에서 정규표현식을 검색하면 더 많은게 나온다

 

    아이디: [          ]
    * 아이디는 4자리 이상 ,16자리 이하
    * 영문 대문자 또는 소문자로 시작해야 한다

1. 아이디
    - 영문 대문자 또는 소문자로 시작하며, 길이는 4~20자까지 입력 가능
        /^[A-Za-z]{4,20}$/

    이름: [          ]
    * 한글만 사용

2. 이름
    - 한글만 사용
        /[가-힣]+$/           + 는 앞의 조건이 여러번 나와도 상관없다는 뜻
    
    비번: [          ]
    * 비밀번호는 4자리 이상, 16자리 이하
    * 대문자, 소문자, 숫자, 특수문자 1개 이상 포함

3. 비번

/^[A-Za-z0-9\-\.]{4,20}$/




4. 휴대폰 번호
    - 앞번호는 3글자, - , 중간번호는 3글자 또는 4글자, - ,마지막 번호는 4글자
    - 010-1111-1111 or 010-111-1111 꼴로
    /^\d{3}-\d{3,4}-\d{4}$/

5. 이메일
    - 영문 대문자 또는 소문자 또는 숫자로 시작
    - @포함 .포함
    /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.[A-Za-z0-9\-\.]+$/         \- 는 특수문자도 포함 \. 는 점도 포함


자바 스크립트 정규 표현식 적용 함수

test(): 정규 표현식에 대입한 문자열이 적합하면 true 아니면 false를 리턴

 

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript - 객체 활용법 예시  (0) 2023.04.11
JavaScript - 함수 작성법 예시  (0) 2023.04.11
JavaScript - Node  (0) 2023.04.07
JavaScript - 문서객체모델  (0) 2023.04.07
JavaScript - Location, History, Navigator 객체  (0) 2023.04.07

+ Recent posts

티스토리툴바