2022.01.12 - 바닐라javascript - 반복문, OOP, DOM

1. 반복문

//삼항연산자 (조건)? 성립할때 : 성립안할때;
num>10 ? console.log(true) : console.log(false);

forEach, map, filter, redue 메서드 ( 반복문 손 쉽게 구현 가능 )

[ forEach ]

const coronaCases = [ //배열
    {city:'seoul',case: 1000},
    {city:'Daejeon',case: 500},
    {city:'Daegu',case: 300},
    {city:'Busan',case: 100},
    {city:'Gwangju',case: 50},
]

coronaCases.forEach( function(corona){
console.log(corona)
}) // corona의 모든 배열값 출력

coronaCases.forEach( function(corona){
console.log(corona.case)

}) //case의 값만 출력

coronaCases.forEach( function(corona,index){
console.log(index)
}) //index의 값만 출력

[ map ] : 어떠한 배열을 가공하여 새로운 형태의 배열을 만들때 사용
const coronaCities = coronaCases.map((corona)=>{
//console.log(corona)
return `${corona.city}의 확진자 발생 수는 ${corona.case}`;
})
console.log(coronaCities)

[ filter ] : 배열에서 특정한 값을 가진 데이터를 필터링 할때 사용
const dangerousCity = coronaCases.filter(function(corona,index){
return corona.case > 300; //300명 이상이면 위험한 도시임을 표시하기 위해 필터
})
console.log(dangerousCity)

[ reduce ] : 배열의 값을 이용하여 특정값을 도출하거나 재가공할때 사용 (반복문)
// acc : 지금까지 쌓여있는 값 (배열 10~55까지의 총 합)
// cur : 현재의 값

// 새로운 배열 선언
const numbers = [10, 123, 22, 33, 44, 55];
const totalNumber = numbers.reduce((acc, cur)=>{
    //1번 반복 : 10 + 123
    //2번 반복 : 133(acc) + 22(cur)
    //3번 반복 : 144 + 33 ...
   console.log(acc,cur);
   return acc+cur;
})
console.log(totalNumber)

object 도출

const totalCases = coronaCases.reduce((acc, cur)=>{
//object로 이루어진 배열의 프로퍼티의 숫자를 구하고 싶을땐 초기 값을 설정해줘야한다. (,0)
return acc+cur.case;
},0)
console.log(totalCases)

===> 1950

2. OOP (객체지향프로그램)

자바스크립트 -> 멀티패러다임 언어. 함수형코드, 객체지향코드 둘다 가능함.

function Song(singer, title, release){
    // 함수안에서 사용이 된 인자들을 프로퍼티로 사용하기 위해서는 연결작업이 필요
    //this는 객체를 바라보기를 원하면서 사용한다.
    this.singer = singer;
    this.title = title;
    this.release = new Date(release);

    console.log(this);

}// new 키워드를 통해 객체를 인스턴스화 시킨다.
// 인스턴스화 : 클래스 내의 객체에 대해 특정한 변형을 정의하고, 이름을 붙인 다음,
// 그것을 물리적인 어떤 장소에 위치시키는 등의 작업을 통해, 인스턴스를 만드는 것을 의미

const song1 = new Song("새소년","파도","2017-09-26");
const song2 = new Song("EMINEM","Love Yourself","2005-01-01");
console.log(song1,song2);

console.log(song1.release.getDate());

==>song1의 날짜가 나옴

console.log(song1.release.getDay());

==>song1의 요일이 나옴 (1->월)

1) 함수를 넣어 메서드 제작

this.getInfo = function(){ //함수를 넣어 메서드를 만든다
        //song1에 getReleaseDay를 넣어 호출을 하면
        //return으로 반환을 해주는 메서드를 만든다.

        return `이 노래는 ${singer}의 노래이고, 제목은 ${this.title}입니다.`
    }

console.log(song1.getInfo())

getInfo라는 메서드 호출..

==> 이 노래는 새소년의 노래이고, 제목은 파도입니다.

//메서드를 외부에서 새롭게 프로토타입으로 추가 가능

[Prototype]]: Object
constructor: ƒ Song(singer, title, release)

Song.prototype.getInfo = function(){
return `이 노래는 ${singer}의 노래이고, 제목은 ${this.title}입니다.`
}

2) 함수가 아닌 class로 선언

class Song {
    constructor(singer,title,release){
        this.singer = singer;
        this.title = title;
        this.release = new Date(release);
    }
    getInfo(){
        return this.release.getInfo();
    }
}

console.log(song1,song2)

1)과 2)는 모양만 다를 뿐, 기능은 동일함.

이것을 Syntactic sugar라고 부른다. 각자 편리한 방법으로 작성하면 됨.

3. DOM

DOM (Document Object Model)

화면에서 보고있는 것들을 object model 형태로 제어를 하고 다양한 interactive한 효과를 입힐 수 있는 것을 말한다.

인터랙티브 : 사람들로부터 입력을 받는 것을 말한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>javascript</h1>
    <p id="title">DOM</p>
    <button id="btn">버튼생성</button>
     <ul class ="list">
         <!-- li.item*4 엔터 누르면 네 줄 복사됨!!-->
         <li class="item">짜장면 </li>
         <li class="item">탕수육</li>
         <li class="item">짬뽕</li>
         <li class="item">볶음밥</li>
     </ul>
      <a class="naver" href="http://www.naver.com">NAVER로 이동</a>

    <script src="main.js"></script>
</body>
</html>

const title = document.getElementById("title");

//document안에 들어있는 것들 중에
//이 요소들 중에 id로 선택을 하겠다. getElementById

title.style.color = "red"

==> title 색 변경

//dom 주의사항 순차적으로 랜더링하기때문에 script를 헤드에 작성하면 안된다.
//script는 마지막에 불러와짐

//querySelector("선택자") :object형태로 반환됨 (단위 선택)

const title = document.querySelector("#title");
const list = document.querySelector(".list");
const items = document.querySelectorAll(".item");

const btn = document.querySelector("#btn");title.innerHTML = "<input type='text'/>"

=> title이라는 dom안에 html을 삽입시키는 것 (입력창이 삽입됨)

innerText는 텍스트가 그대로 삽입된다.

list.remove() ==> list 전체 삭제됨.

list.firstElementChild.remove() ==> 짜장면만 삭제됨.

btn.addEventListener("행위","작동")

btn.addEventListener("click",function(){
alert("탕수육");
})

id가 btn인 버튼을 누르면 알림창에 탕수육이 뜬다.

naver.addEventListener("click", (e)=>{
    e.preventDefault();
    //이벤트가 작동하지않도록 한다.
    //버튼을 누르면 alert은 뜨지만, 네이버로 이동은 작동하지않는다.
    console.log(e)
    alert("네이버!!")
})

[ 1월13일(목) 예정 ]

1. HTTP API

2. 실습( TODO-HTML )

3. 실습 ( TODO-CSS )

'공부 > javascript' 카테고리의 다른 글

2022.02.12 - 약관동의 js, jquery (0)	2022.02.12
2022.01.29 - 스타벅스 사이트 만들기 (1) 헤더 (0)	2022.01.29
2022.01.29 - javascript (1) (0)	2022.01.29
2022.01.15 - 바닐라javascript - 실습예제 TODO list (0)	2022.01.15
2021.11.17 - 국비수업 17일차 / javascript (0)	2021.11.17

문과생의 컴공 정복기☀︎

2022.01.12 - 바닐라javascript - 반복문, OOP, DOM

'공부 > javascript' 카테고리의 다른 글

티스토리툴바

2022.01.12 - 바닐라javascript - 반복문, OOP, DOM

'공부 > javascript' 카테고리의 다른 글

관련글

티스토리툴바