개발일지

Javascript 공부 #1 본문

Javascript

Javascript 공부 #1

kosssshhhh 2023. 1. 12. 16:45

html 변경

document.getElementById(’hello’).innerHTML = ‘안녕’;

(문서) (~의) (id hello:html 요소를 가져와라) (HTML 안) <= ‘안녕

 

document.getElementById(’ ’).?? = ‘??’; 형식으로 사용

getElementById 는 셀렉터라고 함!

.innerHTML / .style / .color 등 이렇게 점을 찍고 괄호가 없는건 메소드 이다.

html 요소의 어떤 속성을 변경할지 결정하기 위해 사용.

 

자바스크립트의 역할

  • html의 조작과 변경을 담당하는 언어
  • 예시로 유저의 이벤트 등을 처리 가능

<script> 안에 작성한 코드들은 브라우저 새로고침시 1회 실행된다.

‘ command + / ‘ → 주석처리 커맨드

 

 

UI 만드는 step

  1. HTML/CSS 로 미리 디자인 만든다.
  2. 필요할 때 보여주도록 자바스크립트로 이벤트 처리

버튼 이벤트 onclick 속성 사용

<button
      onclick="document.getElementById('alert-box').style.display = 'block';"
    >
      버튼
    </button>

버튼 눌렀을 때 onclick 안의 자바스크립트를 실행

 

function

function 작명() {
	...
}

다음과 같은 형식으로 작성

 

함수 이름 형식

  1. 소문자로 시작
  2. camelCase 로 작성
function openAlert(){
	document.getElementById('alert-box').style.display = 'block';
}

긴 코드 재사용 잦을 경우에 편리 (재사용성)

특정 기능을 다음에도 편리하게 쓰기위해 모듈화 해놓는 문법

 

잦은 간단한 에러 사항

  1. 자바스크립트<script> 를 html 위쪽에 작성을 하게 되면 오류날 가능성이 있음. 
  2. → 코드를 위에서부터 읽어 내려오기 때문에 html 먼저 읽어놓고 js 로 조작하는 형식으로 작성해주자 (디버깅)
  3. 셀렉터 오타 주의
  4. → 크롬의 개발자 도구에서 콘솔창 오류 잘 찾아보기
  5. 기본 문법 오타 주의

 

 

매개변수(parameter), 인자(argument) 사용하기

function controlAlert(state) {
        document.getElementById("alert-box").style.display = state;
      }

위와 같이 state 매개변수를 사용하여 인자를 받아서 코드를 더 간결하게 작성 가능

함수 사용하는 곳에서 인자로 받아와 사용

비슷한 함수가 많으면 가변적인 부분들을 변수 사용하여 축소

 

 

class 이름으로 요소 찾기

<button class='title'>...</button>
...
...
document.getElementsByClassName('title')[0].innerHTML = 'hi!';

class명은 중복 가능하기 때문에 위와 같이 인덱싱을 통해 지정해줄 수 있다.

 

event란?

  • 클릭, 키입력, 스크롤, 드래그 등 여러가지 사용자가 하는 행위들
document.getElementById("close").addEventListener("click", function () {
        document.getElementById("alert").style.display = "none";
      });

이벤트 리스너를 사용하여 사용자의 event들 받아올 수 있음

위의 코드는 click event를 받아온 것

function(){}

→callback 함수

순차적으로 실행하고 싶을 때 콜백함수를 사용

class name을 여러 개 지정해서 class 부착식으로 개발하면

  • 애니메이션 추가 쉬움
  • 나중에 재사용 편리

 

 

Bootstrap 이용하여 UI 쉽게 만들기

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap 초기 코드

위에 html 코드에 bootstrap에서 필요한 UI들 갖고와서 사용하면 됨

 

 

document
        .getElementsByClassName("navbar-toggler")[0]
        .addEventListener("click", function () {
          document
            .getElementsByClassName("list-group")[0]
            .classList.toggle("show");
        });

classList 사용하여 해당 태그에 클래스명 추가해주기

toggle 함수 이용하면 뗏다 붙였다 할 수 있음

 

 

querySelector

getElementById(), getElementByClassName() 대신에 querySelector 사용가능

css에서 사용하는 . 이나 # 을 통해 선택할 수 있음

document.querySelector('.test1').innerHTML = '안녕';
document.querySelector('#test2').innerHTML = '안녕';

querySeletor() 안에서는 css 셀렉트 문법을 사용할 수 있다.

다만 querySeletor() 는 맨 위의 한 개의 요소만 선택한다.

className이 여러 개일 경우 querySelectorAll() 을 사용하여 모든 요소들을 배열에 넣어줌

따라서 querySelectorAll()[0] 과 같이 사용할 수 있다.

document.querySelectorAll('.test1')[1].innerHTML = '안녕';

JQuery

자바스크립트는 코드가 매우 길고 더럽다.

따라서 JQuery 라이브러리를 이용하여 코드를 더욱 짧고 간결하게 사용할 수 있다.

JQuery는 단지 자바스크립트의 코드 양을 줄여주기 위한 라이브러리

JQuery 사용하여 html 변경하기

<p class='hello'>안녕<p>

<script>
	$('.hello).html('hello');
</script>

다음과 같이 $를 이용하여 매우 짧아진 형태를 볼 수 있다.

$ 는 querySelector 와 동일하게 사용하면 됨

 

 

 

JQuery 사용하여 스타일 변경하기

<p class="hello">안녕</p>

<script>
  $('.hello').css('color', 'red');
</script>
  • html 셀렉터로 찾으면 html 함수들만 뒤에 붙여야하고, JQuery 셀렉터로 찾으면 JQuery 함수들만 써야한다.

 

 

JQuery 사용하여 class 탈부착하기

<p class="hello">안녕</p>

<script>
  $('.hello').addClass('클래스명');
  $('.hello').removeClass('클래스명');
  $('.hello').toggleClass('클래스명');
</script>

 

 

html 여러 개 바꾸기

<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

<script>
  document.querySelectorAll('.hello')[0].innerHTML = 'hello';
  document.querySelectorAll('.hello')[1].innerHTML = 'hello';
  document.querySelectorAll('.hello')[2].innerHTML = 'hello';
</script>

자바스크립트로 여러개의 html을 바꾸려면 위와 같이 작성해주어야함

하지만 JQuery 는 $() 셀렉터를 통해 querySelectorAll 처럼 여러 개 다 찾아준다

 

 

<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

<script>
  $('.hello').html('hello');
</script>

동일한 className 가진 여러개의 태그를 한번에 바꿀 때도 용이하다

 

 

JQuery 에서의 이벤트 리스너

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
		$('.hello').html('hello');
	});
</script>
  • addEventListner 대신에 on 사용해주면 됨 (코드의 양 줄어듬)

 

 

 

UI 애니메이션도 간단하게 사용할 수 있음

p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    $('.hello').fadeOut();
  });
</script>

.hide(), .fadeOut(), .slideUp() 등 여러가지 애니메이션 제공해줌

저작자표시

'Javascript' 카테고리의 다른 글

this 키워드  (0) 2023.07.06
Javascript 공부 #6  (0) 2023.01.20
Javascript 공부 #5  (1) 2023.01.16
Javascript 공부 #4  (0) 2023.01.15
Javascript 공부 #2  (0) 2023.01.12
'Javascript' Related Articles more