오늘의 노래!!!
FRIEND THE END
- 아티스트
- 볼빨간사춘기
- 앨범
- 사랑.zip
- 발매일
- 2023.04.16
[0] 중첩for문
중첩 for문 구조
for(초기식 ; 조건식 ; 증감식){
for(초기식 ; 조건식 ; 증감식){
실행문;
}
}
&emps; -- 공간 띄어넘기
<script>
//Q.html문서의 구구단 2단부터 9단까지 출력
let result = document.getElementById("result");
let text1 = "";
for(let i=1; i<=9; i++){
for(let j=2; j<=9; j++){
text1 += `${j} * ${i} = ${j*i} `; //emsp 공간 띄어넘기!!!
}text1 += `<br/>`;
}
result.innerHTML = text1;
</script>
[1] 변수 영역(선언)
// 변수를 선언할 때 사용할 수 있는 데이터 타입
// var(변수), let(변수), const(상수)
//var : 재선언 가능, 재할당 가능
//let : 재선언 불가, 재할당 가능
//const : 재선언 불가, 재할당 불가
// 전역(global)
// 지역(local)
지역변수인지 전역변수인지 잘사용해야한다!!!
<script>
let global = 100;
function Incheon(){
let local = 200;
console.log(`전역변수 : ${global}`);
console.log(`지역변수 : ${local}`);
}
function busan(){
console.log(`전역변수 : ${global}`);
console.log(`지역변수 : ${local}`);
}
// 함수 호출
// Incheon();
busan();
</script>
[2] 카카오맵(API) 불러서 써보기
https://developers.kakao.com/console/app 카카오맵 개발자 모드로 들어가면 원하는 API를 얻을수 있다 ex)로그인 및 지도등등
https://apis.map.kakao.com/web/guide/
사이트에 들어가면 여러 샘플 확인
// 지도 위치를 구현하는 연습을 보았당!! (지도의 중심좌표 경도와 위도 위치 확인할것)
<!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">
<meta name="author" content="bro">
<meta name="date" content="23.05.04">
<meta name="description" content="카카오맵 API사용해보기">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico?=v2" type="image/x-icon">
<title>카카오맵 API</title>
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:500px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=00f447a4dae497988b36be2912665179"></script>
<script>
let mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.43879722411191, 126.67511016524482), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
let map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</body>
</html>[3] 배열 구하기
// 배열 : 여러 타입의 데이터를 하나의 변수에 저장하는 구조(같은타입이여도 상관은 없다)
// 배열 선언은 총 두가지로 나뉜다.
// 배열선언 방법(1)
let arr1 = [];
// 배열선언 방법(2)
let arr2 = new Array(); // 생성자 선언// 배열 방법예시
let arr2 = new Array(); // 생성자 선언
let num = 0;
console.log(typeof arr1); //object
console.log(typeof arr2); //object
console.log(Array.isArray(arr1)); // true
console.log(Array.isArray(arr2)); // true
console.log(Array.isArray(num)); // false
// 이제 배열에 값을 넣어서 가장 큰것과 작은것을 구분해 보겠다 (for문 사용)
//배열값 넣기
arr1 = [11,22,3,47,5];
// 배열값 확인
console.log(arr1);
console.log(arr1[2]); // Array에 인덱스 번호를 따로 출력
// 배열의 가장 큰 값과 가장 작은 값 구함
let max =arr1[0];
let min =arr1[0];
//for문 사용
for (let i in arr1) {
if(arr1[i] > max){
max = arr1[i];
} else if(arr1[i]<min){
min = arr1[i];
}
}
console.log(`max : ${max}, min : ${min}`);
// 배열의 대한 반복문
[4] 배열 예제1 (idx선언 너무 어렵다..)
// 성적서를 입력해서 총합을 구하는걸 구현해보기
// 먼저 큰 틀로 body안에 fieldset과 input를 통해 버튼과 onclick="_()"각각의 함수를 만든다
// 그리고 마지막 Span태그를 통해서 출력값을 나타내준다
// 그리고 콘솔창에는 입력한 값이 나오고 화면창에는 document.gerElementById로 나타내준다.
<!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">
<meta name="author" content="bro">
<meta name="date" content="23.05.03">
<meta name="description" content="배열을 활용한 예제1">
<link rel="shortcut icon" href="favicon.ico?=v2" type="image/x-icon">
<title>배열예제1</title>
</head>
<body>
<fieldset>
<legend>성적계산</legend>
<input type="text" id="score" placeholder="정수만 입력!"><br/><br/>
<input type="button" value="입력" onclick="input()">
<input type="button" value="출력" onclick="output()">
<input type="button" value="총점" onclick="sum()">
<h3>총점은 <span id="sum">0</span>점 입니다.</h3>
<!-- span 태그 인라인요소~~ -->
</fieldset>
</body>
<script>
let arr = []; //배열선언
let idx = 0; //인덱스 번호
function input(){
let score = document.getElementById("score"); //input태그 전체를 의미하고 있다
let value = parseInt(score.value); //입력된 값을 숫자로 변해 value에 넣기
arr[idx] = value;
idx++; // input()함수를 실행할 뗴마다 index 번호가 1씩 증가
score.value=""; //입력 버튼을 눌렀을때 입력창에 작성한 것을 초기화 시킨다.
score.focus(); //초점이 입력창에 향하도록 한다.
total();
}
function output(){
//반복문을 통해서 출력
for(let i in arr){
console.log(`arr[${i}] = ${arr[i]}`);
}
}
function sum(){
let sum = 0;
for(let i in arr){
sum +=arr[i];
}
document.getElementById("sum").innerHTML = sum;
}
</script>
</html>
[5] 배열 활용 ( 추가 삭제, 기능, 기능2, 기능3)
//먼저 fleldset에 각 기능을 사용할 버튼과 함수를 지정해준다
// 각 기능에 맞게 함수에 코드 구현
(1)먼저 추가 삭제기능을 알아보겠다 ( 추가 push 와 unshift / 삭제 pop와 shift)
// 출력을 해보면 push와 pop은 맨오른쪽부터 추가 삭제를 진행하고
// unshift와 shift는 맨왼쪽부터 추가하고 삭제를 진행한다.
<body>
<fieldset>
<legend>배열 추가 삭제</legend>
<input type="button" value="push" onclick="arrPush()">
<input type="button" value="pop" onclick="arrPop()">
<input type="button" value="unshift" onclick="arrUnshift()">
<input type="button" value="shift" onclick="arrShift()">
</fieldset>
</body>
<script>
let arr = [];
let idx = 0;
for(idx=0; idx<5; idx++){
arr[idx] = idx+1;
}
// idx : 5
// arr : [1,2,3,4,5]
console.log(`${idx}`);
<script>
console.log(arr);
// 배열의 맨앞 : index = 0;
// 배열의 맨뒤 : index = 4 == (arr.length-1);
// pusch() : 배열의 맨뒤에 값을추가하는 기능
function arrPush(){
arr.push(idx+1);
idx++;
console.log(arr);
}
// pop() : 배열의 맨뒤에 값을 삭제하는 기능
function arrPop(){
arr.pop();
idx--;
console.log(arr);
}
// Unshuft() : 앞에 숫자 추가
function arrUnshift(){
arr.unshift(idx+1);
idx++;
console.log(arr);
}
// Shift() : 앞에 숫자 삭제
function arrShift(){
arr.shift();
idx--;
console.log(arr);
}
</script>(2) 배열의 기능 (join과 split가 있다)
// join은 배열의 데이터를 합쳐준다/
// spit는 데이터를 나누어 배열을 만든다.
<body>
<fieldset>
<legend>배열의 기능</legend>
<button onclick="arrJoin()">join</button>
<button onclick="arrSplit()">split</button>
</fieldset>
</body>
<script>
// join() : 배열에 있는 데이터를 합친다.
function arrJoin(){
let tel =["010", "1234","1111"];
console.log(tel);
console.log(tel.join(``));
console.log(tel.join(`-`));
}
// split() : 데이터를 나눠서 배열로 만든다.
function arrSplit(){
let text1="비도 오고 그래서 니 생각이 났어";
let words = text1.split(` `); //기준으로 나누어라
console.log(words);
console.log(typeof words);
console.log(Arry.isArry(words));
//데이터 타입 과 배열여부 확인
//01012341111로 바꾸기
let phone = "010-1234-1111";
let as =phone.split(`-`);
let as1 = as.join(``);
console.log(typeof as1);
console.log(Arry.isArry(as1));
}
</script>
(3) 배열의 기능2 (delete과 splice와 Addsplice 있다)
//delete는 지우는것이 아닌 변경을 한다
// splice 인덱스 첫번째부터 지움
// addsplice는 인덱스를 오른쪽끝부터 차례대로 추가 한다
<body>
<fieldset>
<legend>배열의 기능2</legend>
<button onclick="arrDelete()">delete</button>
<button onclick="arrSplice()">splice</button>
<button onclick="arrAddSplice()">addSplice</button>
<br/>
<input type="text" id="txt"/>
<input type="button" onclick="arrDelSplice()" value="rDelSplice"/>
</fieldset>
</body>
<script>
arrk = ["마", "가", "다", "바","나","라"];
// delete : 연산자, 실제로 요소를 삭제하는 것이 아니라 변경
function arrDelete(){
delete arrk[2];
console.log(arrk);
arrk[2] = "new";
console.log(arrk);
}
function arrSplice(){
console.log(arrk);
// splice(i, n);
// i번 인덱스부터 n개 삭제
arrk.splice(2, 2);
arrk.splice(0, 2);
console.log(arrk);
}
function arrAddSplice(){
console.log(arrk);
// splice(i, n. "m1", "m2");
// i번 인덱스부터 n개 삭제하고 "m"값을 추가한다.
arrk.splice(0, 4,"하","지","마");
console.log(arrk);
arrk.splice(0,0,"게","임");
console.log(arrk);
}
</script>
(3) 배열의 기능3 (slice과 concat 있다)
<body>
<fieldset>
<legend>배열의 기능3</legend>
<button onclick="arrSlice()">slice</button>
<button onclick="arrConcat()">concat</button>
</fieldset>
</body>
<script>
let arr1=[1,2,3,4,5];
let arr2=['a','b','c','d','e'];
function arrSlice(){
//slice(i, n) : 인덱스 i번째 부터 보여주고, 인덱스 n번째 부터 잘라냄
let newArr1 = arr1.slice(1,3);
let newArr2 = arr2.slice(2);
console.log(arr1);
console.log(newArr1);
// arr2에서 c,d,e만 출력
console.log(arr2);
console.log(newArr2);
}
// Concat 배열이 [~~~] 합쳐지는것
function arrConcat(){
console.log(arr);
console.log(arr1);
console.log(arr2);
let newArr = arr.concat(arr1, arr2);
console.log(newArr);
}
</script>[6] 객체
// 객체(Object) : 다른것과 식별이 가능한것
// 자신만의 고유한 특성과 행동을 가진다
// 다른 객체들과 상호작용이 가능하다
// 배열 선언방법 2가지
// let arr1=[];
// let arr2= new Array();
<!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">
<meta name="author" content="bro">
<meta name="date" content="23.05.04">
<meta name="description" content="객체object에 대해 알기">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico?=v2" type="image/x-icon">
<title>객체 Object</title>
</head>
<body>
</body>
<script>
// 객체(Object) : 다른것과 식별이 가능한것
// 자신만의 고유한 특성과 행동을 가진다
// 다른 객체들과 상호작용이 가능하다
// 배열 선언방법 2가지
// let arr1=[];
// let arr2= new Array();
// 객체 선언방법 2가지가 있다
let obj1={};
let obj2=new Object();
console.log(`obj1 타입 : ${typeof obj1}`);
console.log(`obj2 타입 : ${typeof obj2}`);
console.log(`obj1 배열여부 : ${Array.isArray(obj1)}`);
console.log(`obj2 배열여부 : ${Array.isArray(obj2)}`);
//키(key) : 값(value)
let car = {
company : "hyundai",
name : "Sonata",
type : "Diesel",
color : "Gray"
};
car.name = "Santafe"; //기존에 있고 >> 덮어쓰기
car.num = "321두1234" //기존에 없던 키 >> 추가
console.log(car);
let person = new Object();
person["name"] = "홍길동";
person["age"] = 20;
person["phone"] = "010-1234-5678";
person.addr = "인천일보 아카데미";
console.log(person);
for(let i in car){
console.log(`i : ${i}, car[${i}] : ${car[i]}`);
}
for(let i in person){
document.write(`i:${i}, person[${i}] : ${person[i]} <br/>`);
}
</script>
</html>
'IT코딩공부!' 카테고리의 다른 글
| #28 JS(핀볼이랑, 빙고게임 만들기) (0) | 2023.05.10 |
|---|---|
| #27 JS( ATM기 만들어보기ex)함수사용, Event생성 (0) | 2023.05.08 |
| #25 JS(조건,반복) 계산기2!!! (0) | 2023.05.03 |
| #24 HTML (스타일, 상속, 우선순위, overflow, JS자바스크립트 시작!)++ JS개념, 자료형과 변수형, 연산자(증감,대입,비교,논리)함수, 계산기 까지!!! (2) | 2023.05.02 |
| #23 HTML ( input입력태그, 검색, 선택자1~4) (0) | 2023.05.01 |
