가고

* 메서드 체이닝

의미: "메서드를 연이어 적용한다"

하나의 메서드만을 사용하지 않고, 여러 메서드를 '연이어' 써서 적용할 수 있다.

간단한 이해를 위해서 메서드에 css를 적용했다.

↓ 출력화면

* 제이쿼리 필터 선택자(:)

"요소:checked" →체크한 요소를 선택자로 지정

"요소:odd" →홀수인 요소를 선택자로 지정

"요소:even" →짝수인 요소를 선택자로 지정

"요소:lt" →(less than)~보다 작은 것들을 선택자로 지정

"요소:gt" →(greater than)~보다 큰 것들을 선택자로 지정

"요소:focus" →커서가 위한 부분을 선택자로 지정

"요소:selected" →선택된 요소를 선택자로 지정

"요소:contains('문자열')" →특정 문자열을 포함하는 문서객체를 선택자로 지정

ex) $("li:contain('가나다')").메서드( );   →'가나다'를 포함하는 문서객체를 선택자로 지정

"요소:has('요소명')" →요소명을 선택자로 지정(여기서 요소명은 보통 태그명.)

ex) $(".class:has('h2')).메서드( );

"요소:not(선택자)" →ex) $("li:not(first)").메서드( )     :li중 첫 번째 것을 제외한 나머지를 선택자로 지정

"요소:eq(0)" →0번째(=first)

"요소:eq(1)" →1번째

"요소:eq(-1)" →마지막(=last)

"요소:eq(-2)" →마지막에서 2번째

"요소:nth-child(2n+1)" →인덱스와는 다르게 첫 번째 것이 '1'. 

즉 1,2,3,4,...순서로 진행. 

'0' 없음!

↓ 출력화면

* jQuery(제이쿼리)

HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리

기본 구조

$(document).ready(function(){ });

→$(function(){ });

* jQuery(제이쿼리) 선택자 지정하기

ex1) 

↓ 출력화면

좀 더 자세한 예제.

ex2)

↓ 출력화면

* 제이쿼리 속성 선택자

"요소[속성='값']"  →해당 값을 갖고 있는 요소

"요소[속성$='값']" →해당 값으로 끝나는 요소

"요소[속성^='값']" →해당 값으로 시작되는 요소

 .val: html의 value값을 뜻한다. 

↓ 출력화면

→이어 제이쿼리 메서드 체이닝, 필터 선택자(checked,focus,selected,contains,nth-child 등) 예제 및 정리!!

* 자바스크립트 객체를 함수로 만드는 방법

자바스크립트에서 객체를 함수로 만드는 방법은 함수 내에 객체를 설정하는 것이다.

함수 student의 매개변수에 객체의 값을 넣어주었다.

그리고 변수 stucontent에 각 속성과 속성값을 나열했는데, 여기서 나열의 구분은 ,(콤마)로 했음을 알 수 있다.

또한 총점과 평균, 출력화면을 객체 내의 함수로 지정했음을 볼 수 있다.

평균에서 parseInt를 써서 정수로 변환해 주었다.

return은 결과값을 보여달라는 의미.

이 예에 더하여 객체생성을 한다면 다음과 같다.

변수 anostudent를 배열로 만들어 2개 이상의 값을 넣어주고자 한다.

각각의 anostudent는 push를 써서 적용했다.

이후 변수 output을 만들어 다음과 같이 출력했다.

↓ 출력화면

* switch문

:어떤 변수의 값에 따라서 문장을 실행할 수 있도록 하는 제어문.

if문과 같이 조건 제어문에 속한다.

그렇다면 if문과 switch문은 어떻게 구별하여 사용할까?

→비교,조건 없이 딱 떨어지는 답을 낼 때에는 switch문을, 조건(크기 비교)을 두고 답을 낼 때는 if문을 이용한다.

switch문에서 사용하는 용어는 크기 'switch, case, break, default'이다.

switch: switch문을 사용한다고 선언할 때

case: switch문에서 각 케이스를 지정하고자 할 때

break: 선언한 케이스를 마칠 때

default: 지정한 케이스에서 벗어났을 때

→예제를 통해 이해하자!

함수 input에 "가고 싶은 여행지는?"이라는 질문과 질문에 대한 숫자 보기를 지정했다. (여기서 초기값은 빈칸("")으로 넣었다.)

함수 input에 대한 switch문을 선언하는 switch를 쓰고, 숫자 보기를 입력하면 문자로 인식하니 (input)앞에 Number를 붙여 문자를 숫자로 변환해 주었다.

그리고 각 숫자 보기를 뜻하는 case 1~5를 썼고, 각 케이스가 끝날 때마다 끝 마침을 뜻하는 break;를 덧붙였다.

여기서 default는 1~5외의 숫자 보기를 입력했을 경우를 가정해 넣어주었다.

다시 말해 1~5외의 숫자를 입력했을 경우, "잘못 입력하셨습니다"라는 문장이 뜨게 만들었다.

default를 썼을 때 역시 다른 케이스의 마침을 뜻하는 break;를 써 주었다.

이렇게 적용한 결과는 다음과 같다.

↓

(1를 입력했을 때. 그 외 2~5를 입력하면 해당되는 문장이 뜬다.)

(1~5를 제외한 숫자를 입력했을 때.)

→이어 자바스크립트 객체를 함수로 만드는 방법!(+객체생성 이해하기)

* setTimeout

기본구조→setTimeout(함수,밀리초);

의미: "밀리초 시간 뒤에 함수를 실행하라"

(※밀리초: 천 분의 1초를 가리키는 말. 1000→1초, 5000→5초...)

↓ 출력화면

밀리초 3000, 다시 말해 3초 뒤에 함수 aa가 실행되었다.

* setInterval    :반복하는 함수

기본구조→setInterval(함수,밀리초);

의미: "밀리초 시간마다 함수를 실행하라"

↔clearInterval( ): 반복 멈춤 함수

↓ 출력화면

밀리초 1000, 다시 말해 1초마다 함수가 실행되었다.

이 예에서는 if문을 써서 i가 4일 때까지만 함수가 실행되고 이후는 clearInterval를 써서 함수를 멈추게 했다.

만약 clearInterval를 쓰지 않았다면, aaaaa이후에도 계속해서 a가 덧붙여졌을 것이다.((빨간 +)가 실행되었을 것!)

→이어 자바스크립트 switch문 예제 및 간단 정리!(switch,case,break,default)

반려인이라면 누구나 동물로 인해 황당하지만 웃음밖에 나오지 않는 상황을 겪어봤을 것이다.

이를 테면, 온 집안에 솜털이 날리고 구석에는 형체를 알아볼 수 없는 쿠션의 껍데기만 남았을 때, 애써 만들어 놓은 무언가가 왜 인지 부서졌을 때, 종이가 가루가 되어 방바닥에 널려 있을 때 등등!

생각만 해도 아찔하지만 막상 그 상황에는 닥쳤을 때는 웃.음.만 나온다는 것은 반려인들이라면 공감할 것이다.

하지만 반려동물들이 꽤 큰 스케일의 사고를 쳐도 아이들을 끌어안는 것 역시 반려인들이라면 당연하게 받아들일 것이다.

다음의 사진들은 어네스트 투 퍼스를 통해 소개된 사고뭉치 반려동물들의 인증샷들이다.

조용히 문을 열고 들어간 곳에서 반려인들이 목격한 것은 과연 어떤 장면들일까?

| 립스틱 짙게 바른 강아지                        출처 Flickr / CCO

출처 Metaweb/CC-BY

출처 Flickr/CCO

출처 Wikimedia Commons

출처 Wikimedia Commons

출처 Metaweb/CC-BY

출처 Flickr/CCO

* 이벤트

: 각 요소와의 상호작용을 가능하게함으로써 웹페이지를 능동적으로 작동하도록 한다.

이벤트 2가지 방법 

1. 요소.onclick=function( ){ };

2. 요소.addEventListener("이벤트 명", function( ){ });  =>자바스크립트에서 권장

<click 이벤트를 예로 들기로 하자>

1. 요소.onclick=function( ){ };

2. 요소.addEventListener("이벤트 명", function( ){ });

↓ 출력화면 

               ↓같은 내용으로 방법 1를 통해 적용했을 때 역시 결과값은 같다.↓

↓ 출력화면 

* id를 요소로 잡는 방법

->getElementById(" ");

* class를 요소로 잡는 방법

1. document.getElementByClassName(" ");

2. document.getElementByTagName(" ");

* id, class, 복수 class 등 요소로 잡는 방법

querySelectorAll(".box>.a1")   ->대신 id는 (#), class는 (.)을 붙여서 써줘야 한다.

* 요소에 속성값 적용하는 방법

1. 문서 내에서 요소 찾아주기

2. 요소.style.속성="값";

→이어 자바스크립트 반복함수 setTimeout, setInterval, clearInterval 간단 예제 및 정리!

* 함수에서의 return의 역할

1) 함수에서 빠져나갈 때. (함수의 종료를 알릴 때)

2) 값을 호출한 함수에 반환할 때. (아래 예시)

↓ 출력화면 ("abc"값을 반환하는 예제)

* 클로저

:외부변수가 내부변수 return에 의해 영향을 받고, 내부변수가 없어지지 않는 한 그 값을 유지

↓ 출력화면 

적용되는 과정: 익명함수 function의 내부에는 b=b+1이 있는데, 이 함수 내에서는 b에 대한 값이 없다. 이때 클로저에 의해서 외부함수인 a1에 가서 b의 값을 찾아 적용한다.

한편 이 예제에서는 document.write(d2( ))가 총 4번 호출되는데, 각각 순차적으로 적용된 모습이다.

(이때 b는 '자유변수'라고 부른다)

101=100+1

102=101+1

103=102+1

104=103+1