array.forEach()

반환값이 없는 것이 특징이다. 각각 배열안의 모든 요소를 실행한다.

새로운 배열에 할당하는 것이 아니기 때문에 원본 훼손의 문제로 map을 사용하는게 추세가 아닐까라고

개인적으로 생각한다. 사실 둘의 차이를 잘 모르겠다.

numbers.forEach(num => console.log(num))

array.map()

각 요소를 모두 맵핑하고, 새로운 배열을 만들어낸다.

const triple = numbers.map(num => num%2)
console.log(triple)

array.filter()

filter()함수 안에 있는 함수를 통과(true)하는 요소만 새로운 배열에 반환한다.

const doubleNumber = numbers.filter(num=>num%2)
console.log(doubleNumber)

array.reduce()

배열안에 있는 요소를 각각 하나씩 실행하여 하나의 값을 반환한다. 보통 누적하여 값을 더할때 사용하는 느낌.

const four = numbers.reduce( (acc,num) => acc+num )
console.log(four)

불리언

true = 켜져있음

false = 꺼져있음

null = 비어있음

undefined = 변수가 메모리에 만들어져있고 인지하고 있지만 값이 없음

배열

const days = ["mon", "tue", "wed"];

days.push("thu");

객체(objects)

const player = {
  name: "nico",
  points : 10,
  fat: true
};
player.lastname = "potato";
player.points = 15;
console.log(player.name, player["points"]);

함수(function)

코드를 어떤 코드를 캡슐화해서 그걸 계속 반복해서 사용할 수 있도록 하는 것

반복 실행 싶은 걸 만든다

()으로 함수를 실행한다.

()에 정보를 담아 보낸다.

function sayHello(name, age){
	console.log(name, age)
}

sayHello("nico",10);

function plus(a,b){
	console.log(a+b)
}
plus(1,2)

const player = {
	name: "nico",
    sayHello: function(name){
    console.log("hello" + name);
    },
  };
  
  console.log(player.name);
  play.sayHello("nico");

결과 반환(Return)

const calculater = {
   add : function (a,b){
   return a+b;
	}

const addResult = calculater.add(2,3);

if문 (조건문)

const age = parseInt(prompt("몇살이니?")); //숫자 또는 NaN으로 반환됨

if(isNaN(age)){  //true면 실행하고 아니면 else구문으로 넘어감
	console.log("숫자를 입력해");
 } else {
 	console.log("나이를 써서 고맙다");
 }

HTML in Javascript

1. document 라는 객체는 JS에서 HTML파일을 불러올 수 있도록 도와준다
2. document의 함수 중에는 getElementById 라는 함수가 있는데,

    이 함수가 HTML에서 id를 통해 element를 찾아준다  ex)document.getElementedById("idname")

const title = document.getElementById("title");
title.innerText = "Got you!";
console.log(title.className);

- getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)
- getElementsByTagName() : name을 할당할 수 있음(array를 반환)
- querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
단 하나의 element를 return해줌

한개만 아니라 동일한 하위요소를 가져오고 싶다면 querySelectorAll

⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함)
- 첫번째 element만 가져옴
- 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
⇒ 세개의 h1이 들어있는 array를 가져다 줌
- querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것임
하지만 후자는 하위요소 가져오는 것을 못하므로 전자만 쓸거다

const title = document.querySelector("#hello form");
const title = document.getElementById("#hello");

* javascript가 document로 html을 불러올 수 있고 수정 추가도 가능하다*

1.불러오는 함수
querySelector/ querySelectorAll 이 유용하다.
2.사용자의 event를 listen해서 반응
addEventListener("event", function);
**이때 function에 실행 하는 () 기호는 쓰지 않는다. 우리가 원하는 건
이벤트 발생 시 함수가 실행 되는 것이기 때문에 ()를 임의로 쓰면 이벤트 발생 전에 실행됨.
3.바꿀 수 있는 property 중 style도 있다.
title.style.color = "blue"; 혹은
function changeColor() {title.style.color = "blue";}
title.addEventListener("click", changeColor); 처럼 쓸 수 있다.

const title = document.querySelector("div h1");

function handleTitleClick(){
const ranColor = ["blue","red","green","yellow","black"];

let num = Math.floor(Math.random() * ranColor.length);
title.style.color = ranColor[num];
}

title.addEventListener("click",handleTitleClick);

title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);

위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

document에서 body,head,title 은 중요해서 언제든
ex) document.body 로 가져올수있지만
div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
ex) document.querySelector(“h1”);

//window는 기본제공
function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);

1. element 찾기
2. event를 listen
3. 그 event에 반응하기

classList 우리가 class들의 목록으로 작업할수 있게끔 허용해준다.
className은 이전calss를 상관하지않고 모든걸 교체해 버린다.

classList를 이용하는건
js에서 건드리는건 HTML element가 가지고있는 또하나의 요소 사용하는 것이다.
= element의 class내용물을 조작하는 것을 허용한다는 뜻

contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다

toggle은 토큰이 존재하면 토큰제거
토큰존재 하지않으면 토큰 추가

ex)
toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
만약있다면 toggle 이 clicked를 제거해준다
만약 class name이 존재하지 않는다면 toggle은 classname 추가

https://www.notion.so/bd5a947d2d634d44b7545597579d9672#4cf35bf052b44dd2a23420b9687786d8

[스파르타코딩클럽] 파이썬 문법 뽀개기

Class 선언 [CSS의 클래스와 다른 의미! 객체지향!]

클래스는 객체를 생성하기 위한 템플릿이다.

class를 통해 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다.

쉽게 생각해서 클래스 = 붕어빵 기계, 그리고 객체 = 붕어빵 으로 보면 된다.

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

class Shop {
  constructor (color , size ,price) {
    this.color = color
    this.size = size
    this.price = price
  }
  
    printInfo(){
    console.log(`색상: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
  }
}

const shop = new Shop('black', 'Large', 20000)

shop.printInfo()

1. class 키워드와 클래스명
    class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나옵니다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋겠죠? 위의 예에서 Notebook 대신 Person 같은 이름을 쓴다면 다른 사람들이 코드를 봤을 때 이상하다고 생각할 겁니다.
    
2. 생성자 (constructor)
    중괄호 안에는 생성자라는 것을 적어줍니다. 혹시 생성자가 함수와 많이 비슷하다는 것 눈치채셨나요? 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각해주시면 됩니다. 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company 네요.
    
3. this와 속성(property)
    생성자의 바디를 보면 this 라는 키워드가 등장하네요. 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성입니다. 
    생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에  각각 할당하고 있는 것입니다.

객체 만들기

const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)

const notebook1 = new Notebook('MacBook', 2000000, 'Apple')

클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고

클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달해주면 됩니다.

그러면 해당 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당되겠죠.

만들어진 객체는 변수에 할당해줍니다. 기본 타입의 데이터들을 변수에 할당하면 변수를 사용하여

해당 데이터에 접근할 수 있었습니다. 객체도 마찬가지입니다.

객체도 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근할 수 있습니다.

객체의 속성 하나하나에 접근해 데이터를 갖고와야 할 때도 있겠죠? 이 때는 this.속성명 을 사용합니다.

[new 라는 의미는 영역(block)을 지정하여 함수 내부의 정의된 내용을 실행하여 주는 의미]

조금 더 쉽게 접근하면,

"new 연산자를 사용해야만 함수 내부의 내용을 변수에 대입 할 수 있다."

https://ko.javascript.info/constructor-new

객체 리터럴(Object Literal)

자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있습니다.

객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법

const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

여러가지 object를 생성할때 클래스를 이용하자.

<script> 에 감싸져 있는 상황

'   반 가 워 요   '.trim() //공백제거
'안녕,바이'.split(',') //특정요소 제거

0) for of 와 for in

const fruits = ['사과', '감', '배']

for (const 요소 of fruits){
  console.log(요소)
}

for (const 인덱스 in fruits){
  console.log(인덱스,fruits[인덱스])
}

1) 이름을 입력받아서 환영인사를 화면에 출력해주세요.

let name = prompt( "이름을 입력하세요");

document.write("환영합니다. " + name + "님");

2) 원하는 과일을 입력받아 가격안내하기

let name = prompt("원하는 과일을 입력하세요");
console.log(name);

  if (name == '사과'){
    console.log("100원입니다");
  } else if (name == '배'){
    console.log("200원입니다");
  } else if (name == '감'){
    console.log("300원입니다");
  } else {
    console.log("그런 과일은 없습니다.")
  }

3) 나의 반을 입력하여 출력하기

let classGrade = prompt ("너는 A,B,C중 몇반이니?");
let up = classGrade.toUpperCase();

switch (up) {
  case 'A' :
    console.log('A반입니다'); break;
  case 'B' :
    console.log('B반입니다'); break;
  case 'C' :
    console.log('C반입니다'); break;
  default :
    console.log('그런반은 없단다'); break;
}

4) 구구단 만들기

for (x = 2; x<10; x++){
  console.log(x + '단 시작')
  for (y=1; y<10; y++)
    console.log (  x + "*" + y + "=" + x*y )
}

5) for, while, forEach로 색깔 나열하기

console.log ('==for문으로 작성==');
let color1 = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple']

for (i=0; i<color1.length; i++){
  console.log(color1[i]);
}

console.log ('==while문으로 작성==');
let j=0;
while (color1[j] != null){
  console.log(color1[j]);
  j++;
}

console.log ('==forEach로 작성==')
color1.forEach(function(value) {
  console.log(value);
});

console.log ('==forEach + 화살표 작성==')
color1.forEach( value => console.log(value));

6) for-in과 for-of 연습

  const colors = ['red', 'blue' , 'green'];

  console.log('== for-in ==');
  for (var index in colors){
    console.log(colors[index]);
  }

  console.log('== for-of ==');
  for (var value of colors){
    console.log(value);
  }

7) 배열

let numbers1 = [1,2,3,4,5]
let numbers2 = new Array(6,7,8,9,10)
let man =[ 
  {
  "name" : "HongGilDong",
  "dept" : "Software"
  },
  {
  'name' : "표정훈",
  "dept" : "개발자"   
  }
]

console.log(numbers1);
console.log(numbers2);
console.log(man[1].name, man[1].dept);

8) 배열 추가,제거,제거2
const colors = ['red', 'blue', 'green']
console.log(colors)

colors.push('gold');
console.log(colors)

colors.pop();
console.log(colors);

colors.splice(0, 1);
console.log(colors);

9) 현재시간을 나타내는 if조건문

const date = new Date();
const hours = date.getHours();

if (hours < 12){
  console.log(`현재 시간은 ${hours}시로 오전입니다.`)
} else {
  console.log(`현재 시간은 ${hours}시로 오후입니다.`)
}

10) 삼항연산자

const x = Number(prompt('숫자를 입력해주세요.',''))
alert((x>=0) ? '0 이상' : '0이하')

11) 태어난 해의 동물띠 구하기

const years = Number(prompt('태어난 해를 입력해주세요', '')) %12;
const tti = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',');
alert(`${tti[years]}띠 입니다.`)

12) 윤년만들기

const isLeapYear = function (){
   const year = prompt('연도를 입력하세요.')
    if ( (year % 4 === 0 )&&(year % 100 !== 0)||(year % 400 === 0) ){
    console.log(`${year}은 윤년입니다.`)
  } else {
    console.log(`${year}은 윤년이 아닙니다.`)
  }
}
isLeapYear()

13) 최소값 구하기

const min = function(배열){
  let output = 배열[0]
  for (let value of 배열){
    if (output > value){
      output = value
    }
  }
  return output
}
console.log(min([52,273,32,103,275,24,57]))

14) 배열에서 원하는 값 추출하기

let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
numbers = numbers.filter((value) => value % 2 === 1) //홀수만 추출
numbers = numbers.filter((value) => value <= 100) //100이하만 추출