[Powered by Google Translate] [세미나 : JQUERY]
[Vipul 님 Shekhawat, 하버드 대학교]
[이 CS50입니다.] [CS50.TV]
당신이 집에서 따라 다음과 같은 경우에, 당신은 실제로 온라인 내 슬라이드에 액세스 할 수 있습니다
이 링크로 이동하여.
그것은 bit.ly.에 TjjRWj의
당신은 또한 그냥 직접 URL로 이동할 수 있습니다
이는 내 이름 cloud.cs50.net / ~ vshekhawat,,입니다
및 JQuery와.
내가보기 엔 당신이 집에서 보는 경우에 당신이 함께 따라하도록 격려하는 것은,
당신이 여기 있다면, 또한이 꽤 대화 형 프레 젠 테이션 때문이다.
>> 그래서 오늘, 내가 jQuery를 얘기 할거야, 첫번째 질문은
jQuery를 무엇입니까?
올해는 너희들 자바 스크립트를 다루지 않는 것을 알고있다
우리는 지난 몇 년 동안이 다량 세부 사항합니다.
자바 스크립트는 우선, 단지 클라이언트 측 언어
당신은 각 사용자의 컴퓨터에서 스크립트 코드를 실행하는 데 사용하는.
그래서 당신은, 사람들이 웹 페이지를 제공하는 서버가
하지만 당신은 자신의 컴퓨터에 물건을 수행 할 수 있습니다
서버마다 30 초 그 같은 요청을 전송하기 위해 기계 부탁드립니다.
당신은 자바 스크립트를 사용하여 그렇게 할 수 있습니다.
JQuery와은 자바 스크립트의 상단에 더 많은 기능을 제공합니다
그 당신을위한 여분의 물건을 않습니다.
당신은 상단에있는 내용을 보면,
그게 당신이 할 수 있는지 물건 중 일부를 설명합니다.
그래서 전반적으로, 그것은 2006 년 1 월에 만들어졌습니다.
그것은 처음 2005 년 8 월에 잉태되었다.
그것은 몇 년 동안 주변되었습니다, 그것은 정말 새로운 웹 2.0 운동의 일부있어
그는 인터넷이 너무 반짝 만들었다.
그것은 가장 널리 사용되는 자바 스크립트 라이브러리이다.
만 19.6 이상의 웹 사이트를 사용하고 사용이 계속 증가하고있다
builtwith.com에 따르면, 이는 분명히, 지난 한 해 동안,
다만 지속적으로 매우 선형 적으로 증가하고있다.
최고 1000 만 사이트간에, 거기에 여전히 -
그들 중 40 %는 현재 그것을 사용하고 있습니다.
페이스 북을 사용하고, 다른 웹 사이트의 많은 현재 사용하고 있습니다.
당신은 당신이 좋아 한 경우에, 자신에 대한 이러한 통계를 볼 수 있습니다.
이 재단 13 이사회가 있기 때문에 그리고 당신은 그것의 합법적 말할 수
정기적으로 그 일 20 명 팀과 함께.
그래서 그것은 매우 널리 사용되는, 그것은. 조직의 URL을 가지고 그것은 공상의,
그것은 다른 물건 스핀 오프를 가지고, 그래서 그것은 큰 문제입니다.
>> 왜 당신이 그것을 사용해야합니까? JQuery와 매우 경량입니다.
그게 큰 파일이 아닙니다 의미합니다. 당신은 다운로드 할 수 있습니다
축소 된 파일이있는 모든 공백 및 주석없이, 그것은 단지 32 이하이다.
그래서 그냥 웹 페이지에 던지기 쉽다
단지 그것을 사용하여 시작합니다.
그것은 또한 매우 효율적으로 작성, 그래서 그것은을 많이 차지하지 않습니다 -
당신이 그것을 사용하는 많은 경우 귀하의 웹 사이트를 느리게하지 않습니다.
그것은 당신이 이전으로 실행할 수 있었다 일들을 구현할 수 있습니다.
기능의 일부 측면이 있습니다
애니메이션을 만드는 것처럼, 그 일반적으로 할 매우 어려운 것입니다.
그러나있는 jQuery 실제로는 매우 간단입니다.
와 볼거리에 성가신 몇 가지가 있습니다
자바 스크립트 가능 POST 요청을 보내는 등,
하지만 서버에 요청을 보내려면, 당신은 쓸 필요가
코드의 다섯이나 여섯 또는 일곱 줄.
지금 당신은 단지 하나의 함수 호출에 단 한 줄의 코드로 할 수 있습니다.
그건 정말 당신이하고있는 물건을 많이 단순화합니다.
모든 차가운 아이는 그것을 사용하고 있습니다. 그것에 의해, 나는 저를 의미합니다.
내 마지막 프로젝트에서 작년 이는, news.whrb.org입니다
라디오 방송국입니다,이 블로그를 만들었습니다
이는 모두가 우리가 수행했던 쇼와 그들을 위해 MP3 파일을 호스팅합니다.
당신은 과거 방송을 통해 검색 할 수 있습니다
그리고 그것은 모든 jQuery를 사용하여 이루어집니다. 당신은 말할 수
때문에 이러한 모든 애니메이션, 기본적으로.
당신이 가지고있는 경우 - 새 게시물을 작성하는 경우,
당신은이 작은 slideDowns를 참조하십시오, 그 모든 jQuery를 사용하여 이루어집니다.
그리고 페이드 - 그렇게 물건의 종류는 모두 jQuery를 사용하여 수행됩니다
그리고 당신은 지속적으로 사이트를 탐색하는 페이지를 다시로드 할 필요가 없습니다.
jQuery를 사용하여 만들어 또 다른 멋진 일이 프레 젠 테이션입니다.
나는 scrolldeck이라는 오픈 소스 물건을 사용하고 있습니다
어떤 사람이 jQuery를 위에 썼다.
당신은 실제로 소스에서 보면, 당신은 볼 수 있습니다
그들은이 달러 기호를 사용하고, 달러 기호
함수가 jQuery를 함수라는 의미 jQuery를 사용됩니다.
그래서 그들은 jQuery를 상단에 래퍼를 정의하고
즉, 당신은 다음과 같은 프레 젠 테이션을 만들 수 있습니다
그리고 당신은, 여기에서 그들은 원래의 jQuery 파일을 포함하고 있음을 알 수
이는 jQuery를 사용하려는 경우 포함 할 것이다 무엇
당신의 자신의 웹 사이트를합니다.
>> 그에 터치, 어떻게 당신은 그것을 설치합니까?
당신은, 파일을 jQuery.com하고 다운로드 갈 수
웹 디렉토리에 추가하고 있습니다.
그래서 그냥 상단에 귀하의 HTML 파일의 head 태그에
메인 HTML 파일, 다만 코드의 라인을 가지고
사용중인 jQuery를의 버전에 맞는 올바른 버전.
당신은 jQuery.com으로 이동하여 다운로드 할 수 있습니다
"다운로드 jQuery를"을 클릭하고 당신이 그것을 있어요. 바로 그거야.
실제로, 우리는 그것이 어떻게 생겼는지 살펴 수 있습니다.
여기서 다운로드를 클릭하면, jQuery를 본 것입니다.
당신을위한 모든 마법의 물건을 않는 하나의 큰 스크립트 파일입니다.
이 전혀 읽을 수없는 축소 된 버전입니다.
당신은 또한 읽을 수있는 개발 버전을 볼 수 있습니다
하지만 여전히 아주, 아주 긴.
그것은 거기에 물건을 많이있다.
당신은 또한 구글의 호스팅 버전으로 연결할 수 있습니다.
그래서 당신은 그것을 제공하기 위해 구글에 의존 할 수 있습니다.
그들은 항상 가능한 그것의 모든 버전을 제공합니다.
그래서 당신은 아마 당신을 위해 그것을 호스팅하는 구글에 의존하고 있습니다.
또는 당신은 jQuery의 자신의 최신 버전에 연결할 수 있습니다.
그들은 항상 최신 버전으로의 업데이트 된 URL이 있습니다.
그것은 jQuery를 - 최신의, 그리고 한 가지 문제가있다
이는 즉 경우 업데이트 된 jQuery를하고 이전 기능의 일부
그들은 retrograded 또는 사용되지되고 있었다
그것은되지 않을 수 있습니다 - 그것은 더 이상 지원되지 시작할 수 있습니다.
당신은 버전 1.8.2을 사용하여 웹 사이트를 쓰기 때문에 경우
시간 버전 2.7가 나옵니다
당신이 쓴 일부 기능이 더 이상 작동하지 않습니다.
그래서, 32 KB 파일을 바로 다운로드하는 것이 좋습니다
웹 페이지에 넣어, 그것은 영원히 작동합니다.
>> 내가 가서 jQuery를의 실제 기능에 대해 이야기를 시작하겠습니다.
우선 선택기입니다. 이 jQuery를 처음에 제공하기 위해 고안 한 것입니다.
그리고 당신은보고 문서를 클릭 할 수 있습니다
내가 취재 할거야 선택기에 대한 자세한 설명서를 참조하십시오.
선택기 뒤에 아이디어는 당신이 페이지에 HTML 요소를 선택할 수 있다는 것입니다.
페이지의 요소 ID와 클래스와 그들에게 다른 식별 측면이있다.
도있다 - 다른 순서의 장비 보호.
그들은 서로 중첩하는 시간의 일부.
JQuery와는 페이지에서 요소를 검색하는 간단한 쿼리를 생성 할 수 있습니다.
그럼 당신은 jQuery를 함수를 사용하여 이러한 요소를 조작 할 수 있습니다
우리는 나중에 얻을 것이다 조작 부분이있는 것입니다.
당신은 HTML, CSS 변경을 변경할 수
당신은 또한 애니메이션 및 특정 이벤트를 활성화 기능을 추가 할 수 있습니다.
뭔가를 클릭있어 경우에 따라서, 예를 들어, 당신은, 일이 뭔가를 원하는
당신이 JQuery와뿐만 아니라 사용하여 그렇게 할 수 있습니다.
그리고 요소를 선택하는 방법의 거대한 숫자가있다.
대부분, 내가 사용한 적이 있지만, 기본적인 사람이있다
이는 매우 중요하다.
요소 선택기는, 예를 들어, 당신은 무엇을 선택하고
그 DIV 야 - 나도 실제로 슬라이드 프레 젠 테이션을위한 오픈 코드가 있습니다.
따라서, 예를 들어, 여기에 첫 번째 슬라이드입니다.
여기에서 우리는 DIV 있습니다. 우리가 실제로 페이지의 모든 div를을 선택하면,
그것은 우리에게이 파일에 존재하는 모든 div를 배열을 줄 것이다.
ID 선택기는 주어진 ID로 무엇을 선택할 수 있습니다.
이 예를 들어,이 점은 ID "무엇"이 그렇다면
우리는 # 대신에 무엇을 어떤 ID를 사용하여이 작업을 한 경우,
그것은 단지 하나의 요소를 가지고 있으며, 그 페이지의 요소 배열을 반환합니다.
우리는 또한함으로써 선택기이 방법을 결합 할 수 있습니다
단지 div를있다 ID가 가지를 선택합니다.
그래 그럼. 해당 ID가 div를 선택합니다.
클래스에 당신이 점을 사용하여, 그것은 CSS와 같은 것입니다.
자손도 작동, 당신은 몇 가지 클래스를 가지고있는 경우
예를 들어, 등등 - 그리고 그것은 내 요소를 내포하고있다
거기에 몇 가지 클래스이며 다른 페이지로 연결하는 앵커 태그가하면,
당신은 링크를 검색하려면이 구문을 사용할 수 있습니다.
당신은 또한 한 번에 여러 가지를 선택할 수 있습니다, 그냥 쉼표로 구분,
당신이 좋아할 어떤 선택기를 사용하여, 당신은 하나의 배열에, 한 번에 모두 선택합니다.
그리고 또한 셀렉터 거기, 그래서 당신은 모든 div를 선택할 수 있습니다
특정 클래스를 갖고 있지 않는.
그리고 그것은 단지이 선택의 작동 방법에 대한 소개를받을 수있는 도움 방법입니다.
잠깐의 일부 구체적인 예를 보여 드리죠.
>> 고급 선택기는 - 이들은 단지 몇 가지 예입니다.
거기에이 수십 있지만, 당신은 모든 이미지 태그를 선택하려면
일부 요소 내에서, 당신은 그냥 할 : 이미지입니다.
당신은, 예를 들어, 심지어 요소를 선택하려면 20 개있을 경우,
당신은 0, 2, 4, 6, 등등을 선택하려면
심지어, 또는 당신은 또한 할 수있다 : 당신이 이상한.
이들은 의사 선택기이며, 이는 실제로 계산을 의미합니다
다른 모든 요소 차라리 그냥 가서 그들 모두를 선택하는 것보다.
당신은 또한 수 있습니다 - 각 요소는 특정 속성을 가질 수 있습니다.
따라서, 예를 들어, 클래스 = 센터는 속성입니다.
이 앵커 태그의 경우, HREF는 하이퍼 텍스트 참조 또한 속성입니다.
정말 일반적입니다 - 그래서 당신은 특정 페이지 나 단지에 대한 링크가 무언가를 선택할 수 있습니다.
당신은 당신이 좋아할 어떤 특성이 무엇이든을 선택할 수 있습니다.
그리고, 또한 속성이 포함되어 있습니다.
당신은 예를 들어, 모든 입력 요소를 선택하려는 경우
즉, 그들의 이름으로 단어 "패스"가
페이지는 입력 텍스트 블록이있는 경우
그 당신이하는을 선택할 수 하나의 방법이 될 것 "암호"라고.
그리고 더 많은이 있습니다. 당신이 가서 문서를 볼 수 있습니다
그것이 작동하는 방법의 구체적인 예를 참조하십시오.
>> 다음 일은 DOM 조작이다.
우리는 요소를 선택하면, 우리가 실제로 그들과 함께 물건을 할 것입니다.
지금까지 우리는 전혀 그 보았다,하지만하지 않은 경우 문서를 보면,
우리가 할 수있는 많은 실제로있다.
이 시점에서, 우리는이 프리젠 테이션의 요소를 선택하는거야
그들을 jQuery를 사용하여 조작 할 수 있습니다.
이것은 jQuery를 사용하여 구현되기 때문에, 우리는 jQuery 라이브러리에 액세스 할 수 있습니다
우리는이 코드 내에서 해당 기능을 사용할 수 있습니다.
당신에 대해 알고하지 않을 수 있습니다 하나의 유용한 점은 콘솔입니다.
와 구글 크롬은 내가 사용하는 것입니다. 당신은 고도 명령 J를 눌러
또는 Alt 제어 J 콘솔을 엽니 다.
Firefox에서 나는 그것의 명령을 교대 K 또는 Control 변화 K. 생각
사파리에서는 일부 설정을 변경 이동합니다.
거기에 당신이 그것을하고 싶은 경우 링크입니다,하지만 난 크롬이나 파이어 폭스를 얻는 것이 좋습니다.
그럼 콘솔을 열어 보자, 여기 아래에있어.
그것은 당신은 기본적으로 당신이 원하는 무엇이든 마찬가지로 할 수 있습니다.
그래서 그냥,라는 변수 X를 만들에 입력 할 수 있습니다
X = 5, X + 2가 무엇인지 살펴 보자.
당신은 CS 뭔가를 할도 수 + 알아 보자, 배 CS50 될 것입니다 + 45.
당신은 몇 가지 일반적인 자바 스크립트 물건을 할 수 있습니다.
하지만 당신은 또한 여기에서 jQuery를 할 수 있습니다.
>> 그래서 여기에 첫 번째 측면을 살펴 보자.
우리는 문자열 HTML이라는 변수를 만들거야.
그것은 몇 가지 새로운 텍스트라고하는, 그것에 단락 태그가 있습니다.
그래서 우리는이 HTML을 가지고, 그것은 단락 태그에 몇 가지 새로운 텍스트입니다.
이제 우리는 실제로 페이지에 추가합니다.
나는이 단락 HTML, 여기 제목, APPEND ID되도록 그것을 설정할 수 있습니다.
우리는 그 다음 APPEND ID를 선택하고 경우에 추가
내가 방금 만든 HTML 변수,
그것은 바로이 단락 태그 후, 마지막에 그 HTML을 추가합니다.
우리가 그렇게 할 경우 너무 - 우리는이 단락을 선택
우리는, 내가 방금 추가 한 HTML 변수의 append 함수를 호출 한
그것은 페이지에 바로 거기 그 새 텍스트를 추가합니다.
우리는 또한 해당 요소의 시작 부분에, 전에 갈 것입니다 즉, 앞에 수 있습니다.
그래서 시작과 이후에 몇 가지 새로운 텍스트가있다.
내가 가서 그냥했던이 물건을 없애 새로 고칠 수 있습니다.
하지만 당신이 앞에 추가를 사용하는 방법의 예와 방법을 추가
페이지의 물건을 조작하는 일부 HTML을 추가합니다.
>> 당신은 또한 클래스를 변경할 수 있습니다.
다시이 스타일 파일에, 나는 승리 클래스에 대한이를 만들었습니다
이 텍스트 색 빨강, 몇 가지 배경 색상, 텍스트 그림자가 있습니다.
그것은 끔찍한 보이지만, 실제로 할 수 있습니다 -
이 단락은 클래스 ID에 해당합니다.
그래서 나는 승리를 위해 클래스를 추가 할 수 있습니다.
나는 콘솔에서이 실행할 수 있습니다
그리고 그 그 클래스를 추가하고, 지금은 끔찍한 보인다, 예상대로.
CSS는 자동으로 해당 클래스에게 적용됩니다 -
클래스에 대한 CSS이 있다면, 그것은 자동으로 적용됩니다
당신은 요소의 클래스를 변경합니다.
그 다음 우리는 단지 제거 클래스를 사용하여 제거 할 수 있습니다.
당신은 빨간색이나 강조 같은 미리 정의 된 클래스를 가지고있는 경우
그리고 당신은 요소들을 적용 할
당신은 모든 시간을 스타일링하는 모든 CSS를 수행 할 필요가 없습니다.
당신은 요소에 클래스를 추가 할 수 있고, 그 후에는 자동으로 될 것입니다 -
자동으로 해당 클래스의 적절한 볼 것이다.
우리는 또한 물건을 제거 할 수 있습니다, 그래서 나는 모든 div를을 선택하는거야
페이지에서 그들을 제거합니다.
그 모습 무엇을 것입니다?
그것은 아무것도처럼 보이는 것, 그래서 왼쪽 아무것도 실제로 없습니다.
내 프레 젠 테이션 사라집니다.
나는 다행히도, 새로 고침하고 다시 가져올 수 있습니다
그냥 한 번 실행되어 있기 때문에,
당신은 완전히 끄기 Page 요소를 파괴하려는 경우에 즉, 제거하는 예입니다.
>> 당신은 또한 덮어 쓸 수 있습니다, 그리고 페이지의 모든 단락 태그를 선택하는거야
그리고 그 안에 가서 그들이 그들이 어떤 텍스트를 대체
와 그냥 단어 "테스트."
당신이 할 경우, 당신이 테스트를 페이지마다 단락을 대체합니다.
네. 그들은 모두 시험으로 대체하고 있습니다.
그래서 그 텍스트에 액세스하고 덮어 쓰기의 예.
당신은 또한 정보를 검색 할 수 있으며,이 입력 상자에 대한 정말 멋지다.
당신은 사람들이에 물건을 입력하는 입력 상자가있는 경우
사람들은 그것으로 물건을 입력하는,
여기에 우리가 입력 텍스트 유형의 모든 입력 태그를 선택합니다.
이 경우, 전체 프레 젠 테이션에 하나의 입력 상자가있다
그래서 우리는 단지 첫 번째 하나를 선택합니다, 그리고 우리는 그것에 Val 함수를 호출합니다.
즉, 값을 반환하고, 입력 상자를 위해
값은 내부에서 일어나는 어떤 단지이다.
우리는이 작업을 수행 할 경우, 그래서 그냥 문자열 물건을 반환합니다.
우리는 더 많은 물건을 작성 한 후 다시 호출하면, 그것은 더 많은 물건으로 바뀝니다.
즉, 확인 후 입력 상자의 요소에 액세스 할 수있는 하나의 좋은 방법이고,
이 유효한 전자 메일 주소, 이것은 예를 들어, 유효한 날짜입니다.
사람들이 그것을 입력하는대로 당신은 즉시 물건을 검색 할 수 있습니다
그리고, 그것은 유효한인지 확인 서버로 다시 보내, 당신은 그것으로 원하는 작업을 수행.
그리고 당신은 그 상자 안에 무엇이 액세스하는 방법이다.
>> 당신은 또한 대신 추가하는, 그래서 CSS 직접 수정할 수 있습니다
일부 미리 정의 된 속성을 가진 클래스
당신은 당신이 아무것도 원하는 CSS 추가 할 수 있습니다.
전체 프레젠테이션이되도록하자 일부 몸,
및 컬러 텍스트가 무엇인지 색상을 정의하는 속성입니다.
우리는 빨간색으로 변경하면 페이지의 모든 텍스트가 빨간색으로 켜집니다.
우리는 배경 색상 파랑과 같은 작업을 수행 할 수 있습니다
거기 우리는 간다, 그것은 아름답다.
당신은 당신이에 원하는 모든 작업을 수행 할 수 있습니다.
CSS 속성을 사용하여, 당신은 정말 아무것도 언제든지 모양을 수정할 수 있습니다.
다음 것은 효과가 있습니다.
효과는 기본적으로 CSS를 수정 같은 일이다
그러나 실제로 몇 가지 여분의 애니메이션을 제공합니다.
그래서 대신 색상을 표시하거나 뭔가를 숨기고 또는 변경,
당신은 실제로 애니메이션 할 수 있습니다.
당신은 그것에 대한 광범위한 설명서를 살펴하려는 경우 여기에 문서가 있습니다.
하지만 주요 것들을 커버하는거야.
쇼와 숨기기 속성이 있습니다.
ID 실제로이 모든 상자에 해당 표시 / 숨기기,
나는 그것을 숨길 경우, 그래서 그냥 사라집니다.
내가 돌아올 수 있도록하려는 경우 그리고 다시 표시 할 수 있습니다.
그리고 돌아왔다. 실제로, 사라지지 않았다
실제로 페이지에서 제거하지 않은, 그냥 숨김 여부의 CSS 속성을 설정
그래서 당신은 더 이상 볼 수 없습니다.
또한 거기 슬라이드 아래로 슬라이드있어, 당신이 영향을 미칠 수 있다는 점.
그것은 사라질 위로 올라 가면서, 그리고 사라진 후에
당신은 돌아올 수 있도록 아래로 밀어 수 있습니다. 지금은 돌아왔다.
페이드 ID가이 상자에 해당합니다 -이 페이드 효과도있다.
나는 그것을 페이드 아웃하는 경우, 그것은 서서히 사라질 것입니다.
나는 또한 그것을 페이드 할 수 있으며, 다시 올 것이다.
당신은 또한 페이드 기능에 고유 한, 페이드 할 수 있습니다.
당신은 당신이 원하는 특정 불투명도 페이드 할 수 있습니다.
당신이 .5 천천히 퇴색하는 경우 그래서, 절반 표시 될 수 있습니다.
나는 .1 갈 수 있습니다, 그리고 다시 1 다시 완전히 볼 수 있도록 할 수 있습니다.
그것은 단지 당신이 할 수있는 또 다른 애니메이션이다.
>> 전환 효과도 있습니다.
그래서,이 상자에 해당하는 토글 ID를 선택하려고 해요
그 DIV에 당신은 전환 호출 할 수 있습니다, 그것은 볼의 경우는 보이지 않게되며,
그것은 눈에 보이지 않는라면 다시 표시 될 것입니다.
그래서 난 그냥 두번 토글 함수를 호출하며 처음이었다
숨기기와 같은 것은 두 번째 호출은 쇼와 같은 것이 었습니다.
그리고 당신은 또한, 페이드 전환이 작업을 수행 할 수 있습니다
이는 실제로 페이드를 제외하고 같은 일을 수행합니다.
그리고 슬라이드 같은 일이 움직입니다.
체인 효과도 있습니다, 그 의미
당신이 요소를 선택하고 단지에 애니메이션 방법의 무리를 호출하면,
당신이 페이드 아웃하려는 경우, 다음, 아래로 슬라이드
그리고 숨길하고 페이드, 그것은 행을 다할 것입니다.
그래서 사라 돌아왔다 - 어떤 이유로 숨기기 일어나지 않았다.
의 그것을 밖으로 시도 할 수 있습니다. 그래, 그래서 페이드 아웃 후 멀리 미끄러.
그리고 많은 더 있습니다. 당신은 애니메이션 기능을 사용할 수 있습니다
자신의 애니메이션을 만들려면 어떤은 매우 복잡하다
하지만 무한한 확장 성을 제공합니다.
당신은 당신이 원하는 애니메이션의 모든 종류를 만들 수 있습니다.
당신은 또한 한 번에 여러 애니메이션까지 큐에 큐를 사용할 수 있습니다.
그래서, 당신은 페이지에 걸쳐 비행 뭔가를 원하는 경우
하단 왼쪽 상단 오른쪽에서 슬라이드, 당신은이 작업을 수행 할 수 있습니다
다만, 다른 후 하나를가는 행동의 무리가있다.
>> 우리가 이야기 할 것입니다 다음 일은 이벤트이다.
이벤트는 허용 - 지금까지 우리는 단지 콘솔에 물건을 입력 봤는데
그이 일어날 수 있도록 한 방법입니다
하지만 실제 페이지에서, 당신은 할 수있을하지 않을거야
콘솔에 사용자 유형 물건을합니다.
당신은 일들이 자동으로 발생하고 싶다.
이를 위해, 당신은 몇 가지 특정 이벤트 해프닝에 활성화 이벤트를 사용해야합니다.
당신은 자세한 내용에 대한 설명서를 확인할 수 있습니다.
그럼 보자. 우리는 상자를 숨기거나 표시 할
나는 아직 구현하지 않았기 때문에하지만 지금이 버튼은 아무것도하지 않습니다.
나는 실제 HTML 페이지로 갈거야.
여기에 슬라이드입니다. 슬라이드 DIV가있다.
그것은 슬라이드의 클래스가 있습니다.
텍스트가있다. 자,이 상자와 상자 버튼이있다.
어떻게 우리가 실제로이 사라지게 만들 것?
첫째로 모두의,의이 상자 ID가 사라지게 함수를 작성할 수 있습니다.
이 funtion를위한 구문입니다,의 그냥 hideTheBox 호출 할 수 있습니다.
수행 할 인수가 없을 있기 때문에, 인수를 사용하지 않습니다.
우리는 상자의 ID를 선택할 수 있습니다.
선택 jQuery를 사용하여, 그래서 우리는 상자 ID를 선택할 수 있습니다
그리고 그냥 사라지게합니다.
하자 그것을 페이드 아웃합니다.
우리는 실제 콘솔에서이 기능을 실행 한 경우
우리는이 함수를 정의 할 수 있습니다, 우리는 hideTheBox를 호출 할 수 있습니다, 그것은 작동합니다.
그러나 우리는 버튼을 실제로 눌렀을 때 일어날합니다.
이를 위해 우리는 이벤트를 사용해야합니다.
특정 버튼이나 어떤 행동이 일어나는에 이벤트를 바인딩하려면,
우리는 이벤트가 트리거하는 요소를 선택해야합니다 -
또는 그 미안 이벤트를 트리거합니다.
>> 모든 그래서 일단,의이 상자 버튼 ID를 선택할 수
그 때문에 그 버튼에 대해, 이제 버튼, 그리고,
우리는 클릭 일 때 애니메이션을 만들려고합니다.
그래서 클릭 기능이있다.
당신이 그것을 또 다른 함수를 바인딩 할 수 있습니다.
이 함수는 인수로 다른 기능을합니다
우리는 hideTheBox 함수에 전달할 수 있습니다
이 버튼을 클릭 할 때마다 해당 기능이 자동으로 실행됩니다.
그래서, 우리는이 문제를 저장하면, 내가 새로거야 작동합니다
와 - 하나의 두 번째, 미안 해요.
저 정말 빨리이 문제를 해결하자.
좋아요. 거기 우리는 간다. 우리가 버튼을 클릭하면 이제 상자가 사라지고있다.
우리는 또한 단지 fadeToggle로 변경할 수 있습니다
상자를 숨기거나 표시하려면 그냥 변경
우리가 새로 고침하면이 또한 너무 작동합니다.
우리는 그것을 숨길 수 있습니다, 우리는 또한 그것을 표시 할 수 있습니다, 그것은 계속 작동합니다.
우리가 할 수있는 또 다른 것은, 우리는 실제로 hideTheBox 함수를 정의 할 필요가 없습니다
우리는 클릭 함수를 호출하기 전에.
그래서 그 대신 함수를 정의하고 hideTheBox를 호출,
우리는이 일을 클릭하면 전화를 겁니다.
그래서 우리는 여기에서 익명으로 정의 할 수 있습니다
이는 자바 스크립트가 가지고있는 기능입니다.
당신은 함수를 정의 할 수 있습니다 일반적으로, 우리는 기능 hideTheBox을 말할 것
인수, 대신에, 우리는 단지, 인수 전혀 작동하지 않습니다 말할 수
, 함수를 정의하는 중괄호를 시작합니다
그 중괄호를 닫은 후 그냥 여기에 함수를 정의
첫 번째 괄호와 마지막 괄호 안에
즉, 클릭 함수의 인수에 해당합니다.
우리는이 함수에 전달하는 그래서, 우리는 여기서이 코드 줄을 복사 할 수 있습니다,
그리고 그 동일한 일을 할 것입니다.
그리고 지금 우리는이 무작위 fadeTheBox 기능이 없습니다
그 뚜렷한 이유도없이 주위에 앉아있다.
함수가 익명으로 정의 된, 그 이름이 없습니다.
우리는 상자 단추를 클릭 할 때 만 실행됩니다.
그래서 상쾌 한 번 더, 한 번 더, 당신은 여전히​​ 작동하는 것을 볼 수 있습니다.
그리고 당신이 이벤트를 만드는 방법입니다.
>> 우리가 사용할 수있는 다양한 이벤트가 많이 있습니다.
내가 얼마나이 일을 보여 콘솔을 사용으로 전환거야.
이러한 각 ID는 각각의 상자에 해당합니다.
이 상자를 클릭 한 ID입니다 그래서,이 키 ID이며,이 하나의 마우스 ID입니다.
보다는 때마다 그것을 입력, 한 가지 더이 작업 기능이 있다는 것입니다
실제로 나서서 여기에서이 작업 함수를 정의했다.
그것은 hideTheBox 함수와 같은 일을 수행합니다.
그것은이 상자와 페이드를 확대 또는 축소 페이드를 하나 가져옵니다
우리가 그것을 사용할 수있어 그리고 그 이유이다.
우리는이 클릭 ID를 클릭하면 그래서, 우리는 상자가 사라지거나 다시 표시 할.
그것은 우리가 마지막 슬라이드에서했던 버튼과 같은 것입니다.
우리가 전화 후 지금, 우리는 이것에 클릭하고 상자가 사라집니다
다음 다시 클릭하고 상자가 다시 나타납니다.
그것은 아주 간단합니다. 더블 클릭은 ​​같은 일을
제외하고는 더블 클릭이 필요합니다.
당신이 한번 클릭하고 다시 클릭하면 그래서 아무것도 일어나지 않을 것이다
하지만 당신은 두 번 빠르게 클릭하면, 그것은 사라 것이다.
당신은 두 번 다시 클릭하면 다시 올 것이다.
그래서 꽤 간단합니다.
키보드 입력이 이상한 종류, 나는 실제로이 예제에서 작동합니다 생각하지 않습니다
때문에 아래로 키, 키 위로 키를 눌러 및 기타 주요 활동
당신이에 바인딩 어떤 요소에 상관없이 작동하지 않습니다.
예를 들어, 내가 몸으로 또는 완전히 다른 무언가에 아래로 키를 바인딩도
그때는 아직 상관없이 활성화 할 - 그것은 특정 아니에요.
나는이 클릭해야하고 무엇을 사라지게하는 키를 누르지 마십시오.
그것은 상관없이 내가 안으로 현재 무엇을 해요 요소를 활성화 할 것이다
따라서 이러한 사실은이 예제에서 작동하지 않습니다
있기 때문에 키보드 입력 DIV에 입력을 입력하는 나를 인식하지 않습니다.
>> 하지만 당신은 마우스 동작을 보면,
첫 번째는 가져가 있으며, 그것은 CSS를 사용하여이 중 일부를 수행 할 수 있습니다.
당신이 CSS를 사용하는 경우 당신이 뭔가 위로 마우스를 가져 가면, 당신은, 그래서 그것을 만들 수 있습니다
다음의 스타일 변경됩니다.
하지만, jQuery를 사용하여 당신은뿐만 아니라 다른 것들의 스타일을 변경할 수 있습니다.
따라서, 예를 들면, 우리는 우리가 DIV 위로 마우스를 가져 가면 경우 액션을 호출거야.
그것은 우리가 그 위에 마우스를 놓으면 그 상자가 사라집니다 의미합니다.
우리는 그것에서 멀리 이동하면 상자가 다시 나타납니다.
우리는이를 호출하고 그 위에 마우스를 놓으면 상자가 사라 않습니다
그리고 곧 우리가 멀리 이동, 그것은 다시 온다.
우리가 마우스 ID에서이 호버 함수를 호출하면,
우리가 상자를 가리키면하는 다음,이 상자에 해당
그 상자는 실제로 사라질 것이다 - 그것은 지금 펑키되고 있지만입니다 -
우리는 그것에서 멀리 이동하면 다시 나타납니다. 지금 당장 어떤 이유로 거꾸로입니다.
마우스 입력 및 마우스 이동 기능은 비슷하지만 약간 다릅니다.
마우스 마우스가 예상대로 상자를 입력하는 경우에만 활성화 입력합니다.
당신이 그것으로 이동하는 경우 그래서, 그것은 사라질 것이다.
당신이 멀리 이동할 때 그러나 다시 표시하지 않습니다, 당신은 돌아올 그것을 그것에 다시 이동해야합니다.
활성화 할 마우스 이동 기능도 있습니다
마우스는 상자에도 존재 때.
그래서 단지 안으로 그리고 밖으로 퇴색 갈하겠습니다.
그리고 실제로 로깅 - 그것은 그것을 밖으로 그냥 페이드처럼 보이고,
하지만 실제로는이보다 더 많은 작업을 로깅있어
그래서 당신은 멀리 이동할 때 그것은 단지 그들 중 천과 같이 기록하기 때문에 계속됩니다.
아마 천. 어쩌면 다섯.
그것보다 더 많은 기록합니다.
요점은, 모든 마우스 동작이며, 그들 중 많은이 있습니다.
, 당신은 다른 사람에 읽을 수 있지만, 그들은 모두 약간 다릅니다
당신이 필요로하는 어느 하나 당신은 선택할 수 있습니다
특정 어느 목적을 위해 당신이 할 노력하고 있습니다.
>> 내가 이야기하는거야 다음 것은 AJAX입니다.
AJAX, 나는 우리가 올해 훨씬 깊이로 자바 스크립트를 커버하지 않았다 알고
그래서 난 그냥 잠시 일반적으로 AJAX에 대해 이야기하겠습니다.
AJAX는 비동기 자바 스크립트와 XML을 의미합니다.
그것은 기본적으로, 예를 들어, 당신은 페이스 북에있어 때 그것은 당신에게 알림을 밀어 것
AJAX는 웹 브라우저에서 실행하기 때문이다.
웹 브라우저가 실제로의 초에 한 번씩
그들에게 물어 페이스 북의 서버로 이동, 당신은 나를 위해 새로운 것을해야합니까
그리고, 그것은 당신에게 돌아온다.
이렇게하면 서버에 요청을 보낼 수 있습니다
실제로 페이지를로드하지 않고.
그래서 일반적으로, 당신은 단지 PHP와 데이터베이스를 사용하는 경우,
당신은 서버에서 새 정보를 얻을 수 있습니다 전에 페이지를 새로 고침해야합니다.
그러나 AJAX를 사용, 당신은 끊임없이 그 새로운 정보를 당길 수
당신은 버튼이나 그런 아무것도 클릭 할 때 또는 그것을 당기십시오.
우리가 페이지를 다시로드하지 않고 요청을 보낼 수 있도록이 너무
우리는 GET 또는 POST 요청을 하나를 사용할 수 있습니다.
>> 요청은 당신이 경우 Google.com에, 예를 들어 있습니다 GET
와 Q = 테스트를 않습니다. 그것은 그들에게 쿼리 테스트를주고있다.
이 URL 자체에 이러한 매개 변수에 전달되어 있기 때문에 그리고 그 GET 요청입니다.
이 글을 통해 그들을 보내는 것처럼 POST 요청입니다.
당신은 편지에 넣어 그들에게 그것을 떨어져 출하 것처럼,의
그러나 실제로 내용을 볼 수 없습니다. 그들은 URL에서 볼 수 아니에요.
당신이 직접 그것을 입력 할 수 없습니다, 당신은 거의 비밀리에 그것을 보낼 수 있습니다.
이 게시물에 있습니다.
하지만, jQuery를 사용하여, 당신은 GET과 POST 요청을 수행 할 수 있습니다
훨씬 더 쉽게 당신이 일반적으로 그냥 평범한 자바 스크립트를 사용할 수보다.
당신은 GET 요청을 사용하여 API를 쿼리 할 수​​ 있습니다, 당신은 또한 로그인 정보를 확인할 수 있습니다.
다음 페이지에서, 어느는 "점심을 무엇입니까?"요청이 작성
하버드 식품 API를 사용하여, 그럼 그 위로 당겨 보자.
이것은 당신이 API에 대한 GET 요청을 수행하는 jQuery를 사용하는 방법의 예에 불과
그것에서 다시 정보를 얻을 수 있습니다.
그래서 우리는 오늘 메뉴를 표시 할
우리는 점심을 무엇을보고 싶어요.
여기 JQuery와 GET 요청을 만들 수있는 URL입니다.
당신은 $를 사용합니다. 기능을 얻을.
첫 번째 인수는 쿼리하고 너무 정확하게, URL이다.
그 다음 인수는 GET 요청이 완료 될 때 실행되는 함수입니다.
그래서 당신은, 서버에 어떤 요청을 보내이 돌아올 때까지 기다립니다.
그것은 돌아올 않는 경우, 당신은 서버에서 다시의 데이터에 몇 가지 조치를 취할 것입니다.
의 전방 이동이뿐만 아니라 코딩 할 수 있습니다.
일부러 하나를이 코딩하지 않았다.
여기 TODO이다. 첫째로 모두의,의는 이벤트 바인딩을 사용하자
이 버튼을 누를 때, 우리는 GET 요청을 보낼 수 있도록합니다.
그리고 어떤 데이터를 요청 수익을 얻을 때,
우리는이 식사 정보 ID 사업부로 쓸거야.
첫째로 모두의,의이 음식 버튼 ID를 선택할 수 있습니다.
그것을 클릭 일 때, 우리는 뭔가를하고 싶어요.
하자 직전으로, 그것을 익명의 fuction를합니다.
이러한 중괄호를 래핑 할 수 있습니다,
이 버튼을 누를 때, 우리는 GET 요청을 보내려면
점심의 내용을 확인할 수 있습니다.
이를 위해, 우리는 단지 $을 입력 할 수 있습니다. 얻는다.
이 달러 기호를 사용하여 jQuery를 기능입니다.
이 인수의 쌍을 사용합니다. 첫 번째는 URL입니다
두 번째는 콜백 함수라는 함수
해당 요청이 실제로 반환합니다.
의 단지 첫 번째 URL을 구축 할 수 있습니다.
우리는 데이비드가 쓴 API에서 얻을 수 있습니다.
여기에 가고, 우리는 그것을 food.cs50.net/api/1.3/menus의 것을 볼 수 있습니다
그리고 당신은 당신이하고자하는 매개 변수의 이름을 전달합니다.
그래서 매개 변수 1 값이 1입니다.
그것은 표준 날짜처럼 보이는 오늘 날짜 기본값을 시작
당신은 아무것도, 또한 종료일 기본값을 입력하지 않으면
오늘 당신은 아무것도 입력하지 않은 경우.
그게 우리가 원하는거야. 우리가 오늘에 대한 정보를 얻으려면.
>> 우리는 형식이 JSON에 있어야합니다.
그건 그냥 임의의, 당신은 당신이 원하는 어떤 형태를 사용할 수 있습니다.
당신은 CSV를 사용할 수 있지만 JSON 자바 스크립트 객체 표기입니다.
자바 스크립트가 무엇을 의미하는지 이해하는 것은 매우 쉽습니다
우리는 더 쉽게하는 방법으로 그것을 밖으로 인쇄 할 수 있습니다.
그러니 JSON에 요청하자 및하자의 요청에 점심.
= 점심 식사 때문에. 그냥 URL을 작성하기 위해, 우리는 여기에서 돌아갑니다.
메뉴가있다. 첫 번째 매개 변수는 출력 = JSON입니다
그 때문에 우리가 원하는 무엇을, 당신과 매개 변수를 분리 '와.'
두 번째 매개 변수는 - 내가 기억하지 않습니다.
식사. 그리고 우리는 식사 = 점심 식사를합니다.
당신은 당신의 브라우저에를 입력하고 그것을 이동하여 URL을 테스트 할 수 있습니다.
그것은 당신에게 약간의 출력을 제공합니다. 그냥 점심의 물건의 무리입니다.
그것은이 못생긴 형식입니다. 우리는 더 나은 형식으로 페이지에 그것을 인쇄합니다.
URL이 정확 그래서, 이제 우리는 함수를 작성해야
요청이 성공하면 다시 호출합니다.
이 함수는 실제로 인수를 취할 것입니다. 그것은 데이터가 될 것입니다.
데이터는 GET 요청이 완료되면 GET 요청에서 돌아 오는 것입니다.
우리는 중괄호를 할 수 있으며, 여기에서 우리는 익명 함수를 작성
그것은 우리가 정보를 다시 얻을 때 해당 데이터를 사용하여 실행합니다.
데이터 그래서, 우리는이 URL에 입력하면,
이 데이터처럼 보이는 무슨이다. 그것은이 거대한 문자열이 될거야.
하지만 좋은 일이 자바 스크립트는 JSON.parse 함수를 사용하여 구문 분석 할 수 있습니다.
그럼 구문 분석 데이터라는 새로운 변수를 만들 수 있습니다.
구문 분석 데이터는 객체의 배열입니다.
각 개체는 같은 정보를 포함합니다 - 그럼, 살펴 보자.
그것은 날짜, 식사, 범주, 조리법, 모든 다른 물건을 가지고 있습니다.
그럼 그냥 각각의 이름을 인쇄 할 수 있습니다.
우리는 그것에서 다시 그 물건의 전체 배열을 반복하자,
그냥 각각을 출력 - 각각의 이름을 인쇄합니다.
이 루프입니다.
>> 자바 스크립트, 당신은 배열에 변수 루프를 만들 수 있습니다이 정보가 도움이 구문이
그리고 var에 나는 var 대신 나는 = 0을 할 필요없이, 그래서 그냥 이터레이터
내가 길이보다 작은, 난 + +, 당신은 단지 분석 데이터 나는 var를 할 수 있습니다.
이 예제에서는 구문 분석 데이터를 (내가) 현재 요소에 해당합니다
배열의, 실제 객체입니다.
그리고 우리는 그것의 이름을 얻을 싶어요.
그래서 그냥 이렇게 이름하자.
그리고 마지막으로, 우리는 다시 몇 가지 jQuery를 있기 위하여려고하고있다.
실제로 DIV 현재 비어이 식사 정보 사업부에 추가합니다.
그럼 선택한하자.
우리는 jQuery를 선택합니다 식사 정보 사업부 ID, 또는 식사 정보 ID를 사용합니다, 죄송합니다.
우리는이에 추가 할.
우리가 테스트 한 경우, 예를 들어, 단지 그것을 매번 덮어 씁니다.
그래서 우리는 그냥이를 추가 할 수 있습니다.
배열의 현재 요소, 우리는 그것의 이름을 얻을 것이다
우리는 식사 정보 ID 사업부의 말미에 추가됩니다.
그리고 단지 그것을 청소기 보이게
이 한 줄에 모두가 아니다 그래서 우리는 또한 줄 바꿈을 추가합니다.
모든 것이 잘되면, 그래서 그에게 딱해야한다 -
무엇보다도 먼저,이 버튼을 클릭 할 때마다,
그것은이 URL에 GET 요청을 보냅니다.
데이터가에서 돌아 오면, 그것은 그것을 구문 분석합니다
JSON, 해당 데이터를 나타내는 전체 배열을 통해 루프로 돌려
다음은 이름과 줄 바꿈을 추가
이전에 비어있는이 식사 정보 ID의 모든 라인.
그래서이 페이지로 돌아가, 우리는 새로 것이다,
클릭 찾아 - 그것은 작동하지 않습니다. 그것은 불행한 일이다.
디버깅이 들어 오는 곳이 있습니다
index.html을, 줄 1.
그거 재미 있네요.
좋아요, 잘, 이렇게 시간을 할애하기보다는, 그냥 갈거야
내가 가지고있는 수행 파일을 끌어, 이는 완성 된 버전입니다.
그 차이가 무엇인지 모르겠지만, 우리가 대신 위로를 열 수 있습니다.
우리는 AJAX로 이동이 제대로 작동합니다.
즉, 점심 오늘 무엇
특별한 순서없이, 주위 따옴표와 함께, 그래서 예쁜 아닙니다.
하지만, 분명히, 당신은 최종 프로젝트에 대해이 작업을 수행 한 경우,
당신은 더 잘 만들 것입니다.
하지만 당신은 GET 요청을 어떻게의 단순한 예입니다.
우리가 실제 코드를 보면, 나는 추측하고있어 내가 확신
아직도 꽤 많이 동일합니다.
오, 난 문자열로 변환하는 것을 잊었다, 바로 그거야.
아니, 그것은 여전히​​ 작동하지 않습니다. 에 관계없이, 여기에 실제 완성 된 코드는
이 어떠해야하는지에 대한,
그리고 난 그냥 구현 것과 같은 일을 수행합니다.
당신이 버튼을 클릭하면 JSON은 데이터를 자동으로 분석 GET을 사용합니다.
그것에서 데이터를 다시 가져와 전체 배열을 통해 루프
그리고 밖으로 인쇄 - 점심 오늘의 무엇, 그것의 이름
각 줄 끝에서 줄 바꿈을 추가합니다.
그것은 당신이 get 함수를 사용하는 방법이다.
>> 당신은 또한 내가 시간이 없었있는 POST를 사용할 수 있습니다
이에 대한 예제를 작성하는, 그러나 우리는 문서를 볼 수 있습니다.
당신은 jquery.post 보면
당신은 거의 같은 것 것을 볼 수 있습니다.
당신은 URL을 가지고 있지만, 사용하는 대신 매개 변수를 전달 -
다만, URL 자체에 대한 문자열을 넣어
이 데이터 변수에 전달해야
그 사전, 기본적으로 배열하는 값에 매핑 매개 변수를 설정합니다.
당신은 그를 전달하고, 그 POST를 사용하여 보냅니다.
그리고 일단 당신이, 당신은 성공 기능을 가질 수있다
데이터가 돌아 오면 그 실행합니다.
그렇지 않으면, 그것은 정확히 동일합니다. 그래서 POST를 사용하여,
당신이 입력 양식이있는 경우, 예를 들어, POST를 사용 할 수 있습니다
당신은 그것으로 사람들이 입력 암호를​​하자, 그 암호를 배웅
백 엔드 스크립트, 해당 사용자가 유효한지 여부를 데이터베이스에서 확인합니다.
당신이 할 수있는 모든 jQuery를 사용하는 대신 전혀 페이지를 새로 고침하지.
즉, 내가 먼저 당신을 보여준 블로그에서 구현 방법입니다.
우리는 결국 포털로 이동하고 로그 아웃하면 로그 아웃
작동하지 않는 로그 아웃합니다.
그럼, 내가 그냥 새 창에서 열어 보자.
여기에 비밀이 있고, 나는 무작위로 뭔가를 입력하려고 했어요.
그것은 작동하지 않습니다,하지만 당신은 우리가하지 않은 것을 볼 수 있습니다
실제로 모두에서 페이지를 새로 고침해야합니다.
코드, 당신은 그것을보고 싶다면,
여기에있는 모든 사용할 수 있습니다.
코드 그래서 언젠가 작년에 썼다.
당신은 여기에서 볼 수 있듯이, 우리는 POST 요청을 전송하고 있습니다.
나는 백 엔드에서 login.php라는 파일이
암호가 유효한 경우 이는 확인합니다.
우리가 전달하는 매개 변수에 매핑 된 암호이다
현재이 입력 상자에의 입력.
그리고 데이터가 돌아 오면, 우리는 확인합니다.
데이터가 false의 경우, 우리는 잘못된 암호를 말하고, 그것을 아래로 밀어
그리고 단지 그 후에 사라합니다.
그렇지 않으면, 우리는 관리자 페이지를로드합니다.
그리고이 모든 JSON을 사용하여 수행 하였다.
이 코드 행 수, 당신은 단지 백 엔드에 데이터를 전달할 수 있습니다
그것은 정확 있는지 확인, 당신은 올바르게 기록되었는지 확인
실제로 올바른 페이지에 사람을 리디렉션에 응답
이상에서 그들을 로그인있게하고 그들이 잘못된 암호를 가지고 그들에게 이야기하지.
그래서 당신이 jQuery를 POST를 사용할 수있는 방법의 예
귀하의 백 엔드에 POST 요청을 보내려면,
사람이 제대로 로그인인지 확인.
>> 좋아, 내가 가진 모든 예제, 그리고 커버 싶었던 물건의 있도록.
사람들은 jQuery를 당신이 할 수있는 중요한 것들입니다 :
, 요소를 선택 DOM 조작을 사용하여 수정,
당신이 효과를 추가 할 수 있습니다, 특정 이벤트에 물건을 활성화
또한 매우 원활하고 쉽게 AJAX 요청을 수행하십시오.
그래서, 앞으로 또는보기를 당신을 감사하십시오
당신은 질문이있는 경우에, 다만 저를 알고있다 시키십시오. 그래?
[학생] 위로 보여줄 때, 당신은 따옴표로 POST 요청 후 JSON을했다
난 그냥 무슨 짓을했는지 궁금 해서요.
>> 그래, 내가 참조하십시오. 문제는 예제에서 그냥 보여이었다
주위에 따옴표 단어 JSON이 있었다 -
난 그냥 다시 끌어거야 - POST 기능을 중심으로.
난 그냥 보여주고 그것을 당기는거야.
그래서 여기이 POST 요청, 그리고 인용이 JSON이있다.
그것은 우리가 출력 될 것으로 기대하고 정의합니다.
우리는 예상되는 데이터 형식으로 JSON을 전달 그렇다면,
, 그것은 요구 사항은 아니지만, 우리는 그것을 전달하는 경우
다음 데이터는 자동으로 JSON으로 분석됩니다.
그래서 우리는 그것을 JSON 구문 분석 함수를 호출 할 필요가 없습니다
그냥 자동으로 수행됩니다.
그리고 당신은 POST에 대한 문서를 살펴 경우,
이 데이터 형식 변수, 서버에서 필요한 데이터의 유형이있다.
잘못 될 수있는 지능적인 추측하기는 기본값
그래서 당신은 비워 둘 수 있지만, 데이터를 단지 형식의
당신이 JSON 또는 XML의 또는 다른 어떤 여부, 사용하고있는 코딩합니다.
>> 다른 질문은?
좋아. 당신은 다른 질문이있는 경우에는, 저를 이메일을 보내 게 자유롭게 느낀다
vshekhawat@college.harvard.edu에서,
그리고 슬라이드와 코드는 곧 온라인으로 사용할 수 있어야합니다.
최종 프로젝트 행운을 빌어 요, 당신이 JQuery와 사용한다.
[CS50.TV]