[Powered by Google Translate] [세미나] [자바 스크립트 프레임 워크 : 왜 그리고 어떻게]
[케빈 슈미트] [하버드 대학]
[이 CS50입니다.] [CS50.TV]
>> 안녕하세요, 여러분. 자바 스크립트 프레임 워크 세미나에 오신 것을 환영합니다.
내 이름은 케빈이며, 오늘은 자바 스크립트 프레임 워크에 대해 얘기 할거야
이 세미나의 목표는, 당신을 얻을 말 자체가 특정 프레임 워크를 마스터하지 않습니다
하지만 프레임 워크의 몇 가지 당신에게 광범위한 도입을주는
그리고 우리가 이제까지 프레임 워크를 사용하려는 이유 보여준다.
>> 내가 그렇게하기 전에, 나는 자바 스크립트에서 약간의 배경을 제공합니다
그리고 우리는 거기에서 그것을 가지고 있습니다.
우리가해야 할 일 목록을 구현하여 시작하는거야.
여기에 오늘 우리의 작업 목록입니다.
그것은 재미의 종류입니다. 우리는 JavaScript에서 할 일 목록을 구현해야합니다.
이 그래서 우리의 첫 번째 목표이고, 그것처럼 보이는 무슨이다.
우리가 할 수있는 프레임 워크를 사용하지 않을거야.
우리는 코드를 자바 스크립트에 가서 할 일 목록 일하러 가야하고 있습니다.
그리고 우리는 프레임 워크를 사용하지 않고 디자인을 향상거야.
우리는 우리가 자바 스크립트를 단독으로 할 수있는 여러 가지 논의거야
우리를 만드는 것은 투 - 어떻게 좀 더 잘 설계를 나열합니다.
그 후에 우리는 어떤 jQuery를 던질거야
그리고 우리는, 할 일 목록 같은 보는거야
다만 다른 프레임 워크에서 구현, 그리고 우리가 논의 할 것이다
길을 따라 장단점.
>> 의리스트를 수행하는 구현을 시작하자.
자, 우리가이 HTML을 부여하고 말한다.
나는이 좀 작게 만들거야.
당신이 볼 수 있듯이, 내가 할 일을 말합니다 약간의 헤더가
내가 할 일에 대한 설명을 입력 할 수 있으며 작은 박스
그리고, 그래서이 목록에 새로운 할일을 입력하려고의 새 항목 단추를 보자.
, 자바 스크립트 프레임 워크 세미나를 제공합니다
나는 새 항목을 칠 해요.
나는 저를 구현 말한다이 자바 스크립트 경고를 얻을.
우리는 그것을 구현할 수있어.
HTML과 자바 스크립트 모두의이에 대한 코드를 확인 할 수 있습니다.
여기에 우리의 HTML이다.
당신은 여기에서 볼 수 있듯이, 여기에 우리의 작은 도스 헤더입니다.
즉, 상단에 그 대담한 일이었다
그리고, 우리는 자리 표시 자와 함께 입력 상자가
다음이 함수 addTodo를 호출하여이 버튼의 특정 속성이있다.
사람은 의미 is 클릭 할 것을 추측 할합니까?
[학생 들리지 응답]
좋음, 클릭은 ​​이벤트와 같은 종류입니다
마우스를 클릭하면 바로 이벤트, 그리고 우리가하고있는 것처럼
우리는 그 기능을 실행하려면이 버튼을 클릭하는 이벤트를 묶는하고 있습니다.
AddTodo은 버튼을 클릭 대해이 이벤트 처리기입니다.
>> 당신이 볼 수 있듯이, 나는 새 항목 단추를 클릭 할 때
클릭 이벤트가 발생됩니다,이 함수가 호출됩니다.
의 함수를 살펴 봅시다.
당신이 볼 수 있듯이, 여기까지 내 자바 스크립트 코드이다.
내가 정상에있을 것이 나의 할 일 목록에 대한 글로벌 데이터 구조입니다.
그것은 배열처럼 보인다. 그냥 빈 배열입니다.
그리고 나는 우리가 이전에 보았던 addTodo 기능을 가지고
거기에 코드 만 라인이 경고이다.
그것은 저를 구현 경고, 그리고 난 손이 작업을해야합니다.
나는 그 전역 데이터 구조에 TODO를 추가해야
그리고, 나는 할 일 목록을 그리려면.
아무도 아직 공상,하지만 자바 스크립트 당신은에 익숙 할 수 있습니다
그래서 나는 천천히 이동하는 방식으로 자바 스크립트의 기초를 검토하는거야.
>> 의이에게 기회를 줘 보자.
자, 사용자가이 상자에 뭔가를 입력 말한다.
나는 여기에서 텍스트 뭔가를 입력했습니다.
어떻게 자바 스크립트를 통해 액세스하는 텍스트 정렬합니까?
이 자바 스크립트를 기억하고, 근본적인 기능 중 하나는 그것이 우리에게주는 것입니다
DOM이 프로그램 액세스 할 수 있습니다.
그것은 우리가이 실제 HTML 요소와 속성을 액세스 할 수 있습니다.
우리는 맨손으로 뼈 자바 스크립트와 함께하는 작업을 수행하는 방법
우리가 실제로있는 getElementById라는 자바 스크립트 함수를 사용할 수 있습니다.
나는 몇 가지 변수가 입력 된 것 텍스트를 저장할
그래서, new_todo라는 새 변수를 말하는거야
그리고 그 요소를 얻을거야.
이것은 기능입니다.있는 getElementById는.
그리고 지금, 나는 ID로 요소를 받고 있어요, 그래서 해당 텍스트 상자의 ID를 필요로
그래서 나는 그것에게 ID를 new_todo_description을 부여했습니다.
그건 내가 요소를 얻을거야 방법입니다.
그건 얻을 수있는 ID 지정하려면이 함수 내 주장이다.
그리고 그것은 HTML의 요소이고, 그것은 속성이 있습니다.
당신은이를 보았다. 그들은 속성입니다.
사용자의 입력을 저장하는 텍스트 요소의 속성 값이라고합니다.
나는 new_todo이라는 변수에 이제 텍스트 상자의 값을 저장.
이제이 변수에 프로그래밍 방식으로 액세스 할 수 있고, 어느 종류의 시원한입니다
지금 내가 할 수있는 일이 없기 때문 것은 내가 할 일 목록에 추가 할 수 있습니다.
>> 우리는이 작업을 수행하는 방법과 자바 스크립트 그리고 당신이 이것에 익숙하지 않다면 걱정하지 마세요,
하지만 단지 그것을 통해가는 todos.push입니다
여기까지 내 글로벌 데이터 구조의 이름이야 때문에,
나는 new_todo를 밀어거야.
지금 내 스크립트에 추가 한 때문 중대하다
할 일 목록의 표현입니다.
하지만 지금은 내가 어떻게 HTML로 다시받을 수 있나요?
나는 그것을 밀어의 정렬 방법을 찾아야한다.
즉, 나는 종류의이 그려해야합니다.
우리가 할 수있는 일은하는 것은 우리가 할 일 목록을 그릴려고하고있다.
나는 그 페이지에있는 다른 HTML을 업데이트해야
당신이 볼 수 있듯이, 나는 여기이 작은 컨테이너를 떠 났어요
ID 도스는 페이지의이 분배기,
나는 거기에 할 일 목록을 넣어거야.
먼저 내가 할 일 목록 이전이 있었다 말 때문에 그것을 지울거야.
나는 다시 ID하여 해당 요소를 받고 있어요
그리고, 그 요소의 내부 HTML에 액세스 해요
나는 그 선택을 취소거야.
이기 때문에 우리가이 코드를 떠난 경우에, 우리는 거기에 빈 아무것도 볼 것
지금은 나의 새로운 할 일 목록을 렌더링 시작합니다.
기본적으로 내가 내 할 일 목록을 닦을거야.
>> 이제 도스 사업부의 내부 HTML 내부는 완전히 분명하다
지금은 내 목록 추가 시작해야합니다.
내가 다시 추가 할 첫 번째 일은, 정렬되지 않은 목록 태그입니다
이는 기본적으로이 정렬되지 않은 목록의 시작임을 나타냅니다.
이제 내 할일 배열의 모든 요소에 대해 그 HTML 내부에 그것을 밖으로 인쇄하고 싶습니다.
나는이 목록의 맨 아래로에 추가하고 싶습니다.
그냥 C처럼, 내가 루프를 사용할 수 있고, 내 목록의 시작 부분에 시작하는거야
요소 0에, 그리고리스트의 길이에 모든 길을 갈거야.
우리는 실제로 길이 속성을 사용하여 자바 스크립트에서 배열의 길이를 얻을 수 있습니다.
기본적으로 여기의 안쪽에 매우 비슷한 뭔가를 할거야
해당 요소를 인쇄 할 수 있습니다.
나는 다시 도스 사업부, 그 내부 HTML 속성을 액세스 할 수 있습니다
그리고이 새 목록 항목을 추가 할거야, 그에 둘러싸여 할 것
이 리튬 태그는, 나는, + 연산자로 연결하는거야
그 내 도스 배열의 i 번째 요소의
그리고 그 태그를 닫습니다거야.
이제 모든 요소에 대해 우리는 새 목록 항목을 추가합니다.
그리고 우리가 정말로해야 할 일은 해당 태그를 부근에 있습니다.
난 그냥 목록 태그를 정렬되지 않은 것을 봉쇄해야합니다.
>> 당신은 그 작동 방법에 대한 느낌을 얻을 수 있습니까?
이것은 전체 목록을 엽니 다.
이것은 수행 할 작업 목록에서 목록에 개별 요소를 추가
그리고 전체 목록을 닫고,이 내 addTodo 기능입니다.
나는 기본적으로 텍스트 상자에서 잭을 얻어서 시작합니다.
나는 도스 배열에있는 추가, 그리고, 나는 할 일 목록을 다시 렌더링합니다.
이제 내 목록에 항목을 추가 할 수 있습니다.
이 종류의 흥미로운 때문에 단 몇 줄의 코드에서
우리는 기본적으로 우리가 항목을 추가 할 수 할 일 목록을 만들었습니다.
좋아요.
즉, 자바 스크립트에 대한 기본적인 소개의 일종이다.
지금의 구문에 대해 너무 걱정하지 마세요
하지만,이 개념에 대해 생각합니다.
우리는 약간의 HTML을했다.
우리는 입력 할 일 항목을, 기본적으로 허용 된 사용자가 추가 할 수있는 페이지에 텍스트 상자를 가지고 있었다.
그리고 우리는 텍스트 상자에서 해당 잭을 가져 오기 위해 자바 스크립트를 사용.
우리는 JavaScript 배열 내에서, 이는처럼 기본적으로이 저장
그 우리의 프로그램 표현 목록을 수행하려면
그리고 우리는 그것을 밖으로 인쇄.
이 todos.js입니다.
>> 이 멋진의 종류,하지만 어떻게 우리는이 더 걸릴 수 있습니다?
당신이 볼 수 있듯이 음,이 할 일 목록 전체처럼되지 않습니다.
예를 들어, 내가 불완전 이러한 항목 중 하나를 표시 할 수 없습니다
나는 품목을 우선적 인 또는 항목을 삭제하려는 경우 좋아합니다.
이 괜찮지 만, 우리는이 더 걸릴 수 있습니다.
나는 추가 기능을 추가하는 방법에 대해 너무 많이 얘기하지 않을거야
그러나 우리는 더 걸릴 수 있습니다.
할 일 목록이 하나 이상의 기능을 추가하는 방법에 대해 얘기하자,
개인이 할 일 항목을 체크 할 수있는 될 것입니다 어떤
그리고 그것은 그러니까 기본적으로이 작업을 수행 한 말, 밖으로 교차 할 수있다.
의는 그 작업을 수행 할 수 일부 코드를 살펴 보자.
제가 상단했던 것은 내가 추가 한 것을주의
새로운 글로벌 배열을 완료했다.
나는 기본적으로 저장하려면이 옵션을 사용하고 있는지 여부를 할 일 목록의 항목
전체 또는하지 않습니다.
이이 작업을 수행하는 한 가지 방법입니다.
나는 이것의 구현, 디스플레이, 보면
내가 할일을 입력하면 기본적으로 나는이 토글 버튼을 누르면
그것이 밖으로 교차하므로이 목록에있는 모든 항목는 전체가
불완전한 상태, 그리고 그를 대표하는 또 다른 배열을 사용하고 있습니다.
>> 기본적으로이 도스 배열의 모든 TODO에 대한
항목은 기본적으로 표시 완전한 배열에있다
그 완료 여부.
나는이 코드를 꽤 최소한의 변경을 했어
그래서 여기에 우리 addTodo 기능이다.
여기가 배열에 밀어있어 알,
그리고 난, 그 완전한 배열에 0을 추진 해요
기본적으로 말을하는 새로운 잭 푸시와 병렬로
나는이 항목을 추가 해요, 그리고이 값과 함께있어
이는이 불완전하다는 것을 의미한다.
그리고 내가 할 일 목록을 다시 그릴거야.
지금, 나는이 drawTodoList 기능을 추가했습니다 확인할 수 있습니다.
이것은 우리가 전에했던 코드를 많이 걸립니다
기본적으로 상자를 지운 다음 새로운 할 일 목록립니다.
그러나 내부 for 루프에서 우리가 더 많은 지금은 조금하고있는 것을 알 수 있습니다.
우리는 기본적으로 i 번째 잭의 항목에 해당하는지 여기에서 확인하고
완료되면, 우리는이 2 개의 상황에서 다르게 행동하고 있습니다.
그것이 완료 경우에, 우리는이 델 태그를 추가 할
이것은 기본적으로 당신이 효과를 통해 해당 공격을받을 수있는 방법입니다
그것은 전체의 경우에 할 일 목록을 건너
그렇지 않은 경우에, 우리는 그것을 포함하지 않는.
그리고 그런 종류의, 그 돌봐
>> 그이 작업을 수행하는 한 가지 방법입니다.
사용자는 이들 중 하나를 클릭 할 때 다음 통지
우리는 그것의 완료 상태를 전환합니다.
사용자가 클릭, 우리가이 완료되거나되지 않은인지 바꿔서 때,
그리고 우리는 그것을 재 묘화합니다.
작품의 이런 종류의.
우리는 자신의 작업을 수행 이러한 기능을 가지고
이 괜찮습니다.
우리는하지만, 이것에 대해 더 잘 할 수 있나요?
우리는이 두 세계 배열을 확인할 수 있습니다.
이 C이고, 우리는 종류의 표현하는 2 배열을 가지고 있다면
일종의 어떤 식 으로든 관련이 데이터
우리는이 두 필드를 결합하는 C에서 무엇을 사용하는 것이
정보의 두 조각을 캡슐화 뭔가에?
누구든지 제안을 만들고 싶어?
[학생 들리지 응답]
>> 정확하게, 그래서 우리는, 구조체의 어떤 종류를 사용할 수 있습니다
그리고 당신은 PSET 3, 말, 다시 생각하면
우리가 사전을 가지고, 그리고 우리가 가진 기억 여부 단어
사전에 있었고, 모든 정보를 함께 넣어되었습니다
일부 데이터 구조의 내부.
이 코드로 할 수있는 것은이 2 개의 다른 배열을 갖는 피하기 위해
정보와 비슷한 조각을 위해 나는 자바 스크립트 객체로 결합 할 수 있습니다.
의 그에서 살펴 보자.
난 단지 지금은 상단에 하나의 배열을 알 수
그리고 내가 무슨 짓을 한 것은 - 이것은 단지 종류의에 대한 자바 스크립트 구문
객체의 리터럴 버전을 만들고,
그리고, 우리가 할 일이 있고, 2 곳이 있습니다 통지
그리고 그것은이 완료 불완전의 여부와 함께 계속있어.
이것은 매우 유사한 코드입니다.
우리는 JavaScript 객체를 사용하고 있습니다.
향상 사물의 종류.
지금처럼 관련 정보의 모든 필드를 함께 유지됩니다.
우리는 그것을 밖으로 인쇄 갈 때, 우리는 필드를 액세스 할 수 있습니다.
>> 우리가 수행 할 작업 [I]을 다하고 방법을 알 수 있습니다. 완료
대신 별도의 전체 배열을 점검,
우리는 우리가 할 일 등록을 받고있어 할 일 문자열을하고자 할 때 통지
그 잭, 그래서 이런 종류의 말이 있기 때문에
모든 항목은 그것에 대해 이러한 고유 특성이있다.
그것은 잭을 가지고 있으며, 그것은 전체 또는 아닌지가 있습니다.
너무 많은 변화가 기능적으로, 그냥 코드를 좀 더 추가했다.
이 오른쪽, 일부 전선에 개선?
나는 조금 디자인 중 우리가 고려, 의미합니다.
이제 우리는 기본적으로이 데이터를 캡슐화하는 개체가 있습니다.
우리가 자바 스크립트의 측면에서 여기에서 할 수있는 더 있나요?
같은 통지가 바로 여기에이 코드를
DIV의 내부 HTML을 얻기위한
작은 것 같아요, 길이입니다.
하는 document.getElementById (이하​​ "수행 할 작업")가있다. innerHTML을가.
우리는이 코드가 약간 우호적 보이게 할 수있는 한 가지
그래서 나는 앞뒤로 스크롤 왼쪽과 오른쪽 유지해야하지 않을
내가 jQuery를 같은 라이브러리를 사용할 수 있습니다.
>> 의이 세미나 2 확인하자
이 같은 코드이지만 jQuery를 함께 이루어집니다.
당신은 jQuery를 함께 너무 익숙하지 않은
하지만 단지 jQuery를 자바 스크립트에 대한 라이브러리의 종류는 것을 알고
그게 쉽게 DOM의 액세스 개별 요소와 같은 작업을 수행 할 수 있습니다.
여기에 대신하는 document.getElementById를 말하는 ( "수행 할 작업"). innerHTML을
나는있는 jQuery 훨씬 청소기 방법을 사용할 수
이는 단지 선택기를 사용하는 것입니다.
당신이 볼 수 있듯이,이 코드는, 작은 청소기를 얻을 않았다
매우 기능적으로 유사하지만 그 생각이다.
우리는 지금까지 같은 몇 가지 봤어요
그래서 우리는 단지 원시 자바 스크립트 구현하기 시작했다.
우리는 새로운 기능을 추가하고 우리가 그것을 개선 할 수있는 방법을 보여 주었다
단지 우리가 자바 스크립트로되어 있습니다.
>> 사람이 디자인 어려움을 참조합니까?
즉, 내가 추측 또는 어려움 필요는 없습니다 만, 말을하자
우리는 할 일 목록 프로젝트를 수행하지 않은, 그리고 내일 우리는 결정
우리는 식료품 목록이나 쇼핑리스트 프로젝트를 만들고 싶었다.
이러한 기능의 많은 매우 유사합니다.
우리가 자바 스크립트 나가야 할 많은 것들이 매우 일반적입니다
이것은의 방법에 어떤 종류의에 대한 필요성을 강조
할이 쉽게.
나는이 HTML 액세스를 모두 구축하기 위해 모든 DOM 액세스를했다
나는이 모델 할 일 목록을 나타내는거야 좋아합니다.
그리고 제가 자바 스크립트 개발자로 책임 해요 통지
내가 동기화 가지고있는 HTML과 자바 스크립트를 유지합니다.
자동으로 만든 아무것도하는 자바 스크립트의 표현
또는 할 일 목록은 HTML로 밀어됩니다.
아무것도 나를 제외하고 적용하지 않습니다.
나는 목록 기능을 수행 할 무승부를 기록했다.
그리고 말은 내가가 될, 그것은 그렇게하는 것이 합리적이다하지 않을 수도
하지만 때로는 지루한 수 있습니다.
당신이 큰 프로젝트가있는 경우, 그 어려울 수 있습니다.
>> 프레임 워크, 프레임 워크의 목적 중 하나
요소의 처리 및 정렬을 단순화하는 것입니다
이러한 공통 내가 수 있다고 말한다 - 디자인 패턴 같아요
사람들은 일반적으로 데이터를 표현하는 방법의 몇 가지 종류가
그는지도 정보의 여부, 친구 목록의 여부
또는 무언가 또는 할 일 목록.
어떤 사람들은 일반적으로 정보를 표현하는 방법이
그들은 일반적으로 동기화하는 정보 종류의 계속해야합니다
사용자가 뷰의 일종으로 보는 것 사이,
당신이 강의에서 본 모델 뷰 컨트롤러 같은 측면에서 말하자면,
그리고이 경우이 자바 스크립트 배열 모델.
프레임 워크는 우리에게 그 문제를 해결하는 방법을 제공합니다.
이제리스트에게 할 일이의 구현을 살펴 보자
angularjs라는 프레임 워크합니다.
이것은이다. 이 슬라이드에 맞는 확인할 수 있습니다.
나는 왼쪽과 오른쪽으로 스크롤 할 필요가 없습니다.
그것은 아마도 프레임 워크를 사용하는 것이 좋습니다 수있는 좋은 이유가 아니다
하지만 통보 나는 지금 여기에서 개별 HTML 요소에 액세스입니까?
나는 이제까지 DOM에 갈거야?
당신은 그런 모든하는 document.getElementById 또는 무언가를 볼 수 있습니까?
아니, 사라입니다.
>> 각도는 우리가 DOM 뭔가 우리의 자바 스크립트 표현을 유지하는 데 도움이
동기화의 종류, 그것은 js 파일에없는, 그래서 만약
프로그램 모두 HTML 콘텐츠에가는 방법이없는 경우
자바 스크립트에서 어떻게 우리가 동기화이 유지됩니다?
이. js 파일에없는 경우, 오른쪽, HTML에있을거야?
이것은 HTML 파일의 새 버전입니다
우리는 여기에 많이 추가했습니다 알 수 있습니다.
NG-클릭하고 NG-반복 말한다 이러한 새로운 속성이있어 알 수 있습니다.
디자인의 어려움의 문제를 해결하는 각도의 접근 방식
기본적으로 HTML이 훨씬 더 강력한 것입니다.
각도는 HTML이 좀 더 표현 할 수 있도록하는 방법입니다.
예를 들어, 나는이 텍스트 상자를 연결 또는 바인딩하는거야 말할 수
내 각도 자바 스크립트 코드 내에서 변수.
이 NG 모델은 그냥 않습니다.
기본적으로 말한다 항목이 텍스트 상자의 안쪽에, 그
단지 변수 new_todo_description와 그 연관
자바 스크립트 코드 내에서.
내가 명시 적으로 갈 필요가 없기 때문에 그것은 매우 강력한
DOM은 정보를 얻을 수 있습니다.
내가하는 document.getElementById 말을 할 필요가 없습니다.
나는 DOM 액세스와 같은 jQueries를 사용하지 않아도됩니다.
나는 그 변수를 변경하면 그 변수와 연결하고, 수
자바 스크립트 내에는 HTML과 동기화를 유지거야
그래서 그 두 가지 사이에서 앞뒤로 이동해야하는 프로세스를 단순화합니다.
그게 말이됩니까?
>> 그리고 어떤 HTML 액세스 코드가 없기 확인할 수 있습니다.
우리는 단지, HTML보다 강력한 만들었다
지금, 예를 들어, 우리는 다음과 같은 작업을 수행 할 수 있습니다
당신이 클릭하면, todos.js의 범위 내에서이 함수를 호출처럼,
그리고,이 NG 모델과 같이, 우리는 그 전에 할 수 있지만, 다른 것들이 있습니다
이 NG-반복을 확인할 수 있습니다.
당신이 무엇을 생각합니까?
전에 여기에서 우리의 정렬되지 않은 목록입니다.
우리는 UL 태그가
그러나 나는 이제까지 자바 스크립트 코드 내에서 그 목록을 렌더링하는 건가요?
나는 이제까지 명시 적으로 목록을 렌더링 아니에요.
이 어떻게 작동합니까?
음, 방법 각도는이를 리피터라고합니다 수행합니다.
기본적으로 이것은 내가이 HTML을 인쇄 할 말한다
내 도스 배열의 모든 할일 안쪽.
todos.jr의 내부 도스 배열이 바로 여기에있다
이 그 배열을 통해 각도 이동을 말할 것이다, 모든 요소에 대해 당신이 볼
난 당신이 HTML을 인쇄합니다.
내가 이렇게 단지 수 있기 때문에 최고의 종류
루프를 작성하지 않고,
어떤 코드의 30 라인이었다 할 일 목록
가장 유익한 일이되지 않을 수 있습니다 것은,
당신이 큰 프로젝트가있는 경우에,이 매우 편리 얻을 수 있습니다.
>> 이 HTML은 더 강력하고,이 문제에 대한 하나의 솔루션입니다,
그것은 저희가 동기화 자바 스크립트와 HTML을 유지할 수 있습니다.
이 문제를 해결하는 다른 가능한 방법이 있습니다
그리고 모든 프레임 워크는이 작업을 수행하지.
모든 프레임 워크는 다음 행과 함께 작동하지 않습니다.
어떤 프레임 워크는 다른 접근 방식을 가지고
그리고 당신은 당신이 다른 통해 하나의 프레임 워크로 코딩을 즐길 것을 알 수 있습니다.
의 하나 더 살펴 보자.
이 백본이라는 틀에서 코딩 할 일 목록이다.
나는 빨리이를 통해 갈거야.
우리가 거​​기 가기 전에 HTML로 시작합니다.
잠깐만.
이미 말한 바와 같이 HTML로 시작하는, 우리의 HTML은 매우 유사하다
그것은 그 전면에 전에 너무 너무 많은 새로운 무엇인지합니다.
그러나 우리의 js 파일은 약간 다릅니다.
의 백본 종류는이 아이디어를 가지고, 또는 아이디어를 기반으로
우리가 무엇을 많이, 말하는, 우리의 자바 스크립트 프로젝트
모델과이 모델의 컬렉션을 생각합니다.
이것은, 예를 들어, 사진의 사진과 컬렉션이 될 수
또는 친구의 친구와 컬렉션의 생각.
그리고 종종 우리는 자바 스크립트 응용 프로그램을 프로그래밍 할 때
친구의 컬렉션을 갖는 아이디어를 표현의 우리는 정렬 할 수 있습니다
어떻게 든 자바 스크립트, 그리고 백본은 우리에게이 계층을 제공합니다
자바 스크립트의 기존 배열과 객체의 상단에
더 쉽게 그와 더 강력한 일을 할 수 있습니다.
>> 여기에 내가 할 일 모델을 정의한
그리고 당신은, 구문 대해 너무 많이 걱정하지 않아도
하지만 이것의 속성 중 하나의 알?
그것은 기본 필드가 있습니다.
백본 나 박쥐 이미 지정할 수 있습니다
내가 만든 투 않는 새로운 기본값을해야 할 것입니다.
지금은이 정의하지만, 기본값을 지정하는 것으로 할 수있다
좋은,이처럼 뭔가하지 않기 때문에 편리 종류의
자바 스크립트에 내재 된, 지금은 명시 적으로 필요가 없습니다
수행 할 작업이 불완전 말한다.
내가 할일이 불완전으로 표시하려고하는 바로 박쥐 말할 수 있습니다.
다음 공지 사항이 무엇입니까?
지금은 할 일 목록을 가지고 있고, 그 모음입니다.
모델 잭 말한다 관련된 필드를 확인할 수 있습니다.
이것은 백본을 말하는 나의 방법
나는이 각각 수행 할 작업의 컬렉션에 대해 생각하는거야.
이것은 기본적으로 내 프로그램의 모델 구조입니다.
여기에서 나는, 컬렉션의이 아이디어를 가지고
기본적으로이 컬렉션에 포함 된 항목은 모두 이러한 일하러가 될 수 있습니다
그이 점에서 매우 자연
내가 있기 때문에 도스가, 그리고 컬렉션에이를 수 있습니다.
>> 의이의 좀 더 살펴 보자.
여기 백본 전망이다.
등뼈라고하는 또 다른 점은 그
당신에 대해 또는 컬렉션을 생각하는 많은 모형
표시되는 몇 가지 방법이 필요 할 것입니다.
우리는 목록을 할 것을 렌더링 할 필요가
우리는 각 모델을 제공 할 수 있다면 그것은 좋지 않을까
또는 각 모델이 뷰를 연결
우리가 할 수 있다는 나는 두 가지를 함께 연결 됐을까?
이전 반면 우리는을 통해 실행됩니다 루프를 사용했다
모든 우리의 목록에서 TODO하고 그것을 여기에서 인쇄
우리는 기본적으로이 모델에 연결할 수 있습니다.
이 할 일이다.
이것은 우리가 이전에 발견 된 잭과 연결되어 있습니다.
이제 모든 잭은 표시 가능한 또는 렌더링 가능합니다
이것에 의해보기를 확인해보세요.
필드의 일부를 확인할 수 있습니다.
당신이 태그 이름은 태그 이름을 어떻게 생각하십니까 : 리?
잭을 렌더링하는 데 우리가 원하는 때 이전의 기억
우리는 명시 적으로 리 태그와 함께 우리의 할일을 페어링해야합니다.
이제 우리는이 잭 살고 어디로 가는지 말을하는지
리튬 태그 안에 될 것입니다.
그리고 지금 우리는 또한 우리의 할일과 이벤트를 연결하고 있습니다.
>> 모든 잭이 하나의 이벤트가 있습니다.
당신이 꽤 많이 토글 버튼을 클릭하면, 즉, 내가 거기 무슨 말인지의
그런 다음 기본적으로 이전에 있었는지의 반대 등 TODO 표시
다음 응용 프로그램을 다시 렌더링합니다.
이 이전 코드와 유사 종류의 것입니다.
우리는 하나 반대 또는로 표시 할 때 기억
그리고 우리는 그것을 다시 렌더링.
하지만 지금은 HTML에 무언가로 사용되는이 이벤트를 확인할 수 있습니다.
그것은 거기에 앉아 있었다.
버튼을 클릭했다.
이 버튼을 클릭하면, 그것은 종류의에 물건을 수행
잭이 불완전 할 것을 설정합니다.
여기에서 우리는 토글 버튼을 클릭의 이벤트를 연결 한
그리고 그것은이보기에 on 또는 off의 여부 반전.
>> 매우 단단히 결합하다 그래야이를 통해이 이벤트를 설정하는 좋은 방법입니다
이 관점에, 그래서 더이 하나를 확인할 수 있습니다.
나는이 렌더링 방법을 가지고, 우리는 세부 사항을 통해 갈 필요가 없습니다.
그것은 우리가 전에 있던 무슨 유사한 종류의
하지만 난 아무것도을 반복 없어 알 수 있습니다.
나는 모든 요소를​​ 인쇄 할거야 말의 일종이 UL 태그를 인쇄하지 않을거야.
나는이해야 할 일 항목을 렌더링하기위한 기능을 제공하고 있습니다.
이는 기본적으로 매우 강력한 개념이다
우리의 할 일 목록은 모든 수행 할 작업 구성, 우리는 기본적으로 지정할 수있는 경우
이러한 수행 할 작업 중 하나를 렌더링하는 방법
그때 우리는 본질적으로 우리의 강력한 백본을 가질 수는 수행 할 작업을 모두 렌더링
개인 도스에서 렌더링 메서드를 호출하여.
이 여기에 유용한 개념이다.
지금 물어 좋은 질문이 응용 프로그램이 어떻게 조합되고 있습니까?
우리는 하나의 잭을 렌더링 할 수있는 능력을 가지고 있기 때문에
하지만 어떻게 우리가 여러 수행 할 작업의 아이디어를 얻을 수 있습니까?
>> 의 그에서 살펴 보자.
이 마지막 부분입니다.
우리가 여기서 할 일 목록보기이있다,
그리고 그것은 또한 뷰의 알 수 있습니다.
놀거리와 볼거리에 몇 가지를 통해 이동합니다,
우리가 처음이해야 할 일 목록을 만들 때이 초기화 메서드가 호출됩니다.
당신이 볼 수 있듯이, 그것은 할 일 목록을 만들고이 뷰에 관련 같아요.
당신이 추가 할 때 다음 나는 그래서 기본적으로 여기에 기능을 추가 된 항목을
이 항목 추가 메서드와 비슷 우리는 전에 시소
나는 새로운 잭 객체를 생성하고, 실제로 전화 해요 알거야
이 새로운 잭 방법, 그래서 이것은 백본에 의해 제공됩니다,
나는 여기 내 속성에 전달할 수 있습니다.
그리고 지금 나는이를 사용하여 만든 모든 잭은 우리가 전에 보았던 그 기능을 얻을 것이다.
나는 텍스트 상자를 삭제 해요 전 - 작은 작은 세부 사항 - 공지 사항
그리고, 나는이 컬렉션에 추가 해요.
>> 이 거의 이상한 것 우리가 그냥 todos.push을했다 전에 왜냐하면,
그리고 우리가 수행되었으며, 이것은이 특정 프로젝트에 대한 더 복잡한 것처럼 보일 수 있습니다
그리고 당신은 그 백본 또는 각도 또는 다른 프레임 워크를 찾을 수 있습니다
특정 프로젝트에 맞게,하지만 난 그것에 대해 생각하는 것이 중요하다고 생각하지 않습니다
무엇이 큰 프로젝트를위한 큰 규모에 의미
때문에 우리는 우리가 표현 된 큰 프로젝트가 있다면
정말 복잡한 수집, 그냥 할 일 목록보다 더 깊은 무언가
의는 친구 목록이나 그런 말을하자,이 유용 올 수
때문에 우리는 정말 편리한 방법으로 우리의 코드를 구성 할 수
다른 사람보다 쉽게​​ 만들 수있는 방법
누구에 구축하는 프로젝트를 선택하고 싶었다.
당신은이 구조를 많이 제공하는 것을 볼 수 있습니다.
그리고 나서이 항목 추가에서 렌더링 전화를 해요.
당신이 볼 수 있듯이, 렌더링, 그리고 당신이 전체 구문을 이해하지 않아도,
하지만 기본적으로 각 모델은 각 렌더링 메서드를 호출하는거야.
이 어디에서 오는 그것은 일종의이다.
다만 개별 수행 할 작업을 렌더링하는 방법을 지정할 수의 것은,
그리고 전반적으로 함께 접착제를하자.
그러나 이것은 추상화하는 방법을 제공합니다
나는 각 수행 할 작업을 렌더링하기로 결정하는 방식을 바꿀 수 있기 때문에,
나는이 코드를 변경하지 것입니다.
그 어떤 종류의 멋지다.
>> 누구는 자바 스크립트 프레임 워크에 대한 질문이 있습니까?
[학생 들리지 질문]
아, 물론, 그 좋은 질문이다.
문제는 어떻게 프레임 워크를 포함 않았다했다?
대부분의 자바 스크립트 프레임 워크는 기본적으로 그냥 JS 파일입니다
당신은 당신의 코드의 상단에 포함 할 수 있습니다.
나는 모든 스크립트 태그가 내 HTML의 head 부분에 주목
그리고 최종 스크립트 태그는 우리가 작성한하는 코드입니다.
그리고 3 프레임 워크 코드은 또한 스크립트 태그입니다.
나는 CDN라는 것을에서 그 (것)들을 포함하고있어
어느 날이 시점에서 다른 사람에서 얻을 수 있습니다
그러나 모든 프레임 워크는이 - 당신은 꽤 많은 내용을 찾을 수있다
그 같은 CDN 또는 무언가에 사용할 수있는 특정 자바 스크립트 라이브러리,
그리고 당신은 이러한 스크립트 태그를 포함 할 수 있습니다.
그게 말이됩니까?
좋아.
>> 사람들은 2 개의 다른 접근 방식이다.
사람들은이 문제를 해결하는 유일한 방법이 아닙니다.
많은 다른 것들이 있다는 것을
누군가가 할 수있는, 많은 프레임 워크 거기 밖으로있다.
각도 및 백본은 전체 이야기를하지 않습니다.
최종 프로젝트 운이 좋은, 그리고 대단히 감사합니다.
[CS50.TV]