📍 UI 만드는 순서 (혼자서도 할 수 있다🔥)

  1. HTML/CSS 로 원하는 UI 모양을 일단 만든다.

  2. 만든 문서는 일단 숨겨둔다 (display: none; <- css 로 숨긴다)

  3. 버튼을 하나 만들고 버튼을 클릭 했을때 숨겨둔 HTML/CSS UI 가 나오도록 만든다고 생각한다.

  4. 태그 옆에 속성으로 onclick 를 넣는다.
    (onclick 안에는 JS 를 쓸 수 있음, 대부분의 태그에 사용 가능한 속성임)

  5. 자바스크립트로 버튼을 눌렀을때 display: none → display: block 으로 바꿔준다.



📍 Alert 창을 만들어보자 Ⅰ (id 셀렉터)

Q. id 값이 'hello' 인 h1 태그에 컨텐츠를 JS를 이용하여 'Hi!' 으로 변경해보자.

A. JS의 기본적 문법은 이렇다. 그리고 script 태그 안에다 보통 적는다.
(inline 으로 적어도 되는 속성들도 있음)



📍 Alert 창을 만들어보자 Ⅱ (function 함수 만들기)

Q. 열림 버튼을 누르면 alert 창이 뜨고, 닫힘 버튼을 누르면 alert 창이 다시 없어지게 해보자.

A. function 함수로, 길고 보기 힘들었던 식을 짧은 함수명에 담을 수 있다.
그리고 onclick 값으로 function 함수명을 적는다.


※ 굳이 funtion 함수를 왜 쓸까?

긴 코드는 가독성이 떨어진다. 그러면 내가 보기도, 다른 사람이 보기도 어려워짐.
function 함수로 긴코드를 축약하고, 긴코드를 재사용하기에도 좋게 할 수 있다.



⭐️ 프로젝트 진행 시 실수로 알게 된 것

프로젝트 처음에 열리는 버튼의 function의 함수명을 'open' 으로 주었었다.
그랬더니 '열기' 버튼을 누를때마다 모든 컨텐츠와 요소들이 다 사라졌다.😅 (이세계로 떠난 그들...)
보통 구현이 제대로 안되는건 오타일 경우가 대부분이라서
몇번을 다시 써보고 확인했지만 여전히 이세계로 떠난 컨텐츠들은 제대로 구현이 되지 않았다.

구글신님의 도움으로 JS에 open 은 팝업창을 띄우는 함수임을 알았다... 🤦‍♀️

당연히 함수명을 바꾸니 바로 제대로 작동되더라... 하하하핫 ㅎㅎ 🥲
이렇게 또 하나를 배워간다!



⭐️ 여태까지 코드를 작성하며 오류가 나는 이유 정리

  • 셀렉터에 오타가 많다. 잘못적은 쉼표, 마침표 등과 소문자 대문자 구분이 틀린 등등
  • 기본적으로 문자 자체 오타 (제일 많다, 항상 스펠링이 틀리거나 다르다...)
  • JS 에서는 스크립트 작성을 < / body > 에 해야하는데,
    브라우저가 위에서부터 문서를 읽어 내려옴으로 우선 html 문서를 읽게 한뒤
    자바스크립트 문서를 읽게 하기 위함이다. 그래야 오류가 없다.

⇒ 여기서 또 느끼지만... 컴퓨터는 잘못이 없다. 다 사람잘못이다 🥲


profile
front-end ing

0개의 댓글