JavaScript : 객체 생성 방법, object, array, if 구문

ㆍStudy/JavaScript

2022.11.28.

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 52



Review


 

 

 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 52

 

 

 

 

 

 

 

 

 

 

 

 

<object 알아보기>

 

 

- JavaScript

 

    <script>  
    // const person = {first: "Lee", last: "Posey"}
        const person = { 
            firstname: "Lee",
            lastname: "Posey",
            age: 20,
            fullname : function() {
                return this.firstname + " " + this.lastname;
            }
        }

        let firstname = "Lee";
        let lastname = "Posey";
        let age = 20;

        document.write(person.fullname() + "<br>");
        document.write(person.fullname() + "<br>" + "<br>");
        
        const cars = {};
        cars.model = "소형";
        cars.price = 1000000;
        cars.color = "black";

        document.write(cars.model + "<br>");
        document.write(cars.color + "<br>" + "<br>");

        const man = new Object();
        man.firstname = "Lee";
        man.lastname = "SH";
        man.age = 30;

        document.write(man.firstname + " " + man.lastname + "<br>");
        document.write(man.age + "<br>" + "<br>");
    </script>

 

 

 

 

 

<object 알아보기>

 

 

- JavaScript

 

    <script>  
    // 첫 번째 방법;
        let name = "이강인";
        let kor = 80;
        let eng = 90;
        let math = 70;
        let total = kor + eng + math;

        document.write(name + "님의 총점은 " + total + "점입니다." + "<br>" + "<br>");


    // 두 번째 방법;    
        const score = new Object();
        score.name = "손흥민";
        score.kor = 80;
        score.eng = 90;
        score.math = 70;
        score.total = score.kor + score.eng + score.math;

        document.write(score.name + "님의 총점은 " + score.total + "점입니다." + "<br>" + "<br>");


    // 세 번째 방법;
        let student = {name: "조규성", kor: 80, eng: 90, math: 70};
        student.total = student.kor + student.eng + student.math;

        document.write(student.total + "<br>");
        document.write(student.name + "님의 총점은 " + student.total + "점입니다." + "<br>" + "<br>");


	//let 변수 작성 방법 3가지;
    
        let student1 = {
            name: "이강인",
            kor: 100,
            eng: 90,
            math: 70
        };

        let student2 = {};
            student2.name = "손흥민";
            student2.kor = 100;
            student2.eng = 90;
            student2.math = 70;

        let student3 = new Object();
            student3.name = "조규성";
            student3.kor = 100;
            student3.eng = 90;
            student3.math = 70;
            student3.total = student3.kor + student3.eng + student3.math;
            
            student3.fnc = function() {
                document.write(student3.name + "님의 총점은 " + student3.total + "점입니다.");
            }
            student3.fnc();
    </script>

 

 

 

 

 

<array 알아보기>

 

 

- JavaScript

 

    <script>  
        const arr = ["하나", 100, "둘", 200,"하나", 100, "둘", 200,"하나", 100, "둘", 200,"하나", 100, "둘", 1200,"하나", 100, "둘", 1200,"하나", 100, "둘", 2400,"끝"];

        document.write(arr.length + "<br>" + "<br>");
        document.write(arr[15] + "<br>" + "<br>");
        document.write(arr[arr.length - 1] + "<br>" + "<br>")
        // length는 문자열의 길이를 반환하는 속성

        const arr1 = [
            "하나",
            100,
            "둘",
            200,
        ];

        document.write(arr1 + "<br>");
        arr1[4] = "셋";
        document.write(arr1 + "<br>" + "<br>");

        const arr3 = [];
        arr3[0] = "하나";
        arr3[1] = "100";
        arr3[2] = "둘";
        arr3[3] = "200";
        arr3[4] = arr3.length;

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

        const arr4 = new Array(4);
        arr4[0] = "하나";
        arr4[1] = 100;
        arr4[2] = "둘";
        arr4[3] = 200;

        const arr5 = new Array("하나", 100, "둘", 200);
    </script>

 

 

 

 

 

 

<array 예제>

 

 

- JavaScript

 

    <script>  
        const arr = ["Posey", 100, 80, 70];

        arr[4] = arr[1] + arr[2] + arr[3];
        
        document.write(arr[0] + "님의 총점은 " + arr[4] + "점입니다." + "<br>" + "<br>");


        arr[5] = (arr[1] + arr[2] + arr[3]) / 3;

        document.write(arr[0] + "님의 평균은 " + arr[5] + "점입니다." + "<br>" + "<br>");


        arr[6] = function() {
            document.write(arr[0] + "님의 평균은 " + arr[5] + "점입니다." + "<br>" + "<br>");
        }

        arr[6]();


        arr[7] = function() {
            document.write(arr[0] + "님의 총점은 " + arr[4] + "점, 평균은 " + arr[5] + "점입니다." )
        }

        arr[7]();
    </script>

 

 

 

 

 

<array 예제2>

 

 

- JavaScript

 

    <script>  
        const fruits = ["사과 ", " 바나나 ", " 딸기 ", " 망고"];

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

        document.write(fruits.toString() + "<br>" + "<br>");
        // toString은 배열을 문자열로 변환

        document.write(fruits.join("-") + "<br>" + "<br>");

        fruits.pop();
        document.write(fruits + "<br>" + "<br>");
        // pop() 메소드은 배열에서 가장 마지막에 있는 요소를 제거

        fruits.push(" 키위");
        document.write(fruits + "<br>" + "<br>");
        // push() 메소드는 배열에 새 요소를 추가

        fruits.shift();
        document.write(fruits + "<br>" + "<br>");
        // shift() 메소드는 배열의 첫 번째 요소를 제거하고 다른 요소를 왼쪽으로 이동

        fruits.unshift(" 수박 ");
        document.write(fruits + "<br>" + "<br>");
        // unshift() 메소드는 배열의 시작 부분에 새 요소를 추가

        const arr1 = ["하나", " 둘", " 셋"];
        const arr2 = [" one", " two", " three"];

        document.write(arr1.concat(arr2) + "<br>" + "<br>");
        // concat() 메소드는 병합(연결)하여 새 배열을 만듦

        const arr3 = ["하나", " 둘", " 셋"];
        const arr4 = [" one", " two", " three"];
        const arr5 = [" Html", " Css", " Css3"]

        document.write(arr3.concat(arr4, arr5) + "<br>" + "<br>");

        arr5.splice(1, 1, " 레몬", " 오렌지");

        document.write(arr5 + "<br>" + "<br>");
        // splice() 메소드는 배열에 새 항목을 추가하는 데 사용

        document.write(fruits.slice(1, 3) + "<br>" + "<br>");
        // slice() 메소드는 배열의 일부를 새 배열로 분할
        // 0부터 시작, start 지점부터 end 직전까지 잘라서 가져옴
        
        document.write(arr5.sort() + "<br>" + "<br>");
        // sort 메소드는 배열을 알파벳순으로 정렬

        document.write(arr5.reverse() + "<br>" + "<br>");
        // reverse() 메소드는 각 배열 요소에 대해 한 번씩 함수를 (콜백 함수)를 호출. 이 함수는 3개의 인수를 사용 - value(항목 값), index(항목 인덱스), array(배열 자체)
        
        const grade = [" 3학년", " 5학년", " 2학년", " 1학년"," 6학년", " 4학년"]
        
        document.write(grade.sort() + "<br>" + "<br>");
        document.write(grade.sort().reverse()+"<br>");

    </script>

 

 

 

 

 

 

 

 

<array 예제3>

 

 

- JavaScript

 

    <script>  
        const numbers = [45, 4, 9, 16, 25];

        let txt = "";

        numbers.forEach(myFunction);
        /* forEach() 메서드는 각 배열 요소에 대해 한 번씩 함수(콜백 함수)를 호출 */

        document.write(txt);

        function myFunction(value, index, array) {
            //txt += value + "<br>";
            //txt += index + "<br>";
            txt += array + "<br>";
        }

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        const fruits2 = {오전: "바나나", 오후: "사과", 저녁: "망고"};

        document.write(Object.keys(fruits) + "<br>" + "<br>")
        document.write(Object.keys(fruits2) + "<br>" + "<br>")
        /* Object.keys() 메소드는 객체의 키가 있는 Array Iterator(배열 반복자) 객체를 반환 */

        document.write(fruits.indexOf("키위") + "<br>" + "<br>");
        /* indexOf() 메소드는 주어진 값과 일치하는 요소의 index를 반환. 배열 원소의 index는 0부터 시작.
        항목이 두 번 이상 있으면 첫 번째 위치를 반환하고, 항목을 찾을 수 없는 경우 -1을 반환 */

        document.write(fruits.lastIndexOf("Banana") + "<br>" + "<br>");
        /* lastIndexOf() 메소드는 indexOf() 메소드와 달리 뒤에서부터 검색 */

        let fruits3 = fruits instanceof Array;
        let fruits4 = fruits2 instanceof Array;
        /* instanceof 연산자는 객체가 주어진 생성자에 의해 생성된 경우 true를 반환 */
        
        document.write(fruits3 + "<br>" + "<br>")
        document.write(fruits4 + "<br>" + "<br>")
    </script>

 

 

 

 

<if 구문 알아보기>

 

 

- JavaScript

 

    <script>  
        let a = 10;
        let b = 20;

        if(a < b) {
            document.write("참입니다<br>");
        } else {
            document.write("거짓입니다<br>");
        }

        document.write(a > b ? "참<br>" : "거짓<br>");

        if(a < b) document.write("참입니다<br>")
    </script>

 

 

 

 

 

<if 구문 예제>

 

 

- JavaScript

 

    <script>  
        let jbResult = confirm( 'Do you like JavaScript?' );

        if( jbResult ) {
            console.log( jbResult );
            document.write( '당신은 확인 버튼을 눌렀습니다.' );
        } else {
            console.log( jbResult );
            document.write( '당신은 취소 버튼을 눌렀습니다.' );
        }

    </script>

 

0
확인 눌렀을 때

 

0
취소 버튼 눌렀을 때

 

 

 

<if 구문 : 학점 구분하기 예제>

 

- JavaScript

 

    <script>  
        let score = prompt( '점수를 입력하세요.' );
        confirm( "당신이 입력한 점수는 " + score + "점이 맞습니까?" );
        let hakjum;

        if ( score >= 90 ) {
            hakjum = "A"
        } else if ( score >= 80 ) {
            hakjum = "B"
        } else if ( score >= 70 ) {
            hakjum = "C"
        } else if ( score >= 60 ) {
            hakjum = "D"
        } else {
            hakjum = "F"
        }
        document.write( '당신의 학점은 ' + hakjum +  '학점입니다.' );
    </script>

 

0
A학점
0
B학점

 

0
C학점

 

0
D학점

 

0
F학점

 

 

 

 

 

 

<if 구문 : BMI 계산하기 예제>

 

 

- JavaScript

 

    <script>  
        let height = prompt( '당신의 신장(cm)을 입력하세요.' );
        let weight = prompt( '당신의 체중(kg)을 입력하세요.' );

        confirm( "당신이 입력한 신장은 " + height + "cm이고, 체중은 " + weight + "kg이/가 맞습니까?" );

        let bmi = weight / ( (height * height) / 10000);
        let result;

        if ( bmi <= 18.5 ) {
            result = "저체중"
        } else if ( bmi <= 23 ) {
            result = "정상"
        } else if ( bmi <= 25 ) {
            result = "과체중"
        } else if ( bmi <= 30 ) {
            result = "비만"
        } else {
            result = "고도비만"
        }

        document.write( '당신의 신장은 ' + height +  'cm이고, 체중은 ' + weight + 'kg입니다.' + '<br>');
        document.write( '당신의 BMI는 ' + bmi +  ' 입니다.' + '<br>');
        document.write( '즉, 당신은 ' + result +  ' 입니다.');
    </script>

 

 

0
저체중일 때
0
정상일 때

 

0
과체중일 때
0
비만일 때

 

0
고도비만일 때

 

 

 

 

 

* 내용 출처 

: JavaScript / 객체 / 객체 생성하기 – CODING FACTORY,

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성 – CODING FACTORY,

JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기 – CODING FACTORY,

JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성 – CODING FACTORY,

JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성 – CODING FACTORY,

JavaScript / Object / Array.join() / 배열의 원소를 연결하여 하나의 값으로 만들기 – CODING FACTORY,

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() – 일치하는 요소의 위치(인덱스)를 반환하는 메서드 – CODING FACTORY,

JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() – 배열에 원소 추가/제거 하기 – CODING FACTORY,

https://www.codingfactory.net/10440

반응형

'Study > JavaScript' 카테고리의 다른 글

JavaScript : for in 반복문, while 반복문, do while 반복문  (0) 2022.11.30
JavaScript : if 구문, switch 조건문, for 반복문, 구구단 예제  (0) 2022.11.29
JavaScript : 문자열, 비교 연산자 (홀수/짝수/배수 구분), input 태그, Alert, Popup 창 만들기  (0) 2022.11.25
JavaScript : Modal 창 만들기, 할당 연산자, 비교 연산자, 논리연산자, icon 만들기  (0) 2022.11.24
Javascript 입문  (0) 2022.11.23

관련글

댓글 0

티스토리툴바