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; ->trueobject에 저장된 값을 수정하는 것도 가능
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 따옴표 공간 : 함수를 호출
콘솔창 공간 : 임의로 확인해보는 곳
-> 각각 언제 실행되는지 알 것
복습어게인
- 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영역)에 만들어짐
함수데이터 만드는 방법
- 이름이 없는 함수를 만들어서(참조값을 얻어내서) f1이라는 변수에 담기(집어넣기) - 가장 많이 쓰임
let f1=function(){
console.log("f1 호출됨 !");
};
- 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를 이용한다 !
- value값 넣어주기 - 좌측에서 참조
document.querySelector("#one").value = "김구라";- 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
- 이름을 입력하고 저장버튼을 누르면 입력한 이름을 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]
많이많이 해봐야할듯 ,,
