[TIL] 2022년 2월 4주차

 

 

• 코드는 깃헙에 올리므로 여기서는 공부한 내용을 요약하는 식으로 정리합니다. 

 

 

 

2월 21일

• 저번주에도 강조했지만 라디오나 체크박스는 항상 name 이 똑같아야한다!
• 계속해서 배열명.forEach(function(elt, i, array) {}); 를 다양하게 활용해보고 있다.
• 상품의 주문수와 가격을 추가상품의 가격과 함께 계산하는 계산서를 만들었는데 어려웠다.
• 기억해야할 것
  • 1. 서로 다른 태그에 배열의 어떤 key 에 대한 value 값으로서 같은 id 를 주면 ( 원래 id 값은 유일해야 하지만 이렇게 쓰는게 좋을 때가 있다. ) 다른 태그의 같은 id 로 원하는 값을 금방 알아올 수 있다.
  • 글로 작성하면서 다시 이해했다.
• 2022.02.23 - [분류 전체보기] - [JavaScript] 동일한 id 속성을 여러개 준다고? (2탄)

[JavaScript] 동일한 id 속성을 여러개 준다고? (2탄)

 

 

 

 

 

2월 22일

 

• 정규표현식을 공부했다. 정리는 깃헙에 해두었다.
• form 태그에서 사용되는 method 의 get방식, post 방식을 공부하고 따로 블로그에 정리했다.
•  
• 여러 정보를 입력하는 회원가입 기능을 만들고, 정규표현식으로 유효성 검사를 하는 것을 공부했다. 
• 정규표현식을 사용해서 유효성검사를 할 때는 기록해놓은 검증된 정규표현식을 가져다 쓴다.
• javascript 를 끝내고 jQuery 를 시작했다~!

 

• 기억해야할 것
  • 라디오와 체크박스는 value 를 꼭 넣어줘야 선택한 값이 들어와서 DB 로 전달해 줄 수가 있다. 어차피 DB 에 들어가야하기 때문에 DB 의 이름을 따르는 것이 좋다. 
  • fieldset 으로 폼을 묶었으면 legend 로 fieldset 에 대한 제목을 지정한다.
  • select 태그에서 value 값을 주지 않은 상태에서 목록 개수가 많지 않아서 <option>으로 목록을 주었다면, option 태그사이의 값이 db 로 넘어가고 value 값을 주었을 시에는 그 value 값이 넘어간다.

 

---

jQuery 기록

 

• jQuery 는 javascript 를 보다 쉽게 사용하게 해주는 라이브러리이다. 그래서 jQuery 파일을 <script> 에 src 로 경로를 지정해주는 방식으로 사용할 수 있다.

         === >  이렇게 쓴다.  <script type="text/javascript" src="../../js/js/jquery-3.6.0.min.js"></script>

• 또한 웹브라우저에 HTML 문서가 로드되고 난 후에 실행하므로 어디에 기술해도 괜찮다.

         === >  이렇게 쓴다. $(document).ready(function() {...});  ==> $(function() {); 로 사용해도 된다.

 

• jQuery 는 javascript 와 비슷한 메소드가 더러 있다.
• window.open() 으로 팝업창을 만들었다.
• jQuery 에서는 $("") 와 같은 형태로 태그를 잡아오거나 한다. 이 형태를 기억하자. $("")
• .bind() 는 js 에서 공부한 addEventListener() 처럼 태그와 이벤트를 결합해주는 메소드이다. .bind() 없이 바로 .click 같은 메소드도 같은 기능으로 사용가능하다.
• 입력한 값 또는 선택한 값 에 접근하는 .val(), 태그 안의 내용을 보이지 않게 하는 .hide(), 반대로 보이게 하는 .show() 를 공부했다.

 

 

 

 

 

2월 23일

 

• 선택자 요소가 현재 .hide() 를 준 상태라면 .show() 를 수행해주고, 현재 .show() 된 상태라면 .hide() 를 수행하는 .toggle() 을 공부했다.
• 예전에 공부했던 내용 중에, 바깥 태그에 display : flex 를 주고, 안의 태그에 margin : auto 를 주면 화면 상단의 중앙에 오는 것을 다시 복습했다.
• $(event.target) 을 활용해서 이벤트(클릭, 마우스오버,,,) 가 발생된 엘리먼트를 잡아오는 것을 공부했다. 앞으로 자주 사용될 것이므로 잘 기억해두자.
• $(event.target).text() 는 이벤트가 발생한 태그의 텍스트를 가져오는 것이다.
• .unbind() 는 () 안의 이벤트와 연결을 끊는다는 것이다.
• .hide() 는 보이지 않게 숨기는 것이고,  .empty() 는 선택자 안의 내용물을 비운다는 것이다.
• mouseover(), mouseout() 을 공부했다.
• 선택자.attr('id')  또는 선택자.prop('id') 를 이용해서 id 또는 name 명을 알아올 수 있다.
• 선택자.eq(index값) 으로 배열의 특성을 가진 선택자에서 index 값에 해당하는 선택자(요소)를 가져오는 것으로 마치 배열에서 특정 index 에 해당하는 배열요소를 얻어오는 것과 같은 것이다. 
• .index() 꼭 기억, 나중에 엄청 편하고, id 뭐 다 필요없어진다.
• 선택자.hover(function(){} , function(){}); 를 공부했다. hover() 은 이벤트가 아니라 jQuery 에서 제공하는 메소드이다.
  • ==> 첫번째 function(){} 은 mouseover 에 해당하는 내용을 기재하는 것이고, 두번째 function(){} 은 mouseout 에 해당하는 내용을 기재하는 것이다.
• window.onload 를 공부했다.
• 2022.02.28 - [분류 전체보기] - [JavaScript] window.onload 사용시 주의할 점

[JavaScript] window.onload 사용시 주의할 점

 

 

 

2월 24일

 

• CSS 에서 클래스를 정의하고, addClass() 또는 removeClass() 로 css 효과를 넣어주고 제거하는 것을 공부했다.
• 선택자를 잡아올 때 안잡히는 경우에 사용하는 $(document).on() 을 공부했다.
• transition 은 속성의 변화 속도를 조절하는 css 이다. 보통 마우스오버시에 변화가 나타나고 글꼴의 크기나 요소의 크기가 부드럽게 변하도록 만들 때 사용된다.
• css 스타일을 적용할 때 광도(빛의 정도) 를 나타내주는 opacity 를 공부했다. 범위는 0.0 ~ 1.0이다.
• 내용을 선택자 앞에 추가하는 prepend(), 뒤에 추가하는 append() 와 태그 내용물을 제거하는 empty(), remove() 를 공부했다. remove() 는 태그 자체를 제거하는 것이라서 remove() 사용 후의 관련된 선택자를 주의해서 사용해야 한다.
• 기억해야할 것
  • 1. body 태그 안에 직접 기술한 선택자가 아니라, script 내에 기술한 선택자는 못잡아오는 경우가 발생할 수 있는데, 그때는 $(document).on("이벤트종류","선택자",function(){}); 처럼 on() 을 사용해서 잡아와야 한다.
  • 2. jQuery, jQuery UI 같이 외부에서 끌어다 쓰는 라이브러리는 파일을 다운받아서 경로를 입력해도 되지만, 웹사이트 주소를 경로로 지정해서 바로 사용이 가능하다. 
  • 3. $(event.target) 과 $(this) 는 모두 function() 을 적용할 시의 이벤트가 발생한 그 태그를 잡아오는 것이다.
  • 4. $(event.target).index() 는 1부터 시작한다!! 0부터 시작한다고 착각하지 말자.
  • 5. css 의 속성값을 알아오고자 한다면 선택자.css(css종류) 처럼 사용하면 된다. ex) 선택자.css('display'); 는    현재  display 의 속성값이  none 인지, block 인지 등을 반환해준다.
  • 6. 연속된 버튼들 사이의 미세한 여백을 없애고 싶으면 float:left 를 주면 된다.
  • 7. .each(index, elt) 는 jQuery 에서만 사용가능하고 파라미터가 2개라는 점에서forEach() 와 다르다.
• 중요한 내용을 따로 기록했다.
• 2022.02.26 - [분류 전체보기] - [JavaScript] 객체배열에서 이벤트가 발생한 객체의 속성값 알아오는 예제

[JavaScript] 객체배열에서 이벤트가 발생한 객체의 속성값 알아오는 예제

 

 

 

 

 

2월 25일

 

• 선택자의 자식태그(손자는 아님)들만을 가리키는 .children() 과, 선택자 내에 있는 모든 하위요소를 가리키는 .find() 를 공부했다.
• 선택자.toggleClass("클래스명"); 은 선택자에 css "클래스명" 이 이미 적용되어 있으면 제거해주고, 적용되어있지 않으면 적용해주는 것이다. 즉 addClass 와 removeClass 가 합쳐진 것이라고 보면 된다.
• 선택자의 부모태그를 가리키는 .parent()와, 자기자신을 제외한 형제태그들을 가리키는 .siblings() 를 공부했다.
• 선택자에 해당하는 내용물을 밀리초동안 위에서부터 아래로 내리는 .slideDown(밀리초)과 아래에서 위로 올리는 slideUp(밀리초)  를 공부했다.
• 선택자에 해당하는 내용물을 밀리초동안 천천히 나타내는 fadeIn(밀리초), 천천히 사라지게 하는 fadeOut(밀리초)를 공부했다.
• 기억해둘 것
  • 1. forEach() 는 반복문을 빠져나오는 (예를들면 break; 같은) 기능이 없지만, each() 는 return false; 가 그 역할을 한다.
  • 2. eventBubbling 현상을 공부했다.(다음주에 공부하고 TIL 에 올리겠다.)
  • 3. .prop() 또는 .attr() 을 사용할 때는 어떤 속성을 대상으로 하는지 잠깐 검토하자. 
  • 2022.02.28 - [분류 전체보기] - [jQuery] .prop() 과 .attr()

[jQuery] .prop() 과 .attr()

 

 

 

2월 26-27일

 

• 한주간 배운 것을 복습했다.