//null, undifinded
// 둘 다 값이 없는 상태
/*var n = null; 변수 초기화를 사용
var u;
console.log(n);
console.log(u);*/
//null : 변수 초기화로 명시적으로... 빈 값을 변수 안에 활당한 상태( 일종의 공기 같은 걸 주입한 상태)
//데이터는 들어 있지만 비어있는 데이터를 넣은 것. 명시적으로 비워있다 알려줌
//undifined : 변수를 선언만 상태
//각각의 특징
//null과 undefined의 차이점
//console.log(typeof 10); number
//console.log(typeof "hello"); spring
//typeof 사용자에게 어떠한 데이터탑을 가진지 알려주는 키워드
//console.log(typeof null); //오버젝트로 나옴- 참조타입에 나오는 객체 null자체는 원시타입
//태생적으로 가진 버그때문에 그럼 원시타입이 맞음 오버젝트로 나오는 건 버그 (무시)
//console.log(typeof undefined);
//console.log(null == undefined); 빈값으로 나오기때문에 참으로 나옴
//console.log(null === undefined); 타입이 달라서 거짓으로 나옴
//-! 부정
//console.log(!true);
//console.log(!false);
//console.log(!null); // 진실로 나옴
//console.log(!!null); // 앞에 부정한null를 다시 부정 // 거짓으로 나옴 원래 상태로 돌아오지 않음
// 한번 부정을 했을때 이미 투루로 변환한거라서 투루를 부정을 함
//console.log(undefined);
//console.log(!undefined); //true
//console.log(!!undefined);//!true
//-사칙연산
//console.log(10 + null); // null은 0으로 바뀜 (JS자체적으로)
//console.log(10 + undefined); //NaN(Not a Number) 값은 나오지만 숫자는 아님 오류
//차이점은 회사 면접용으로 팁정도
//<참조타입>
//함수(funtion) JS에서 가장 중요하고 사용하는 데이터 타입
//console.log(10 + 10);
//console.log(20+ 30 );
//console.log(5+10);
//임의의 숫자 두 개를 전달받아서 덧셈을 하는 기능을 만들고 싶다. - 기능을 만듬
//함수 선언 - 이건만으로 출력이 안됨/ 기능를 만들기만 했지 동작하지는 않았음.
function sum(){ //sum 함수명과 같다고 보면 된다. {}안에는 JS코드를 넣음
//console.log("hello")
//console.log(10 +10);
}
// 함수 호출
//sum(); 20밖에 안나옴 임의의 두 수의 합이 아님.
/
sum();
sum();
sum();
sum();
sum(); 선언한 함수를 계속 반복해서 사용할 수 있다. 호출할때마다 {}의선언이 실현
/
// 파라미터(parameter)(매겨변수), 아규먼트(argument인수)
//매걔변수 : num1, num2 // 밑의 어느부분이라도 num을 적영하지 않으면 값이 출력되지 않는다.
/function sum(num1, num2){
console.log(num1 + num2);
}
//인수 : 호출시 전달되는 값.
sum(10, 20); // 개발자가 입력한 값의 위에 적용을 넣어야 함
sum(100, 50); /
/*
function fullName(firsName, lastName) { //매개변수
console.log(firsName+" "+ lastName);
}
fullName("minjung","Lee") // 함수안에 들어가는 구체적인 값-인수
/
/
function area(width, height) {
//var result = width * height;
//console.log(result);
console.log(width);
console.log(height);}*/
//area(10,30); 값을 한 개만 적을 경우 NaN이 나온다.
//area(10); 매개변수를 만들었는데 인수가 누락된 매개변수는 undefined로 나온다.- 변수가 선언만 경우에 디폴트로 나온 원리와 같다.
//매개변수와 인수가 쌍을 이루어야 한다. 이런 상태로 함수를 호출해야한다.
//매개변수안에 들어 갈 수 있는 데이터 타입은 모든 데이터 타입이다.윈지 참조 올
/*
function test(a){
console.log(a);
}
test(10);
test("hello");
test(true);
test(null);
test(function a () {});
test([10,20,30]);
test({name: "alswj"});*/
//REturn
//함수가 호출되었을때 내부적으로 어떠한 값을 가지고 있는 상태
/*
function sum(num1, num2) {
//console.log(num1+num2);
return num1 + num2; //sum()으로 호출시 아무 것도 출력이 되지 않는다.
}
var result = sum(10,20); // 함수 호출 =30 ,result =30을 할당한 것과 같은 결과
console.log(result);
*/
// 다른 변수에 같은 값을 전달할때. 리턴의 값을 새로운 공식에 개입을 할때 사용함
/
function area(hor, ver) {
return horver;
}
var volume = area(10,20) *100; //200값을 가지고 있는 상태
console.log(volume); // 기본의 넓이의 값을 구할때와 같은 이러헌 경우
// 그림으로 배우는 자바스크립트 함수 - 함수 커피머신기 출력된 결과물 자체가 리턴 다른변수에 전달을 하거나 리턴을 사용해서 다른 값과 겷바을 해서 새로운 값
// 전달을 해서 새로이 적용할 수 있다.
*/
// 배열(array)
//var banana ="바나나";
//var apple ="사과";
//var melon = "멜론";
// 새로운 변수가 나올때 마다 새로 작성하는 것은 무리
// 유사한 성격의 데이터를 하나의 변수안에 넣을 수 있다 일종의 바구니의 역활
/*
var fruit =["바나나", "사과", "멜론"];
console.log(fruit);
//인덱스(intex)- 배열안에 특정 데이터를 접근할 수 있다. 플롯에 멜론만 가지고 오고 싶다. // 객체 모든영역에 해당되는 것
console.log(fruit[2]);
console.log(fruit[0]);
//특정데이터를 접근할 수 있다면 그 또한 변경할 수 있다는 뜻.
fruit[2] = "수박";
console.log(fruit);
*/
// 배열안에 들어갈 수 있는 타입
/var arr = [
10,
"hello",
true,
null,
function a(){},
[1,2,3]
,{name:"kim"}
]; // 배열안에 배열을 넎을 수 있다 js안에 있는 모든 데이터 타입을 배열에 삽입가능
/
// 배열을 작성할 때 주의점
//var num = [10,20,30, "hello"]; // 배열안에는 동일한 데이터 타입을 갖는 것이 좋음 hello는 num아 이님 이럴 경우 재 사용이 어려우ㅠㅁ
// 배열안의 데이터는 동일한 데이터 타입을 가지고 있어야 한다.
//var fruit = ["사과", "배","양사츄"] // 동일한 성격을 가진 배열을 채워주는 것이 좋음 > 따로 처리하는데 불필요한 리소스를 가지게 된다.
// 공통한 데이터 타입/성격으로 배열을 만들기
// > 배열 안에 있는 배열 데이터에 접근하는 방법
/* [10, 20, 30],
[100, 200, 300]
] ;
console.log(score);
console.log(score[1]); //300 접근하고 싶은 경우
console.log(score[1][2]); // 배열안에 배열안에 있는 데이터를 접근하는 방법. []사용해서 점점 안으로 들어 갈 수 있다.
*/
// 객체 (Object)
//배열과 비슷 여러가지 데이터를 한군데에 때려 넣을 때 사용. {} 사용
// 구성요소 : 이름, 나이 , 스킬 ,성별 등 항목을 받아내는 객체
//객체안에는 좌표값: key / 배열데이터 :value =property(키와 밸류 합친것)
/*
var student = {
name:"lee",
age :21,
skills:["JS","css","html"]
};
console.log(student);
// 우리기 입력한 순서대로 보단 알파벳순서로 정렬
// 접근방법
// . 를 활용하는 방법
console.log(student);
console.log(student.name);
//key를 넣어 해결하는 방법
console.log(student['name']);
// 2가지 방법 모두를 익혀야 된다. 첫 번째에 쉬워 보이지만, 반복문에서는 후자가 유용함
//객체와 배열안의 접급을 융합
console.log(student.skills[1]);
student.age = 100;
console.log(student);
// 기존에 없는 새로운 객체 추가 하기- 다이렉트로 key와 value 를 넣어서 추가하기
student.gender = "남자";
console.log(student);
/
// 배열과 마찮가지로 키에 들어가는 값으로 모든 타입을 넣을 수 있다.
/
var student = {
name:"lee",
age :21,
skills:["JS","css","html"],
test1:true,
test2:null,
test3:undefined,
test4:{color:"red"},
// 다른 타입은 모두 동일하나 함수를 넣을때 주의 해야함- 함수명은 기입하지 않는다.-sum자체가 함수명 대체
// 메서드 - 객체안에서 만들어지는 함수
sum : function(num1, num2) {
return num1 + num2;
} };
// 객체 밖의 함수와 안의 함수를 용어를 분리해서 말하기 - 객체 밖에 있는 모든 함수는 그냥 함수 / 객체를 기준으로 안밖으로 불리는 명칭이 다름
var result = student.sum(10,20);
console.log(result);
console.log("hello");
student.sum(100,200); //모양이 둘이 비슷한데 이처럼 console이라는 객채안에 log라는 메서드를 사용한 것으로 보면 된다.
*/
//이때까지 모든 데이터 타입를 몸
//원시타입과 참조 타입 차이점
//그림으로 배우는 자바스크립트
//원시타입의 특징
/*
var str1 ="hello"; // 원본
var str2 = str1; // 복사본
//console.log(str1);
//console.log(str2); // 값이 동일함 .
//str1 = "nice"; // 원본에만 영향을 준다. 한글 문서 파일로 비유하면 쉬음 원본과 복사본(+) 원본만 수정해서 복사본이 바뀌지 않는다.
str2 = "dddd" // 반대로 복사본을 수정을 한다고 해도 원본이 수정되지 않는다.
console.log(str1);
console.log(str2); // str1만 변경이 된다.
// 원본과 복사본 개념이 들어간 데이터 타입을 원시타입이라고 봄. 원본 복사본을 수정을 하든 서로의 데이터에 영향을 주지 않는다.
// 원시타입은 원본과 복사본이 안의 내용이 같을 지라도 관계는 독립적이라고 볼 수 있다. 복사개념이기때문.
/
/
//참조 타입
var obj1 = {name:"00"};
var obj2 = obj1;
//obj1.name = "park"; // 1를 수정하면 2도 동일하게 수정이 됨을 확인 할수 있다.,
obj2.name = "kim"; // 동일하게 복사본을 수정하면 원본도 같이 수정됨을 확인할 수 있다.
console.log(obj1);
console.log(obj2);
// 이사짐 박스로 이해하면 안됨. 직접적으로 내용을 넣는 것이 아니라, 메모리안에 데이터를 넣고 주소를 넣는 개념. 변경이 없는 주소안에 색만 바뀌는 개념이라
// 동시에 주소안에 색상이 적용.
*/
// 버튼을 클릴했을때 배경색이 바뀌는 기능
//엘로우, 그린, 핑크, #dc143c, rgba(123,123,123,0.5) 램덤하게 색상ㅇ르 가져오기
var colors = ["yellow", "green", "pink", "#dc143c","rgba(123,123,123,0.5)"];
//이벤트를 적용할 영역을 접근할 영역을 알앙야 한다.
var bg = document.getElementById('Color-bg');
//console.log(bg); // 변수명과 부를 콘솔명 동일하기 하기
var btn = document.getElementById('btn');
//console.log(btn);
//document의 객체는 이때까지는 첫번째 영역 html안에 영향을 발휘하는 객체-클라이언트 측 js영역
//클릭했을때 를 버튼에 적용해야함 행동자체를 이벤트를 추가 해야됨
//btn.addEventListener() -btn은 객체라고 보면 됨.
btn.addEventListener('click', function(){
//0 ~ 4
var random = Math.floor(Math.random() * 5);
//console.log(random);
//console.log(colors[random]);
bg.style.backgroundColor = colors[random];});
//addEventListener 메서드- 2가지의 인수를 전달 받음-받을 수 있는 인수가 한정되 어있음
//1. 문자열로 이벤트의 종류
//2.함수 / 함수명없는 합수는 익명함수라고 함. 호출을 하지 않다도 출력이 됨. addEventListener에서 정의했기 때뭄(호출해라고 )
// 콜백 함수 - 호출 기호 없이 특정 조건 하에 호출되는 함수
// 호출하는 공식이 없는 함수 - 함수 자체가 특정 조건으로 자동 호출이 되는다
// 1~6 숫자를 램덤하게 가져오는 게임 을 만들수 있어야 한다.
// 만드는 공식
//사전에 만들어 진 객체가 있다 콘솔로그 처럼. 역활이 정해져 있다.
//메스 객체
//Math.random : 0을 포함해서 1미만을 실수 형태를 표현할때 사용
//:0~0.99999~
//console.log(Math.random());
//Math.random()6 : 0 ~5.999~
//console.log(Math.random()6);
//Math.floor :내림처리
//Math.floor(Math.random()6 :0 ~ 5 > 배열은 0 부터 시작하니까 여기가 필요
//console.log(Math.floor(Math.random()6));
//Math.floor(Math.random()6 + 1 : 1 ~ 6
//console.log(Math.floor(Math.random()6 )+ 1);
// 숫자가 교채되는 위치도 정확하게 인지하기
//background-Color(css) > backgroundColor(JS)-를 인식을 못함케멸 케에스로 적용을 해야하낟.
// 변수 주의점
//1
//var , typeof, function, null, undefined, false, true
///js에서 사전에 정의한 것을 예약어라고 한다.
// 예약의 종류가 많다 console역시
// 변수를 만들때 이러 한 예약어로 만들면 안된다>에러로 인지
// 예약은 하나의 단어로 정의하기때문에 다 외울수 없다
// 피하기 위해서 는 2개이상의 명사조합으로 만들면 좋다. 그럼 에러를 피함
//2
//css처럼 js도 여러개의 파일을 둘 수가 있다.
//위에서 부터 순차적으로 읽는다는 것의 주의하기
//윗 파일에 작성한 변수 / 밑 파일 에 그대로 접근할 수 가 있다.
// 순서!!! 맞춰서 작성하기 먼저 존재 해야지만, 사용가능
//먼저 작성한 파일을 연동하고 그후 써먹을 파일을 다음에 연동하기
