30일차 2023-04-18
2023. 4. 18. 19:08ㆍJavaScript
Html5
dl, dt, dd block element라는 것
DL07.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DL07.html</title>
</head>
<body>
<!--
dl태그:Definition List,용어 목록을 나열할때
사용하는 태그
하위요소로
dt(Definition Term)태그와
dd(Definition Description)태그를 갖는다
-block element
-메뉴 표시할때 주로 사용
-->
<div>
<h2>DL및 자식태그인 DT및 DD태그 연습</h2>
<dl>
<dt>HTML</dt>
<dd>
HTML은 HyperText Markup Language의 약자로
매우 쉽고
빠르게 웹 문서를 만들 수 있는 마크업 언어이다.
</dd>
<dt>CSS</dt>
<dd>
CSS는 Cascading Style Sheet의 약자로
HTML문서의
스타일을 정의하는 규약이다.
</dd>
<dt>JAVASCRIPT</dt>
<dd>
자바스크립트는 HTML문서에서 사용할 수
있는
프로그래밍 언어로 HTML문서에 다양한
효과를 줄때 사용
한다.
</dd>
</dl>
<h2>DL로 메뉴구현</h2>
<dl>
<dt>회사소개</dt>
<dt>인재채용</dt>
<dt>제휴약관</dt>
<dt>개인정보처리방침</dt>
</dl>
</div>
</body>
</html>결과)
DL및 자식태그인 DT및 DD태그 연습
- HTML
- HTML은 HyperText Markup Language의 약자로 매우 쉽고 빠르게 웹 문서를 만들 수 있는 마크업 언어이다.
- CSS
- CSS는 Cascading Style Sheet의 약자로 HTML문서의 스타일을 정의하는 규약이다.
- JAVASCRIPT
- 자바스크립트는 HTML문서에서 사용할 수 있는 프로그래밍 언어로 HTML문서에 다양한 효과를 줄때 사용 한다.
DL로 메뉴구현
- 회사소개
- 인재채용
- 제휴약관
- 개인정보처리방침
대부분 ul, li태그 많이 씀
ULOL08.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ULOL08.html</title>
</head>
<body>
<!--
UL태그:Unordered List(순서가 없는 목록)
순서가 없는 목록을 나타낼때 사용하는 태그
목록을 나타내기 위해서
하위 요소로 li태그(block element)를 가짐
속성- type:disc(●-기본),square(■),circle(○)
block element
단,type속성에 1(number순)이나 A,a(알파벳순),I,i(로마숫자)
도 지정가능
OL태그:Ordered List(순서가 잇는 목록)
하위요소로 li태그를 가짐
속성
type:1(기본)이나 A,a(알파벳순),I,i(로마숫자)
start:순서의 시작 값 지정(ol만 갖고있는 속성)
li태그에도 type속성을 지정할 수 있다.
-->
<div>
<h2>당신이 좋아하는 스포츠는?</h2>
<!--
웹표준에 어긋남
<ul type="circle">
-->
<ul style="list-style-type: square;background-color: yellow;">
<li style="background-color: red;">축구</li>
<li style="list-style-type:circle ;">배구</li>
<li>농구</li>
</ul>
<h2>당신이 좋아하는 영화 장르는?</h2>
<ul style="list-style-type:upper-roman;">
<li>액션</li>
<li>SF</li>
<li>스펙터클</li>
<li>범죄/스릴러</li>
</ul>
<h2>당신이 좋아하는 영화 장르는?</h2>
<ol style="list-style-type:upper-roman;" start="3">
<li>액션</li>
<li>SF</li>
<li>스펙터클</li>
<li>범죄/스릴러</li>
</ol>
<h2>UL로 메뉴구현</h2>
<ul>
<li>회사소개</li>
<li>인재채용</li>
<li>제휴약관</li>
<li>개인정보처리방침</li>
</ul>
</div>
</body>
</html>결과)
당신이 좋아하는 스포츠는?
- 축구
- 배구
- 농구
당신이 좋아하는 영화 장르는?
- 액션
- SF
- 스펙터클
- 범죄/스릴러
당신이 좋아하는 영화 장르는?
- 액션
- SF
- 스펙터클
- 범죄/스릴러
UL로 메뉴구현
- 회사소개
- 인재채용
- 제휴약관
- 개인정보처리방침
a태그로 get방식으로 값을 전달하고 href인 링크로 주소를 연결한다.
웬만하면 거의 절대주소로 링크를 건다.
상대주소 개념으로 디렉터리
./: 현재 디렉터리
../: 상위 디렉토리
나중에 가면 쿼리 스트링으로 id, password값을 넘겨서 유저의 page이동을 할 수 있다.
A09.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A09.html</title>
</head>
<body>
<!--
a태그:Hyper Link기능을 제공하는 태그.
속성:
href:이동할 페이지 경로 혹은 url주소
target:이동할 페이지를 보여줄 대상 지정
_self(기본값):자기자신의 브라우저에
이동할 페이지 표시
_top
_parent
_blank(새창(탭)으로 페이지가 열림)
-inline element
※중요
a태그를 이용해 이동할 페이지로 값을 전달할수 있다.
쿼리스트링을 이용해서 값을 전달
쿼리스트링란?
-페이지명 다음에 ?로 연결한 문자열
?이름=값의 쌍으로 전달
여러개 전달시에는 &로 연결
예]<a href="aTag.html?name=hong&age=10&id=kim">클릭</a>
a태그로 값을 전달하면 get방식
-링크 거는 방법
절대주소: 링크거는 페이지의 위치가 바뀌더라도
주소가 절대로 변하지 않음
https://~로 링크를 걸거나
/(홈 디렉토리의 루트를 의미)로 시작하거나
예]http://www.naver.com:8080/member/login.html
/는 http://www.naver.com:8080(도메인)까지를
의미
<a href="http://www.baeoomart.co.kr/member/login.html">로그인</a>
상대주소: 링크거는 페이지의 위치에 따라
주소가 상대적으로 변함
. :현재 디렉토리를 의미
.. :상위 디렉토리
※이동하려하고 하는 페이지가 같은 디렉토리에 없다면
그 페이지가 속한 현재 디렉토리의 상위 디렉토리를
찾아간다(../시작)
같은 디렉토리에 존재한다면 ./로 시작(단 ./는 생략 가능)
-->
<div>
<h2>A태그</h2>
<h3>_self(현재 탭에 이동할 웹 문서의 내용을 표시:디폴트)</h3>
<a href="ULOL08.html">target속성 미 지정(상대경로)</a><br/>
<a href="http://127.0.0.1:5500/HTML5/ULOL08.html">target속성 미 지정(절대경로-http로 시작)</a><br/>
<a href="/HTML5/ULOL08.html">target속성 미 지정(절대경로-/로 시작)</a>
<h3>_blank(현재 탭이 아닌 새로운 탭에 이동할 웹 문서의 내용을 표시)</h3>
<a href="../JAVASCRIPT_ES5/Variable01.html" target="_blank">target속성 지정(_blank)</a>
<h3>쿼리 스트링으로 데이타 전달</h3>
<a href="https://www.naver.com:443?username=kim&name=가길동&age=20">네이버로 데이타 전달</a>
</div>
</body>
</html>결과)
A태그
_self(현재 탭에 이동할 웹 문서의 내용을 표시:디폴트)
target속성 미 지정(상대경로)target속성 미 지정(절대경로-http로 시작)
target속성 미 지정(절대경로-/로 시작)
_blank(현재 탭이 아닌 새로운 탭에 이동할 웹 문서의 내용을 표시)
target속성 지정(_blank)쿼리 스트링으로 데이타 전달
네이버로 데이타 전달
inline element로 width, height다 넣어서 크기 지정 가능
src는 이미지 파일 위치 경로
IMG10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMG10.html</title>
</head>
<body>
<!--
img태그: 이미지를 표시할때 사용하는 태그
속성:
src: 해당 이미지의 경로(절대경로 혹은 상대경로)
alt:대체 텍스트(이미지가 표시안될때 텍스트 표시됨)
width:이미지의 가로폭 지정
height:이미지의 세로폭 지정
usemap: 이미지를 map으로 사용할때 값 지정
값지정시 반드시 앞에 #을 붙인다.
map태그와 쌍으로 사용한다
- inline element
- 종료태그가 없다
※width와 height 미 지정시 이미지 원본 크기 그대로 표시됨.
a태그를 이용해서 이미지에 링크걸때는 반드시
border값을 0으로
안그러면 테두리가 자동적으로 생김(IE의 경우)
-->
<h2>img태그</h2>
<h3>이미지 원본 크기대로 표시</h3>
<img src="../Images/java_logo.png" alt="자바로고 이미지"/>
<h3>이미지 원본 크기 조정</h3>
<img src="../Images/java_logo.png" alt="자바로고 이미지" width="100" height="100"/>
<!--아래 처럼 CSS속성으로 값 줄때는 단위 생략시 제대로 안나옴-->
<img src="../Images/java_logo.png" alt="자바로고 이미지" style="width:100px;height:100px"/>
<h3>이미지에 링크 걸기</h3>
<a href="https://www.java.com">
<img src="../Images/java_logo.png" alt="자바로고 이미지" style="width:100px;height:100px"/>
</a>
</body>
</html>결과)
MAP태그는 이미지를 구역분할하여 링크 같은 것을 하게 만드는 태그
Map11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map11.html</title>
</head>
<body>
<!--
MAP태그:이미지의 영역을 분할해서 마치 지도처럼
사용하기 위함. 즉 영역별로 링크 주소를
다르게 걸수 있음.
img태그와 쌍으로 사용한다
사용법:
<map name="img태그의 usemap속성에 지정한 값">
<area/>:태그를 이용해서 이미지의 영역 분할
</map>
area태그:map의 하위태그로 이미지를 분할할때
사용하는 태그
area태그의 속성:
href-링크 주소 지정
shape- circle(circ),rectangle(rect), polygon(poly)
coords-shape속성값에따라 각 분할 영역을 지정하는
좌표값을 설정
circ(원)일때 좌표지정 -
coords="x좌표,y좌표,반지름"
rect(사각형)일때 좌표지정 -
coords="left좌표,top좌표,right좌표,bottom좌표"
poly(다각형)일때 좌표 지정-
coords="각 꼭지점의 x좌표 ,y좌표
-->
<h2>이미지 맵</h2>
<img src="../Images/korea.png" alt="대한민국지도" usemap="#korea"/>
<map name="korea">
<area href="https://www.seoul.go.kr" shape="circle" coords="192,135,15" alt="서울"/>
<area href="https://www.busan.go.kr" shape="poly" coords="372,343,341,354,330,373,371,369" alt="부산"/>
<area href="https://www.jeju.go.kr" shape="rect" coords="117,520,202,551" alt="제주도"/>
</map>
</body>
</html>결과) 1. 번 서울을 원으로 링크 걸림, 7번 부산 다각형으로 링크 걸림, 제주도 사각형으로 링크 걸림
Table12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table12.html</title>
<style>
/* border="50"과 같다 */
table.standard{
border:50px gray solid;
}
table.standard td{
border:1px gray solid;
}
table.standard{
/* bgcolor="green"과 같다 */
background-color: green;
/* cellspacing="20"과 같다*/
border-spacing: 20px;
/* width="300" height="300"과 같다*/
width:300px;
height:300px;
}
/* cellpadding="20"와 같다*/
table.standard td{
padding:20px;
}
.wrapper{
margin: 0 auto;
width:300px;
}
</style>
</head>
<body>
<!--
table태그: 표 형태로 컨텐츠를 표시하기 위한 태그
하위태그로 아래와 같은 태그를 가질 수 있다.
tr(table row)태그: 행을 표시한다.
td(table data cell)태그:
하나의 cell(칸)을 표시한다.고로
반드시 tr태그의 하위 태그로 존재해야 한다.
데이타는 td태그사이에 넣어야 한다
.
th(table header)태그:역시 cell을 표시하는 태그이나
표의 헤더를
표시할때 사용
글자가 볼드체 이고 가운데 정렬
-아래는 웹 표준이나 웹 접근성을 고려한 태그(스크린 리더)
caption태그:테이블의 제목 표시
summary:테이블의 요약 설명
tbody태그:표에서 내용역역에 해당하는 부분을 의미적으로
구분하기 위한 태그
thead태그: 표에서 헤더역역에 해당하는 부분을 의미적으로
구분하기 위한 태그
tfoot태그:표에서 푸터역역에 해당하는 부분을 의미적으로
구분하기 위한 태그
[table태그의 속성]
height:표의 세로폭 지정(숫자나 %로 지정)
width:표의 가로폭 지정(숫자나 %로 지정)
border:테이블의 테두리 두께 지정
cellpadding:cell과 컨텐츠(내용)사이의 여백(기본값:1)
cellspacing:cell과 cell사이의 여백(기본값:2)
align:left(기본값),center,right
bgcolor:테이블의 백그라운드 색 지정
[tr태그의 속성]
bgcolor:행의 백그라운드 색 지정
align:행을 구성하는 모든 cell의 내용의 정렬을 지정
(left(기본값),center,right)
height:행의 높이를 지정
[td태그의 속성]
align:cell의 내용의 정렬을 지정(left(기본값),center,right)
height:cell의 높이를 지정
width:cell의 가로폭 지정
bgcolor:cell의 배경색 지정
colspan:열을 병합할때
rowspan:행을 병합할때
표의 기본 형태
<table >
<tr > :행을 의미
<td ></td><td></td> :cell을 의미
</tr>
<tr>
<td></td><td></td>
</tr>
....
</table>
block 엘리먼트
-->
<h2>table태그</h2>
<h3>table태그의 속성들</h3>
<h4>table태그의 속성으로 테이블 만들기-웹표준에 어긋남</h4>
<table bgcolor="green" border="50" cellpadding="20" cellspacing="20" width="300" height="300" align="center">
<tr>
<td>가</td><td>나</td>
</tr>
<tr>
<td>다</td><td>라</td>
</tr>
</table>
<h4>CSS적용으로 테이블 만들기</h4>
<div class="wrapper">
<table class="standard">
<tr>
<td>가</td>
<td>나</td>
</tr>
<tr>
<td>다</td>
<td>라</td>
</tr>
</table>
</div>
<h3>tr태그의 속성들</h3>
<table border="1" bgcolor="red" width="200" height="200">
<!--
웹표준에 어긋남
<tr align="center" height="150">
-->
<tr style="text-align:center;height: 150px;">
<td>가</td>
<td>나</td>
</tr>
<tr style="background-color: yellow;">
<td>다</td>
<td>라</td>
</tr>
</table>
<h3>td태그의 속성들</h3>
<table border="1" bgcolor="red" width="200">
<tr style="text-align:center;height: 150px;">
<td style="text-align: right;">가</td>
<td style="background-color: yellow;">나</td>
</tr>
<tr>
<td style="width:150px;height: 100px;">다</td>
<td>라</td>
</tr>
</table>
<h3>셀 병합</h3>
<table border="1" width="400" height="400" style="text-align: center;">
<tr>
<td>1행1열</td>
<td rowspan="2">1행2열</td>
<td colspan="2">1행3열</td>
</tr>
<tr>
<td rowspan="2">2행1열</td>
<td>2행3열</td>
<td rowspan="2">2행4열</td>
</tr>
<tr>
<td colspan="2">3행2열</td>
</tr>
</table>
<h3>테이블의 백그라운드 색과 여백을 이용한 테두리 선 긋기</h3>
<table style="width:400px;height:400px;text-align: center;background-color: red;border-spacing: 1px;">
<tr style="background-color: white;">
<td>1행1열</td>
<td rowspan="2">1행2열</td>
<td colspan="2">1행3열</td>
</tr>
<tr style="background-color: white;">
<td rowspan="2">2행1열</td>
<td>2행3열</td>
<td rowspan="2">2행4열</td>
</tr>
<tr style="background-color: white;">
<td colspan="2">3행2열</td>
</tr>
</table>
<h3>웹 접근성을 고려한 테이블</h3>
<table summary="직원들의 연봉정보를 표시하는 표입니다" style="background-color: black;border-spacing: 1px;width:400px;">
<caption>직원 연봉표</caption>
<tfoot>
<tr style="background-color: white;">
<td>총합</td>
<td colspan="2">18,000</td>
</tr>
</tfoot>
<tbody>
<tr style="background-color: white;">
<td>1</td>
<td>가길동</td>
<td>5,000</td>
</tr>
<tr style="background-color: white;">
<td>2</td>
<td>나길동</td>
<td>3,000</td>
</tr>
<tr style="background-color: white;">
<td>3</td>
<td>다길동</td>
<td>10,000</td>
</tr>
</tbody>
<thead>
<tr style="background-color: white;">
<th>번호</th>
<th>이름</th>
<th>연봉</th>
</tr>
</thead>
</table>
<h3>테이블 연습</h3>
<table style="background-color:red;border-spacing:1px;width:600px;">
<tr style="background-color:yellow;height:100px;text-align:left">
<th colspan="3" >오늘의 수입 지출</th>
</tr>
<tr style="background-color:cyan">
<th>내용</th>
<th>수입</th>
<th>지출</th>
</tr>
<tr style="background-color:white">
<td>월급</td>
<td>1,000,000</td>
<td></td>
</tr>
<tr style="background-color:white">
<td>점심값</td>
<td></td>
<td>5,000</td>
</tr>
<tr style="background-color:white">
<td>부모님 선물</td>
<td></td>
<td>30,000</td>
</tr>
<tr style="background-color:white;text-align:center;">
<td rowspan="3" style="background-color:green">총계</td>
<td>수입</td>
<td>지출</td>
</tr>
<tr style="background-color:white">
<td>1,000,000</td>
<td>35,000</td>
</tr>
<tr style="background-color:white">
<td>남은 돈</td>
<td>965,000</td>
</tr>
</table>
</body>
</html>결과)
table태그
table태그의 속성들
table태그의 속성으로 테이블 만들기-웹표준에 어긋남
| 가 | 나 |
| 다 | 라 |
CSS적용으로 테이블 만들기
| 가 | 나 |
| 다 | 라 |
tr태그의 속성들
| 가 | 나 |
| 다 | 라 |
td태그의 속성들
| 가 | 나 |
| 다 | 라 |
셀 병합
| 1행1열 | 1행2열 | 1행3열 | |
| 2행1열 | 2행3열 | 2행4열 | |
| 3행2열 | |||
테이블의 백그라운드 색과 여백을 이용한 테두리 선 긋기
| 1행1열 | 1행2열 | 1행3열 | |
| 2행1열 | 2행3열 | 2행4열 | |
| 3행2열 | |||
웹 접근성을 고려한 테이블
| 총합 | 18,000 | |
| 1 | 가길동 | 5,000 |
| 2 | 나길동 | 3,000 |
| 3 | 다길동 | 10,000 |
| 번호 | 이름 | 연봉 |
|---|---|---|
테이블 연습
| 오늘의 수입 지출 | ||
|---|---|---|
| 내용 | 수입 | 지출 |
| 월급 | 1,000,000 | |
| 점심값 | 5,000 | |
| 부모님 선물 | 30,000 | |
| 총계 | 수입 | 지출 |
| 1,000,000 | 35,000 | |
| 남은 돈 | 965,000 | |
JavaScript
Operator02.html
추가)
var arr1객체와 arr2의 비교는 값이 아닌 주소 비교
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Operator02.html</title>
<script>
var arr1 = ['가길동',20];//new Array('가길동',20)와 완전동일.자바의 컬렉션과 같다.
var arr2 = ['가길동',20];//그래서 객체 생성은 Object 타입
console.log('arr1:%s,arr1의 타입:%s',arr1,typeof arr1);
console.log(arr1==arr2);//false //이것은 그래서 주소 값 비교// ex)a10111과 a21022 결과 false
console.log(arr1===arr2);//false
arr1 = arr2;//arr2를 arr1에 대입 주소값 자체 복사
console.log(arr1==arr2);//true
console.log(arr1===arr2);//true
//3]논리연산자: && ,||, !
//우선순위 ! > && > ||
console.log('[논리 연산자]');
console.log( 3 > 2 || 5 < -10 && !(3-4));
//4]증감 연산자 : ++,--
console.log('[증감 연산자]');
var num =10;
num++;
console.log('num:%s',num++);
console.log('num:%s',num);
//5]단축 표현식: +=,-=,*=,/=,%=
console.log('[단축 연산자]');
console.log(num%=5)
</script>
</head>
<body>
</body>
</html>
Array03_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array03_1.html</title>
<script>
/*
배열:자바와는 다르게 여러 타입(자료형)의 값을
저장할 수 있는 자료구조(메모리)(자바의 컬렉션과 같다)
그리고 배열의 크기가 고정되어 있지 않다
선언방법:
var 배열명 = new Array(); // var 배열명 =[]랑 완전 동일
var 배열명 = new Array(배열크기);
var 배열명 = new Array(요소1,요소2,.....);
*/
//배열 선언 방법1-배열 크기 미지정]
//-배열 크기가 0인 배열이 생성됨
//-최종적으로 넣은 마지막 인덱스 값에따라 배열 크기가 결정됨.
var arr1 = new Array();//var arr1=[]와 동일([]은 배열 리터럴)
console.log('arr1의 값:%O,arr1의 타입:%s',arr1,typeof arr1);
//배열 크기:배열명.length.자스는 동적으로 배열 크기가 변한다
console.log(arr1.length);
arr1[3]=100;
console.log(arr1.length);
arr1[5]=200;
console.log(arr1.length);
for(var i=0;i< arr1.length;i++){
console.log('arr1[%d]:%s',i,arr1[i]);
}
//arr1[0]:배열 요소명. 0은 배열의 인덱스
//초기화]
arr1[0]=1;
arr1[1]=new Date();
arr1[2]=3.14;
arr1[3]=true;
arr1[4]='자바스크립트';
for(var i=0;i< arr1.length;i++){
console.log('arr1[%d]:%s,타입:%s',i,arr1[i],typeof arr1[i]);
}
arr1.push(500);
arr1.push(600);
console.log(arr1.length);
//배열 선언 방법2-배열 크기 지정]
var arr2 = new Array(3);//3이 배열의 크기.단 배열크기는 가변적이다
console.log('배열의 크기:',arr2.length);
arr2[5]=100;
console.log('배열의 크기:',arr2.length);
//배열 선언 방법3-선언과 동시에 초기화(new 사용)]
var arr3 = new Array('가길동',20,'가산동',new Date());
console.log('배열의 크기:',arr3.length);
for(var i=0;i< arr3.length;i++){
console.log('arr3[%d]:%s,타입:%s',i,arr3[i],typeof arr3[i]);
}
arr3.push('010-1234-5678');
console.log('배열의 크기:',arr3.length);
//배열 선언 방법4]
//선언과 동시에 초기화(new 미 사용,[]대괄호 사용(배열 리터럴))
var arr4 = ['한소인',10,'자바전문과정',{소유주:'가길동',설립일:1970}];
arr4[arr4.length]=30;
console.log('배열 크기:',arr4.length);
for(var i=0;i< arr4.length;i++){
console.log('arr4[%d]:%O,타입:%s',i,arr4[i],typeof arr4[i]);
}
console.log(arr4[3]['소유주']);
console.log('============================');
for(var i=0;i< arr4.length;i++){
//console.log(typeof arr4[i] === 'object');
if(typeof arr4[i] === 'object'){
for(var key in arr4[i]){
console.log('%s : %s',key,arr4[i][key]);
}
}
else
console.log(arr4[i]);
}
//for(var 변수 in 배열 혹은 객체)문은 객체({})와 배열에 모두 사용가능
//배열일때는 순회하면서 인덱스를 꺼내오고
//객체일때는 .. 키를 꺼내온다
var arr5=['가','나','다'];
console.log('[일반 for문 형식]');
for(var k=0;k < arr5.length;k++){
console.log(arr5[k]);
}
console.log('[for~in 문 형식]');
for(var index in arr5)
console.log(arr5[index]);
var obj ={name:'가길동',age:20,addr:'가산동'};
for(var key in obj)
console.log(obj[key]);//obj.key는 undefinded 즉 obj에는 key라 키가 없다
</script>
</head>
<body>
<fieldset>
<legend>학생의 평균 구하기</legend>
학생 수 입력 : <input type="text" id="students" />
<button onclick='getAverage()'>평균 구하기</button>
</fieldset>
<script>
//배열 선언]
var score=[];
var textNode=document.querySelector('#students');
//console.log(textNode,parseInt(textNode.value));
function getAverage(){
console.log('사용자 입력값:',parseInt(textNode.value));
var numberOfStudents = parseInt(textNode.value);
if(isNaN(numberOfStudents)){
alert('숫자만 입력하세요');
return;
}
//학생수 만큼 점수 입력받고 총합 및 평균 구하기]
var total=0;
for(var i=0; i < numberOfStudents;i++){
score.push(parseInt(prompt(i+1+'번째 점수를 입력하세요?')));
total+=score[i];
}
console.log('[학생의 성적 출력]');
for(var index in score){
console.log('%d번째 학생:%d',parseInt(index)+1,score[index]);
}
console.log('총점:%d,평균:%f',total,total/numberOfStudents);
}
</script>
</body>
</html>결과)
Array03_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array03_2.html</title>
<script>
console.log('[배열의 주요 메소드]');
var method=[];
console.log("1.배열의 요소 추가 : 인덱스 지정 혹은 push()함수 혹은 unshift()함수");
//1.인덱스를 지정해 추가
method[0]=100;
//2.push() 메서드 사용-배열의 끝에 요소를 추가.새로운 길이를 반환
console.log(method.push(200));
//3.unshift() 메서드 사용-배열의 맨 앞에 요소를 추가,
// 기존 요소들의 인덱스 값이 1씩 증가,새로운 길이를 반환
console.log(method.unshift(300));
//출력
for(var i in method)
console.log('%d인덱스방:%s',i,method[i]);
console.log("2.배열의 요소 꺼내오기 : 인덱스 지정 혹은 pop()함수 혹은 shift()함수");
console.log(method[1]) ;
console.log('인덱스로 꺼내 온 후 배열 크기:',method.length);
//pop():맨 끝에서 요소를 가져오고 배열에서 제거
console.log('꺼내온 요소:',method.pop());
console.log('pop()으로 꺼내 온 후 배열 크기:',method.length);
/*
console.log('꺼내온 요소:',method.pop());
console.log('꺼내온 요소:',method.pop());
console.log('pop()으로 다 꺼내 온 후 배열 크기:',method.length);
console.log('모두 꺼내온후:',method.pop()); //undefined 즉 꺼 내올게 없다
console.log(method.pop()===undefined);*/
//shift():맨 앞에서 요소를 가져오고 배열에서 제거
console.log('꺼내온 요소:',method.shift());
console.log('shift()으로 다 꺼내 온 후 배열 크기:',method.length);
console.log('3.배열 요소의 일부를 추출하기');
//4.slice(start[,end])-start인덱스부터 끝까지 혹은
// start부터 end-1인덱스까지의 배열요소로 새로운 배열을 생성.
// 인자가 음수면 우측(마지막 원소)에서부터 -1,-2...
//끝 인덱스 지정시 끝인덱스(음수 혹은 양수) -1 하자
method.push(200);
method.push(300);
method.push(400);
method.push(500);
console.log(method);//[100, 200, 300, 400, 500]
var method_=method.slice(3);
console.log('원본 배열:',method);
console.log('추출한 배열:',method_);
method_=method.slice(2,4);
console.log('추출한 배열:',method_);
method_=method.slice(2,-1);
console.log('추출한 배열:',method_);
method_=method.slice(-3,-1);
console.log('추출한 배열:',method_);
console.log('4.배열 요소 삭제 및 동시에 추가하기');
//5.splice(start[,삭제할 개수[,추가할 값,...]])
// 추가할 값들은 start와 삭제한 사이에 추가됨.(가위로 자르는 개념)
// ※원본배열이 변경됨. 삭제한 요소로 새로운 배열이 생성됨.
// 삭제 및 추가할 수도 있다
//method_=method.splice(2);//2번 인덱스부터 끝까지 삭제
//console.log('원본 배열:',method);
//console.log('삭제한 배열:',method_);
//method_=method.splice(2,2);//2번 인덱스부터 2개요소 삭제
//console.log('원본 배열:',method);
//console.log('삭제한 배열:',method_);
//method_=method.splice(2,2,'삼백','사백','오백');//2번 인덱스부터 2개 요소 삭제하고 그 사이에 요소 3개추가
//console.log('원본 배열:',method);
//console.log('삭제한 배열:',method_);
method_=method.splice(2,0,'삼백','사백','오백');//2번 인덱스부터 0개 요소 삭제하고 그 사이에 요소 3개추가
console.log('원본 배열:',method);//[100, 200, '삼백', '사백', '오백', 300, 400, 500]
console.log('삭제한 배열:',method_); //[]
console.log('5.요소 찾기');
//6. 배열 요소 찾기
//indexOf(), lastIndexOf()- 배열의 요소 중에
//특정한 값의 인덱스 반환
//찾으면 해당 인덱스를, 찾지 못하면 -1을 반환.
method.push('오백');
console.log(method.indexOf('오백'));
console.log(method.lastIndexOf('오백'));
console.log(method.indexOf('백'));
//7.map함수:배열 내의 모든 요소 각각에 대하여 인자로 전달된 콜백 함수를 적용하여 새로운 배열을 반환
// 즉 배열의 모든 요소를 변경하는 함수이다
//arr.map(callback(currentValue[, index[, array]])[, thisArg])
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
var arr=[1,2,3,4,5];
var arr_=arr.map(function(item,index){
console.log('currentValue:%s,index:%s',item,index);
return item *2;
});
console.log('원본 배열:',arr);
console.log('변경된 배열:',arr_);
var not_ =['A','B','C'];
var not_new=not_.map(function(item){
console.log('currentValue:%s',item);
return item.toLowerCase();
});
console.log(not_new);
console.log('7.배열의 요소수를 하나로 만들기')
//8.reduce함수:배열의 각 요소에 대해 주어진 **리듀서**(reducer) 함수를 실행하고,
// 하나의 결과값을 반환
//arr.reduce(callback[, initialValue])
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
console.log(arr.reduce(function(pre,curr){return pre+curr;}));
console.log(not_.reduce(function(pre,curr){return pre+curr;}));
console.log('8.배열의 모든 요소를 하나의 문자열로 만들기');
//join([구분자])-배열의 모든 요소들을 구분자로 연결하여 하나의 문자열로 변환.(쉼표(,)가 기본 값)
console.log(arr.join(),typeof arr.join());
console.log(arr.join('♥'));
console.log('9.배열의 모든 요소를 거꾸로 재배치하기');
//reverse()-배열의 요소 순서를 반대로 하여 반환
//원본 배열 변경
console.log(arr.reverse());
</script>
</head>
<body>
</body>
</html>결과)
'JavaScript' 카테고리의 다른 글
| 34일차 2023-04-24 (0) | 2023.04.24 |
|---|---|
| 33일차 2023-04-21 (0) | 2023.04.21 |
| 32일차 2023-04-20 (1) | 2023.04.20 |
| 31일차 2023-04-19 (0) | 2023.04.19 |
| 29일차 2023-04-17 (0) | 2023.04.17 |