CODE-IT JQ

pt1.함수

<Js 내장함수>
parseInt 함수 :
Ex)
parseInt('100세');
parseInt('세100');
100
NaN <-숫자가 앞에있어야 작동함
parseFloat() 문자열 안에서 숫자(소수 포함)를 뽑아주는 함수.
prompt() 사용자에게 메시지를 띄우고, 문자열을 입력받는 함수.
confirm() 사용자에게 메시지를 띄우고, 확인과 취소 중 하나를 누르게 하는 함수.

<switch 문>
if문 : 대소비교, 범위, 복잡한조건 ex)점수
switch문 : (값에따라분리,,)ex)중국집 코스요리

---

https://www.codeit.kr/assignments/654

<For of 반복문>
For ( 변수 of 배열) {
console.log(변수);
}
불필요한 변수 안만들어도 됨
값을 바로써서 ,굳이 배열에 인덱싱해서 값을 안가져와도됨

• for...of문은 배열의 value에 직접 접근하는 반면, for...in문은 index에 접근

<while 문>
변수선언;
While (조건) {
반복될코드;
}

• 일반적으로 반복 횟수가 예측 가능할 때에는 for문을 사용하는 것이 더 눈에 잘 들어옵니다. 반대로 반복 횟수를 예측할 수 없으면 while문을 쓰는 것이 더 적합

---

HTML, CSS와의 콜라보레이션

<a onclick=“document.getElementById(‘photo’).src=‘images/seoul.png’”>

Html에는 js코드를 최대한 적게 넣는 습관 !! (코드를 함수로 빼기)

• jquery

2. 파일
   경로 써줘야함

요소선택 (‘#선택자’).attr();(‘#선택자’).css();

attribute 속성 ; 파라미터로 넘겨주면 선택자의 속성을 바꿔주는 역할
선택자의 속성을 파라미터로 넘겨준 값으로 바꿔주는 역할

• Event

Event Handling 이벤트가 생겼을때 동작이 일어나도록 하는것
순수 자바스크립트 (Vanilla JavaScript)

---

• 키보드 이벤트

$(document) => 페이지전체

---

Chapter 7. 자바스크립트의 패키지 선물 세트

• Math
• String
• Array
• Date

---

Chapter 8. 프로젝트: 드럼 시퀀서

• Audio
  audioFile.currentTime = 0; //오디오파일 재생위치 설정
  *keyboard event
  $(document).on(‘keydown’, 함수 );
  Function 함수(event) {
  if(event[‘key’] === ‘1’) {
  규칙 ;
  } else if (event[‘key’] === ‘2’) {
  규칙 ;
  } …
  }

Chapter 9. 세련된 코드란?

• 스타일가이드
  스타일이 잘 갖추어진 코드는 1. 가독성이 높고, 2. 유지보수 및 재사용성이 높아지며, 3. 버그를 줄알 수 있는 안정적인 코드 가 됩니다.

• 다양한 js style guide
  에어비엔비 JavaScript 스타일 가이드
  깃허브에 공유되어 있는 인기 있는 JavaScript 스타일 가이드
  구글 JavaScript 스타일 가이드

• 작명센스

1. 보기에좋아야 - 간결하게
2. 이해하기 쉬워야 - 몇년 후, 다른사람이 봐도 의도를 이해할 수 있게
3. 실수를 유발하지 않아야 - 혼동의 여지 없게, isNotZero -> not 빼기

• Boolean
  undefined 와 null
  NaN (Not a Number)

Chapter 10. jQuery pt. 1

• DOM pt.1
  문서 객체 모델 Document Object Model ; 브라우저는 html 코드를 객체의 돔구조(=트리구조)로 정리하고, 시각화해서 사용자에게 보여줌

• DOM pt.2
  어떻게 돔의 구조에 접근할 수 있을까?
  Html 위의 document(dom의 최상의 객체)가 dom의 다른 객체들의 접근을 가능하게 해줌


제이쿼리를 이용해서 돔트리를 다뤄볼거임.

• id로 요소를 선택하는걸 넘어서서 다양하고 정교하게 요소를 받아오는 방법

---

Jquery = 요소를 선택하는 부분 + 요소에 대한 동작을 하는 부분
$(‘css선택자’)

class 이름이 small인 요소를 선택하려면 $('.small')
Css

• 직속 자식 (direct children)
  .div1 > i {
  color: orange;
  }
• 가상클래스
  콜론(:)을 사용하면 몇 가지 ‘가상 클래스’를 선택할 수 있습니다.

/ .div1의 자식인

태그 중 3번째 /
.div1 p:nth-child(3) {
color: blue;
}

/ .div1의 자식인

태그 중 첫 번째 /
.div1 p:first-child {
color: red;
}

/ .div1의 자식인

태그 중 마지막 /
.div1 p:last-child {
color: green;
}

/ .div1의 자식 중 마지막 자식이 아닌

태그 /
.div1 p:not(:last-child) {
font-size: 150%;
}

/ .div1의 자식 중 첫 번째 자식이 아닌

태그 /
.div1 p:not(:first-child) {
text-decoration: line-through;
}

• 마우스오버 hover
  / 마우스가 < h1 > 태그에 올라갔을 때 /
  h1:hover {
  color: green;
  }


jQuery객체는 배열같이 생겼지만 배열이 아니고 돔 관련 함수들을 사용할 수 있음
.css( , )
.attr( )
.addClass( )

참고) css 파일을 사용하지 않고 javascript로 css의 기능을 사용한다고 생각하시는게 좋을 것 같습니다.
결국 스타일은 css의 영역이에요 :)
실제로 자바스크립트로 스타일을 적용하게 되면
해당 태그에 인라인스타일로 css가 적용되기 때문에 굉장히 높은 우선순위로 할당이 됩니다.
이런 부분은 css 우선순위가 부딫힐 수 있는 경우에는 아무래도 문제가 발생할 수도 있겠죠?
뿐만아니라 script 파일을 해석을 해야 스타일링이 적용이 되기 때문에
웹사이트의 성능상의 문제를 야기할 수도 있습니다.
이 외에도 다양한 문제가 있을 수 있으니, 각 언어는 각각의 목적에 맞게 활용하는게 좋을 것 같아요 !
js로 스타일링을 할 때는 동적으로 스타일 변화가 필요할 때 활용하실 것을 권장드려요 :)

• 요소추가하기
  형제관계 요소추가
  $(‘li’).after(‘<li class=“item”>새로운 아이템<li>’);$(‘#todo-list li:last-child’).after(‘

• 새로운 아이템
• ’);
  자식관계
  $(‘ul’).append(‘<li class=“item”>새로운 아이템<li>’);$(‘ul’).prepend(‘
• 새로운 아이템
• ’);

• 따옴표 주의사항
  굳이 .. 따옴표 안에 따옴표를 쓰고싶다면, 따옴표 앞에 백슬래시() 써주면 됨.
  ('ul li:first-child').before('<li class=\'item\'>어떤 요소</li>');('ul li:first-child').before("<li class=\"item\">어떤 요소

");

---

$('#send').mousedown(sendMessage);

function sendMessage() {
var text = $('textarea').val();
if( text === '' ){
alert('문자입력해주세요');
} else {
$('.chatbox').append('

');
}

}

$('#send').mouseup(textEmpty);

function textEmpty() {
text;
}

---

• 16. 요소 이동과 삭제
      $(‘선택자’).remove();
• 17. 더’선택’하기

jQuery에서 제공하는 ‘선택’ 방법

• filter
  $('button').filter('.color-3').text('SELECTED!');
  filter()는 ()안의 조건으로 선택된 요소를 한번 더 걸러줌

• Not
  not() <-> filter()
  선택된 요소 중에서 조건에 해당되는 것들을 제외시킴

• Eq
  $('button').eq(1).text('SELECTED!');
  선택된 요소들 중에서 n번째 요소 하나만 골라냄
  (*eq에 들어가는 숫자는 0부터 시작)

• Parent
  $(‘#btn-1’).parent().css(‘background-color’, ‘black’);
  부모요소를 찾아줌

• Children
  $('#box-1').children().css('background-color', 'black');
  Parent <-> children
  선택된 요소의 자녀요소 모두 골라줌

• Find
  $(‘#box-1’).find(‘.color-2’).css(‘background-color’, ‘black’);
  find() 선택된 요소의 자녀, 자녀의 자녀, … 를 골라주되, 조건에 맞는 요소만 골라서 찾아줌
  children()은 직속자녀(한 단계 아래의 자녀)만 찾아주지만, find()는 자녀의 자녀들 그 이하는 모두 찾아낸다는 차이점.

• Siblings
  $(‘#btn-1’).sibling().text(’SELECTED!’);
  본인제외 선택된 요소의 이웃요소들을 골라줌
  ()안에 조건을 넣을 경우, filter역할도 함께 해줌

Chapter 11. <이벤트>

• 1. 이벤트 객체 들여다보기
     Function processKeyEvent(event){
     }
     event = 함수를 호출시키는 이벤트에대한 정보
• 2. 이벤트 객체 파라미터 ⭐️⭐️
• 4. 다양한 이벤트 정리 (캡쳐)
• 5. $(document).ready, 그리고 익명함수