[TIL] 12/26_1 JS와 jQuery 알아가기

웹개발 종합반 2주차 강의 - JS 문법 끄적끄적

• JS로 웹페이지 움직이게 동작하려면 body에 있는 목표물에 <id="00">으로 이름을 지어준 뒤, 
  head의 script로 넘어와서 <document.getElementById('00')>로 호출한다.
  
  1. ex) document.getElementById('aa').style.color = 'red'
     -> aa의 이름을 가진 문자를 빨간색으로 바꾼다.
• 1번을 보다 쉽고 간단하게 하려면 jQuery를 사용한다.
  jQuery : 남이 만들어놓은 자바스크립트 라이브러리
  
  1. title밑에 jQuery를 추가한 뒤
  2. id값은 똑같이 주고
  3. <$('#00')>로 호출한다
  4. ex) $('#title').text('쥬라기월드')
     -> title의 이름을 가진 문자열을 쥬라기 월드로 바꾼다.
• 버튼을 눌렀을 때 동작하게 하려면 함수를 사용한다.
  1. button onclick="함수명()"
  2. head의 script 안에 있는 함수를 선언해주고 안에 코드를 작성해주면 된다.
  3. ex) 

function aaa() {
	let c = [
    	{ 'name': 'john', 'age': 30 },
        { 'name': 'bob', 'age': 24 }
    ]
    $('#q1').text(c[1]['name']);
}

aaa라는 함수는 q1이라는 이름을 가진 문자열을 c라는 리스트의 2번째에 있는 name인 bob으로 바꾸겠다라는 것.

 

• jQuery에는 접었다 펼쳤다 하게 해주는 toggle()이라는 함수가 있다.
  • display값이 none으로 되면서 안 보이게끔해서 동작한다.
  • ex) $('#aaa').toggle()
• val()함수는 값을 가져온다.
  • 입력(이름, 검색어 등) 값을 가져올 수 있다는 것
  • let aa = $('#bb').val();
    alert(aa);
    라고 한다면 aa에 bb라는 이름을 가진 곳에 들어온 입력 값을 넣어주고 알림창으로 그 값을 띄우는 것을 말한다.
• js에서 ``사이에 html 코드를 넣어주면 문자열로 인식해서 밑에 있는 html코드에 붙여서 동작하게 할 수 있다.
  • let 00 = `aaa`으로 사용하고 00에 aaa라는 html코드를 넣어줬다는 것
  • 붙이고자 하는 곳의 id 뒤에 append를 사용해 붙여준다.
    • $('#bbb').append(00);
      -> bbb뒤에 00 즉, aaa코드를 붙여준다.
• 데이터를 주고 받는 형식 : JSON형식
  -> key value형식으로 딕셔너리랑 똑같다.
• GET 요청 : 클라이언트가 서버에 요청해서 데이터를 가져가는 형식
  • 인터넷 주소 : //부터 첫번째 /까지가 서버의 위치, ?전까지가 창구의 이름, ?뒤는 우리가 창구에서 가져가는 데이터
    -> GET방식
• <span> : 문자열 중 한 부분만 지정하고 싶을 때 사용
  • 안녕하세요 만나서 정말 반갑습니다. 라는 문장에서 "정말"을 강조하기 위해 뭔갈 하고 싶다면
    <p> 안녕하세요 만나서 <span id="msg">정말</span> 반갑습니다.</p>로 구역을 나누고 id값을 부여해서
    style에서 커스텀 할 수 있게 됨
• $(document).ready(function(){}는 페이지가 실행됨과 동시에 동작한다
  • $(document).ready(function() {
                alert('hey');
       })
  • 위의 코드를 head의 script에 넣으면 페이지를 새로고침 할 때마다 hey라고 하는 창이 뜨게 된다.

·