Hjin Blog

html 생성하는 법 createElement() 문법을 이용해 태그를 생성 appendChild()로 생성 html 생성하는 법 2 //jQuery 이용 변수 a에 문자자료로 html을 만들고 insertAdjacentHTML() 안에 넣어 사용한다. 'beforeend' 는 안쪽 맨 밑에 추가하라는 뜻이다.

Ajax를 알아보기 전 먼저 서버란 무엇인가를 알아보자. 서버란 유저가 데이터를 요청 하면 데이터를 보내주는 프로그램이다. 서버에 데이터를 요청할 때는 어떤 데이터인지 url로 잘 기재해야하고 어떤 방법으로 요청할지 결정해야 데이터를 보내준다.(GET/POST) GET = 데이터를 읽을 때 POST = 데이터를 보낼 때 GET 요청 다음과 같이 주소창이 GET요청을 하는 곳이다.이곳에 특정 url을 입력하면 자동적으로 GET 요청이되고, 해당 url에 있던 데이터를 우리가 받아볼수 있는것이다. POST요청 form태그를 이용해서 post요청을 한다 action에 url을 입력하고, 전송버튼을 눌렀을때 해당경로로 포스트 요청을 보내준다. 서버는 데이터를 보내주는 역할을 할뿐만 아니라 유저의 데이터를 받아 ..

select 와 option 태그를통해 다음과 같이 쇼핑몰에서 흔히 볼수있는 UI를 구현할수 있다. 상품선택 모자 셔츠 바지 여기서 셔츠,바지를 눌렀을때 또다른 사이즈를 선택할수 있는 select 태그를 추가하고 싶다면 어떻게 해야할까. form 태그 안에 select 를 추가하여 이벤트가 발생할때 태그를 감춰주는 css를 탈부착 하는방법이 있는데 이건 많이 해봤으니 pass 그래도 해보기, 95 100 if 문을 이용해 셔츠 option을 선택하면 사이즈를 선택할수 있는 select가 나타난다. ** function 안에서 value 값을 지정할때 this를 사용할수 있지만 arrow function '() =>' 에서는 this를 넣었을때 잘 동작하지 않는다. 이유는 -그냥 함수는 함수 안에서 thi..

Array(배열)이란 여러 개의 값을 순차적으로 나열한 자료구조다. 배열은 사용 빈도가 높으므로 배열 베서드를 능숙하게 다룰 수 있다면 코딩에 많은 도움이 된다. const arr = ['사과', '바나나','오렌지']; 배열이 가지고 있는 값을 요소 element라고 하며, 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. (원시값은 물론 객체,함수,배열 등 자바스크립트에서 값으로 인정하는 모든 것) arr[0] // '사과' arr[1] // '바나나' arr[2] // '오렌지' 다음과 같이 배열의 요소는 배열에서 자신의 위치를 나타내는 0이상의 정수인 인덱스(index)를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다. arr.length // 3 배열은 요소의 개수, 즉 배열의 길이를 ..

다음과 같이 html 안에 유저 몰래 정보를 숨겨놓을 수 있는데 document.querySelector().dataset.데이터이름; 이렇게 요소에 숨겨놨던 데이터가 해당 자리에 남는다. dataset 문법을 이용한 탭기능 Products Information Shipping 다음과 같이 버튼에 id = "n" 라는 값을 숨겨놓았다. function 탭열기(숫자){ $('.tab-button').removeClass('orange'); $('.tab-button').eq(숫자).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-content').eq(숫자).addClass('show'); } $('.list').click(functi..

이벤트 버블링이란 어떤 HTML 태그에 이벤트가 발생하면 그의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. 안녕하세요 예를들어 안녕하세요라는 p태그를 클릭하면 브라우저는 사용자가 총 3번의 클릭을 했다고 인지한다. (p태그 위 div 그 위의 div 태그) 이것을 이벤트 버블링이라 한다. 이러한 이벤트 버블링 문제를 해결할때 사용하는 함수들을 알아보자. 이벤트리스너의 콜백함수에 파라미터(e)를 추가하면 다음과 같은 함수를 사용할수 있다. e.target; : 유저가 실제로 누른거 e.currentTarget; ,this; : 이벤트리스너 달린 곳 e.preventDefault(); : 이벤트 기본동작 막아줌 e.stopPropagation(); : 내 상위요소로 이벤트 버블링 막아줌