8:35 경 학원 도착
오늘의 상태 : 음. 힘내야 할 거 같은 날이다. 이래저래 힘드네.
<9:30 1교시>
■ 변수와 상수
상수는 한 번 정해지면 바꿀 수 없어서 read only인 경우가 많다.
■ data type을 알아야 하는 이유
프로그래밍을 한다는 것은 결국 data를 다루는 것이다.
그래서 data 타입의 종류가 무엇이 있는지, 그런 data type을 어떻게 만드는지를 알아야 한다.
number, string, boolean, object, array, function 모두 하나의 데이터 값이고 종류가 다를 뿐이다.
- number type(숫자), string(문자열), boolean type(참/거짓)
- plain object type : 순서가 중요하지 않은 여러 정보를 key값과 value의 구조로 하나의 묶음으로 관리하고 싶어서 만든 데이터 타입(오라클의 데이터 베이스에서 다루는 한 줄의 row를 이 타입으로 묶으면 좋다.)
key값의 이름은 봤을 때 어떤 정보가 들어있는지 예상이 가능하게 만드는 것이 좋다.
plain object type, array type, function type은 만들어지면서 어떤 사물함 같은 공간의 열쇠 값이 변수에 대입된다고 생각하는 것이 명시적이다.
-array type : 순서가 중요한 여러개의 데이터를 하나의 묵음으로 순서대로 관리하기 위함
(선생님이 자꾸 떡볶이를 떡복기라고 오타를 내시는데 너무 신경 쓰이는데 말도 못하겠고 참)
■ 참조
참조한다는 것은 대입 연산자의 우측에서 그 위치의 값을 가져와서 변수나 상수에 담기겠다는 의미.
또한 대입 연산자의 좌측에 있을 때 어떤 값을 참조한다는 것은 그 위치를 불러오는 효과를 갖는다는 것.
참조하는 값은 참조하는 시점에서 바로 생성해서 보내는 경우도 있고, 이미 존재하는 어떤 값의 위치에서 불러와서 보내는 경우도 있다.
<10:30 2교시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object</title>
</head>
<body>
<h1> plain object 테스트 </h1>
<script>
let mem={num:1, name:"이름", addr:"주소"};
let mem2= {
num:2,
name:"네이름",
addr: '주소2'
};
</script>
</body>
</html>
mem2.name을 변경한 내용은 페이지 새로고침 시 리셋되어 원래대로 되돌아 와있다.
plain object의 value 위치에는 모든 종류의 데이터 값이 다 올 수 있다.
■ 오브젝트 타입의 하위 요소 참조하기 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object</title>
</head>
<body>
<h1> plain object 테스트 </h1>
<script>
let mem={num:1, name:"이름", addr:"주소"};
let mem2= {
num:2,
name:"네이름",
addr: '주소2'
};
let person = {
name:'이름',
iq: 110,
phone: '010-0000-0000',
favfoods : ['떡볶이','순대','라면'],
health:{
height: 168,
weight: 55
},
friends: [
{name : '친구1', addr:'주소1'},
{name : '친구2', addr:'주소2'},
{name : '친구3', addr:'주소3'}
]
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>array</title>
</head>
<body>
<h1>array type 사용해보기</h1>
<script>
let foods = ['떡볶이','김밥', '라면'];
let names = ['이름1', '이름2', '이름3', '이름4']
//음식의 0순위를 food1이라는 변수에 담기
let food1 = foods[0];
//이름의 1순위를 name1이라는 변수에 담아보기
let name1 = names[1];
//음식의 2순위를 튀김으로 변경해 보기
foods[2] = "튀김" ;
//이름의 3순위를 이주환으로 변경해보기.
names[3] = '이주환'
//음식의 3순위에 짬뽕 추가
foods[3] = '짬뽕'
//음식의 4순위 추가하기
foods.push('짬뽕');
//음식의 개수를 size라는 상수에 담기
const size=foods.length;
</script>
</body>
</html>
<11:30 3교시>
array는 array 타입이기도 하면서 object이기도 하다.(plain object가 아닐 뿐) 그 하위에 다양한 함수 기능도 가지고 있다.
function type은 원하는 시점에 웹페이지에서 실행하려는 동작이 입력된 여러 줄의 자바스크립트를 일괄 실행하려고 할 때 사용할 수 있게, 유저가 적절한 시점에 사용되게끔, 함수를 모아놓고 적절한 시점에 콜 되도록 해주는 것이 우리가 할 일 .
예를 들어, 애플 홈페이지에서 메뉴를 눌렀는데 안보이던게 펼쳐지는 거면 그건 다 function이 여러 개 만들어져서 특정 동작(클릭 등)을 일으킴. 이런 식으로 웹페이지에서 html(UI)나 css(디자인) 외에 나타나는 모든 동작들이 다 함수임.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>function</title>
</head>
<body>
<h1>function타입 사용해보기:<br>우리 수준에서는 셋 다 같은데, 나중에 보면 2번 방법을 많이 쓸 것임</h1>
<script>
//함수 만드는 방법 1 : 이름이 없는 함수를 만들어 상수/변수에 대입해서 그 이름으로 활용
const f1 = function(){
}
//함수 만드는 방법 2 : 화살표 함수를 만들어 상수/변수에 대입해서 그 이름으로 활용
const f2 = ()=>{
}
//함수 만드는 방법 3 : 처음부터 이름을 만들어 주고 그 이름을 사용해서 활용
function f3(){
}
</script>
</body>
</html>
페이지가 로딩되는 시점에서는 script안에 있는 것들이 일괄 작동하는데, console.log로 시작하는 부분은 실행됐고, 나머지는 함수의 정의만 진행됐고, 정의한 함수 중에 실행된 것은 콘솔창에 입력하기 전까지 없음.
<12:30 4교시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>array example</title>
</head>
<body>
<script>
//입력한 문자열을 누적시킬 빈 배열을 페이지 로딩 시점에 준비하기
let msg=[];
//prompt 함수를 이용해서 문자열 한줄을 입력받고
let a = prompt();
//입력받은 문자열을 msgs배열에 저장해보세요
msg.push(a);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>array example2</title>
</head>
<body>
<script>
//입력한 문자열을 누적시킬 빈 배열을 페이지 로딩 시점에 준비하기
let msg=[];
function saveMsg(){
//prompt 함수를 이용해서 문자열 한줄을 입력받고
let a = prompt();
//입력받은 문자열을 msgs배열에 저장해보세요
msg.push(a);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>array example2</title>
</head>
<body>
<!--<p>클라이언트야 입력한 메시지를 저장하고 싶으면 마우스 우클릭해서 검사 누르고 콘솔 선택해서 하면 돼~</p> 하는 거 개에바야-->
<!--입력한 메시지 저장하기 버튼 같은걸 만들어서 한다-->
<button onclick="saveMsg()">입력한 메시지 저장하기</button>
<script>
//입력한 문자열을 누적시킬 빈 배열을 페이지 로딩 시점에 준비하기
let msg=[];
function saveMsg(){
//prompt 함수를 이용해서 문자열 한줄을 입력받고
let a = prompt();
//입력받은 문자열을 msgs배열에 저장해보세요
msg.push(a);
}
</script>
</body>
</html>'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 12/5 오전 기록 011-1 (0) | 2024.12.05 |
|---|---|
| 자바 풀 스택 12/4 오후 기록 010-2 (0) | 2024.12.04 |
| 자바 풀 스택 12/3 오후 기록 009-2 (0) | 2024.12.03 |
| 자바 풀 스택 12/3 오전 기록 009-1 (0) | 2024.12.03 |
| 자바 풀 스택 12/2 오후 기록 008-2 (1) | 2024.12.02 |