1단계 : where we are????

날씨와 위치를 알기 전에 우리가 현재 거주하는 공간의 위도와 경도를 알아야한다. 

그래서 여기서 사용되는 것이 navigator.geolocation이다. 

navigator.geolocation.getCurrentPosition();

위에서 중요한 것은 ()안에 들어가는 인자가 함수 2개라는 것이다. 
첫번째 인자는 객체가 현재 위치를 발견햇을 경우 그리고 두번째 인자는 위치발견에 실패했을 경우이다. 

그렇기 때문에 2개의 함수를 만들어야한다.

2단계 : 함수만들기

function onSuccess(position) {
    const lat1 = position.coords.latitude;
      const long1 = position.coords.longitude;
      // 위의 작업을 통해 우리가 원하는 위도와 경도를 얻었다.


}

function onFail() {
    alert("we can't find where you ars OTL")
}

navigator.geolocation.getCurrentPosition(onSuccess,onFail);

3단계 위치정도 api사용하기

const key = '~~~~~'

function onSuccess(position) {
    const lat1 = position.coords.latitude;
      const long1 = position.coords.longitude;
      // 위의 작업을 통해 우리가 원하는 위도와 경도를 얻었다.

      const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${apiKeys}&units=metric`;

      // 여기서 중요하게 봐야하는 점은 해당 api에 변수를 할당하기 위해 백틱을 사용한 점이다. 

  4단계 : 화면에 보이도록 하기
  // html상에 지리날씨 정보를 위한 태그를 만들고 그것을 js상에서 변수로 할당하고 사용해보자. 

      const span1 = document.querySelector('#weather span: first-child');
      const span2 = document.querySelector('#weather span: last-child');
      fetch(url).then(response => response.json()).then(data => {
        span1.innerText = data.sys.country;
          span2.innerText = `${data.weather[0].main} / ${data.main.temp}`;
    }
}

1단계 html에 있는 태그들을 변수에 담자.

const toDoForm = document.querySelector('#todo-form');
const toDoInput = document.querySelector('#todo-form input');

const toDoList = document.querySelector('#todo-list');

2단계 form의 새로고침 기능 멈추기

function handleForm(mike) {
    mike.preventDefault();
}

toDoForm.addEventListener('submit',handleForm);

3단계 입력받은 값 배열에 저장하고 그것을 보여주기

let myDoArr = [];

function handleForm(mike) {
    mike.preventDefault();
      const myValue = toDoInput.value;
      myValue= '';
      const myListEle = {
        id : Date.now();
          text : myValue;      
    };
      myDoArr.push(myListEle);
      saveLocal();
}

4단계 배열에 저장된 내용 localstorage에 저장하기

local영역에 배열을 저장할 수 있을까??? 정답은 '아니요'이다.
그렇다면 어떻게 해야할까??? 해당 배열을 다른 형태로 바꿔서 저장해야한다. 이때 사용하는 메소드가 stringify이다.

function saveLocal() {
  localstorage.setItem('myStuff',JSON.stringify(myDoArr));
}

5단계 저장된 할일 list형태로 html에 출력시키기

function showMyDo (myValue) {
    const li = document.createElement('li');
      li.id = myValue.id;
      const span = document.createElement('span');
      span.innerText = myValue.text;
      const button = document.createElement('button');
      button.innerText = '❌';

      // button이 눌리면 동작하도록 하기
     button.addEventListener('click', DeletelLi);
      li.appendchild('span');
      li.appendchild('button');
      toDoList.appendchild('li');
}

6단계 : 할일 삭제를 위한 버튼 만들기

function deleteLi(event) {
    const li = event.target.parentElement;
      li,remove();
      myDoArr = myDoArr.filter(toDo => toDo.id !== parseInt(li.id));
      saveLocal()
}

7단계 : 해당 배열들이 화면에 하나씩 보일 수 있도록 해보자.

const savedToDos = localStorage.getItem(myStuff);

if (savedToDos !== null) {
    const parsedToDo = JSON.parse(savedToDos);
      myDoArr = parsedToDo;
      parsedToDo.foreach(showMyDo);
}

이번에는 화면 하단에 나오는 오늘의 명언을 어떻게 출하는지 알아보자. 이번 작업에서 중요한 점은 해당 명언들이 랜덤하게 나와야 하는 점이다.

<div class='quotes'>
  <span></span>
  <span></span>
</div>
위처럼 텅빈 span을 만든다.

const quotes = [~~~~]

const myQuotes = document.querySelector('.quotes');

const mySpan =  document.querySelector('.quotes span:first-child');

const mySpanAnother = document.querySelector('.quotes span:last-child');

const todayQuotes = quotes[Math.floor(Math.random()*quotes.length)];

mySpan.innerText = todayQuotes.quote;
mySpanAnother = todayQuotes.author;

위와 비슷한 기능을 가지고 일정 시간마다 배경이 바뀌는 효과를 넣어보자.

const backGround = ['1.jpeg', '2.jpeg', '3.jpeg','4.jpeg'];

const bgImage = document.creageElement('img');

function changeBody() {
    const backImage = backGround[Math.floor(Math.random()*backGround.length];
        bgImage.src = '${backImage}';
        document.appendchild(bgImage);                        
};

setIterval(changeBody, 20000);    

오늘은 여기서 시계를 넣는 기능을 어떻게 사용하는지 다시 한번 복습하고 시간 아래에 명언을 넣는 기능을 공부해본다.

시간을 어떻게 하면 우리가 만드는 html에 삽입할 수 있을까????

1. Clock

   우선 h2 태그에 시간의 초기값인 00:00:00을 넣는다. 
   

그리고 우리가 h2에 계속해서 갱신되는 시계를 어떻게 넣을 수 있을까???

setInterval을 이용하면된다.

이용방법) setInterval(함수, 1000); // 여기서 1000이면 1초를 의미한다.

다음으로 시간을 표시하는 메소드를 다시한번 복습하자.

const date = new Date();를 정의하고 해당변수에서 어떤 객체(혹은 메쏘드)?? 아직 안익숙함 ㅋㅋㅋ를 사용할 수 있는지 확인해보면

getSecond/ getMinutes / getHours / getFullYear등 객체를 사용할 수 있다.

그래서 위의 것들을 가지고 함수를 만들고 반복적으로 돌려보자.

const myClock = document.querySelector('h2');

function getClock() { const date = new Date(); const myHour = date.getHours(); const myMinutes = date.getMinutes(); const mySeconds = date.getSeconds(); myClock.innerText = ${myHour} : ${myMinutes} : ${mySeconds} }

myClock.setInterval(getClock, 1000);

여기서 문제는 00:00:00의 형태로 나오도록 하기 위해서는 어떻게 해야할까??

그것을 위해서 padStart(2,'0');를 사용한다. 그리고 이것을 string을 이용해야만 한다.

2. Greetings

```javascript
위 TODO 사이트에서 clock밑에 있는 사용자 이름과 인사를 표현해보자. 

const myForm = document.querySelector('#login-form');
const myInput = document.querySelector('#login-form input');
const myH1 = document.querySelector('#greeting');

// 우선 form안에 input이 있는 경우 발생하는 새로고침 현상을 멈추고 
//값을 받은 것을 저장하고 출력할 수 있도록 함수도 불러와보자.

function greeting(userName) {
    const userName = `Hello ${userName}`;
      myH1.classList.remove('hidden');
      mtH1.innerText = userName;
}

function handleForm(kim) {
    kim.preventDefault();
      const myName = myInput.value;
      localstorage.setItem('userName', myName);
      myForm.classList.add('hidden');
      greeting(myName);
}

const savedUsername = localstorage.getItem('userName');

if (myInput !== null) {
      greeting(savedUserName);

} else {
    myForm.classList.remove('hidden');
      myForm.addEventListener('submit', handleForm);
}

위와 같이 보이는 사이트를 오늘의 과제로 제출했다. 어떻게 만들었을까??? html의 구조는 상대적으로 쉬운편이다.

위와 같이 form과 그 내부 label input button으로 이루어진 html이다. 여기서 주의할 점이 있다면 form안에 input을 넣을 경우 자동으로 submit와 새로고침이 일어난다. 이러한 기능상 문제는 js를 이용해서 조정가능하다.

1단계 각 태그들을 변수로 가지고 오기

const myForm = document.querySelector('form');
const getNum = document.querySelector('form .get-box #get-num');
const getGuess = document.querySelector('form .guess-box #get-guess');
const notice = document.querySelector('p');
const myWon = document.querySelector('span.won');
const myLost  = document.querySelector('span.lost');
2단계 form의 기본동작 멈춤 및 값 출력

function stopRefresh(mike) {
    mike.preventDefault();

      const ranNum = Math.floor(Math.random()*getNum.value);
    const myAnswer = getGuess.value;
      notice.classList.remove('hidden');
      notice.innerText = `you chose: ${myAnswer}, the machine chose ${ranNum}`
        if (ranNum === myAnswer ) {
            myWon.classList.remove('hidden');
              myLost.classList.add('hidden');
        } else {
            myLost.classList.remove('hidden');
              myWon.classList.add('hidden');
        }
}


myForm.addEventListener('submit', stopRefresh);

위의 이미지와 코드가 오늘 내가한 코드챌린지 내용이다.

다음 난수와 date.object를 이용해서 clock을 만들어보자.

1단계 : setInterval에 대한 이해

만약 우리가 어떤 함수를 실행시키고자 하며 해당 함수가 몇초마다 다시 한번 실행되길 원한다면 
어떻게 해야할까????
이러한 요구사항에 대한 해결책이 setInterval(func, delay);이다.

가령 우리가 localstorage에 저장한 값을 지속적으로 console영역에 나타나도록
하고자 한다면 어떻게 해야할까????

const var1 = localstorage.getItem('username');    
function inter() {
    console.log(var1);
}

setInterval(inter, 5000);

위와 같이 하면 된다. 

2단계 date object의 활용.

const date = new Date();

date.getDate() date.getDay() date.getHour() date.getMinutes() date.getSeconds() date.getFullyear()

활용에 들어가보자. 만약 우리가 어떤 시계를 만들고 싶다면 어떻게 해야할까?????

function myOwnClock() {
    const myHour = Srting(date.getHour()).padStart(2,'0');
        const myMin = String(date.getMinutes()).padStart(2,'0');
      const mySec = String(date.getMinutes()).padstart(2,'0');

     clock.innerText = `${myHour}:${myMin}:${mySec}`
}

setInterval(myOwnClock,1000);

3단계 : 배경화면이 변하는 html만들어 보기

우리가 가끔 어떤 홈페이지에 접속하면 일정한 간격마다 d이미지가 바뀌는 홈페이지를 볼 수 있다. 이러한 홈페이지는 어떻게 구현할 수 있을까?????????

1단계 : 이미지 모음 배열 

const images = ['a.jpeg','b.jpeg','c.jpeg'];

2단계 : html요소 생성

const img1 = document.createElement('img');


const bgimg = images[Math.floor(Math.random()*images.length)];

img1.src = `img/${bgimg}`

document.body.appendchild(img1);

![](https://images.velog.io/images/ralo-gimhae/post/bcb87e51-3ab9-4c17-8607-1629d0f6c59d/image.png)

위와 같은 형태의 기초적인 html문서가 있다. 
여기서 우리는 해당 form의 input과 button태그를 특정한 변수에 담아서 사용할 수 있다. 

const myInput1 = document.querySelector('#log-form input');

const myBtn1 = document.querySelector('#log-form button');

우리는 기초적인 html에 관해서 배우면서 form과 input button의 
특징들에 대해서 살펴본 적있다.
그곳에서 input과 button을 form 안에 두면 기본적인 속성값으로 submit와 함께 브라우저가 자동적으로 새로고침된다. 
이것은 우리가 이러한 속성을 모르고 있을 경우 입력한 값이 console에 출력되지 않는 황당한 경험을 하게 된다. 

이러한 자동새로고침 현상을 막기 위해서 어떻게 할까??? 

챕터 1 : 새로고침을 막는 마법 인자!!(arg)

가령 input에 값을 입력하고 submit할 경우 우리가 브라우저의 새로고침을 막고 싶다면 아래와 같이 하면 된다.

function handleRefresh(kim) {
    kim.preventDefault();
      console.log(myInput.value);
}

myInput.addEventListener('submit', handleRefresh);

챕터 2 : classList를 이용해서 해당 태그 숨기고 보여주기

만약 우리가 어떤 값을 form에 넣고 form은 숨겨진 
다음 그 값이 h1에 출력되서 나오도록 하고 싶다면 어떻게 할까?????

1. css 작성
.hidden { display : none; }

2. css를 활용하기 
const myInput1 = document.querySelector('#log-form input');

const myBtn1 = document.querySelector('#log-form button');

const myH1 = document.querySelector('h1');

function handleForm(kim){
    kim.preventDefault();

      myInput.classList.togle('hidden');

      myH1.classList.togle('hidden');
      myH1.innerText = 'hello' + ' ' + myInput.value;

}

myInput1.addEventListener('submit', handleForm);

챕터 3 : localstorage를 활용해서 저장 불러오기 그리고 삭제해보자.

1. 어떻게 로컬저장소를 이용할까??? 

localstorage.setItem('키값', 벨류);
localstorage.getItem('키값');
localstorage.remove('키값');

그러면 local저장소를 이용해서 앞서 했던 작업을 해보자. 
css :
.hidden { display : none; }

js :
const myForm = document.querySelector('#log-form');
const myInput = document.querySelector('#log-form input');
const myH1 = document.querySelector('h1');
function handleForm(tomato) {
    tomato.preventDefault();
    localStorage.setItem('username', myInput.value);
}

myInput.addEventListener('submit', handleForm);
const savedName = localStorage.getItem('username');
if (savedName !== null ) {
    myForm.classList.add('hidden');

    myH1.classList.remove('hidden');
    myH1.innerText = 'hello' + ' ' + savedName;
}

오늘 공부할 부분은 html내에 있는 다양한 태그들을 변수에 담는 방법과 
그러한 변수를 이용해서 html을 보다 동적으로 바꾸는 과정이다. 

1. how to get tag and put it to variable?
  document.getElementById('hi')
위와 같은 방법으로 id가 hi인 태그를 가져올 수 있다.
그리고 이것을 아래와 같이

const  h1 = document.getElementById('hi');로 담아서 사용가능하다.

위와 같이 직접 id 혹은 class네임을 가지고 태그를 찾는 방법 이외에 queryselector를 이용해서도 찾을 수 있다.

이때 queryselector를 사용할 경우 ()안에 들어가는 인자는 css에서 특정 태그를 지정할 때와 같이 사용해야한다.

const h1ByQuery = document.querySelector('div#hi h1');

위와 같은 방식으로 지정해서 사용하면된다.

2. how to use java with css

const title = document.querySelector('div#hello h1');

function handleTitleClick() {
    const colorful =  title.style.color
    let newColor;
    if (colorful === 'blue') {
      newColor = 'red'
    } else {
      newColor = 'blue'
    }
      title.style.color = newColor;
}

title.addEventListener('click', handleTitleClick);

3. if tags already taked class what can i do????

classList를 활용해서 기존에 적용된 클래스에 변화를 주지 않고 새로운 클래스를 적용시킬 수 있다. 

예시)
css에 
.clicked {
  color='pink'} 라고 속성값을 적용하자.

그리고 h1태그에 기본 class를 적용 title

.title { color = 'blue'}

const title1 = document.querySelector('div.hell:first-child h1);

function handleTitleQuery() {
    const clickedClass = 'clicked'
    if (title1.classList.contain(clickClass)) {title1.classList.add(clickClass)}
  else {title1.classList.remove(clickClass)}
}

title1.addEventListener('click', handleTitleQuery);                                                                 

오늘은 어떻게 하면 html내에 있는 태그들을 불러오고 그것을 css를 변화시키거나 혹은 java내에서 변경시키는 지 알아보았다.

#오늘의 학습내용은 variable scope이다.

우선 코드를 보면서 리뷰해보자. 

a = 20 
# 우리가 보통 변수를 선언하는 방식이다.
# 여기서 이러한 변수를 클래스 혹은 함수 외부에서 선언하면 해당 변수는 전역변수가 된다. 

# 여기서 주의할 점이 있다. 
# 예제 1
def my_love_py() :
    a = 30
    print(a)

위처럼 함수를 정의하고 my_love_py로 호출하면 전역변수의 값이 함수에 의해 변하여 30이 출력된다. 

# 예제 2
a = 30
def my_py_py() :
    a += 10
    print(a)

위의 코드를 실행시키면 어떻게 될까??
변수할당에 에러가 발생한다. 그 이유는 변수 a가 
이미 할당되어 있고 지역변수가 아니기 때문이다. 

# 그래서 이러한 문제를 해결하기 위해 
global a <= 이런식으로 변수 a가 전역변수임을 선언한다.
# 처음 개발 이후 수정되는 프로그램들의 특성상 전역변수를 중간에 값을 바꾸는 것은 
# 코드를 예측하는 데 있어 방해가 될 수 있다.

# 중첩함수에서의 변수

def outer():
    e = 70

    def inner():
        # 로컬 안에 또다른 로컬에서 지역변수를 수정하기 위해서.
        nonlocal e
        e += 10  # e = e + 10
        print('Ex5 > ', e)
    return inner

전역변수와 그것을 보는 함수 globals

만약에 우리가 어떤 파일에 다음과 같이 코드를 작성하고 print(globals())라고 출력하면 어떤 값이 나올까???


a = 20

def funk1() :
    return 'print is fuck'

b = 30

def b_change(var) :
    global b
    b = b + var
     return b

def first_func(args):
    c = [x for x in args]
    def second_func() :
        nonlocal c
        my_calculate = len(c) **2
        print(my_calculate)
    return second_func()

x = 20

print(globals())를 하면 아마 아래와 같은 사전형태의 결과물을 볼 수 있다. 

{'__name__': '__main__', '__doc__': '\nChapter 1\nPython Advanced(1) - Python Variable Scope\nKeyword - scope, global, nonlocal, locals, globals..\n\n', '__package__': None, '__loader__': <_frozen_importlib_external.SourceFileLoader object at 0x000002670EB76CD0>, '__spec__': None, '__annotations__': {}, 
'__builtins__': <module 'builtins' (built-in)>, '__file__': 'c:\\Users\\ddusa\\OneDrive\\바
탕 화면\\coding\\python practice(high)\\수업자료\\예제파일\\py_ad_1_1.py', '__cached__': None, 'a': 10, 
'foo': <function foo at 0x000002670F0AB3A0>, 'b': 20, 'bar': <function bar at 0x000002670F0AB430>, 'c': 40, 'foobar': <function foobar at 0x000002670F0AB4C0>, 'd': 
60, 
'barfoo': <function barfoo at 0x000002670F0AB550>, 'outer': <function outer at 0x000002670F0AB5E0>, 'in_test': <function outer.<locals>.inner at 0x000002670F0AB670>, 'func': <function func at 0x000002670F0AB700>}


# 마지막으로 지역변수를 전역변수로 추가하고 싶다면 어떻게 할까?????

# 예시 3.

for i in range(1, 10) :
    for k in range(1,10) :
        globals()['{i} * {k}] = i * k

print(1*1) = 1

만약 웹 화면에 있는 특정 버튼을 눌럿을 경우 랜덤한 효과가 나타도록 하고 싶다면 어떻게 해야할까????

우선 html 문서부터 확인해보자.

var color = ['red', 'blue', 'yellow', 'green'];

var bg = document.getElementById('color-bg');
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
    var randomGet = Math.Floor(Math.random()*4)
    bg.style.backgroundcolor = colors[random]
});

많은 언어들과 마찬가지로 js(이하 자바스크립트)에서 역시 함수가 있다.

함수의 일반적인 구조에 대해서부터 알아보자.

function 함수명(매개변수영역) {~~~};

예시1)
function myFirstFunc(a, b) {
  console.log(a,b);
  console.log(a + b); };

위와 같은 함수가 있고,
myFirstFunc(10,20) 실행시키면 브라우저에서 표시된다. 

예시2)

function mySecondFunc(a, b) {
  console.log(a,b)
  const result = a * b
  console.log(result**2) };

보통 함수를 정의하고 해당 값을 불러올 때 return을 많이 사용한다. 

function myReturn(a,b) {
  return (a + b) * 2 };

const myMy = myReturn(2,3);

console.log(myMy + 2);

2교시 : 배열

자료들을 저장하고 싶을 때는 어떻게 할까??

그럴때는 배열을 활용한다. 

예시1)

const myArray = ['a', 'b', 'c', 'd'];

console.log(myArray[1]);
= b

위와 같은 예시에서 배열의 특징이 나타난다. 그것은 
배열 안에 있는 숫자들에 있어 순서가 있는 점이다.

만약에 우리가 let으로 배열을 선언한다면,

let myArray2 = [1,2,3,4,5,6];

myArray2[1] = 15;와 같이 구체적인 배열 내 위치를 지정하고 수정할 수 있다. 

그렇다면, 배열 내에 들어갈 수 있는 원소들에는 어떤 것들이 있을까?? 쉽게 말해서 거의 모든 자료형이 들어갈 수 있다. 하지만 여기서 주의할 점은 가급적이면 배열 내 원소들은 타입 혹은 데이터의 속성이 비슷한 것들을 모아두는 편이 나중에 이용하기 용이하다. 

3교시 : 객체(object)

여러가지 자료를 모아둘 수 있는 배열에는 한가지 단점이 존재한다.

만약 우리가 어떤 사람의 데이터를 배열로 묶는다고 생각해보자.

const kimInfo = ['kim', 32, True, 'Female'];

위의 배열을 보고 우리는 무엇을 유추할 수 있을것인가??

이러한 문제를 극복하기 위해 object(객체)를 사용한다. 

const myInfo1 = {
    name : 'kim',
    age : 32,
      job : false,
      Love : True,
      Edu : 'university'
};

console.log(myInf1.name);
= kim

위와 같은 객체 방식을 통해서 아래와 같은 객체를 만들어 활용할 수 있다. 

const myCalculator = {
    sum1 : function(a,b) {
        return a + b
    },

      abstraction1 : function(a,b) {
        return a - b
    }
};

console.log(myCalculator.sum1(2,4));
= 6

위처럼 객체 속 메쏘드를 불러와서 우리가 필요한 곳에 사용하면 된다.

1교시 : 변수

우리가 어떤 것을 정의하고 그것을 사용하기 위해 변수 = 벨류 형태를 선언한다. 

예시 )

const myFeeling = 'suck';

위와 같이 선언하면 myFeeling을 다른 곳에서 활용가능해진다. 

꾸준한 업데이트를 진행해온 java에서 변수를 선언하는 방법은 크게 3가지로 분류된다. 

1) var : 
가장 처음 나온 변수 선언 방법이다. 하지만 현재 크게 사용하지 않는 방법으로 선언 이후 다시 변수값에 대한 수정이 가능하다. 

2) const :
const는 최근 자주 사용되는 변수 선언 방법이다. 가장 주요한 특징은 변수값을 다시 수정할 수 없는 점이다. 

3) let :
const의 장점이자 단점인 변수값을 수정할 수 없는 점을 보완한 선언법이다. 

2. 변수 선언에 있어 주의할 점.

웹 혹은 프로그램 개발자들 사이에서는 변수를 선언하는 몇가지 방법이 있다. 

1) camelcase :
예를 들어보면, myFeelingWhat처럼 각 단어마다 첫 머리 부분을 대문자로 표기하는 방법이다. 

2) snakecase :
my_feeling_what 처럼 각 단어마다 _ 구분하여 표시하는 방법이다. 주로 파이썬에서 자주 볼 수 있다. 

2교시 : 자료형

자바스크립트에서 사용되는 자료들은 크게 2가지로 나눌 수 있다. 

1. 원시타입 :
str, number, boolean, undefined, null

원시타입의 특징은 아래와 같다.

let myLove = 'forever';
let myLove1 = myLove;

myLove = 'end';

console.log(myLove);
console.log(myLove1);

이렇게 변수를 선언하고 복사해서 다시 원본을 수정한다면 복사본(myLove1)은 어떻게 될까???

정답은 myLove1은 수정되지 않고 forever로 나온다. 

이유는 원시타입의 경우 실제 변수에 담긴 값을 변경하는 것이기 때문이다. 그리고 복사되는 영역에서는 원본의 데이터 그자체가 저장되기 때문에 출력시 서로 다른 값이 나온다. 


2. 참조타입 :
객체, 배열 , 함수 등 object를 일컫는 것이 참조타입이다. 


재미있는 예시 :

const good = '10';
const much = '20';

console.log(good + much);
= 1020(type str)

위 처럼 +를 제외하고 나머지의 경우 일반적인 숫자형처럼 계산된다. 

3교시 : 연산자

1. ++, --
const myValueCal = 20;
const myValueCal1 = 30;

console.log(--myValueCal);
= 19 (--를 사용하면 1 낮은 숫자가 출력된다.)

console.log(myValueCal--);
= 19 그리고 다음에 출력하면 18이 나온다.

마찬가지로 ++ 역시 위와 같은 방식으로 사용한다. 

2. !=, !==와 ==, ==== 연산자에 대하여 

const a = 10;
const b = '10';
const c = 20;

console.log(a == b) ; True
console.log(a === b) ; False
=가 1개 늘어나면 보다 엄격하게 검사한다. 

3. 논리연산자 &&(and), ||(or)에 대하여

console.log(a === 10 && c > 10); True

console.log(a === 10 || c > 30); True
||의 경우 1개만 일치하면 True.

서비스 화면 :
코드리뷰 : 전체 영역에 있어 banner영역을 만들어 준다. 그리고 그 밑에 header영역을 만들며, nav영역은 ul-li로 구성한다. 그리고 main-content에 top부분은 (가제) video-recent로 만들어 구성한다.

코드리뷰 : 또 다른 main영역은 main-video-wrap으로 만들고 그 안 h3 그 다음 ul-li로 구성해서 video-wrap은 img+span으로 한다. 밑에 text-wrap은 h3 + p/span + p로 구성한다.

2. html

3. css 코드리뷰 : a. .channel-container : width: 1284px; / margin: 0 auto;

b. #youtube-channel-content #channel-banner : width: 100%; / height: 250px; / background-color: darkblue;

코드리뷰 : a. #youtube-channel-content #channel-header .channel-profile-wrap .channel-profile img : width: 80px; / height: 80px; / border-radius: 50%; / margin-right: 24px;

b. #youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 : font-size: 25px; / color: #ffffff; / font-weight: 500; 코드리뷰 : a. #youtube-channel-content #channel-header .channel-profile-wrap .btn-subscribe : padding: 10px 20px; / background-color: red; / border-radius: 5px; / color: #ffffff; / font-size: 16px;

서비스 화면 :

(1) left-area영역 : 코드리뷰 : 기본적인 구조는 ul-li-a 그리고 a태그 안에 i 태그와 span태그로 구성한다. 그리고 각 섹션 안 마다 border-bottom을 적용하고 margin-bottom을 적용한다. 또한 로그인 버튼에 적용된 속성은 header-top영역에 사용된 로그인 버튼과 css속성을 공유한다.

(1) html

(2) css 코드리뷰 : a. #youtube-left-content .nav-section : 공통적인 양식을 공유하기 때문에 각 영역을 공통되는 nav-section클래스로 묶어서 사용한다. 코드리뷰 : a. #youtube-left-content .nav-section .nav-body li a : height: 40px; / padding: 0 24px;

b. #youtube-left-content .nav-section .nav-body li .icon : display: inline-block; / width: 24px; / height: 24px; / background-color: #ffffff; / margin-right: 24px;

c. #youtube-left-content .nav-section .nav-body li span : font-size: 13px; / color: #ffffff;

2. 서비스 화면 : (1) 서비스 화면 :

(2) html : 코드리뷰 : ul-li구조에서 이미지 부분, 썸네일 부분 그리고 글쓴이 부분까지 각각 링크가 다르게 되어있다. 그래서 지금까지 우리가 작업한 방식과는 조금 다르게 코드를 작성해야한다.

우선 img-thumnail부분을 따로 하는 태그 1개 그리고 그 안을 구성하는 img와 span이 있다. 그 다음으로 txt-info-wrap에서 a태그와 그속 img부분 그리고 txt-wrap에서 h3부분 + p부분가 있고 그 속의 텍스트는 a태그와 함께 채웠다. 마지막으로 txt-wrap-bottom은 또 다른 태그로 만들어 구성했다. (3) css

1교시 : iterator에 대해서 공부하기 전에 iter타입에 대해서 알아보자.

우리가 알고 있는 반복문에 사용할 수 있는 자료형 혹은 타입은 str, list, dict, tuple등이 있다. 

만약 우리가 어떤 객체를 보고 해당 객체가 반복가능한 객체인지 알아보기 위해서는 dir(객체)를 해보면된다. 

from collections import abc

t = 'asdgedsghh'

#for 반복

for i in t :
    print(c)

#while반복

w = iter(t)

while True :
    try :
            print(next(w))

        except stopiteration :
            break

반복형 가능성 확인
기본 : print(dir(t))

중급 : print(hasattr(t, '__iter__'))

고급 : print(isinstance(t, abc.iterable))

위의 3가지 방법을 통해서 해당 객체가 반복가능한 객체인지 확인할 수 있다. 

자, 이번에는 for를 이용하지 않고 반복가능한 객체를 마치 반복문을 사용한 것처럼 출력해보자. 

t = 'absdecxx'


def make_forloop(args):
    args = iter(args)
    while True:
        try:
            print(next(args))

        except StopIteration:
            break


if __name__ == '__main__':
    make_forloop(t)

또 다른 예제를 만들어보자.

class my_work2():

    def __init__(self, text):

        self._text = text.split(' ')
        self._idx = 0

    def __next__(self):
        try:
            word = self._text[self._idx]

        except IndexError:
            raise StopIteration

        self._idx += 1
        return word

    def __repr__(self):
        return f'you input {self._text}'

 여기서 주의할 점은 def __call__이 아니라 def __next__로 함수 이름을 주어야한다. 


 2교시 : generater를 만들어보자. 

 class my_gen (args) :

    def __init__(self, text) :
        self.text = text.split(' ')

    def __iter__(self) :

        for word  in self.text :
            yield  word

    def __repr__(self) :
        return f'you input {self.text}'


w = my_gen('i am youngmok')

print(next(w))

오늘 다룰 내용은 유튜브 카피캣이다. 우선 전체적인 서비스화면을 어떻게 구성할지 생각해보자.

지금 현재 header부분과 left-area영역은 fixed속성을 적용해야한다. 그렇다면 main-content영역은 position:abs를 사용해서 전체 영역을 만들어야 한다.

1. html :

2. css : 코드리뷰 : 기본적인 css를 작성했다.

코드리뷰 : a. #youtube-top-nav .nav-center : position: absolute; (부모 속성이 3차원) left: 50%; / transform: translateX(-50%);

b. #youtube-top-nav .nav-center .search-wrap : width: 640px; / height: 30px;

c. #youtube-top-nav .nav-center .search-wrap input : width: calc(100% - 65px); / height: 30px; border: solid 1px grey; / background-color: #212121; / color: #ffffff; / padding: 2px 6px; / font-size: 14px;

d. #youtube-top-nav .nav-center .search-wrap .btn-search : width: 65px; / height: 30px; / border: solid 1px grey; / background-color: grey;

e. #youtube-top-nav .nav-center .btn-voice : width: 24px; / height: 24px; / margin-left: 16px;

reset은 완전 초기화

namarlize는 약간의 기본 브라우저 스타일 변화 및 버그 방지

1. 서비스 화면

2. html

3. css (1) video-section 코드리뷰 : a. .video-section : position: relative; / padding-top: 60px; / padding-bottom: 40px; / border-bottom: solid 1px grey;

코드리뷰 : a. .video-section .video-wrap .image-wrap : position: relative; / width: 333px; / height: 186px;

b. .video-section .video-wrap .image-wrap img : position: absolute; / width: 100%; / height: 100%; / transition: transform 0.15s linear;

지금까지 해온 것처럼 position: rel(부모) + posiiton: abs(자식)으로 전체를 구성하였다.

c. .video-section .video-wrap .image-wrap:hover img : transform: translate(10px, -10px); 위 태그에서 transition : transform 0.15s linear 를 사용했다. transform 을 이용해서 x축으로 10px y축으로 -10px를 사용했다.

코드리뷰 : a. .video-section .btn-more : position: absolute; / text-align: center; / line-height: 30px; / text-align + line-height (태그내 글자의 x축 y축 정렬)

bottom: -16px; / left: 50%; / transform: translateX(-50%);

(2) category + footer

a. footer .txt-wrap : text-align: center;

• text-align 속성을 적용할 수 있는 예시

1. div태그(block요소)안에 span(inline)문자열이 있는 경우

2. p(block요소) 안에 img(inline)를 정렬하려는 경우

3. div태그(block요소) 안에 p태그(block요소) 안에 있는 inline요소 (텍스트 등등)있는 경우

b.footer ul li a:after : content: ""; / display: inline-block; / width: 1px; / height: 12px; / background-color: grey; / margin: 0 8px; / position: relative; / top: 1px;