>> 좋아요.
그래서, 자바 스크립트.
이 방에있는 거의 모든 사람이 아마 어느 정도가
그것은 편안함 여부 그것은 다시 길 때 SC50에 있었다
또는 그것은 개인되었습니다 심지어 웹 프로젝트 또는
당신은 그것을 조금 한 경우 지난 PHP 기반 프로젝트,
하지만 대부분의 부분, 당신의 많은,
당신은 어떤 편안함을 경우에도
자바 스크립트와 아마 촬영되지 않은
부여를위한 방법 언어의 작품과 무엇을 간다
에 후드 아래 및 우리가하려고하는 거냐
오늘해야 할 것은 껍질 돌아 기술적 층의 일부
자바 스크립트가 무엇인지, 어떻게 그것은 언어와 다르다
PHP와 같은 방법이 될 수 있습니다 사용되는 클라이언트 측뿐만 아니라
또한 서버 측과 다음 매우 구체적으로 초점을
이 프레임 워크에 더 JS를 알 수 없습니다 이는 기본적으로 실행 시간,
당신과 함께 프로그램 자바 스크립트 코드를 실행할 수 있습니다,
서버 측과이되어 가고 점점 인기 종류
같은 키에이 아마 루비와 PHP의 일
파이썬 당신은 볼 것이다
그것은 꽤 있음 몇 가지의 방법으로 강력한 기능
내장 된 언어 구조.
쉬운하지만 먼저, 몇 가지 당신을 생각 나게하는 물건
이 언어가 작동하는 방법 당신은 어떤을보고 문제가있는 경우
이 단지 소리의 밖으로 우리가 조정됩니다.
그래서, PHP에서 같이 하나가있다 주요 기능에 대한 개념,
당신은 코드를 작성 시작
당신은 그 때문에 수 위에서 아래로 해석.
브라우저의 문맥에서
또는 뭔가 서버 측에서 우리는 몇 가지 예를 볼 수 있습니다
약간의.
조건 구문 , PHP에 상응뿐만 아니라 C
C + + 및 다른 언어 그래서 당신에게 감각을 줄 수
우리가 그것을 구조화하는 방법 중,
다만 표준이있다 조건.
부울 식, 동일한 당신은 본 적이 구문으로
그 같은 기타 오링에 대한 두 언어,
함께 일을 끝내는.
자바 스크립트는 스위치가, 많은 PHP 및 기타의처럼
당신은 같은 제한하지 않을 중요한 기본 요소에 C에
문자 및 정수 할 수있는 것처럼 실제로 다른 유형의 값을 다한다.
루프. 그래서,이는 똑같은
아마 다스 언어, 루프,하는 동안 while 루프
다음 여기에이 트릭.
그래서,이 종류의이다 빠른 열거 형으로 알려진
그리고 그것은 매우 영리한 방법 단지 PHP가하고있는 등
바 각 FU에 대한 당신은 유사 할 수있다,
자바 스크립트 객체, 개체의 이름입니다
여기에 변수, 말, var에의 i 개체의 각 반복에
이 루프, 나는이다 하나가 될 것
해당 개체의 키.
그래서, 당신의 개체가있는 경우 학생 및 학생 ID가
그리고 이름과 집, 반복적 내가 걸릴 것입니다
ID와 이름의 가치와의 집 당신은 그 때문에 인덱스 수
객체로 그것의 것처럼 대괄호를 사용하여 배열
값을 얻을 수 표기 키 ID 또는 이름의
또는 등 집.
그리고 일반에 반대 가정, 자바 스크립트, 객체
속성은 없습니다 반드시 보장
동일한 순서로, 이는 또한 PHP에 사실 그렇게 생각하지 않습니다
일이있을 것입니다 같은 순서로
당신은 그 키를 넣어 객체에 값 쌍.
어떻게 배열에 대한?
두 가지 방법이있다 구문을 작성하는
그러나 이것은 아마도 가장입니다 일반적으로 지금 바로 사용하여 정사각형
대괄호 표기법.
그래서,이에 대한 변수 배열을 포함하는 번호로 전화를 걸
이 여섯 정수, 여기에 간단한 문자열이다
그리고 결석 무엇 통지 이러한 예에서,
자바 스크립트는 무엇인가 외관상으로는 부족.
그래. 그래서,에 대한 개념이 없다 타이핑, 확실히
이 여기에 컨텍스트 만에 이것은 참으로 문자열입니다.
그래서, 자바 스크립트는 유형이있다 그것은 참으로 배열했다
그 자체가 어떤 유형입니다 및 각 요소
그 배열의 유형이었다 자바 스크립트와 같은 수를 호출합니다.
그래서, 그것은 느슨한 타입의 언어와 우리가 볼 수
PHP와 같은 것을 자바 스크립트 항등 연산자가
그리고 다른 메커니즘 실제로 어떤 타입 검사
일부 변수는 모두 오류 검사에 대한
다른 응용 프로그램에 대한.
그리고 여기에 샘플 개체의 다만 ID와 이름을 포함.
그리고 지금, 우리는 걸 알 중괄호 표기법을 사용하여,
들여 쓰기와 흰색 공간이 종류의 의미가
이것은 선언 이름이 롭 변수
누구의 ID가 1이고, 날짜 형식은 여기에 우리의 번호입니다
각각 문자열입니다.
그리고 다음이 있습니다 약간 다른 뭔가
당신은 무엇을 수행 한 경우 요즘 Ajax를?
당신은 아마 사용 이 같은 물체
하지만 여기에서 언급하는 것은 가치가?
구문 적 무엇입니까 그래서 다른, 단지 몇
이 예제 사이의 것들 일반적으로 인정 하듯이 작은입니다
이 큰 예.
그래서, 첫 번째 평신도 년대에 기간이 무엇입니까?
유형은 무엇입니까 직원은 당신이 말하는 것?
OK, 그것은 배열의, 그것은 무엇 배열인가?
>> 개체입니다.
>> OK, 그것은 개체의 배열입니다.
그리고 지금, 하나에 초점 - 이러한 오브젝트 중 어느 하나
다른 무엇 이이 사이에?
>> 키는 문자열입니다.
>> 네. 그래서, 키는 문자열입니다,
그리고 키는 실제로 두 경우 모두 문자열
이것은 바보의 일종이다
내 의견으로는 역사 디자인 결정은 사용 할 때마다
JSON, 자바 스크립트 개체 표기법,
기본적으로 인 전송 포맷
데이터를 전송하기위한 일반적으로 네트워크를 통해
클라이언트와 서버 사이의 당신이 기억해야
이 사실이 아니라고 유효한 JSON이는 하​​나입니다
이러한 FYIs의 당신 않는 적 벽에 머리를 쾅
안 좋은 몇 가지 분 이유, 그것은 유효한 JSON 아니다
키이므로 실제로 거래되지.
JSON은 으론 요구하는 키는 인용 할 수 없습니다 만,
그러나 그들은 이중 인용하는 것이, 따옴표는 충분하지 않습니다.
그래서 어리석은 작은 것 그리고 재미있는 사실 더
오늘의 목적으로하지만,이에 대한 너무 유효한 자바 스크립트 것
그냥 아니다 - 교제는 사실이 아니다.
괜찮아요.
그래서, 우리는 많이 볼 수 있습니다 그 이상.
괜찮아요.
그래서, 자바 스크립트의 구문 아마 꽤
잘 가지고있는 당신의 모든 전에 자바 스크립트를 사용하지 않을
그것은 PHP에서 큰 도약이 아니다 또는 대부분의 모든 절차 언어
당신이 사용했을 수도있다.
그래서 오늘 우리가에 초점을 맞추겠다 흥미로운 측면
자바 스크립트 특히 아니 JS의 맥락에서
그러나 독점적으로 인해 지금까지 당신은 아마했습니다
당신은 자바 스크립트를 사용하는 경우, 브라우저의 내부에 사용.
그래서, 더 JS는 환경입니다 다음 약간의 것입니다
우리가 액세스 할 수 있도록 자바 스크립트 코드를 클라이언트 -
서버 측하지만 먼저, 어디 보자
뭔가에 좀 더 클라이언트 측.
그래서,에 갔어요이입니다 코스의 웹 사이트에 연결,
당신이 함께 연주하고 싶은 경우에, 두 개의 하위 디렉토리가있다
라는 오늘날의 나라​​에서 소스 스터드 웹 사이트에 우편 번호
이들은 단지 져 몇 가지 예
것들을 당신이 볼 수도 이전에 나는 일종의을 내장
간단한에서 약간 위로 애타게 더 복잡
일부 기능 중 자바 스크립트의.
자, 가서 보자 이에 예를 들어 본다.
그래서, 슬프게도 깜짝 태그이었다 몇 년 전 죽였
방법은 가지고로 예뻐 예뻐
하고 깜짝 태그는 말 그대로였다 오픈 브래킷 대괄호를 깜박
그것은 일종의 없음 더 이상 우리와 함께.
그러나, 우리는 여전히 부활 할 수 있습니다 다만 종류에 태그의이 아이디어
의 그것에 대해 생각 논리적으로, 당신은 어떻게 가야합니까
뭔가를 만드는 방법에 대한 이 직관적으로 깜박?
조금 알고 있다고 가정 자바 스크립트의 비트 또는 CSS
이 시점에서, 그것의 확인을하지 않으면.
>> 아웃 시간을 설정하고 숨기기 그 다음 나는 태그를합니다 후
아웃하고 다시 보여준다.
>> 네, 완벽한.
이 종류의, 101를 프로그램
당신은 어떻게 달성 할 이 같은 시각 효과?
음, 어떻게 든 뭔가를 표시해야
다음 뭔가 숨기고 표시 뭔가, 뭔가를 숨기기
조나단은 제안으로 시간 제한의 어떤 종류를 사용하여,
당신이 할 수있는 일정의 일종 이 반복 필요없이
루프 또는 사용하기 그런 식으로.
그래서, 내가 깜박 0.html에 가자
나 축소하자 글꼴 조금
이의 더 맞도록.
그리고 어디 보자 여기에 무슨 일이 일어나고 있는지에.
그래서, 우선, 알이 몸
이 페이지의 최고입니다 몸의 내부, 간단한
페이지 바로 사업부입니다.
내가 임의로 부여했습니다 인사의 ID
그 무엇이든 될 수 있습니다 그래서 그것이 고유의로
그리고 난 그냥이 간단한 텍스트, 안녕하세요.
그래서, 지금까지 스크롤하면, 일부 솜 털 스타일을 알 수 있습니다.
그래서, 날카로운 말 인사말, 어떤 당신도 알다시피
CSS 단지 고유 의미 요소를 식별하는
인사의 아이디어와 함께,
글꼴 크기는 임의로 것입니다 이 여백과 텍스트 정렬합니다.
그래서, 재미 미적 정보
대략 텍스트를 중심으로.
그래서, 흥미로운 부분입니다 여기에 스크립트 태그에있는
안쪽 넣어 발생하는 페이지 헤드.
그래서, 우리 '- 만약 당신이 할 수있는 이 중 한 가지 방법으로 수있는
우리는 몇 가지를 볼 수 있습니다 이 같은 프로그램의 반복
하지만의 베스트에서 시작하자.
그래서 나는 선언했습니다 깜짝 호출되는 함수
분명히 그것은이를 사용 내장라는 DOM 방법
아마입니다있는 getElementById 더 강력한 방법 중 하나
당신은 상자에서 얻을 자바 스크립트가 찾고있는
"인사는"할 필요가 없습니다 이처럼 큰 따옴표 수
HTML의 하나입니다 좋은 너무 오래입니다
당신은 문체 그대로 일관성 내가 감히이 일 말
많은 사람들이 자바를 사용, 자바 스크립트에서 따옴표,
이중 HTML에서 따옴표 만 정말 문제가되지 않습니다
그래서 당신이 일관성이있어로.
그래서, 여기 당신이 익숙하지 않은 경우, 실제로 액세스 할 수 있습니다
자바 스크립트 CSS와 요소의 속성.
그래서,이되었음을 주목 DIV이라고 선언 된 변수
내부 저장 그 변수의,
무엇에 대한 참조 그 DOM 요소입니다.
그래서, 당신은 다시 CS50로 생각하는 경우 또는 당신이 생각하는 모든 클래스
트리 구조에 대한과 DOM, 문서 객체 모델,
이것은 단지 참조입니다 트리의 노드에,
즉,이 페이지를 나타냅니다
그리고 만약 div.style.visibility 속성은 동일, 동일, 동일
숨겨진 후, 난 그냥 토글 원하는
요나단은 제안 된 그렇지 않으면 내가 원하는
그것을 숨겨진하기에 전환합니다.
이제 측면에서와 같이, 왜 트리플가 아닌가요?
또는 그 대 것입니다 이중 같음?
>> 엄격한 동등.
>> 죄송합니다.
>> 엄격한 동등.
그래서, 신원 사업자의
당신은하지 확인하는 곳으로 변수의 값만
동일, 동일한 의미로 뿐만 아니라, 그것의 유형입니다.
그래서, 우리는하지 않은 경우에도 모든 데이터가 여기까지 지정
어떤 변수의 유형 이 또는 슬라이드의,
관련 유형이있다 해당 문자열이 숨겨져있는
그 숨겨진 가치와 함께 그 과정 문자열입니다.
그래서,이 경우, 정말 문제가되지 않습니다
방법이이 없기 때문에 우리는 문자열을 conflate거야
의 "숨겨진"와 다른 값
그러나 이것은 종종 좋은 습관 내가 얻을 수 말할 것
평등, 평등을 사용으로,
등호는 일반적으로 좋은 일.
그것은 당신의 코드를 만들 것입니다 더 PHP 모두 강력하지만,
그리고 자바 스크립트에 당신이 실행하겠습니다 때문에
가끔 코너의 경우에 값이 0이 될 수있는 곳
당신이 검사하고 있다는 것을 제로 거짓으로으로 융합 될 수있다
또는, 아니 및 PHP와 같이 될 수있다
자바 스크립트도 다수있을 수 있습니다 거짓 값 위치를 0으로
거짓과 널 (null)과 정의 모든 암시 적으로 해결할 수 있습니다
false로.
하지만 당신이 정말로 원하는하는 경우 특정 값을 확인하는
같은 영, 수, 또는 거짓 부울 당신은이
이 ID 연산자를 사용합니다.
그래서, 그것은 얻을 일어날 수 어쨌든에도 여기에 불구하고,
그것은 종류의 의미가 우리는 우리가 확인하고 알고 있기 때문에
문자열 값에 대한 해의 아무것도 될 수 없습니다.
경우에 따라서, 여기에 마술은, 다음의 I 여기이 선 아래로 스크롤
분명히, 내장 윈도우 객체에
이것은 기능입니다 당신이 액세스 할 수있는 브라우저
이 슈퍼 지구에 창 호출 된 개체,
즉 내부 일부 기능,
경우 조각하는의 간격을 설정
그리고 명백하게 걸린다 인수의 어떤 종류의?
그래.
>> 기능 통화 및 시간입니다.
>> 좋은. 그래서, 함수 시간에게 전화
그래서 특히 함수에 대한 참조,
함수 포인터 어떤 의미에서
그리고 그 함수의 즉거야
모든 수를 모두 실행하는 밀리이 경우,
그것은 모든 500 밀리 초입니다.
그래서, 유도하는 방법 효과적으로 무한 루프
반복을 사용하지 않고 있지만, 대신 자바 스크립트를 말하고
엔진 내부 행 브라우저의
이 모든 (500)을 수행하는 밀리 초 부근에 자리 잡고 있습니다
500 밀리 초는 할 수있는 한에,
그것은 밝혀 그 후드 아래,
이벤트라는 것이있다 루프 우리는이에 돌아올거야
노드 JS의 맥락에서 그 단지 끊임없이 종류
, 회전, 거기에 앉아 할 일을 기다리는
그리고 즉시 실현으로,
500 밀리 초 통과 깜짝 다시 호출되는 것입니다
또 다시합니다 다른 작업과 함께
그 끝내야합니다.
그래서, 우리는 여기에서 무엇을 개선 할 수 있습니까?
음, 저를 열게 최대 깜박임-1.html
하고 깜짝-1.html을 보여
심미적 완벽하게 동일합니다.
그래서, 우리는 여기에 무엇을 향상시킬 수?
음, 알 그것이 종류의 쓸모가 없었습니다
라는 함수를 정의 할 수 깜박임 때문에 얼마나 많은
얼마나 많은 곳 한 I 함수 깜짝 전화?
>> 그냥 한 번.
>> 그래서, 한.
따라서,이 글은 나쁘지 않았다 사실은 아마 꽤의
정직.
나는 함수 깜박 정의 I 방법으로 함수 깜짝 전화
이 매개 변수, 하지만 기술적으로,
이유는 없었다 그것과 공통 패러다임
자바 스크립트에 실제로있다 람다 기능을 살려
당신의 기억 수 있으므로 51 또는 익명 함수
여기서 당신이 필요하지 않은 경우 함수의 이름,
당신은 단지 그것을 호출하는 경우 확실히 한 곳에서,
왜 코드를 어지럽히고 방해 프로그래머의 마음을 어지럽히고
당신의 이름 공간 정말 기호
당신은 정말하지 않는 것이 걱정 할 필요가있다.
그래서, 여기에이 버전에서,
내가 전화 통지 window.setInternal을 직접
의 맨 위에 내 스크립트 태그 그때 전달 해요
이름없는 함수 즉, 인수 없음을지지 않습니다
그 완벽의 미세하고 몸
그 기능의 그것입니다 나타납니다 그 이전에 무슨과 동일
유일한 구문 차이점은 지금
여기까지 다음 500.
나는 몸을 닫는 해요 함수
그럼 내가 말하는거야 그 이전의 코드를 실행,
모든 500 밀리 초.
그래서, 매우 한계 변경
그러나 무엇을 향한 단계 아마 더 우아한
이 구현.
그래서,이 하나를 보자 지금 가면 더 단계
깜박임 두에, 당신은거야 공용 라이브러리를 참조
의 효과는 것입니다
완전히 하찮은 할 우리가 간다 미학적하지만 경우
여기에 두 가지 버전으로 통지 이 머리의 상단에,
나는 포함했다 JQuery와의 최신 버전.
그리고, 여기까지, 난 그냥 청소
코드까지, 그것은 약간의 재미있는 세상 될 수 없습니다
계속 사용하기 네이티브 DOM 기능
원시 자바 스크립트의 종류.
사실, JQuery와 당신이 생각 알고 그렇게 인기를 끌고있다
대부분의 사람들이 단지 자바 스크립트와 jQuery를 충돌
하지만 정말 그냥 저녁 식사 기록 유용한 라이브러리
존이라는 사람에 의해 Resig 씨 등 이후
이 단지 만드는 지루한 많은 것
자바 스크립트에서 쉽게 더 간결.
그래서,이 경우에는 여기에 무슨 일이야?
그래서 나는이 모양이 더 많은 것을에 달러 기호,
그냥 잠시 후, 이 CSS 셀렉터입니다.
그래서, 그것은 매우 비슷 내가 전에 무슨 짓을했는지 정신,
하지만이 시간, 난 사실상 해시 태그를 사용
독특한를 나타냅니다 인사라는 식별자
다음 분명히 . CSS를 구축하는 방법입니다
에있는 어떤 객체 내가 방금 만든 것입니다
나는 값을 확인 해요 가시 키.
그리고 만약 그 키의 값 , 등호, 동일, 숨겨진,
나는 그것을 전환 할 건데 나는이 시간을 전환 할거야
동일한 방법을 사용하여 이는 분명히 오버로드
그것은이 가지는 의미 두 개의 서로 다른 서명,
하나의 인수 하나 두 개의 인수 하나,
의 제 세터는,
어떤의 이전은 게터는 말하자면.
그리고 만약 궁금하고 싶다면 실제로,이에 온 적이 없어
우리는 희망 jquery.css로 이동하는 경우 최고 히트 실제로이 있습니다
당신은 더 많은 것을 볼 수 있습니다 형식적인 설명
우리는 단지이를 사용하는 것이, . 속성 이름과 CSS
다음 세터는 점 CSS는
속성 이름 그리고 값.
그래서, 가장자리 청소기,하지만 여기에 패턴의 종류를 알 수
각각의 반복과 이 코드는,
우리는 일종의을 만들고있어 단단하고 단단하고 엄격한
더 나은 디자인이 말한다
우리는 다른 사람을 사용하고 있기 때문에 제거있어 다른 사람의 코드
복잡성의 일부.
그래서, 지금 만들자 이 더 간단.
그리고 사실, 만약 내가 모두 제거 당신이 모두 볼 수 있습니다 따옴표
당신이 방법에 대해 알아 보겠습니다 의견 간단한이 얻었다.
한 가지 차이점 여기에 물론입니다
나는 토글을 사용하고 있음 또한 내장되어 제공 방법
jQuery를하고 그 단지에
때문에 다른 사람 코드를 작성
즉, 실제로 전환 표시 설정
모든 DOM 요소의 당신이 그것을 보낼 수있다.
그래서, 더 나은.
그래서,이 패턴,
이 저녁 식사를하더라도 간단한 예제와 종류
바보 순 효과의 어느 텍스트의 깜박이는 조각이다,
그것은 생각의 종류의 당신이 생각해야 공정 -
에 대해 생각하지 수 반드시 최초
수동 뭔가 쓰는 향후 프로젝트에 대한
하지만, 확실히 당신이 반복으로 당신의 고문 또는 나와 함께
당신의 팀 회의 나 당신의 동료의 코드를 검토
긴축에 대한 일까지, 맞죠?
결국, 그들은 덜입니다 -
코드의 적은 라인 당신은 궁극적으로이
이론적으로 적은 버그 당신 초대 될 가능성이
단순히 있기 때문에 엉망의 최대 적은 코드.
괜찮아요.
그래서, 테이크 아웃의 커플.
람다 함수 익명 함수,
하는 당신의 많은 전에 본
다음 또한 단지 체결 라이브러리 일까지
이 jQuery에 같은 특별한 경우.
괜찮아요.
질문?
의 다른 하나를하자 여기에서 클라이언트 측 양태
형태 제로에 우리가 가지고있는 이 순 효과.
분명히 매우 간단한 형태 여기에 등록을 클릭하려고하면,
처음에 그것은 당신이 나에게 말한다 등록, 음, 정말.
글쎄, 이유는?
음, 여기 폼 0.html입니다 아주 작은 코드,
아니 자바 스크립트를 전혀하고 완전히 가짜 일종
양식 때문에 작업 값은 registered.html입니다
어떤 상관없이 의미 나는이 양식에 입력,
그 곳을 가고있다 서버에 전송?
그래. 그래서, registered.html하기 이는 명확 HTML 파일이다
따라서 정적 인 수단이없는 파일
가정 사용자 입력을 복용 어떤 자바 스크립트 코드가 없습니다
거기에 내장 그건 URL에보고
그래서 이것은 완전히 NOOP하고 아무 것도 일이 일어날 것 없습니다
제출 된 데이터 만있는 당신은 구조를 볼 수 있습니다
아주 간단한 HTML5 양식
그 몇 가지 암호가, 몇 가지 입력 유형.
그래서, 실제로 지금하자 일부 오류 검사를 추가
보라 우리가 어떻게 수도 이 문제를 개선.
그래서, 여기에 종류의 가난 이를 구현하는 사람의 방법
그것은 종류의의 코드의 불쾌한 덩어리.
그래서 먼저하자 스크롤 아래로 아래로
동일 무엇을 볼 수 있습니다 그리고 무슨 일이 다릅니다.
딱 한 가지 다른 점 지금이 사이
이전 버전입니다 나는 형태와 ID를 부여했다고
"등록"할 수의 내가 원하는하고 아무것도
하지만 유일하게하기위한 것 식별도 문제가 아닙니다
꼭 필요하기 때문에 경우 페이지는 반드시 하나의 형태가 I
중 하나를 찾을 수 jQuery의 선택 방법.
그러나이 방법은 단지 만든다 그 결정 성.
그래서, 난 내 스크립트에 지금 가면 태그, 다음을주의
의 window.onload의 등호 익명 함수.
그래서,이 무엇을하고 있습니까?
그래서, 당신은에 그 리콜 할 수 있습니다 클라이언트 측 프로그래밍 -
자바 스크립트가 아니라 HTML 페이지 다양한 이벤트를 연결 한
요소, 클릭과 및 제출 및 초점
와 블러 및 기타 일어날 수있는 이벤트
일반적으로 사용자로 페이지와 상호 작용,
의 window.onload는 말씀 않습니다.
창 전체로드에 대한
그래서 한 번 모든 이미지가되었습니다 모든 파일은 한 번 다운로드
한 번 다운로드하고 한 페이지가로드 된,
다음 코드를 수행하고 나는 아래로 전환하는 경우주의
이 방법으로, 알이 더 괄호가 없습니다
중괄호 후 대답입니다
I 실행이 아니에요 지금 여기에서이 기능을
브라우저가 실행하는 것입니다 그것은이 결정되면 나를 위해
페이지가로드 된 것을.
그래서, 우리가 무슨 짓을했는지 보자,
document.getElementById를 등록
그래서 나 한테 준다 노드 레퍼런스
이 중의 트리 등록 ID.
그리고 지금, 나는 갈거야 다른 이벤트 핸들러를 등록
form.onsubmit가 얻는 수행하여 이 익명 함수
다음을 의미한다 코드를 실행해야 할 때마다
해당 양식을 제출합니다.
자,이 중 대부분은 단지입니다 종류의 논리를 지루.
따라서, 만일 값 형태의 전자 메일 필드는
"아무것도"당신은해야 당신의 이메일 주소를 제공,
당신은을 가진 사용자에 소리 경고 다음 false를 반환합니다.
그리고 나는이 다른 검사의 무리,
암호를 확인,
검사의 경우 암호는 동일합니다
검사의 경우 계약 확인란이 선택되지 않았거나
난 그냥 고함 사용자가있는 경우
이러한 테스트의 사실 실패합니다.
그래서, 예를 들면 다음과 동등하다 조금 인위적인 비록
내가 사용하는 것이 여기에 사실 , 등호, 동일
즉, 사용자 나 트릭을 시도 할 수 없습니다
어떤 값을 입력하여.
아니면 오히려 진정 해요 존재를 검사
빈 문자열의 사용자 아직 아무것도 입력하지 않았습니다.
만약 사용자가 입력 말 그대로 제로에
"제로"는 잠재적으로 될 수 빈 문자열과 혼동.
그리고 나는 그것이 일종의 말 여기의 의미
분명 영 (0) 때문에 이메일 주소가 아닙니다.
하지만이 더 있다면 텍스트 필드와 같은 일반 필드
또는 이름 또는 설명이나 당신이 소중히하고 싶은 일
그리고 그것은 반드시 아니에요 구문이
이메일 주소, 사용자로 제로 같은 것을 입력 할 수 있습니다
다시 코너 케이스하지만 그건 이유는 일반적으로 유형입니다 확인
유용한 것.
당신은 진정으로 검사하고 사용자가 아무것도 입력하지 한
해당 필드에.
그래서 어떤 일이 발생하는 경우 없음 의 이러한 테스트는 물론, 실패
사실 내부에 반환 이벤트 처리기의
같이가 onsubmit .. 그냥 의미 원래 동작 실제로
따라서 전파하고 양식을 제출 얻을 것이다.
그리고 그 이유는 때 마지막의 내가 도착하기 전에 저장을 누를
를 통해 register.html 및 지금은 그렇게 할 경우, 통지,
나는 내가하지 않으면 화가나 이메일 주소를 제공
내가 입력 할 수 있습니다 malan@harvard.edu,
크림슨 [음성], 크림슨, 확인란을 선택,
지금 등록 그것은 다시 나에게 말한다,
당신은 등록 나 정말.
괜찮아요.
그래서, 그냥이 문제를 정리하자 다음 조금 및 전환
새로운 새로운에 서버 쪽 물건.
그래서, 폼 2.html로 이동하는 경우, 몇 가지를 알 수 있습니다.
그래서, 하나, 내가 가져 다시 믹스에 jQuery를
그래서 거기에 다시합니다 이 달러 기호
지금은 사용하고 일부 jQuery를 방법.
그래서, 먼저 그것에 대해 무엇인가 의 달러 기호
여기에 특별하게?
달러 기호는 끈으로 묶인 무엇입니까 대부분의 모든 jQuery 코드를 통해?
그래.
[청취 비고]
OK. 따라서, 달러 기호 기능 보고 DOM 통과
이 뭔가에 대한 특히 CSS 셀렉터.
그래서 사실 만도 거의 정확.
그 일이 무엇입니까 당신은 문자열을 전달하는 경우
이 경우에서와 같이,하지만 당신은하지 않습니다 항상 문자열을 전달해야합니다.
사실, 포인트의 경우, 매우 여기에서 첫 번째 줄이없는 것입니다
CSS 셀렉터, 내가 전달 해요 람다 함수.
그래서, 더 일반적으로 - 그래서, 좋은 대답하지만 너무 정확한.
더 일반적으로, 무엇이다 달러 기호에 해당합니까?
>> 그냥 jQuery를.
>> 네. 그래서, 그냥 jQuery를 아니면 그냥 함수의
그 전 어떤 남자 년 쓴 다른 사람들이
이후 강화 된 것을 그대로 기본값은 호출에 의해 -
죄송합니다, jQuery를 호출합니다.
그것은 단지 - 그것은집니다 많이와 달리
언어 달러 기호입니다 사용하는 완벽하게 유효한 기호
변수의 이름 반면에
PHP 달러 기호에 분명 특별한 의미가 있습니다
하지만 자바 스크립트에서처럼 일부 언어, 달러 기호
밑줄 및 기타 특수 문자 완전히 합법적 인
자신의 기호에 사용하는 변수의 이름.
그래서, 누군가가 그냥 결정 즉, 당신은 무엇을 알아?
그것은 꽤 지루한 될 것
전 세계를 만들기 위해 jQuery를 모든 시간을 입력
저 종류의 식물하자 땅 지분과 말,
"이 라이브러리는 것 달러 기호를 사용합니다. "
그리고 사실,이 위험을 높이는 않습니다
그 주제 넘게 다른 사람 달러 기호를 사용하는 것입니다
자신의 라이브러리 만에 대한 종류의 확실히하는 방법이있다
당신은 달러를 사용하는 경우 이 jQuery를 매핑 서명
당신은 테스트 할 수 있기 때문에 경우 이미 할당 된 것
본질적으로 다른 뭔가.
괜찮아요.
그래서, 그게 전부가 , 마법이있다 없습니다.
그것은 찾고 그냥 섹시 좋은 구문의 조각
빠른 및 입력하기 쉬운.
때 그래서, 무슨 일이 달러 기호 열린 괄호를 입력
다음 익명 함수.
음, 이것은 밝혀 실제로 속기 표기법
문서 점에 대한 준비가 열린 괄호.
그래서, 같은 신시아 발견 이전에 우리는 이미 발견 한
코너 케이스.
당신은 단지에 전달하는 경우 람다 함수,
달러의 효과 기호는 조금 다르다.
사실, 어떤 일이 실제로 일어나고 이이에 해당하는 점이다,
에 대한 참조를 전달 글로벌 문서 객체
그와 마찬가지로 전역 창 목적은
그 몇 가지를 제공합니다 특수 기능
즉, 전체 페이지에 영향을 미치는 또는 브라우저 해집니다
해당 문서 아웃 할 때 당신이 jQuery를 함께 포장,
jQuery를 본질적으로, 실현 오,이 기준입니다
특별한 문서 객체,
내가 지금 등록하자 이벤트 핸들러는 준비라고
고유하지 않은 자바 스크립트 나 DOM 관련.
준비는 jQuery를하다 라고 일
페이지가로드되면 HTML 요소의 모든
하지만 반드시로드되지, CSS와 이미지의 모든
자바 스크립트 파일과 파일 및 좋아하는 플래시.
그래서, 이전 단계의 부하에 다음 진행
다음을 실행합니다.
그리고 준비에 사용하는 상승 방법은, 당신이, 당신이 알 수 있다는 것입니다
그 모든 요소 당신의 DOM에,
고유하게 식별의 모든 ID를 가진 것들, 그들도 존재
만약 페이지의 내용 여전히로드 및로드됩니다
당신은 몇 가지가 잠시 깨진 아이콘
또는 배경에 흰색 페이지입니다.
그래.
>> 무슨 일이 일어날 것 [들리지 경우?
>> 완벽한 예를 들어, 완벽한 질문입니다.
그래서, 우리가 할 수있는 경우에 보자 지금이 문제를 시뮬레이션 할 수 있습니다.
그래서, 내가 가서 삭제하자 여기까지하고이 두 줄
해결하기 위해 귀찮게하지 않고 들여 쓰기, 내가 앞서 가자
여기이 아래로 삭제 - 죄송합니다, 아래로 여기 하나.
그리고 지금, 나에에 가자 페이지의 모양 2.html 및 유형으로 이동
회원 가입에 아무 것 같았다 일어날의 말을하자, 그 이유였다,
이제 가서 열게 크롬의 관리자까지,
그냥보고 콘솔을 열어 아무것도 여기에서 발생하는 경우, 지금,
아직 아무것도 등록하지 않습니다.
그래서 코드는 구문입니다 벌금
그래서 나는 어떤 보이지 않아요 빨간색 오류 메시지
하지만 분명히 어떤 일이되지 않는 이유는 무엇입니까?
내 코드의 아무도는 오른쪽입니다 그렇게 작동하지 않습니다 없음
내 코드이 될 것으로 보인다 그래서 이유입니다, 실행?
음, 자바 스크립트와 브라우저 보다 일반적으로 실행
웹 페이지 상단의 내용 아래로, 왼쪽에서 오른쪽으로.
그리고 문제는 그 때문에 정상
이 페이지의 HTML은 머리를했다 다음 스크립트 다음 다른 스크립트,
이 실행 얻을 것입니다 준비도 무엇을하기 전에,
또는 트리에 존재 페이지의 표현입니다.
양식 자체, 심지어 몸이 시점에서 존재한다.
그래서, jQuery를 충분히 똑똑하다 그것의 오류 검사와
그 어떤 요소에 존재하지 않는 경우 등록의 고유 ID,
그것은에 없을거야 당신을 구제
과 그냥 콘솔을 트리거 오류 및 전체 페이지를 휴식,
그것은 자동으로 무시하는거야 당신,하지만 이유가 없음
이 코드는 이제까지 실행
당신이있을 때 때문에 이것은 핸들러를 제출 등록 된
어떤 요소가 없었다 그것을에 연결.
그래서,이 종류의 어떤 조합 없습니다.
그래서, 대신 지정하여, 나이가로드 될 때까지 기다립니다
우리의 window.onload을 한 경우 일종의 것
일의 오래된 학교 방법 그것은 나 섹시 JQuery와 방법
다음과 같이, 우리는 할 수있다 그것은 대기 말해 모든 때까지
이러한 HTML 태그가 구문 분석 있도록도
이미지를로드하지 않은 경우 적어도 그 노드가 트리에,
다음 JQuery와 보장 할 수있다 모든 것이 있습니다.
그래.
[청취 비고]
예, 좋은 예를 절대적으로.
그래서,에 대한 다른 솔루션 이, 당신이 사용하지 않은 경우
또는 기억하지 않았다 이 존재하는 것이,
당신은 절대적으로 움직일 수 아래에이 모든
웹 페이지의 내부 하지만 여전히 폼 아래 몸
그는 것 이 문제를 해결한다.
그냥 보통의 나쁜 사례로 간주.
조금 지저분한 와 루즈 특별히
당신은 모든 것을 움직이지 않게 유지하는 경우 페이지의 맨 아래에,
나는 유지하고있어 특히 모든 넣어 간단한 일
안에 내 코드 HTML 페이지
때 당신이 할 수있는 과정 확실히 습관을
그것을 인수 분해 별도의 파일
그냥 좋은의 어떤 순간에
중앙 집중 머리에있는 파일입니다.
당신이 지불하는 가격이 제외
자바 스크립트를 삽입하여 CSS 파일 같은 다른 자산
페이지의 머리에, 당신이 실행 위험은 무엇인가?
>> 느린 페이지 로딩.
>> 느린 페이지 로딩, 왜?
>> 우리가 노력하고 있기 때문에 모든 라이브러리를로드
[들림] 전.
>> 정확히 때문에 브라우저 아래에 코드 상단을 읽고,
왼쪽에서 오른쪽으로 만약 구글 분석은 느리다
또는 jQuery를 CDN 속도가 느립니다 또는 페이스 북의 API가 느립니다
해당 파일은 중단 잠재적 따라
해당 파일을로드하는 방법에, 전체 페이지가 중지 될 수 있습니다.
그리고 당신이 볼 경우 많은 솔직히
웹 사이트에 그들이 많이 가지고 낮은 품질의 광고
그들에, 우리는 단지 느린 하나입니다 다운 웹 사이트는 페이지를 걸 수
일부 부정에 대한 (초)
브라우저 마지막까지 그것에 밖으로 희망 시간
다음 쇼 페이지의 나머지 부분.
그래서, 당신은 지금까지와 같이 사용했을 경우 버튼과 같은 페이스 북,,
웹 페이지의 내게하자 나는이를 찾을 수 있는지 확인
여기에 로그인 할 필요없이.
그래서, 당신은에 가면 페이스 북의 Like (좋아요) 버튼
그리고 젠장, 가져 오기 코드를 클릭
우리가 할 수있는 경우에 볼 수 있습니다 예를 찾을 수 있습니다,
확실히 사람이 게시했다.
[일시 정지]
나는 몇 가지에 줄 것이다 우리는이 표시되지 않는 경우 초.
페이스 북 ASYNCH - OK.
그래서,이 코드이고 아니라면 그들은 최근 변경했습니다
그 페이스 북 실제로 당신이 사용하는 것이 좋습니다
자신의 라이브러리를로드하는 실제로 제안
당신은이를 넣어 페이지의 본문입니다.
그래서 페이스 북은 당신을 조언 바보 DIV의 일종을 만들
그건 그냥 고유 ID 등이있다 이것은, 다음 스크립트 태그가
이 모든 복잡한 기본적으로 다음과 같은 작업을 수행
그들은 어떤 JQuery와 사용하지 않는 그들이 원하는하지 않기 때문에
다른 가정합​​니다 종속
날이 이동할 수 단지 조금 이상.
그래서, 그들은이 통지 여기에 익명 함수,
그냥 순간에 그에 대한 자세한
그런 다음 사용 document.createElement,
그들은 DOM 요소를 생성하고, 이 말하자면의 malloc처럼
태그 유형입니다 스크립트 그러므로 지정있어
그 비동기 속성 이 태그의 것입니다
사실로 당신은 가서 어떤 URL을 알아낼
페이스 북의 자바 스크립트의 해야한다
이 단지 멋진 방법입니다
이 검사해야 그것은 HGP 또는 HDPS합니다.
그리고 마지막으로, 페이스 북이 무엇을 알
그들은 DOM 노드를 가져가 페이스 북의 루트의 ID가
그들이 말한입니다 당신은 페이지에 넣어
그리고 그들은 아이를 추가 그래서이 모든 것의 효과는
종류의 동적으로 삽입하는 당신의 페이지에 새로운 스크립트 태그
DIV의 자식으로 당신 이 삽입되도록 나머지
행복하게 페이지가로드의
다음이 코드를 실제로 비동기 적으로로드됩니다.
그래서, 기본적으로 후 사실 내가 연기 언급
익명 함수,
이 펑키은 무엇인가 구문은 여기를 참조
나는 기능뿐만 아니라이있을 때 괄호, 닫기 괄호를 열고
다음 중괄호, 왜 여기에 열린 괄호
다음 오픈 친한, 이 괄호, 무슨 일을한다는거야?
>> [청취] 정의 다음 실행?
>> 정확하게, 그것은을 정의하는 것 익명 함수
하지만, 단순히, 함수를 정의하는
물론 실행되지 않습니다 당신이 그것을 호출 할 때까지 함수
이름으로 만, 물론이 익명 함수에게 있습니다
그래서 당신은 그것을 호출 할 수 없습니다 이름하지만 당신은 할 수 있습니다
자바 스크립트로에게 실행 익명 함수 단지
전체를 캡슐화하여 괄호에있는 우리가 한로
이 괄호이와 여기에 다음 고정을 괄호
함수의 끝에 열린 괄호, 닫기 괄호,
당신이 원하지 않는다면 그것을 인수를 전달합니다.
그러나 이것은 종류의 바보 같다
같은 이유 추가 구문의 복잡성
대부분의 사람들은 보이지 않았다 인식, 값은 무엇인가
그 포장의 세 줄의 코드
익명 함수 이러한 방법.
그래.
>> 덮어 쓰지 않으려면 [청취]의 가치.
>> 정확히 피하기 위해 변수를 덮어 쓰기
기존 페이지의 오른쪽?
페이스 북은 다소입니다 주제 넘게 결정
그들이 사용하는거야 변수 E, 그것은 아주 가능성이 높습니다
당신 또는 사용하는 사람 버튼과 같은 페이스 북
또는 어떤 다른 소셜 플러그인
에 변수가 어딘가 E. 소위,
모두를 캡슐화하여 내 자신의 코드
이 익명 함수, 그들은 기본적으로 자신의 범위가
그 손상시키는 위험을 감수하지 않습니다 기존의 변수.
그래서,이 역시 사실입니다 매우 일반적인 패러다임,
작성 특히 라이브러리 코드
나 자신이 없을 때 이름 공간을 복잡하게 할
다른 변수를 입력 값이 살고 싶어
당신이 종료되면 죽어 코드 블록,
이 좋은 기술입니다 자바 스크립트에서.
괜찮아요.
그래서,이 예에 백업 여기에, 우리 모두가 결국 했어요
이 예는과 그냥 코드를 청소.
그래서, 그것은 여전히​​ 전체 있어요 스위치의 무리, 전체 무리
여기에 조건 만의 구문의 비트를 발견,
이것은 DOM의 노드에 액세스 고유 ID 등록,
공간 수단은 지금 봐 해당 노드의 자손,
이 유형의 경우를 찾아 입력 한 다음도
당신이 볼 수없는 경우 하기 전에, 당신은 알고 있습니다
이것은 단지 찾을 의미 그것은 입력 태그,
가 여기 입력 요소 값 이름의 속성
전자 우편의 후 보자 나 일부에서 내 손을 흔들어
나머지는하지 않습니다 모든 자극
하지만 정말 그냥 jQuery를 구문 같은 작업.
괜찮아요.
그러나 그렇게 중요하지 않아 여기에 브라우저 측의 물건입니다
오히려 사실 우리 청소기 및 청소 방법을했다
실제로 만들기 그 코드가 작동.
괜찮아요.
질문?
[청취 비고]
OK. 이제 재미있는 부분.
왜 이렇게, node.js?
누가 무슨 상관이야?
당신은 오늘 어떻게 알 수 있습니까?
Node.js, 왜?
헨리는 [철자를 가정].
[청취 비고]
배터리 리셋?
무엇 -이 있습니다 완벽한 절벽 걸이
오늘의 후반을위한.
왜 우리는 이동하지 않는다 여기에 5 분 휴식,
반 사탕이있다 이 기계 돌아서
없이 어떤 사탕처럼 안으로 분기를 넣어