array.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>Document</title>
</head>
<body>
<script>
// 배열 메서드 암기 X, 기본 구문은 암기하기 ★★★★★
let foods = ['🍕', '🍔', '🥩', '🥨', '🍖'];
console.log(foods[foods.length-1]);
// 배열의 순환 for 문
for(let i=0; i<foods.length; i++) {
console.log(foods[i]);
}
// 배열 메서드 forEach 문
// 여러줄
foods.forEach((val, index, arr)=> {
console.log(val);
console.log(index);
console.log(arr);
})
// 한줄 → () , {} 생략가능
foods.forEach(val => console.log(val));
// for ... of 문
// ↓ 값만 받음 // ↑↓ 똑같음 ★
for(let val of foods) {
console.log(val);
}
</script>
</body>
</html>
array2.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>Document</title>
</head>
<body>
<script>
// 💚 배열 선언
let arr = new Array();
let arr2 = []; // 빈배열, 배열 리터럴 방식 💚
let arr3 = [1, 2 , 3, 4, 5];
console.log(arr3);
console.log(arr3[0]);
console.log(arr3[1]);
console.log(arr3.length);
console.log(arr3.length-1); // 마지막 인덱스
let fruits = ['🐥', '🐷','🐹','🐰','🐻'];
fruits.push('🧡'); // 마지막 추가
fruits.unshift('💚'); // 맨앞 추가
fruits.shift(); // 맨앞 제거
fruits.pop(); // 마지막 제거
console.log(fruits);
// (1)
// 간단, 편리
fruits.forEach((item, index) => {
console.log(item, index); // 배열의 값을 가지고 옴
console.log(index);
})
// (2)
for(let i=0; i<fruits.length; i++) {
console.log(fruits[i] , i); // 마지막까지 출력
}
// (3)
for(let value of fruits) {
console.log(value); // 배열요소의 값만 받고 value에 담김
}
// 💚 배열 메서드
// pop() , push() , shift() , unshift()
// join() 배열을 문자로
// indexOf() 순번 반환 (있으면 해당 인덱스, 없으면 -1)
// includes() 배열에 있나 없나 체크(있으면 true 없으면 false)
// splice()
// slice()
// substr()
// ⭐ map() 배열 값을 변경해서 새로운 배열 반환 (반복작업)
// find() 배열이 아닌 하나의 값만 반환
// ⭐ filter() 조건에 해당하는 모든 값, 원하는 모든 값만 다시 배열로 반환
// reduce() 초기값을 이용한 합산
let arrStr = fruits.join("___");
console.log(arrStr); // 원본 배열을 홰손하지는 않음
console.log(typeof(arrStr)); // string
console.log(fruits.indexOf('⭕')); // 없으면 -1
console.log(fruits.indexOf('🐥')); // 0
console.log(fruits.includes('🐥')); // true
let scores = [60, 80, 90, 70, 50];
console.log(scores);
let sc2 = scores.map(scores=> {
return scores+5;
})
console.log(sc2); // (5) [65, 85, 95, 75, 55]
let sc3 = scores.filter(scores=> {
return scores >= 70;
})
console.log(sc3); // (3) [80, 90, 70]
let sc4 = scores.find(scores=> { // 하나 찾으면 끝내 버림
return scores >= 70;
})
console.log(sc4); // 80
// let scores = [60, 80, 90, 70, 50]; = 350
// 초기값(설정되어있다면, 없으면 0번째 값), 배열의 0번째 값
// 0, 60
let sum = scores.reduce((pre, cur) => { // 2개의 매개변수
return pre+cur;
}, 0) // 초기값
console.log(sum); // 350
let avg = sum/scores.length
console.log("정수 배열의 평균은 "+ avg + " 입니다.");
console.log(`정수 배열의 평균은 ${avg} 입니다.`);
// 2차원 배열
let multyArr = [[1, 10], [2, 20], [3, 30], [4, 40]];
console.log(multyArr[0][0]); // 1
console.log(multyArr[0][1]); // 10
multyArr.forEach(item => {
item.forEach(i=> {
console.log(i);
})
})
// 💚 set : 주로 중복제거할 때 사용
let set = new Set();
set.add(1); // 값 넣어줌
set.add(2);
set.add(3);
set.add(4);
set.add(5);
set.add(2);
set.add(5);
console.log(set); // Set(5) {1, 2, 3, 4, 5}
// 0: 1
// 1: 2
// 2: 3
// 3: 4
// 4: 5
// size: 5 (set 의 길이, 값의 갯수 알 수 있음)
// [[Prototype]]: Set
// key : value 형태
// 중복을 허용하지 않음
let set2 = new Set();
let green = {name : 'green'};
let blue = {name : 'blue'};
let pink = {name : 'pink'};
set2.add(green);
set2.add(blue);
set2.add(pink);
console.log(set2); // Set(3) {{…}, {…}, {…}}
// 0: Object
// value: {name: 'green'}
// 1: Object
// 2: Object
// size: 3
// [[Prototype]]: Set
// 배열의 index처럼 0,1,2,...붙는게 아니라 같은 값을 가짐
set2.forEach((value, index) =>{ // 자동으로 string으로 형변환하여 나타남
console.log(`value는 ${value} 이다.`); // value는 [object Object] 이다.
console.log(`index는 ${index} 이다.`); // index는 [object Object] 이다.
})
set.forEach((value, index) =>{ // 자동으로 string으로 형변환하여 나타남
console.log(`value는 ${value} 이다.`); // value는 1 이다.
console.log(`index는 ${index} 이다.`); // index는 1 이다.
})
let numSet = new Set([1, 2, 3, 4, 5, 1, 2, 3, 4, 5]);
console.log(numSet); // Set(5) {1, 2, 3, 4, 5}
let newArr = [...numSet]; // 중복을 제거한 배열을 다시 만듦
console.log(newArr); // (5) [1, 2, 3, 4, 5]
</script>
</body>
</html>
button.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>Document</title>
</head>
<body>
<button id="a">클릭</button>
<button id="b">클릭</button>
<button onclick="viewButton()">보이기/안보이기</button>
<script>
let temp = 0;
function viewButton() {
if (temp == 0) {
document.querySelector('#a').disabled = true; // 안보임
temp = 1;
} else {
document.querySelector('#a').disabled = false;
temp = 0;
}
}
</script>
</body>
</html>
function.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>Document</title>
</head>
<body>
<script>
// 기억해야될 용어 ) 인수, 매개변수, 함수, 반환, return, 매개변수 기본값 설정
// ●● 함수 선언문
// 매개변수 (인수 받아주는 그릇)
function 빵만들기(재료1, 재료2='밀가루') //기본값 설정, undefined 되지 않도록
{
let 완성빵 = 재료1 + 재료2 + '빵';
return 완성빵 ; //return 없으면 undefined 반환
}
// (1)
// ■ 호출 (함수명 불러주기)
let 빵 = 빵만들기('밀가루', '옥수수'); //인수, 받는 인수가 없을시 매개변수 자리 없어도됨 ★
// ■ 출력
console.log(빵); //밀가루옥수수빵
// (2)
let 빵2 = 빵만들기('찹쌀', '팥');
console.log(빵2); //찹쌀팥빵
// (4)
let 빵4 = 빵만들기('딸기'); //딸기밀가루빵
console.log(빵4);
// (3)
// 같은 이름 사용할 경우
let 재료1 = '밀가루'; //같은 이름 사용해도 영향 미치지 않음, 스코프 ★
let 재료2 = '옥수수';
let 빵3 = 빵만들기(재료1, 재료2); //밀가루옥수수빵
console.log(빵3);
// (★)
function myFunc () {
console.log(1);
console.log(2);
console.log(3);
console.log(4);
return; //종료 ★
console.log(5);
}
myFunc(); //불러주기
// ●● 함수 표현식
let 안녕 = function() {
console.log('안녕');
return '함수표현식';
}
안녕(); //안녕
안녕(); //안녕
console.log(안녕); //결과가 아닌 값이 나타남
console.log(안녕()); //실행 결과 출력 → 안녕 _ 함수표현식, return 없으면 undefined 출력
// ●● 콜백 함수
// 함수를 값처럼 전달하는 함수
// 빵만들기 ('인수-옥수수', '밀가루')
// → (옥수수,밀가루)값이 아닌 함수를 전달 → 이걸 콜백함수 ★
function 대답(질문, 예스, 노) {
if(confirm(질문) ) 예스();
else 노();
}
function 동의 () { // ()가 있으면 실행되어버림 !
alert('동의하셨습니다.');
}
function 비동의 () {
alert('동의하지 않았습니다.');
}
대답('동의하십니까 ?', 동의, 비동의); //인수 ( 동의+비동의 = 함수 )
</script>
</body>
</html>
object.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>Document</title>
</head>
<body>
<script>
let fruit = prompt('어떤 과일 좋아하니 ?');
// 계산된 프로퍼티
let fruitBag = {
[fruit] : 10, // 변수 값을 key값으로 주고 싶을 때는 [] 해주기
}
console.log(fruitBag);
// 단축 프로퍼티
// ↓ 매개변수
function makeUser(name, age) {
return { // 실행되면 객체가 리턴됨
name : name, // 객체의 key는 str만 가능
age, // key 생략 가능, 매개변수만 !
}
}
let user = makeUser('green', 20); // 인수 : 그린과 20
console.log(user);
// in 연산자
// true or false
// "key" in Object
let user2 = {
name : 'blue',
age : 20,
}
console.log('name' in user2); // name 이라는 key가 user2에 있나요 ?
console.log('hasJob' in user2);
// 객체 반복
// for ... in 문
for(let key in user2) {
console.log(user2[key]); // 값에 접근, name age, 순차적으로 출력
}
</script>
</body>
</html>
varletconst.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>Document</title>
</head>
<body>
<script>
console.log(num3); // 에러 발생 x
var num3 = 10;
// console.log(num); // Reference Error 발생(선언하지 않았는데 불러서)
let num;
num = 10;
console.log(num);
// const num2; // 구문(신텍스) 에러 발생
const num2 = 20;
console.log(num2);
for(let i=0; i<3; i++) { // 블럭안에서 선언
var varNum = i;
// let varNum = i;
console.log(varNum); // var, let - 출력 0, 1, 2
}
console.log(varNum); // var - 출력 2(함수스코프) , let - ReferenceError(블럭스코프)
function myFunc() { // 함수 안에서 선언
var varNum = 20;
console.log(varNum);
}
myFunc();
console.log(varNum); // ReferenceError
</script>
</body>
</html>
