2021.11.17 - 국비수업 17일차 / javascript
멘탈..잡아.......
정신차려 아무도 안도와준다 끝까지 해내야해...
화이팅..!!
[오늘 수업 요약]
- 전 날 과제 리뷰
- js 배열과 객체
- 속성과 메서드
- 객체와 반복문
- 날짜처리 Date
<배열>
- 배열은 순서가 있는 값들의 집합을 만들고 싶을 때 사용(Array)
배열 선언과 할당형식 :
var a = []; ==>배열 선언
var a [1,2,3,...]; ==> 배열 선언과 동시에 입력
console.log(a.length); ==> length 속성으로 배열의 길이를 알 수 있음.
ex)
var array=["홍길동","김길동","김서방"];
array[3] = "오길동";
console.log("index 0:"+array[0]);
console.log("index 1:"+array['1']);
console.log("index 2:"+array['2']);
===============================
배열순서대로 값이 나옴.
<객체>
- 객체는 배열과는 달리 순서가 없다.
객체 선언과 할당형식 :
var obj={name :"hyo",age:28,..};
객체 속성 값 호출하기 :
console.log(obj["name"]);
ex)
var book = {bname:"자바의 정석", price:25000, company:"모른다"};
console.log("책 이름:"+book.bname);
console.log("가격:"+book.price);
console.log("출판사:"+book.company);
==================================
정해진 이름으로 값이 나옴.
<속성과 메소드>
- 속성 : 객체는 한꺼번에 여러 값을 담을 수 있는 통(container)과 같은 자료구조(data structure)이다.
객체 안에는 이름-값 쌍(name-value pair)이 저장되는데, 이를 객체의 속성(property)이라고 한다.
- 메소드 : 어떤 객체의 속성으로 접근해서 사용하는 함수를 메소드(method)라고 한다.
- this : this 키워드를 사용하면, 메소드 호출 시에 해당 메소드를 갖고 있는 객체에 접근할 수 있다.
function 키워드를 통해 정의된 함수 내부의 this 키워드가 실제로 무엇을 가리킬 것인가는,
메소드가 어떻게 정의되는가에 의해 결정되는 것이 아니라 메소드가 어떻게 사용되는가에 의해 결정.
ex)
var prod = {name:"사과", price:3000,
buy:function(cnt){
console.log("과일명:"+this.name);
console.log("가격:"+this.price);
console.log("총 비용:"+(this.price*cnt));
}}
====================================
<객체와 반복문>
- for문
: 한 동작 혹은 여러동작을 같거나 비슷하게 반복적으로 실행하는 구문
for (let i = 0; i<5 ++i){
console.log(i+"번째 출력");
}
==> 0 번째 출력
1번째 출력
3번째 출력 ....
let i = 0; / 초기화(1번)
i<5 / 조건식(2번)
console.log / 실행문(3번)
++ i / 증감문(4번)
- for in 문
: for in,for of 문은 배열, 객체, 문자열 등과 같은 반복 가능한 객체의 값을 하나씩 가져와 반복할 수 있게끔 한다.
ex)
var fruits = ["사과","바나나","딸기"];
for(var idx in fruits){
console.log(idx+":"+fruits[idx]);
}
fruits의 객체를 하나씩 가져온다.
객체는 for in 구문을 통해서 속성에 접근하여 속성값을 활용할 수 있다.
1. 배열
for(idx in 배열명){
idx : index번호
배열명[idx] : 배열의
}
2. 객체
for(var prop in 객체명){
prop : 객체의 속성
객체명 [prop] : 객체의 속성값
}
<자바스크립트 데이터 화면 출력 명령어>
document.write( ) : ()안에 것을 화면에 출력하라는 메서드
window.alert() : 경고창을 띄워 ()안의 것을 출력하라는 메서드
innerHTML : 가져온 텍스트에 포함된 태그를 인식하여 태그를 적용시킨 후 문자를 보여준다.
innerText : 가져온 텍스트에 포함된 태그도 하나의 텍스트로 인식하여 보여준다.
- for in문을 이용해 테이블 생성 !!!!어려웠음
(1)테이블 선언
<table align="center" id="tab03" width="30%" border="1">
<tr><th>일정순위</th><th>내용</th><th>시간</th><th>비용</th><th>참여자</th></tr></table>
(2)자바스크립트로 배열 선언
<script type="text/javascript">
var weekSchs = [
{plan:"집 정리",time:"10:00~11:00", price:3000, person:1},
{plan:"결혼식",time:"13:00~15:00", price:0, person:5},
{plan:"수영",time:"11:00~12:00", price:5000, person:1}
];
==>배열 안에 객체가 들어가는 것 (여러개 설정 할 경우 이용.)
var schHtml = "";
(3)배열 반복문.. 초기화 선언..안하면 null오류 뜬다고 함
for(var idx in weekSchs){
var sch = weekSchs[idx];
==>각 배열에 있는 단위객체
schHtml +="<tr><td>"+(Number(idx)+1)+"</td>";
(4) 열 생성 for문 (prop) 사용..
for(var prop in sch){
schHtml += "<td>"+sch[prop]+"</td>";
}
schHtml +="</tr>";
}
var tab03 = document.querySelector("#tab03");
tab03.innerHTML +=schHtml;
====================================
<날짜 처리 객체 Date>
1. 1/100초 부터 초, 분, 시간, 일, 월, 년의 날짜와 시간을 처리해주는 내장객체
2. 호출 기능 메서드.
getFullYear() : 연도
getDate() : 날짜
getHours() : 시간
getMinutes() : 분
getSeconds() : 분
getDay() : 요일 index(0~6)
ex)
<body>
<h3 align="center"></h3>
<h3 align="center"></h3>
<h3 align="center"></h3>
<h3 align="center"></h3>
<h3 align="center"></h3>
<h3 align="center"></h3>
<h3 align="center"></h3>
<h3 align="center"></h3>
<script>
var date = new Date();
date.setDate(date.getDate()+20);
var h3Array = document.querySelectorAll("h3");
h3Array[0].innerText=date;
h3Array[1].innerText=date.toLocaleString();
h3Array[2].innerText=date.getFullYear()+"연도";
h3Array[3].innerText=date.getMonth()+"월";
h3Array[4].innerText=date.getDate()+"일";
h3Array[5].innerText=date.getHours()+"시";
h3Array[6].innerText=date.getMinutes()+"분";
h3Array[7].innerText=date.getSeconds()+"초";
========================================
</script>
[11/17 과제]
1. 배열과 객체의 속성과 속성값 선언, 할당형식 2가지를 기술하세요.
자바스크립트에서 데이터를 보관하고 조작하는 방법에는 배열과 객체가 있다.
배열은 순서가 있는 값들의 집합을 만들고 싶을 때 사용(Array)
배열 선언과 할당형식 :
var a = []; ==>배열 선언
var a [1,2,3,...]; ==> 배열 선언과 동시에 입력
console.log(a.length); ==> length 속성으로 배열의 길이를 알 수 있음.
객체는 배열과는 달리 순서가 없다.
객체 선언과 할당형식 :
var obj={name :"hyo",age:28,..};
객체 속성 값 호출하기 :
console.log(obj["name"]);
2. 객체로 영화 예매 내용을 속성으로 선언하여 for in 구문을 이용하여 console에 출력하세요.
-->
<script type="text/javascript">
var movie = {name:"소공녀",price:11000,time:"18:00"};
for(var prop in movie){
console.log(prop+":"+movie[prop]);
}
// 3. json객체로 함수 형식 메서드를 포함하여 기차 예매를 처리하세요.
// 속성 : 출발지, 도착지, 비용, 메서드:buy(티켓 갯수 )
var ktx = {start:"청량리",arrival:"강릉",pay:23000,
buy:function(cnt){
console.log("출발지 : "+this.start);
console.log("도착지 : "+this.arrival);
console.log("총 비용 : "+this.pay*cnt);
}}
ktx.buy(2)
</script>
<!-- 4. 2021년 kbo 정규리그 팀 순위를 배열로 선언하고,
for in 구문으로 테이블에 출력하세요. -->
<h1 align="center">@ 2021 kbo 순위 @</h1>
<table align="center" id="kbo" width="30%" border="1">
<tr><th>순위</th><th>구단 이름</th></tr> </table>
<script type="text/javascript">
var teams = ["KT ","삼성","LG","두산","키움",
"SSG","NC","롯데","KIA","한화"];
var kbo = document.querySelector("#kbo");
var addHtml="";
for(var idx in teams){
addHtml+="<tr><td>"+(Number(idx)+1)+"</td><td>"+teams[idx]+"</td></tr>";
}
console.log("# 최종적으로 만들어진 문자열 #");
console.log(addHtml);
kbo.innerHTML +=addHtml;
</script>
<h2 align="center"></h2>
<h2 align="center"></h2>
<h2 align="center"></h2>
<script type="text/javascript">
// 5.Data객체를 이용해서 화면에 @@년@@월@@일 이라고 h2로 출력하세요.
var date = new Date();
var h2Array = document.querySelectorAll("h2");
h2Array[0].innerText=date.getFullYear()+"년";
h2Array[1].innerText=date.getMonth()+"월";
h2Array[2].innerText=date.getDate()+"일";
</script>
<script type="text/javascript">
//6. for문 안에 for문을 사용해서 구구단을 console로출력
for(var i=2; i<10; i++){
console.log(i+"단 출력 실행 시작 ");
for(var j=1; j<10; j++){
console.log(i+" x "+j+" = "+i*j);
}
}
</script>
</body>
</html>