[javascript] 웹UI를 만들어보며 공부하는 자바스크립트 문법

🌈 자바스크립트는 HTML 조작을 위해 사용

자바스크립트는 "html 조작과 변경" 을 담당하는 언어이다.

왜 조작을 하냐?
- 탭, 모달 등 웹페이지 UI 만들 수 있음
- 유저가 입력한 데이터를 검사할 수 있음
- 유저가 버튼 누르면 서버로 데이터 요청 할 수 있음

📕 html 조작, 변경하려면

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="hello">안녕하세요</h1>

    <script>
      document.getElementById("hello").innerHTML = "안녕"; //html 문서의 id="hello" 인거 찾아서 그거의 내부 HTML에 '안녕' 집어넣어라
    </script>
  </body>
</html>

자바스크립트 코드를 짜고 싶으면 <script> 태그 안에 적으면 된다
그리고 위처럼 그대로 한 줄 작성하면 안녕하세요 였던 <h1>태그가 안녕 으로 바뀜

💡 결론,

document.getElemantById('???').??? = '???';

여기 물음표만 맘대로 바꿔주면 html의 모든걸 변경하고 조작 가능

document.getElementById('???').src = 'profile.jpg';

원하는 요소에 이미지도 추가 할 수 있고

document.getElementById('???').style.color = 'red';

요소에 style="color:red" 도 추가 가능

📌 참고

.getElementById() 는 셀렉터라고 부른다. html 요소를 찾기 위해 사용
.innerHTML / .style / .color 이렇게 점 찍는데 괄호없는건 메소드(또는 함수) 라고 부른다. html 요소의 어떤 속성을 변경할지 결정하기 위해 사용

🌈 동적 UI 만들기 - Alert 박스 만들기

📕 기본적인 UI 만드는 법칙

1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김
2. 버튼을 누르거나 할 경우 UI 를 보여달라고 자바스크립트 코드 짬

1️⃣ Alert UI 디자인부터 함

// html 파일

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="alert-box" id="alert">
      알림창임
    <button onclick="document.getElementById('alert').style.display='none'">

    </div>
    <button onclick="document.getElementById('alert').style.display='block'">
      버튼
    </button>
  </body>
</html>

// CSS 파일


.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}

UI 를 평소에 숨기고 싶으면 display : none 을 주면 된다
다시 보여주고 싶으면 display : block 넣으면 된다
싫으면 visibility : hidden 도 있다

2️⃣ 버튼 누르면 alert UI 보여주기

<button onclick="Alert 박스 보여쥬~"> 버튼 </button>

onclick : html을 클릭시 onclick 안의 자바스크립트를 실행해준다

<button onclick="document.getElementById('어쩌구').style.display = 'block';"> 버튼 </button>

html을 변경할 땐 항상 document 부터 시작하는 ~ 쓰면 됨

🌈 function 문법

function 자유롭게작명() {
	축약하고 싶은 긴 코드
}

📕 Alert 여는 코드 function 으로 축약 해보기

<button onclick="알림창열기()">알림창 여는 버튼</button>

<script>
  function 알림창열기(){
    document.getElementById('alert').style.display = 'block';
  }
</script>

알림창열기() 라고 쓸 때마다 function 안에 있는 긴 코드가 실행된다

✅ 함수 이름 작성 시
- open_alert() 이런거 쓰면 안됨
- openAlert() 이렇게 붙여서 쓰는게 자바스크립트 관습 (일명 camelCase)

🌈 function의 파라미터 문법

function 알림창열기(파라미터){
  document.getElementById('alert').style.display = 파라미터;
}

알림창열기('안녕');
알림창열기('천재');

알림창열기('none'); // 이거 실행하면 알림창열릴듯
알림창열기('block');  //얘는 닫힐듯

🔻 함수하나로 각기 다른 알림창 버튼 누르기

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="alert-box" id="alert">
      알림창임
      <button onclick="알림창('none'); ">닫기</button>
    </div>
    <button onclick="알림창('block'); ">버튼</button>

    <script>
      function 알림창(parameter) {
        document.getElementById("alert").style.display = parameter;
      }
      알림창("block");
      알림창("none");
    </script>
  </body>
</html>

함수 안에 파라미터를 넣어주면 아까처럼 함수 2개나 만들 필요 없음

📕 파라미터 문법 이해를 위한 예시

function plus(구멍) {
	2 + 구멍
}

plus(3) // 2+3


function plus2(구멍1, 구멍2) {
	구멍1 + 구멍2
}

plus(2, 3) // 2+3

🌈 이벤 트 리스너

📕 버튼 별 알림창 만들기

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="alert-box" id="alert">
      <p id="title">알림창임</p>
      <button onclick="알림창('none'); ">닫기</button>
    </div>
    <button onclick="알림창('block'); ">알림창</button>
    <div>
      <button onclick="아이디알림창();">버튼1</button>
      <button onclick="비번알림창();">버튼2</button>
    </div>

    <script>
      function 알림창(parameter) {
        document.getElementById("alert").style.display = parameter;
      }
      알림창("block");
      알림창("none");

      function 아이디알림창() {
        document.getElementById("title").innerHTML = "아이디 입력 하셈";
        document.getElementById("alert").style.display = "block";
      }
      function 비번알림창() {
        document.getElementById("title").innerHTML = "비번 입력 하셈";
        document.getElementById("alert").style.display = "block";
      }
    </script>
  </body>
</html>

📕 getElementsClassName 셀렉터

어떤 html 요소를 찾고 변경할 때 id 로 찾았었는데 class 로도 찾을 수 있다!!

728x90

저작자표시 동일조건

'JavaScript' 카테고리의 다른 글

[모던자바스크립트 DeepDive] 34. 이터러블 (0)	2023.02.04
[모던자바스크립트-DeepDive]39장 DOM (1)	2023.02.04
[javascript]03_데이터타입 let vs var, hoisting (0)	2022.01.07
[javascript]02_ script async 와 defer의 차이점 (0)	2022.01.06
[javascript]01 자바스크립트 실행하기 (0)	2022.01.06

어나THE_ME

[javascript] 웹UI를 만들어보며 공부하는 자바스크립트 문법

🌈 자바스크립트는 HTML 조작을 위해 사용

🌈 동적 UI 만들기 - Alert 박스 만들기

🌈 function 문법

🌈 function의 파라미터 문법

🌈 이벤 트 리스너

'JavaScript' 카테고리의 다른 글

티스토리툴바

[javascript] 웹UI를 만들어보며 공부하는 자바스크립트 문법

🌈 자바스크립트는 HTML 조작을 위해 사용

🌈 동적 UI 만들기 - Alert 박스 만들기

🌈 function 문법

🌈 function의 파라미터 문법

🌈 이벤 트 리스너

'JavaScript' 카테고리의 다른 글

'JavaScript' Related Articles

티스토리툴바

[javascript] 웹UI를 만들어보며 공부하는 자바스크립트 문법

🌈 function의 파라미터 문법