2023년 05월 19일 수업 내용

<자바 스크립트> 

//JS 객체 생성 방법

//1)

//2)

//3)

//4) ES6 Class 기반 객체 생성 방식

class chart {

    // 멤버 변수

   

    // 생성자

    constructor(width,height){

        this.width = width;

        this.height = height;

    }

    // 메소드

    drawline(){

    console.log("draw line");

}

}

const mychart = new chart(100,100);

mychart.drawline();

 

 //1) 객체 리터별 방식 {}  :  값을 넣어 주는 방식 제일 중요함!

 // JS - 프로퍼티 키(key), 프로퍼티 값(value)

 // java -필드(멤버변수),메서드(멤버함수)

 // python - 속성(attribute,변수), 메소드

 // CSS - 속성(property), 값

 // HTML - 속성(attribute), 값

const user = {

    //속성

    name: "Arnie",

    age : 30,

    //메소드

    getData: function(){  //유형1

        return 1 + 2;

    },

    getName(){ //유형2

        console.log(this.name);

    }

}

console.log(typeof user); // object

//객체 프로퍼티 값 가져오기

console.log(user.name);

console.log(user.age);

console.log(user.getData());

//빈 객체 선언 후, 프로퍼티와 메소드 추가

const emptyobj = {};

emptyobj.name = "Aleyna";

emptyobj.age = "25";

emptyobj.getData = function(){

    return 4 * 100;

}

console.log(emptyobj);

console.log(typeof emptyobt);

console.log(emptyobj.name, emptyobj.age,emptyobj.getData());

 

// 객체 안에 객체 생성 가능

let user ={

    name: "Rose",

    age: 20,

    getData: function(){

        return "사용자";

    },

    details:{

        hobby: 'coding',

        majar: 'security',

        getName: function(name){

            return name;

        }

    }

}

console.log(user);

console.log(user.name,user.age,user.getData());

console.log(user.details);

console.log(user.details.hobby);

console.log(user.details.getName('Jake'));

// 객체 리터럴과 this 키워드(1)

let user = {

    name: "John",

    age: 40,

    details: {

        hobby: 'swimming',

        major: 'law',

        getHobby: function(){

            return this.hobby;

        }

    }

}

console.group(user.details.getHobby());

 

 

// 객체 리터럴과 this 키워드(2)

let user = {

    firstName: "Mike",

    lastName: "Jagger",

    age: 40,

    details: {

        hobby: 'swimming',

        major: 'law',

        getHobby: function(){

            return this.hobby;

        }

    }

}

console.group(user.details.getHobby());

console.log(user.firstName);

console.log(user['firstName']);

console.log(user['first + Name']);

 

- 어제 내용해서 플러스 한 내용임

// for-of

// 배열(Array),string,map 등 iterable(반복 가능한) 객체에서 사용가능한 반복문

const brands = ["애플","구글","페이스북","아마존","삼성전자"];

for (let brand of brands){

    console.log(brand);

}

let language = "Javascript"

for(let c of language){

    console.log(c);

}

let user = {

    firstName: "Mike",

    lastName:"Jagger",

    age: 40

}

// for(let p of user){

//     // object는 iterable 하지 않기 때문에 for-of 사용 x

// }

 

- for in 방식 설명

// for-in

// 배열,객체(object)에 사용할 수 있는 반복문

const brands = ["애플","구글","페이스북","아마존","삼성전자"];

for(let brand in brands){

    console.log(brand);

}

const person = {

    firstName: "jinsu",

    lastNmae:"park",

    age: 30

}

for(let key in person){

    console.log(key);

    console.log(person[key]);

}

- for문의 기본 구조~  ( 여기서 핵심은 for each)

 

// for문의 기본 구조

// forEach( 메서드)

// 반환값이 없다. 단순 for문과 같이 작동한다.

const numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

 

console.log(numbers[0]);

console.log(numbers[1]);

console.log(numbers[2]);

console.log(numbers[3]);

console.log(numbers[4]);

console.log(numbers);

for(let i = 0; i<numbers.length; i++){  // 개수 모르면 length로 해주면 됨!

    console.log(numbers[i]);

}

// function print(element){

//     console.log(element);

//    };

//    numbers.forEach(print);

numbers.forEach(function(el){

 console.log(el);

});

 

 

 

numbers.forEach(function(el){   // 2의 배수 만들

if (el%2 == 0){

    console.log(el);

}

})

 

 

 

const movies = [

   {

      title:'Amadeus',

      score: 99

   

   },

   {

    title:'Alien',

    score: 99

 

 },

 {

    title:'SquidGame',

    score: 99

 

 },

 {

    title:'Stand By Me',

    score: 99

 

 },

   

]

 movies.forEach(function(movie){

    console.log(movie);

}

)

- map() 이라는 함수의 기능 정리 

// map()

// 반환값을 배열에 담아 반환한다.

// map() 에는 return문이 무조건 있어야함

// 새로운 배열이 만들어짐

const numbers =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

console.log(numbers);

const doubles = numbers.map(function (num){

  return num * 2;

});

console.log(doubles);

const movies = [

    {

       title:'Amadeus',

       score: 99

     

    },

    {

     title:'Alien',

     score: 99

   

  },

  {

     title:'SquidGame',

     score: 99

   

  },

  {

     title:'Stand By Me',

     score: 99

   

  },

 

   

 

 ]

 const titles = movies.map(function(movie){

    return movie.title;

 });

 console.log(titles);

- 화살표 함수!

// 화살표 함수(arrow,function)

//() => {} vs. function (){}

const double = function(x){ // 익명 함수(함수 표현식)

    return x * 2;

}

console.log(`double:`,double(7));

const arrow = (x) => {

    console.log(`arrow 복문 실행문`)

    return x * 2;

}

console.log(`arrow`,arrow(7));

const arrow2 = (x) => x * 2; // 블록 안 실행문이 1개일때 return 생략 가능

console.log(`arrow2`,arrow2(7));

const arrow3 = x => x * 2;

console.log(`arrow3:`,arrow3(7));

const arrow4 = x => { return x * 2;}

console.log(`arrow4`,arrow4(7));

// null, undefined 배열, 객체 다 올수 있음

const arrow5 = x => 1234;

console.log(`arrow5`,arrow5(7));

const arrow6 = x => {

    return {name:`Arnie`}

}

console.log(`arrow6`,arrow6(7));

//객체 데이터는 화살표 함수의 중괄호와 같으므로 그냥은 인식이 안됨

//객체 데이터를 반환할 때는 소괄호()로 감싸줘야 함 (return 문 없는 경우)

const objVal = x => ({

    name: 'Arnie'

})

console.log('objVal', objVal());

 

 

- 필터 함수! (잘못 적은 부분이 있음 .. .찾아봐야함)

//filter()

//반환값을 배열에 담는다.(return문이 있어야함)

//조건에 충족하는(true) 아이템만 배열에 담아 반환한다.

const numbers =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

console.log(numbers);

const lt10 =numbers.filter(function(num){

 return num < 10;

});

console.log(lt10);

const nums = numbers.filter(num => {

    return num < 10;

});

console.log(nums);

console.log(doubles);

const movies = [

    {

       title:'Amadeus',

       score: 99

     

    },

    {

     title:'Alien',

     score: 99

   

  },

  {

     title:'SquidGame',

     score: 99

   

  },

  {

     title:'Stand By Me',

     score: 99

   

  },

 

  {

    title:'Shinsaegae',

    score: 70

 

 }

 ]

 const goodmovies = movies.filter(m => m.score >=90);

 console.log(goodmovies);

- some 함수 

// some()

// 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면  false 반환

const ceoList = [

    {name: "Larry page", age: 23, ceo: true},

    {name: "Tim cook", age: 40, ceo: true},

    {name: "Elon Musk", age: 55, ceo: false}

];

let data = ceoList.some(item => item.age>40);

console.log(data);

 

 

//every()

// 모든 배열에 아이템이 조건을 충족하면 true 반환, 아니면 false 반환

//find()

//조건에 충족하는 아이템 하나만 반환 (여러 개라고 하면 첫번째것만 반환)

//조건에 충족하는 아이템의 인덱스값 반환(여러 개라면 첫번째 아이템의 인덱스 번호만 반환)

 

<math 이 무엇인가?!>

 

// Math

//round() 반올림 처리

console.log(Math.round(4.9)); //5

console.log(Math.round(4.2)); //4

console.log(Math.round(4.9)); //5

console.log(Math.round(-4.2)); //-4

// ceil() 무조건 올림 처리

console.log(Math.ceil(4.4)); //5

// floor()무조건 내림 처리

console.log(Math.floor(4.8));

// trunc() 소수 부분은 무조건 버리고 정수 부분만 반환

console.log(Math.trunc(4.8)); //4

// abs() 절대값

console.log(Math.abs(-4)); //4

// random(): 0.0 이상 1.0 미만

console.log(Math.random());

// 0에서 100 사이의 정수

console.log(Math.floor(Math.random() * 100)+1);

console.log(Math.floor(Math.random() * 101));

<String 객체>

//String 객체

//length

let txt = "abcdefgi"

console.log(txt.length);

//split()

const tags ="키보드, 기계식, 블루투스";

const arr = tags.split(",");

console.log(arr);

console.log(arr.length-1);

let birthDate = "1990-11-11";

let arr2 = birthDate.split("-");

console.log(arr2);

 

<DOM 객체> : 뜯어보기

// window 객체: 전역객체 (Global object)

// DOM 객체 : document,

// BOM 객체 : navigator, screen, location ...

// JS 내장 객체:object, String, Array, Math, ....

//DOM (Document obect Model)

console.log(document);

console.log(typeof document); //object

console.dir(document);

document.getElementById('title')

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

// window

window.console.log("hi");

console.log("hi");

window.console.log(window);

console.log(window.innerWidth)

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <div class="box">콘텐트1</div>

    <div class="box">콘텐트2</div>

    <div class="box">콘텐트3</div>

    <div class="box">콘텐트4</div>

    <script>

       const boxEls = document.querySelectorAll('.box');

       boxEls.forEach(function(boxEl, index){

        boxEl.classList.add(`order-${index+1}`);

        console.log(index, boxEl);

       });

       const boxEl = document.querySelector('.box');

       console.log(boxEl.textContent);

       

       boxEl.textContent = 'Hello!';

       console.log(boxEl.textContent);

    </script>

</body>

</html>

 

 

 

 

 

//id로 선택하기

const myTag = document.getElementById('#number');

console.log(myTag);

const myTag2 = document.getElementById('btns');

console.log(myTag2);

// class로 선택하기

const myTags = document.getElementsByClassName('color-btn');

console.log(myTags);

console.log(myTags[1]);

console.log(myTags.length);

for(let tag of myTags){

    console.log(tag);

}

const myTags2 = document.getElementsByClassName('red');

console.log(myTags2);

console.log(myTags[0]);

const myTags3 = document.getElementsByClassName('white');

console.log(myTags3 === null);

console.log(myTags3.length);

// CSS 선택자로 선택하기

// qurysecleter 만 . 을 씀!!

const myTag = document.querySelector('#number');

console.log(myTag);

const myTag2 = document.getElementById('number');

console.log(myTag2);

const myTag3 = document.querySelector('.color-btn');

console.log(myTag3); // 해당하는 제일 첫번째거를 선택함

const myTag4 = document.querySelectorAll('.color-btn');

console.log(myTag4); // 그래서 전부 출력하는 방법이 있음(대다수 이걸 사용함~)

const myTag5 = document.getElementsByClassName('color-btn');

console.log(myTag5);

* 이벤트 핸들링

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #number { font-size: 100px;}

        .color-btn{

            width: 30px;

            height: 30px;

            margin-top: 15px;

            cursor: pointer;

        }

        .red{

            background-color: red;

        }

        .orange{

            background: orange;

        }

        .yellow{

            background-color: yellow;

        }

        .green{

            background-color: green;

        }

        .blue{

            background-color: blue;

           

        }

        .peru{

            background-color: peru;

        }

        .purple{

            background-color: purple;

        }

        .black{

            background-color: black;

        }

    </style>

</head>

<body>

    <h1 id="title">DOM(Document object Model)</h1>

    <div id="number">0</div>

   

    <div id="btns">

         <div>

            <button id="decrease">-</button>

            <button id="increase" onclick="increase()">+</button>

         </div>

    </div>

    <div>

        <button class="color-btn red" data-color="red"></button>

        <button class="color-btn orange" data-color="orange"></button>

        <button class="color-btn yellow" data-color="yellow"></button>

        <button class="color-btn green" data-color="green"></button>

        <button class="color-btn blue" data-color="blue"></button>

        <button class="color-btn peru" data-color="peru"></button>

        <button class="color-btn purple" data-color="purple"></button>

        <button class="color-btn black" data-color="black"></button>

    </div>

    <script src="test04.js"></script>

</body>

</html>

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #number { font-size: 100px;}

        .color-btn{

            width: 30px;

            height: 30px;

            margin-top: 15px;

            cursor: pointer;

        }

        .red{

            background-color: red;

        }

        .orange{

            background: orange;

        }

        .yellow{

            background-color: yellow;

        }

        .green{

            background-color: green;

        }

        .blue{

            background-color: blue;

           

        }

        .peru{

            background-color: peru;

        }

        .purple{

            background-color: purple;

        }

        .black{

            background-color: black;

        }

    </style>

</head>

<body>

    <h1 id="title">DOM(Document object Model)</h1>

    <div id="number">0</div>

   

    <div id="btns">

         <div>

            <button id="decrease">-</button>

            <button id="increase" onclick="increase()">+</button>

         </div>

    </div>

    <div>

        <button class="color-btn red" data-color="red"></button>

        <button class="color-btn orange" data-color="orange"></button>

        <button class="color-btn yellow" data-color="yellow"></button>

        <button class="color-btn green" data-color="green"></button>

        <button class="color-btn blue" data-color="blue"></button>

        <button class="color-btn peru" data-color="peru"></button>

        <button class="color-btn purple" data-color="purple"></button>

        <button class="color-btn black" data-color="black"></button>

    </div>

    <script src="test04.js"></script>

</body>

</html>

// 이벤트 핸들링  : 이거 재밌겠다~

// 1) selecting

const numberTag = document.getElementById('number');

const minusbtn = document.querySelector('#decrease');

let number = numberTag.textContent;

// 2) 이벤트 핸들링

minusbtn.onclick = function() {

 number--;

 numberTag.textContent = number;

 console.log('숫자가 1만큼 감소됐습니다.');

}

function increase() {

 number++;  

 numberTag.textContent = number;

 console.log('숫자가 1만큼 증가됐습니다.');

}

const colorBtns = document.getElementsByClassName('color-btn');

for(let btn of colorBtns){

    btn.onclick =function(){

        numberTag.style.color = btn.dataset.color;

}

}