javascript Step01_dataType

number type 데이터 작성 방법

        let num1=10;
        let num2=10.1;

아무것도 붙이지 않고 그대로 적어준다.

string type 데이터 작성 방법

let str1='abcd1234';
        let str2="김구라";
        let str3=`하나`;
        let str4=`
            하나
            두울
            세엣
        `;

큰따옴표, 작은따옴표, 백틱 중 하나를 붙여서 표기한다.
백틱을 사용하면 여러줄의 문자열을 편하게 작성할 수 있다.

• 연산을 할 때 값이 들어 있는 변수명으로 연산을 할 수도 있다

let result=num1+1;
        let result2=num1+num2;

--> 11, 20.1

Boolean type 데이터 - true / false

• 참과 거짓을 나타낼 때 사용, boolean type 데이터가 들어가는 변수는 이름을 대화식으로 지으면 가독성이 좋다
  ex)

let isRun=true;
        let isWait=false;
        let canEat=true;
        let isMan=false;

// 왼쪽이 오른쪽보다 큰지 비교
        let result=10>1;
        // 왼쪽이 오른쪽보다 작거나 같은지 비교
        let result2=10<=1;
        // 양쪽의 값이 같은지 비교
        let result3=10==10;
        // 양쪽의 값이 다른지 비교
        let result4=10!=10;
        // 양쪽의 값이 같은지 비교
        let result5="kim"=="lee";
        // 양쪽의 값이 다른지 비교
        let result6="kim"!="lee";

Object type 데이터 - 한개의 변수명으로 여러개의 값을 한번에 관리

중괄호를 열고 닫음으로써 만들기 가능 {key:value}

        let mem1={num:1, name:"김구라", isMan:true};
        let mem2={num:1, name:"김구라", isMan:true};
        let mem3={num:num, name:name, isMan:isMan};

저장소의 이름 : 저장된 값

저장된 값을 참조하는 법 : . 찍기 !

이때 1)불러오는 것 : let a = mem1.num;
2) 덮어쓰는 것 : mem1.num = 2;

alert(mem1.num); <-불러오는 것

        // a는 object type
        let a=mem1;  // mem1에 있는 object type 값을 a에 복사
        // b는 number type
        let b=mem1.num;     ->1
        // c는 string type
        let c=mem1.name;      ->'김구라'
        // d는 boolean type
        let d=mem1.isMan;        ->true

object에 저장된 값을 수정하는 것도 가능

        mem2.num=999;
        mem2.name="이정호";

변수명.key=~~ 바꿀value ~~
--->

let mem2={num:999, name:"이정호", isMan:true};

빈 object를 만들고 나중에 방을 추가하는 것도 가능

let mem4={};
mem4.num=2;
mem4.name="해골";

나중에 방 삭제도 가능 - delete 예약어 이용

delete mem4.name;

• delete뒤에는 점찍지 않음 !! 띄어쓰기만 !!!

메모리 영역

• heap 영역 : 사물함이 있는 영역
  특징 - 사물함 번호로 구분됨
  실제 오브젝트가 여기에 만들어짐
  오브젝트 자체가 키값으로 바뀌어서 들어감 !

let obj1={num:1, name:"김구라"};
let obj2={num:1, name:"김구라"}; 일 경우

두 object는 같은 object가 아니다 !!!!!!!!!!

let obj1={num:1, name:"김구라"}; 에서 num:1, name:"김구라" 자체가 키값(예로들면 10)이 되어 그 키값이 obj1저장소에 들어간다

나중에 .으로 불러낼 때 obj1의 키값 10으로 불러내서 데이터(num:1, name:"김구라") 소환

프로그램은 키값으로 거기를 찾아가서 안의 상황을 개발자에게 보여준다{ 키:밸류, , , }

따라서

let obj2={num:1, name:"김구라"}; 까지 하면

heap영역에 num:1, name:"김구라" num:1, name:"김구라" 가 두개 만들어지는 것, 키값은 다름 !

->
number, string, boolean 값은 변수에 실제 그 값이 들어간다라고 생각을 하는게 좋다 (사물함키 생각x)
제외한 나머지는 사물함키 들고다님 (지금 배운시점에서는)

string type을 예로 들어보면,
let myName="kim";
let yourName=myName;
--> yourName값이 "park"으로 바뀌어도 myName에는 영향이 없다 !
string type은 실제 그 값이 들어가기 때문

***그러나 object는

let obj1={num:1, name:"kim"};

let obj2=obj1;

--> 같은물건을 사용하므로 각 obj1. obj2. 를 참조할 때 영향을 미친다

참고 : 사물함 키값=참조값(reference value)

너무너무 헷갈리고 어려워따

웹브라우저 검사에 source 들어가서 디버깅하는 연습 많이 해보기 !

220404

자바스크립트 영역

script 공간 : 페이지 로딩시 실행
function 공간 : 함수 호출시 실행
button onclick=" " 따옴표 공간 : 함수를 호출
콘솔창 공간 : 임의로 확인해보는 곳

-> 각각 언제 실행되는지 알 것

복습어게인

• number type

let num1=10;
let num2=num1;   <--복사한 시점 !
console.log(num2);    //num2는 10
num1=999;          이미 복사하고나서 값을 바꿔봤자 num2랑은 상관없음 ex) 메모장 옮겨적기
console.log(num2);    //num2 그대로 10

• object type

let mem1={name:"김구라"};
let mem2=mem1;
mem1.name="원숭이";
console.log(mem2.name);
  ----> 원숭이 !

mem1에게 부여된 키값을
mem2에게 동일하게 부여하므로 (mem1이라는 변수 안에 들어있는 (키)값이 안바뀜)
mem1의 내용을 김구라에서 원숭이로 바꾸면
mem2의 내용도 원숭이로 바뀜 ! 키값을 공유 !!
---> object type만 가지는 특징

a사물함의 키는 10, 안에 num=1, name="kim" 있었는데
num=999로 바꾸면
내가다시 10번키를 들고 그 사물함에 갔을 때 값이 바뀌어 있다

let obj1={};
let obj2=obj1;
let result1=obj1==obj2        //--->true

obj1={};        
// 중괄호가 해석될 때 마다 새로운 오브젝트가 만들어짐, 
더이상 처음의 키값을 가지고있는 것이 아니라 새로운 다른 키값 부여됨
let result2=obj1==obj2  // --> false ! obj2는 그대로 처음의 키값

.

        let a={};
        let b={};
        let c={};   // object 3개

        let a={};
        let b=a;
        let c=b;  // object 1개지만 a b c 모두 같은 오브젝트키값 부여


        function test(){
            let obj={};
        }
        // 함수만 만들어지고 오브젝트는 만들어지지 않음, 함수가 호출되어야 실행되기 때문

        test();
        // 이렇게 호출까지 해야 페이지로딩시점에 오브젝트 한개 만들어짐

        
        test();
        test();
        test();
        // 이렇게 되면 페이지로딩시점에 오브젝트 세개 만들어짐 (함수호출 세번)

데이터 타입 구분하기

array type : 순서가 있는 여러개의 데이터

대괄호 열고닫고 콤마로 구분 , 자동으로 인덱스가 붙음(0부터 시작)

object 범주에 포함되어 있음, object type의 일종임 !

let foods=["초밥", "치킨", "김치찌개", "냉면", "삼겹살"];
    
    // 배열의 특정 인덱스에 저장된 item을 변수에 담기
    let a=foods[0];
    let b=foods[1];
    
    // 배열의 특정 인덱스에 저장된 item을 수정하기
    foods[0]="라면";
    foods[1]="짬뽕";

    // 배열에 item을 추가하기 , array에도 . 찍을 수 있다 ! (object의 일종) / 배열 : push라는 기능 내장되어 있음
    foods.push("피자");
    foods.push("햄버거");

    // 배열의 크기 참조해서 변수에 담기
    let size=foods.length;

    // 배열의 특정 인덱스에 저장된 item 삭제하기 (2번방으로부터 아이템 1개를 지우기)
    foods.splice(2, 1);

배열 : 주로 한가지 type의 데이터만 담는게 일반적 !

ex)

 let nums=[10, 20, 30, 40, 50];
        let names=["김구라", "해골", "원숭이", "주뎅이", "덩어리"];
        let data=[true, true, false, false, true];

array 안에 object가 들어가 나열될 수 있다 ! (자주 쓰임)

[{ }, { }, { },]

ex) 회원 목록

let members=[
           {num:1, name:"김구라", addr:"노량진"},
           {num:2, name:"해골", addr:"행신동"},
           {num:3, name:"원숭이", addr:"상도동"}

--> 이 경우 object 3개 + array 1개 총 4개 !
각 object는 다 키값이 따로 부여되고 배열에 그 값들이 저장됨

ex) 30번 배열 안에 object 키값 [22, 23, 25],
배열의 키값(30)은 stack영역의 members에 저장

let b = members[0] ,
b에서 요소 고치면 전체 members도 바뀜 ! 영향이 간다

stack영역(변수들이 만들어지는 영역)과 heap영역

• 참조하기

array type - 전체

let a = members;

object type - {num:1, name:"김구라", addr:"노량진"}

let b = members[0];

number type - 1

let c = members[0].num;

string type "김구라"

let d = members[0].name;

string type "노량진"

let e = members[0].addr;

function data

함수도 데이터의 일종 !!!
-> 사물함(heap영역)에 만들어짐

함수데이터 만드는 방법

1. 이름이 없는 함수를 만들어서(참조값을 얻어내서) f1이라는 변수에 담기(집어넣기) - 가장 많이 쓰임

 let f1=function(){
        console.log("f1 호출됨 !");
    };

2. f2라는 이름의 함수 만들기 (미리 빌트인으로 준비되어 있게 됨)

function f2(){
        console.log("f2 호출됨 !");
    }

둘다 거의 똑같다 ! 호출, 참조하는 법도 같음

undefined type

• type도 undefined, value도 undefined

변수를 선언만 하고 값을 넣지 않으면 undefined가 들어있다. (편리), 변수 만들어 놓고 값을 나중에 넣어야 할 때 사용하면 됨

let a;

undefined를 명시적으로 넣어줄 수도 있다.

let b=undefined;

하지만 위에꺼 쓰면 됨 ㅎ

함수 호출 function( ){ };

함수를 호출하면 중괄호 안을 실행순서대로 실행하고 다시 호출했던 위치로 돌아오면서 어떤 값을 반드시 가지고 온다.
보통 정해져있지 않으면 undefined, 정해져있으면 return값

ex) 원숭이를 냉장고에 밀어넣는 함수

   console.log("냉장고 문을 열어요");
            console.log("원숭이를 넣어요");
            console.log("냉장고 문을 닫아요");
        };

        let getNumber=function(){
            console.log("getNumber() 호출됨");
            return 999;    // 999가 getNumber값으로 들어감
        };

        let getGreet=function(){
            console.log("GetGreet() 호출됨");
            return "hello ~~!~!~"
        };

함수가 호출되면 function밑을 한바퀴 돌면서 return 뒤의 데이터를 가지고 와 변수에 그 값을 넣는다 !

        let a=pushMonkey();  // undefined
        let b=getNumber();  // number type 999
        let c=getGreet();  // string type hello ~~!~~

ㅇㅣ러케 ~~~

• let a=pushMonkey; => (참조) 단순 복사, a가 함수가 됨
• let b=pushMonkey( ); => (호출) undefined를 가지고 와서 b에 집어넣음

• 참조

alert
> ƒ alert() { [native code] }
alert();            <----콜
> undefined
let gura=alert;          <---참조 !!!!
> undefined
gura;
> ƒ alert() { [native code] }
gura();
> undefined

let gura=alert; 로 함수를 참조함으로써 변수 gura가 함수가 됨 !

![]

<함수>

• 함수를 호출(call)한 그 위치는 반드시 어떤 값으로 바뀐다. (최소한 undefined, return예약어 있으면 return뒤 명시한 데이터)

• 함수를 호출하는 목적이 때로는 어떤 값을 호출한 그 위치로 가지고 오기 위해서 호출하는 경우도 있다.

• 함수가 종료되는 것을 함수가 return된다라고도 한다.

dataType

number type : 산술연산이 가능한 데이터

string type : 문자 표현이 가능한 데이터

boolean type : 참, 거짓 표현이 가능한 데이터

object type : 순서가 중요치 않은 여러 type 데이터를 하나의 묶음으로 관리 가능한 데이터

array type : 순서가 중요한 여러개의 데이터를 하나의 묶음으로 관리 가능한 데이터

function type : 특정 시점에 일괄 실행할 javascript를 여러 줄 모아놓을 수 있다.
- function도 데이터이기 때문에 사물함(heap 영역)에 만들어짐 !
- 함수는 단순 참조도 가능하고 call도 가능하다 ! (참조/호출 구분하기)
호출 : 준비된 javascript 일괄실행, 참조: just 참조

220405

• 함수를 호출한 위치는 반드시 어떤 값으로 바뀐다 !
  undefined이거나 return값이거나 ,,!

dataType8

• object의 value에는 모든 데이터타입이 들어갈 수 있다
  number, string, boolean, function, object, array... 모두 가능
  function type도 가능 !! key:value 형식만 잘 지켜주기 (특히 object 안에는 세미클론 없어야 함 ★★)

ex)

let getData=function(){
            let obj={
                num:1,
                name:"김구라",
                sing:function(){
                    alert("노래해요 !");
                }
            };
            return obj;
        };

순서대로 호출하고 참조하고 또 호출하고,, 그때그때 맞게 잘 참조하기 !

+)

// a에는 object type의 참조값이 들어있다.
let a=getData();

// b에도 object type의 참조값이 들어있다.
let b=getData();

let result=a==b;  // false

각각 다른 변수에 같은 object를 부여해도 참조값(사물함 키값)은 다 다름 !!!
따라서 둘은 같지 않다

dataType9

• 배열 안에 object 나열 가능

ex)

        let getFriends=function(){
            let friends=[];
            friends.push({num:1, name:"김구라", addr:"노량진"});
            friends.push({num:2, name:"해골", addr:"행신동"});
            friends.push({num:3, name:"원숭이", addr:"상도동"});
            return friends;    // friends변수 안에 들어있던 배열의 참조값
        };

let a=getFriends();

이렇게 하면 a는 array type

let util={getFriends:getFriends};

함수를 object 안에 넣을수도 있다 !
key값 -> getFriends(변수명)
value -> function type인 getFriends
헷갈릴 필요 없음
호출방법 : util.getFriends()

dataType10

• call뿐만 아니라 어떤 값을 전달해주어야지만 정상동작하는 함수가 있다
  -> 함수명 옆 소괄호 안에 적어주면 된다(매개변수)
  매개변수는 선언할 때 let 붙이지 않음 !!!
  ex)

// 함수에 전달된 두 수의 합을 콘솔창에 출력하는 함수
        let showSum=function(num1, num2){
            let result=num1+num2;
            console.log(num1+" 과 "+num2+" 의 합은:"+result);
        };

        // 함수에 전달된 두 수의 합을 리턴해 주는 함수
        let getSum=function(num1, num2){
            let result=num1+num2;
            return result;    
            // 어떤 합당한 결과를 호출한 그 위치로 돌려주는 함수 ! 
            두 수의 합이 다시 getSum에 리턴된다
        };

• 콘솔에서 css변경

let a=document.querySelector("p");
undefined
let b=document.querySelectorAll("p")[0];
undefined
a==b
true
a.style.color='red'
'red'
b.innerText="안녕";
'안녕'
document.querySelector("p").style.backgroundColor="yellow";
'yellow'
document.querySelectorAll("p")[0].style.fontSize="20px";
'20px'

Document :: 웹브라우저에 빌트인되어있는 object type

Step01_example

document.querySelector(~~)

querySelector / querySelectorAll

querySelector 함수 : 조건에 부합하는 문서객체를 최초 1개만 찾아오는 것

querySelectorAll 함수 : 조건에 부합하는 문서객체를 모두 찾아서 배열에 담아오는 것 (배열 !!!)

querySelector: object return ,
querySelectorAll : array return

다 같은 요소를 참조하고 있음 ! 편한거쓰기 ~~~

졸았나 기억없는데 ,, ㅋㅋ

querySelector에서의 id, class

• document.querySelector("#one")
  : id가 one인 요소를 하나찾아서 리턴

• document.querySelector(".my-class")
  : class속성의 value가 my-class 인요소 하나만찾아서 리턴

-> document.querySelector에 젤적당한거 : id !!!!!
document.querySelectorAll : 요소명, class가 적당

• 바꾸기 버튼을 눌렀을 때 모든 p요소의 글자색을 red로 바꿔보세요.

let change=function (){
     document.querySelectorAll("p")[0].style.color="red"
     document.querySelectorAll("p")[1].style.color="red"
     document.querySelectorAll("p")[2].style.color="red"
 };

• p요소 : 문서객체(object) , heap영역에 만들어짐 / 참조값은 p1안에 들어있다

• document.querySelector("p")
  요소명이 p인 이조건에 부합하는 문서객체를 한개만 찾음(젤 첫번째꺼), 그리고 이 위치로 리턴해줌

• css변경도 가능 !

let p1=document.querySelector("p");

p1.style.color="red"

--> document.querySelectorAll("p")[0].style.color="red"; ->글자색 바뀜

반복문 1 : 여러개의 p요소를 한번에 색 변경하기

        let change1=function(){
            for (let i=0; i<10; i++){
                document.querySelectorAll("p")[i].style.color="red";
        }
        }

i라는 변수를 0에서 10까지, i++는 하나씩 증가한다는 의미
"p" 배열의 모든 인덱스[ i ]의 스타일을 변경함 !

반복문 2 : 반복 횟수를 유동적으로 변경할 수 있는 반복문 (많이 쓰임)

코딩 시점에 정확한 반복 횟수를 결정할 수 없는 경우에 사용
ex) 배열의 아이템, 회원목록 등

        let change2=function(){
            // 모든 p요소의 참조값을 담은 배열의 참조값을 ps라는 이름의 변수에 대입한다.
            let ps=document.querySelectorAll("p");
            // ps 배열의 방의 갯수(size)만큼 반복문이 돌면서
            for (let i=0; i<ps.length; i++){
                // 배열에 저장된 p 요소의 참조값을 하나씩 참조해서 글자 색을 변경한다.
                ps[i].style.color="red";
        }
        }

반복할 개수를 숫자로 지정해주는 것이 아니라 배열의 길이를 지정해 그 개수만큼 반복문이 돌게 해줌 !

숫자 대신 ps.length

Step01_example2

• 페이지 로딩 시점에 배열에 저장된 이름을 하나씩 순서대로 참조해서 위의 5개의 p요소의 innerText로 지정해 보세요.

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>

를

            <p>김구라</p>
            <p>해골</p>
            .
            .
            <p>덩어리</p>

이러케

내가한것 반복문1

        let change=function(){
            for (let i=0; i<5; i++){
                document.querySelectorAll("p")[i].innerText=names[i];
        }
        }

        change();

내가한것 반복문2

            let change=function(){
                let ps=document.querySelectorAll("p");
                for (let i=0; i<ps.length; i++){
                    ps[i].innerText=names[i];
                }
            };

            change();

페이지 로딩 시점에 실행하는 거니까 마지막에 change( ); 호출해주기

innerText 함수가 좀 헷갈렸는데 잘 보기 !!

innerText는 앞에 style을 붙이지 않는다 ***

쌤 반복문1

        for (let i=0; i<5; i++){
            document.querySelectorAll("p")[i].innerText=names[i];
        }

        // 제어변수 i : 배열의 방번호로 많이 쓰임 [i]
 

쌤 반복문2

 // 비교연산자 우측 : 보통 배열의 방의 사이즈가 들어감 names.length
        for (let i=0; i<names.length; i++){
            document.querySelectorAll("p")[i].innerText=names[i];
        }

페이지 로딩 시점이므로 굳이 함수를 사용하지 않아도 된다 !

여기서 i는 for문 안에 있으므로 for문 안에서만 사용가능

Step01_example3

input요소 : value값 !!!

javascript에서 input요소도 제어가능한데, innerText는 존재하지 않고 value를 이용한다 !

1. value값 넣어주기 - 좌측에서 참조

document.querySelector("#one").value = "김구라";

2. value값 읽어오기 - 우측에서 참조

let a = document.querySelector("#one").value;

innerText자리에 value만 넣어주면 된다 !

Step01_quiz

전송 버튼을 누르면 input 요소에 입력한 문자열을 p 요소의 innerText로 넣어 보세요.
(특정 시점이 중요 ! 전송버튼 누른 시점)

let send=function(){
            let msg=document.querySelector("#inputMsg").value;  // input요소에 입력한 문자열을 읽어와서 변수에 담는다
            document.querySelector("#result").innerText=msg;  // p요소의 innerText에 msg변수에 담긴 내용을 넣어준다
            document.querySelector("#inputMsg").value="";  // input요소에는 다시 빈 문자열을 넣어서 입력한 문자열이 삭제되도록 한다
        };

Step01_quiz2

1. 이름을 입력하고 저장버튼을 누르면 입력한 이름을 names 배열에 누적시켜 보세요.
   2. 출력하기 버튼을 누르면 names 배열에 저장된 모든 이름을 콘솔창에 순서대로 출력해 보세요. ***어려워 못해냈음

• hint
  names.push(); ->배열에서 아이템을 추가하는 함수
  console.log();

다시해보기 !

name변수 지정하는거 function안에다가 해야함 !!!

        let save=function(){
            // 입력한 이름 읽어오기
            let name=document.querySelector("#inputName").value;
            names.push(name);  // 함수 안에서 밖에서 정의되었던 변수 이용하기 가능, 
                               // 배열에서 아이템을 추가하는 함수이므로 querySelectorAll 쓰는거 아님
        };

그리고 반복문 이용 !!!

        let print=function(){
            for (let i=0; i<names.length; i++){
                console.log(names[i]);
            }
        };

for문에서 마지막 i++ 뒤에는 세미클론 안들어감

names 배열의 모든 부분을 반복해서 불러와야 하니까 names[i]

많이많이 해봐야할듯 ,,