[TIL] JS CRUD 공부 중...

오늘 한 것

 

- 팀프! 진행!!

[△] : JScrud 배우고 적용하기

   ㄴ 제공된 강의를 끝까지 듣고싶었는데, html을하다보니 늦어졌다..

   ㄴ 들어도 구현하는 걸 잘 모르겠다.ㅠㅠ

 

[O] : 페이지 1개 구현하기, HTML

   ㄴ html로 페이지 1개 만들었다. 이제 js로 정보를 넣어야함..

 

 

 

 

JS CRUD

 

 

- 변수 선언 시 사용!

• const 변하지 않는 것 선언
• var 전역변수
• let  변할 수 있는 것 선언, 지역변수

 

 

- <script> js 파일은 </body> 바로 위에 놓기

document가 load되는 시간차로 인해 오류가 생기는 것을 방지해준다.

위에 놓고싶으면 Load document가 끝난다음 실행하면 된다.

 

 

 

- window,  document

window    최상단에 있는 오브젝트
document   html이 들어가있다!

 

// console.log(window) 로 확인가능

// console.log(document)

 

 

 

 

 

- ul 과 ol

ul

Un ordered list     .… list

 

ol

Ordered list    1,2,3,4 list

 

 

 

 

 

 

- html 내용 가져오기

 

  1) <h1> 태그를 이용해 가져오기   다른 태그로도 가능할듯!

 

#index.html
<h1>JS Crud</h1>
<h1>두번째 h1 태그</h1>

 

#index.js
# mainHeader 변수선언, querySelector/ 최상단에 있는 1개만 가져옴
const mainHeader = document.querySelector('h1') 

# 여러 개 가져옴
const mainHeaders = document.querySelectorAll('h1')

 

 

 

 

2) id, class이름으로 가져오기

 

id = html 전체문서에서 1개 element에만 적용

class  = 여러개 가져오기 가능

 

 

#index.html
<ul id="my-list">
    <li class="list-item">첫째 내용</li>
    <li class="list-item">둘째 내용</li>
    <li class="list-item">셋째 내용</li>
</ul>

 

#index.js
const myList = document.getElementById('my-list')
const listItem = document.getElementsByClassName('list-item')

 

id의 경우 getElementById로

class의 경우 getElementByClassName으로 가져온다. (*주의 : list형태)

 

console.log로 어떤 것을 가져오는지 확인가능!!

 

 

 

 

 

 

- 가져온 html에 class 만들어 붙여주기

 

toggle을 사용하여 class를 추가해줄 수 있다

 

# id 변수 선언
const myList = document.getElementById('my-list')

# toggle로 list불러오기   + list는 추가 설정이 필요!
myList.classList.toggle('mystyle')

 

 

id만 있던 ul에 class가 추가된 것을 볼 수 있다.

 

 

toggle은 호출, 취소를 부르는 횟수에 따라 다르게 설정.

1번째 = 호출

2번째 = 지움

3번째 = 호출

… 

(!!!!좋아요..!!에 활용할 수 있다고 함)

 

 

 

 

 

- html head에서 .css 연결하기

 

 <link rel="stylesheet" href="style.css">

경로는 html파일 기준으로 경로를 적어준다

 

 

 

 

 

 

- toggle로 넣어준 클래스를  css 에서 꾸며주기

 

myList.classList.toggle('mystyle')
listItem.classList.toggle('mystyle2')

 

토글에 들어가있는 '이름'이 class이므로 css에서 호출하여 꾸며주면 된다.

 

css에서 호출할때,

id 는 #

class 는 . 을 앞에 붙인다

 

.mystyle

.mystyle2

 

 

 

 

*** 여기서 list형태로 불러오는 listItem은 오류가 난다.

ㅋㅋㅋ 오류확인하기 귀여워

출력 확인용으로 적는다

 

listItem.classList.toggle('mystyle2')

 

console.log로 출력해보면 [] =>  list형태로 출력됨을 알 수 있다.

빼내어서 각각의 item에 대하여 적용하도록한다..

*** for문 사용하지 않음! 주의!

 

 

 

Array로 설정, forEach문으로 각각의 요소를 빼내고, css를 적용해주도록 한다

 

Array.from(listItem).forEach((element)=>{
    # console.log(element)
    element.classList.toggle("mystyle2")
})

 

 

 

 

 

내일 ~ 주말 할 것

• JS 강의듣고 기능 구현하기
  
  
• 기능 구현이 어느정도 마무리되면 FileField.. 영상 업로드에 다시 도전해보자