kljklj

kljlkj

jklj

lkjlkj

톹홓톹 파이썬은 초보자부터 전문가까지 사용자층을 보유하고 있다. 동적 타이핑(dynamic typing) 범용 프로그래밍 언어로, 펄 및 루비와 자주 비교된다. 다양한 플랫폼에서 쓸 수 있고, 라이브러리(모듈)가 풍부하여, 대학을 비롯한 여러 교육 기관, 연구 기관 및 산업계에서 이용이 증가하고 있다. 또 파이썬은 순수한 프로그램 언어로서의 기능 외에도 다른 언어로 쓰인 모듈들을 연결하는 풀언어(glue language)로써 자주 이용된다. 실제 파이썬은 많은 상용 응용 프로그램에서 스크립트 언어로 채용되고 있다.

도움말 문서도 정리가 잘 되어 있으며, 유니코드 문자열을 지원해서 다양한 언어의 문자 처리에도 능하다.

기본 CLI 입력 방법

함수(function)은 마법상자와 같다. 함수라는 마법상자에 뭔가 넣으면 뭔가 튀어나온다. 물론 어떤 상자는 뭘 넣지않아도 결과물을 만들어내기도하고 어떤 상자는 죽어라 넣어도 아무것도 만들지 않는다. 우리가 학창시절 배웠던 방정식도 사실 함수였다. y = 2x + 1 (x에 숫자를 넣어서 y값을 구한다! 라고 생각할 때 x는 매개변수이고 y는 return 값이다. 매개변수 x에 3이라는 인수를 넣어주면 7이라는 return값이 출력된다.)

함수에는 입력값과 결과값이 있을수도 있고 없을수도 있다. 입력값이 없다는건 매개변수(parameter)가 없는 것이고 결과값이 없는건 return이 없다는 것!

함수의 여러가지 형태. 1. 입력값 O 출력값 O 2. 입력값 O 출력값 X 3. 입력값 X 출력값 O 4. 입력값 X 출력값 X 5. 입력값이 몇 개인지 모를 때 6. 키워드 파라미터 (딕셔너리 만들기)

1. 입력값 O 출력값 O

a=4
b=3
def vartest(a):  
#함수 설정 위에 상수로 설정해준 a의 4를 함수의 매개변수 a에 넣는 것임! 위에 상수 a와 함수의 a는 다르다는 것!!!
# a는 매개변수(parameter), 매개변수에 대입할 값인 4는 인수(argument)
    a = a+15
    return a  #이 함수의 최종 반환값

print(vartest(a))  # 리턴값 19를 프린트
print(b)  #당연히 상수 b값 3을 프린트

2. 입력값 O 출력값 X

def add(a, b) :
    print(a + b)   # 프린트는 콘솔에 출력할 기능일뿐 함수로서 유의미한 결과를 만들어 내지 못한다.

add(1, 2)  # 3을 콘솔에 프린트한다.
result = add(1, 2)  # add(1, 2)가 콘솔에는 3을 프린트 했지만 result로 넣어줄 값은 없다. 함수의 결과값이 없기 때문이다.
print(result)  # none 출력

3. 입력값 X 출력값 O

def hello() :   # 매개변수가 없음
    return "hi, nice to meet you"  # 매개변수는 없지만 함수 출력값은 있음

print(hello())  #hi, nice to meet you 프린트

4. 입력값 X 출력값 X

def hello()
    print("hi")

5. 입력값이 몇 개인지 모를 때(그때그때 달라요~)

def add_many1(*args):   # 꼭 args 를 안써도 되지만 통상적으로 많이 쓴다. 
    result = 0
    for i in args:
        result = result + i
    return result

print(add_many1(1,2,3,4,5))  # (1,2,3,4,5)를 튜플로 만들어서 (*args)에 대입해줌


def add_many2(choice, *args):  # 입력 str에 따라 함수 계산식 자체가 바뀜
    if choice == "add":
        result = 0
        for i in args:
            result = result + i
    elif choice == "mul":
        result = 1
        for i in args :
            result = result * i
    return result

print(add_many2("mul", 1,2,3,4))

6. 키워드 파라미터 (딕셔너리 만들기)

def print_kwargs(**kwargs):
    print(kwargs)

print(print_kwargs(name='sik', age=1))
                             출력값 : {'name': 'sik', 'age': 1}

알아야 할 것

1.input, label의 역할을 알기.

2. 구현되는 순서를 정확하게 알기.

순서 : label 클릭(checkbox 선택) -> input의 하위 div(팝업) 실행 -> div(팝업) 안의 label 클릭(checkbox 해제) -> div(팝업) 종료

• input 역할 : (일반적으로) 텍스트를 입력하는 함수. (ex. 메시지창)

         여기서는 checkbox로 사용함. 하부 코드와 같이 type="checkbox" 지정해줌.
         즉 하위 div(팝업)을 실행하는 주체는 input이다
    _* checkbox 체크 선택 시 : div 보여짐(display : block)
    * checkbox 체크 해제 시 : div 가려짐(display : none)_

• label 역할 : input의 checkbox 선택/해제를 위해 checkbox 대신 선택되여짐.(checkbox의 분신같은 존재..?) 즉 label이 클릭되면 checkbox가 선택되고 하위 div가 보여지게 됨(물론 체크시 div 보여지는건 css로 display를 설정하니까 되는것임)

• input의 "id명"와 label의 "for명"을 동일하게 할 것
• 팝업의 활성화/종료 2가지 명령을 위해서 2개의 label을 사용함.

 <div class="book4">  
    <img src="images/book4.png" alt="book">
  <span class="book-title title">자기 앞의 생</span>
<span class="book-author author">에밀 아자르</span>
<div class="popup">
  <input type="checkbox" id="info04">  //input : div의 display를 관장하는 체크박스
  <label for="info04"></label>  //label(1번째)  : checkbox 대신 나를 눌려줘(checkbox는 안보이게 display: none 할꺼니까)
  <div class="popup__contents">거꾸로 된 세상, 이건 정말 나의 빌어먹을 인생 중에서 내가 본 가장 멋진 일이었다. 나는 튼튼한 다리로 서 있는 생기 있는 로자 아줌마를 떠올렸다. 나는 좀더 시간을 거슬러올라 아줌마를 아름다운 처녀로 만들었다. 그러자 눈물이 났다. <br> //label 클릭시 checkbox가 선택되게 되고 그럼 div가 보여짐
    <label for="info04">CLOSE</label>  //label(2번째) : div안에 넣어둔 label도 같이 보여지게 됨. 이 2번째 label도 1번째 label과 똑같은 분신같은 존재로 클릭하면 다시 div가 가려지게 됨.
  </div>
</div>
</div>

.popup {
  position: absolute;
}
// 위치 잡기위해 사용. 이건 위치에 따라 다르겠지

.popup input {
  display: none;
}
// checkbox 속성 설정 :
못생긴 checkbox 모양은 안보이게 하기(처음부터 끝까지 이 모양은 쭉 안보이는 것)

.popup input + label {
  display: block;
  width: 190px;
  height: 330px;
  position: absolute;
  transform: translateY(-100%);
  cursor: pointer;
}
// 1번째 라벨 속성 설정 :
라벨 형태를 설정함. 여기선 라벨을 보이지 않는 투명한 박스모양로 만들어서 책 img 위에 위치시킴. 그래서 사진의 책을 클릭하게되면 실제로는 label이 선택되며 팝업이 실행됨
(마치 img를 눌려서 팝업이 실행되는 것 같은 효과!)

팝업 실행 전

input[id*='info'] + label + div {
  display: none;
  width: 190px;
  height: 330px;
  padding: 10px 6px;
  background-color: #dcdde1;
  position: relative;
  transform: translateY(-100%);
  font-size: 15px;
  border: 2px black solid;
}
// input함수 하위 div(팝업내용) 속성 설정 :
위치, 색상, 크기 설정해줌

.popup input:checked + label + div {
  display: block;
}
// checkbox 체크시(사실은 label 선택시) div 속성 설정 : 
div를 보여주게 해주세요!

.popup input + label + div label {
  position: absolute;
  bottom: 6px;
  cursor: pointer;
  background-color: black;
  color: white;
  border-radius: 5px;
  padding: 4px 6px;
  font-weight: 400;
}
// input 하위 div(팝업) 내에 있는 2번째 label 속성 설정 :
위치, 색상, 크기 설정해줌

팝업 실행 후

<META http-equiv="refresh" content="3; url=https://sik-kim.github.io/aboutMe/">

content="시간(초); url=도메인 주소"

(repository 생성 / 깃허브 업로드 / branch 생성 / 깃허브 url 생성 등)

처음에 좀 헷갈릴 수 있는데 적응되면 편하게 쓰실거라 생각합니다.

google에서 github desktop 검색해서 다운로드하시면 됩니다.

코딩 시작을 위한 폴더 생성부터 깃허브 업로드

1) Repository 생성(개발 첫 시작을 위한 폴더 생성)

2) VSC로 열심히 코딩 작성~

3) publish Respository(깃허브로 코드가 업로드됨)

4) github 사이트 올라왔는지 확인

변경내용 깃허브 업데이트

1) vsc에서 코드 수정 후 저장하고 깃허브 repository update(코딩 중간중간 업데이트 내용 깃허브로 올려주는 과정)

2) 깃허브 사이트 업데이트 확인

Branch 생성 방법(깃허브 url 생성)

1) branch 생성(이름은 gh-pages로 설정)

2) public branch 누르면 branch도 깃허브에 업데이트되고 url 자동 생성됨

3) url 주소 : https://깃허브아이디.github.io/프로젝트명/

ex) https://sik-kim.github.io/test_page/

Branch 생성 이후 수정하고 업데이트

1) branch를 반드시 master로 설정하고 VSC에서 코드 수정

2) master branch commit 해줌

3) gh-pages로 branch 변경 (그럼 master에서 수정했던 hahaha가 안보일것임)

4) 메뉴에서 branch - update from master 클릭 (master의 변경내용을 가져옴)

5) gh-pages branch도 commit 해줌(깃허브 및 url 업데이트 반영됨)

6) url 접속하면 변경사항 반영된 것 확인(변경 반영되기까지 시간 살짝 걸림. 그래봐야 1분 안걸림)

<body>
    <div class="div">
        <div class="container">
            <div class="item">한줄 작성
        </div>
    </div>
</div>
</body>

.div{
    line-height: 200px;
    background-color: coral;
}

----------------------------

height % 지정해서 margin으로 가운데 맞춤.(잘 안쓸듯?)

 .items{
     background-color: yellow;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     height: 20%;
 }

2. container, items 화면 가운데 맞춤(여러 버전!)

<body>
    <div class="div">
        <div class="container">
            <div class="item">한줄 작성<br>한줄 작성<br>한줄 작성
        </div>
    </div>
</div>
</body>

.container{
↓ Container는 이동안하고 그대로 있음
background-color: coral;
width: 300px ;
height: 300px;
}


.items{
↓ container안 items div 설정
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 200px;
height: 200px;

display: flex;
justify-content: center;
align-items: center;
}

----------------------------

.container{
background-color: coral;
width: 300px ;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}


.items{
/* margin-top: -50px; */
background-color: yellow;
width: 200px;
height: 200px;

display: flex;
justify-content: center;
align-items: center;
}

----------------------------

.container{
background-color: coral;
width: 300px ;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}


.items{
/* margin-top: -50px; */
background-color: yellow;
width: 200px;
height: 200px;

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

display: flex;
justify-content: center;
align-items: center;
}

----------------------------

위아래 fixed 잡고 가운데 contents 넣기

 <div class="container">
        <div class="topdiv"></div>
        <div class="items">
            <img src="images/namu.jpg" >
            hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hihihihihihihi<br>hehehehehehehe
            <div class="bottom"></div>
      </div>
    </div>

 .bottom{
     position: fixed;
     bottom: 0;
     width: 100%;
     height: 300px;
     background-color: grey;
 }
 .topdiv{
    position: fixed;
    top: 0;
    z-index: 999999999999;
    width: 100%;
    height: 300px;
    background-color: blue;
 }

 .items{
     background-color: yellow;
     position: relative;
     display: block;
     top: 50%;
     margin: 300px auto;

 }

클릭 전

클릭 후

<input type="checkbox" id="menuicon">  //input의 checked시 transition이 동작하는 기능을 활용
      <label for="menuicon">  //실제 클릭하게될 label_(
        <span></span>  //메뉴바 모양 작대기용
        <span></span>  //메뉴바 모양 작대기용
        <span></span>  //메뉴바 모양 작대기용
      </label>

.menu {
  background-color: #f6f6f6;
  width: 100%;
  height: 255px;
  margin-top: 0;
  position: fixed;
_  top: -300px;_
  left: 0px;
  z-index: 999;
  transition: 0.5s ease-in-out 0s;
  box-sizing: border-box;
}

1. menu창의 기본 위치를 화면밖으로 설정

input[id="menuicon"] {
  display: none;
}

2. input의 checked 기능을 이용하는 것으로 input 박스 자체는 안보이게 설정

input[id="menuicon"]** + label {**
  display: block;
  width: 21px;
  height: 21px;
  z-index: 999999;
  position: fixed;
  right: 30px;
  top: 30px;
  cursor: pointer;
}

input[id="menuicon"] + label span {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 30px;
  background-color: #000;
  transition: all 0.4s;
}

3. span으로 bar 모양 만들기

input[id="menuicon"] + label span:nth-child(1) {
  top: 0;
}

input[id="menuicon"] + label span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

input[id="menuicon"] + label span:nth-child(3) {
  bottom: 0;
}

input[id="menuicon"]:checked + label span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(45deg);
}

input[id="menuicon"]:checked + label span:nth-child(2) {
  opacity: 0;
}

input[id="menuicon"]:checked + label span:nth-child(3) {
  top: 50%;
  transform: translateY(50%);
  transform: rotate(-45deg);
}

4. input을 클릭(checked)함과 동시에 transform 발생. (bar모양에서 X모양으로 변경)

input[id="menuicon"]:checked + label + nav {
  top: 0;
}

5. checked시 menu바 위치 이동 여기서 +는 인접요소선택자를 의미. 따라서 html에서 input+label+nav는 나란히 작성되어야 함!

• linear : 속도 동일
• ease : (잠깐)느리게 - 상당히 빠르게 - 느리게
• ease-in : 느리게 - 빠르게
• ease-out : 빠르게 - 느리게
• ease-in-out : 느리게 - 빠르게 - 느리게

• print : 단순 console 출력용 (허상? 느낌, 연산을 위한게 아니다.)
• return : 실제 value를 return 함. 실질적인 연산을 위해선 return 값이 필요함
• 1개 함수에서 1개 return이 발생하면 그 외는 무시됨(1함수 1리턴)(function이 return값으로 치환되는 개념)

 function handleGeoSuccess(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  const coordsObj = {
    latitude, // latitude = latitude 이거랑 같은의미
    longitude, // longitude = longitude 이거랑 같은의미
  };
  saveCoords(coordsObj);
  //   console.log(position);
}

 function handleGeoError() {
  console.log("Cant Access geo location");
}

 function askForCoords() {
  navigator.geolocation.getCurrentPosition(
    handleGeoSuccess, //위치 정보 얻었을떄 실행되는 함수
    handleGeoError);  //위치 정보 error시 실행되는 함수
}
//options도 함수로 추가 가능 (위치 정보에 대한 각종 매개 변수를 포함하는 자바스크립트 객체 지정)

OpenWeather 사이트 API call

function getWeather(lat, lng){
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lng}&appid=${API_KEY}`); //fetch안에는 가져올 데이터 넣어줌, https:// 입력하기, API_KEY 입력
}

OpenWeather Units formant

function getWeather(lat, lng) {
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lng}&appid=${API_KEY}&units=metric`

const clockContainer = document.querySelector(".js-clock"), // 클래스명 앞에 .은 왜찍을까????
  clockTitle = clockContainer.querySelector("h1");

console.log(clockContainer);
console.log(clockTitle);

console 실행값

querySelector 기본형태 element = baseElement.querySelector(selectors);

• querySelector의 Return값은 baseElement의 하위(자식) Element를 가져다줌. (element가 리턴된 값임)
• 보통 html의 클래스 이름 및 태그를 가져오기 위해 많이 쓴다.

const toDoForm = document.querySelector(".js-toDoForm"),
  toDoInput = toDoForm.querySelector("input"),
  toDoList = document.querySelector(".js-toDoList");
//html에서 가져오기


const TODOS_LS = "toDos"; //해야할일 상수 설정


/*
function filterFn(toDo) {
  //forEach에서 function 실행하는 것처럼 각각의 item과 같이 실행됨
  return toDo.id === 2;
  //filter는 array의 모든 아이템을 통해 함수를 실행하고 true인 아이템들만 가지고 새로운 array를 만듬(id 가 1일때)
}
밑에 filter() 안으로 함수 넣음. 밖으로 안빼고
*/


let toDos = []; //toDos 를 입력할 때 마다 toDos Array에 입력됨


function deleteToDo(event) {
  //ToDo 삭제 함수
  const btn = event.target; //target당한 버튼?
  const li = btn.parentNode; //btn의 부모 li 선택
  toDoList.removeChild(li); //toDoList에서 li삭제?
  //   console.log(event.target.parentNode);
  const cleanToDos = toDos.filter(function (toDo) {
    return toDo.id !== parseInt(li.id);
    //toDo id는 숫자, li id는 string 임... 초 헷갈..
    //li를 parseInt 써서 string에서 number로 변경함.
  });
  //filterFn함수에서 체크된 아이템의 array를 주는 역할
  //filterFn함수에 id===1만 있으면 id 1인 아이템만 가져온다.
  console.log(cleanToDos);
  //콘솔에 cleanToDos(새로운 array) 3개, toDos(예전 array)는 4개
  toDos = cleanToDos; //toDos let으로 정의 유의
  saveToDos(); //toDos를 저장할꺼임(즉 새로고침해도 다시 html에서 toDos 생기지 안음)
}


function saveToDos() {
  //여기 이 toDos를 가져와서 로컬(local storage)에 저장하는 역할.
  localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}
// javascript는 모든걸 string으로 저장한다. 예를들어 boolean의 true,false 저장 못 함. 그래서 JSON.stringify을 사용함.
//JSON.stringify는 자바스크립트 object를 string으로 바꿔줌
//JSON = JavaScript Object Notation
//JSON은 데이터를 전달할 때 자바스크립트가 그걸 다룰 수 있도록 object로 바꿔주는 역할
// object <--> string


function paintToDo(text) {
  //입력한 값 생성하는 함수(핵심!)
  const li = document.createElement("li"); //<li> 생성(html 입력 안하고도 생성 된다!)
  const delBtn = document.createElement("button"); //<button> 생성
  const span = document.createElement("span"); //<span> 생성
  const newId = toDos.length + 1; //newId 상수는 toDos(할일 입력한거) 총개수 + 1
  delBtn.innerText = "❌";
  delBtn.addEventListener("click", deleteToDo);
  span.innerText = text; //<span> 내용에 text 삽입
  li.appendChild(delBtn); //li 밑에 delBtn
  li.appendChild(span); //li 밑에 span
  li.id = newId; //li에도 id값 입력
  toDoList.appendChild(li); //toDoList(js-toDoList) 밑에 li
  const toDoObj = {
    //array에 입력값 넣기위한 함수.
    text: text, //text에는 text(실제입력한값) 입력
    id: newId, // id에는 newId(toDos 수량+1) 입력
    //toDos array에 왜 이런식으로 저장하냐? 그건 localstorage에도 같이 저장해줘야 하기 떄문임. 아직 뭔말인지 잘 이해안감.
  };
  toDos.push(toDoObj); //toDos Array에다가 toDoObj(입력한 값들 element)을 넣음
  saveToDos(); //입력한값 localStorage에 저장. push 다음에 와야함.
}


function handleSubmit(event) {
  //입력하는 함수
  event.preventDefault();
  const currentValue = toDoInput.value; //currentValue 상수를 입력하는 값으로 지정
  paintToDo(currentValue);
  toDoInput.value = ""; //입력 후 입력칸 값 제거하기.
}
// function something(toDo) {
//   console.log(toDo.text);
// }
// forEach 안에 함수 이렇게 분리시켜도 되긴함.


function loadToDos() {
  const loadedToDos = localStorage.getItem(TODOS_LS); //해야할일 상수 설정
  if (loadedToDos !== null) {
    // console.log(loadedToDos); //JSON.parse 하기 전(String)
    const parsedToDos = JSON.parse(loadedToDos);
    // console.log(parsedToDos); //JSON.parse 변환(element)
    parsedToDos.forEach(function (toDo) {
      paintToDo(toDo.text); //각각의 toDo 요소에 대해서 paintToDo 함수가 적용되는거지
    });
    //localstorage에 있는 내용을 자동으로 paintToDo함수 적용되게 해줌.(원래 새로고침하면 LS에는 남아있으나 화면에선 사라졌었음)

    // forEach는 기본적으로 함수를 실행하는데 array에 담겨있는 것들 각각에 한번씩 함수를 실행시켜줌.
    // 다른거처럼 만들어논 함수를 호출하는게 아니라 안에다 바로 만드는거지
    //parsedToDos array에 있는 각각의 element에 지금 만들 함수를 적용함. 그 각각을 toDo로 칭할거고.
  }
}


function init() {
  loadToDos(); //loadToDos 함수 실행
  toDoForm.addEventListener("submit", handleSubmit); //submit event실행시 handleSubmit 함수 실행
}


init();  //실행

//JSON은 javascript의 object를 string으로 바꿔준다.
//데이터를 전달할 때 javascript가 그걸 다룰 수 있도록 object를 바꿔주는 것

//filter, forEach 중요. list에 있는 모든 item을 위한 함수 실행시킴


function loadToDos() {
  const loadedToDos = localStorage.getItem(TODOS_LS); //해야할일 상수 설정
  if (loadedToDos !== null) {
    console.log(loadedToDos);  //JSON.parse 하기 전(String)
    const parsedToDos = JSON.parse(loadedToDos); (string -> element 변환)
    console.log(parsedToDos); //JSON.parse 변환(element)
  }
}

이런 날것이라도 꾸준하게 올리다보면 점점 정교해지지 않을까... 훗날을 기약하며..

//console.log, alert
console.log("Hello world!");
alert("Im working Im beautiful language. It worth it!!");



//let, const
let a; // a 변수 생성
a = 221; // a 변수 초기화
let b = a - 15; // b 변수 생성
console.log(b);
// let은 변수 생성, const 상수 생성
일반적으로 const를 많이 쓴다.

 String
const name = "jeongsik kim";
 console.log(name);

 boolean
const c = true;
console.log(c);

 float
const d = 55.1;
console.log(d);

 array   //array는 []사용해서 여러 값을 배열함(여러 타입 혼합 가능)
const daysOfWeek = [
  "mon",
  "tue",
  "wed",
  "thur",
  "fri",
  "sat",
  "sun",
  true,
  false,
  4,
  5,
  45,
  123,
];
console.log(daysOfWeek);
console.log(daysOfWeek[3]); //배열 n번째 값 출력하기



// object
const sikInfo = {
  name: "jeong sik",
  age: 32,
  gender: "male",
  isHandsome: true,
  favMovies: ["Along the gods", "LOTR", "Iron man"],
  favFood: [
    {
      name: "kimchi",
      fatty: false,
    },
    {
      name: "Cheese burger",
      fatty: true,
    },
  ],
}; //Object 내 array

console.log(sikInfo);
console.log(sikInfo.favMovies[0]);
console.log(sikInfo.favFood[1]);
console.log(sikInfo.favFood[1].name);
//console이 Object, log가 key?
//이경우에는 log가 함수 function



// function
function sayHello() {   //sayHello라는 함수 생성
  console.log("Hello!");  //함수가 포함한 내용으로 "Hello"를 출력하지
}
sayHello();

function sayHello(name, age) {
  //name,age가 argument임(함수안의 값?)
  console.log("Hello~ My name is", name, "I am", age, "years old.", age);
}
sayHello("Mike", 20);

function sayHi(name, age) {
  console.log("Hi " + name + " How old are you? I am " + age + age);
}
sayHi("Mike", 20);

function sayHello2(name, age) {
  return `Hello ${name}. I am ${age} years old.`;
}
const greetTomas = sayHello2("Tomas", 50);
console.log(greetTomas);

const calculator = {
  plus: function (a, b) {
    return a + b;
  },
  minus: function (a, b) {
    return a - b;
  },
  divide: function (a, b) {
    return a / b;
  },
  remainder: function (a, b) {
    return a % b;
  },
  multiple: function (a, b) {
    return a * b;
  },
  power: function (a, b) {
    return a ** b;
  },
};
const plus = calculator.plus(7, 4);
const minus = calculator.minus(7, 4);
const divide = calculator.divide(11, 5);
const rema = calculator.remainder(11, 5);
const mul = calculator.multiple(3, 6);
const pow = calculator.power(2, 10);
console.log(plus);
console.log(minus);
console.log(divide);
console.log(rema);
console.log(mul);
console.log(pow);



// DOM (dom 개념 어려움..)
const title = document.getElementById("title"); //모든 title이라는 Object에 적용된다.
title.innerHTML = "Hi! From JS. wow";
title.style.color = "red";
// console.dir(title);
console.dir(document); //document가 뭐하는앤지 모르겠음;; 위에꺼랑 머가 다른지.
document.title = "I own you now!";
//document가 html 문서 자체를 말하는건가?
title.style.backgroundColor = "yellow";

//암튼 javascript 파일에서 html을 조정할 수 있음. html, css 대신 js 파일에서 할 수 있다는 얘기.

//그러나 js는 html, css 보강하기 위해 있는게 아니다.

//사실 js는 이벤트에 반응하기 만들어졌음.
//이벤트란거는 웹사이트에서 발생하는 것. 가령 click, resize, submit input before clsing printing 등등 (사용자가 행함으로 발생하는 것?) 


아래부턴 이벤트 내용


const title = document.querySelector("#title");

function handleClick() {
  title.style.color = "blue";
}
title.addEventListener("click", handleClick);
// 클릭(이벤트) 발생하면 "title"이 파란색 되는 함수.
//() 붙이고 안붙이고 중요. 붙이면 바로 실행(이벤트 발생도 안했는데!) 그래서 안붙여야됨



// if문 활용
if (10 < 5) {
  console.log("hi");
} else if (10 === 11) {
  console.log("ho");
} else {
  console.log("ha!");
}

const age = prompt("How old are you?"); //prompt 요즘은 거의 안씀. 옛날 JS임
// console.log(age);
if (age >= 18 && age <= 21) {
  console.log("you can drink but you should not");
} else if (age > 21) {
  console.log("you can drink");
} else {
  console.log("you are too young. you cannot drink");
}



//함수로 글자색 바꾸기
const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)"; //rgb는 색깔 범위
const OTHER_COLOR = "#7f8c8d";

function handleClick() {
  const currentColor = title.style.color;
  if (currentColor === BASE_COLOR) {
    title.style.color = OTHER_COLOR;
  } else {
    title.style.color = BASE_COLOR;
  }
}
// handleClick 함수
// 1. currentColor라는 상수는 title의 현재 색깔
// 2. 현재 BASE 색이면 OTHER로 바꾸고 OTHER면 BASE로 바꾸는 기능
// 즉 handleClick은 색깔을 번갈아가며 바꾸는 기능 제공
function init() {
  title.style.color = BASE_COLOR;
  title.addEventListener("mouseenter", handleClick); //"click"도 있음
}
//init 함수
// 1. title.style.color 초기색은 BASE_COLOR로 설정
// 2. "mouseenter"가 발생시 handleClick 함수를 실행시켜라.
// 즉 init 함수는 초기값 설정 및 이벤트 설정하는 기능 제공
init();  //init 함수 실행



// classList 사용
//class 추가/삭제에 따라 css 속성 적용하기
const title = document.querySelector("#title");
// querySelector기능이 뭔지? #title? 개념 잘 잘모르겠음

const CLICKED_CLASS = "clicked";
// CLICKED_CLASS 이름의 상수에 "clicked"이라는 클래스 넣음
function handleClick() {
  const currentClass = title.className;
  if (currentClass !== CLICKED_CLASS) {
    // title.className = CLICKED_CLASS;
    // --- class 변화 : btn -> clicked
    title.classList.add(CLICKED_CLASS);
    // --- class변화 : btn -> btn clicked
    //이렇게 하면 cursor가 여전히 있음. class에 btn은 계쏙 유지되니까. 검사-elements에서 확인가능.
  } else {
    // title.className = "";
    title.classList.remove(CLICKED_CLASS);
    //여기서 다시 돌아가진 않음. 왜냐면 else 조건이 안되거든. currentClass는 clicked가 아니라 btn clicked 이니까. (그래서 다시 돌아가는 것까지 하려면 if 조건을 바꿔야함. contains라는 객체를 사용해서! 복잡하니 그건 밑으로 다시 해야겠다.)
  }
}
// handleClick이란 함수 생성.
// currentClass 상수는 title class의 className임
// currentClass의 class name이 CLICKED_CLASE인 "clicked"로 clsss name이 됐다가 "" 없어졌다가 반복됨

function init() {
  title.addEventListener("click", handleClick);
}
init();
//init함수는 클릭하면 handleClick 함수 실행하는 기능

//js이용해서 그냥 클래스 이름만 바꾸는 거지
//color가 뭔지 css가 뭔지 등등 아무것도 신경쓰지 않도록!!

//classList?? 이건 method가 있어서 이걸사용해서 내가 쓰고 싶은 함수를 쓸수있따?




// contains 사용
// class name 변경 후 처음 class name으로 되돌아오는 거
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS); //title 클래스이름에 clicked가 있냐?
  if (!hasClass) {
    //hasClass가 아니냐?
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);
}
init();
//그러나 이것도 복잡한듯? 그래서 더 쉽게하려면? 사실 일반적으로 간단한 toggle을 사용. 위에까지는 원리를 이해하기 위한 과정.




//toggle 사용 (개발자는 게을러서 간단한걸 좋아하지)
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick() {
 title.classList.toggle(CLICKED_CLASS);
 //toggle은 안에 있는 값들을 체크함. class가 있으면 add, 없으면 remove

function init() {
  title.addEventListener("click", handleClick);
}
init();

이제 시작, 글 많이 써야지.