버블소트 / DOM구조

2022 / 8 / 16 화 

 

• 버블소트
• DOM구조
• 프로젝트 계획

---

✔ 버블소트

배열을 오름차순, 내림차순으로 정렬해 보자.

        // asc = ture : 오름차순 , asc = false : 내림차순

        

        const bubblesort = function(asc, ...ar)

        {

            let arr;

            let temp = 0;

 

           // 1. type1이 오던 type2이 오던 type1로 맞추자.

           console.log(typeof(ar[0]));

 

           // 배열의 0번째가 넘버라면 ar값을 arr에 넣어라

           // 근데  배열안의 배열이기에 [44,33,22,55,11]이 0번째값이 됨

           if (typeof(ar[0]) === 'number')

           {

                arr = ar; // arr에 [44,33,22,55,11] 이값을 넣어라

           }

           else if

           {

                arr = ar[0]; // arr[44,33,22,55,11] 이값의 0번째 값인 44를 넣어라

           }

 

           //arr로 버블소트를 진행

           for ( let i = 0; i < arr.length -1; i++)

           {

                for(let k = 0; k < arr.length -1 - i; k++)

                {

                    if( asc === true)

                    {

                        if (arr[k] > arr[k + 1])

                        {

                            tamp = arr[k];

                            arr[k] = arr[k + 1];

                            arr[k + 1] = tamp;

                        }

                    }

                    else // false인경우 아래 코드 실행

                    {

                        if (arr[k] < arr[k + 1])

                        {

                            tamp = arr[k];

                            arr[k] = arr[k + 1];

                            arr[k + 1] = tamp;

                        }

                    }

                }

           }

           // 이 리턴은 for문의 arr값이 아님 스택에 위치하고있는 arr값을 리턴시키는것임

            return arr;

        };

 

        console.log(bubblesort(true, [44,33,22,55,11])); // type1 // false를 쓰면 내림차순으로 적용된다.

        //bubblesort([44,33,22,55,11]); // type2

🔨 가변파라미터 

        let a = [1,2,3,4] ;

        let b = [[1,2,3,4]] ;

        let c = b[0] ;

 

        b[0][1] = 77 ;

 

        console.log(c[1]) ;

가변파라미터? 

- 파라미터를 한 번에 배열로 만들어준다. (...a)

 

메모리 블럭 

---

✔ DOM

문서 객체 속성

        // getAttribute 1

        // 1. dom 객체를 가지고온다.

        const h1Elem = document.querySelector('.title');

 

        console.log(h1Elem);

        // 2. 가지고온 객체의 속성을 알아낸다.

        let styleAttr = h1Elem.getAttribute('style');

       

        // 3. 새로운 속성을 추가한다.

        styleAttr += 'border:1px solid red;'

        console.log(styleAttr);

       

        // 4. 속성을 적용한다.

        h1Elem.setAttribute('style', styleAttr);

 

        // --------------------------------------------------

        // setAttribute 2

        // 1. dom 객체를 가지고온다.

        const imgElem = document.querySelector('img');

 

        // 2. 객체에 속성을 설정한다.

        const imgsrc = 'https://placekitten.com/200/200';

        imgElem.setAttribute('src', imgsrc);

---

✔ 웹사이트 제작 프로젝트 기획안 작성

- 프로젝트를 어떻게 만들 것이다 라는 계획을 담은 문서를 작성하자.

 

왜 작성하는가?

1. 길을 헤매지 않기 위해서
2. 프로젝트의 통찰력을 제공.
- 자기 생각의 오류 - 그때 그때 땜빵식?으로 진행될 수도
- 좀 더 발전된 아이디어 - 지금 구현할 내용도 점차 축소
3. 리소스(일정, 노력)를 예측해볼 수 있음. 
--------------------------------------------------------
1. 사이트(프로젝트)의 목적
2. 기능
3. 구조
4. 사용법
5. 기술요소 
6. 의견