>> [음악 재생]
>> 데이비드 마란 :이 CS50입니다.
이 주 아홉의 시작입니다.
그리고 이것은했을 것입니다 씨 부울의 200 번째 생일이었다.
그래서이 동료입니다 우리가 언급 한 누구에게
사용하는 방법에 대한 꽤 많은 시간 true와 false 부울 변수
1과 0과 같은.
그리고 이것은 구글의했다 오늘 그에게 공입니다.
그는 200 살이 것이다.
당신이 원하는 경우에 따라서 CS50 점심 우리와 함께,
링크에서보세요 코스의 웹 사이트에.
그리고 같은 얼굴과 친구 등 이 여기에 캠브리지에서 당신을 기다리고 있습니다.
이런 얼굴은 뉴 헤이븐에서 당신을 기다리고 있습니다.
그리고, 켄, 사실 뉴 헤이븐은 친절​​했다
엘리의 애니메이션 GIF라고 무슨 여기에 최근에 GIF는 아직 lunch--
다른 그래픽 파일 형식 있는 당신은 familiar--있어
이 같은 작은 선물을 보인다.
그래서 그냥 순서는 확인 동행입니다.
캠브리지 여기 아무도 웃음되지 않습니다.
그러나 뉴 헤이븐에서,이 바로, 정말 재미?
괜찮아.
>> 그래서 거기에서 우리와 함께 않습니다.
여기 하버드, 특히,이 수요일
당신은 학년이라면 또는 신입생 even-- 결정의 또는 junior-- 사고
컴퓨터에 스위치 과학, 알고있을거야 그
CS는이 공정한 조언을 할 수 수요일 곧 수업 후
컴퓨터에서 오후 4시 과학 건물 맥스웰 드워킨.
우리는 과정의에서이 작업을 놓을 게요 내일의 웹 사이트뿐만 아니라.
도넛은, 내가 말한거야 제공됩니다.
>> 괜찮아.
내가 파고 그래서 재미 story-- 주위에 인터넷에서,
나는 오래된 아카이브를 발견 나의 이전 웹 사이트의.
그리고이 문제를 해결 out--집니다 시간, 그것은 매우시의 적절 보인다
나는 UC 선거 것을 수집하기 때문에 위로 다시 기어하려고합니다.
그래서, UC에 출마 비참하게 잃었다.
그리고 어쩌면이 이유 부분에 있었다.
그래서이 시간에 내 웹 사이트이었다.
어떤 이유로, 나는 그것이라고 생각 사람들에게 이야기하기 전에 좋은 생각,
어떤 내 플랫폼이고 왜 그들이 가지고, 나를 위해 투표해야
것을 알 수 입력 클릭 회고에있는 정보,
소름 가지.
나는 정말이 무엇인지 모른다.
>> 그러나 그것은 확실히하지 않았다 캠페인을 도와줍니다.
또한 수석에 의해 그 발견 연도 - 나는이 도련님 달력을했다.
머펫은 당시 유행 가지 있었다.
아니면 그들은하지 않았다.
나는 그때 도련님 달력을했다.
그리고 나는 이름 멋있다고 생각 하버드의 네트워크 내 컴퓨터
frogman.student.harvard.edu.
당시, 우리 모두가 유일했다 식별 호스트 이름.
그리고 당신은 약간의 허영심을 선택할 수 대신에 자신의 이름의 이름입니다.
그리고 어떤 이유로 잠수부와 함께 갔다.
>> 그리고 내가 많이 소비 started-- 시간이 링크를 클릭
오늘 아침.
그리고 이것은 내 약 페이지이었다 이는 지금 가지 사랑스러운 것 같다.
그러나 그것은 또한 단지를 증언 얼마나 멀리 기술은왔다.
나는 다시 날에 의미 486 일이었다.
요즘은 슈퍼, 슈퍼입니다, 슈퍼 슬로우 잘 이하
당신은에있는 것보다 당신의 자신의 주머니 요즘.
거기에 그에 이상이있다 더욱 당황했다.
그래서 나는 그것을 떠날 것이다.
그러나 그것은 나의 처음 진출 web--에 아, 아니.
그건 아니었다.
웹 프로그래밍으로는 처음 진출 난 그냥 잊고이 사이트이었다.
어떤 시점에서, 나는 배운 방법 반복되는 배경 이미지를 확인합니다.
그래서 나는,이 타일 효과 발견 하키 선수, 축구, 골프 등
공, 또는 무엇이든 즉 신입생의 IMS 웹 사이트.
그리고 이것은 진정으로, 사실이었다 최초의 웹 기반 프로젝트 나는 on--했다
나는 어쩌면 학년 생각 년, 중학교 연도 -
CS50 및 CS51, 하나를 복용 후 공통의 후속 클래스.
나는 찾고에 발견 아카이브를 통해
나의 후계자 중 하나 친구, 리, 종류의 변경
자신에게 저작권.
그러나 이것은 참으로 뭔가였습니다 나는 당황을 소유해야한다.
그러나 이때, 본 첫 번째 웹 사이트이었다
나는 몇 주 전에 말했듯이, 하는 신입생 수에 의해
여기에 교내 스포츠에 등록.
그리고 그것은 밝혀 그 배경 이미지
그런 좋은 생각이 아니다.
그러나 웹은 새로운이었고, 우리는 실험을했다.
그리고 이것은 무엇이다 나는 명백하게시했다.
괜찮아.
그래서 속히, 우리는 전환 정말, 당신을 제공하기 위해 오늘 기어,
당신이 찾을 수있는 마지막 조각 최종 프로젝트에 특히 유용
뿐만 아니라, 그에게 시작합니다 전체 월드 와이드 웹을
조금 더 이해할 수있는 느낌.
사실, 우리가 소개하는거야 하나 이상의 프로그래밍 언어
유사라는 자바 스크립트 다른 방법으로 다른
언어에서 우리는 지금까지 살펴 보았다.
>> 그래서 C, 리콜은,이 컴파일 된 언어입니다.
당신은 컴파일러를 통해 실행할 수있어.
당신은 개체에 소스 코드를 얻을 코드, 또는 0과.
그리고 그는 0과됩니다 당신의 CPU, 중앙 처리 장치,
실제로 이해합니다.
PHP 반대로 아니다 컴파일 된 언어입니다.
무슨 일이있어?
그것은 해석 언어입니다.
그래서 몇 가지 프로그램이있다 통역이라고
에 그건 ... 최고를 읽을 수있다 바닥, right-- 왼쪽
그리고 어떤을 모두 파악 당신의 구문이 수행하고 의미,
그것은 루프 또는 조건이 있는지 여부 프로그래밍 또는 임의의 다른 개수
구성한다.
그래서 해석 언어입니다.
>> 그 다음 우리는 HTML을 소개했다.
그리고 HTML도 아니에요 프로그래밍 언어.
우리는 무엇을 부르는 것?
다만 인 마크 업 언어, 그것을 말하는 멋진 방법의 종류
같은 프로그래밍 구조를 가지고 있지 않습니다 우리는 심지어 다시 스크래치의 날 보았다.
더 루프가 없습니다.
아무 조건이 없습니다.
정말 언어 데이터를 마크 업에 대한
그리고 포맷 또는 어떤 방식으로 구조화.
>> CSS 한편, 유사 하지 프로그래밍 언어.
그것은 더 미적 지향합니다.
그리고 그것은 당신이 미세 조정으로 정렬 할 수 있습니다 글꼴 크기 및 색상 같은 것들
배치 및 그 모든합니다.
그 다음 우리는 있었다
>> SQL.
그래서 SQL은 참으로 프로그램입니다 어떤 의미에서 언어,
이기는하지만 맞춤형 특히 데이터베이스에.
그러나 우리는 당신을 소개에도 불구하고 선택 및 삽입과 삭제 및 업데이트
다른 사람의 커플 당신이 실제로 할 수 있습니다 밝혀
함수를 작성하거나 그들이있는 한 절차,
보고 SQL과 행위라는 아주 PHP와 C 기능 등을들 수있다.
그래서 사람들이 존재한다는 것을 알고있다.
그러나 우리는 심지어 그들과 함께 귀찮게하지 않습니다 우리는 단지 여기에 표면에 흠집이있다.
그리고는 자바 스크립트의 마지막 우리의 언어는 공식적으로 발표했다.
자바 스크립트, 그래서도이며 해석 언어.
그리고 그 익숙한 수행 당신이 그것을 구별 할
일부 특성과 C와 PHP 모두에서?
무슨 일이 다른 점은?
>> 청중 : 그것은 컴파일 아니에요.
>> 데이비드 마란은 : 다시 말?
>> 청중 : 그것은 컴파일 아니에요.
>> 데이비드 마란은 : 그것은 컴파일 아니에요.
그래서,도 해석된다.
그래서 컴파일 아니에요.
그러나 그것은 PHP와 같은 작은 수 있습니다.
하지만 여전히 다르다 몇 가지 눈에 띄는 방식으로 PHP,
방법 적어도 우리는 그것을 사용합니다.
그래?
>> 청중 : 그것은 클라이언트 측을 실행합니다.
>> 데이비드 마란 : 그것은 실행 클라이언트 측, 보통.
즉 실제로 구별이다 지금 우리를 위해 특성.
C는 의미에서 서버 쪽이었다 우리는 CS50의 IDE에서 모든 것을했다는 것을.
PHP는 지금까지왔다 서버 측 한,
그와 같이, 너무 interpreted-- 얻는다 하지 컴파일하지만 interpreted--
물론 CS50 IDE, 내부 클라우드에서 바로 서버 또는 서버.
>> 그러나 자바 스크립트, 심지어 당신하지만 당신은거야
PSET, 말, 그것을 쓰기 시작합니다 팔과 당신이있어 projects-- 어쩌면 마지막
에를 잘하는 것 CS50의 IDE 및 저장
CS50의 IDE, CS50 IDE 내 파일 와, 차례로, 클라우드 서버
이 호스트있어하는,하지 않을 수 있습니다 해석 또는 코드를 실행합니다.
오히려, 전송 될 것 브라우저에 이르기까지 변경되지 않은 형태.
그리고는 IE 될 것 크롬이나 파이어 폭스 나 사파리 또는
또는 실제로 해석대로 그것은, 위에서 아래로는, 왼쪽에서 오른쪽으로.
키 구별 그래서 오늘의 특성
자바 스크립트는 클라이언트 측 점이다 및 PHP, 예를 들면,
하고 서버 측있다.
자,이 흥미로운 의미를 가지고 같은, 지적 재산권에 대한
누가 실제로 코드를 볼 수 있습니다.
그리고 실제로, 당신은 갈 수 있습니다 그리고 웹은 참조 가장
누군가가 가지고있는 코드 자바 스크립트로 작성된.
때때로, 읽을 수있어 때때로 그것은 난독입니다.
그러나 때가되면 그에 대한 자세한.
>> 자바 스크립트 그래서, 잘 충분하다 슈퍼 유사한 구문에 C.
그리고 PHP와 같은 많은, 더 주요 기능은 없습니다.
당신은 쓰기를 시작하려면 자바 스크립트 코드, 오늘 살펴 보 겠지만,
당신은 그냥 쓰기 시작.
그러나 특히, 당신이 볼 수있다 웹 브라우저의 맥락에서 유용합니다.
그러나, 내 작은 일반적으로 earlier-- disclaimer--
당신이 점점 수 있다고했다 오늘 사용 자바 스크립트를 서버 측
Node.js라는 멋진 프레임 워크를 사용하여 CS50 자신의 일부 응용 프로그램이
로 작성됩니다.
실제로 Node.js.를 사용하여 50 확인
그러나 우리는 초점을 맞출거야 밖으로 여기에 자바 스크립트 클라이언트 측.
>> 그래서 여기에 PHP에서 조건의 집합입니다.
죄송합니다, 실제로 in--, 그 문은, 너무 정확합니다.
여기에 또한 세트입니다 자바 스크립트에서 조건.
구문 적, 그것은이다 C와 PHP와 동일합니다.
씨 부울의 표현이다 유사하게, 구문
C와 PHP 모두 동일합니다.
우리는 또한에 스위치가 동일 보면 자바 스크립트.
우리는 루프가 동일 구조,
while 루프, 루프 동안 않습니다.
>> 이 사람은 조금 다릅니다.
PHP는 각 구조에 대한했다 당신이 사용하고있을 수도
혹은, PSET 일곱에 사용합니다.
자바 스크립트의이 특별한 버전이 에 대한 당신은 말 그대로 뭔가를 말할 경우
객체의 변수 키에 대한 같은 어떤 말의 아주 간결한 방법입니다,
내가 object--를 얻었고, 한 경우 우리는거야 moment-- 다시 이들에 대해 이야기
나는 모든 반복 할 내부의 키 값 쌍,
나는 방법을 알아낼 필요가 없습니다 0, 1과 숫자 인덱스를,
둘, 셋.
>> 말 그대로이 말을 할 수 있습니다.
그리고 각각의 반복, 자바 스크립트 나 변수 키를 업데이트하기위한
다음 첫 번째 키, 다음 열쇠가 될 수 있습니다, 그 다음 키를 누른 다음 다음 키,
기타 등등.
그리고 처리하여 그 값에서 얻을 수 있습니다 자바 스크립트 객체로를 우리는 볼 수 있습니다
그것이 비록로 PHP의 연관 배열.
사실, 당신은 마지막으로 감싸 경우 연관 배열이 무엇인지 주위에 마음을
PHP에서, 당신은 지금과 같은 것은 생각할 수 자바 스크립트 객체와 동일합니다.
하지만 그 약간의 지나친 단순화.
>> 배열은 잘만큼, 동일한 모양 하나의 문자를 제외 PHP합니다.
여기에없는 한 가지가있다 우리는 PHP로 지난 주 참조했다는 것을.
무엇을 생략이야?
그래?
아니 달러 기호 없습니다.
그래서 우리는 다시이야 더 정상적인 세계 어디에
변수는 달러 기호가 없습니다.
하지만 당신은 그들을 접두사 할 일반적으로 VAR,와.
그리고 VAR 변수를 의미한다.
그리고 PHP와 같은 많은 느슨하게입니다 종류가있다 typed--,
숫자와 문자열이 있습니다 와 수레 등 forth--
자바 스크립트는 유사 유형이 있습니다.
그러나 느슨하게 그에 입력있어 우리 프로그래머을 지정할 필요가 없습니다.
우리는 알고 있어야합니다 그 종류가 존재한다.
>> 변수, meanwhile-- 여기 방법 우리는 "안녕하세요, 세계"선언 있습니다
문자열로.
그것은 동일의주의 PHP 있지만 달러 기호입니다.
그리고이 일이 우리가 할 것이다있다 더 오늘보고 시작,
당신은 개체가된다 키와 값.
그리고 당신은 시도 할 경우 마지막 week--에서 추론하기
구문은 약간 다릅니다.
하지만 약간 정신이 얼마나 많은 check-- 키는이 객체가이 나타 납니까?
그래서 네 참조하십시오.
나는 두 가지를 참조하십시오.
>> 그래서 실제로 두 가지입니다.
그래서이 모음입니다 두 개의 키 - 값 쌍의.
키는 값이 FB 인 상징이다.
키는 값이 101.53 인 가격입니다.
그래서 사람들은 두 개의 키 - 값 쌍입니다.
그리고, PHP-- 기억이 다시입니다 그저 문법 차이.
그것은 모두가 아니다 그 지적 흥미.
PHP는이 같은를 작성했을 수 있습니다 follows-- 인용 등의 점은 같습니다.
그리고 대괄호 이러한 변경.
그리고 그때로 변경 인용 된 단어 "가격."
그리고 나는 콜론을 사용하지 마십시오.
나는 지난 주에 무엇 사용 했는가?
그래, 등호 펑키 표기를 화살표.
>> 그리고 나는 여기에 같은 일을했다.
여기에 같은 일이.
그리고 그게 다야.
이 있지 않은 경우 그래서 괜찮아요 정말 기억에 침몰 단지
아직이 정말 때문에 지적 재미.
그냥 구문의 차이를합니다.
그러나 아이디어는 동일하다.
이 변수의 내부 자바 스크립트에서 인용
키 - 값 쌍의 컬렉션이다 하나는, 하나의 심볼 인
가격입니다.
그리고 나는 그 값을 얻을 수 있습니다 다음 구문.
그냥 PHP에서, 내가 할 수있는 등 하자 그때 엔 뭔가를
날이 상자가 조금 더 큰합니다.
그냥 PHP에서, 내가 할 수있는 등 젠장, 오이 항아리합니다.
어서.
>> 그냥 PHP-- 확인, 우리는 거 야 다만 발표자 노트를 사용합니다.
그냥 PHP에서 같이, 나는 할 수 [ "상징"] $ 인용 $ 시세 수행
이 날 얻을 것이다 의 값 "기호."
자바 스크립트, 그것은 될 것 동일, 난 그냥이 작업을 수행 할 수있다.
의 유일한 실종은 달러 기호입니다.
>> 그래서 잘 정도로, 다음, 거기에 모든 그 많은 새 구문.
그래서 우리가 초점을 맞출 것을 오늘, 정말입니다 아이디어와 응용 프로그램의 일부.
그리고 최초의 응용 프로그램 당신이 수도
당신이 PSET에 뛰어 경우 본 일곱은 이미 구문입니다.
그래서 당신은했습니다 PSET 일곱에, 경우 본 여부를 아직 알,
우리가 제공 파일이 있다는 것을 알고있다 당신은 config.json-- 자바 스크립트를 호출
표기법 객체.
왜?
우리는 당신을 제공 할 수 있기를 원 일부 키 - 값 쌍을 가진 템플릿입니다.
우리는 당신에게 목록을 제공 할 수 있기를 원 호스트 서버의 이름입니다.
우리는 당신을주고 싶어 사용자 이름에 대한 자리 표시 자
및 비밀번호에 대한 자리 표시 자.
당신이 표시되지 않는 경우 이 아직 걱정하지.
PSET 일곱이에 대한 자세한 [? 사양. ?] 그리고,
분명히, 우리는 당신을 원해요 에-DOS를 입력합니다
당신이에 로그인 할 때 때문에 당신의 각 CS50 IDE,
자신의 사용자 이름과 암호가 있습니다.
>> 그래서 우리는 대여섯 사용했습니다 수 이상의 다른 파일 형식을 지원합니다.
우리는 .txt 파일을 사용할 수 있었다.
우리는 CSV 파일을 사용할 수 있습니다.
우리는 사용했습니다 수 INI 파일, XML 파일,
왕창 더 약어가 당신은 이제까지 들어 본 적이 없습니다.
그것은 임의의 종류의 하루의 끝에서.
그러나 요즘 최고 인기있는 텍스트이다 형식 JSON-- 자바 스크립트 객체라고
Notation-- 그는 다음과 같습니다.
그것은 조금 애매이다 하지만 패턴을 알 수 있습니다.
당신은 오픈 곱슬 시작 중괄호, 당신은 동일로 끝납니다.
의 내부에서 그 무언가이다.
그것은 키 - 값 쌍입니다.
그래서이 난 것을 목적으로한다 여기에 화면에보고
즉, 하나의 값을 갖는 하나의 키를 가지고 있습니다.
그리고 단지를 기반으로 추론 이전 패턴, 열쇠는 여기에 무엇입니까?
데이터베이스, 일에 콜론의 왼쪽.
>> 현재 값은 우연히 여러 줄이 시간.
그러나 값은 둥근 시작 중괄호와 중괄호로 끝납니다.
그래서 당신이 제안하는 것입니다 데이터베이스의 값의 타입?
사전 또는, 단지 더 간결, 객체입니다.
권리?
이것은 데이터 구조의 일종 그 자체 내에서 다른 구조를 사용할 수 있습니다.
이 모든 것은 우리가있어 경우에 따라서 object-- 및 개체를 호출
pairs-- 키 - 값의 단지 무리입니다 데이터베이스 자체의 값을 목적으로한다.
데이터베이스의 값은 전체 무리가 있습니다 키 값 쌍의 첫 번째 어떤의
이다 호스트는, 다음 다음, 이름을 사용자 이름, 암호 다음,
그 각각의 값은, 한편, 그것의 따옴표 그냥 지루한 문자열입니다.
>> 그래서이없는 경우에도 아직 슈퍼 분명,
이 단지는 것을 알고있다 표준, 상당히 지루한 방법
표준 포맷으로 데이터를 저장하는 단계를 포함한다.
그러나 일반적인 실수 당신에게 심지어 PSET 일곱에 만들 수 있습니다,
작은 바보 같은 일이, 당신의 경우처럼 실수가 쉼표를 생략합니다.
즉, 파일을 초래할 것 반드시 읽을 수없는.
당신은 실수로 같은 일을 생략하면 따옴표, 그것을 읽을 수 없을거야.
그래서 꽤 nitpicky 파일 형식이다, 하지만 슈퍼 흔한 하나입니다.
그리고 우리는, 비록 그것을 사용하는 일이 당신은 자바 스크립트를 달리 사용하지 않는,
PSET 일곱에.
>> 괜찮아.
그래서이 사진을 기억한다.
우리는, HTML에서, 이야기 코드는 다음과 같을 수 있습니다.
이 하이퍼 텍스트 마크 업 언어 [들림] 단지에 대한 "안녕하세요, 세계."
그러나 우리가 제안 다시 잠시 도움이된다면 그,
당신은 생각을 시작 할 수 있습니다 이 이미 나무 약.
사실, 들여 쓰기가 우리 가독성을 위하여 만 사용
또는 스타일의 술에 대한 왼쪽 수있는 종류의
이 나무,을로 번역 특별한 루트 노드가 그 우리는거야
일반적으로, 문서라고하는 아래 루트 HTML 요소 또는 태그, HTML은,
이는 다음 두 가지가 있습니다 어린이, 머리와 몸.
>> 그리고 다시, 머리는 제목이 있습니다.
및 제목은 텍스트 값을 갖는다.
본체와 마찬가지로 텍스트 값을 갖는다.
당신이 편안하게 말을하는지 경우에 따라서 그래, 당신은이 HTML을 수
과 같은 그림을 그려 이, 오른쪽
좋은 정신 모델은 지금 때문에 우리는 자바 스크립트를 가지고, 프로그래밍
언어 그 브라우저가 할 수있는 실행하고 당신을 위해 해석,
그것은 무엇을 밝혀 우리는 코드에서 할에 대한 것
이 조작을 시작한다 메모리에 트리 구조.
우리는 만들 필요가 없습니다 메모리에 트리.
우리는 일종의 할 필요가 없습니다 PSET 개의 스타일의 데이터 구조
복잡성.
잘 충분히,시 브라우저, 아래에 HTML 탑을 해석,
왼쪽 또는 오른쪽으로, 문자 그대로에 가고 우리에게 포인터에 해당하는 손
무료로 그 전체 트리에.
그것은 하드 모든 작업을 수행합니다.
즉 무엇 모질라, 애플 다른 사람들이 우리를 위해 일했다.
>> 그리고 자바 스크립트와 함께 우리는 가고있다 제어 할 수 변경 및 수행
흥미로운 것들 그 나무, 그렇지 않으면 알려진
DOM 또는 문서 객체 모델로.
어떤 일 가지?
글쎄, 그것은 밝혀 자바 스크립트에서, 거기에
이 세탁 목록 일어날 수있는 이벤트.
그리고 우리는 정말 사용하지 않은 단어를 주 제로 PSET 이후
제로 우리는 스크래치에 대해 이야기 할 때.
당신의 대부분은 아마 사용하지 않은 스크래치 프로젝트의 이벤트.
하지만 당신은 기억 할 수 간단한 마르코 폴로
예를 들어, 여기서 우리는 두 가지가 있었다 스프라이트는, 그중 하나 마르코 말했다.
누구를 다음 청취시의 다른 그 이벤트를 듣고, 폴로 말했다.
그렇지 않은 경우, 부담없이 멀리 뒤로 돌아 본다.
>> 그러나 이것은 단지이다 말, 당신은 종류의 수
이들의 이름에서 유추 일, 자바 스크립트, 그것은 밝혀,
우리에게들을 수있는 방법을 제공하는 것입니다 마우스 추락 또는 마우스 올라가고에 대한
또는 키 아래 또는 키 것 올라가고 또는 onsubmit onSelect를
또는 뭔가를 onresizing.
즉, 물리적 인 행동 인간은 브라우저 걸릴 수 있습니다
매일 할 것을, 당신은 쓸 수 있습니다 그에 대한 코드는 그 이벤트를 수신
다음 적절한 일을한다.
>> 예를 들어, Google지도를 사용하는 경우, 를 클릭하고 이동하면 어떻게됩니까
마우스, 통상적?
당신은 클릭하고 드래그하면?
그래?
정확히.
지도는 이동하기 시작합니다.
그래서 당신은 종류의 무엇을 볼 수 있습니다 여기, 저기거야.
어떻게 구글은 그 구현 하는가?
음, 아마도 그들은있어 이 이벤트의 몇 가지를 사용하여
청취자, 하나의 그 , 마우스를 수신 말한다
때 사용자가 물리적으로 너무 down-- 자신의 트랙 패드 또는 자신의 마우스를 밀어
아래로.
그리고 우리가 찾고있는 운동과 같은
또는 몇몇 다른 이벤트 그 우리가 드래그를 캡처 할 수 있습니다.
그리고 사실, 드래그이 유사하게하다 점은 가능한 옵션의 점 목록을 점.
>> 그래서이 강력한 될 것입니다 방법은 사용자에게 응답을 시작할
심지어 그 또는 그녀가 실제로 클릭하기 전에 명시 적으로 뭔가 같이 제출합니다.
그러나 우리는 소개거야 몇 가지 항목이 얻을 수 있습니다.
하지만 먼저,하자 이행 일부 실제 코드.
그래서 나는 갈거야 앞서 및 열 DOM-0,
이는 매우 간단한 예입니다 여기에 단순히 확대하는 경우 그
나를 여기이 입력을 가지고있다.
내가 가서 입력거야 내 이름은 "다윗"하고 제출을 클릭합니다.
>> 그리고,이기는하지만 일종의 싸게, 나는 라고 그 팝업이 메시지를
"안녕하세요, 데이빗!"
그래서이 가지입니다 같은 우리의 "안녕, 세계"
우리가 잠시 다시 C에서했던 있고 심지어 PHP에서 동적으로했습니다 때문에
내 이름을 출력한다.
여기 누군가 다른 사람의 이름을 할 수 있습니다.
간단히 말해서 나는이를하는 변경 될 수 있습니다 같은, 한나, 제출을 클릭합니다.
그리고 실제로, 작은 팝업으로 변경됩니다.
>> 이제, 팝업는 하나 웹의 가장 학대 기능을 제공합니다.
그리고 사실, 다시 하루 팝업 차단
유행에 와서 당신 때문에 일부 website--로 갈 것
아마도 의심 place-- 그 갑자기 다음 것
화면을 peppering 시작 팝업의 전체 무리와 함께.
그리고이 기능은 팝업 사용자의 앞에 창
특히되지 않았습니다 인류에 의해 잘 받았습니다.
당신이 볼 이유 그래서입니다 이는 일을 방지
이는 단지이 모든 것은 추한 수 있습니다.
그래서 우리는이 필요 해요 사용자에게 메시지를 표시하는 더 좋은 방법.
하지만 지금은, 그 작동하는 것 같다.
그러니 그냥 직관적으로, 무엇을 여기에서 일어나고있는 것 같다?
내가 가서 제출을 클릭하고, 무언가는 분명히 일어나고.
그러나 발생하지 무슨 그런 일이 않았다 지난 주에 내가 제출을 클릭 언제?
화면에 어떤 일이 발생하지 않았다?
죄송합니다?
새로 고침.
URL은 전혀 변하지 않았다.
나는,이 DOM-0이라고 말했다 나는 DOM-0에서 여전히 해요.
일반적으로, 우리는 몇 가지 다른 변경 얻을 것 register.php 등 같은 URL.
>> 그러나 심지어는 해고 할 때 확인을 클릭하여이 일을,
URL 것을 알 수 유지 완전히 넣어.
그리고, 사실, 좀 해요 경우 회의 나 크롬을 열 수 있습니다.
내가 네트워크 탭을 열어 보자.
그리고이 순간에 빈의 알 수 있습니다.
내가 가서 마리아을 다시 제출 보자.
어떠한 네트워크 트래픽이 없습니다.
그래서 더 HTTP가 없습니다.
>> 그래서 실제로, 나는 소스 코드를 보면 이 항아리 날이 창을 닫으하자
소스보기로 이동합니다.
흥미.
일부있을 것 같습니다 새로운 태그, 그 (것)들의 사이에서 스크립트.
그럼 CS50 내에서 살펴 보자 IDE I은 정확하게 사용자에게 전송 무엇.
>> 그래서 여기에하자 is-- HTML 만에 초점을 맞 춥니 다.
다음은 DOM-0.html의 하단입니다.
그리고이 제목을 가지고 있음을 알 수, 머리 태그, body 태그, 폼 태그.
그러나 당신에게 점프 다른 당신은 적이 없다 특히
자바 스크립트 자신을 작성합니다.
내가 조금 이동하자 여기에서 오른쪽으로.
내가 입력을 가지고있어, 또 다른 입력을 제출합니다.
나는 새로운 종류 인 ID를 가지고있다.
그러나 우리는 CSS로이를 확인했다.
또 어떤 것은 확실히 새로운?
그래?
반갑습니다.
>> 괜찮아.
그래서 onsubmit 말한다 곳, 다음과 같다 무엇을 알 수 있습니다.
이 속성입니다 HTML 명칭에.
이 값은 여기 인용 된 문자열입니다.
그리고이 조금 보인다 언뜻 이상한.
그것은 HTML이 아니다.
그것은 CSS 아니다.
당신이 생각 하듯이, 자바 스크립트입니다.
그래서이 내장 것 같다 웹 페이지는 인사라는 기능입니다.
그리고 나는 단지 추론 해요 이 단어이기 때문에, 인사.
그것은 열린 괄호 있어요 가까운 괄호, 세미콜론.
, C 함수처럼 보이는 PHP 함수처럼 보인다.
>> 그리고 사실, 그것은 것 자바 스크립트 기능을합니다.
그럼 false를 반환하고 있습니다.
우리는 다시 올 것이다 단지 순간에 그.
그러나 여기서이 함수는 정의?
그럼 나를 위로 스크롤 할 수 파일의 상단에.
그리고 그것은 긴 줄​​ 비록, 이는 상대적으로 간단하다.
나 여기 축소하자 이 네 가지 라인에 초점을 맞 춥니 다.
>> 자바 스크립트에 따라서 단지 PHP와 같은, 당신 만
말 그대로, 단어 "기능" 함수 이름,
다음 어떤 괄호 이 경우 인수를 arguments-- 없습니다.
그리고 어떤 반환 형식이 없다 자바 스크립트에서, 단지 PHP를 좋아한다.
그래서 C.보다 약간 느슨한입니다 열기 중괄호, 가까운 중괄호.
자바 스크립트에 내장 된 function--이다 권장되지 function--
하지만 함수 호출 경보 인생에서 누구의 유일한 목적
꽤 추한를 당겨하는 것입니다 우리가 조금 전에 보았던하라는 메시지를 표시합니다.
>> 지금이 입 가지입니다.
여기 무슨 일이야?
그럼으로 시작하자 여기에 모든 것을 강조.
즉, 경고하기 위해 동일한 인수입니다.
그리고 무슨 일이야?
이것은 단지 문자열처럼 보인다.
그리고 PHP는 달리와 달리 밝혀 C, 그것은 자바 스크립트에 문제가되지 않습니다
당신이 작은 따옴표 또는 큰 따옴표 경우.
그들은 동등한 수 있습니다.
그리고 솔직히, 그것은 단지 요즘 인기
항상에 자바 스크립트 프로그래머 어떤 이유로 작은 따옴표를 사용합니다.
그것은 할 단지 것입니다.
그러나 우리는뿐만 아니라, 큰 따옴표를 사용할 수 있습니다.
>> 그래서 플러스는 새로운 캐릭터입니다.
하지만 당신의 그 한 적이있는 사람 이 전에, 플러스 무엇을 의미합니까?
그래.
연결할.
그래서 우리는 PHP에서 이것을 보았다.
단지 점은있다 PHP에서 연산자 그
두 개의 문자열을 연결합니다.
C는 목에 통증이 작업을 수행하는 것이 었습니다.
했다 PSET 여섯에서 리콜 목에 특별한 통증,
당신이 사용하는 것 strcat와 같은
메모리를 할당 한 후 스택 또는 힙에.
당신은 남이했다 두 문자열을 연결합니다.
자바 스크립트, 그것은 매우 간단합니다.
그냥 그들 사이 더하기 연산자를 사용합니다.
>> 그래서 복잡한 보이는 일이 될 것 같다
때문에 끝에 이 전체 문자열, 나는 단지
느낌표에 연결할.
무엇을하고 팝업 그래서 경우 "안녕하세요, 데이비드", "안녕하세요, 한나,"
"안녕하세요, 마리아"등, 명확하게 두 사이에서 그 중간 일
흑자는 나에게 무엇에 대한 액세스 권한을 부여해야 하는가?
무엇 확실히 거기있어?
그래.
그래서 나는 여기 척합니다 자신의 이름을 대답, 맞죠?
그래서 자신의 이름이 마지막에 팝업 결과. 그래서 이것은 무엇을 의미합니까?
글쎄, 난 그 초기에 제안 DOM 소위 그림
이 특별한 루트 요소가 길 위에 문서라고합니다.
그리고 지금, 그이 일어나고, 밝혀 특별한 전역 변수가 될
자바 스크립트에서, 인에 내장 유용한 기능의 전체 무리.
유용한 기능이 중 능력은 모든 자손 노드에서 얻을 수 있습니다.
그 정사각형 또는 직사각형 또는 타원 이다는 말하자면, 트리의 노드.
>> 그래서 내장 밝혀 자바 스크립트의 문서 객체
그렇지 알려진 함수이고 방법은, 그는 getElementById라고.
호출하는 구문 자바 스크립트 함수
그는 객체 나의 내부 변수는 도트 표기법입니다.
그리고 우리는 C에서 이것을 보았다 무엇 구조체 구문.
당신은, 가지, PSET 일곱에서 볼 종류의, 당신은 CS50 :: 쿼리를 볼 때.
PHP에서 대장 대장은 또 다른입니다 의 함수를 호출하는 방법
일부 개체의 내부.
>> 하지만 지금은 자바 스크립트에 대한, 그것은 단지 점입니다.
그리고이 기능, 잘 정도로, 가지
이 ID로 요소를 얻을 does-- 것을 말한다.
요소는 또 다른 이름입니다 DOM에 태그 또는 노드.
그리고 ID "이름"에 의해 요소를 얻을 내 HTML의 여기이 항아리 의미한다.
이 HTML에 기초하여, 어떤 노드 또는 어떤 HTML 태그는 내가 오전
프로그래밍 방식으로 손으로 될 것 document.getElementById를 호출하여?
>> 네, 정확히.
내가 입력을받을거야 ID가이 요소는 "이름"입니다.
그래서 구체적으로, 당신은 할 수 이 함수의 생각,
제공하는 방법으로, getElementById 특정 노드에 대한 포인터를 백업
트리에서.
우리는이 그려하지 않은 트리 있지만 방법
의 액세스를 얻기 사각형 또는 직사각형
고유의 ID를 통해 그것을 확인해서.
>> 지금, 왜이 유용합니다?
글쎄, 그것은 밝혀 당신이받은 일단 그
에서 직사각형 노드, 사진, 그것의 내부 노드,
차례의 전체 무리가 있습니다 properties-- 키 - 값 쌍
또는 값이라고 하나의 데이터.
그래서 말 그대로, 그것은 종류의 입이 모든 일을 설명한다.
그러나 결국, 모든이가하는 당신을 줄입니다
사용자가에 입력 한 문자열 이 계층 적 방식으로.
하지만 난 싫어 이러한 것들의 커플.
또는 오히려, 약간의 호기심은 여전히​​있다.
그 모든 일을 보였다.
왜 내가 돌아 생각 인사를 호출 한 후 거짓?
이 것을, 조금 못생긴 외모 나는 두 개의 문이있다
세미콜론으로 구분.
추측을 가져 가라.
내가 false를 돌려 분리 한 경우, 어떤 단지 본능적으로 일어날 수 있는가?
죄송합니다, 다시 말?
>> 윈도우의 무리를 엽니 다.
그래서 잠재적으로 아마 뭔가 그 일어날 것 같은.
그 밖의 무엇?
요청 곳을 제출 할 수 있음?
같은 페이지로 이동합니다.
그래서, 실제로, 그 해당의 여기에 답변을 가까이,
심지어는 달리,하지만 과거에, 난 안했습니다
action 속성 지정, 이는 일반적으로 우리가해야한다.
기본적으로 거기에 밝혀졌습니다. 이 동작을 지정하지 않으면,
이 견적을 말처럼, 맺다 또는 파일 자체의 이름,
이 경우에하는 것 DOM-0.html처럼.
그것은 바로 가지, 추론 것 또는 오히려 암시.
>> 그리고 이렇게하지 ​​그렇다면, 이제 알 수 있습니다.
날이를 저장할 수 있습니다.
그리고 거짓 수익을 삭제했습니다.
날이 다시 가자 예과 힘을 다시로드합니다.
그리고 당신은 내가 제안 볼 수도 이 CS50에 시간의 무리를 토론한다.
아무것도 이제까지 행동이라면 펑키와 예상대로 브라우저, 행동 아니에요
자주 당신은 유지하는 것이 좋습니다 Shift 키를 누른 다음 새로 고침을 클릭합니다.
즉 다시로드 모든 파일을 강제로 그리고 브라우저의 로컬 캐시를 사용하지
또는 복사 지금, 그래서 내가 가서 보자 내 관리자, 네트워크 탭을 엽니 다.
나는 클릭거야 로그인을하기 때문에 유지 나는
이 행을 삭제하지 않으 나는 다른 곳에서 털어 내게 일단.
>> 내가 여기 가서 보자 앤디의 유형, 제출을 클릭합니다.
괜찮아.
예상대로 보인다.
그것은 "안녕하세요, 앤디."라고
내가 확인을 클릭하자.
흥미.
페이지가 변경된 것을 알 수 있습니다 일본어 페이지로이기는하지만.
변경된의 URL 종류를 알 수 있습니다.
그것은 물음표를 추가 이는 보통 지표
것을 우리는 뭔가를 제출했습니다.
그리고 하단에, 더 명시 적으로,
여기서 실제의 HTTP 요청은, (200)의 응답을 얻었다 것을
여기에 날 다시 가져왔다.
>> 그래서이없는 무엇이다 우리는 바로 싶지?
에 내가 원하는하지 않기 때문에 전체 페이지를 다시로드합니다.
내가 대신 반환 싶어 그래서 단락에 거짓
브라우저의 기본 동작하는 페이지를 제출, 물론이었다.
>> 그럼 살펴 보자 소폭 더 나은 예.
이 DOM 버전입니다.
다음을 알 수 있습니다.
당신이 grok 수없는 경우는 괜찮습니다 코드 행의 모든​​.
그러나 근본적으로 다른 것입니다 이 구현에 대한?
나는 그것이 동작합니다 규정합니다 같은, 같은 일을.
나는 분명히 다르게 무슨 짓을 한거야?
그래?
>> 청중 : [들림].
데이비드 마란 : 그래.
그래서 함수가 정의되어 differently-- 형태 결석 즉,,
거기 라인 전하는 바에 나 오히려, 라인 8-- 더 이상 없다
내가 onsubmit 속성을 가지고 않습니다.
앞의 예에서,이 있었다.
그리고 말 그대로 여기에 코드를 썼다.
그리고 나는 false를 돌려 말했다.
그리고 그것은 문질러하지 않은 경우 당신이 아직 잘못된 방향으로,
그것은에 시작해야하는 한 HTML에서와 같이, 같은,
우리가 시작했을 때를 공동 어울려 스타일 속성에 CSS로,
그냥 조금 얻기 시작 지저분하거나 조금 잘못을 느낍니다.
>> 마찬가지로 여기에, 경우 당신은, HTML을 복용 시작
다음 자동으로 일부 자바 스크립트 코드를 풍덩
인용 된 문자열의 중간에, 그것은이다 아주 유지 보수가 될 수 없습니다.
권리?
그것은 처음도 분명 아니다 자바 스크립트 코드가 어디에 배치합니다.
그래서는 정말 좋은 것 잘 디자인의 원리
이제 우리의 HTML을 완전히 유지하자 우리의 자바 스크립트에서 분리합니다.
>> 그래서 우리가했습니다 무엇을, 그렇게 여기에 수행 following--입니다
우리는 간단하게 만 마크 업을 위해 HTML을 사용합니다.
그리고 버전이 하나, 모든 내가 가지고는 고유 한 ID를 가진 형태이다.
그리고 여기에 아래로 난을 활용 해요 자바 스크립트의 특별한 기능
이에 나는 무엇을 할 수 있습니다 익명 함수라고합니다.
그래서 내가 전화를하면 밝혀 '데모'의 중요 document.getElementById
그것은 나에게 포인터를 제공 같아요 내 트리에서이 노드, 형태 요소,
말하자면.
>> 지금, 난 그냥 알고 HTML의 조금을 알고
지금 우리는 일부 온라인을 읽은 것 기준, 즉 폼 요소 지원
이벤트 listeners--의 전체 무리 바꾸어 말하면, 사건의 세탁 목록
우리가 조금 전에 보았던 청취자.
나는 설명서를 읽고 알고 그 onsubmit는 유효한 이벤트
양식 요소에 대한 청취자입니다.
>> 그래서 내가 알고 한 번, 내가 어떻게하는 것이 안전합니다
해당 노드를 얻을 수 following-- 나무에서, 형태 요소,
및 소위 액세스 할 onsubmit 속성입니다.
그래서 점은 의미 이것은 속성입니다
그것의 내부에 특수 값 등을들 수있다.
그리고 어떤 데이터 유형 나는 오전 할당, 분명히,
인 onsubmit하기 내부 효과적으로 변수
트리 노드의?
그것은 그 구조체의 내부 필드입니다.
데이터 유형은 무엇입니까?
>> 기능, 그래.
그래서 PHP는이이 밝혀졌습니다.
심지어 우리하지만 그것에 대해 말하지 않았다,
C는 함수 포인터,이 통과 기능을 할당 할 수있는 능력
변수 '값 자체로.
그리고 우리는하지 않을거야 C로 다시 회귀하는
하지만 지금은, 그것은 밝혀 여기서 우측,
그것은 조금 보이는 경우에도 펑키,이 수단, 헤이 브라우저,
나에게 기능을 제공합니다.
난 포기 귀찮게하지 않을거야 이 이름을 말 그대로이기 때문에
현실을 부르 자 할당하는 것 이 함수의 주소
바로 onsubmit합니다.
즉, 브라우저, 당신은 필요가 없습니다 이 기능이라고 알고 있습니다.
당신은 알 필요가 어디 메모리입니다.
그리고 그것은 단지로 충분 이 등호가
와 같이,이 이름을 지정 귀찮게하지 foo는 또는 인사 또는 다른 단어입니다.
그리고 지금이 바로 문체 것입니다.
나는이 중괄호를 움직일 수 짓이야 sorry-- 다음 행으로
같은 우리는 일반적으로 CS50을한다.
그러나 자바 스크립트에서는,이야 실제로 문체 일반
바로 중괄호를 유지, 그 첫 번째 줄에 첫 번째.
>> 그러나 이하, 거기에 아무것도 흥미 롭군요.
즉, 열린 중괄호 단지 내 기능의 시작을 구분한다.
이 기능은 지금 동일, 나는했습니다 제외
반환 거짓을 포함 이 함수의 내부.
이 out--집니다 때문에 당신은 단지 것
읽는이를 알고 documentation--
당신이 기능을 할당하는 경우 그 onsubmit 핸들러가 false를 반환하려면
브라우저는 알고 동의 서버에 양식을 제출하지.
이 true를 반환하면, 그것은 제출 우리가 볼 수 이유로 서버에 그
단지 순간에 유용하다.
>> 그리고 세미콜론 후 중괄호가 단지
내가 함수를 정의 끝났어요 의미한다.
당신은 곧 전화를 알고 당신은 제출을들을 수있다.
괜찮아.
이것은 여전히​​ 논란의 여지 종류의 추악한이다.
그래서 우리는 더 무엇을 할 수 있습니까?
>> 글쎄, 그건 다음에 밝혀 last--입니다 버전이,
우리는이에 그냥 눈에거야.
만들기의 위험에 그것은 이보다, 그것 밝혀
도서관에가 있다는 것을 세계는 jQuery를 불렀다.
그리고 jQuery를 슈퍼입니다 인기있는 자바 스크립트 라이브러리
그 대부분 정도로 인기 어떤은 그렇지 않은 JavaScript--
사람들이 혼동하기에 드문 자바 스크립트와 jQuery를.
왜?
자바 스크립트 자체는 매우있다 things-- 수행하는 자세한 방법
document.getElementById를, dadadadadada.
당신은 매우를 가​​진 끝 코드의 긴 줄.
>> 그래서 존 잔유라는 이름의 동료, 누가 실제로 시작 작동
요즘까지 나왔다 이 라이브러리 년
전 그 많은 사람들이 기여 그 변경 jQuery를 호출합니다
다음과 같은 방법으로 구.
그리고 그냥 그렇게 당신은 본 적이 당신은 변함없이 것이기 때문에
일 경우이 참조 웹 기반의 최종 프로젝트,
이에 해당하는 방법이 될 것입니다 사용하여 동일한 기능을 구현
이 특별한 라이브러리.
>> 지금, 오히려 애 태우는보다 떨어져 전체의 그것,
그냥 몇 가지 패턴을 살펴 보자.
이 구문이 나타납니다 얼마나 많은 익명 함수
또는 무명 기능 또는 일명 람다 함수?
두, 오른쪽?
그리고 당신도 알다시피, 그 경우에도 당신이 슈퍼 편안하지 않은
그냥 사실에 의해 말한다 기능 ()을 두 번 누릅니다.
>> 그리고 그것은 밝혀 어떤이 코드가 doing--입니다
우리는 온라인 참고 문헌을 참조 할 것이다, 궁극적으로,이 몇 가지 도움.
이것은 단지 의미 때 문서는 준비
가서 등록 다음 함수
HTML에 대한 제출 핸들러로 그의 독특한 아이디어 데모입니다 요소입니다.
그리고, 그렇게되면, 코드의 두 라인을 호출합니다.
그리고 이것은, 더 비극적이다 false를 돌려 말하는 자세한 방법.
그리고 우리는 이유만으로이 언급 이 온라인과 같은 코드를 볼 수 있습니다.
그리고 그것은에 의해 daunted 할 것도 없다.
오히려, 무슨 일이 있다고 염두에 두어야 자바 스크립트에 공통 될 것
이 패러다임이다.
우리가 지금 보여 이유 그래서입니다.
괜찮아.
그래서 너무 주거없이 그 구문에 대한 많은,
질문에 거기있다 이러한 사례 또는 아이디어 지금까지?
괜찮아.
그럼 유용 뭔가를이를 사용하자.
그냥 안부 웹 페이지 만들기 그래서 그래서, 모두 흥미없는
underwhelm하지.
이 사람은, 아름다운 않을거야 하지만 유용한 일을 할 것입니다.
내 디렉토리로 돌아 가자 여기 열고, 폼 0.html, 말한다.
>> 그래서이 신입생 가정하자 교내 스포츠 등록 페이지
어떤 CSS 또는 디자인의 어떤 의미없이.
그리고 앞서 가고 싶어하고 암호로 등록을 여기에.
그리고 조건에 동의거야 약관 및 등록을 클릭합니다.
이제 웹 사이트는 당신이 말한다, " 등록! (글쎄, 정말.) "
이 일처럼 즉, 보이지만 내가 가서 다시로드를 강제 할 수 있습니다.
>> 그리고 나를 아니, 당신은하지 않습니다, 가정 해 봅시다 내 실제 이메일 주소가 필요합니다.
아니면 우리는 단지 거기에 메일을 말할 것이다.
비밀번호는 12345, 같은 될 것입니다.
그리고, 내가 해요 그냥 있기 때문에 바보는, 지금은 123456789입니다.
그리고 난 당신의 확인란을 선택하지 않을거야.
>> 흠.
괜찮아.
그래서 여러 기회를있다 여기에 개선.
그리고 당신은 알고있다, 또는 PSET에서 볼 수 당신이 code-- 쓸 수 일곱,
당신은 작성해야 PHP--의 코드 방어
사용자의 이러한 종류에 대하여 오류가 명확하게 사용자 때문에
협력 않았습니다.
그리고 그 또는 그녀는 당신에게 주어진하지 않은 모든 당신이 원하는 또는 형식 값
당신이 그들을 원했다 그.
그래서 당신은 PSET 일곱에 볼 수 있습니다 그 우리는 확실히 몇 가지가있을 수
말을 조건으로하는 경우 이메일 주소의 경우
username@something.edu는 아니다 우리는 단지 수
죄송합니다 말을하고 사용자에게 사과 많은, 당신은 PSET 일곱에있을 수있다.
아니면 그 상자를 선택하지 않은 경우, PHP에서 밝혀, 당신은 그것을 감지 할 수 있습니다,
너무.
그리고 확실히 암호의 경우 register.php과 일치하지 않습니다
PSET 일곱을 위해, 당신은 그것을 감지 할 수 있습니다.
하지만 그의 고통 그의 목 지금은 요청
우리는 서버에 모든 방법을 이동합니다.
사용자에게 오류를 통보한다.
적어도 당신은 사용하지 않는 일부 애호가 기술,
이제 그들은 다시 화살표를 클릭합니다.
이처럼 좋은하지 않을까요 웹 사이트의 많은 오늘날,
당신은 더 많은 바로이 있다면 피드백, 즉시?
>> 즉, 저 버전으로 가자 더 예뻐을 없을 것입니다 하나.
하지만이 기능을 가지고있다.
마란, 12345, 123456789,하지 , 등록 확인란을 선택하는 것.
비밀번호가 일치하지 않습니다.
그래서이 팝업 ugly-- 경우에도 우리는 결국이를 대체 할 수
부트 스트랩 같은과, 당신은 PSET 일곱에서 확인할 수 있습니다
내가 한 매우 인기있는 library--입니다 암호가 일치하지 않음을 감지합니다.
괜찮아.
음, 나 사용자로 그 문제를 해결 할 수 있습니다.
내가 가서 12345, 12345을 가정 해 봅시다.
아직 계약을 확인하지.
당신은에 동의해야합니다 이용 약관.
왜?
>> 우리는 이미 상정 한 경우 방법이 있는지,
우리는 당신을 요구 한 에러를 검출하기 PSET 일곱
이 같은 조건 서버 측, 왜해야
또한 자바 스크립트에서이 일을 귀찮게?
인수는 무엇인가 추가 찬성 무엇
당신은 한적으로 볼 수에 대한 것 추가 복잡성이있다.
>> 어쩌면 더 상승은 없다.
그것은 무엇을 할 수 있을까?
청중 : [들림].
데이비드 마란 : 아, 재미.
잠재적 인 공격.
그래서 물론, 당신이 처리하지 않는 경우 잘못된 사용자 입력 큰 것을,
어쩌면 그것은 경우 모든 낫다 당신의 서버에 도달하지 않습니다.
내가 거기에 다시 밀어 것이며, 말하자면, 당신은 아마해야
이러한 문제를 모두 해결.
그러나 공정입니다.
그 밖의 무엇?
>> 청중 : [들림].
>> 데이비드 마란 : 그래.
우리가 전에 말했듯이 코드는,이다 클라이언트 측에서 해석.
이 서버를 귀찮게하지 않습니다, 어떤 의미가되지 않습니다
서버의 부하 또는 용량에 영향을.
그리고 지금, 조금 오래된 나를 위해, 이 의미있는 영향을 미치지 않습니다
내가 지금하는 사용자가 있기 때문이다.
>> 하지만 당신은 어떤 있다면 알맞은 크기의 웹 사이트,
특히 가장 큰, 페이스 북과 같은, 더 사람들을 유지할 수 있습니다
서버의 더 나은 서버 때문에, 물론,
RAM이 한정된 양을 가지고, 기가 헤르츠의 유한 수
사물의 유한 수 이는 단위 시간당 수행 할 수있다.
더 많은 사람들의가 있다면 세계는, 서버를 타격
실수로 로그인 잘못, 그냥 잘 경우
서버 떨어져 그 부하를 유지할 수 있습니다.
게다가, 특히 모바일 혹시했습니다 경우 device--
my.harvard에 로그인 또는 예일의 NetID를 등,
많은이 대기 시간이있다 즉이 소요된다 같은 웹 사이트,
같은, 빌어 먹을 두 번째 또는 두 때로는.
그리고, 나의 하나님, 당신은 잘못 입력하는 경우 당신은 반격을하고 다시 실행해야합니다.
그래서 특히, 대기 시간이있다 느린 네트워크 연결에.
그러나 자바 스크립트 때문에 그것은 클라이언트에서 실행
앞뒤로 갈 필요가 없습니다 잠재적으로 느린 인터넷을 통해
연결, 당신이 얻을 수 있습니다 거의 즉각적인 피드백.
>> 그래서이 살펴 보자.
나를 열어 보자 폼 0 여기에 HTML 봐.
그리고 그냥 무슨 일이 일어나고 있는지 살펴 보자.
이것은 누구의 한 형태이다 작업은 register.php입니다.
난 그냥 그렇게 얻을 사용하고 있습니다 나는 URL을 볼 수있다.
그러나 암호를, 우리는 확실히 싶어 현실에 게시하려면이 변경됩니다.
여기에 텍스트를 입력하는 입력 필드입니다.
여기에 또 다른 입력입니다 입력 한 암호의 필드.
당신이 본 적이 없다면 여기에,이다, 유형 체크 박스의 입력.
>> 하지만 자바 스크립트가 없습니다 여기에 무엇이든지.
이것은 단지 HTML을하다 register.php 간다.
그러나 버전에서, 어디 그 팝업을하기 시작,
이제 실제로 여기에 무슨 일이 일어 나는지 보자.
버전에서, 무엇을 난을 see--거야
나는 충분히 실속 수 있다고 생각 충분히 단어,하지만 난 다했다.
>> 버전이 one-- 우리는 간다.
버전에서, following-- 통지 최고의 구현되지 않습니다,
하지만 처음입니다.
아래에 그 주목 형태, 나는 스크립트 태그가 있습니다.
및 스크립트 태그는 의미 이봐, 브라우저, 여기에
몇 가지 코드를 제공, 일반적으로, 자바 스크립트.
그리고 지금, 내가 뭘하는지 알 수 있습니다.
line--에 나는 겨우 수 그것이 말하는, 그건 ... 32 라인 읽기,
VAR는 그렇게 나에게 줄 form-- 형태라는 변수.
그리고 document.getElementId를 얻을 수 "등록."의
이것은 무엇입니까?
글쎄, 내가 여기 되감기 할 수 있습니다.
그리고 통지, 아, 나는 양식 요소를 준 임의하지만 설명 아이디어
등록.
그래서이 나에게 변수를 제공하는 나 해당 노드를 잡아 할 수 있습니다,
나무에 그 사각형 형태라고합니다.
form.onsubmit 수단, 헤이 브라우저, 이벤트 리스너를 등록
이 양식에.
이 형태는 즉, 제출, 다음 코드를 실행합니다.
이 이름 때문에 필요하지 않습니다 왜 이름을 알아야합니까?
당신은 알 필요가 ERGO, 무엇을 실행합니다
그것은 익명 또는 람다 기능입니다.
그리고 그 기능입니다 여기에이 라인의 모든.
그리고 지금, 솔직히 말해서 심지어 비록 지금까지 자바 스크립트를 작성한하지 않을 수 있습니다
전에, 그냥 C와 PHP 논리입니다.
그래서 form.email.value 경우 == ""- 이메일 필드가 비어있는 경우 그래서,
당신은해야합니다 "와 사용자에 소리 이메일 주소를 제공합니다. "
그렇지 않은 경우 form.password.value 사용자의 빈 사자후이며,
"당신은 당신의 암호를 제공해야합니다."
>> 더 흥미로운 것은 논리적으로, form.password.value하지 않는 경우
동일 form.confirmation.value-- 확인은 어디에서 왔는가?
나 되감기 보자.
글쎄, 난이 입력라는 여기에 필드에 암호를 입력합니다.
그리고 확인 여기를했다.
나는 그것을 불렀다 수 암호를 두 개 다른 것.
난 그냥 논리적으로 확인 해요 이 둘은 동일한 지.
이 씨 부울이다이 밝혀 Else-- 부울 값, 체크 박스를 again--.
그래서 내가 말할 경우, 느낌표 point-- form.agreement.checked하지 않을 경우,
뿐만 아니라 사용자에 소리.
>> 그래서 당신은 볼 수 있습니다이 구문은 자바 스크립트에서 매우 일반적인,
어디이 점 표기법이있다.
현재 개체로 시작합니다.
당신은에에 깊은 다이빙 암호 같은 속성입니다.
그리고 당신은 실제 값을 얻을.
그리고 또, 여기에 입력된다.
다음은 이름의 암호입니다.
그리고 그 값이 무엇이든 인간은 사실에 입력했다.
>> 이 모든에 따라서 경우는, 나는 거짓 돌아왔다.
그러나하지 않을 경우, 나는 true를 반환.
그래서 지금 우리가 볼 의 강제적 사용
당신은 거짓 반환 사용자가 뭘 중지
그를 만들거나 그녀를 선택 다시하거나 다시 입력합니다.
그렇지 않으면, 우리는 true를 돌려줍니다.
>> 그리고 나에게 하나를 소개하자 이 다른 변형 단지
그 어떤 이해를 배정한다.
음,이 버전 2, 양식 2-- 나는 손의 파도와 함께 할 것입니다.
이것은, 호기심 사람들을 위해입니다 jQuery를 버전,
로 할 수 있습니다 분들 특정 라이브러리에 손 대고.
그러나 이제 start--하고 질문하자?
저 순간 때문에 위해 일시​​ 정지하자 그 빠르고 많이했다.
>> 그러나 여기 좋은 점은 모든 것입니다 코드의 거의 동일합니다.
새로운 재료는 DOM은 무엇인가?
이 사각형은 무엇입니까?
이러한 노드는 무엇인가?
익명의 기능은 무엇입니까?
이벤트 핸들러는 무엇입니까?
그러나 다행히도, 그 대부분은 그냥 주 제로, 말에서 완전한 원.
괜찮아.
그래서 조금 더 흥미로운?
음, 우선, 내가 가자 앞서 구글 맵을 엽니 다.
그리고 당신에 대한 것을 알 수 있습니다 순간, 분할 두 번째에,
때 발생주의 나는 충분히 빨리 클릭합니다.
그리고 하버드 대학이 연결 그렇다 빨리 당신이 정말로 그것을 통지하지 않습니다.
하지만 당신은 가지 종류의 무엇을 보는가 나는 클릭하고 정말 빨리 드래그하면?
당신이 온라인으로 보는 사람들, 당신은 0.5 배 속도로이 느린 경우,
당신이 더 잘 볼 수 있습니다.
>> 방금 무슨 일이되었다 내가 클릭 및 드래그하기 전에?
내가 나를 내버려 here-- 해보자 90210 같은 뭔가 다른,.
의 멀리 가자.
그것도 정말 빨랐다.
어떻게 디즈니 월드에 대한?
우리는 거기에 갈.
그래.
당신은 분할 초 동안 무엇을 보았는가?
다만, 사각형, 등, 오른쪽?
타일​​에 대한 자리 표시 자?
>> 음, 여기 무슨 일이야?
Google지도의 좋은 예입니다 AJAX를 불리는이 기술.
우리가 시작 볼 수있는 곳이있다 특히에서 자바 스크립트를 사용하여
유혹하는 방법.
위로 하루에, 거기 맵 퀘스트라는이 웹 사이트.
그리고 촬영해야 1990 년대부터이의 스크린 샷,
당신이 원한다면 어디 지도를 여기에서 찾아 볼,
당신은 말 그대로 화살표를 클릭 할 상단까지 그 당신을 보여 주었다
지도의 다른 광장.
당신은,를 왼쪽으로 이동하고 싶다면 당신을 보였다 화살표를 클릭
지도의 다른 광장.
그리고 일부 웹 사이트는 여전히 오늘을한다.
그러나 심지어 맵 퀘스트는 얻었다 구글지도와 같은 더 나은.
>> 대신, 어떻게 이러한 낫다 일 AJAX를 사용하는 웹 사이트입니다.
AJAX-- 그렇지 않으면로 알려진 비동기 자바 스크립트와 XML,
하는 말을 그냥 멋진 방법입니다 기술 또는 기술이
자바 스크립트를 사용하여 브라우저를 허용 추가적인 HTTP 요청을 만들
이후 페이지가로드되었습니다.
그래서 이것은 무엇을 의미합니까?
음, 어떤 것 Gmail의의 성가신
만약 당신이 원하는 때마다 메일을 확인하려면
당신은 말 그대로 제어-R 또는 명중했다 명령-R 또는 새로 고침 버튼을 클릭합니다
전체 이놈 페이지를 다시로드합니다.
권리?
그것은 흰색 플래시 것 아마 초.
당신은 바보 진행 표시 줄을 볼 것입니다.
새가있는 경우 바로 볼 수 메일, 전체 웹 페이지와 URL
당신은 다시해야 할 것입니다에있어.
>> 하지만 그 Gmail에서 무슨 일이 아니다.
권리?
새 이메일을받을 때 Gmail을, 어떤이 화면에 어떻게됩니까?
그것은 바로, 나타?
그냥 마술 나타납니다 테이블에 새 행으로.
즉, 실제로 포함 복잡성의 상당한 금액.
사실,이 나무에 대해 생각한다면, 여기되는 간단한 경우에도
Gmail-- 내가보고해야 할 것이다 코드를 sure-- 될
아마 HTML 테이블이 아니면 이 렌더링 순서없는 목록
같은받은 편지함의 전자 우편의 각.
>> 그리고 당신이이 상상하는 경우 당신이있어 메모리에 나무입니다
종류의 가지 모양의 Gmail을 사용하여 이 같은 구글 우, 실현 될 때,
새 이메일이, 그렇지 않습니다 전체 트리를 다시 작성합니다.
오히려,에 노드를 발견하고자 받은 편지함을 나타내는 트리
단지 새로운 노드를 삽입합니다.
>> 다섯, 당신을 PSET 너무 매우 유사 해시 테이블에 노드를 삽입했다,
마찬가지로 구글을 통해 수행 이 작성했습니다 자바 스크립트 코드,
이 나무 통과, 어디 파악 윈도우의받은 편지함 부분이다,
다음 새 행을 삽입합니다.
그리고 새로운 행은 하나의 의미 나무에 새 노드 이상.
>> 그리고 AJAX는이 기술이다 즉, 정확히 수 있습니다.
당신이 URL을 방문한 후, 그러나 그것이 긴 미친,
그리고 페이지가되면 당신은 여전히​​, 수로드
에서 더 많은 데이터를 잡아 그것은 여부 internet--
이메일 또는 map--의 타일 무대 뒤에서 그것을 잡아
다음 페이지에 삽입 인간은 정말하지 않도록
그것을 위해 기다려야한다.
>> 페이스 북 메신저는 동일한 방식으로 작동합니다.
다른 websites-- 임의의 수 아, 사실, 심지어이.
나는이 솔직히 가지이며, 의미 짜증나는 이러한 일이 있습니다.
나는 cats--이 검색을 시작하는 경우 끔찍한 사용자 경험을 가지입니다.
그냥 나를 위해 검색을 시작합니다.
그럼 그것은 무엇을하고 있는가?
URL은 정말 변경되지 않았습니다 내가 입력을 시작하기 때문이다.
그러나이 가로 질러거야 흥미로운 흠, 확인 wire--.
무엇을 가로 질러거야 와이어는 여기에 단지 괴상 가져옵니다.
>> 그래.
그래서 내가 가서 검사하자 요소와 네트워크 탭으로 이동
이것을 만들려고 기술 및 고양이에 대해 덜.
내가 입력 할 때, 문자 그대로, 고양이 그리고 - 무슨 일이야
per-- 나는 그것을 클릭하지 않을거야.
괜찮아.
그래서 여기에 아래로, 모든 무슨 일이야 시간 나는 분명히, 문자를 입력?
마찬가지로, 낮은 수준?
어떤 사람들의 각각에 무슨 일이 일어나고 내 키보드로 문자를 입력 해요?
그래?
청중 : [들림].
>> 데이비드 마란 : 맞아요.
이러한 문자의 각각은 한번에 구글 번가는.
그들은 문자열을 구축하고있다 자신의 서버에 그 대표
내가 지금까지에 입력 한 모든 것을.
그리고 때마다 나는 입력 다른 문자, 그들은
자신의 비밀 소스를 사용 알고리즘을 검색하고 파악,
그는이 고양이 페이지를 의미 하는가 이 페이지 또는 고양이 등이나?
어떤 의미에서 그래서, 그것은 나를 제공 점에서 더 나은 경험 난하지 않습니다
내 생각을 완료해야합니다.
그리고 실제로, 그것은 유용한이야 일, 일반 자동 완성.
그들의 알고리즘은 충분히 좋은 경우 내 검색이 충분히 명백한 경우,
나는 전체의 단어를 입력 할 필요가 없습니다.
그들은 나에게거야 무엇을 실제로 찾고 있어요된다.
그래서 구글은 즉시 호출 검색은, AJAX를 사용하는
그들에게 요청할 수 있습니다 코드를 사용하여 웹 브라우저를 통해 추가 콘텐츠
이를 사용하여 뒤에서 새로운 언어, 자바 스크립트.
그래서 우리는 왼쪽으로 몇 분 있습니다.
그리고 내 친구를 부르 자 스테이지로 콜튼까지,
그것은 생각하기 때문에 특히 재미 마지막으로
기술을 소개합니다 당신의 일부가
관심을 표명 한 최종 프로젝트에.
우리는 가지고 재미있을 줄 알았는데 자원 봉사까지,하지만, 오늘
당신에 추가를 표시합니다 그래, 얘들 아를 허용하는이,
내가 먼저이 손을 보았다.
최대 어서.
아주 잘.
잘 했어.
나는이 프로젝트에 갈거야 단지 순간의 화면.
모두를위한 당신의 이름은 무엇입니까?
>> EFA : 나는 EFA입니다.
>> 데이비드 마란 : Etha?
>> EFA : EFA.
>> 데이비드 마란 : EFA?
>> EFA : 네.
>> 데이비드 마란 : 만나서 반갑습니다.
괜찮아.
날이 준비하자.
까지 가자 여기 콜튼와 중간.
무엇 콜튼은 자신의 손에있다 오늘은 원격 제어입니다.
그래서 차라리 그냥 거기 서보다 주변을 둘러 보는 세 가지 차원 세계
콜튼처럼, 지금 EFA는 수 실제로 최대 이동하여 산책,
아래, 왼쪽과 같은 권리 닌텐도이나 X 박스 컨트롤러.
EFA : 나는 무대에서 떨어질거야.
데이비드 마란 : 나는 것 여기에 약 서있다.
하지만 그 위험이있다.
그래.
그래서 가서 사람들을 입었다.
내가 가서 보자 여기에 화면으로 전환.
나 조명을 차단하자.
그리고 콜튼은 나를 보자 당신 옆에 스탠드를 갖추고 있습니다.
>> 여기서 설명 하시겠습니까 마이크와 함께 우리는 무엇을하고있어?
여기 당신은 간다.
>> 콜튼 : 물론.
그래서 지금 우리는있어 안구를로드,
나는 operating--가 작동하지 추측 시스템하지만 메인 프로그램,
당신은 모든 게임에 액세스 할 수 있으며, 라이브러리에있는 앱입니다.
그래서 지금은 말을해야 터치 패드가 시작을 누릅니다.
터치 패드에있을 것 헤드셋의 오른쪽.
그래서 가서 tap--
EFA : 오, 이런.
데이비드 마란 : 그래, 거기 당신은 간다.
EFA에 보이는 품질 훨씬 더 높은 품질이다.
이 여기에 그냥 와이파이입니다.
콜튼 : 당신은 그래서 하고 싶은 것
상단을 향해 보면된다 화면 오른쪽.
네, 맨 오른쪽에있는 그 게임.
그리고 당신은 선택 할 때 그것은, 다시 터치 패드를 누릅니다.
나는 그것의 Dreadhalls 생각합니다.
그리고 여기 여기 할까 ..된다, 할 수 나 당신을 위해 안경을 개최합니다.
>> 그래서 난 그냥 그에게 컨트롤러를했다.
그래서 지금은 게임을 제어 할 수 있습니다.
그는 그 같은 주위 물건 이동할 수 있습니다.
그래서 가서 정상에 찾아보십시오.
당신은 새로운 게임을 볼 수 있습니다.
그래서 가서 당신은 그렇게 할 수 있습니다.
지금, 당신은 제어 할 수 있어야한다 컨트롤러와 자신,
뿐만 아니라, 가능한 한 빨리 이 게임은 여기에로드합니다.
이것은 조금 무서운 될 수 있습니다.
>> EFA : 이제 당신이 말해.
그래.
>> 콜튼 : 좋아.
그래서 당신은 이동할 수 있는지 확인합니다.
그래.
당신은 주위를 이동할 수 있습니다.
완벽한.
당신이 아래로 보면 그렇다면, 당신은지도를 가지고있다.
당신이 어디에지도는 보여줍니다.
당신은 방을 둘러 볼 수 있습니다.
당신은 완전히 돌아서 수 있습니다.
네, 정확히.
돌아서 다.
>> 그래서 왼쪽에 보인다.
나는 무언가가 당신이 할 수 있다고 생각 방에 배럴에 집어.
>> EFA : 나는 얻는 방법을 길에서이란?
콜튼 : 검색합니다.
그냥 봐.
괜찮아.
거기 당신은 간다.
지금 가서 그냥 돌아서.
그래서 왼쪽으로 멀리 본다.
왼쪽으로 이동하십시오.
왼쪽 찾고 유지.
계속가.
그래.
>> EFA : 아, 그런 식으로.
>> 콜튼 : 네.
컨트롤러와 그것을 향해 걸어.
거기 당신은 간다.
지금은 그것을 집어 말해야한다.
거기 당신은 간다.
그것을 선택합니다.
괜찮아.
지금,이 방에서 얻을 수 있습니다.
가서 문을 걸어.
그래서 당신은 말한다 잠시,거야 개방을 강제로 버튼을 누르고 있습니다.
그래서 가서 버튼을 누르고 있습니다.
네, 열려 강제.
괜찮아.
잘 했어.
이제 우리는 방에서 걷고 있어요.
그래서 나머지를 떠날거야 당신에게 당신이 알아 무엇을 참조하십시오.
EFA : 나는 어두운 방에서 않을거야.
아, 잠깐.
지금은 어두운 복도를 가야?
확인, 나는 [들림] 다시거야.
콜튼 : 좋아.
좀 더 항목을 선택할 수 있습니다.
일부 동전처럼 보인다.
즉, 잠금 선택입니다.
당신이 찾아내는 경우에 따라서는 고정 문, 당신은을 사용할 수 있습니다.
너 두렵 니?
>> EFA : 아직.
콜튼 : OK.
>> 그래 Pretend--.
그냥 척 실제로 거기에 서.
그리고 당신은 around-- 끌 경우 당신은 그것에 익숙해있어.
그러나 그것은 의미가 있습니다.
데이비드 마란은 : EFA는 계속하면서 우리는이 모든 일 할 수 있기 때문에, 재생,
우리는 모든 끝에서 발끝 밖으로 여기에 있습니다.
그러나 우리는 다른 두 쌍을해야합니까, 당신이 와서 연주하고 싶은 경우.
그렇지 않으면, 우리는 볼 수 있습니다 당신이 수요일에 다음.
오늘 우리의 자원 봉사에 감사드립니다.
[박수]
>> [음악 - "펠트 테마"]
스피커 1 : 음, 난 퍼팅 새로운 PL은에 탑재합니다.
난 그냥 OLPF-- 변경
>> 스피커 2 : 그래서 정확히 뭐하는거야?
>> 스피커 1 : 음, 각각 these-- 여기에, 나는 당신에게 여기에서이 하나를 보여 드리겠습니다.
당신은 여기를 볼 수 있습니다.
>> 스피커 3 : 내가이 좋은 것 같아요.
당신은 좀 더 줄까?
>> 스피커 4 : 아니, 난 괜찮아. [들림].
>> 스피커 3 : 아니, [들림].
몇 가지가 있습니다.
스피커 1 : 다른 색상.
스피커 2 : 확인을 클릭합니다.
스피커 1 : 그래서 궁극적으로 무엇을 이 색상을 조정하는 것입니다 않습니다 동행입니다