토마스 REIMERS : 안녕하세요, 여러분. 내 이름은 토마스 라이 머스. MIKE RIZZO : 그리고 마이크 리조 해요. 토마스 REIMERS : 우리는 CS50s의 TS의 두 가지입니다. 그리고 오늘 우리의 세미나를 선도하고 있습니다 자바 스크립트와 웹 애플 리케이션을위한 CSS. 당신은 함께 따라하고 싶은 경우에, 링크는 바로 거기입니다. 그리고 당신은 그것을두고 싶어 컴퓨터를 간단히? 링크가있다. 이 링크가 작은 사이트의 우리가 될 것입니다 모든 자원 또한 오늘을 가리키는 것은 많이 있습니다 우리가 작성한 유용한 정보 당신이 돌아 갈 때 깊이 더 읽기 당신은 기억하려고하는지 정확히 우리는 당신이 무엇인지, 말 했는가 등등에 대해 얘기합니다. MIKE RIZZO : 좋습니다. 그럼 시작하자. 토마스 REIMERS : 그래서 당신은 시작하고 싶어? OK. MIKE RIZZO : 네. 그래서 우리는 먼저 광범위한 시작하고 싶어 인터넷에 대한 개요 및 웹 사이트를 디자인 할 때 파일 형식을. 이 프리젠 테이션은 우리가 원하지 않는 동안 자바 스크립트에 많이 많이 들어가 나중에, 우리는 함께 시작하고 싶어 다만, 종류, 같은 조감도 어떤 웹 사이트와 방법 디자인에 대한 생각 시작을위한 웹 사이트. 이 시점에서이 남자, - 그것으로 금요일 밤 있다는 것은 -이 있어야합니다 당신의 CS50 금융 제출 문제는 설정합니다. 바라 건데, 그건 좋은 맛이었다 어떤 웹 프로그래밍을 할 수 있습니다. 그러나 여기에서 우리는 종류의,주고 싶어 다른 맛뿐만 아니라. 토마스 REIMERS : 그래서 그냥 무엇을 정리해 보면 당신이 URL에 입력 할 때, 발생 귀하의 웹 브라우저는 해당 URL 가져 컴퓨터에서 보았다. 그리고 컴퓨터가 연결 다른 컴퓨터, 이는 해당 웹 사이트를 호스팅합니다. 당신은 google.com에 갈 때 OK, 그래서, 당신이있어 Google의 중 하나에 연결된 이 컴퓨터, google.com에 대한 파일입니다. 그런 다음 특정 파일을 요청합니다. 그렇다면 당신은 이동 - 난 몰라 - example.com / index.html 파일 또는 / test.html를, 당신은 요구하시는군요 특정 파일. 그리고 웹 서버의가는 당신에게 돌아갑니다. 그런 다음 해당 파일을 통해 이동하면 - 당신이있어 한 번 컴퓨터를 가져옵니다 파일 - 그것은 시작하는거야 웹 페이지를 구축하기. 그래서 지금은 HTML 파일이, 정렬 등입니다 웹 페이지의 구조. HTML 파일도 참조 할 수있다 를 정의하는 CSS 파일, 웹 페이지의 스타일. 자바 스크립트 파일을 정의 웹 페이지와의 상호 작용. 단지 이미지입니다 이미지 파일,. 그리고 아마도, 다른 HTML 파일에 링크 하는 당신이 그 방문 할 수 있습니다. MIKE RIZZO : OK, 좋아. 그래서 사람들은, 아마, 모두가 근면 로컬 호스트를 설정 가상 머신에. 그리고 그것은 단지, 종류, 로컬 컴퓨터는 호스트 도메인 자신의 IP 주소에서 당신을 위해. 그래서 내에서, 당신은 추가 할 수 있습니다 거기에 자신의 웹 페이지를 참조하십시오. 내 말은, CS50 금융, 당신은해야 있습니다 추​​가 된 일부 HTML 페이지,, 종류의, PHP 래퍼에 싸여. 그러나 궁극적으로 무엇 PHP 페이지 출력 하였다는 HTML이었다. 그러나 처음으로 다시 생각 PSET, 우리는 설정했다 모두를위한 권한, 오른쪽? 그래서 이것은 단지 기본적으로 우리가 알 수 있습니다 사람은 아마도, 읽기, 쓰기, 수 각 파일을 실행한다. HM - 그래서 우리는 빠른을 할 거 야? 토마스 REIMERS : 그래서 우리는거야 빠른 데모를 수행합니다. 그래서 당신은, 당신을 생각 나게합니다 구글의 컴퓨터에 연결 - 누구든지 - 먼저, 파일 시스템 유용한 여러분이 공인하고 확인해야합니다 실제로 해당 파일을 보거나 그 읽기 당신이 질문 할 수 없기 때문에 파일 해당 컴퓨터에있는 모든 파일에 대해, 오른쪽? 즉, 보안 위험이 될 것이다. 등 우리가 사용하는 시스템에 따라서 파일 이 CS50 어플라이언스는 3이 할 수 있습니다 일반적으로 사람 뭔가에 대한 권한. 첫번째는 실제이다 고 말했다 파일의 소유자. 두 번째 그룹입니다 파일에 속한다. 우리는 초점을하지 않을거야 이 너무 많은. 그리고 마지막으로는 같은 종류의입니다 세계 또는의 다른 사람들처럼 해당 파일을 특정하지 않습니다하지 그 위에 어떤 소유권이 있습니다. 그래서 우리는 소유자가있는 경우, 그룹, 다음 세계. 그리고, 당신은 각 그룹에 대한 세 가지 권한 중 하나를 가질 수 있습니다, OK, 또는 이들의 체류. 당신은 읽기 권한을 가질 수 있습니다. 당신이 바로 권한을 가질 수 있습니다. 그리고 당신은 실행 권한이 있습니다. 그래서 실제의 파일 형식의 측면에서, 읽기 권한은 실제로 읽기처럼 파일의 내용. 바로 권한을 쓰고있다 파일 말했다합니다. 실행 권한은 실행 당신이 중 하나를 실행할 때처럼 파일 당신의 CS50 프로젝트. 우리는 파일에 대해 생각하고 그렇게 할 때 처럼 우리는 HTML을 읽을 필요가있을 때 세계해야 파일, 읽을 수있는, 오른쪽? 아마도 또한 소유자가 원하는 해당 파일을 편집 할 수 있도록. 그래서 주인은 필요 것 읽기 및 쓰기 권한을. 그들은 정말 실행할 필요가 없습니다. 그룹, 우리는 치료하는거야 지금의 세계와 동일. 그래서 그들은 읽기 권한이 필요합니다. 그러나 그들은 쓰기를 필요로하지 않는다 또는 사용 권한을 실행합니다. 그리고 지금, 우리는 이전에 다시 생각하는 경우 피셋, 우리가 실현하는 것은 이러한 종류 이진처럼, 오른쪽? 1은 예를 나타냅니다. 0 없음에 대한. 그리고 우리는 실제로 번역 할 수 있습니다 이 진합니다. 그래서 이진 (110)는 6 일 것입니다. (100)는 4 일 것입니다. 세계와 동일합니다. 그래서 숫자는 당신이 얻을 것이다 이 권한은 644가 될 것입니다. 당신은 다시 생각하고있는 경우 : MIKE RIZZO 당신이 뭔가를 chmoded 때, 저는 믿습니다 그들은 설정 문제에 준 당신이 할 수있는 곳의 예 chmod를 644과 같은 다음 파일 이름을. (644) 다음, 당신은 지금 직접 확인할 수 있습니다 그 어디에서 오는지. 그래서 잘하면 그 만드는 좀 더 명확. 다음 사람의 지혜 로움에 대해 - 오, 그래, 여기 또 있습니다. 그래서 600은 단지 예 것 우리는 소유자가 그 다음에 포기 읽고 바로 권한 동안 그룹 세계 모든 권한이 없습니다 파일에 액세스합니다. 토마스 REIMERS : 그리고 우리는 빠르게이 일반적인 권한의 목록입니다. 그래서 디렉토리, 당신이 원하는 실제로 711 chmod를합니다. 옆으로 빠른 -이있는 디렉토리 실행 권한은 할 수있는 것을 의미 디렉토리를 엽니 다. 이미지, CSS, 자바 스크립트, HTML 요구 644, 기본적으로, 세상 때문에 필요한 사용 권한을 참조하십시오. 그리고 너희들이 본 PHP, 우리는 그것에 대해 얘기하지 않더라도 엄격 일반적으로 chmoded된다 권한이 600이 실행 되었기 때문에 소유자의 권한. 기기에 이상. MIKE RIZZO : 그래서 당신이 아닌 경우 특히 지정 파일의 종류 실제로 설정에서 원하는 이 프리젠 테이션까지 - 우리는이 문제를 가지고 있기 때문에 모든 것이 제대로 chmoded 수 없습니다 - 당신은, 종류,에게받을거야 금지 오류가 웹 사이트 실제로 권한이 없습니다 어떤 파일에 액세스 할 수 당신이 그것을 액세스 할. 물론, 그 고정 할 수 있습니다 - 문제에 설정된 - 변경 권한을 적절하게. 토마스 REIMERS : 그리고에 대한 마지막 코멘트 빨리 지역 개발입니다 - 우리 이 문제를 제기하지만, 우리는 단지 원 그것을 다시 가져 오기 위하여 - 당신은 서버를 요구하는 경우에 - 그래서 로컬 호스트를, 예를 들어, COM 또는 무엇이든. - 당신은 특정 파일을 지정하지 않은, 컴퓨터가하려고하는 파일 하여 index.HTML라고 부탁합니다. 아니면 그것이 존재하지 않는 경우, index.php를. 쿨. 그래서 그냥 모든 것을 정리 해보이다, 바라건대, 우리가 덮여있어 그 섹션 및 강의, 지금까지 CS50에. 그리고 지금 우리는 대화를 시작하는 것입니다 에 대해 구체적으로 라이브러리를. 자바 스크립트와 CSS 라이브러리 웹 애플 리케이션을위한. 그래서 우리는 왜 한 빠른 이유 라이브러리는 프로그래밍되어 있습니다 - 문제가 많이있다 팝업 유지 프로그램, 다시, 또 다시. 당신은 알 수 있습니다 그 많은 웹 사이트 드롭 다운을 할 수있는 기능이 필요 메뉴는, 예를 들어, 또는이 기능이 필요 매우 표준 버튼을 가지고 하지 않을 수 있습니다 스타일, 쉬운 일. 이제 당신은 당신이 HTML에 들어가 시작하는 실현하는 버튼 수 실제로 정말 예쁘게 만약에 당신 아무것도하지 않습니다. 그래서 많은 사람들이 쓴 라이브러리했다. 그리고 이러한 맥락에서, 그들은이야 또한 프레임 워크라고. 우리가 사용하는거야 교환 두. 그리고 어떻게 그들이 그들이 기본적으로는 거지 코드의 미리 만들어진 조각 - CSS 나 자바 스크립트 하나 - 그 많이 빼앗아 당신이 코딩이 팀. 그래서 그들은 클래스의 무리 또는 사전 정의 에 대한 기능의 무리를 미리 정의 자바 스크립트의 경우, 어떤 당신은 나중에 호출 할 수 있습니다. 그리고 당신은, 일종의 얻을 수 없이이 코드에 액세스 아무것도 할 필요. 라이브러리의 일례는 CS50.H.이었다 즉, 우리가 당신에게 준 라이브러리이었다 주 하나, 이는 당신이 할 수 그 getInt를하고하는 GetString 같은 것들 작성하지 않고 모든 코드를 직접. MIKE RIZZO : 좋습니다. 그래서 여기처럼 우리는 포함했다 우리의 C에서 다른 파일 라이브러리, 우리는 또한에 포함해야 우리의 HTML은 다른 라이브러리 파일. 예를 들어, 우리는 포함하려는 경우 여기에 특정 자바 스크립트 라이브러리, 아마도 한 우리는 쓴이 자신이 로컬 호스트됩니다으로 라고 script.js, 우리 단지 이 표기법을 사용합니다. 그래서 우리는 스크립트 형식 같음이 자바 스크립트 소스 같음 JavaScript.js. 그리고 당신은 당신의 CS50에 다시 생각하는 경우 당신이에보고하면 금융 문제, 설정 템플릿 폴더의 header.php, 당신이 볼 수 있어야합니다 이들 중 일부가 포함되어 있습니다. 그래서 첫 번째 한 - 스크립트 - 자바 스크립트 라이브러리를 포함합니다. CSS 라이브러리를 포함하는 것입니다 색다른. 여기서, 대신 스크립트 당신은 링크 태그가 필요 태그입니다. 그리고, 텍스트 CSS 분류 약간 다릅니다. 당신은 항상 포함 할 필요가 없습니다 REL 스타일 시트. 하지만, 그것은 일반적으로 생각 좋습니다. 그리고 마지막으로, HREF,하는 당신 아마 연결을 위해 ATAGs에서 본 다른 링크 단지 지정에 그것을 찾을 수있는 위치의 링크를 클릭하십시오. 예를 들어, 우리가 원하는 경우 연결하기 다른 라이브러리 - 그냥 가정 해 봅시다 - 그 styles.css가 살았다. 그리고 우리는 그의에 그 링크 원 웹에서 호스팅, 우리는 그것을 복사합니다. 그리고 무엇에 붙여 우리는 대신 바로 여기에있다. 토마스 REIMERS : OK, 잘하면 사람들은 이미 잘 알고있는 CSS를 연결하는 방법과. 당신은에해야 할 일을했을 마지막 갈색 세트. 자바 스크립트, 여러분 중 일부는 아마 약간의 경험이 있습니다. 당신의 일부가되지 않을 수 있습니다. 그래서 지금은 알고 자바 스크립트 파일 매우에 CSS 파일처럼 당신이 그것에 연결하거나 할 수있는 의미 당신은 내부적으로 포함 할 수있다. 그리고 스크립트 볼거리에 당신을 수 있습니다. 그리고 우리를 통해 당신을 걸을거야 나중에 자바 스크립트의 약간. 그래서 라이브러리를 사용하여 - 당신이 그것을 포함 일단, 그것은으로의 말 그대로 호출하는 간단한 기능이나 추가 클래스 이름 그것. 우리가 이야기하고 싶은 마지막 것은 라이브러리의 측면에서 약 - 그리고이 기술 노트의 더 - 오픈 소스 라이센스입니다. 그래서 당신이 실제 라이브러리를 찾을 때, 당신이 생각 할 수있다 질문은 그냥 걸 OK입니다 좋아 누군가 다른 사람의 코드를 사용하여, 특히 그것은 우리가 매우 뭔가 때문에 이 과정에서 안 했잖아. 오픈 소스 라이센스의 경우에 따라서 많은 개발자 - 그들은 라이브러리를 작성한 후, 그들은 할 수 있다고 생각하는 다른 사람에게 도움이 - 웹에 게시 할 것 그것에게 라이센스를 제공합니다. 그리고 라이센스는 기본적으로 본인은 어디로 말한다 다른 권한 부여 사람들은 소프트웨어의 조각을 사용하는 다음과 같은 종류의와 규정. 우리는 좋은 사이트에 대한 링크를 포함 시켰 당신의 라이센스를 이해하는 데 도움이 당신이 그들에 뛰기. 일반적인 규정과 같은 것들 내 라이브러리를 사용에 오신 것을 환영합니다, 그래서 당신이 나에게 신용을 제공 긴으로. 내 라이브러리를 사용에 오신 것을 환영합니다, 그것이 휴식 때와 같이 너무 오래 당신은 저를 비난하지 않습니다. 당신은 너무 오랫동안 내 라이브러리를 사용에 오신 것을 환영합니다, 당신은 돈을 만들기 위해 그것을 사용하지 않는 자신을 위해. 이들은 일반적인 종류이다 규정. 이 CS50 최종 프로젝트를 들어, 매우 관련이 안되기 때문에 너희들이 사용하는 프로젝트가 있습니다 아마 오히려 종류의, 알려져 있습니다. 하지만 당신은 실제로에 나갈 때 세계와 라이브러리를 사용하여 시작하는 나뿐만 아니라으로 구현 될 수도 있고 그렇지 않을 수도 있습니다 우리가있어 더 인기있는 것들 중 일부 를 통해 갈 것. 그것은 이해할 수있는 좋은 이러한 라이선스 및에 그들이 무슨 뜻인지 이해합니다. 그리고 돌아 간다. MIKE RIZZO : OK. 그래서 지금 예로 이동 실제 CSS의. 이 시점에서 지금까지 당신은 수도 이 발생하지. 하지만 당신은에서 발생했을 수 있습니다 당신의 일상 생활 어디에서 무엇인가 즉, 하나의 브라우저에 한 가지 방법을 찾습니다 같은 모양하지 않을 수 있습니다 다른 브라우저의 방법입니다. 이것은 브라우저 브라우저라고합니다 호환성. 그리고 점점 그것은 더가는 군 특히 등, 더 문제 브라우저가 더 많은 자유를 가지고 그들이 원하는 물건을 구현합니다. 그래서를 극복하기 위해, 실제로이 Normalize.CSS라는 훌륭한 라이브러리입니다. 토마스 REIMERS : 우리는 링크를 포함. 이 시점에서, 그것은 도움의 경우 거기에 노트북을 가지고 사이트를 찾고 있습니다. 그리고 우리는 바로 당신이를주고있다 이제 단순히 때문에 CS50 결승전 이 프로젝트는 실제로 예정 그것을 구현하도록 요청 유사 및 브라우저를 통해. 그러니 당신의 뒤쪽에 유지 헤드는,이 수려 라이브러리 이 때문에, 종류의, 물건을 표준화. 파이어 폭스에서 뭔가 보여줄 수 있습니다 왼쪽에 하나의 픽셀로. 그리고 크롬은 실제로를 결정할 수있다 무엇을 의미하는 10 픽셀했다 왼쪽으로. 그리고 당신은이 작업을 표준화하고 싶습니다. 표준화는 실제로 정말 잘 할 것입니다 있는지 만드는 작업 사이트 브라우저에서 동일하게 보인다. 우리는 원한이 경우 단지 : MIKE RIZZO 정말 빠르고 쇼 링크를 클릭 당신이 무엇을 즉, 당신을 좋아 보인다 사용하여 다운로드 할 수 있습니다 거대한 다운로드 버튼을 누릅니다. 아니면 내가 그것에 대해 더 읽어 보시기 바랍니다 아래에이 링크를 클릭하여 오른쪽 코너입니다. 토마스 REIMERS : 그리고 만약 당신이 실제로 더 많은 바로 읽기를 클릭 - GitHub의에서 원본을 클릭 - 당신은 실제로 오픈 소스를 볼 수 있습니다 거기 LICENSE.md에 라이센스. 그리고 당신은 여기에서 볼 수 있습니다 인기 MIT 라이센스. 다시 말하지만, 당신이 텍스트를 읽는다면, 당신은 사이트에서 찾을 수있을 것이다 우리는 이전에 참조하고 할 수있을 판독하지 않고 승낙 법적 용어를 통해. MIKE RIZZO : OK, 좋아. 그래서 표준화이다. 우리는 당신을주고 싶어 그 정말 빠르게. 오, 당신은 질문이 있습니까? 청중 : 그래서 당신이 그것을 다운로드, 당신 단지 그들이이 그 규정을 따르 다운로드 버튼 아래? 토마스 REIMERS : 네, 그래서 당신이 다운로드 할 때 - MIKE RIZZO : 아, 그건 좋은 점이다. 그래서 질문은 어떻게했다 우리는 실제로 그것을 다운로드? 우리가 링크를 클릭 그래서, 우리는 참조 실제로 팝업 있음 소스 코드. 그래서이 작업을 수행하기 위해, 우리는 무엇을 할 수 그냥 다른 이름으로 저장을 클릭합니다 않습니다. 저장하고 수행해야 파일을 불러옵니다. 그리고 우리는 저장하도록 선택할 수 있습니다 그것은 normalize.CSS으로. 그리고 당신은 그것을 연결해야 할 것 - 토마스 REIMERS : 같은 방식으로 다른 파일에 링크합니다. 당신이 그것을에 연결 일단, 큰 무엇 표준화에 대해 실제로 것입니다 모든 하드 돌봐 그 자체로 작동합니다. 당신이하지 않는 것을 의미 어떤 클래스를 추가합니다. 당신은 이상한 아무것도 할 필요가 없습니다. 그것은 당신없이 정상화됩니다 더 아무것도. 네, 당신은 그것을 포함해야합니다. Google 크롬이 응답하지 않습니다. 옆으로 그냥 빨리 - 나는 우리가이 일에 뛰어났습니다. 이 프레젠테이션의 나머지 부분은 빠른 개요가 될 것. 라이브러리의 조사. 기본적으로, 그들은 무엇을합니다. 그들은 무엇. 그들이 유용하다 방법. 당신은 그 (것)들을 구현하는 방법. 당신이 그들을보고 시작하려면 따라서 다음과 독파 그들은, 내가보기 엔 그 격려 할 것입니다. 양자 택일로, 당신은 또한 환영 그들을 다운로드 등 시작 시야에 그들은 그들이 볼 수 있습니다 같이 또는 당신이있는 경우에 그들이 당신 앞에있는 노트북. 그렇지 않다면, 당신은 유지에 오신 것을 환영합니다, 우리가하는 말을하는 이야기. 우리는 계속 얘기 할 것입니다. 그리고 우리는 희망, 마지막에 시간이 우리는 사실을 보여주는로 얻을 것이다 어떤이 라이브러리의 일부 처럼. MIKE RIZZO : 차가운. 좋아요, 이제 이야기하자 최고에 대한 글꼴. 토마스 REIMERS 그래서 글꼴 최고은 (는) 특히 정말 깔끔한 사이트, 작은 예술이다 우리 재능. 최고 이름의 글꼴을 무시하고, 그것을 제공 당신이 있습니다 아이콘의 무리 매우 유용합니다. 그래서 많은 시간 당신을 구현합니다 당신이 그렇게 좋은 X처럼 할 수 있습니다 아이콘 당신이 뭔가를 닫을 수있다. 아니면 편집 버튼의 일종을 할 수 있습니다 같은 연필 드로잉 다른 사람이있다. 당신이 배울 때 그의 그 아이콘을 그리기 될 수 있습니다 매우 지루하고 어렵다. 글꼴 최고 - 만약 당신이 실제로 사이트로 이동 - 아래에 당신에게 아이콘을 많이 준다 상단에있는 아이콘. 그래, 바로 가기. 그것은 당신에게 많은 것을 줄 것이다 무료 아이콘입니다. 그래서 여기에 우리가 같은 일을 참조하십시오 별표, 바, 번개, 달력, 버그, 책, 등등. 이것은 매우 유용 할 수 있습니다. 당신이 포함하는 방법은 (가) 있습니다 말 그대로 CSS 파일. 그리고 후에는, CSS 파일을 포함했습니다 당신이 할 수있는 것은 당신이 만드는 것입니다 에 I. 그것은의 satands라는 태그 클래스 FA로 아이콘 최고 글꼴에 서. 그리고, 어떤 클래스 당신이 원하는. 나는이 플러스의 아이콘을 원하는 그렇다면 여기 광장, 내가 줄 것 그것은 클래스 FA. 그리고 FA 하이픈 플러스 하이픈 광장. MIKE RIZZO : OK, 차가운. 토마스 REIMERS : 그리고, 마지막 CSS 라이브러리 우리는 우리가 통과 할 CSS에 최소한을 유지하려고 라이브러리 우리가 실현 않기 때문에 이 프리젠 테이션의 제목 자바 스크립트 라이브러리입니다. 그러나 우리는 우리가 잘 수 있다는 생각 다른 도서관을 소개 우리는 도서관에 대해 이야기하는 동안. 그것은 구글 웹 글꼴입니다. 그리고 무엇 구글 웹 글꼴 당신에게 수 할 것은, 당신의 웹 사이트에 글꼴을 추가합니다 그것을 만들 수있는 정말 쉬운 방법입니다 예쁜과 세트를 구별하기 가지고있는 경우 모두에서 다른 사람입니다 좋은 글꼴 또는 좋은이있는 경우 글꼴 모음입니다. 구글 웹 글꼴도 다른 좋은 그것의 의미에서 라이브러리 정말 인도 설치. 당신이 링크를한다면, 그건 google.com / 글꼴, 저는 믿습니다. 당신은, 당신을 그 수행하면 글꼴을 선택할 수 있습니다. 당신의 왼쪽에 선택할 수 있습니다 두께, 경사, 등등. 그리고, 한 번 당신은 하나를 선택한 당신은 빠른 사용을 클릭 할 수 있습니다. 바로 거기. 상자의 오른쪽 하단. 그런 다음, 아래로 스크롤합니다. 우선, 그들은 당신에게 CSS를 제공하는 당신은 실제로 그것에 연결해야합니다. 그것은 바로 거기에 있습니다. 당신은 복사 안으로 그 붙여 넣을 수 있습니다 그리고이 하나의 좋은 점은 실제로도 할 필요가 없습니다 파일을 다운로드합니다. 무엇 할 것 것은 그것이 무슨이다 그것은 구글의 버전에 링크. 그래서 뒤로 그게 무슨 의미한다. 즉, 사용자에게 의미 할 때 파일을 다운로드 - HTML 페이지를 다운로드 - 당신의 HTML 페이지는이 파일을 참조 할 것입니다. 그럼, 컴퓨터는 볼 것, 오, 그것은 오히려 google.com에서 호스팅되는 것 theirsite.com보다. 나에게 해당 파일에 대해 구글을 물어 가자. 그리고, 그것은 포함 것 거의 그것은 것처럼 자신의 사이트의 일부. 토마스 REIMERS : 차가운. 그리고 당신은을 포함하면, 다음에 당신의 CSS에 포함, 그것은 당신에게 제공 실제 라인. 그래서 당신은 속성 글꼴 패밀리를 설정 글꼴의 이름과 동일. MIKE RIZZO : OK. 그래서 우리는 단지 CSS로 마무리. 그리고 당신의 일부가 아니라, 생각 될 수 있습니다 우리는 CS50 금융에 대한 몇 가지 CSS를했다. 그러나 CSS 라이브러리는 부트 스트랩했다. 우리는 실제로 부트 스트랩 조금 포함 나중에 자바 스크립트에서와 때문에 부트 스트랩 CSS 라이브러리도 제공 자바 스크립트 그 많은 부트 스트랩이나 트위터 - 누가 부트 스트랩을 만들어 - 자신의 CSS를 모두 관리하기 위해 사용합니다. 토마스 REIMERS : 사람이 어떤이 있는가 지금까지 일반적으로 CSS에 대한 질문? 우리는 좋은거야? 신난다. MIKE RIZZO : 신난다. 토마스 REIMERS : 그래서 이동 자바 스크립트에 대한. 마이크 리조 : 그래서 우리가 얘기하고 싶어 jQuery를 함께 시작합니다합니다. 누구 j​​Query를 들어있다 전이나 그것을 사용? 그래, 몇? 그래서 그냥 기본으로 작업하는 경우 자바 스크립트, 당신은 자신을 찾을 수 있습니다 많은 긴 선택기를 많이 입력. 그래서 jQuery를하는 일은이 제공됩니다 자바 스크립트에 대한 좋은 래퍼 당신은 쉽게 선택할 수있는 언어 다른 요소를 조작 의 문서 객체 모델 사이 웹 페이지 또는 내가 생각하는 DOM, 너희들에 들어있다 이 시점에서 강의. 토마스 REIMERS : 당신이 들어 본 적이 없다면 그하거나 감시하지 않은 경우 강의 그러나, 문서 객체 모델이다 기본적으로 일이 어떻게 표현된다. 따라서 HTML은 종류의 나무처럼 보이는 당신은 실제로 그것을 그릴 때. 당신은 상단에있는 HTML 요소가있다. 당신은 머리와 몸이있다. 그리고, 당신은 내 다른 모든 것을 갖추고 있습니다. 즉 DOM으로 불린다 - 문서 객체 모델. 그래서 개체를 나타내는 모델 문서가 생각하는 가장 쉬운 방법입니다 그것에 대해. 그리고 jQuery를의 좋은 점 중 하나 정말 이송을하게됩니다 그와 내에서 조작 요소 이 믿을 수 없을 정도로 간단하다. 따라서 단순한 사실, 즉 대다수 자바 스크립트 라이브러리 또는하지 않을 경우 대다수 사람들의 그랜드 대부분 당신이 볼 수 실제로 이렇게 jQuery를 필요로 그들은 단순히 자신을 실행할 수 때문에 당신은, 당신을 jQuery를 가지고 있지 않은 경우 하려고 많은 시간을 낭비 것 일정을 선택하는 방법을 알아낼 요소와 어떻게 다른 일을 할 수 있습니다. 그리고 jQuery를 대한 다른 좋은 점 그것은 크로스 브라우저 호환 것입니다. 우리가 말했다 그래서 다시 기억 모든 브라우저에서 구현하지 일 같은 방식으로? 이것은 심지어 자바 스크립트에 해당됩니다. 그리고 jQuery를에 대한 위대한 업적 중 하나 그것을 감지 것입니다 브라우저를 감지 적절한 방법. 그래서 만약 당신이 요소를 선택해야하는 경우, Internet Explorer는 당신이있어 말할 수 이 방법을 수행 할 예정. 파이어 폭스는 올바른 말을 할 수 방법은이 방법이다. jQuery를 상관하지 않습니다. 당신을 선택할 수 jQuery를 말할 때 요소는 그것의 방법을 알아낼 것이다 브라우저 내에서 그것을 어떻게해야 사용자는 현재이고, 그 수행 그런 식으로. MIKE RIZZO : 그럼에 대해 얘기하지 말자 jQuery를 사용의 약간. 그냥 PHP와 같이, jQuery를 특정이 달러 기호에 대한 욕​​망. 그래서 당신은 그 어떤 jQuery를 찾을 수 있습니다 - 물론, 모든. 당신은 때때로 달러를 대체 할 수있다 단어 jQuery를 함께 서명. 그러나 일반적으로, 그냥 있기 때문에 짧은, 당신은 jQuery를이되고 볼 때마다 그것은 달러 기호 일 것이다 사용. 그래서 여기에 우리는 단지 시작을 표​​시하고 DOM의 요소에 대한 셀렉터. 여기에서, 우리는 달러 기호 다음에이 다음 열기 괄호 및 따옴표. 그리고 따옴표 우리의 선택기로 이동 다른 요소. 그냥 CSS처럼, 우리는에 선택기가 필요 다른 요소의 스타일을 할 수 페이지 내. 그 다른 선택기 번역 정확히에 jQuery를하고 자바 스크립트, 대부분의 경우. 그래서 여기에 우리는 도트​​ foo는 있습니다. 당신이 강의에서 기억이 경우, 점은 클래스를 의미한다. 그래서 우리는 요소를 선택하고 Foo 클래스와. 그래서 내가 가서 열 경우에 우리의 자바 스크립트 콘솔 여기 정말 빠르게 난 그냥 입력하면 바로 그것을 보여 달러 기호, 우리는 몇 가지의 볼 등장 기능. 그리고 그것은 단지 jQuery를에 의해 정의 된 것. 토마스 REIMERS : 당신의 사람들을 위해 익숙하지 않은, 콘솔은 도구입니다 당신은 할 수 있습니다 크롬, 내 기본적으로,에서 자바 스크립트를 실행 현재 페이지. 이것은 당신은 매우 유용한 찾을 때 실제로 디버깅하고있어 을해야하고, 현재는 무엇인가 일부 글로벌 변수의 값 또는 어떤 다른 것입니까? 그것은 제외하고 GDB 같은 종류의 당신이 실제로 수 와 페이지의 요소를 조작 훨씬 쉽게 방식으로 그것을. 그리고 또한 그것은 기본적으로 확인하지 않습니다 그것은 무엇을 수행하기 전에 당신과 함께합니다. 그래서 반면, GDB는 같은 수 있습니다, 당신은 반드시 다음 단계를 실행하려면? 콘솔은 실시간으로합니다. 웹 페이지 렌더링하고 그래서 같이 그것은을하고 있는지 어떤 일을 의회는 또한 함께 실행. 그리고 당신은에 전가 코드를 넣을 수 있습니다 해당 콘솔, 어떤 것 페이지에서 실행. MIKE RIZZO : 그래서 콘솔을 입력하려면 나는 짧게 것 같아요 이 작업을 수행하는 방법을 언급한다. 당신이 가질 수있는 마지막 문제 사용되는 크롬의이 요소를 검사 함수 또는 페이지 소스보기 - 그 딱하여 액세스 할 수 있습니다 페이지 또는 특정 클릭 요소 검사 하나를 수행 요소 또는 페이지 소스보기. 우리는 또한 자바 스크립트에 액세스 할 콘솔에 의해 직접 요소를 검사 선택. 그럼 당신이 히트 콘솔 맨 오른쪽에. 또는, 당신은 갈 수 오른쪽 상단에, 이 화면에서 잘리는 곳 그것은 세 개의 가로 막대가 있습니다. 그리고 당신은 도구에 가서 다음 자바 스크립트 콘솔 여기에 위치를 볼 수 있습니다 - 적어도 Windows에서 - 바로 가기는 제어 그럼 J. 시프트입니다 우리는 요소를 선택하려는 경우 이 페이지 내에서, 단지처럼 보여 주었다 이전에, 우리는 달러 기호 열린 괄호을 다음 인용. 흥미로운 점은, 일반적이다 작은 따옴표와 큰 따옴표는 교환. 그래서 많은 사람들이 단지 하나의 사용 따옴표가 입력하는 빠르기 때문에 큰 따옴표보다 당신이하지 않기 때문에 Shift 키를 누른 상태에서해야합니다. 그래서 지금 당장 그렇게 할 수 있습니다. 그래서 내가 뭔가를 선택하려면 클래스. 컨테이너는, 내가 아는 바로 때문이다 에 뭔가 우리의 웹 페이지 지금. 그리고 Enter 키를 누르십시오. 그리고 우리는 그것을 선택한 것을 볼 수 있습니다. 그래서 나타 그것이 해당 개체를 반환했습니다. 그래서 기본적인 선택이다. 우리가 사실을 조작하려는 경우, 당신이 뭔가를 호출해야합니다 그 선택에, 어떤 우리는 이후에 얻을 것이다. 토마스 REIMERS : 그래서 그냥 보는 더 깊이,이 다르지 않습니다 우리는 C. 제 함수 호출보다 여기에 함수의 이름입니다 조금 이상한. 그것은 달러 기호입니다. 그냥 함수의 이름입니다. 그것은 특별한 것이 없다. 저희는 열린 괄호가 있습니다. 그 후, 우리는 우리의 하나의 인자를 가지고있는 이 경우 문자열로 발생, 하는 그것을위한 선택이다. 그리고, 우리가 우리의 닫힌 괄호. 그거야. 그것은 그렇게 크게 차이가 있습니다. 하지만, 그것은 매우 이상한 모양 않습니다. 그리고는, 종류의, 고집이 될 수 있습니다 많은 사람들이 지적한다. MIKE RIZZO : 그래서 유사하게, 우리가 원하는 경우 ID가있는 요소를 선택, 지금 우리는 별을 선택하려면 대신 클래스의 ID. 그것은 비슷한 일이 될 것입니다 어디 다만 ID에 대한 날카로운 서명을한다. 그래서 우리는 모두 여기에 선택하고 ID 바있는 요소. 토마스 REIMERS : 그리고이 확장됩니다. 즉, CSS를 확장. 그냥 CSS처럼, 당신은 모두를 선택할 수 있습니다 클래스 foo는이 링크. 여기서, 같은 일이다. 당신은 선택 할, a.foo 할 수 클래스 foo에있는 모든 링크. 당신은 날카로운 막대를 할 수있는 것 ID 막대 등 링크를 선택합니다 에 등. 모든 CSS 셀렉터는 유효 jQuery를 선택. MIKE RIZZO : 네. 좋아, 그럼 이제 조금 들어 가지 우리가 할 수있는 조작의 우리의 jQuery를. 그래서 jQuery를 특정 형식에있다 우리가 사용하는 표기 끝 점. 그리고 당신은이 같이 생각할 수 있습니다 C 우리는 다른 구조체를했다 방법. 그리고 그 구조체으로 이동하려면, 당신은 것 그들에 얻을 수있는 점을 사용합니다. 이것은 종류의 유사한 것입니다. 지금은 우리는이 내의 기능을 가지고 우리가 그것을 호출 할 수있는 셀렉터. 그래서 여기에, 최초의 예 당신은 CSS 셀렉터입니다 볼 수 있습니다. 기본적으로, 어떤이가하는 것은입니다 이 문제에 대한 첫 번째 요소의 CSS를 적용 당신이 선택한 것 - 당신은 선택이 요소 - 그 값. 토마스 REIMERS : 너무 쉽게 번역 만약 jQuery를, 기본적으로, 그 것 그냥 foo는했다. 그리고 CSS에서 말했다, 빨간색과 이서. 이 같은 생각이다. 어떻게이 일을 끝낼하면이 선택되어 있습니다 모든 foo는 요소. 그리고 그것은 적용된. 정렬, 속성 색 빨간색과 같다. MIKE RIZZO : 마찬가지로, 우리는 또한 변경할 수 있습니다 무엇의 실제 내용 페이지의 HTML에 표시하는 그것이 의미하기 때문에 정말 멋진 당신의 웹 페이지는 이제 완전히 동적 일 수 정적 일 필요는 없습니다 당신은 PHP를 사용하여 인쇄하는 것이 처음 중 페이지가로드되는. 그래서 여기, 우리는 변경하려는 경우 페이지의 실제 HTML, 우리는 지금 것 HTML의 함수를 호출 한 후 바로 우리가로, 지정한 삽입 우리가 선택하는 요소입니다. 그래서 여기에 우리가 가진 요소를 선택하고 Foo 클래스 다음은 HTML의 말 지금 안녕하세요입니다. 토마스 REIMERS : 그리고 당신이 생각하는 경우에 대한 의 유용한 응용 프로그램은 무엇입니까 이,이 CSS의 하나는, 우선 그 당신은 생각을 시작할 수 있습니다 측면에서도 드롭 다운 메뉴. 당신은 같은 일을 시작할 수있을 때 사용자는 상단 부분을 가리키면 드롭 다운, 당신은하고 싶은 눈에 보이는 하단 부분. 오른쪽? 그래서 CSS, 우리는 특성을 가지고 눈에 보이는 무언가를 만들 수 있습니다. 디스플레이 대장 없음 같은 것들 그것은 눈에 보이지 않는 만들 것입니다. 디스플레이 블록은 볼 수 있도록합니다. 또는 당신은, 당신을 간단 가고 싶어도 가시성 등호 같은 것들을 가지고 눈에 보이는 가시성 숨겨진 같습니다. 그리고 당신은 물건을 구현하기 시작할 수 같은 메뉴 바로 드롭 다운 당신은 방법의 아이디어를 얻은 후에 이 열 때 당신이 알아낼 수, 우리는 매우 간단를 통해 얻을 수 있습니다있다. 그러나 우리는 볼 시작할 수 있습니다 이것의 응용 프로그램. 비슷한 의미에서, 당신이 있다면 시도 및 채팅, 구현의 말을하자 엔진 당신은 조금을 만들고 싶어 당신은했습니다 때마다 연설 거품 올 새 메시지를 가지고, 당신은 일단 새 메시지, 당신은 조금을 만들 수 있습니다 연설 거품 변경에 등장 페이지의 HTML, 오른쪽? 여분의 연설 거품을 추가하여 거기에 여분의 텍스트. 그래? 청중 : 그래서 당신은 내이를 포함합니다 정렬 등의 HTML 코드 [들리지? MIKE RIZZO : 오른쪽. 그래, 우리가 얻을 수 있습니다 조금있다. 그래, 유사의 PHP에 약간. 정확하게 유사하지. 만들 수있는 좋은 차이는 무엇인지이 실제로 우리가 편집 할 때 편집하는 그것은 될 수 없습니다 때문 페이지 되는 실제 파일을 편집 서버에 보관하기 때문에 세계 권한이 안 파일을 편집 할 수 있습니다. 이것은 단지 페이지에 무엇을 편집하는 그리고 무엇에 표시되는 것 브라우저. 그래서 당신은 후 페이지를 다시로드한다면, 우리로 뭔가를 삭제, 말 우리가 제거 호출 할 수있는 참조 그 일이 다시 나타 것이다. 토마스 REIMERS : 그래서 한 가지 방법에 대해 생각하기 이것은 당신의 컴퓨터이야 경우이며, 마이크, 종류의 서버입니다. 어떤 일이 일어날 것은 내가 갈거야입니다 이봐, 난의 복사본을 할 수 있습니다, 마이크를 물어 이 웹 페이지? 그리고 그는 나에게 사본을 줄 것이다. 아니, 원래의 것은 아니다. 그냥 복사합니다. 그리고, 그것은, 오, 같은 것 자바 스크립트는 여기에있다. 분명히, 나는 편집해야 페이지는 다음과 같이합니다. 그리고 난 당신의 사본을 편집하고 있습니다. 하지만 그 초래 아니에요 실제 사본. 그리고 난다면 다시 물어 페이지를 새로 고침 - 이봐, 나는 또 다른 깨끗한 복사본을 할 수 있습니다 - 그는 내게 줄 것 다른 깨끗한 사본. 그리고, 나는 같은 일을 할거야 같은, 오,이 말로는 여기 JS 이 작업을 편집 할 수 있습니다. 그리고 그 일을 계속하겠습니다. MIKE RIZZO : 그래서 정말 재밌어 jQuery를이 당신이 할 수있는 실제로 다른 유형을 추가 귀하의 페이지에 애니메이션. 혹시 여기서 본 적이 나도 몰라 당신은 채우기에 양식을 시도하고 온라인 당신은 기입하지 않는다 제대로 일. 그래서 작은 일이 아래로 슬라이드 상단에 당신은 말한다 제대로 수행하지 않은. 다시 시도하십시오. 그리고, 심지어는 그냥 밀어 수 있습니다. jQuery를이 기능을 내장하고있다 밝혀 즉,이 모든 확인 애니메이션 정말, 정말 쉽습니다. 그래서 페이드 먼저가 아웃 기능을하는 당신이 뭔가를 호출 할 수 있습니다. 그리고 그것의 CSS를 변경하는 방법 애니메이션 방식으로 해당 요소. 그래서 어떤 요소를 가져 와서 당신은에 페이드 아웃 호출합니다. 그리고, 천천히의 불투명도가 변경 그것은 완전히 투명하게 될 때까지. 토마스 REIMERS : 다른 인기있는 하나 하게되는, 아래로 슬라이드합니다 뭔가가 아래로 슬라이딩으로 나타납니다. 따라서 드롭 다운 메뉴의 경우, 다시, 우리가 감지하는 방법을 알았을 때 이 일이였다되었을 때, 당신은이 바닥을 말할 수 부분은 지금 아래로 밀어 넣습니다. 그리고, 그것이 나타나는 아래로 밀어. MIKE RIZZO : 그리고, 당신은 단지가있는 경우 마음에있는 애니메이션의 몇 가지 유형이 jQuery를 반드시 제공하지 않습니다. 예를 들어,이 jQuery를 가정 해 봅시다 당신은 슬라이드도 제공하지 않습니다 아래로 슬라이드 업. 그럼, 당신이 밀어 싶었 가정 해 봅시다 에서 왼쪽 또는 도착에 뭔가 CS50 등의 오른쪽 종류 메인 페이지마다 수행 새 패널로 이동합니다. 당신은 아마에있을 것 사용하여 직접 구현 jQuery를 내 기능을 애니메이션. 그래서 마찬가지로, 당신은 단지 애니메이션. 그리고, 그 안에 그것은 걸립니다 다른 값의 사전 당신은 통과되어 있다는 것을. 그래서 여기, 우리는 애니메이션을 원하는 경우 요소 foo는는 자사의 폭 하나 팽창 또는 80 픽셀로 계약, 가 현재 무엇에 따라 달라집니다. 우리는 다만 그것을 통과 할 것 그 안에 인수. 다른 인수를도에 애니메이션 당신은 예를 들어, 전달할 수 있다는 것을, 애니메이션 속도 당신이 그것을주고 싶은. 그리고 그렇게, 그냥 말을 빨리 구글 jQuery를이 애니메이션. 그리고,이 페이지를 데리고, 당신은 할 수 그것은 다른 잔뜩있어 참조 당신이 그것을 전달할 수있는 속성. 그리고 난 당신을 격려 - 만약 당신이 올 때마다 당신이하지 않는 일에 걸쳐 알고 있거나 단지에 대해보다 자세한 정보가 필요 하시다면 호출 할 수있는 특정 방법 뭔가 - 다만 구글 그것. jQuery를 매우입니다 잘 문서화. 그리고 종종 시간이 많이 있습니다 그들이 당신을 제공 예. 우리가 아래로 스크롤하면 - 길 아래로 - 우리는뿐만 아니라, 사용할 수있다. 다시 때 현상은 실제로 간다 쓰기의 문제를 통해 도서관, 그들은 일반적으로 원하는 그것을 사용하는 사람. 그래서 함께가는 문서 수. 그리고 그 문서는 일반적으로 할 수있다 인 프로젝트 페이지에서 찾을 우리는 당신의 그 원래의 사이트를 준 이유 당신을 연결하는 시작, 프로젝트 페이지 당신이 할 수 있도록 그 설명서를 참조하십시오. 일반적 경우 프로젝트 페이지 의 [청취], 당신을 말했다 클래스의 이름. 자바 스크립트의 경우는 준다 당신이 함수의 이름입니다. 그런데, 우리가 정상까지 이동하면, 기능에 대한 빠른 보조 노트는 구현 된 기능을 볼 때마다 하드와이 같은 중간에 브라켓, 그 수단 그 속성은 선택 사항입니다. 그냥 머리 위로. 나는 질문을 많이 봤어요 그것에 대해. 그래서 여기에 우리가 볼 수 애니메이션 속성 소요 필요한 인수로. 그리고 나머지는 선택 사항입니다. 사이드 주 - 당신은 정렬이 생각할 수있는 의 매뉴얼 페이지 등을들 수있다. 매뉴얼 페이지는 C에 대한 문서이며, 뿐만 아니라 다른 것들의 많은. MIKE RIZZO : 그래서 우리가 배운 방법 페이지에 다른 CSS를 변경, 그것을 애니메이션, 및 HTML을 추가, 제거. 그러나 실제로 가장 강력한 중 하나 자바 스크립트에 대한 것들 특히 jQuery를 - 무엇 당신이 할 수있는 것은 반응입니다 일이 다른 요소. 예를 들어, 여기에서 우리는 가지고있다 이벤트 핸들러. 때마다 이것 저것은 의미 이벤트가 발생, 우리는 그것을 처리 특정 방법. 그래서 여기에, 일반 jQuery를 이벤트 처리기에 대한 점이다. 그리고, 첫 번째 것은 당신이 제공 어떤 이벤트가해야 수신 될 수있다. 그래서 여기, 그것은 클릭의 그 우리는 기다리고있다. 토마스 REIMERS : 다른 방법으로는이 호버에있는 매우 인기입니다. 그래서 다시 메뉴 아이디어를 아래로 내 드롭합니다. 당신은 호버에 최고를 할 것이다. 그리고 당신은 그것을 변경할 수 있습니다. MIKE RIZZO : 오른쪽. 그리고, 그렇게되면, 그냥 우리는 줄이 기능을 실행 인수로 그 그것은 인사 또는 인사 알립니다. 토마스 REIMERS : 그래서의 경우 자바 스크립트는, 이것은 우리가 필요한 곳​​입니다 C.에서 자신을 제거 우리는 할 수 실제로 인수로 기능을. 그리고 많은 정말로있다 이 작업을 수행하는 복잡한 방법. 우리는 한 가지 방법을 홍보하는 것입니다, 정의 할 수있는 인 바로 작동합니다. 그래서 당신은 함수로 요청 할 때 매개 변수는, 당신은 기본적으로 그저 함수를 정의하려고 그 자리에서. 그리고 당신은 함수를 정의하는 방법 자바 스크립트에서 당신은 말 그대로 기능을 말한다. 그리고, 일반적으로, 이름 함수. 그러나 우리는 참조 할 것 일은 없습니다 이 기능을 다시. 그래서 우리는 이름없는 둡니다. 그런 다음 괄호 다음 곱슬 중괄호, 그리고 그 안에있는 코드. 그래서 우리는이 캔을 이해 약간 혼란 스러울 수. 그래서 우리는 당신에게 일반적인 형태의 줄 이벤트 핸들러가 어떻게 생겼는지 아래, 어떤 이벤트에 있습니다. 그리고, 그 안에 코드. MIKE RIZZO : 어떤이 있습니까 이에 대한 질문? 이것은 약간 혼란 스러울 수 있습니다 당신이 그것을보고 처음. 토마스 REIMERS : 당신은 실제로 원하는 파일을 열고 그들에게 몇 가지를 보여 jQuery를 지금? MIKE RIZZO : 그래, 그렇게하자. OK. 토마스 REIMERS : 그래서 지금 우리가있어 어플라이언스. 그리고 우리가 한 것은 우리가 찍은 것입니다 index.html을 모두 만드는 자유 에 링크 파일, 자바 스크립트 파일. 그리고 우리는 열 수 -을 그래. 글쎄, 두 가지 작업을 수행합니다. 첫번째는에 링크이다 자바 스크립트 파일. 그리고 우리는 여기에 그를 볼 수 있습니다. 우리의 머리에있는 것을 볼 HTML 문서, 특히. 그래서 당신이 볼 수 있습니다 그 우리는 기본적으로 SRC 말, 어떤 소스를 의미합니다. 그리고 그 URL입니다. 그래서 여기에 우리가 있다고 말할 수 있습니다 jQuery를 포함. 그리고 우리는 또한 스크립트를 포함 시켰습니다. 자바 스크립트를 포함하는 다른 방법은 당신은 인라인 스크립트를 포함 할 수 우리는 아래에이 태그로 어디에 스크립트 형식이 텍스트 자바 스크립트를 말합니다. 그래서 우리는 우리가있어, 듣고, 말하고있는 스크립트를 포함하는 약. 그리고 스크립트의 유형입니다 텍스트의 유형입니다 자바 스크립트,. 매우 간단합니다. 마이크 리조 : 그래서이, 종류, 가져옵니다 우리가 포함하는 방법에 대한 질문 우리의 파일에 자바 스크립트로 인해 때 우리 PHP는, 우리는이 같은 일을했다. 그리고, 우리의 PHP 함수를 가지고 - 이제 주식이 할 말을하자 그 뭔가 - 거기에 간다. 그러나 지금 우리는 스크립트 태그가 우리는 실제로 어떤에게, 그것을 줄 것을 HTML 자체의 일부가 아니기 때문에 그것과 같은 HTML 파일 인 날조 PHP에 실제로 갈 경우 때문에 그리고 페이지의 소스를 보면, 거기에 이러한 스크립트 태그를 볼 수 있습니다 자바 스크립트와 관련된으로 점에서 그들. 우리는 싶었 그럼, 경우 일부 자바 스크립트를 작성 - 그냥 우리가 본문을 변경하고자한다면 다음과 지금 내가 가지고 있지 않기 때문에 난 정말 할 수있는 다른 태그 본체 외에 편집 할 수 있습니다. 그냥 내가 원한 가정 해 봅시다 그의 CSS를 변경합니다. 그래서 우리는 가서 바꿀 것이다 빨간색으로 그것의 색상. 그래서 파일을 저장합니다. 이제 다시 우리의 웹 페이지로 이동하자, 새로 고침, 그것은 자동으로 수행 이 기다렸다처럼 보일하지 않았기 때문에 우리가 듣고되지 않은 모든 때문에 이벤트 나처럼 아무것도. 토마스 REIMERS : 그래서 우리는 다시 이동하는 경우 특히 파일 - HTML보기 파일 - 당신이 가고있는 무슨 보는 것은 우리가 있습니다 - 이로드되었는지 기억 정렬 날짜순으로. 그래서 우리는 먼저 머리를해야합니다. 그것은 그 두 개의 파일을로드합니다. 그 다음 우리는 몸으로 이동합니다. 그리고 우리는 헬로 세계를 참조하십시오. 그래서 우리는 헬로 세계를 렌더링합니다. 그리고 우리가 마지막 일 우리는 스크립트 태그가 있습니다. 이 때문에 그래서 스크립트 태그를 실행 무엇을 기다리는를 이야기하지. 그리고 그 가장 기본적인의 자바 스크립트를 실행하는 방법입니다. 그렇게 말한다면, 당신은 스크립트를 넣을 수 있습니다 헤더에 태그를 그냥 이 점을 보여? 그리고 그 실행합니다. 우리는 알거야 그것이 색상을 변경하지 않았다. 그리고 이것은의 문제 중 하나입니다 자바 스크립트는 일이로드 있다는 것입니다 시간 순서. 그래서 시간에 해당하는 코드 실행되고, 우리는 선택 - 돌아가서 - body 태그. body 태그는 아직 존재하지 않기 때문에 자바 스크립트는 HTML과 일치합니다. 따라서 브라우저가 선택의 몸과 같습니다. 아직 그런 일이 없다. 그래서 우리는 그것을 무시할 수 있습니다. 그리고 우리는 계속. 그리고 우리 몸의 태그를 정의합니다. 그러나이 업데이트 없구요. 그래서 당신은 스크립트를 실행 할 때 태그, 당신이 곳으로 만들기 body 태그 후. 다음 슬라이드. MIKE RIZZO : OK. 그래서 우리는 뭔가를 변경했습니다. 이 답변을 같이하지만 보이지 않았다 우리의 모든 그냥 가지 때문에 즉시 페이지를로드로했다. 그래서 지금, 대신이 일을 왜 우리는 이벤트 처리기를 추가하지 않습니다. 그래서 뭔가를 해 보자 몸에 다시. 그리고 이제 우리가 그것을 할 가정 해 봅시다 - 을 클릭합니다. 우리는 기능을 추가합니다. 토마스 REIMERS :하자 변경 그것은 다시 빨간색으로 색상입니다. 왜? MIKE RIZZO : 그래,하자 변경 다시 빨간색의 '색. 괜찮아요. 그래서 페이지를 다시로드 할 수 있습니다. OK, 우리는 참조 - 예상대로, 아직 빨간색으로하지 않습니다. 하지만 우리는 계속 진행을 클릭 할 수 있습니다. 토마스 REIMERS : 그리고 빨간색으로 않습니다. MIKE RIZZO : 그리고 그것은 않습니다 예상대로 빨간색으로 바뀝니다. 토마스 REIMERS : 그리고 우리는 어떻게 볼 수 있습니다 우리는 아주 기본적인 구축을 시작할 수 있습니다 상호 작용. 우리가 할 수있는 다른 일들이 있습니다 우리는 몸을하지 않으려면 붉은 색의가 HTML을 만들어 보자 배경의 붉은 색. 너무 동일한 CSS입니다. 그리고 우리가 그것을 변경할 때, 우리는이를 볼 수 있습니다 변화의 매우 극적인 효과 전체 페이지. 그래서 다시, 당신이 일을 실행하는 경우, 당신은 하나의 구성 요소를 가질 수 있습니다 , 클릭되도록되어있다. 의는 종료 버튼을 말합시다 전체 기타 구성 요소, 응답하는 것을 의미한다. 그래서 당신은 창을 제거합니다 그 일이 발생합니다. MIKE RIZZO : OK. 그냥 예를 들어 - 당신이 이전 버전을 볼하지 않았다 - 난 그냥 모습을 보여 드리겠습니다 우리가 뭔가를 숨길 때처럼. 그래서 앞서 갈거야, 그리고 움직 않습니다. 토마스 REIMERS :에 그 포장을 원하십니까 우리가 그렇게 할 단락 형식 앞에? MIKE RIZZO : OK. 그래, 왜 우리는하지 않는 것이 너무 우리는 좀 더 선택할 수 있습니다. 토마스 REIMERS : 그리고하자 그것을 클래스를 제공합니다. MIKE RIZZO : 네. 좋아, 그럼 보자. 대신에 실제 몸을 선택 지금, 난 그냥 함께 모든 것을 선택합니다 클래스 안녕하세요,하는 여기에 우리가 한 가지가있다. 그래서 우리는 필요가 없습니다 걱정. 그래서 새로 고칠 수 있습니다. 내가 가서 클릭합니다. 그리고, 종류의, 이상한 슬라이드에게 한 그 보이지 않았다 위로 것, 매력. 일반적으로, 그들은 꽤 좋은 보이나요. 일부 - 나는이 생각 이유 -하지 않았다. 난 그냥 그렇게 페이드를 할 것이다 당신도 그 볼 수 있습니다. 훨씬 좋네요. 그리고, 내가 자바 스크립트를 열면 다시 콘솔과 우리가보고 싶은 우리가 그것을 안으로 사라질 때처럼 보이는 지금, 난 그냥 그것에 페이드 호출합니다. 그리고 높은 페이드 마찬가지로, 우리는 또한 실제로 전달할 수 인수 페이드 인 또는 페이드 아웃, , 어떤 종류의, 그것의 속도. 그래서 앞서 가자 우리가 할 말 그것은 천천히 이동하면 페이드 인 그래서 난 아직도 보였다 같아요 꽤 빠른. 하지만 이전보다 느렸다. 토마스 REIMERS : 그리고 당신이 찾으려면 이러한 것들에 대한 더 많은, 다시, 다만, jQuery를 문서로 이동 우리는 당신을 제공하고, 읽은하는 이를 통해. 그들은 그들의 기능을 문서화 믿을 수 없을만큼 잘. MIKE RIZZO : OK. 그래서 나는 이제 다시이 가자 같아요. 그리고 우리는 우리의 마지막 페이지에 대해 이야기 할 수 있습니다. 음, 우리는 부트 스트랩으로 완료 할 수 있습니다. 그리고 우리는 그것을 열 수 있습니다 몇 가지 질문에 대한. 그리고 너희들은 어떤 아이디어가있는 경우에 그 당신이 던져 및 확인을 시도하고 싶습니다 우리는 그들을 구현할 수있는 경우 빠르게 자바 스크립트. 그래서 정말 빨리 부트 스트랩에 대한, 어떤 자동으로 포함 된 CSS 폴더에 설정 한 마지막 문제 실제로에 연결하여 header.PHP. 그래서 당신은 클래스를 추가 한 수있는 여기에 부트 스트랩에 정의되어있다. 그리고 그것은 자동으로 스타일을 것이다 따라서 그 것. 토마스 REIMERS : 그래서 부트 스트랩은 매우입니다 사람들이 개발 한 마법의 것 트위터에서. 그리고 무엇을 할 운명 인 것은이었다 - 웹 사이트를 만들기 위해 정말 열심히되기 전에 우리가 가진, 특히 예뻐요 공통 구성 요소의 많은. 그래서에 버튼이 많이 웹은 동일 보았다. 텍스트 필드의 많은으로 할 수있다 표준 텍스트보다 더 잘 필드 당신은 아마 정말 알고 이전 웹 사이트 또는 정말 가난했다 그냥 문자처럼 보이는 웹 사이트, 텍스트의 형태없이 텍스트 상자 그림자 또는 좋은 윤곽의 어떤 종류. 그래서 부트 스트랩이 한 것은, 잘 말했다이었다 우리는 많은 공통의 스타일이 있습니다. 왜 우리는 CSS의 하나의 공통 집합을하지 와 같은 자바 스크립트의 공통 집합 하고있는뿐만 아니라 어떤을 유행에 따라 디자인 할 수있다 사람들 드롭과 같은 것들을 제공 할 수 있습니다 메뉴 아래로하는 사람들에게 제공 할 수 있습니다 조동사 같은 것들. 모달 페이지에 나올 것입니다 이것은 엄밀있어마다 더 억제 무엇인가, 때까지 상호 작용 그것과 상호 작용할 수 있습니다. 다음과 같이, 당신은 확신한다 당신은이 일을 삭제 하시겠습니까? 당신은 정말 아무 것도 할 수 없습니다 당신은 예 또는 아니오라고 할 때까지. 그것은이 모든 것을 가져다가 그것을 포장 함께 말했다, 우리가 간다. 사람들은 지금 사용할 수 있습니다. 그리고 당신은 그것을 통해 찾을 수 있습니다 getbootstrap.com에서. 자동에 포함 된 마지막 문제는 설정. 그리고 당신은에 오신 것을 환영합니다 이상입니다 최종 프로젝트에 사용하십시오. 그리고 당신은 그것을 따르십시오 부트 스트랩을 얻기 위해 링크. 당신이 여기에서 보는 것입니다 CSS 사이트를 부트 스트랩. 당신은 부트 스트랩을 볼 수 있습니다. 당신이 아래로 스크롤하면, 당신은 볼 것이다 그것을 다운로드하는 방법, 방법 설치, 등등. MIKE RIZZO : 그리고 당신도 할 수있다 흥미롭게도에 맞게 사용자 정의 테마의 어떤 종류의 수 당신이 원하는 것을. 나는 그것이 내가 한 일을 알고 내 내가 클래스를했다 최종 프로젝트 그것을 정의했다. 부트 스트랩의 다른 버전이 다른 색 구성표를했고, 몇 가지의 다른 모양 여러 가지. 그래서 나는 그와 함께 플레이하는 것이 좋습니다. 그것은 할 재미있어. 토마스 REIMERS : 상단에 상대 다시, 그것은 폰트 매우 유사 굉장한 사이트입니다. 문서의 많은이 시작됩니다 당신이했을 때와 유사한 것 같다합니다 그것은 충분히 볼. 그래서 여기에 우리는 CSS를 이것의 구성 요소입니다. 그리고 당신은 볼 것이다 어떻게 물건을 유행에 따라 디자인 할 수있다. 당신이 테이블에 클릭이 경우, 예를 들어, 당신은 즉시 할 수 있습니다 테이블 꽤 간단하게 추가하여 그것에 클래스 테이블. 버튼의 같은 것들. 당신은 단순히 클래스 BTN 및 BTN를 추가하는 경우 기본 또는 BTN 차, 당신은 할 수 이 버튼 중 하나를 얻을 수 이러한 미리 만들어진 스타일. 그리고, 당신은 찾고 있다면 단순히보다 복잡 할 W는 이미 이상에, 무엇을 다시 스타일에 맞추는 것 맨 우리를 통해 자바 스크립트 탭 구성 요소의 무리가있다. 그래서 여기에 우리는 전환, 조동사가, 드롭 다운, 탭, 도구 설명. 도구 설명은 아래에 팝업 것입니다 마우스 당신이 뭔가에 마우스를 가져 가면. Popovers, 경고, 버튼, 축소 아코디언은 무엇인지 그들은 보통이라고하고 있습니다. 회전 목마, 어떤 플립 같은 이미지를. 그래서 그것들은 성분이다 부트 스트랩의. 나는 당신을 격려 할 것 매우 그들을 쳐다보고 이동합니다. 자바 스크립트 구성 요소가있다 와 CSS의 구성 요소입니다. 당신이 가만히로 사용하시기 바랍니다. 우리는 그들에 너무 많이 이동하지 않을거야 우리는 문서를 느끼기 때문에 정말 잘 이루어집니다. 그리고 그래. 당신이 그것에 대해 질문이 있습니까? 정말 빠르다 그래서 같이 MIKE RIZZO 면,이 웹 페이지의 디자인이 우리는 신속 함께 넣어 이 프레젠테이션은 실제로 부트 스트랩을 사용하여 수행. 당신이 볼 수 있듯이, 우리는이 클릭 할 때 다른 탭은, 우리가 실제로 무슨 상관이야 이 현재 index.html 페이지를 떠나. 그래서 우리가 가지고있는 것은 다른 div에있다 이 index.html을 내. 그리고, 우리는 다른를 클릭 할 때마다 탭, 단지 변화하고 어느 하나의 전시. 그래서 그에 따라 그들을 배치 페이지의 HTML을 변경되도록 현재 탭이 활성 상태로 표시되어, 그것은 다르게 외모가 나타납니다 정말 좋은. 토마스 REIMERS : 그래서 모두 이루어졌다 우리는 거의 모든 CSS를 작성하지 않고. 우리는 또한 상단에 헤더를 참조 어떤 색상이 우리가 있습니다. 그러나 실제는에 넣기 페이지의 상단과 만들기 그것은 스크롤 부트 스트랩했다. 그리고 심지어는 다른 라이브러리 -이 우리가 이야기 하​​나를 제외하고 하나가 아닌 경우 당신이 원한다면 당신이 구글에서 할 수 있습니다. 이것은 prettify.js이라고합니다. 그리고 그것은 당신의 코드를 강조 구문합니다 당신은 CSS와 자바 스크립트를 모두 사용하십시오. 우리가 이야기하고 싶은 마지막 것은 우리로 당신을 해제하기 전에 알아 내기 위해 도서관에서 보는 세계 사용 방법과에, 희망, 문서를 읽고 무엇을 당신을 찾을 수 필요 라이브러리를 찾는 방법입니다. 그래서 첫 번째는 우리가 그저입니다 구글을 밀어 것. 구글로 이동합니다. 그것은 우리가 무엇을 말 그대로 때 우리 뭔가를해야 할 우리 구글이다. 자바 스크립트 라이브러리가 있다는 것을 나 시간을 조작 할 수 있습니다 유용한 방법? 나는 알 수 있도록하면 그 생성 일부 사용자 여기 계정, 이것은이다 현재 시간, 어떻게 계산할 수 있습니다 하지 않고 그과의 차이 그것을 자신을 계산? 따라서이 사실은 일반적인 것입니다, 자바 스크립트 시간 라이브러리. 그리고 여기에 우리 Moment.js-- 가장 인기있는 하나. 우리는 조작하는 라이브러리를 필요로하는 경우 색깔은 할 수 같은 임의의 색상의 무리를 생성 - 아마도를 생성하는 스타일이나 뭔가 - 우리는 뭔가를 구글로 수 자바 스크립트 색상 라이브러리. 그리고 우리가 갑자기 거라고 확신 해요 천 그 중 하나. 당신은 그들을 통해 읽을 환영. 그래서 대부분의 것들 - 당신이 그들을 찾을 때 - 가는이 중 하나에 호스팅 할 수 사이트에있는 호스트 코드. 그들은있어 몇 가지 인기있는 것들입니다. 로, 가장 인기있는 까지 github.com입니다. 당신은 GitHub에로 이동하는 경우에 실제로의 표준화는 호스팅 된 곳. 그래서 다시 한번 더 가고 싶어합니다. 그들에게 그것을 보여줍니다. MIKE RIZZO : 그리고 실제로 어디 당신이주의 한 경우에이는 너무 호스팅됩니다. 토마스 REIMERS : 네. 그래서 당신은 정상화에 가면 그리고 GitHub의로 이동합니다. 즉 있었입니까? MIKE RIZZO : 그 작은 고양이 일 GitHub의 상징입니다. 토마스 REIMERS : 아. 그래서 GitHub의이라는 방법을 사용하여 매장 코드 힘내. 당신은 그 또는 모르는된다 그것은 그 괜찮아요, 당신을 놀라게. 당신은 망할 놈이 무엇인지 알 필요가 없습니다 GitHub의는 다운로드 버튼을 가지고 있기 때문에 오른쪽 아래에. 알 수있는 다른 유용한 것 GitHub의 대부분의 제품이다 저를 읽을 수있을 것이다. 그리고 그들은 웹 사이트가없는 경우, 내가 어떻게 당신에 대해 이야기를 읽어 무엇, 당신이 그것을 사용하는 방법, 설치 하지, 등등, 등등, 등등. 우리가 기본적으로 봤는데 당신을 통해 산책. MIKE RIZZO : 인터넷의 끝내기. 토마스 REIMERS : 그건 괜찮아요. 우리가 원하는 마지막 두 가지 에 대해 이야기 - 우리는 망할 놈에 대해 이야기했습니다 - 문제 해결입니다. 그리고이 하나도 관련이 없습니다 그대로 최종 제품 당신은 50을 떠날 때. 그리고 당신은 제품에 실행할 때 라이브러리를 구현하거나 구현 자신의 프로젝트, 당신은거야 질문이 있거나 당신이있어합니다 질문에 대해 살펴 보겠습니다. 또, 구글 그것. 즉, 말 그대로 우리가하는 일입니다. 이 바보 같은 소리 것입니다. 하지만 말 그대로, 우리는 구글 그것. 그리고 또, 최초의 것들 중 하나 당신은 일반적으로 실행하겠습니다 멋진 stackoverflow.com, 질문과 답변 광경. 그것은 훌륭한 모두 당신이 할 수 있기 때문에의 질문을 게시하고를 찾습니다 답변뿐만 아니라, 때문에 이미 많이 가지고 이 컨텐츠를 미리 채워집니다. 그래서 일반적으로 당신은 프로그래밍되면 Google 제 안에 질문 부부는 이미 실행 한 수 안타 문제 세트 동안 그것으로. 그리고, 마지막으로 정말 간단한 일이 오늘 우리가했습니다 -입니다 JSFIDDLE입니다 함께 많은 일을하고 자바 스크립트를 HTML CSS. JSFIDDLE는 웹 응용 프로그램입니다, 이는 기본적으로 당신이 당신의 HTML을하실 수 있습니다 자바 스크립트 아래쪽, 왼쪽 및 당신의 CSS 오른쪽 상단. 그리고, 그것은 빠른 렌더링을 만들 수 있습니다 그것과는 상호 작용하는 방법을 참조하십시오. 사람들이하려고 할 때 매우 유용합니다 같은 개념 증명을 할 이 방법 당신은 것 드롭 다운 메뉴를 수행합니다. 아마 빠른 폭로 또는 무엇이든. MIKE RIZZO : 그래서 가자 앞서이를 클릭합니다. 빠른 주 - 우리가되기 전에, 반면에 클릭을하고. JCorey 한국도 내장이 밝혀 클릭 이벤트 처리기에서 그것이 당신이있어 수치해서 사용 많은 것들을 할 것 당신이 뭔가를 클릭 할 때. 이와 유사하게, 그것도 가져가 있습니다. 그러나 전체 범위를 얻을 수 사람들은, jQuery를보고 문서 및 해. 여기 멍청한 짓을했다. 토마스 REIMERS : 그래서 정말 빨리가 여기 프로그램 밝히는 클릭 버튼을 누릅니다. 그 다음 우리는 루프를해야합니다. 내가 미만 404의 경우. 그냥 팝업 것 이러한 경고 메시지. MIKE RIZZO : 그리고 무슨 일 인데요 코드 (404)는 HTML에 대한 서? 기억하는 사람이 있나요? 바로 찾을 수 없습니다. 크롬은 또한이 깔끔한 추가 일이 어디에 당신이 할 수있는 - 토마스 REIMERS : 사람들이 좋아하기 때문에 마이크이 많이 일을 시작하고 수 성가신 사용자, 당신이 정보를 볼 수 있습니다. MIKE RIZZO : 네. 토마스 REIMERS : 우리는 어떤 질문이 있으십니까 이것에 대해, 자바 스크립트에 대한 도서관, 도서관을 찾는, 또는 어떤 웹 개발 외모 현실 세계에서와 같은? 우리는 시간에 대한 최대 실행하고 있습니다. 그래서 나는 우리가가는 확실하지 않다 구현하는 시간을 가지고 정말 빠른 않는 한. 우리는 좋은가요? MIKE RIZZO : 아무것도 너희들이 좋아 같은, 정말 빠른 볼 두 가지 분 이하? 토마스 REIMERS : 아무것도 우리는 명확히 할 수 있습니까? 어떻게 쓸 - 청중 : [들리지? MIKE RIZZO : 네, 그래서 도대체 - 토마스 REIMERS : 당신은 그냥 칠 수 웹 사이트에 제어-U. MIKE RIZZO : 아, 난 몰랐어. 토마스 REIMERS : 예, 제가 생각합니다. 제어-U. 그래. MIKE RIZZO : 아, 그래서의 웹 사이트에 대한 코드입니다. 그러나 당신은 실제로 다운로드 할 경우에 우리의 파일과 모든, 그것은 호스팅 github.com에 토마스 REIMERS : 내 이름을 슬래시 - 토마스 라이 머스 - 슬래시 CS50 하이픈 세미나. MIKE RIZZO : 그리고 당신은 할 수 이 모든 것을 찾을 수 있습니다. 토마스 REIMERS이 무엇 GitHub의입니다 그런데, 같은 보인다. 그래서 다시, 당신은 오픈 소스를 볼 때 프로젝트는 통상적으로, 이들은 판독 될 것이다 당신이 읽을 수있다 나. 당신이 돌아 간다면, 당신은 알 수 있습니다 그 당신이 다운로드 우편을 가지고있는 것 소스를 다운로드 할 수 있습니다 포함하는 코드 자신의 일에있는 제품. MIKE RIZZO : 네, 그리고 만약 우리가 그냥 클릭 정말 빠르게 index.html 파일에 - 토마스 REIMERS : 당신은 여기에서 볼 수의 우리의 웹 사이트의 소스 코드입니다. 마이크 리조 : 또한, 오른쪽 밀어 잊었다 큰 테이블 전에 그것을 포함되어 있지만 테이블도 있습니다 우리가 포함 chmods의 당신의 지혜 로움에 대해. 그러나 우리는 모든 방법을 아래로 이동하면, 아래, 우리는 실제로 매우하지 않았다 자바 스크립트와 많은 모든이와 물건. 그것은 모두에서 독점적으로의 우리가 가진 것을 다른. 와 주셔서 너희들을 감사 듣기. 우리는 이것이 정말 도움이되었습니다 바랍니다. 당신은 관련된 모든 자바 스크립트가있는 경우 질문이나 단지에 대해 얘기하고 싶어 어떤 다른 멋진 것들과 같은 다른 어떤 당신이 자바 스크립트로 할 수있는, 우리는 싶지만 당신과 얘기하고. 토마스 REIMERS : 당신은 질문이있는 경우 프로젝트에 대한 경우 나이 될 수 있습니다 관련, 우리는 아마있을께요 이 후 조금. 하지만 그 이외의,이 좋은 주말. 마이크 리조 : 그래, 즐길 수 있습니다. 너희들을 참조하십시오. 토마스 REIMERS : 안녕.