Max For Live JavaScript Random Generator Tutorial 01

이 비디오에서는 Max For Live에서 JavaScript로 Random MIDI Note Generator를 만드는 방법을 보여 드리겠습니다 먼저 MIDI 트랙에 Max Midi 효과 추가 그런 다음이 버튼을 클릭하여 프로그래밍 모드로 들어갑니다

Max For Live 편집기가 열립니다 원하는 경우 운영 체제의 바로 가기 키를 사용하여 확대하십시오 개체를 만들려면 두 번 클릭하십시오 이 객체에서 JS 다음에 장치 이름을 씁니다 마우스 오른쪽 버튼을 클릭하여 메뉴를 엽니 다 개체 선택, randommidi 편집 스크립트를 작성할 텍스트 편집기가 열립니다

이 스크립트의 맨 위에 "inlets = 1"및 "outlets = 3"을 작성하십시오 "장소"에서 Ableton이 인식하는 폴더에 스크립트를 저장하십시오 또한 같은 폴더에 장치를 저장하십시오 JavaScript 객체에 하나의 항목과 세 개의 이탈이 생성 된 것을 볼 수 있습니다 새 개체를 만들려면 두 번 클릭하십시오

"metro 4n @active 1"이라는 텍스트를 개체 안에 작성하십시오 그런 다음 "transport"라는 새 객체를 만듭니다 마지막으로 "noteout"이라는 다른 개체를 만듭니다 메트로의 0 출력을 0 트랜스 포트 입력에 연결 전송 출력 1을 JavaScript 객체의 입력 0에 연결 JavaScript 오브젝트의 출력 0과 1을 노트 아웃의 항목 0과 1에 연결하십시오 스크립트에서이 코드를 작성하십시오 당신은 그것을 복사하여 붙여 넣을 수 있습니다 = 비디오 설명 콘센트는 값을 보냅니다 첫 번째 호출은 속도를 0으로 보내어 이전 음의 소리를 멈 춥니 다 그런 다음 임의의 함수를 사용하여 새로운 속도의 새로운 음표가 생성됩니다 점수는 50과 80 사이입니다

속도는 30과 100 사이입니다 그런 다음 새 메모가 콘센트와 함께 전송됩니다 모든 것을 저장하고 장치를 닫습니다 트랙을 재생할 때 임의의 음이 들립니다

Create a Lucky Number Javascript

승인! 스프레드 시트는 다음과 같습니다 편집했습니다

난 여기에 무작위로 내용을 넣어 오른쪽 열에 나는 몇 가지있어 왼쪽 열에 멋진 HTML이 있습니다 자동으로 해당 열을 강조 표시하고 복사합니다 내가 갈거야 모든 종류의 일반 텍스트에 붙여 넣기 편집자 이것은 editpad

org입니다 내가 갈거야 해당 파일을 다운로드하여 HTML 파일 기본값은 txt입니다 하지만 난 저를 위협하지 않을 것입니다 lucky

html 승인! RotateContentcom! 자바 스크립트 해당 파일을 선택하십시오 lucky

html 템플릿을 변환합니다 그건 빠른! 링크를 다른 이름으로 저장하십시오 전화 할거야 luckyjs

그 좋은 소리 웹 공간에 도메인 폴더가 있습니다 JavaScript 파일을 업로드 할 준비가되었습니다 실제로 HTML 파일이 필요하지 않습니다 프레스토 악장! 이제이 HTML 스 니펫을 얻을 것입니다 직접 입력하는 것이 좋지 않기 때문에 가제트를 추가하겠습니다 당신이 그것을 부르는 위젯, 내 블로그에

HTML- 자바 스크립트 행운의 숫자 붙여 넣을 게요 파일 이름 만 변경하십시오 luckyjs에 구하다! 배치를 저장하십시오! 그 블로그를 보자 : 내 행운의 숫자는 무엇입니까? 내 행운의 숫자는 6입니다! 그것이 작동하는 방식입니다!

How To Learn JavaScript Frameworks (React.js, Vue.js, Angular, Svelte)

오늘 우리는 대부분의 사람들에게 필수적인 질문을하고 있습니다 웹 또는 모바일 개발자로서 경력을 쌓거나 발전 시키십시오 — 어떻게 학습합니까 자바 스크립트 프레임 워크? 나는 내가해야 할 5 가지 필수 단계를 거칠 것입니다 가장 직접적이고 효과적이며 내가 믿는 바를 브랜드에 관계없이 JavaScript 라이브러리를 배우는 가장 즐거운 길 자바 스크립트 에코 시스템에 새로 추가되거나 많은 사람들에게 확립 된 선택이되었습니다 연령

시작하기 전에 여기에 처음 오 셨다면 좋아하고 구독하십시오 나는 웹 및 모바일 개발 주제에서 매일 새로운 동영상을 발표하고 댓글을 달 수 있습니다 아래에서 가장 효과적인 학습 기법이 무엇인지 알려주세요 새로운 기술을 습득합니다 첫 번째 단계는 사실을 인식하는 것입니다

공기를 깨끗하게하는 것이 중요하다고 생각하십시오 모든 JavaScript가 없습니다 뼈대; 제외에 대해 배울 수있는 JavaScript 프레임 워크가 없습니다 모든 것 중에서 새로운 도서관을 배우는 것은 불가피합니다 그만큼 빨리 당신은 그것을 받아들이고 그것의 장점을 볼 수 있습니다, 더 나은 너는 될거야

모바일 또는 웹 응용 프로그램을 만드는 프로그래머라면 첫 번째 자바 스크립트 프레임 워크를 배우려고하거나 지금 전문적인 환경에서 몇 년 동안 사용하면 마지막으로 배우십시오 어떤 라이브러리를 배우 든 상관없이 매우 React와 같은 인기있는 라이브러리에는 변경이 불가능한 라이브러리가 없습니다 조차 사용중인 JavaScript 라이브러리를 변경할 필요가 없으면 핵심 라이브러리는 여전히 상당한 수정에 책임이 있습니다 예를 들어 React Hooks의 특성을 살펴보십시오 React 앱 작성 방식이 크게 바뀌 었습니다

도서관 자체의 미래 과정을 여러 가지 방식으로 변화 시켰습니다 그리고 이것은 Vue 생태계가 시도하는 순간 다른 라이브러리에서도 변경을 시작하십시오 핵심 API에 대한 유사한 변경이 적합한 지 여부를 파악합니다 에서 다시 말해, 변화는 게임의 일부입니다 도서관 제작자 및 기고자 개발자가 우리를 대신하여 더 많은 기능을 사용할 수 있도록 항상 노력하고 있습니다

보다 효과적인 개발자 또는 진행을 위해 우리가하는 일을 바꾸십시오 너의 역할은 그러한 솔루션이 귀하에게 적합한 지 선택하고 선택하는 것입니다 그것으로 한 가지 주목해야 할 것이 있습니다 새로운 개발자라면 의 기본 사항을 배우고 첫 번째 프레임 워크 또는 라이브러리를 찾으려고 노력하고 있습니다 JavaScript, 하나를 선택하고 커밋하십시오

안팎으로 배우고 걱정하지 마십시오 다른 사람을 데리러 React, Angular와 같은 하나의 주요 라이브러리를 알고 있습니다 또는 Vue는 직업을 구하기에 충분합니다 평범하고 단순합니다 모든 단일 프레임 워크를 배우는 것에 대해 걱정하지 말고 하나를 전문화하십시오 그만큼 두 번째 단계 — 이미 알고있는 것에 기초하여 새로운 것을 배우십시오

여러 가지 방법으로, 우리가 배우려고하는 것은 사전 지식에 기초합니다 효과적으로 배우려면 우리는 새로운 정보가 우리가 이미 가지고있는 개념과 어떤 관련이 있는지를 봐야합니다 마스터 이것은 많은 것을 배운 개발자 시간이 지남에 따라 프레임 워크는 새로운 프레임 워크를 더 빨리 선택할 수 있습니다 그러나 상관없이 당신이 이전에 얼마나 많은 것을 배웠는지, 그것을 먼저 인식하는 것이 중요합니다 무엇보다도 경쟁이 없습니다 개발자로서의 가치는 얼마나 많은 도구와 라이브러리를 알고 있는지 여러면에서 그 반대입니다

무엇입니까 중요한 것은 지금 알고있는 것 사이를 연결하는 능력입니다 그리고 배우고 자하는 것 패턴에서 더 잘 찾을 수 있습니다 새롭고 친숙한 사람들 사이에서 더 효과적으로 학습하고 그 지식을 통합 예를 들어, 나는 지금 학습에 몰입 도서관 Svelte 그래서 나는 구문과 'Svelte'방법을 배우려고 노력했습니다 내가 일한 다른 도서관과 비슷한 점을보고 일을하는 것 와

사용 된 파일 구조와 지시문이 다음과 유사하다는 것을 알 수 있습니다 Vuejs와 함께 제공되는 템플릿 및 조건은 React와 유사합니다 마크 업 내에서 데이터를 반복하면 핸들 바가 생각납니다 당신은 그것을 볼 수 있습니다 배우고 자하는 라이브러리의 예제 프로젝트를 비판적으로 본 후, 이 새로운 도구는 바퀴를 재발 명하려는 것이 아니며 이러한 공통점은 이전처럼 이상하거나 생소하지 않습니다 생각

세 번째 단계 — 유효 자원 찾기 선적 서류 비치! 새로운 도서관에 대한 연구는 매우 중요합니다 그것에 관한 기사, 비디오를 찾으십시오 용감하다고 생각되면 프로젝트를 검색하십시오 Github에서 소스 코드를 읽습니다 변덕에 검색 주저하지 마십시오 데이터를 가져 오는 것과 같은 라우팅 또는 이벤트 처리 누군가 이미 해결했을 것입니다 당신이 대답하고자하는 문제는 단지 그것을 추구해야합니다 비트

마지막으로 설명서를 읽는 것을 두려워하지 마십시오 모든 문서가다는 것은 아닙니다 건조하고 지루하며 어렵다 일부 프레임 워크는 예제 기반으로 매우 상세합니다 프레임 워크를 올바르게 사용하는 방법을 보여주는 문서 웹 사이트 떨어져 네 번째 단계 — 배우는 좋은 방법은 가능한 한 자주 새로운 언어로 코딩을 시작하지만 당신이 흥분하는 프로젝트에서 일하는 방법

대체품이 없습니다 실제로 손을 더럽 히고 언어로 작업합니다 그리고 당신은 할 수 있습니다 지금 당장 codesandbox와 같은 무료 서비스를 사용하여 설정이 필요하지 않습니다 도서관에서 놀기 시작하고 물건을 올바르게 만들 수 있습니다 떨어져 방문 페이지 인 할 일 앱

일단 당신이 그 일을 추가 시작 그것 할 일 앱이 있으면 인증을 추가하십시오 연락처 양식 추가 방문 페이지로 결국, 그것은 당신의 다음 큰 시작점이 될 수 있습니다 계획 그리고 그것은 저를 다음 단계로 안내합니다 – 실제로 도서관을 마스터하려면 그것으로 다음 큰 프로젝트를 구축하십시오

가장 프로젝트가 무엇이든 흥분, 그것은 당신의 기술 수준보다 높을 수도 있습니다 아마 뭔가 Instagram의 클론처럼 인상적 일 수 있습니다 개발자가 배운 내용을 웹에 게시하고 싶습니다 도대체 무엇이 그것은 아마도 당신의 흥미를 이끌어 내고 그것을 만들기 다섯 번째 단계-실력을 향상시키는 과정을 수강하십시오

학습은 주로 자기 주도적 업무이지만, 당신이하는 것에 한계가 있습니다 스스로 달성 할 수 있습니다 강사와 숙련 된 개발자가 우리를 채우도록 도와줍니다 그 차이, 그리고 우리가 수년간의 일과 이해로부터 이익을 얻는 법을 배울 수있게하십시오 모든 것을 스스로 알아낼 수 있습니다 갖는 큰 이점이 있습니다 원하는 속도로 볼 수있는 코스, 방법을 볼 수있는 코스 프로젝트를 실시간으로 구축하고 개념을 솔직하게

이것이 제가 가르치는 주된 이유 중 하나입니다 에 매력적인 콘텐츠를 제공하고 모든 과정은 건물을 중심으로합니다 우리 모두가 다른 사람들에게 보여주고 싶은 실제 프로젝트 만약 그렇다면 관심 있으신 분은 내 사이트 codeartistryio를 확인하십시오

가입 할 때 개별적으로 과정을 수강하거나 새로 출시 한 모든 코스를받을 수있는 완벽한 가입자 플랜 매월 코스 시청 해 주셔서 감사합니다 JavaScript 라이브러리를 더 잘 평가하고 배우기위한 몇 가지 팁 또는 통찰력 다음에 관심이 있으시다면 다음 팁을 적용하십시오 기본적으로 다른 주요 언어는 물론 Java C ++ Swift인지 여부를 말합니다 다시 한 번 감사드립니다

다음에 catch겠습니다 비디오

Node.js WebSocket Programming Tutorial with JavaScript

안녕하세요 여러분 오늘 저는 웹 소켓 프로그래밍을하는 방법을 보여 드리겠습니다 nodejs를 사용하면 JavaScript로 몇 가지 예제를 함께 살펴볼 것입니다 클라이언트와 소켓 사이에 상시 연결 소켓 연결을 작성하려고합니다

서버와 클라이언트와 클라이언트 사이에서 인터넷을 통해 피어 프로세스에 양방향으로 데이터를 즉시 전송 채팅 애플리케이션 또는 멀티 플레이어를 구축 할 때 유용합니다 온라인 게임 또는 주식 시세 앱 실시간 GPS 위치 추적지도 실시간 웹 경매 또는 그 사이의 모든 것 클라이언트-서버 통신을위한 vanilla nodejs 코드 프로덕션 환경에서는 웹 호스팅 공급자를 사용하여이 응용 프로그램을 배포합니다 AWS와 클라이언트가 그들의 인터넷 연결은 nodejs 네이티브 넷 라이브러리를 통해 쉽게 서버가 시작되고 포트 98에 바인딩 된 소켓 연결 열기 및 처리 시작하기 전에 클라이언트가 실행될 때 실행할 이벤트 핸들러를 할당합니다

클라이언트가 TCP를 통해이 앱에 연결 한 후 서버에 연결 연결 서버는 클라이언트에게 문자열을 보낸다 서버 말하기 서버는 클라이언트가 서버로 보내는 모든 데이터를 기록합니다 소켓 연결이 닫히기 직전에 서버가 클라이언트에게 닫힘을 알려줍니다 연결 이제 다음에 클라이언트 nodejs 코드와 그 뒤에 일부가 표시됩니다 클라이언트를 기존 웹 페이지를 통해 연결하는 브라우저 JavaScript 앱은 nodejs에서 동일한 넷 라이브러리를 사용합니다

TCP 소켓 연결이 로컬 호스트 포트 98 98 인 서버 클라이언트가 서버에 hello라는 메시지를 보낸다 서버가 클라이언트에 데이터를 보낼 때 클라이언트가 여기에 기록합니다 클라이언트-서버 상호 작용 실행 실시간으로 클라이언트가 서버와 연결하여 문자열을 교환 한 다음 클라이언트 웹 브라우저에서 수행하는 작업을 보여주기 전에 연결을 끊고 종료합니다 WebSockets를 사용하여 서버에 연결하여 클라이언트에 연결하는 방법 양방향 메시지 이것은 일종의 복잡한 작업입니다 서버 앱에서 라우팅하여 두 클라이언트의 브로커로 전환 클라이언트가 항상 공개적이지 않기 때문에 클라이언트에 직접 연결할 수 없습니다 서버 응용 프로그램이 항상 액세스 할 수있는 IP 주소로 서버 구성 요소가 피어 투 피어 양방향 메시징을 구현하려는 경우 필요 WebSocket 연결을 위해 브라우저에서 JavaScript가 어떻게 보이는지 봅시다 브라우저에서의 소켓 프로그래밍은 약간 복잡하지만 웹 소켓 프로그래밍은 아니고 우리에게 동일한 목표를 달성합니다

기본적으로 사용할 수있는 브라우저의 소켓 서버 코드와 WebSocket 서버 코드 모든 현대에서 작동하는 내장 객체가있는 WebSocket 프로토콜 브라우저 터미널에서 WebSocket 서버 스크립트를 실행하고 HTML을로드합니다 Chrome에서 파일을 보면 브라우저가 서버에 연결되어 있음을 알 수 있습니다 그들은 각각 서로에게 문자열을 보낸 다음 내가 연결되면 연결이 종료됩니다 내 브라우저에서 웹 페이지를 새로 고치면 똑같은 것을 다시 볼 수 있지만 이를 위해 클라이언트와 클라이언트 간 통신은 어떻습니까? 브라우저 대 브라우저 nodejs 클라이언트 대 nodejs 클라이언트 브라우저 대 nodejs 클라이언트 PubNub와 같은 서비스를 사용하면이 모든 것을 쉽게 수행 할 수 있습니다 장치가 TCP를 말할 수 있다면 양방향 장치와 장치를 연결할 수 있습니다 모든 메시지 볼륨에서 커뮤니케이션 PubNub는 무료로 가입하고 무료입니다 API 키를 사용하여 한 달에 최대 백만 건의 메시지를 영원히 보낼 수 있습니다 이로 인해 PubNub는 애호가 학생들과 기업들이 쉽게 선택할 수 있습니다

개념 증명을 구축하기 위해 클라이언트에서 클라이언트로 보내는 메시지를 보자 전송 코드는 nodejs와 비슷합니다이 코드는 거의 동일합니다 여기에 웹 브라우저 JavaScript를 위해 먼저 클라이언트 1이 있습니다 무료 API 키를 사용하여 전 세계에 분산 된 무한 확장 가능한 PubNub 네트워크 다음에 우리는 당신이 그들을 사용할 때 채널 채널이 만들어집니다 구독 당신이 원하는만큼을 만들고 그들은 영원히 구독 구독 장치가 의미 특정 채널에 게시 된 모든 메시지 수신 여기에 한 번에 하나 이상의 채널을 구독 할 수 있습니다

새 메시지가 전달 될 때 실행되는 이벤트 핸들러 다음 구독은 사용자가 누를 때마다 실행되는 기능을 설정합니다 그들의 리턴 키 PubNub publish 메소드는 PubNub 네트워크를 사용하는 채널의 메시지는이 메시지가 강도 번호 JSON 객체 원하는 모든 스크립트를 만들었습니다 다음을 나타내는 메시지를 게시한다는 점을 제외하면 거의 동일합니다 클라이언트 번호 2입니다 2 개의 PubNub 기반 스크립트를 2 개로 실행하겠습니다

즉각적인 피어 투 피어 양방향 메시지를 표시하는 터미널 창 집중된 터미널에서 Enter 키를 누를 때마다 PubNub의 전달 기능 윈도우 스크립트는 새로운 PubNub 메시지를 전송합니다 동일한 채널이므로 양쪽에서 동일한 데이터를 볼 수 있습니다 다른 스크립트가 다른 쪽의 컴퓨터에서 실행되는 경우와 동일한 방법 전세계 PubNub 메시지의 대기 시간은 일반적으로 클라이언트와의 거리에 따라 250 밀리 초 PubNub를 사용하면이 멋진 펍 / 서브 메시징 기능을 구축 할 수 있습니다 채팅 앱 멀티 플레이어 게임은지도에서 실시간 위치 정보 추적 매일 약 430 억 개 이상의 메시지가 PubNub 네트워크를 통해 전송됩니다 2,000 명 이상의 행복한 고객이 PubNub를 무료로 사용해보십시오 dashboard

pubnubcom/signup은 GitHub의 스타터 코드도 확인하십시오 다음 프로그래밍을 시작할 수 있도록 모든 프로그래밍 언어 시청 해 주셔서 감사합니다

01 Introduction To Javascript Course

자바 스크립트를 배우고 싶습니까? 경우 예 그렇다면이 과정은 당신을위한 것입니다 여기, 나는 자바 스크립트에 대한 시리즈를 시작합니다 그리고 당신이 배우고 있다면 자바 스크립트 기반 프레임 워크 이 과정은 당신을위한 것입니다

안녕하세요, Ashwani Garg입니다 내 채널에 오신 것을 환영합니다 "DevPremier"채널 이 과정의 소개 비디오입니다 이 과정에서 누가 혜택을받을 수 있습니까? 절대적인 대답은 모두입니다 당신은 초보자 또는 전문 프로그래머입니다

바닐라 자바 ​​스크립트 또는 자바 스크립트 기반 프레임 워크라면이 시리즈가 적합합니다 이것들은이 과정에서 다루는 주제입니다 이 모듈에서는 자바 스크립트의 모든 주요 기본 기능 일반적으로 사용되는 유형에 주목 조건문과 같은 코드 블록 루프 데이터 유형, 함수 및 이벤트 자바 스크립트에서 대부분의 것은 객체입니다 문자열 및 배열과 같은 핵심 자바 스크립트 기능에서 배열 자바 스크립트 위에 구축 된 브라우저 API 당신은 당신의 자신의 객체를 만들 수 있습니다 관련 기능을 캡슐화 효율적인 패키지로 변수 자바 스크립트의 객체 지향 특성은 이해하는 데 도움이됩니다 당신이 당신의 지식으로 더 나아가고 싶다면 더 효율적인 코드를 작성하십시오

여기서 우리는 객체 이론과 구문을 자세히 배울 것입니다 만드는 방법을 봐 자신의 객체 및 json 데이터가 무엇인지 설명하십시오 작업 방법 (Json) 이 모듈에서 우리는 자바 스크립트 배열의 작동 방식 자바 스크립트에서 배열은 특별한 유형의 객체입니다 자바 스크립트에는 6 가지 데이터 유형 만 있기 때문에 배열은 데이터 유형이 아닙니다 그것은 특별한 대상이다 배열 속성을 볼 수 있습니다

다른 배열 방법을 배우면 에 대한 학습 자바 스크립트 객체 속성 및 메소드 자바 스크립트에서 배열은 숫자 인덱스를 사용합니다 배열 인덱스는 0부터 시작합니다 같은 키 : 값 쌍 자신 만의 문자열“키 ''를 정의 할 수있는 곳 여기 로그 카 오브젝트를 콘솔로 키 = 유형 반면에 배열로 키는 기본적으로 0부터 시작하는 색인 ​​번호입니다

HTML Tutorial: From Web Design Prototype to HTML

이봐, 난 스킬 라이프에서 온 헌터 야이 두 번째 수업에 오신 걸 환영한다

4 부분으로 구성된 과정으로 비디오 채널 랜딩 페이지를 디자인하고 코딩 할 수 있습니다 에서 이 단원에서는 1 단원의 디자인 용 HTML을 작성합니다 이제 3 단원에서 CSS를 작성해 보겠습니다 설명에서이 과정을 위해 연결된 수업 계속 따라 가라

우리가 가서 코드를 작성하되 마지막 코드를 다운로드하고 디자인 할 수도 있습니다 skillthrivecom에 작은 가격 이것은 창조주로서 계속해서 나를 돕습니다 무료로 시청할 수있는 디자인 및 개발 과정을 제공합니다 그것으로 방해가되지 않도록 시작하십시오

좋아, 이제 우리는 디자인을 마쳤다 Figma, 앞으로 들어가서 실제로 HTML을 작성하기 시작하자 실제 비디오 채널 자, 우리가 언급하기를 원하는 것은 시작하는 것은 내가 사용하고있는 코드 편집기이며, 그 코드 편집기는 Visual 스튜디오 코드 이제 제가 제안하는 이유는 몇 가지 확장 기능을 설치하고 싶다면, 그리고 뭔가를 사용하고 있다면 그 확장 기능에 동일한 액세스 권한이 없을 수도 있습니다

지금, 만약 당신이 다른 것에 익숙하고 그것을 사용하고 싶다면, 언제든지 사용하십시오 그것 너와 함께하고 싶을 때를 대비해서 여기에 뭔가 있는거야 정확하게 그래서, 여기 code

visualstudiocom에서 다운로드 한 후, 가자 앞으로 Visual Studio 코드를여십시오 일단로드되면 여기로 내려와 이 아이콘으로 실제로 확장 프로그램을 설치할 수 있습니다 그만큼 먼저 설치하고자하는 것은 Live Server입니다

그래서, 그것은 첫 번째 것이 될 것입니다 여기, 이것을 클릭하겠습니다 440 만 명의 사람들이 그것을 다운로드하고 5 별, 그래서 당신은 그것이 정말 인기가 말할 수 있습니다 그만큼 정말 인기가있는 이유는 코드에서 변경을 할 수 있다는 것입니다 그것이 HTML이든 CSS이든 관계없이 브라우저

본질적으로 그것이하는 일은 단지 호스팅 된 웹 사이트처럼 만듭니다 컴퓨터에서 볼 수 있습니다 그런 다음, 그렇게하면, 일단 저장하면 파일은 자동으로 새로 고쳐지기 때문에 그 파일을 볼 수 있습니다 지금, 과거에 나는 지나갔고 실제로 갔다 사이트를 손으로

그리고 짜증나는 이유 중 하나는 단지 당신이 변경 사항을보고 싶을 때마다해야하지만, 이것을보고 학습하고 있으며 내가 쓰는 것을 이해하려고 노력하고 있습니다 그것이 실제로하고있는 것, 그것은 당신이 그 점들을 약간 연결시키는 것을 도울 것입니다 보다 나은 이제는 확장 기능을 설치 했으므로 다음 번에 설치해야합니다 HTML5를 사용하고 싶습니다

실례합니다 HTML 상용구 그리고 나는 그것을 여기에서 보지 않는다 그래서 보자, HTML 철자가 틀렸다 그래서 상용구 자 간다 그리고 이건 'HTML'과 같이 입력 할 수있게하려면 아래로 내려 가서 Boilerplate, 그리고 그것은 당신을 위해 상용구 코드를 뱉어 낼 것입니다

자, 너 Boilerplate 코드가 무엇인지 모릅니다 본질적으로 코드는 계속해서 다시 쓰고 싶다 그래서, 다시 작성하는 대신 그리고 다시 한번, 여러분은 시작 코드로 시작하고, 몇 가지를 변경하고, 제목과 설명을 작성한 다음 실제로 코드를 작성하기 시작합니다 그럼, 가라 앞서 이것을 사용하고 있기 때문에 미리 설치하고 설치하십시오

그럼 우리는 실제로 여기에 새 프로젝트를 만듭니다 그래서 나는 내 삶에 들어갈거야 파인더 나는 바탕 화면에 와서 새 폴더를 만들거야, 그냥 그 폴더를 '비디오 채널'이라고 부릅니다 그런 다음이 폴더를 잡고 끌 수 있습니다

Visual Studio 코드에 아이콘을 추가하면 해당 프로젝트가 열립니다 우리를 위해 저는 앞으로 나아가서 이것을 화면 왼쪽으로 이동 한 다음 브라우저를 오른쪽으로 이동하십시오 그래서, 여기, 이것 아래 폴더에서 새 파일을 만들 수 있습니다 그래서 저는 'index

html'을 할 것입니다 우리 홈 페이지가 될거야 그런 다음 'stylecss'를 만들겠습니다 그것은 우리 스타일을 잡을 예정이다

그런 다음 HTML로 돌아가서 'HTML'을 입력하겠습니다 와! HTML, 여기에 HTML5가 있음을 알 수 있습니다 상용구 나는 이것을 클릭하여 그 상용구 코드를 뱉어 낼 수있다 그때 나는 와서 몇 가지를 바꿀 수 있습니다

제목을 '동영상'으로 변경해 보겠습니다 채널 ', 그리고 설명을 위해 이것을'내 멋진 비디오 '로 변경할 수 있습니다 채널' 그러면 우리는 계속해서 스타일을 도입 할 수 있습니다 'style

css' 승인 그때 이 코멘트를 제거하십시오 이제 우리는 이것을 가지고 있습니다 이 HTML 파일에 들어가서 마우스 오른쪽 버튼을 클릭하고 Open With Live Server라고 말하면 이 새 탭이 열립니다

지금 아무 것도 보이지 않지만 우리가 들어 오면 그냥 'Hello World'라는 h1을 여기에 추가 한 다음 저장하면됩니다 브라우저에 자동으로 반영됩니다 멋지다 그래서 우리는 필요 없다 'Hello World'그리고 우리는이 스크립트 태그도 원하지 않습니다

그리고 내가 할 일은 그냥 래퍼를 끌어 와서 래퍼를 만들려면 'div class = "wrapper"'라고 해보자 먼저 큰 따옴표를 사용하겠습니다 그리고 나서 나는 여기에 댓글을 달아주세요이 댓글은 단지 이것이 헤더가 시작되므로 '헤더' 그런 다음 새 섹션을 만들 수 있습니다

이 섹션에서는 'top_section'을 호출 할 수 있습니다 그런 다음 '헤더'를 만들 수 있습니다 이 머리글에 나는 h1을 원하고 원하는 제목을 넣을 수 있습니다 우리는 'Your Channel Title'을 할 것입니다 그런 다음 Lorem Ipsum 중 일부와 함께 P 태그를 수행 할 수 있습니다

그리고 난 그냥 갈거야 이 Lorem Ipsum을 복사하여 여기의 코드 편집기로 돌아와 그런 다음 P 태그 아래에 버튼을 붙이면됩니다 버튼을 클릭하면 '지금보기'가됩니다 계속해서 저장하십시오 좋아, 이제 우리는 우리의 브라우저에서 그것들을 볼 수 있습니다

그런 다음이 섹션에서 이것은 머리글 자, 이제 그 부분을 주석으로 처리해 봅시다 헤더 섹션 다음으로 내가하고 싶은 것은 여기에 또 다른 설명을 작성하는 것입니다 이는 콘텐츠가 어디로 갈 것인지를 보여줄 것입니다

실제로 시작 내가 여기서하고 싶은 첫 번째 일은 다른 섹션을 만들고 이것을 'class = "content_section"'이라고 지정하십시오 그리고 이것에 대해서, 나는 첫 번째 재생 목록을 만들고 싶습니다 그리고 그 재생 목록에, 나는 h4 태그를 원하고,이 h4 태그는 가고 있습니다 우리의 재생 목록 제목이되도록 'class = "playlist_title"'을 지정합니다

과 h4에서는 "섹션 제목"만 말할 수 있습니다 좋아요, 그래서 우리는 브라우저 다음으로 우리가하고 싶은 일은 모든 것을위한 div를 만드는 것입니다 동영상 따라서, 이것은 'div class = "videos"'가 될 것입니다

실제로 개인과 마찬가지로 실제 동영상으로 이동하기 전에 비디오, 실제로 가서 내가 피그모로부터 수출 한 이미지를 가져와 봅시다 그래서 저는 여기서 Finder로 들어갈 것입니다 그리고 여기 내 실제, 내 이미지 아르 그리고 여기에 내 프로젝트가있는 보드가 있습니다 그래서이 폴더를 복사하려고합니다

여기, 내 모든 이미지와 함께, 내 프로젝트가있는 바탕 화면에 와서 붙여 넣으십시오 바로 여기에서 이미지를 볼 수 있습니다 비디오 채널 이제 우리가 할 수있는 일은 여기에 새로운 div를 만들 수 있다는 것입니다 그래서 나는 'div class = "video"'할 것입니다

그럼 인라인으로 할거야 스타일링, 배경 이미지를 가져 오거나 적어도 배경 이미지를 설정하려면 "배경 이미지" URL을 설정합니다 URL은 이제 막 나옵니다 이미지가있는 위치가됩니다

그래서, 그것은 'images / image-1'이 될 것입니다 다음 JPG 그래서 이것은 단지 파일 이름 일뿐입니다 그러면 우리는 그것을 닫아라 다음으로하고 싶은 일은 실제로 글꼴 굉장 아이콘을 사용하는 것입니다

이제 그 일을하기 위해, 우리는 우리가 Font Awesome 라이브러리를 가져옵니다 그리고 그렇게하기 위해서 Font로 향해야합니다 굉장한 웹 사이트 그리고 실제 홈페이지를 방문하면 이 행동 유도 전화는 무료로 사용하기 시작합니다 그럼 네가 가지고 있는지 확인하고 싶어

Free를 선택한 다음, 그냥이 모든 것을 복사하십시오 다시 여기로 오십시오 그리고 여기, 실제 스타일 시트라고 부르는 스타일 아래에서 붙여 넣기 만하면됩니다 이제 HTML에서 Font Awesome을 사용할 수 있습니다 이제, 실제와 같은 것을 찾으십시오

전화를 걸기 위해 전화를해야합니다 아이콘을 검색하십시오 그래서 우리는 놀이 동그라미를 할 것입니다 여기에서 볼 수 있습니다 iHTML을 사용하십시오

아이콘 HTML을 사용하면 실제로 사용할 수 있습니다 계획 따라서 여기를 클릭하여 복사 한 다음 붙여 넣기 만하면됩니다 이리 멋지다

일단 우리가 그랬다면이 비디오를 일곱 개 더 복사 할 것이다 타임스 그래서이 비디오에서 바로이 div를 복사하고 이것을 복사 할 것입니다 그것을 7 번 붙여 넣으십시오 그리고 이것은 개별 비디오 또는 첫 번째 재생 목록에 대한 8 개의 개별 동영상 그럼 내가 들어올거야

여기에서 번호를 변경하십시오 좋습니다 한 번 말하면 이미지의 일부를 실제로 볼 수 있습니다 잡아 당기는 일종의, 그들은 무서워 보인다 그러나 우리는 스타일에서 그것을 고칠 것이다

그리고 지금 우리가하고 싶은 일은 계속해서 Playlist 2 섹션을 만드는 것입니다 그럼,하자 이 재생 목록에 올거라 1 div 여기에서 볼 수 있습니다

그것의 끝, 그리고 우리는 그냥 가서 복사하고 아래에 붙여 넣을 수 있습니다 이 하나 이 항목을 '재생 목록 2'로 변경하겠습니다 그리고 우리는 또한 변화시킬 필요가 있습니다 원하는 경우 제목, 그리고 9시에 시작하려면이 제목을 변경해야합니다

16까지 올라가 좋습니다 근본적으로 우리가해야 할 모든 것입니다 나는 그냥 가보고 싶다 그리고 그것은 단지 좋은 측정을위한 것입니다, 저는 여기서 주목할 것입니다

그래서 메모를 작성하십시오 '이것은 콘텐츠 섹션의 끝'입니다 계속해서 여기에 유의하십시오 이것은 래퍼의 끝입니다 그래서, 일단 우리가 말하면, 당신은 당신이 당신의 두 섹션에서 우리는 헤더를 가지고 있으며, 기본적으로 모든 것이 될 것입니다

여기까지, HTML까지 그리고 우리는이 모양을 정말 멋지게 만들 것입니다 다음 비디오에서는 CSS를 실제로 작성하려고합니다 그래서, 그걸로 CSS를 작성하고 시작하자

React vs Angular vs Vue: What to Learn to Get a Front-end Job in 2019

어떤 JavaScript 프레임 워크 또는 라이브러리를 배워야하는지 궁금하십니까? 2019 년에 착륙 하시겠습니까? 제가 도와 드리죠 이 5 분짜리 비디오에서 나는 상위 3 개의 자바 스크립트 프레임 워크를 빠르게 비교해보고, 역사, 직업 시장, 학습 곡선 등을 설명하고 프레임 워크는 2019 년 프론트 엔드 또는 전체 스택 개발 작업을 얻는 법을 배웁니다

도서관과 도서관의 차이점은 무엇인지 일부 개발자는이 용어를 상호 교환 적으로 사용하지만 프레임 워크는 실제로 다른 라이브러리는 재사용 가능한 코드 모음입니다 일반적인 문제를 해결하기 위해 여러 가지 라이브러리가 있습니다 예를 들어 다양한 유형의 문제는 우리가 기계 학습 등을위한 라이브러리가있는 수학적 계산 react는 프레임 워크 인 경우 대화 형 사용자 인터페이스를 작성하기위한 라이브러리입니다 다른 한편으로는 라이브러리처럼 재사용 가능한 많은 코드를 제공하지만 또한 응용 프로그램을 구축 할 때 구조 또는 뼈대를 제공하므로 사용할 때 프레임 워크에 따라 애플리케이션을 구축해야하는 프레임 워크 프레임 워크는 우리의 응용 프로그램을 어떻게 구성해야하는지에 대한 의견을 가지고 있습니다 응용 프로그램은 다양한 구성 요소가 어떻게 상호 작용해야하는지 시작해야합니다

서로의 각도 및보기는 모두 인기있는 프레임 워크의 예입니다 프론트 엔드 애플리케이션을 구축하기 위해 지금 내가 가진 많은 질문 중 하나는 Masch 왜 응용 프로그램을 빌드 할 때 프레임 워크 나 라이브러리를 사용해야합니까? 우리는 평범한 자바 스크립트를 사용합니다 그렇습니다 여기 시간 낭비는 네가 원한다고 생각하는 이유 야 책상을 세우면 나무 조각을 사서 넣을까요? 그것들을 함께 모으거나 숲으로 가서 나무를 먼저 자르십시오

이미 나무 조각이 준비되어있을 때 나무를자를 이유가 없다 우리는 재사용을 위해 프레임 워크와 라이브러리를 사용하여 생산성과 속도를 향상시킵니다 개발 프로세스를 테스트하고 준비가 된 많은 코드가 있습니다 우리가 재사용 할 수 있도록 라이브러리와 프레임 워크에 대한 모든 것입니다 각도 및보기는 요즘 응용 프로그램을 빌드하는 데 가장 중요한 세 가지 도구이지만 이 데크의 결과를 더 잘 살펴 보도록하겠습니다

2019 년 개발자 서버 오버플로 여기에 가장 사랑한 웹 프레임 워크의 목록이 나와서 우승자는 그것이 올해에보기에 의해 가깝게 따라 다닌다 그리고 각진은지는 것처럼 보인다 당신이 구글 트렌드를 본다면 그 인기는 지난 해에 비해 그 반응은 세 가지 중에서 가장 인기있는 라이브러리임을 알 수 있습니다 이 프레임 워크의 역사를 간략히 살펴보면 가장 오래된 것입니다 3 개는 Google에서 개발했으며 2016 년까지 2010 년에 처음 출시되었습니다 2016 년 각도 팀에서 anglejs라는 각도 2를 발표했습니다

실제로 angularjs의 완전한 재 작성이었습니다 각도의 이전 버전은 완전히 새로운 프레임 워크 였으므로 줄일 수있었습니다 혼란 각도 팀은 원래 이름에서 쟈스를 떨어 뜨리기로 결정하고 그들은 새로운 프레임 워크라고 불리는 이유는 많은 개발자들이 불만을 갖게 만들었습니다 angularjs로 구축 된 응용 프로그램은 각도로 다시 작성되어야했습니다 또한 지난 3 년 동안 각도의 여러 릴리즈가있었습니다 우리는 온라인 강사로서 몇 가지 큰 변화를 경험했습니다

내 불규칙한 코스가 꽤 빨리 구식이 되었기 때문에 나를 매우 불행하게 만들었고 코스에 많은 패치를해야했고 어느 시점에서 나는 다시 만들어 냈다 전체 코스는 처음부터 시작되었지만 베타 테스트가 끝나 자마자 곧 나타났습니다 반응은 Facebook에 의해 개발되고 유지되며 2013 년 이후로 계속되었습니다 현재 버전 16이고 Facebook Twitter Netflix에서 사용되고 있습니다 PayPal과 uber는 몇 가지 이름을지었습니다

누군가가 이미 거기에서 겪을 수있는 문제를 해결했습니다 수많은 타사 라이브러리 패키지 도구 확장뿐만 아니라 자습서 및 코스보기 또는보기 Jas는 마을에서 가장 어린 아이입니다 대각선 및 반응보기와 달리 대기업에서 개발 한 것이 아닙니다 원래 2014 년에 전직 직원에 의해 개발되었으며 이제는 유지 관리됩니다 열정적 인 개발자 그룹이 새로운 프레임 워크인데도 불구하고 지난 2 년 동안 많은 인기를 얻었으니 구직 시장은 어떨까요? 글쎄, 이건 정말 당신이 어디에 있는지에 따라 달라집니다

광고 된 일자리 수와 가장 많은 일자리 수 인기있는 구직 웹 사이트는 indeedcom에 광고 된 일자리 수입니다 미국에서는 2019 년 4 월 현재 약 5 만 9 천 명 작업에 반응하고 14,000 개의 각도 작업 및 3,000 개의보기 반응의 인기를 바탕으로 한 직업은 아마 당신이 보게 될 것이라고 말하고 싶습니다 세계의 다른 나라들과 같은 패턴이지만 그건 내 추측입니다 그렇다면 너는 우리 안에서 일자리를 찾고있어

분명히 갈 길이 멀다 이제 학습 곡선에 대해 잘 알고있는 것은 언제나 유명합니다 가파른 학습 곡선을 가지기 때문에 본격적인 프레임 워크 또는 대조적으로 완벽한 솔루션은 반응이 단지 라이브러리 일 뿐이므로 당신이 배우고 이해해야하는 개념이 적은 완전한 솔루션 학습보기에는 대략 비슷한 시간과 노력이 필요하다고 말합니다 각도보다 배우기가 쉽습니다 반응하지만 그것은 매우 주관적입니다

그래서 당신이 시작한다면 나는 시작을 말할 것입니다 각성보다 배우기가 더 쉽기 때문에 반응이 있습니다 당신이 원한다면 당신이 반응을 배우고 난 후에 당신에게 톤을 더 많은 직업 기회를 준다 경력 옵션을 넓히거나 호기심 만 많으면보기를 배울 수 있습니다 반응적인 관점에서 전환하는 것은 매우 쉽고 개인적으로 생각합니다 앞으로 2019 년과 2020 년에 더 많은 직업을 볼 수있게 될 것입니다

학습 반응의 또 다른 이점은 신속하게 네이티브 반응을 배울 수 있다는 것입니다 네이티브 반응 모바일 애플 리케이션을 구축 크로스 플랫폼 개발의 왕이다 다시 말하면 당신 앞에서 더 많은 일자리를 얻을 수 있습니다 프런트 엔드 또는 전체 스택 개발자로서 일자리를 찾고있는 경우 시간을 투자합니다 그리고 반응하는 에너지 지금 당신은 어떻게 반응을 배울 수 있습니까? 튜토리얼 내 채널에 당신은 여기에 그것을 볼 수 있습니다 나는 또한 링크를 넣어 이 자습서에서는 모든 핵심 개념을 살펴보고 심지어 작년에 2018 년에 만들었지 만 여전히 유효하고 최신입니다 왜냐하면 반응하기 때문에 안정적인 라이브러리이며 변경 사항이 급격하게 발생하지 않습니다 반응의 안정성을 심각하게 생각하므로 먼저이 튜토리얼을 보아라

반응을 마스터하고 싶습니다 나는 12 시간 동안 당신을위한 완벽한 코스를 가졌습니다 내 YouTube 튜토리얼을 훨씬 넘어서서 빌 복잡한 사용자 인터페이스 라우팅 및 네비게이션 콜백 및 API의 인증 및 권한 부여 처리 및 로그인 오류 및 배포 거의 모든 개념이 관련된 이 과정에서 실제 응용 프로그램을 작성하면 노드 백엔드가있는 실제 비디오 대여 응용 프로그램이 온라인 비디오입니다 물론 내 YouTube 튜토리얼처럼 언제 어디서나 볼 수 있습니다 원하는만큼 여러 차례에 완료 증명서를 받게됩니다

이력서에 추가 할 수있는 끝은 30 일간의 돈을 돌려줍니다 관심이 있으시면이 비디오 아래 링크를 사용하여 코스를 받으십시오 할인은 쿠폰 수에 제한이 있으므로 등록하십시오 이 비디오를 즐긴다면 쿠폰이 다 떨어지기 전에 저를 지원 해주십시오 이 동영상을 좋아하고 공유하는 것은 더 많은 동영상을 보려면 내 채널을 구독하십시오

이것을 좋아하고 코멘트 섹션에서 내 경험에 대해 알려주십시오 위의 세 가지 프레임 워크 중 하나와 목표는 감사합니다 환상적인 날

Angular 8 Tutorial | Learn Angular from Scratch | Angular Tutorial | Edureka

안녕 얘들 아, 내 이름은 Aryaa이고, 다시 한번 우리 모두가 비디오에 우리 모두를 환영합니다 에드레카가 너에게 선물하고 오늘 우리는 너를 데려 갈거야

각도에 대한 더 깊은 관찰 그래서 여러분 대부분은 아마 어떤 각도인지 알 것입니다 너는 너의 인생에서 어느 시점에 너가 모를 때에 대해 들었어 특히 친구와 함께 웹 개발에 대해 토론하는 것이므로 우리가 에드레카 (Edureka)에서 발표하는 튜토리얼을 통해 우리는 각도에 대해 자세히 살펴 봅니다 각도 앱을 작성하는 방법이 쓰여졌습니다

이 튜토리얼에서 우리는 실제적으로 매우 기초적인 뜨거운 기초를 다루게 될 것입니다 그 (것)들에 당신을 가르치는 거기 밖으로 YouTube 영상의 어떤 apps든지 창조하십시오 너가 이미 알고있는 것을 가정하는 각양한 종류 앱과 그 앱을 만드는 방법에 대해 알아보고 싶지만이 동영상은 매우 다르다 우리는 접근 방식과 같은 교실을 택할 것입니다 이 동영상을 통해 각성을 배우고 있으므로이 동영상은 앞으로 갈 첫 번째 동영상입니다

우리가 너희들을 가르치기 위해 계획 한 비디오 목록에 나와라 각도의 최신 버전을 목표로하고 있습니다 각도가 변경 되어도 항상이 동영상을 업데이트합니다 각도 8을 목표로 삼아 방금 말했듯이 접근 방식과 같은 교실이 지금은 우리가 복용 할거라고 말할 때 무엇을 의미합니까? 교실에서의 접근 방식과 비슷합니다 당신이 배운 것을 알기 위해 무엇을 배운지를 배웠습니다

매우 실용적인 방법으로 그 기초를 적용하는 능력을 테스트합니다 그래서 우리는 실제로이 일에 2 실습 과제를 갖게 될 것입니다 아마 우리가 결정할 3 가지 과제가있을거야 당신이 임무를 수행 할 필요가 있다고 생각한다면 당신은 하나를 얻을 것입니다 그래서 이것들은 우리가이 주제에 걸쳐 다루어야 할 주제입니다

각도 자습서 그래서 무엇보다도 우리는 어떤 각도를 목표로 삼을 것입니다 나는 너희들에게 어떤 각도에 대한 간단한 소개를 할 것이다 우리가 무엇을 할 것인가? 새로운 각도 8 그래서 이것은 각도 8이며, 여러분 중 일부는 생각하고있을 것입니다 나는 많은 것을 놓쳤다 내가 어떻게 따라 잡을 수 있을지 걱정하지 마라

우리가 조금만 지나간 후 ​​잠시 후에 그것에 도달하십시오 각양조의 이론과 새로운 각도의 이론 우리가 바로 뛰어 올 것입니다 실용적인 부분과 실용적인 부분으로 시작 당신과 설정 시작 지역 각구 프로젝트를 진행하여 프로젝트를 진행할 것입니다 우리가 처음에는 아주 기본적이고 간단한 응용 프로그램을 작성할 것입니다 이것에 많은 복잡한 모듈을 통합하려고합니다

방법을 알 수 있도록 아주 간단한 응용 프로그램이 될 것입니다 모든 것이 큰 조각 그림 맞추기 퍼즐처럼 모든 각도에서 작동합니다 함께 첫 번째 신청서를 작성한 후에는 곧 angle은 typescript라는 JavaScript의 상위 집합을 사용하므로 타이프 스크립트를 아주 간략하게 들여다 보지 않을 것이다 타이프 칠판에 대해서 가르쳐 주겠다 기본적으로 다른 비디오를 찾아 볼 수있다

이것은 각도에 대한 의미이며 그것은 정확히 우리가 내가 무엇을 할 것인가입니다 여러분에게 typescript에 대한 간략한 소개를 해주었습니다 우리는 당신이 당신의 각도에 외부 CSS를 어떻게 통합 할 수 있는지에 대해서도 살펴볼 것입니다 응용 프로그램에서 부트 스트랩 3을 주로 사용하고 그 후 우리가 원하는대로 각도 애플리케이션에 실제로 통합 할 수 있습니다 매우 기본적인 근본을 보아라

그것이 바로 각형 애플 리케이션이 얻는 방법이다 오늘 각성하는 사람들의 대부분을로드하고 그들은 매우 초보자입니다 그들은 응용 프로그램을 작성하고 작성하지만 대부분은 응용 프로그램이 어떻게로드되고 있는지 그리고 어떻게 응용 프로그램이로드되는지 알 수 있습니다 화면과 실제로 호출되는 파일 시스템은 무엇입니까? 각도 앱이 어떻게이 중요한 주제를 실제로 처리 할 것인가? 그 후에 우리는 다음과 같은 빌딩 블록으로 바로 뛰어들 것입니다 각성하고 그것은 우리가 어떻게 보게 될 구성 요소입니다

구성 요소를 CLI에서 생성하는 방법에 대해서도 살펴볼 것입니다 수동으로 위의 사용자 지정 구성 요소를 대상으로하므로 데이터 바인딩 데이터 바인딩에는 양방향 데이터 바인딩 문자열 보간과 우리는 또한 이벤트 바인딩을 할 속성 바인딩 감독이 그들이하는 일은 무엇인지보고있을 것입니다 그러나 우리는 그렇게하지 않을 것입니다 나만의 맞춤 지시어를 작성할 수있는 방법을 찾고 있으므로 여기에있는 경우 맞춤 동영상에 대해 배우고 쓸 수있는 동영상입니다 그들 잘 이건 당신을위한 비디오가 아니야 우리는 비디오를 공개 할거야

실제로 우리가 비디오를 공개 할 예정인 경우 사용자 지정 지시문을 작성할 수 있습니다 이러한 모든 주제는 별도로 우리가 많이 취하는 구성 요소입니다 가는 코드의 모든 부분에 대해 어떻게 자신감을 가지고 있는지 자세히 살펴보십시오 데이터 마이닝 이미지 바인딩과 동일한 작업을 수행하고 지시 사항은 우리가 배우게 될이 특정 비디오에 관해서는 마지막으로 중요하지만 몇 가지 충동 지시문은 각도에 따라 배송되며 대부분의 경우 물건 그런 것들은 꽤 유용한 것들이며 우리는 정말 간단한 물건 그래서 내가 너희들에게 작은 작은 줄 줄 것이라고 말했다 우리가 길을 가면서 배정 된 과제들 때문에 과제를 계획 해 봅시다 나는 너희들에게 구성 요소가 어떻게 만들어 졌는지 가르쳐 줬다

나는 앞으로 가서 당신을 얻는다 여러분 자신의 구성 요소를 만들고 앞으로 나아갈 수 있습니다 솔루션과 함께 우리는 데이터 바인딩에 대한 과제를 가질 것이며 사건 발견과 우리는 또한 충동 지시에 대한 임무를 가질 것이며 귀하의 응용 프로그램에서 어떻게 사용할 수 있는지, 그래서 그것에 대해 가장 많이 활용하는 방법 이 비디오에서 나는 당신에게 이러한 과제를 줄 때, 그리고 나에게 이 개념을 제대로 이해했다면, 과제를 할 때 코드를 작성하지 마십시오 저와 함께 코드의 대부분이 과제의 긴 부분을 사용하여 제대로 해답을 얻었을뿐만 아니라 학습 효과를 높일 수있을 것입니다 각도로 돌리면 두뇌가 매우 각도로 생각하게됩니다

나는 너희들에게 말할 필요가있는 모든 것을 내려 놓았다 과정을 시작하기 전에이 튜토리얼을 시작하십시오 근본적으로 당신이하지 않으면 나는 길을 나가고 싶다 각도 7 각도 나 파이 또는 너무 늦게 일어나는 것과 같은 것을 아는 것은 그렇지 않습니다 걱정할 필요가 없습니다

물론이 과정에 대해서도 이해할 수 있습니다 그럼 왜 오늘 우리가 다루어야 할 첫 번째 주제가 이론적 인 주제이므로 각도가 너무 넓어 시작하는 것이 의미가 있습니다 어떤 각도로 시청하는지 시청자가 정확히 알 수 있도록 처음으로 앵글 비디오를 통해 자신이 무엇인지 소개 할 자격이 있습니다 지금 당신 대부분을 배우는 것은 이미 실제로 이미 연구를했다고 가정합니다 YouTube에 올리기 전에 각도 자습서를 입력하기 만하면됩니다

이 소개를 전하는 것은 필수적입니다 점점 더 발전하는 프론트 엔드 개발 프레임 워크 어떤 프론트 엔드 개발 프레임 워크가 어떤 웹을 가지고있을 때 그렇게 의미하는지 개발자 친구는 끊임없이 백 엔드 및 프런트 엔드라는 단어를 듣습니다 백 엔드 및 프런트 엔드 그래서이 두 단어가 잘 웹의 규칙을 의미하는 개발자는이 업계에서 두 가지 별개의 지점으로 나뉩니다 첫 번째는 백엔드 개발자의 것이고 두 번째는 프론트 엔드의 것입니다 개발자는 이제 백엔드 개발자가 백엔드에서 일어나므로 라우팅이 라우팅과 마찬가지로 기본적으로 중요합니다

프런트 엔드 개발자가 수행하지만 다른 것은 라우팅이지만 기본적으로 서버에서 물건을 가져 오는 백엔드 개발자의 작업 완벽한 백엔드 개발자의 모든 것들을위한 JavaScript 실제로 데이터베이스 스키마를 설정하기 위해 서버를 설정합니다 백 엔드 개발자가 수행하는 모든 작업은 대부분 프런트 엔드 개발자가 수행합니다 당신이 당신의 스크린에 지금 볼 수있는 것을 수반하므로 페이스 북을 보는 방법 그것은 뉴스 피드가 실제로 어떻게 배치되는지 모든 방법을 디자인 한 방식입니다 이것이 작업 프런트 엔드 개발자 인 모든 개발자가 웹 사이트가 멋지게 꾸며지고 완벽하게 마구 쳤다 최적화 때문에 대부분 프론트 엔드가 주로 HTML로 끝내야했던 날이었습니다

그리고 CSS와 CSS는이 방식으로 매우 복잡해졌습니다 당신이 매우 세련된 웹 사이트를 보여주고 싶다면 조금 복잡합니다 HTML을 만들고 훨씬 더 반응 적으로 만드는 것은 프레임 워크가하는 것입니다 대부분의 온라인 사이트에서 프론트 엔드 개발 프레임 워크가 이것은 CSS 프레임 워크라고도 불리는데, 그렇지 않은 경우가 매우 사실입니다 그것이 CSS 프레임 워크라고 말하는 것은 완벽합니다

반응적인 HTML에 가깝습니다 프레임 워크와 나는 지금 어떻게 설명 할 것인가? 각도에 대해 아는 것은 그것이 유지된다는 것입니다 Google에 의해 anglejs는 자바 스크립트 기반의 오픈 소스 프론트 엔드 프레임 워크입니다 주로 Google과 개인 커뮤니티에 의해 유지 관리됩니다 기업들이 개발 과정에서 겪게되는 많은 어려움을 해결하기 위해 우리가 단일 페이지를 볼 수있는 단일 페이지 응용 프로그램 응용 프로그램은 개발과 응용 프로그램을 단순화하는 것을 목표로합니다

클라이언트 측 프레임 워크를 제공하여 이러한 응용 프로그램을 테스트합니다 모델 뷰 viewmodel의 MVC 아키텍처 인 model-view-controller 컨트롤러 또는 mvvm 아키텍처를 알고 있기 때문에 기본적으로 당신이 가지 않으면 구글에 의해 유지되고 개발 됨 당신은 제품으로 당신에게주는 것들을 알고 있습니다 또는 진짜로 안드로이드를 벗었습니다 우리는 그것이 오늘날 어떤 각도인지 알고 있습니다

거기에 오랜 시간 이후로 당신이 어떤 종류의 경우 놀라운 커뮤니티 있어요 의심의 여지가 당신 앞에 가서 스택 오버플로에 게시 할 수 각도 탭을 클릭하면 아마 당신은 아마 당신의 답변과 다른 개발중인 다른 사람이 문제를 이미 게시했을 수 있습니다 동일한 문제에 직면 했으므로 근본적으로 훌륭한 커뮤니티가 만들어졌습니다 Google에서 제공하는 기능으로 오늘은 당황하게합니다 세 번째 것은 당신이해야 할 일은 JavaScript 기반 프레임 워크라는 것입니다

이제 anglejs라는 이름의 앵귤러 1에서 이미 명확하지 않은 경우 나는 자바 스크립트 기반이므로 거기에 넣고있다 왜 그렇게 좋은가? 자바 스크립트 기반의 자바 스크립트는 일반적으로 웹의 언어이므로 웹의 일부와 상호 작용하는 경우 JavaScript 또는 자바 스크립트 엔진을 사용하고있을 것입니다 무의식적으로 그러나 당신은 그것을 위해 확실히하고 있습니다 예 : YouTube에서 현재이 비디오를보고 있습니다 JavaScript 프레임 워크는 비디오 프레임 워크를 실행하므로 잘 알고 있습니다

자바 스크립트는 기본적으로 웹에 대화하는 법을 알고 있으므로 할 때 예를 들어 새로운 언어를 배울 필요가없는 각도로 배우십시오 당신은 다트에 대해 배워야 할 펄럭임을 배우고 있습니다 그래서 다트는 Google에서 개발 한 새로운 언어이며 그 이상은 모바일 애플리케이션 개발 프레임 워크입니다 너는 반동 로커에 나의 펄럭이는 입문서를 검사 할 수있는 fluffer을 배우러 가고 싶다 하지만 지금은 각도가 JavaScript에 기반한다는 것을 알아야합니다 정확히 그 JavaScript에 기반하지는 않습니다

스크립트 유형 스크립트는 각진 스크립트에 사용되는 기본 언어이며 typescript는 기본적으로 우리가 할 수있는 JavaScript의 상위 집합입니다 박탈 된 것은 나중에 기본적으로 사실로 구성됩니다 JavaScript를 사용하면 개발자에게보다 쉽고 간편하게 접근 할 수 있습니다 그 후 우리를 좋아해요 우리는 방금 화제가 우리는 다중 pH 응용 프로그램을 만들려고하지 않습니다

가수 페이지 응용 프로그램을 만들기 위해 각도가 정확하게 만들어집니다 단일 페이지 응용 프로그램이므로 실제로 페이지를 다시로드 할 필요가 없습니다 그래서 예를 들어 Gmail은 훌륭한 단일 페이지 응용 프로그램입니다 계속해서 Gmail 계정을 표시하십시오 Gmail 계정을 열면 이제받은 편지함 페이지에서 곧장 열어 보겠습니다

초안에 사이트가로드를 멈추게하여 초안에 들어갈 수 있다면 기본적으로로드 아웃이없는 것을 볼 수 있습니다 화면이 표시되지 않습니다 그 구멍에 아무 것도없는 책을 적재하고 있지만 한 페이지에 없다면 예를 들어 GoToWebinar는 녹음 서비스이므로 여기에서 우리는 나의 웹 세미나 탭에 있습니다 만약에 제가 여기에 녹음을하러 간다면, 이것이 새로운 페이지를로드하는 로딩 방식으로 바뀌는 것을 볼 수 있습니다 즉, GoToWebinar는 단일 페이지 응용 프로그램이 아니며 Google은 단일 페이지 응용 프로그램과 당신은 단지 얼마나 빨리 구글이 내 하나님이 될 수 있는지 보았습니다

아직로드 중이고 Google은 이미 완료되었습니다 그래서 단일 페이지 응용 프로그램은 확실히 성능과 속도를 가지고 있습니다 모든 일에 매우 매끄럽게 날짜를 기입해야하므로 너무 많은 단일 페이지 응용 프로그램을 만들 수있는 프레임 워크가 있어야합니다 괜찮아요 그래서 모든 것이 모호하고 그것에 대해 알아야 할 것이 있습니다

실제로 진행하고 또 다른 코끼리를 각도로 사용하여 앱을 개발하기 시작합니다 방 안에있는 각도 8 대부분의 사람들이 실제로 각도 가르쳐 매우 있습니다 각도가 현재 버전 8에 있다는 사실에 당황 스럽다 그들은 모든 것을 통과해야한다고 생각하기 때문에 대부분 혼란스러워졌습니다 버전 2를 버전 7로 변경 한 다음 처음에는 8 가지를 배웁니다 각도는 anglejs와 angularjs가 릴리스 된 첫 번째 릴리스로 릴리스되었습니다

각도 2로 모든 것이 바뀌어 전체 엔진이 어떻게 바뀌 었는지 서면 각도가 변경되어 기본적으로 각도 2에서 주요 정밀 검사가 수행되었습니다 그리고 매 6 개월마다 Angular 2가 나오기 때문에 Google은 실제로 각도로 업데이트하고 그 이후로 각도가 같았습니다 2 3 4 5 6 7 그리고 지금 우리는 8 살이니까 많은 반 년이 지난 것입니다 그래서 기본적으로 4 년이 지났습니다 내 수학이 맞으면 지금 우리는 앵귤러 8에 있었고, 그들이 기본적으로 가지고있는 모든 업데이트 이전 버전과 호환되므로 각도 5를 배웠다고 생각할 수 있습니다 변경된 내용의 대부분이 거꾸로 있기 때문에 각진 8로 작업하십시오

호환되므로 이제 방해가되어 새로운 것을 보도록하겠습니다 초보자 인 경우 앵귤러 8을 사용하면 대부분의 경우 각도가 정확하지 않습니다 너에게 의미가있어, 나는 그것을 건너 뛰길 추천한다 설명에서 다음 주제로 건너 뛰고 프로젝트가 설정되고 그건 너에게 더 흥미로울거야하지만 네가 기술에 정통한 사람이라면 그가 잘하고있는 버전이 무엇인지 잘 알고 있습니다 당신을위한 일부분이므로 각도 8은 약간의 변화와 하나의 파괴적인 변화로 이루어졌습니다

각도 업데이트는 몇 가지 중요한 변경 사항을 포함하므로 변경 사항이 매우 각도 8과 관련된 것은 첫째로 IV 엔진이므로 각도는 시각적으로 사용됩니다 렌더링 엔진과 그것은 IV로 대체 될 것입니다 솔라리스 테스트 단계는 8 번 베타 버전입니다 각도 9에서 매우 두드러지게 나타납니다 그래서 IV가 가장 많은 과장된 것입니다 비주얼 렌더링 API가 기본적으로 변경되지 않기 때문에 코드를 변경할 필요는 없지만 렌더링 된 방식은 완벽합니다

다른 것은 훨씬 더 최적화되어 있으며 기본적으로 새로운 각도의 다음 작업은 바질 엔진이므로 소포는 의존성이 어떻게 존재 하는지를 조정하는 방법은 기본적으로 웹 팩과 비슷하지만 혼란스러워하지 않으면 교체가되지 않을 것입니다 웹 팩 웹 팩은 밖에서 신이지만 그것은 웹 팩 작업을하게 될 것입니다 훨씬 더 쉽게 그것을 조율하고 실제로 어떤 종속성을 직렬화 할거야 당신은 실제로 프로젝트를 세울 필요가 있습니다 그래서 바질의 가장 멋진 특징은 그것은 빌드 의존성을 결정하는 매우 똑똑한 알고리즘을 가지고 있습니다 그것들을 프로젝트에 주입하면 앵글 8에 대해 멋진 다른 것이 있습니다 차동 로딩이므로 다른 유형이 있는지 확인하는 것입니다

레거시 브라우저와 최신 브라우저를위한 기본 로딩 최신 브라우저는 자바 스크립트에서 더 많이 사용하고 레거시 브라우저는 유산을 사용합니다 JavaScript는 기본적으로로드 시간 차이가 있으며 사용하는 경우 레거시 자바 스크립트는 약간 느려지는 반면 현대는 길다 더 빨리 개발자의 관점에서 작성할 수 있습니다 바젤 엔진과 IV의 차동 장치로 인해 세 가지 변경 사항이 있습니다 각도 8에있는 것은 또한 각도 8에서 매우 급격한 변화가 있습니다 나는 여기에 HTTP 라이브러리와 관련이 있다는 것을 잘 설명하지 않았다

HTTP 라이브러리를 호출하려면 대개 슬래시 HTTP를 가져와야합니다 그러나 그것은 바뀌었고 그것은 가장 큰 변화이며 지금은 그 것입니다 속도 / 각도 / 각도로 가져와야하는 HTTP 라이브러리를 사용하십시오 HTTP와 내가 setp를 사용하기 전에 내가 무엇에 관해 그렇게 이야기하는지 알기 전에 이게 전부 이론 부분입니다 앞으로 나아가서 시작하십시오

우리 자신의 모서리 프로젝트 그래서 당신이해야 할 첫 번째 일은 시작하는 것입니다 각진은 브라우저에서 새 탭을 열고 노드 GS를 검색합니다 아니오 GS가 컴퓨터에 설치되어 있지 않으므로 클릭하십시오 첫 번째 링크를 클릭하고 권장되는 것을 다운로드하십시오 대부분의 사용자는 다운로드 한 후 설정 파일을 받게됩니다

설치 파일을 저장하고 설치하기 만하면됩니다 나는 많은 문제가 있다고 생각하지 않는다 다만 다른 경우에는 그렇다 일부 구성 문제가 잘못되었습니다 실제 설치 방법을 설명하는 다른 비디오를 확인하십시오

이 비디오는 각도를 의미하기 때문에 컴퓨터의 노드 GS가 많이 있습니다 할 노드를 설치하는 방법과 같은 것들이 많은 시간을 낭비 할 수 없다 에디 리카 (Eddy Rekha)의 비디오를 포함 해 거기서 비디오를 볼 수 있습니다 그들을 확인하고 일단 컴퓨터에 노드를 설치하면 명령에 node를 입력하면 노드가 설치되었는지 확인하십시오 프롬프트에서 자바 스크립트 콘솔을 열어야합니다

또는 VAR x가 5라고 가정하고 X를 호출하면 저기서 다섯 명이 내가이 이상한 푸른 색을 띄고 있기 때문에 내 텍스트가 분명하지 않다는 것을 안다 내 배경에 있지만 JavaScript Console을 열 수있는 경우 배경 예 그냥 타자를 치는 노드로 이제 노드를 적절한 방식으로 설치하여 빠져 나옵니다 이 컨트롤을 사용하면 점 종료를 입력하면 해당 콘솔에서 나갈 수 있습니다 이제 명령 프롬프트와 그 다음 단계를 정리해 보겠습니다 우리가 할 일은 우리 컴퓨터에 앵글을 설치하여 앵글을 설치하는 것입니다

우리가해야 할 일이 무엇인지 알기에 이것에 대해 의심의 여지가있는 최고의 장소 정렬은 각도 문서이므로 각도 Doc를 검색하십시오 그래서 각도 각도의 Doc를 열 것입니다 각 도트 io / docs가 진행됩니다 설정을 따로 확인하면 여기에서 nodej가 필요하다는 것을 알 수 있습니다 NPM을 통해 각을 설치하고 진행할 수 있습니다

그래서 NPM은 노드 패키지 관리자이고 당신이 NPM에게해야 할 말은 당신이 설치를해야합니다 설치하거나 단순히 다음과 같이 말할 수 있습니다 기본적으로 글로벌 설치가 될 것이며 모든 특정 폴더 또는 프로젝트를 설정 했으므로이 폴더를 설치하려고합니다 전 세계 어디에서든 각진 CLI에 액세스 할 수 있습니다 컴퓨터가 너무 많아서 각형 슬래시 CLI가 올바른 것입니다

좋아요 속도가 너무 빠르니까요 문서가 열리고 이후에 반드시 Enter 키를 눌러야합니다 명령이 진행되고 로컬 컴퓨터에 각도를 설치하므로 이걸 끝내기 만하면 돼 좋아, 너희들은 내가 이미 내 컴퓨터에 각도가 설치되어 있다는 것을 알고있다

새로운 것은 실제로 변경된 것이 아니라 단지 하나의 패키지를 업데이트했다는 것입니다 그다지 중요하지 않습니다 이것은 앵글이 우리에게 설치되어 있음을 의미합니다 컴퓨터를 사용하면 앞을 볼 수 있지만 각도를 만들면 확인할 수 있습니다 지금은 기본 사용자 디렉토리에 있습니다

그것을 데스크탑 디렉토리로 바꾼다 그리고 내가 원하는 데스크탑 디렉토리로 바꾼다 앵귤러 자습서라는 폴더를 각도 밑줄 자습서로 만듭니다 우리가 할 모든 프로젝트와 모든 설정을 저장하게 될 것입니다 우리가 될 다양한 과제와 간단한 응용 프로그램을 필요로합니다

이 개념은 하루를위한 폴더가 될 것입니다 빨리 가서 그 폴더로 바꿔서 각도 자습서와 우리 우리의 각도 자습서 폴더에 있으므로 여기를 시작하여 새로운 각도 프로젝트는 여러분이 여기서 볼 수있는 것처럼 그것이 작업 공간 및 초기 응용 프로그램에서 엔진 새 명령을 사용할 수 있습니다 기본적으로 각진 CLI에 새 프로젝트를 시작한 다음 기본적으로 프로젝트 이름을 지정하십시오 그러면 새 이름을 붙이고 이름을 무엇으로 지정합니까? 프로젝트 잘하고 적절한 이름을 생각해 봅시다 돌아가서 보겠습니다

우리가 실제로 다음에 할 일은 무엇일까? 그래서 첫 번째 앱을 쓸 것입니다 이 앱을 첫 번째 앱이라고 부르면 매우 간단합니다 우리는 당신이 창조 할 필요가있는 모두가있는 폴더를 창조 할 것이다 첫 번째 앱이므로 지금은 라우팅을 사용하지 않도록 선택할 수 있습니다 이 튜토리얼에서 라우팅을 위해 가고 우리는 우리의 파일을 위해 CSS를 사용할 것이다

Enter 키를 두 번 누르면 기본 설정이 사용됩니다 귀하의 각도 프로젝트의 설정과 거기에 간다 그래서 우리 프로젝트 설정을 완료하고이 프로젝트 설정을 위해 우리는 또한 한 가지를 놓치기 때문에 먼저 코드 편집기가 없어져서 Visual Studio 코드를 사용하지만 다른 유료 애플리케이션을 사용할 수 있습니다 당신이 그것을 위해 돈을 낼 수 있다면 웹 스톰의 웹 스톰은 놀랍습니다 지금은 튜토리얼을 만드는 아주 자유로운 방법을 위해 나는있을거야 내 값싼 방법을 고수하고 Visual Studio 코드 만 사용하십시오

이제 Visual Studio 코드가 무료라는 것만으로 모든 것이 사라지지 않는다는 의미는 아닙니다 유료 앱에서 제공하는 다른 기능에는 모든 기능이 있습니다 구성 요소 생성 및 생성을위한 구문 강조 표시 실제로 각진 CLI 명령을 실제로 실행하기 위해 터미널을 내장하십시오 좋아, 그럼이 프로젝트가 준비 될 때까지 기다려 보자 잠시 시간을 몇 분 남겨 두어 잠깐 시간을 내자

이제는 각도 앱이 설정되고 실행해야하는 모든 작업이 완료됩니다 이제 Visual Studio 코드를 다운로드하여 Visual Studio를 다운로드하십시오 코드가 진행되고 브라우저에 Visual Studio 코드를 입력하면 첫 번째 코드로 이동합니다 링크 및 두 번째 링크는 여기에서 다운로드하여 너에게 일련의 파일을 주어야하고, 너는 그냥 가서 설치해야한다 그렇게하는 것이 매우 쉽습니다

더 많은 시간을 낭비하지 말고 시작하십시오 우리의 첫 번째 애플 리케이션을 작성 괜찮아요 여기에 만약 당신이 당신의 바탕 화면에 가서 당신은 앵글 자습서와 같은 폴더를 만들었습니다 첫 번째 앱을 말하는 폴더가 많이 표시되는 폴더를 열면 우리가 아마 여기에서 이해하지 못하는 것들이 있으므로 TS 린트가 있습니다 JSON 소스 파일에는 패키지 파일이 있습니다 패키지 잠금이 있습니다

기본적으로이 Empire 중요한 각진 점 JSON 파일이 있습니다 당신의 모든 의존성을 포함하고 있습니다 이제이 전자 파일은 실제로 존재하지 않을 것입니다 이 각도 자습서에서 우리에게 유용합니다 기본적으로 끝을 의미합니다

이것은 앵귤러 어플리케이션에 대한 엔드 투 엔드 테스트를 위해 만들어졌습니다 관심있는 부분은 주로 노드 모듈과 SRC이므로 SRC 후에 이 색인 페이지가 있습니다 귀하의 HTML 파일 인 색인 페이지가 있습니다 이 스타일 시트는 웹 앱의 기본 스타일입니다 기본적으로 네 모퉁이 응용 프로그램을 만들 때 처음부터 모두 가야합니다

이 폴더를 비주얼 스튜디오 코드로 열어 보겠습니다 너희들이 볼 수 있듯이 나는 우리의 첫 번째 앱을 열었고 SRC와 앱 폴더가 있다는 것을 알 수 있으며 많은 파일을 여기에서 얻을 수 있습니다 앱 구성 요소 또는 CSS 파일이 있습니다 앰프가 있거나 HTML 파일을 가지고 있습니다 SPECT RTS 파일을 사용하는 앱 구성 요소가 있으므로이 모든 SPECT RTS 파일 점 기본적으로 테스트 목적으로 사용됩니다

집중하지 않을 것입니다 테스트가 아니라 앱을 개발하는 데 더 많은 시간을 요구하므로 이제 진행하면 실제로 지금 가서 삭제할 수 있습니다 앱 평온함을 열면 거기 가서 볼 수 있습니다 여기에 작성된 코드가 있으므로 처음부터 가져 오기 라인이 있습니다 너는 그것으로부터 자신감이라는 것을 가져 오는 것을 볼 수있다

앵귤러 슬래시 코어라고하는 라이브러리에는이 데코레이터가 있습니다 그것은 이것이 템플릿 URL을 가지고있는 선택자를 가진 구성 요소임을 나타냅니다 그것은 스타일 URL을 가지고 있으며 클래스에서 변수가 있다는 것을 알 수 있습니다 제목을 말하고 그것은 첫 번째 애플 리케이션을 말한다 지금 이것은 정말로 이해가되지 않는다 초심자 그러나 우리가이 모든 것들의 의미를 알게 될 때까지 기다려라 구성 요소를 클래스 및 기타 모든 요소에 우선 적용 해 보겠습니다

각양 해가 보이는이 앱이 어떻게 보이는지 확인해보세요 터미널을 열면 위아래로 드래그하여 간단하게 할 수 있습니다 너는 무엇을 말하고 싶니? 기본 브라우저가 열리 며이 명령이 제공되도록 말하고 싶습니다 기본적으로 현재 개발 모드에있는 앱을 제공합니다 그리고 그것은 4 천 2 백 포트의 포트 번호로 로컬 호스트에서 제공 할 것입니다

지금 컴파일 중입니다 그래서 실제로 어떻게 보이는지 봅시다 좋아, 컴파일 할 시간을주고 우리를 위해 앱을 열어야한다 자동으로 이 하나의 문서를 이스케이프 닫습니다 nodejs가 내 메일을 닫았습니다

그래야 이것이 첫 번째 앱이므로 괜찮습니다 환영 화면으로 인사드립니다 여러분도 볼 수 있습니다 이 서버는 글로벌 규모로 호스팅되지 않습니다 개발자로서의 테스트 목적으로 먼저 앱을 시작하고 여기를 보시면 제목이 첫 번째 앱과 같다고 말합니다

이제 HTML 부분을 살펴보면이 부분이 있음을 알 수 있습니다 제목이 다시 돌아가는 작은 곳, 개발자라고 생각합니다 앱 구성 요소의 세 파일이 앱을 구성한다는 의미를 갖습니다 구성 요소 또는 HTML 및 앱 회사 점 CSS는 서로 맞 춥니 다 기본적으로 모퉁이 모양의 앱이 어떻게 생겼는지입니다

좋아요 이건 기본적으로 모서리가 들어있는 응용 프로그램입니다 매우 환영하는 응용 프로그램입니다 첫 번째 응용 프로그램에 오신 것을 환영합니다 Heroes 둘러보기와 같은 유용한 링크에는 명령 행에 대한 링크가 있습니다

인터페이스 문서가 필요합니다 이제 각도 블록을 사용하면 이것이 실제로 가능합니다 배우고 싶다면 우리에게 아무 소용이 없습니다 실제로이 파일을 가지고 주변을 돌며 앱을 만들면 앱 구성 요소 HTML 페이지를 살펴볼 수 있습니다 우리의 스크린에서 볼 때 여기에있는 것과 기묘하게 비슷하게 보입니다

너희들이 볼 수있는 것처럼 각양으로 배송되는이 응용 프로그램은 그것이 말하는 h1을 가지고있다 여기에 오신 것을 환영합니다 기본적으로 우리는 여기에 타이프 스크립트 파일에서 본 제목을 말할 수 있습니다 이 앱은 첫 번째 앱과 동일한 제목이며 위에 나온 것으로 바뀌 었습니다 우리는 또한 몇 개의 링크를 가지고 있고 기본적으로 그것은 정렬되지 않은리스트이고 또한 필요한 경우에도 함께가는 스타일링이 있지만이 순간에 사용할 수있는 스타일이 없으므로 주변 환경을 꾸미고 이 응용 프로그램은 각도가 실제로 어떻게 작동하는지에 대한 아이디어를 제공합니다

각도는 근본적으로 신뢰도와 각도 앱으로 나뉘어집니다 앱 구성 요소가 표시되므로 모든 구성 요소에 3 개의 파일이 있습니다 기본적으로 템플릿이기 때문에 자체 스타일링을 사용하므로 앱 도트입니다 구성 요소 CSS 그것은 또한 템플릿을 가지고 있으므로 스타일링은 CSS입니다 HTML의 구성 요소와 로직 내부에서 진행되는 비즈니스 로직 현재 TS 파일에이 앱의 점이 있다는 것을 확신하는 앱에 있습니다

모듈 또는 TS 파일에 저장하면 잠시 후에 알게 될 것이지만 지금은 하고 싶은 것은 계속 진행하고 있습니다 이제 구성 요소 또는 HTML 파일을 실행 한 후 터미널을 계속 실행하는 것을 잊지 마십시오 이 응용 프로그램을 제공하므로 언제든지 진행하고 저장하십시오 기본적으로 그것을 저장하고 당신은 계속 진행할 수 있고 그것이 다시로드되었음을 볼 수 있습니다 솔직히 말해서 여기선 아무 것도하지 말고 연설을 좀 더 해봅시다

흥미 롭다 우선이 것을 그냥 입력 해 보자 주고 대신에 우리는 입력 텍스트가 입력 될 때마다 입력 할 것입니다 레이블과 함께 있어야하며이 레이블은 이름을위한 레이블이므로이 유형을 지정할 수 있습니다 이름이 여기 나와있는 이름과 같으므로이 점을 조금 덜 혼란스럽게 만들자

너희들은이 이름을 바르게 부르고 여기서 나가면 우리가 가면 보지 우리는 여기에 자료를 입력 할 수 있어야한다 우리가 ENTER를 누르고 그런 것들을하더라도 우리는 정말로 아무것도하지 않습니다 여기에 문단을 써서 우리 이름을 출력 해주세요 구문에 많은주의를 기울여보십시오

우리는 몇 가지 구문을 사용하기 때문에 백그라운드에서 일어납니다 순간 우리는 우리가 필요로하는 이름을 표시하기 위해 이름을 여기에 표시하기를 원합니다 name이라는 변수를 만들려면 앱 구성 요소 RTS로 이동하십시오 파일을 만들고이 이름을 이름으로 변경하고 여기에서 내 이름으로 바꿉니다 그래서 우리가 Arya라고 말할거야

그래서 저기로 돌아가서 우리를 구하자 HTML 파일 및 여러분이 볼 수 있듯이 Arya가 여기에 나오고 있지만 우리가 여전히 입력하면 입력에서 뭔가 실제로 아무 일도 일어나지 않습니다 입력란에 자동으로이 단락에 반영되어야합니다 입력 그래서 우리는 소위 그렇게 간단하게 그렇게 할 수 있습니다 각 도구와 함께 제공되는이 도구는 지침이라고 부르며 이 튜토리얼에서 지시문을 읽으십시오 내가 지금 사용할 것 같은 inbuilt 지시어를 사용하라

이 지시어를 사용하여 지금 내가하는 방식에 아무런주의를 기울이지 마십시오 문법은 이후에 다룰 수있는 무언가이기 때문에 이것을 쓰십시오 이제 우리가하고 싶은 것은 대괄호를 시작한 다음 열려있는 것입니다 정상 괄호 인 괄호 괄호와 우리가 말하고자하는 것은 모두 ng-model은 name과 동일하므로 name이 큰 따옴표 안에 있어야합니다 여기에 타이핑중인 내용이 name이라는 속성과 같은 이름을 표시하려고합니다

여기이 아래서이 사람을 구하기 위해 우리 파일을 다시로드하고 놀랍게도 입력 쿼드가 우리가 가진 것은 갑자기 사라져 버렸습니다 실수가 진행되고 콘솔에 들어가면 점검하라 그것 이후 ungaught arrow 템플릿 구문 분석 오류 때문에 모델에 바인딩 할 수 없다고합니다 그것은 입력의 속성을 알 수 없으므로 기본적으로 각도는 무엇인지 알 수 없습니다 이제 우리는 ng의 기능을 가져 오지 않았기 때문에 이것이 모델입니다

모델 지금은 이것이 입력 모델이라고 말하면서 각도로 출하됩니다 하지만 타이프 스크립트가 작동하는 방식은 가서 타이프 스크립트 앱을 가져 오기 위해 필요한 모든 것을 가져옵니다 이제 모든 가져 오기를 실행하면 모듈 파일에서 실제로 수행됩니다 이 작업을 수행 할 때 가져와야하는 항목은 모듈에서 수행됩니다 당신이 볼 수 있듯이 파일은 우리가 이미 몇 가지를 가져 오는 것을 볼 수 있습니다

default로 앵귤러 슬래시 코어에서 ng 모듈을 가져오고 각 슬래시 플랫폼 브라우저에서 브라우저 모듈을 가져오고 있습니다 실제로 모델의 마술을 만들기 위해서 우리는 무언가를 가져올 필요가 있습니다 이것은 대각선 슬래시 형태이므로 모든 것이 세미콜론으로 끝납니다 기본적으로 타이프 스크립트에서는 타이프 스크립트에 모든 것이 어디에 있는지 알려줄 필요가 있습니다 특히 각진 슬래시 양식과 우리가 가져올 필요가있는 것은 폼 모듈입니다

이제 이것은 타이프 스크립트에 우리가 이것을 사용하고 있다고 말하고 있지만 당신도 역시 귀하의 양식 모듈을 가져와야하므로 각성을 할 수 있어야합니다 이 이름을 복사하여 여기에있는 가져 오기 배열에 넣으면됩니다 그래서 쉼표를 넣고 Enter 키를 누른 다음 양식 모듈을 입력하여 저장하십시오 HTML 페이지도 마찬가지입니다 이제 우리가 여기서 본 것은 우리가 어떤 것도 얻지 못한다는 것입니다

먼저 오류가 발생했습니다이 작은 입력 상자가 있으므로 닫으십시오 또한 좋은 작은 입력 상자가 아리아가 단락에서 그것도 말한다 Zaria 입력란에 이제 해당 단락의 모든 내용을 삭제했다면 또한 자동으로 삭제되므로 단일 페이지 응용 프로그램이 아닌 경우 예를 들어 변경 사항을 반영하여 입력하면 페이지를 새로 고침 할 수는 있지만 각도가 맞지 않으면 간단히 입력 할 수 있습니다 당신의 이름과 모든 것은 그것이 마술처럼 일어날 것이고 그것은 아래에 나타날 것입니다 아래의 단락은 모두 각도 설정을 설치하는 것에 관한 것이 었습니다

프로젝트를 만들고 우리는 배송 앱이 실제로 어떻게 보이는지 보았습니다 그리고 우리는 그것과 함께 바이올린과 같은 종류의 앱입니다 구성 요소를 가지고 작업 한 다음 모듈을 사용하므로 모듈이 비슷합니다 모든 앱과 같은 하위 패키지는 하위 패키지로 각도 앱으로 나뉩니다 병으로 구성 요소가 포함 된 모듈로 나뉘어져 있습니다

여기에서 우리가 작업 한 컴포넌트는 자신감이있는 앱이라고 불립니다 또 내가 알아 차리고 싶은 또 다른 일은 우리가 먼저 소스 코드를 열면 기본적으로 HTML 페이지이지만 여기 보이는 앱 루트 요소가 있습니다 여기에 우리가 만든 것처럼 보입니다 그 아래의 우리 자신의 사용자 정의 요소는 많은 스크립트 가져 오기입니다 앵글이 제대로 작동하도록 앵글이 당신에게 도움이되지만 흥미로운 점은 이 앱 루트를 본 기억이 나면이 앱 루트 요소입니다

요소를 TSF 파일에 저장하면 선택자를 볼 수 있습니다 app root라는 브라우저에로드 된 페이지가 실제로 색인 또는 HTML 페이지가 나오면이 앱 루트를 만들었다는 것을 알 수 있습니다 그래서 근본적으로 app root는 selector와 같습니다 기본적으로 이것은 당신을 도울 것입니다 각 애플 리케이션이 잘로드 된 방법을 이해하자

HTML은 기본적으로 여기에서 볼 수있는 파일 또는 소스 코드입니다 이 앱 루트 사용자 정의 요소가 생겨 이제이 맞춤 요소를 만들었습니다 우리 구성 요소를 사용하여 우리는이 구성 요소에 대해 맞춤 요소는 앱 루트가 될 것이며이 템플릿의 템플릿은 기본적으로이 파일 인 app 컴포넌트에 저장된 HTML과 구성 요소에는 현재 어떤 스타일링이 있어도 우리에게는 이 앱 도트 컴퍼니 닷 컴 CSS 파일에있을 것입니다 그 다음에는 랩 된 아트 구성 요소 또는 TS 파일이 있습니다 기본적으로 올바르게 작동하는 논리는 각도가 작동하는 방식입니다

한 무리의 구성 요소가 이제 시작하겠습니다 그리고 이것이 우리가 처음으로 사용한 앱이었습니다 이제 다음 주제로 넘어가 자고 이제는 타이프 크립트가 무엇입니까? 당신은 정말로 우리가 뭔가 다른 것을 사용하고 있다는 것을 보았습니다 자바 스크립트는 기본적으로 자바 스크립트가 아니므로 타이프 스크립트입니다 그래서 정확히 무엇입니까? typescript 잘 typescript는 자바 스크립트의 수퍼 셋입니다

Microsoft가 디자인 한 객체 지향 컴파일 언어입니다 기본적으로 JavaScript에 대한 수퍼 세트이므로 JavaScript에 포함 된 모든 것 확실히 typescript에 포함되어 있지만 그 반대는 실제로 그렇게 말할 수 없다 JavaScript의 모든 것은 타이프 스크립트에 있습니다 왜냐하면 그것은 수퍼 셋이지만 모든 타이프 스크립트는 자바 스크립트에 없으므로 타이프 스크립트는 기본적으로 당신이 자바 스크립트 기반 응용 프로그램을 만들 때 사용할 수 있습니다 우리가 이야기 할 때 산업 수준에서 실제로 확장 할 수 있습니다

타이프 스크립트는 기본적으로 자바 스크립트로 컴파일되며이 컴파일이 완료됩니다 각성 CLI에 의해 만약 당신이 앞서 가서 타이프 스크립트는 타이프 스크립트 튜토리얼을 체크 아웃 할 수 있습니다 웹에는 타이프 스크립트가 많이 있습니다 배우기 쉽고, 타이프 스크립트를 배우고 싶지 않다 자바 스크립트를 아는 사람이라면 충분히 쉽다

기본적으로 JavaScript와 비슷하지만, 클래스 인터페이스와 같은 것들을 그렇게 우리가 이동할 수있는 방법으로 앞으로 우리의 다음 주제로 나아가는 것은 외부 CSS를 우리의 각형 적용은 외부 CSS를 통합 할 목적으로 우리는 부트 스트랩 (bootstrap) 3으로 작업하게 될 것이므로 부트 스트랩 (bootstrap)은 그렇지 않습니다 know는 CSS 프레임 워크이므로 부트 스트랩의 기능을 살펴 보겠습니다 그래서 이것은 부트 스트랩이며 우리는 현재 부트 스트랩 버전을 사용하고 있습니다 이 데모 목적으로 버전 3을 사용하게 될 것입니다 bootstraps 공식 사이트에서 어떤 부트 스트랩이 나옵니까? 부트 스트랩 튜토리얼을 사용하면 체크 아웃 할 수 있습니다

아래 설명에서 기본적으로 사용 방법을 보여줍니다 부트 스트랩과 그의 다양한 형식과 형식은 이제 우리는 우리가 할 일은 부트 스트랩을 우리 프로젝트에 통합시켜 나가는 것뿐입니다 여기에 또 다른 파워 쉘을여십시오 여기서하고 싶은 것은 타이프입니다 명령 npm에서 설치 및 – – 저장하고 울트라 추가 할 말 3 3 무엇 이렇게하면 부트 스트랩 3의 모든 파일을 다운로드하여이 노드에 저장합니다

modules 폴더이므로 node modules 폴더는 노드에서 사용하는 모든 것입니다 외부 패키지를 다운로드하면 패키지 관리자에서 저장됩니다 노드 모듈을 다운로드 한 후 그 모듈을 어떻게 보이는지 보여 드리겠습니다 작업중인 프로젝트에 프로젝트를 통합하십시오 실제로 노드 모듈을 다운로드하려면 여기에 부트 스트랩이 있어야합니다

삼 좋습니다 그래서 부트 스트랩 트리를 실제로 다운로드했습니다 실제로 노드 모듈 폴더를 열고 더블 O가되도록 ABCD B 여기 어딘가 있어야 해 좋아, 이제 내가 그걸 찾을 수있는 것 같아 바탕 화면이 없기 때문에 모듈을 처음 사용하는 각도 자습서가 있어야합니다

아래에 있어야하므로 Bonjour 아래에 여기에 쌓기 부트 스트랩 Bonjour 그럼 Bonjour를 여기서 찾으십시오 우리가 방금 다운로드 한 부트 스트랩 폴더는 여기에 몇 가지 있습니다 폴더 그래서이 booster 밑에있는 dist 폴더로 가기위한 폴더 배포판을 CSS로 보내면 복사 만하면됩니다 이 마우스 오른쪽 버튼으로 클릭하고 상대 경로를 복사하면됩니다 이것을 혼자 최소화하면 작업하기가 더 쉬워집니다

이제 당신이해야 할 일은 Styles로 들어가는 것입니다 이것은 각도가있는 JSON입니다 거의 27 번 줄에 파일이 있으면 스타일 배열이 나옵니다 여기에 쉼표를 넣고 Enter 키를 눌러 주소를 입력하면됩니다 bootstrap dot CSS 파일은 이제 상대 경로를 복사 할 때주의해야합니다

실제로 모든 것을 백 슬래시로 변경하면 이 두 개의 백 슬래시와 당신이 갈 준비가되어 있어야합니다 실제로 부트 스트랩을 설치하지 않아도되므로 앱입니다 우리가 지금 창조 한 것은 우리가 갈 수 있고 앞으로 가야하는지 앞으로와 머리 부분에 사양이 단 하나의 스타일이 있다는 것을 참조하십시오 slash CSS 다른 스타일은 각도를 알려주는 방법입니다 현재 모든 CSS 스타일의 소스 매핑을 볼 수 있습니다 이 파일에 대한 글로벌 스타일은 이제 우리가 실제로 앞서 가서 앵글 도어 JSON 파일 그리고 나서 우리가해야 할 일은 실제로 진행되고 노드 우리가 실제로 hit ctrl C를 게재하고 있었고 그 다음에 다시하고 싶은 것이 있습니다

기본적으로 JSON 파일을 저장하지 않고 다시 서비스하여 응용 프로그램을 서버에 저장 한 다음 모든 파일을 저장하고 새로운 신선한 서비스 프로세스를 다시 시작하여 새로운 서비스 프로세스를 시작하십시오 당신은 새로운 것을 입력하거나 진행해야만합니다 아니면 그냥 말할 수 있습니다 우리가하고 싶은 새로운 구성 요소를 만들지 않는 것은 ng – oh라고 말하고 그렇게 제공하는 것입니다 지금이 순간에는 단 하나의 스타일 만 기억하고 있습니다

이제 어떻게 할 수 있는지 보도록하겠습니다 부트 스트랩을 실제로 통합 할 수 있다면 실제로 부트 스트랩을 통합하십시오 우리의 계획 좋아요, 그래서 우리 애 플리는 애쉴리를 컴파일하고 보았습니다 우리의 페이지를 살펴보고 머리 부분을 살펴 보겠습니다 추가 된 새로운 스타일이 있음을 확인하십시오

이렇게하면 부트 스트랩이 표시됩니다 버전 3 점 4 점 1 점이 추가되었으며 이제 모든 점을 사용할 수 있습니다 예를 들어 부트 스트랩과 함께 제공되는 스타일링 Jumbotron이라 불리는 간결한 부분은 특정 스타일링의 유형은 기하학이 그런 의미로 사용되는 것은 아닙니다 너가 대략 알고 싶으면 지금 가게에 가서 용기로 바꿔라 내가 사용하고있는 모든 부트 스트랩 클래스는 아주 잘 진행될 수 있습니다

내 부트 스트랩 튜토리얼을 확인해 봅시다 이 순간에 우리가 적절하게 스타일링을하지 않는 것을 제거하자 이걸로 돌아 가자 우리가 실제로 무언가를 부숴 버렸다 하지만 당신에게 보여주고 싶었던 것은 우리가 실제로 부트 스트랩을 가지고 있고 우리가 부트 스트랩이 완전하게 작동하여 부트 스트랩 버전 3

0입니다 그래서 여러분은 프로젝트에 외부 CSS 파일을 추가하는 방법을 알았습니다 그래서 오늘의 우리의 다음 주제는 우리가 돌아 가면 각도가 실제로 어떻게로드되는지입니다 우리의 코드 편집기에 우리가 처음 보았던 모든 파일을 분석합니다 당신은 3 가지 구성 요소 파일을 가지고 있습니다 템플릿 파일 및 구성 요소 유형 스크립트 파일을 지금 다시 사용하려면 애플리케이션이로드 된 페이지로 이동하여 솔직히 말해서 소스를보고 소스에서 볼 수 있어야합니다

이 앱 루트 요소가 있습니다 이제 앱 루트 요소는 앱의 루트 요소를 어떻게 알 수 있습니까? 여기에 입력 상자와 단락을 삽입해야합니다 이것이 매우 중요한 개념이기 때문에 먼저 설명하십시오 이것이 도움이 될 것입니다 당신은 루트에 도달했기 때문에 각도를 배우는 방법을 배우고 각도가 작동하는 원리에 대한 기본 정보 서브 프로세스에서 제공하는이 색인은 HTM입니다

이 색인에 파일이 있습니다 HTML 파일에 다음과 같은 사용자 정의 요소가 있습니다 당신이 우리가 묶었다는 것을 깨달을 수 있다면 이제 근친의 선택자는이 근친상사가 아닙니다 이 응용 프로그램 구성 요소 여기에 선택기 점이 TS 파일이 응용 프로그램에서 점 이해 RTS 파일에 데코레이터 클래스가 있습니다 데코레이터 클래스가 있습니다

미안 해요 이 데코레이터 클래스는 셀렉터가 짐승이 될 것이라고 말했다 기본적으로 문자열을 선택기로 저장하고 값을 제공합니다 if 이것은 우리가 가지고있는 HTML 페이지상의 엘리먼트를 인식하는데 사용될 것이다 또한이 요소는 자신감이있는 앱 도트에서 템플릿을 만들거나 HTML 파일이므로 앱 루트 구성 요소가 HTML에있을 때 매우 기본적으로 파일 각도는이 세 파일을 여기서 제공해야한다는 것을 알고 있습니다

이 세 파일 그것이 여기에 묶여 있기 때문에 알고있는 앱 구성 요소 파일을 여기에 파일로 저장합니다 당신이 앞뒤로 가서 모듈 파일을 볼 수 있다면 이제 선택기를 지금 사용해보십시오 우리가 모듈 파일에 도달하기 전에, 실제로 실행되는 코드는 항상 주 파일이므로 여기에서 주 파일은 메인 점 ES 파일 및 여기에서이 라인을 여기서 볼 수 있습니다 파일은 기본적으로 몇 가지 가져 오기가 있으므로 하나는 생산 모드를 활성화하는 것입니다 개발 목적이지만 여기에서 가장 중요한 라인은 플랫폼 동적 검색 및 부트 스트랩 모듈 그래서이 부트 스트랩 모듈에서 AF 모듈을 인수로 전달합니다 app 모듈이 인수로 전달되기 때문에 app 모듈 부분은 다음과 같습니다

실제로 여기에서 호출됩니다 여기에 다른 부트 스트랩 배열이 있습니다 그래서이 부트 샵은 우리의 부트 스트랩 CSS 프레임 워크를 실제로 참조하지 않습니다 포함 된 부트 스트랩은 실제로 실행될 때 무엇을 먼저 실행해야 하는지를 의미합니다 응용 프로그램을 실행하려면 여기에 app 구성 요소를 실행하고 싶습니다

여기서 app 요소는이 HTML 파일에 CSS 파일이 있고 이 타이프 스크립트 파일은이 앱 루트 인 indexhtml에 묶여 있습니다 selector 이렇게이 접근 선택기가이 HTML 페이지에서 발견 될 때마다 이 세 파일을 실제로 제공 할 것입니다 정확히 각도가 앱이 화면에로드되므로 워크 플로는 매우 중요합니다 미래의 디버깅 프로세스에서 우리가 장래에 디버깅에 관한 매우 상세한 강의가 있으니 걸어주세요

그것에 대해 내가 방금 설명한이 부분은 미래 동영상에 대한 지식 각 응용 프로그램이 실제로 화면에 표시됩니다 앞으로 나아가 야 할 다음 주제로 나아갈 것입니다 우리가이 앱 폴더 아래에있는 것은 현재 구성 요소입니다 화면에 보이는 모든 각도의 빌딩 블록 각도를 사용하는 것은 기본적으로 구성 요소이므로이 웹 사이트가 당신은 귀하의 휴대 전화에서 볼 수 있고 그것은 모든 각도로 구축 된 웹 사이트입니다

각도에 대한 정보는 루트 구성 요소로 시작되며 분명히 알 수 있습니다 하위 구성 요소와 그 이후의 하위 구성 요소를 포함하므로 기본적으로 지금 당신이 내 플러 터 튜토리얼을 기억한다면 컴포넌트 트리 그걸 지켜 보지 못했습니다 당신은 오늘 그것을 잘 배우고 있어야합니다 펄터를 사용하여 만든 위젯의 나무는 이제 동일한 비유를 넣을 수 있습니다

각진을 신뢰의 나무로 사용하여 제작 된 웹 페이지는 기본적으로 단위입니다 또는 빌딩 블록과 각 프레임 워크는 빌딩 블록을 제공합니다 다른 이름은 흔들기 때문에 위젯이고 각도에 대해서는 다른 이름입니다 자신감이 있거나 자기 자신에 대한 자신감이있어서 우리가 여기서 한 것은 우리는 이제 컴포넌트를 만들었습니다 다른 컴포넌트를 생성하고 싶습니다

어떻게해야합니까? 우리는 당신이해야 할 일은 당신이해야 할 모든 일을 계속 진행하는 것입니다 응용 프로그램 폴더 및 원하는 것을 말하고 싶습니다 새 폴더에 넣으십시오 이제이 폴더를 호출하도록하겠습니다 서버라고하는 자신감이 있으므로 서버를 호출하고 여기에 우리가 원하는 것을 말하자

우리는 서버 파일을 만들고 싶으므로 여기서 우리는 새로운 파일을 만들어서 새 파일을 만들고이 파일을 서버 점 구성 요소 도트 HTML 그래서 왜 우리는이 명명 프로세스를 잘 선택 했습니까? 당신은 건물 및 업계 수준의 응용 프로그램을 잊어 버리는 경향이 있습니다 여기서 뭔가 적절하게 이름을 지정하면 여기에 서버 점 구성 요소 HTML 파일 이것은 우리에게 매우 유용한 정보를 제공합니다 예를 들어 구성 요소 인 서버이며 이것은 템플릿 HTML 파일입니다 이 템플릿 HTML 파일에서 우리는 예를 들어 AB와 같은 것을 넣을 수 있습니다 h3 그리고 우리는 이것이 당신이보고있는 서버 컴포넌트라고 말할 수 있습니다

이것이 우리의 화면에 나타나면 거기에 서버가 있다는 것을 알게 될 것입니다 이제는 새로운 파일을 여기에 추가하여이 파일을 제공해야합니다 우리가 타이프 스크립트 파일을 필요로하기 때문에 우리가해야 할 일은 새 파일이며 이것은 서버 도트 구성 요소 점 TS 파일이므로 TS가 의미합니다 이제는 타이프 스크립트를 사용하여 앱 구성 요소 인 TS를 체크 아웃해야합니다 여기에 파일이 있습니다

수입이 있다는 것을 알기 때문에 먼저 수업이 있습니다 우리가하려고하는 것은 이것 또한 복제하는 것입니다 왜냐하면 그것이 또한 구성 요소이기 때문입니다 우리는 우리가하고 싶은 것을 알 수 있도록 수동으로 편안하게하고 있습니다 우선 우리는 수출 클래스를 말하고 싶습니다

여기 서버를 보자 어떤 방식으로 사용되는지 패션의 이름을 지정하여 앱 구성 요소를 말합니다 이 이름이 뭔가의 이름을 사용할 수있는 요소라는 것이 더 명확합니다 서버 구성 요소와 같은 구조는 현재 괄호 안에 있습니다 왜냐하면 우리는이 클래스를 다른 곳의 모든 클래스에서 사용하기를 원했기 때문입니다

이것이 구성 요소이지만 실제로는 끝나는 곳이 아니라는 것을 알리고 있습니다 당신은 또한 데코레이터를 실제로 배치함으로써 각도를 알 필요가 있습니다 비율 구성 요소는 이것이 실제로 장식 자라는 것을 알려줄 것입니다 당신이 앞서 가서 능력 파일을 조사한다면 확신 부분을 열고 선택자를 입력해야한다는 것을 알기 바란다 기본적으로 우리가 원하는 인덱스에 자신이 원하는 것을 말하고 싶습니다

이를 선택하면 셀렉터와 셀렉터가 다음과 같이 표시됩니다 서버를 말하는 것은 미안하다 당신이하는 방식이 아니야 그냥 돌아가고 너와 같이 사람들은이 IDE 덕분에 우리의 일이 훨씬 쉬워지고 있음을 볼 수 있습니다 이제는 파일 시스템으로 파일을 가져오고 있습니다 여기서 말하고 싶습니다

문자열을 전달해야하므로 선택자가 될 것입니다 서버 이제 우리는 실제로이 서버를 호출 할 수 있지만 적절한 이름 지정이 아닙니다 패션은 선택기가 실제로 진행되지 않고 충돌하는지 확인하십시오 임의의 inbuilt 선택기 또는 아마도 각도로 제공 될 수있는 선택기 당신이하고 싶은 것은이 앱 서버를 호출하여 하이픈을 넣는 것입니다 그 사이에이 앱 서버를 호출하면 이제 우리가해야 할 또 다른 일은 패스입니다

HTML 파일이므로 템플릿 URL을 말할 수 있으므로 실제로 어떻게 사용할 수 있는지 보겠습니다 템플릿 URL 창에서 템플릿 URL임을 확인하고 여기에서 HTML을 사용하는 구성 요소는 다시 돌아가 템플릿 URL과 우리가해야 할 일은 서버를 통과시키는 것입니다 George component dot HTML 이제 우리가 너는 언제나 되돌아 가서 그곳에 가서 확인할 수있는 어떤 것도 놓치고있다 그래서 우리는 똑같은 부모에게 있다고 말하기 위해 점을 찍고 슬래시를 넣어야합니다 디렉토리 그래서 그 점을 슬래시 서버 구성 요소는 HTML과 지금 우리가 건너 뛸 수있는 우리가 세미콜론을 넣지 않았기 때문에 어떤 스타일링도 포함되지 않았기 때문에 스타일을 적용했다

여기는 기본적으로 배열과 같으므로 여기서는 그래서 그것은 성공적으로 저장되었습니다 이제 우리가 할 수있는 일은 우리 앱으로 돌아가는 것입니다 구성 요소 파일 및 sgml 파일을 만들어서이 모든 것을 삭제하자 말할 수있는 것은 h1을 넣는 것입니다 우리가 앱 구성 요소 파일에 있음을 알고 있습니다

우리가보고있는 구성 요소입니다 지금 당신들이 우리 선택기를 사용했다는 것을 기억한다면 우리는 애플리케이션 서버 유형의 선택자를 놓을 때마다 이것을 관찰 할 것입니다 이것이 서버 구성 요소라는 3 개의 렌더링되어야합니다 보기에 앞서 앱 구성 요소로 돌아가서 일단 우리가해야 할 일을 여기에두고 온 이래로 서버를 가정 해 봅시다 할 수있다

우리는 app 서버를 거기에 놓았습니다 s3 우리는 실제로 렌더링을해야합니다 앞으로 가서 실제로 그 일이 일어나는지 확인하십시오 모든 파일을 저장하자 이거 저장 해보자

지금 당신이 여기서 본 것은 아무것도 실제로로드되지 않습니다 h1이없고 s3이 없다는 것은 이제 잊었 기 때문입니다 실제로 모듈에 넣으므로 아무 것도 실제로 보이지 않는다면 로드 된 h1 없습니다 h3 없습니다 그래서하자 가서 콘솔을 살펴보고 거기로 가면 당신은 앱 서버가 알려진 요소가 아니며 앵귤러는 또한 대부분의 시간에 솔루션을 제공하므로 앱 서버는 각 구성 요소이므로이 모듈의 일부인지 확인하십시오 그래서 이것은 우리에게 앱 모듈에 빠진 것이 있다는 아이디어를줍니다 이 부분이 실제로 그렇게하는 이유를 알기 위해 우리가보아야 할 부분입니다 우리의 app 모듈 typescript 파일을 보면 일반 유형 스크립트 파일에는 처음부터 많은 수입품이 있습니다

engi 모듈 장식자인 데코레이터가 있고 그 안에는 많은 무리가 있습니다 이 배열에 배열이 있는데, 우리는 부트 스트랩 포드가 무엇을하는지 이해했습니다 기본적으로 어떤 구성 요소가로드되어야하는지 또는 어떤 서비스가 우리 앱이 처음 로딩 될 때로드되어야합니다 당신이 알고 있어야하는 또 다른 구성 요소가 있다는 점은 수동으로 서버 및 구성 요소를 생성하는 경우 자동으로 수행됩니다 우리가해야 할 일은 서버 구성 요소가 있다는 것입니다

따라서 서버 구성 요소를 배치하면 다른 가져 오기 선이 있음을 알 수 있습니다 그게 추가 되었으니 타이코그입니다 이것이 당신이 말하는 방식입니다 typescript에는 서버 구성 요소가 있으며 이는 사용자가 말하는 방식입니다 서버 구성 요소가있어서 서버를 저장하고 저장해야하는 경우 이제 앱 구성 요소로 한 번로드 된 두 부분이 있음을 알 수 있습니다 다른 세트는 당신이보고있는 서버 컴포넌트입니다

당신이 이것이 머리임을 알게 될 것인가를 조사해 보았습니다 body와 app 루트 내부에 app 서버 구성 요소가 있습니다 응용 프로그램 내부에서 실행되므로 기본적으로 가장자리 3이 있음을 알 수 있습니다 이 부분은 수동으로 구성 요소를 작성하는 방법입니다 프로젝트에 추가하고 성공적으로 추가하십시오

타이프 스크립트는 대륙이 어떻게 만들어지고 있는지를 이해합니다 또한 단순히 스타일링 폴더를 추가하여 스타일에 능력을 추가하십시오 스타일링 파일이므로이 서버 점 구성 요소를 CSS라고 부르기 때문에이 CSS 파일이 아니며 여기에서 우리는 가장자리 트리 당신이 말할 수있는 색상은 파란색을 보자 이제 우리가해야 할 일은 타이프 스크립트 파일에 들어가는 것입니다 스타일 URL을 제공해야하며 앞으로도 스타일은 실제로 어떻게되는지는 모르겠지만 배열에 넣을 수 있습니다

우리는 여기에서 할거야 그래서 우리는 이것을 복사하는거야 비슷한 방식으로 CSS 파일이 생성되므로 붙여 넣기하십시오 그걸 CSS로 바꾸고 그걸 저장하자 그리고 지금 우리가 나아가고 그것을로드하면 우리는 우리의 스타일이 또한 우리 구성 요소에 적용되므로 이것이 서버 구성 요소입니다

지금 당신이 실제로 좋아하는 사람인지를 분명히하는 구성 요소 걱정하지 않는 것보다 훨씬 더 자동적이고 매끄러운 일 각도를 사용하면 구성 요소를 만들 수 있고 걱정하지 않아도됩니다 모듈과 CLI에 포함 된 모든 요소에 포함됩니다 우리의 부분적인 부분에 가서 우리는 실제로 명령을 실행했다 NG가 구성 요소를 생성하고 우리가 말할 필요가있는 서버가 있으므로 말할 필요가 있습니다 누군가 하위 서버를 말하자면 이제 CLI가 수행 할 하위 서버가 앞으로 나아갈 것이고 구성 요소에 필요한 모든 것을 만들게 될 것입니다

우리가 잠수함을 가지고 있으니이 옵서버에 여기에 폴더를 둡니다 CSS 파일이있는 하위 집합이 있으며이 하위 서버에는 해당 구성 요소 우리는 파일을 가지고 가서 그것을 넣을 수 있습니다 그래서 구성 요소 파일에 단락이 있습니다 하위 서버에서 작동하지 않는 것은 테스트 파일이기도합니다 여기에 구성 요소 파일도 있습니다

타이프 스크립트 파일과 당신은 그것을 볼 수 있습니다 당신이 그것을 사용하는 선택기입니다 응용 프로그램 하위 서버를 말한다 우리가 계속 나아가고 이것을 사용하도록하자 서버 HTML 파일 및 우리는 그냥 응용 프로그램 하위 서버가 먼저 가자 저장 말할 수 있습니다 지금보아야 할 것은 서브 서버가 여기에서 작동한다는 것입니다 기본적으로 CLI를 통해 구성 요소를 만들었고 기본적으로 그냥 사용하십시오 이것은 당신이 당신의 대부분을 사용하는 방법입니다 대부분의 회사를 만드는 구성 요소이며 이는 CLI를 통해 발생합니다

수동으로 어떻게 할 수 있는지 보여 주기만하면됩니다 서버가 쓰여지는 것은 자신감이 어떻게 쓰여지고 코드의 각 라인은 자신감이 또한 쓰여질 때를 의미합니다 이걸 비교해 보면 생성자 함수가 있고 거기에 이것에 관해서는 나중에 우리의 플레이리스트에서이 부분들로 갈 것입니다 이제 init 및 생성자에 대한 차이점을 살펴 보겠습니다 그것은 혼돈과 혼란을 일으킬뿐입니다

지금 당장은 자신감을 가지므로 첫 번째 과제는 괜찮습니다 각 CLI를 사용하여 구성 요소를 사용하고 만드는 방법 이제 우리가 만든 서버에 다시오고 내가 가지고 싶습니다 당신이 할 수있는 몇 가지 다른 것들을 먼저 알아 차려야합니다 앞으로 어떤 부분을 분석하여 웹에 대한 경험이 있다면 선택자는 기본적으로 선택 방법이라는 것을 알게 될 것이다 HTML 페이지의 요소 나 요소를 이제 이와 같이 앱 서버라고 할 때 여기 이것은 어떤 것이 든 될 수 있습니다

이것은 클래스이거나 이것은 HTML 요소 일 수 있습니다 – 지금은 HTML 요소이지만, 이것을 클래스로 사용할 수도 있음을 보여줍니다 그래서 우리는 그것이 점이라고 말합니다 앱 서버를 설치하고 저장하십시오 그래서 이것은 당신이 알고있는 어플리케이션 서버를 보여줄 것입니다

실제로 서버를 사용 했으므로 지금과 같이 앱 서버를 사용했습니다 이것을 설명하기 위해 div에 클래스를 넣고 app이라고 말하면 당신이 보았던 것처럼 서버가 지금 당신이보고 있었던이 작은 자신감입니다 그리고 서브 서버가 작동합니다 몸 그게 바로 앱 루트이고 다음에 클래스 앱 서버가있는 div가 있습니다 유능한 앱 서버에 대해 우리가 한 것은 앱 서버 우리는 클래스를 선택자로 만들었습니다

그래서 선택자는 기본적으로 num 클래스입니다 클래스는 또한 자체 스타일링을 가질 수 있으며 기본적으로 지금 어떻게하는지 실제로 이와 같은 템플릿 URL을 작성하는 대신 이것을 명령 해 봅시다 템플릿과 같은 것을 말할 수도 있습니다 템플릿은 템플릿 일 뿐이므로이 템플릿을 템플릿에 넣을 수 있습니다 지금 이것은 하위와 같은 것일 수 있습니다

섬기는 사람 좋습니다 이렇게하면 기본적으로 앱 관찰자를이 템플릿에 넣을 것입니다 스타일을 사용하지 않고도 템플릿을 사용할 수있는 템플릿 URL URL 기본적으로 인라인 스타일링을 할 수 있습니다 다음 주제 내가하고 싶은 것은 해결하는 것입니다 이 임무는 당신이 창조에 얼마나 좋은지 시험 할 것입니다

귀하의 구성 요소 그래서 다시 돌아가서 모든 방법을 다시 변경하자 그것은 그렇게 저장하자 모든 것을 저장하지 않고 저장하라 여기서 우리는 appserver를 다시 말하면서 우린 괜찮아 이제 너는 기본 할당을 해줘

사실 그렇게 할당을위한 지침을 적어 두도록하겠습니다 귀하의 첫 번째 임무를 위해 이것이 바로 당신이하고자하는 일입니다 내가 화면에서 볼 수있을 것 같아요 먼저 세 가지 지시 사항을 내려 놓았습니다 당신이해야 할 일은 적색 녹색과 황색이라는 세 가지 구성 요소를 만드는 것입니다

이제 우리는 앱의 자신감 부분에서 그들을 사용해야하고 우리는 그들에게 적절한 스타일링과 아마도 적절한 메시지를 줄 수 있습니다 사람들은 여기에서 비디오를 일시 정지하고이 3 가지를 시도하고 만들 수 있습니다 자신감을 얻은 다음 실제로 성공했는지 아닌지 다시 확인하십시오 내가 너희들에게 줄 해결책을 확인해 보라 알았어

너희들은 내가 처음으로 한 일이야 너희들은 나에게 남자들에게 임무와 나는 당신이 실제로 그것을 해결하려고 노력하기를 바란다 왜냐하면이 부분에서 우리는 방금 전 당신에게 준 과제를 해결하려고합니다 그래서이 부분을 사용할 수 있습니다 당신이 얼마나 정확했는지보기 위해서 그것은 꽤 쉬운 임무 였으므로 나는 너희들은 그것을 얻는다

왜냐하면 그것은 내가 너에게 성공적으로 어떻게 가르 칠 수 있었는지를 의미하기 때문이다 실제로 우리가 여기서 만들었던 솔루션을 위해 컴포넌트를 사용하십시오 할당 1이라고 말한 각도 폴더와 그것에 아무것도 없다 Visual Studio 코드로 열기 여기서 나가서 app 폴더의 내 소스 폴더로 이동하고 오히려 typescript 파일에 spec ts로 들어가기 만하면됩니다 앞서 나가서 이걸 내놓을 테니 너는 아무것도 없다는 걸 알게 될거야

그래서 우리가 여기서이 파일을 제공한다면 당신은 그것이 각형으로 배송되는 일반 응용 프로그램이므로 열리고 제공됩니다 오케이 너희들이 볼 수 있듯이, 과제 1에 오신 것을 환영합니다 낚시꾼들이 지금 가지고있는 기본 응용 프로그램은 우리가 할 일이 모든 것을 지우고 처음부터 다시 시작하겠습니다 우리가 실제로하고 싶은 것을 보았습니다

그래서 우리가해야 할 일은 세 가지를 만드는 것입니다 빨강 녹색과 노란색이라는 구성 요소가 있으므로 먼저 그렇게하겠습니다 먼저 이러한 요소를 만들었습니까? 우리가 필요로하지 않는 쓰레기를 다시 구해서 제목을 그렇게 지키자 제목을 지키기 위해 내가하고있는 일에주의를 기울여야한다 할당 작업을 올바르게 완료하려면이 작업을 수행 할 필요가 없습니다

이게 내가 너만 좋아하는 그런 자신감을 만드는거야 이것 또는 우리는 과제 1에 오신 것을 환영한다고 말할 수 있습니다 그것은 좋아 보인다 그래, 과제 1에 오신 것을 환영합니다 세 가지 구성 요소를 만들어 세 가지 구성 요소를 만들면됩니다

해야 할 일은 Visual Studio 코드에 새 터미널을 만들어서 회의는 정말 쉽고 여기서 우리는 ng 구성 요소 빨간색을 입력하고 싶습니다 세 가지 다른 시간에이 작업을 수행하므로 우리는 또한 파란색 컴포넌트를 가질 것입니다 우리는 또한 노란색으로 자신감을 갖게 될 것입니다 지금 우리가 CLI로 이것을하고 있기 때문에 우리의 앱 도트 모듈은 자동적으로 빨간색 파란색과 노란색으로 업데이트되었습니다 이제 우리가 여기서해야 할 일은 사용하는 것입니다

이것이 앱 구성 요소에서 사용해야하는 두 번째 부분이기 때문에 우리 앱 구성 요소는 여기에 우리의 애플 리케이션 구성 요소 그래서 우리가 할 수있는 말은 애플 리케이션입니다 빨간색 이것은 빨간색 부분을 생성합니다이 부분은 앱과 파란색 부분을 생성합니다 그리고이 앱을 만들어 노란색이 우리를 구하러 가자 지금 우리가 보는 모든 것은 빨간색 작품입니다 파란색 작품은 노란색 작품이므로 우리는 성공적으로 세 가지 구성 요소를 만들었고 우리는 App 자신감 냄비에 넣었습니다

우리가해야 할 일은 스타일링을하는 것입니다 별도의 구성 요소를 사용하여 스타일 파일을 열어 보겠습니다 우리가 이미 그곳에서 일하는 단락이라는 것을 이미 알고 있기 때문에 말하지 않을 것입니다 단락은 테두리가 없으므로 파란색 구성 요소이므로 파란색 경계선을 지정하여 1 픽셀의 모든 단색과 파란색을 지정하고 어쩌면 우리는 color to sky-blue 아주 기본적인 색상을 사용하고 있습니다 우리는 매우 유사한 유형의을 사용하기 때문에 이것을 복사 해 봅시다

빨강과 노랑색을위한 스타일링 그래서 우리가 원하는 공간을 읽고 읽어 봅시다 이것은 붉은 색이고 이것은 진홍색이되고 노란 색으로 들어가 보자 똑같은 일이 우리가 여기에서 사용할 수있는 노란색이 될 것이며, 다른 색상은 훨씬 더 칙칙한 노란색 fawns가 어둡기 때문에 실제로는 어둡게 유지합시다 그래서 이것을 저장합시다 이 파일을 저장합시다이 파일을 저장하고 지금이 파일이 있는지 봅시다 돌아가서 그것이 실제로 작동하는지 확인해 봅니다

파란색 작업은 노란색으로 작동합니다 노란색 부품에 대한 스타일링을 추가해야합니다 헤이 와이어 일종의 노란 점에 가자 CSS 여기로 가자 실제로 앱 구성 요소에서이 작업을 수행했습니다

노란 색조 노란색 점 CSS는 이것을 기본으로 여기에서 저장하고 이제는 저장하겠습니다 노란색은 노란색, 파란색은 파란색, 빨간색은 빨간색 모두 빨간색을 추가 할 수 있습니다 배경색을 추가하여 새로운 스타일링 그래서 이것은 또한 노란색 또는 오히려 다른 노란색을 선택하십시오 노란면 이 줄을 복사 한 다음 빨간색 구성 요소를 CSS로 복사합니다 빨간색을 선택하면 무언가를 선택할 수 있습니다

우리가 뭔가를 선택할 수있는 푸른 색의 껍질을 벗기는 빨간 종류의 우리는 푸른 색으로 갈 수 있었다 그리고 그것은 훨씬 더 창백해야합니다이 모든 것을 저장합시다 이제 보도록하겠습니다 예, 우리는 파란색 배경이 노란색 배경 왜 우리의 빨간색 배경이 아닌지 우리는 그것을 구원하지 못했고, 우리의 빨간색 배경도 효과가 있습니다

우리 임무를 성공적으로 완료 했으니 까 솔루션에 만족 나는 너희들도 스스로 그렇게 할 수 있었으면 좋겠다 그게 정확히 중요하기 때문에 이제는 우리가 어떻게 자신있게 맞춤 구성 요소를 만든 빌딩 블록과 우리는 심지어 한 과제를 할당했기 때문에 다음 주제로 넘어갈 때가되었습니다 즉 데이터 바인딩이므로 데이터 바인딩은 통신과 같습니다 타이프 스크립트 파일과 템플릿 간의 통신을 전달합니다

그래서 기본적으로 귀하의 비즈니스 로직과 귀하의 무엇 기본적으로 사용자가 볼 수 있도록 화면의 버튼을 클릭하고 몇 가지 조치를 취하고 싶다고 가정 해보십시오 그것에 따르면 또는 계산에서 일부 정보를 검색하거나 서버에서 출력하고 싶다면 화면에 출력하고 싶습니다 데이터 바인딩의 도움 이제 두 가지 유형의 데이터 바인딩 첫 번째 문자열 보간이고 두 번째 것은 속성 바인딩이므로 이것이 방법입니다 화면에 무엇인가를 출력 할 때 문자열 보간법과 속성 바인딩 그래서 우리가 그들을 어떻게 할 수 있는지 보자 그래서 돌아 가자

우리가하고 싶은 일 중에서 우리가 처음에 그렇게 한 일이 우리의 임무에 달려 있습니다 여기에 모듈로 가서 우리는 실제로이 모든 것을 제거하기를 원합니다 구성 요소가 앞으로 나아가고 이러한 확신을 없애고 이러한 가져 오기를 제거한 다음에는이 파일을 그대로 두십시오 그거 아저씨 이것도 지우겠습니다

이제 앱 구성 요소로 돌아가 보겠습니다 우리는 이것을 제거해야합니다 Hill 앱 모듈에서 실제로 저장해야합니다 이제 우리가 구해 냈다 우리가 계속 나아 간다

여기에서 하나의 과제를 배당하려면이 이중 곱슬을 사용하고 있음을 알 수 있습니다 중괄호 및 이것은 문자열 보간법이므로 문자열 보간법이란 무엇을 의미합니까? 글쎄, 어떤 변수도 이와 같이 임의의 문자열을 보간 된 형식과 그것은 화면에 당신에게 그것을 보여줍니다 그래서 내가 줄 게요 문자열 보간법의 사용법에 대해 좀 더 나은 예를 들어 보겠습니다 우리의 애플 리케이션 구성 요소에 우리의 HTML 및 여기 당신은 거기에 이 단락에서 우리는 서버 단계를 출력하고 있습니다 서버가 PID가있는 서버라고 말하면 실제로 무언가를 내보내려고합니다 이렇게 지금이 순간에 그것은 단순히 PID를 가진 서버가 오프라인이라고 말할 것입니다

맞습니다하지만 서버에 특정 이름이 있으면 서버 이름을 보도록하겠습니다 – – 잠에서 – – – 상태에있다 – 이제 우리가해야 할 일이 가는지 보자 앞서 app 파일로 이동하여 스크립트 파일이므로 지금은 우리가해야 할 일은 우리가 필요로하는 변수 중 몇 가지를 만드는 것입니다

먼저 서버 이름을 지정하고 서버 이름이 Apollo라고 가정 해 보겠습니다 좋아, 우리는 또한 서버 PID를 필요로하므로 서버 PID는 11로 우리는 또한 서버 상태가 필요하다 그런 다음 서버 상태를 다음과 같이 설정할 수있다 오프라인이므로 문자열이됩니다 그래서 우리는 그 문자열을 우리의 노래 코드 그래서 지금 우리는 우리 자신감으로 이런 말을 할 수 있습니다

HTML 페이지 그래서 우리가 우리 장군의 직함을 얻고 있었다는 것을 기억한다면 당신이 새로운 각도 프로젝트를 만들 때 각과 함께 배송되는 응용 프로그램 그것은 so-and-so 응용 프로그램에 오신 것을 환영합니다 그래서 문자열로 끝났습니다 당신이 기억한다면 보간법은 중괄호처럼 보였다 제목이 바로 여기에 있기 때문에 우리가 할 수있는 일은 변수를 넣거나 기본적으로 변환 할 수있는 문자열 또는 기타를 반환하는 함수 이 중괄호 사이에 여기에 표시됩니다

우리가 할 수있는 일은 서버 이름을 참조 할 수있어서 서버 이름이 기본적으로 이와 같이 유지 된 다음 PID를 사용하여 PID를 여기에 넣을 수 있습니다 그래서 이것은 숫자이기 때문에 숫자 또한 문자열로 변환 될 수 있습니다 따라서 문자열 보간은이 과정에서 작동 할 것이고 우리는 또한 물론 서버 상태에서 우리는 서버 상태를 참조하여 서버 상태를 유지합니다 서버 상태를 유지하는 변수 이제는 문자열을 완료했습니다 보간 그래서 우리의 출력이 어떻게 생겼는지 보자

프로세스 ID 11 인 PID 11의 서버 이름 Apollo가 오프라인 상태입니다 지금 나는 또한 우리가 여기서 함수를 넣을 수 있다고 말했었다 함수를 만들면이 함수에서 기본적으로 서버 ID 그래서 우리는이 기능에서 우리는 기본적으로 토글 할 수있다 서버 상태를 토글하여 서버 상태를 토글하는 것과 같이 말할 것입니다 이 시작 서버 상태가 좋아지지 않는 반환합니다 우리가 무엇을 그래서 여기에 우리가 거짓으로 말할 것이고 거짓이라면 이렇게 말하면서 우리가 어떤 논리에 넣을 수있는 라인에서 벗어날 것임을 이해합시다

그 거짓은 라인 밖으로 인쇄되지만 지금은 그것에 들어 가지 않겠다고 말할 수 있습니다 그래서 우리는 이와 비슷한 것을 말하거나 오히려 다루지 않겠습니다 그것이 행해져 야하는 길은 게으른 사람들이되지 마라 이제 우리는 상태가 있다고 말할 수있다 이 플래그는 현재 오프라인 상태이므로 true 또는 false로 설정됩니다

시작 서비스 상태 플래그가 true로 설정되어 상태가 true가됩니다 그래서 우리는 그것을 진실되게 만들거나 오히려 우리가이 도트 서버에서 나오지 않도록 할 것입니다 현재 작동 할 상태 플래그 및 상태 플래그 이것이 기본적으로 변환 될 것이고 공백이 없어야하기 때문에 적절하게 이 시작 서버 상태 플래그가 true와 같으면 우리는 말할 수 있습니다 그래서 우리는 상태 플래그가 true 인 경우 더 많은 중괄호를 열어야한다고 말할 수 있습니다 우리는 서버 상태를 말할 것입니다

이 도트 서버 상태는 온라인으로 설정 될 것입니다 좋습니다 그리고 거기에 우리가 간다 그리고 이것이 끝나고 난 후에 우리는 단지이 점을 돌려 줄 수있다 기본적으로 서버 상태는 기본적으로 여기서 일어나고 있습니다

우리는 플래그를 설정했습니다 우리가 할 수있는 공백 빠른 수정 누락 정확히 똑같은지 확인하기 위해 트리플을 넣으면됩니다 EQ 밸런스는 또한 우리가하는 일을 여기에서 체크하십시오 상태 플래그를 false로 설정하고 해당 상태 플래그에 따라 서버 상태를 온라인 또는 오프라인으로 변경합니다 이제는 넣었습니다

이 함수는 문자열에서 호출하여 해당 함수를 사용할 수 있습니다 보간법 대신 변수를 넣는 대신에 이 기능은 서버 상태를 온라인으로 바꿀 것입니다 기본적으로 우리는 여기에서하고있는 것은 정말로 간단합니다 문자열을 반환하면됩니다 문자열로 변환되었으므로 이제 서버 상태를 다음과 같이 토글했습니다

온라인으로 우리는 문자열 보간법에서 함수를 전달함으로써 그렇게했습니다 이제 모든 HTML 요소에서 속성 바인딩을 수행 할 수있는 방법을 이해합시다 어떤 속성을 가지고 있거나 다른 속성 목록을 쉽게 찾을 수 있습니다 MD n은 Mozilla 개발자 네트워크입니다 우리가 서버 상태를 토글하는 버튼이 있다고 가정하자

오프라인에서 온라인에 이르기까지 오프라인에서 온라인으로 코드에 하드 코딩되었으므로 버튼과 서버 상태를 올바르게 토글 (toggle)한다고 가정 해 봅시다 버튼을 실버 상태로 전환하는 것과 같은 버튼이 있으므로 여기에 버튼이 있지만 지금은별로 도움이되지 않지만, 단지 속성 바인딩을 보여 주면서 버튼이 비활성화되었다고 가정 해 보겠습니다 버튼을 2 초 후에 실제로 사용 설정하면 웹 사이트가로드됩니다 단추 누르기에 불일치가 없도록하기 만하면됩니다 클래스 구성 요소에 생성자 함수를 작성하여이를 달성하십시오

여기 당신은 생성자를 만들 수 있으므로 set timeout을 말할 수 있습니다 그래서 우리는 먼저 그것이 가능하게 될 시간을 주어야합니다 2 초 30 초이므로 2 초 30 초입니다 실제로이 버튼을 사용하도록 설정하는 데 충분한 논리가 있으므로 버튼 상태라고하는 변수가 있으므로이 시점에서 버튼 상태가 있어야합니다 사실, 버튼이 비활성화되어 있기 때문에 먼저 비활성화해야합니다

이 점 단추 상태가 false와 같아야합니다 지금 우리가 한 일은 바로 우리가해야 할 일은이 일을 묶어 두는 것입니다 속성 그래서 우리는이 속성을이 속성 사이에 두어 속성 바인딩을 수행합니다 대괄호로 묶은 다음 변수 또는 함수의 결과에 바인딩합니다 그래서 여기서 우리는 우리가 두 개의 버튼 상태를 묶어 버릴 것이라고 말할 수 있습니다

이 따옴표는 작은 따옴표가 아니므로 미안합니다 이제 생성자가 얻은 다음에 여기서 무슨 일이 일어나는지 우리 버튼 상태를 실행하면 거짓이되어 장애인이 될 것입니다 false이고 첫 번째로 true 일 것입니다 처음 2 초 30 초가 지나면 실제로이 동작을 보도록하겠습니다 페이지가로드되고 2 초 반 후에 버튼이 활성화되므로 2 초 반 동안은 당신에게 다시 보여줍니다

갑자기 활성화되어서 이것이 속성 바인딩을 수행하는 방법입니다 여기서 보았던 것은 우리가 통과 한 동작에서 문자열 보간을 보았습니다 변수 이름을 가진 문자열 보간 인자와 우리는 심지어 함수를 호출 한 다음 속성 바인딩을 수행 한 다음 속성 바인딩을 위해 먼저 서버 상태를 전환 할 수 있도록 버튼을 만들었지 만 실제로 그 기능을 추가했지만 아직해야 할 일은 없지만 우리가 한 일은 우리는 버튼의 disabled 속성을 특정 변수에 바인드했습니다 기능을 할 수도 있었을 것입니다 대괄호가있는 함수가 작동하고 이제 우리가 볼 수있는 것은 우리의 다음 주제이자 이벤트 바인드 인 이벤트 바인딩 특정 논리에 대한 기본 바인딩 Dom 이벤트입니다

우리의 토글 서비스 상태를 바인딩하기 위해 타이프 스크립트에 상주 할 것입니다 기본적으로 서버 상태를 전환하기 때문에 여기에서 생성 한 그런 다음 서버 상태를 반환하면 기본적으로 서버 상태를 전달하여 수행 할 수 있습니다 추가 할 때마다 모든 버튼에 클릭 및 클릭이라는 이벤트가 있습니다 이벤트가 대괄호로 서버 상태를 토글하면 이제 활성화됩니다 2

5 초가 지나면 기본적으로 작동하지 않습니다 우리가이기 때문에 그것은 작동하지 않는다 은 상태를 여기에서 말하고 우리가하고 싶은 것은 서버를 반환하는 것입니다 상태 그래서 그것은 실제로 정직하게 일해야한다 그래서이 중지 서비스 상태 그래서 만약 당신이 방금 서버의 상태를 출력하는 것입니다 이리 좋습니다

그래서 우리는 여기에 논리가 없으므로 그것을 오프라인으로 돌아 가게합니다 이 시작 서버 상태가 오프라인 상태와 다른 것을 추가 할 수 있습니다 이제는 오프라인으로 표시하는 기능을 설정 했으므로 처음에는 다시 온라인으로 바꿔 놓았고, 그것을 바꾸기위한 진짜 논리는 없었습니다 다시 오프라인으로 돌아와 이제 해보겠습니다 이제 대화를 볼 수 있습니다

여기에서 일어나서 온라인 체인을 오프라인으로 연결할 수 있으므로 이제는 오프라인으로 연결할 수 있습니다 버튼을 클릭하면 서버 상태를 온라인에서 오프라인으로 전환 할 수 있습니다 등등 그래서 이벤트 바인딩 및 속성 바인딩 및 우리는 또한 이벤트의 도움으로 문자열 보간을 보았습니다 바인딩 및 속성 바인딩 이제 우리는 실제로 그것을 만들 수있는 버튼을 가지고 있습니다 오프라인과 온라인이지만 우리가 할 수있는 또 다른 방법이 있습니다

쌍방향 바인딩을위한 양방향 바인딩 그래서 우리가 보게 될 것은 기본적으로 우리가 속성 바인딩과 이벤트 바인딩을 결합하여 시도해 보겠습니다 그래서 이벤트 바인딩을 위해 우리의 코드 편집기로 돌아가서 여기로 가자 우리의 HTML 페이지와 우리가 여기서 말하고자하는 것 좋습니다 그래서이 모든 정보를 제거하여이 서버 정보를 첫 번째로 만들 수 있습니다 우리는 기본적으로 형식을 가질 수 있으므로 기본적으로 텍스트 형식을 입력 할 수 있습니다

자리 표시자를 넣고 서버에 넣자 이름은 또한이 아래에 단추를 넣으면 제출 단추가됩니다 또는 양방향 바인딩을 보여주기 위해 할 수있는 버튼 대신 단락과 여기에 서버 이름을 입력하면됩니다 여기서 서버 이름을 입력하면 서버 이름이 여기에있게되므로 여기에 있습니다 기본적으로 문자열 보간법과 내가 보간하는 것은 서버 이름입니다

우리가 만들었던 것은 괜찮습니다 그래서 이것은 자본 S를 가지고 있습니다 그래서 잊지 말자 그래서 우리 수도 S는 여기에 있고 우리가 할 일은 기본적으로 당신이해야 할 일을 모델로 사용하는 모델은 앱 모듈로 들어가는 것입니다 여기 귀하의 애플 리케이션 모듈에서 당신이 가져올 필요가 기본적으로 양식 모듈입니다 그래서 당신은 말할 필요가 폼 모듈을 가져올 수 있습니다 폼 모듈에서 추가 속도 각 슬래시 형식이므로이 값을 작은 따옴표로 묶어야합니다

여기서 우리가해야 할 일은 규칙을 사용하지 않는 것을 보자 우리가 기본적으로 양식 모듈을 가져온 수입 가져 오기 이 양식 모듈에는 ng 모델이라는 기능이 있습니다 모델은 입력되는 내용을 실제로 바인딩 할 수있게 해줍니다 특정 변수이므로 입력 값에 ng-model 속성을 넣을 수 있습니다 모델은 이벤트로 그리고 속성으로 바인딩되므로 전달해야합니다

서버 이름 여기서 우리는 기둥이라고하는 은색의 이름을 보자 아폴로가 미리 채워져 있고 서버에 다른 이름을 짓기를 원한다고 가정 해 봅시다 그래서 그것을 Gixxer라고 부르 자서 Jake가 서버의 이름이 될 것입니다 친구들이 자동으로 여기에서 업데이트되고 있음을 알 수 있습니다 양방향입니다

바인딩을 사용하면 양방향 바인딩과 단방향 바인딩 여기에서 할 수있는 것은 자리 표시자를 넣는 것입니다 우리는 서버 이름을 가질 것입니다 그래서 우리가 할 수있는 것은 다른 입력을하는 것입니다 이번에는 엔트리 모델을 너무나 초초원적인 속성으로 넣을 것입니다 낙타 껍데기로 모델을 만들면 이름을 붙이기 위해 구속 될 것이라고 말하고 있습니다

그래서 서버 이름에 바인드하고 무슨 일이 일어나는지 보자 2 개의 입력과 모든 것이 아폴로로 가득 차 있습니다 앞으로 나아가고, 여기서 자동으로 변경되지 않습니다 두 번째 단락은 단 한가지 방법이기 때문에 여기에있는 동안 우리는 줄 것입니다 Paul이라는 이름이 우리 서버에 자동으로 업데이트됩니다

조금만 삭제하면 실제로 업데이트되지 않습니다 여기 없애기 때문에 – 우리는 그것을 묶습니다 실제로 진행할 이벤트가 필요합니다 귀하의 행사와 귀하의 재산이 함께 묶여 지도록 제출하십시오 기본적으로 당신은 그것들을 구속해야합니다

이것은 조금 더 재미있게 h1과 비슷한 것을 만들어 봅시다 가장자리를 넣어 – 그리고 내가 입력 말 정보 알았어 일단 우리가 그렇게 준비하면, 우리는 이름과 봉사를 말할 수있다 서버 ID는 기본적으로 PID가 될 것이므로 입력 서버 이름 부분과 그러면 여기에 정보를 표시하여 표시 할 수 있습니다 디스플레이 서버 정보 우리가 할 수있는 일은 이것을 그냥 복사 해두는 것입니다

그래서 서버 PID는 자기 PID가 항상 서버 PID를 잊어 버린다 그래서 PID가 표시되고 서버 상태가 표시됩니다 그래서 이제 우리는 기본적으로 작고 작은 은색 페이지가 있고 우리는 버튼은 은색 상태를 토글 할 수 있습니다 서버 이름 그래서 우리가 여기서 보았던 것은 기본적으로 문자열 보간을 보았습니다 그래서이 모든 출력은 문자열 보간을 통해 사용자에게 표시됩니다

우리는이 버튼에 속성을 바인딩하고 있습니다 처음 25 초 동안 그것을 토글 링하면 이것은 현재 비활성화되어 있습니다 우리가 실제로 서버를 토글 한 곳에서 이벤트 바인딩을 보았습니다 버튼을 사용하여 상태를 확인한 다음 양방향 이벤트 바인딩을 보았습니다

입력 메소드 나 입력 요소를 넣고 우리는 끊임없이 두 가지 방식의 바인딩을 사용하여 입력 내용을 표시합니다 오늘 우리의 두 번째 임무에 우리를 데려오고이 비디오에서 나는 이 과제를 다시 시도하고 해결해주세요 너 자신과 이것들은 두 번째 임무를위한 지시이다 과제 2 당신이해야 할 일은 다음의 입력을 취할 수있는 페이지를 만드는 것입니다 양방향 데이터 바인딩을 사용하는 첫 번째 이름이며 다음을 사용하여 이름을 출력해야합니다

다시 양방향 데이터 바인딩을 사용하기위한 문자열 보간 ng 모델을 사용하고 ng 모델을 사용하려면 forms 모듈을 가져 와서 가져와야합니다 그리고 귀하의 애플 리케이션에 귀하의 애플 리케이션 도트 모듈에 TS 파일과 그 앱 스토어 모듈 또는 TS 파일을 저장해야합니다 모든 것을 잊지 마세요 출력에서 실제로 문자열 보간법을 사용해야합니다 이 이름을 빈 문자열로 재설정하는 버튼을 추가해야합니다

속성 바인딩과 같은 것입니다 직접 해결할 때까지 알지 못합니다 이름 필드가 현재 비어있는 경우이 버튼을 다시 사용하지 않아야합니다 나는 당신이 비디오를 여기에서 멈추고 당신이 계속 나아가고 해결할 것을 제안 할 것이다 이걸 해결할 수 없다면 나 때문에 따라갈 수있어

지금이 과제의 해답을 코딩 할 것입니다 그래서 다시 돌아가 봅시다 우리의 코드 편집기와 이제 우리가 할 일은 할당 번호를 시도하고 해결하는 것입니다 둘, 그래서 내가 맡은 과제 프로젝트를 계속 편집 할거야 새로운 임무 프로젝트를 만들지 않을 것입니다

그래서 우리가 할 일은 기본적으로 제거입니다 여기에서 모든 것이 우리가 필요로하는 모든 것을 제거합시다 새로운 논리 그래서 우리를 위해 일하지 않을거야 우리가 생성자 함수를 필요로하지 않는다는 것을 제거하겠습니다 우리가 수업을 듣기 만하면 될 필요가 없습니다

순간 나는 또한 시작 모듈이 우리의 앱 시작 모듈에있게 할 것이다 왜냐하면 우리는 그것을 필요로 할 것이므로 나는 이것을 편집하지 않을 것입니다 모든 것을 저장했으며 이제 우리가 시작할 수있는 빈 캔버스 만 있습니다 처음 계기에 발전하면 우리는 양방향을 사용하여 이름을 입력 할 수있는 페이지를 만들어야합니다 데이터 바인딩을 사용하면 사용자가 자신이 자신을 퍼팅하고 있음을 알리 길 바랍니다

이름과 라벨이 같아서 이름을 알게 될 것입니다 그래서 F 이런 이름을 지어서 이름을 말할 수 있고 여기서 우리가 할 수있는 것 do는 타입 텍스트를 가진 입력이고 그것은 또한 F name의 이름을 가진다 label이 이제 입력에 바인딩됩니다 이렇게하면 항상 코드를 올바르게 작성해야합니다 레이블이 있어도 자리 표시 자에 넣어야합니다

좋은 연습이므로 자리 표시 자에서 이름을 말하고 이제는 우리가 우리는 우리의 이름을 넣을 수있는 장소를 가져야합니다 여기서 첫 번째 이름은 여기에있을 것입니다 우리는 또한 우리의 이름을 입력해야합니다 우리가 그것을 둘 수 있도록 두 번째 지시에 따른 단락의 이름 단락에서 벗어나서 문자열 보간법을 사용할 수 있습니다 하나의 이름만을 다루고 있기 때문에 name이라는 변수를 사용하십시오

마지막으로 공급자 이름이나 이름을 만들 수있게되었습니다 우리의 타이프 스크립트 (titcript)와 name이라는 변수를 만들고 그것을 공백으로 두자 이제 우리는 이중 염소를 사용하지 않을거야 우리는 작은 따옴표를 사용하고 그것을 지금 비워 둡니다 그래서 지금 우리는 말할 수 있습니다

여기에 표시해야하는 우리의 이름은 기본적으로 우리가해야 할 일입니다 바인딩을해라 그렇게 간단하게 우리는 우리가 할 수있는 것을 정말로 쉽게 배웠다 이 모델을 통해 우리는 이름이나 재산의 속성에 바인딩 할 수 있습니다 오히려 우리가 방금 만든 변수 이름은 여기서 우리는 이름을 가질 것입니다

우리는 그냥 가서 타이핑을 시작할 수 있으며 우리의 이름은 타이핑됩니다 이제 우리가해야 할 다른 일은 리셋 버튼을 추가해야한다는 것입니다 빈 문자열의 이름을 먼저 입력하고 해당 버튼을 만듭니다 우리 자신을 위해서 버튼이 필요합니다이 버튼은 리셋 이름과 기본적으로 클릭 할 때마다 함수 또는 이벤트가 있어야합니다

클릭 할 때마다 기본적으로 앞서가는 기능이 있어야하며 이름을 다시 비워서 reset name이라는 함수를 가질 수 있습니다 이름 재설정은 우리 함수가 될 것이므로 함수를 작성해 보겠습니다 이제 초기화 된 이름이 우리의 기능이 될 것이며 우리가하고 싶은 것은 설정되어 있습니다 이 도트 이름은 공백으로 다시 같습니다 실제로 이벤트 I없이이 작업을 수행 할 수 있습니다

추측해서 누락 된 공백을 고칠 수 있다면 우리가 실제로하는지 보자 이름을 다시 설정하고 이름을 비워 둡니다 그래서 우리는 그것을 이벤트에 묶었고 그것은 클릭 이벤트이며 우리는 우리가 직접적으로이기 때문에 우리는 아무것도 지나치지 않습니다 재산이나 여기에 이벤트에 bided되고 그래서 지금 우리가해야 할 그것을 우리가 바인딩하려고하는 속성이되도록 속성에 바인딩하십시오 비활성화되어 이제는 기본적으로 기능을 검사 할 것입니다

이름에 가치가 있는지 없는지 확인하기 위해 실제로 이름 도트 길이 0과 같은 것을 말하지만 우리는 시도하지 않을 것입니다 여기에 코드를 추가하면 실제로 할 수있는 기능을 그대로 사용합시다 기본적으로 3 차 작업을 기본적으로 한 줄로 처리했지만 왜 그렇게합니까? 그 이름을 확인해 보자 이름을 확인해도 돌아올거야 true 또는 false 그래서 지금 우리는 체크 이름을 가지고 있고 우리가 말할 수있는 것은이 닷 이름 2가 2와 같고 우리도 상태를 설정할 수 있으므로 상태는 true입니다

비활성화 된 기능을 실제로 처리하기 위해 상태 변수가 필요하다면 if 이 도트 이름은 같음과 같음을 의미합니다 내가 말하고자하는 것은 공백입니다 이 도트 상태는 사실로 유지되거나 우리가 할 수있는 일은 이것이 우리가 할 수있는 것은이 도트 상태가 2와 같다고 말하는 것입니다 그러니 우리의 논리를 다시 살펴보고, 우리의 상태가 참이고 그것이 빈 문자열 Rado 우리는 disable을 false로 바꿀 것이므로 false라면 우리가 여기서해야 할 일은 이름을 확인하는 것입니다 그래서 우리는 실수를했습니다

콘솔과 템플릿을 검사 해 보겠습니다 버튼의 알려진 속성이 아니기 때문에 disabled에 바인딩 할 수 없습니다 좋아, 장애인은 알려진 재산이 아니기 때문에 장애인이 아니다 우리가 만든 어리석은 실수였습니다 알았어

그래서 이름을 확인하는 것은 함수가 아니다 이름을 우리가 실제로 여기에 저장하는 것을 잊어 버렸습니다 그리고 공백을 넣으십시오 이제는 문자열을 빈 칸으로 설정할 수있는 버튼이 생겼습니다 문자열을 다시 입력하지만 우리의 과제에 따르면이 버튼 이름이 비어 있으면 비활성화해야합니다

이렇게하면 우리는 실제로 우리가 연습 할 수 있습니다 속성 바인딩 그래서 기본적으로 우리는 disabled 속성을 함수에 바인드해야한다 기본적으로 상태를 반환하므로 함수가 있다고 가정 해 보겠습니다 check name을 호출하고이 함수를 생성 해 보자 우리의 기능이 될거에요

큰 따옴표로 묶으세요 응용 프로그램은 당신이 여기에 있기를 원합니다 그래서 지금 상태가 될 것입니다 처음에는 false이고, check라는 또 다른 함수가 있다고 가정 해 봅시다 이름과 수표 이름에 우리가하고 싶은 일은 우리가 할 수 있는지 확인하는 것입니다

if 문으로 부분을 검사하면이 도트 이름이 이름이 빈 문자열이면 빈 문자열이고 우리가 원하는 것은 빈 문자열입니다 버튼을 사용할 수 없도록 설정하고 상태를 true로 반환하면됩니다 변수를 true로 설정하면 반환 할 것입니다 그래서이 도트 상태를 반환하면 시작 상태를 여기로 반환하면 우리는 기본적으로 사용할 수없는 버튼이 있습니다 먼저 우리가 가야 할 모든 것

앞서서 우리가 잘못한 것을 확인하십시오 그래서 우리는 계속 진행하여 이것을 저장해야합니다 그래서 이름이 실제로 전달되고 있습니다 우리가 볼 수있는 버튼이 있다는 것을 알았습니다 사용할 수 없지만 입력을 시작하자마자 버튼이 활성화되고 클릭 할 수 있습니다

기본적으로 그것을 장애인 국가로 돌려 놓을뿐만 아니라, 이름 문자열을 빈 문자열에 넣으십시오 그러면 이것이 2 번 과제에 대한 해결책입니다 너희들이 나와 함께 따라 왔고, 의심 스러울 때 스스로 해결하는 의구심이 이제는 해결되었습니다 앞으로 나아 갑시다 그리고 오늘 우리의 각도적인 기초에 대한 마지막 주제를 살펴 봅시다

지시어 그래서 정확히 지시어는 무엇입니까? 각진 사이트 및 그들이 말하는 것을 보자 지시어에 대해서는 여기에 두 가지 지시어가 있습니다 하나는 속성 지시어이고 하나는 구조 지시어이므로 속성 지시문은 Dom 요소의 모양이나 동작을 짧게 변경합니다 지시문은 기본적으로 돔에 대한 지시입니다 어떤 속성 때문에 기숙사를 변경하거나 기숙사를 구조적으로 바꿀 수있다

구조 지시어이기 때문에 구조 지시문이 기본적으로 사용됩니다 당신이 특정 부분을 입력하고 싶은 곳에서 내가 여기있는 부분을 말하자 디비전이 ng-if 지시문과 함께 사용되고 있으며 출력 중입니다 영웅 점 이름이 여기에 있으므로 기본적으로 if 문이 있습니다 우리는 ng-if가 잠시 후에 의미하는 바를 알게 될 것입니다

그러나 이것은 지침이며 여기에는 모듈로 작성된 지시 사항이 있습니다 앞으로 우리가 훨씬 더 자세히 살펴볼 지시어에 관한 강의 지시어는 무엇이며 사용자 지정 지시어는 어떻게 작성 될 수 있습니까? 이제 우리는 지시어가 짧은 지시어에서 무엇을하는지 이해하려고합니다 이 구조체는 구조체이며이 구조체는 Dom에 지시를 내립니다 그래서 보도록하겠습니다 어떤 지시어가 보이고 어떻게 읽는 것만으로 지시어를 만들 수 있는지 우리가해야 할 지시어를 만들기위한 문서는 우리가 지시어를 응용 프로그램 하이라이트로 주면 지시문이 만들어집니다

1 월 지시문이므로 여기에서 CL 명령을 사용하여 생성 할 수 있습니다 그런 지시어들은 우리가 할 일은 우리가 할 일입니다 속성 지시어가 어떻게 사용되는지 이해하기 위해 기본 제공 지시문을 일부 사용할 예정입니다 구조적 감독이 실제로 어떻게 작동하고 있는지 우리는 다른 사람들이 그렇게한다면 기본적으로 if와 else 그리고 ng를 사용할 것입니다 그래서 이것들은 우리가 오늘 그리고 이후에 사용하게 될 세 가지 지시어들이다

이 지시어를 사용하는 방법을 보여 드리며 또한 과제를 부여 할 것입니다 이 각도 자습서에 대한 마지막 과제가 될 것이며 우리는 그 이후에 우리는 실제로 모든 싱글을 논의 할 것입니다 오늘 우리가 배운 비트는 컴포넌트 데이터 바인딩이다 바인딩 지시문은 모든 것이 훨씬 더 자세하게 이루어질 것이며 우리가 이를 세부적으로 수행하면 우리는 가장 중요한 프로젝트를 갖게 될 것이므로 우리는 이 재생 목록을 통해 프로젝트를 만들고 결국 당신이 거기에 나가서 거의 균열에 빠질 수 있다는 자신감을 우리가 앱을 만드는 법을 가르치기 때문에 거기서 인터뷰 작업을하고 결국 우리는 각도 면접 질문을 위해서 당신을 훈련시킬 것입니다 이제 기본 제공 지시문을 사용하는 방법에 초점을 맞추자

각도가 있으므로 내장 된 지시문을 사용합니다 우리가 할 수있는 것을 보아서 우리가 원하는 첫 번째 지시어 use는 기본적으로 ng-if 지시어입니다 그래서 if를 보여주기 위해 우리가 할 수있는 것을 보도록하겠습니다 if 기본적으로 구조적으로 무언가를 보여줄 수 있다면 변수가 다음과 같은 경우에 뭔가를 보여주고 싶다면 이것이 예라고합니다 우리가 할 수 있도록 거짓 일 경우 다른 것을 보여주고 싶습니다 간단히 B라고 말하면 단락을 보여줄 것이고 만약 그렇다면 ng이라고 말할 것입니다

표현식에 묶어서이 표현식을 호출 할 것입니다 플래그와 우리는 플래그가 사실이라고 말하고 우리는 플래그가 거짓이라고 말할 것입니다 그렇지 않으면 깃발을 보여주기 위해 여기에 그렇지 않으면 거짓이다 그렇지 않으면 우리는 로컬 레퍼런스라는 로컬 레퍼런스는 ng 내에서 사용된다 우리가 로컬 참조 이름을 부여해야한다면 템플릿을위한 템플릿 else 블록이라고 부르 자 else 블록에서 우리는 flag가 false라고 말하는 문단 이제 우리는 실제로 이것을 토글하는 어떤 방법이 필요하다 깃발 그래서 우리는 토글 깃발 같이 무언가를 말할 것이다 단추를 창조한다 토글 링 플래그를 위해 여기에 우리는 이벤트를 넣을 것이고 우리는 바인딩 할 것입니다

이 이벤트를 우리 깃발을 토글하는 함수로 옮겨서 이것을 호출 할 것입니다 function toggle flag 이제 템플릿을 만들었으니 이제는해야 할 일만 남았습니다 우리가해야 할 모든 논리에 대해 이렇게 비즈니스 로직을 추가합니다 먼저 플래그라는 변수를 작성하십시오 이것은 우리가 필요로하지 않기 때문에 플래그와 깃발이라는 변수를 가질 것입니다

무엇보다도 먼저 사실로 설정 될 것입니다 이제는 함수가 될 것입니다 토글 플래그 (toggle flag)라고 불리는이 함수에서 우리가 할 일은 우리는 단지 우리가 할 수있는 모든 것을 토글하기 위해 지금 토글 할 것입니다 이 도트 플래그가 아닌 두 개가 사용할 수있는 토글을 정말 쉬운 방법으로 이제 막이 점을 반환 할 수 있습니다 우리가 그렇게하고 있기 때문에 플래그를 붙이십시오

이제 우리가 할 수있는 일은 이것을 저장하고 실제로 작동하는지 확인하십시오 flag가 true이고 flag가 false이므로 flag가 있음을 나타냅니다 우리가 이것을 참조하지 않았기 때문에 false가 실제로 표시되지 않습니다 우리가 만든 로컬 참조는 로컬 참조이므로 우리는 그것을 만들고 우리는 else 블록을 생성한다고 말함으로써 그렇게합니다 앞서 말하던 것을 저장하자

false 플래그가 true 인 경우 플래그가 false이므로 실제로 퍼팅 중인지 확인하십시오 두 개의 다른 단락을 살펴 보도록하겠습니다 본문이 가파른 곳으로 들어가서이 버튼을 보도록하겠습니다 그러면 단락이 있습니다 여기에서 생성되었으므로 이것을 전환하고 새로운 단락을 만듭니다

flag가 false라고 말합니다 flag가 true입니다 flag가 false입니다 true 플래그가 false 인 경우 실제로 표시 할 수있는 훌륭한 방법입니다 매우 조건부로 이제 나는 이것이 우리가있는 다른 블록이라는 것을 보여줄 수 있습니다

사실 하나의 블록이 끊임없이 수정되는 대신 실제로 보여주는 것은 별도의 블록 자체가 있으므로 알아두면 매우 중요합니다 다시 한 번 해봅시다 이제 그것을 저장하고 이제 우리가 무엇을 보는지 알아 보겠습니다 우리의 머리에서 오히려 오히려 몸에서 오히려 얻을 수있다 뿌리깊은 지금 우리는 깃발이 진실하다는 것을 말하는 절이 있고 지금있다 신분증에 아주 다른 철자법 인 단락이 있습니다 false이지만 이것이 새로운 블록이라는 점을 증명합니다

그래서 이것이 어떻게 bill 정의에서 또 다른 흥미로운 부분을 살펴 보겠습니다 각과 함께 배송되며 그것은 ng 스타일입니다 그래서 ND 스타일을 사용하면 할 수있는 일은 우리가 여기있는 것을 분석하면 어떤 특정한 상태가됩니다 flag가 true이거나 flag가 false 인 특정 조건이 지금 무엇인가? 우리는 이것을 색칠하기를 원합니다 이것은 ngif의 예입니다

flag가 true 또는 false 인 경우 녹색으로 처리하므로 매우 유용합니다 쉽게 ng 스타일이라고 불리는 것의 도움을 받아서 우리가하는 스타일은 우리는 이제이 속성을 작은 따옴표로 묶지 않을 수도 있습니다 따라서 색깔을 말할 수 있고 당신이 할 수있는 것은 말할 수있는 표현을 넣을 수 있다는 것입니다 색상을 얻는 함수와 같은 것을 사용하면 지금 실행할 수 있습니다 우리가해야 할 일은 우리는이 함수를 만들어야한다는 것입니다

우리가 색을 얻을 수 있도록 색을 얻고 색을 돌려 주겠다 아마 깃발에 따른 문자열 일 겁니다 그렇다면 우리가하고 싶은 말은 이 도트 플래그가 true와 같으면 원하는대로 반환하고 싶습니다 녹색으로 돌아오고 거짓이면 우리는 빨간색으로 돌아 가기를 원합니다 그러니 여러분이 볼 수 있듯이 이것이 녹색임을 알게하십시오

지금은 빨간색으로 바뀐 다음 녹색과 빨간색으로 다시 바뀝니다 기본적으로 우리는 표현을 통과 시켰으며이 표현에서 우리는 color와 get color 메쏘드는 red 또는 초록색이므로 요소에 스타일을 동적으로 추가 할 수 있습니다 이제 HTML 페이지에서 동적 스타일을 수행하는 또 다른 방법은 클래스 그래서 우리가 여기에서 할 수있는 것은 우리가 요소에 클래스를 추가 할 수 있다는 것이다 우리가 또 다른 h2를 가지고 있다고 가정 해 봅시다 그리고 이것은 단지 예제 일뿐입니다

지금 내가하고 싶은 것은 이걸 돌리고 싶다 그래서 우리가 추가하고자하는 클래스는 기본적으로 흰색이라고 부르고 클래스를 추가하려고합니다 이 색상을 얻을 때 true를 반환하자 그 논리를 밖으로 붙여 넣으십시오 이제 우리가해야 할 일은 앱에 들어가는 것입니다

자신감있는 CSS 파일을 만들고 white라는 클래스를 만들고이 클래스는 기본적으로 검은 색 테두리 테두리를 넣습니다 : 1px 검정색은 오히려 그것을 만들어 보겠습니다 빨강, 그리고 우리는 배경색을 검정색으로하고 우리는 흰색으로 갈 글꼴 색상 그래서 이것은 우리가 추가하는 스타일링입니다 이것은 기본적으로 CSS에서 클래스를 사용하는 진정한 이유이므로 지금 우리가 수업을 만들었습니다 함께 스타일링의 무리가 가자 모든 파일을 저장하고 계속해서이 파일이 어떻게 보이는지 봅시다 이것은 이것이 설정되었을 때 클래스의 예제 일뿐입니다 거짓으로 클래스가 제거됩니다

그냥 알려주도록하겠습니다 본문 부분과 애플 리케이션 루트에 가서이 수업을 보면 될 것입니다 클래스를 추가하여 white라는 클래스를 추가 한 다음 white라는 클래스를 제거합니다 class는 white라고 불리는데, 이것은 클래스를 사용하여 모든 종류의 클래스를 넣을 수있는 방법입니다 클래스의 도움으로 HTML 요소에 동적 스타일을 적용 할 수 있습니다 다음 지시문을 살펴 보겠습니다

ng 4라고합니다 마지막으로 들어가기 전에 4를 사용하는 방법에 대한 간단한 예를 들어주세요 이 튜토리얼의 할당은 실제로 반복 할 때 4가 사용됩니다 배열을 통해 그래서 내가 무슨 뜻인지 보여 주자 그래서 너는 무리가 있다고 가정 해 보자

이름을 알려 주거나 뭔가를 매우 실용적으로 만들어 보자 학생 명단처럼 뭔가 이렇게 지금은 학생 명단이라고합니다 입력 방법이 있었고 우리가 말하고자하는 것은 자리 표시 자입니다 이름입니다 여기서도 이름을 표시하려고합니다 우리가 학생 명부를 표시하고 싶은 학생, 말하기 버튼이있을 것입니다 제출하여 학생 이름을 제출하면됩니다

우리가 그것을 클릭 할 때마다 방금 입력 한 이름을 추가하려고합니다 add라고 말할 수있는 화살표는 이제 우리가하고 싶은 기능의 이름입니다 계속해서 우선 학생 명단을 만들어 학생 명단을 만듭니다 Aria와 같은 미리 만들어진 학생을 추가 하자고합시다 Rohit 그리고 지금 우리가하고 싶은 일은 바로 이것들을 고칠 수있게 해주는 oppa sauna라고합시다

우리가하고 싶은 일은 지금 우리가 학생 명단을 보여주고 싶다는 것입니다 버튼을 누를 때마다 학생 명단에 추가하고 싶습니다 클릭하면 우리는 그 기능을 가지고 있으며 추가 기능을 기본적으로 무엇이라고합니까? 우리는 요소를 푸시 (push)하여 현재 이름이 될 수 있도록하고 싶습니다 그래서 현재의 이름은 지금은 비어있을 수 있습니다 이 조지 학생 학생 명단이 당신이 밀어 넣고 싶어한다는 말인가요? 현재 이름을 점으로 찍으십시오

그러면 현재의 이름을 넣을 것입니다 우리가 그것을 표시 할 수 있도록 장소를 만들고 지금 전체 요점은 우리가 만들고 싶지 않은 하나의 항목에 그것을 표시하고 싶습니다 이 목록을 채워야 할 때마다 단락을 작성해야합니다 간단히 목록 항목을 만들 수 있고 여기에서 우리는 ng4라고 말할 수 있습니다 학생 명부에 학생 목록이 있으므로 그렇게 우리가 학생 명단에 이름을 붙 였는데 정확히 어떻게 이름을 지었고 우리가 원하는지 우리가 지금 한 일은 우리가 추진하고있는 것입니다

뭔가 정확히 우리가 정확히 무엇을 밀어 넣는 지 잘 알고 싶습니다 우리의 의견은 당신이해야 할 일은 ng-model입니다 우리는 이것을 현재의 모델 이름으로 모델링 할 것입니다 그래서 이제 우리는 이제 우리가하고 싶은 일은 이름을 보간하고 싶을뿐입니다 여기에 이름이 표시되므로 이름을 지정해야합니다

우리가 이름을 갖기 위해 그것이 이름을 대면하는 것을 보자 과거에 아리아 로힛 (rahit)이 이제는 라훌 (Rahul)과 같은 사람도 수업에 참여한다고합시다 우리는 정상 회담 학생과 라훌이 이제 학생 명단에 추가되었다고 말할 수 있습니다 그래서 이것은 기본적으로 ng4를 사용할 수있는 방법입니다 우리는 하나의 목록 항목을 가지며 기본적으로 이 배열에있는 모든 것을 돌아 다니며 순환합니다

이제 우리는 F와 G if-else와 ng의 사용법을 보았습니다 우리의 마지막 임무는 우리도 보았던 것을 잊지 말자 동적 스타일링을 사용하여 어떻게 우리가 과제에 대한 지시 사항을 입력하면됩니다 할당 좋아, 얘들 아 이것이 너의 마지막 과제 야

너에게 다시 생각 나게 해 줄거야 과제에 대해 화면을 일시 중지하고 과제를 시도하고 수행해야합니다 코드를 사용하여 코드와 솔루션을 비교할 수 있습니다 과제 다음에 오는 과제 번호 3에 대해 이 단락을 전환하려면 단락을 누르십시오 그래서 그 후에 버튼을 클릭 한 횟수를 잠궈 야합니다

여기는 지루하다고하지만 버튼이 클릭되었고 다섯 번째 클릭 후 로그에 몇 가지 특정 스타일을 지정해야합니다 예쁘게 보입니다 우리가 여기에서해야하는 일을하는 쉬운 일은 근본적으로 모든 것을 제거하는 것입니다 이제 여기에 스타일 표시 인 버튼을 만들어 보겠습니다 그런 다음 lorem ipsum이라는 문단을 추가하여 lorem ipsum이 무작위 단락 이니 계속해 보자

그래서 이것은 토글 디스플레이이다 이 순간의 토글 디스플레이는 아무 것도하지 않으므로 클릭에 기능은 기본적으로 true 또는 false를 반환합니다 우리는 이것이 toggle display라고 말할 수있는 함수에 바인드 할 수있다 true 또는 false로 설정하면 먼저 디스플레이 방법을 토글하여 디스플레이를 토글합니다 그리고 우리가 말하고 싶은 것은이 시작 상태입니다

그래서 상태를 만들어 봅시다 변수를 먼저 설정하면 상태가 true가되고 전환은 기본적으로 우리가 그것을이 접촉이 아닌 무언가로 바꾸어야한다는 것을 배웠습니다 상태가이 도트 상태가 아닌 것과 같아서 그렇게하면 디스플레이를 토글하여 이제는 디스플레이를 토글합니다 해야 할 일은이 논리를 묶어서 ng-if라고 말하면서 상태 만 표시하면됩니다 참과 동등합니다

그래서 우리가 제대로 한 것이라면 우리는 디스플레이를 토글 링하는 것은 사실이며 이제는 다른 것을해야합니다 할당의 지시에 따르면 로그에 숫자가 버튼을 클릭 한 횟수는 우리가 필요로하는 것은 기본적으로 카운트하는 카운터입니다 단추가있을 때마다 지금 버튼을 클릭 한 횟수 클릭 수를 늘리면 실제로 카운터를 늘릴 수 있습니다 증분 진술 그래서 지금 우리가하고 싶은이 도트 카운터는 우리가 원하는 것입니다 우리가 단락을 만들고 싶다고 여기에서 말하고 싶다면 이것은 ng4를 가질 것입니다

클릭을 클릭하여 오히려 카운터를 클릭하십시오 이렇게하려면 NG가 필요합니다 배열 그래서 우리는 버튼을 클릭 좋아, 이렇게 할 다른 방법이있다 말할거야 우리는 실제로 카운터가 필요 없으며, 오히려 배열 자체에 카운터를 만들 수 있습니다 이것이 클릭 될 때 우리가해야 할 것은이 점 카운터 점을 카운터 도트 길이에 1을 더하면이 도트 수는 다음과 같이 계산됩니다 길이에 1을 더하면 처음에는 길이가 0이됩니다

지금이 카운터에 추가하십시오 우리가하고 싶은 것은 우리도 순환하고 싶습니다 이 카운터 배열은 카운터에서 클릭되므로 우리가 원하는 것은 우리가 클릭 정보를 인쇄하고 싶다면 이제 우리가 가지고있는 것을 보자 실제로 우리의 배열에 카운터의 길이를 밀기위한 논리를 넣습니다 배열을 순환시키기 위해이 배열을 순환시키고 순환시킬 필요가 있습니다

단락 4 개를 말하면 카운터에서 클릭 수를 말할 것입니다 여기에서 우리가 시도하고 보간하려고하는 것은 카운터입니다 오히려 클릭 수를 알아보고 작동하는지 확인해 보도록하겠습니다 그것을 한 번 두 번 클릭하면 우리는 그것이 계속 켜져 있음을 볼 수 있습니다 우리는 일종의 카운터를 만들었습니다

이것은 모든 종류의 로그인입니다 우리가 할 일은 우리가 할 수있는 모든 일을하기 위해 카운터를 세웠다 마지막 지시를 따르십시오 그리고 그것은 우리가 주어야하는 다섯 번째 클릭 이후입니다 일부 특정 스타일을 로그에 저장하므로 스타일을 사용하여이 작업을 수행 할 수 있습니다

그래서 스타일은 우리가 우리의 글꼴의 색깔을 푸른 색으로 만듬 길이가 5 이상이므로 get 길이가 함수이므로 일부 값을 반환합니다 또는 다른 사람은 그렇게 나아가고, 그것을 만들자 그래서 길이를 얻으면 반응하고 생성하자이 점 카운터를 보자 길이가 4보다 큰 경우 우리는 당신을 원해요

문자열 문자열을 파란색으로 변환하려면 문자열을 검정색으로 바꾸고 싶습니다 그래서 지금 우리는 무언가를 돌려주는 함수를 가지고 있고 우리는 그것을 묶었습니다 ng 스타일 지시어를 사용하여 색상 스타일을 사용하는 함수이므로 가자 앞으로 이것이 우리를 위해 일하는 지 확인하십시오 그래서 디스플레이 하나와 둘 셋을 토글합시다

4 명 5 명 그리고 그게 바로 우리 목록을 5 명만 남았습니다 과제 3에 솔루션에 접근하는 방법이며 이것이 우리에게 이 각도 자습서의 끝으로 오늘 우리는 많이 배웠습니다 우리는 앵귤러 8의 차이점을 보았습니다 그 후 우리는 앵글의 설치로 시작했고 우리는 갔다 앞으로 우리는 우리 자신의 커스텀 컴포넌트를 생성하는 법을 배웠다

수동으로 CLI를 통해 이러한 구성 요소를 사용하는 방법을 알게되었습니다 우리는 데이터를 바인딩 한 후에 속성 바인딩을 수행 한 다음 이벤트 바인딩을 수행했습니다 코스는 양방향 바인딩을 포함합니다 물론 우리는 inbuilt 지시어와 정확히 지시어는 무엇이며, 이것으로 우리는 당신은 각도를 통해 실제로 응용할 필요가 있습니다 이제 우리는 미래에 우리가 여기서 만들고있는 재생 목록을 확인하십시오

Adi Rekha, 신뢰도 라우팅 의존성에 대해 더 깊이 생각할 수있는 방법 주사와 당신이 할 수있는 많은 고급 고급 재료 모호하고이 모든 것에 중요한 프로젝트가있을 것입니다 그래서 계속 지켜봐주십시오 얘들 아,하지만 지금은 내가 정말로하고 싶은 말은 모두 나와 함께 해줘서 고마워 intially n 나는 너희들이 재미있게 나를 따라 각도를 배우기를 바란다 나는 너를 만날 것이다

다음 비디오 때까지 다음 번에 잘 때까지 나는이 비디오를 듣는 것을 즐겼 으면 좋겠다 그것과 당신은 당신의 의심과 의구심을 언급 할 수 있고 우리는 가장 빠른 시일 내에 우리의 재생 목록에서 더 많은 동영상을 찾습니다 Edureka 채널을 구독하면 더 배우고 행복한 학습을 ​​할 수 있습니다

Web Development Full Course – 10 Hours | Learn Web Development from Scratch | Edureka

웹 개발은 광범위하게 언급합니다 웹 응용 프로그램과 관련된 작업 기본적으로 추가하는 웹 페이지 귀하의 평범한 웹 페이지에 평생을 바치십시오

안녕 모두 웹 개발에 관한 전체 과정 세션에 오신 것을 환영합니다 이것은 완전한 충돌 코스를 제공하고 넌 다 아는군 웹 개발에 대해 알아야합니다 그러나 우리가 시작하기 전에, 오늘 의제를 살펴 봅시다 먼저 기본 언어부터 시작하겠습니다

웹 개발에 필요한 것입니다 그것은 HTML입니다 그리고 우리는 계속 나아갈 것입니다 웹 응용 프로그램에 스타일을 추가하는 방법 CSS 덕분에 다음 JavaScript 프로그래밍 언어로 넘어갈 것입니다

도움이 될 것입니다 있잖아, 웹 페이지에 더 많은 동작을 추가하는 방법 일단 이러한 프로그래밍 언어에 정통하다면 웹 개발을 위해 당신은 jQuery 라이브러리에 대해 알고 싶다 그리고 나서 우리는 계속 나아갈 것입니다 다른 프론트 엔드 프레임 워크로 우리는 앵귤러 8 프레임 워크에 대해 배우게 될 것입니다 우리는 이제 JS에 반응 할 것입니다

우리가 프론트 엔드 파트로 끝내면, 우리는 백 엔드로 이동하여 노드를 살펴볼 것입니다 지금 Js 우리가 이러한 모든 프레임 워크를 완료하면 우리는 움직일 것이다 평균 스택 애플리케이션과 같은 애플리케이션으로 그런 다음 그 달에 지금 신청하십시오

이 모든 프로그래밍 언어에 능숙하다는 것을 및 그들의 프레임 워크 풀 스택 웹 개발자가되는 법을 알게 될 것입니다 하지만 그 전에 Edureka 's에 가입하는 것을 잊지 마세요 YouTube 채널과 연결 상태를 유지합니다 안녕하세요 여러분, 제 이름은 Aryaa입니다

이 HTML 자습서를 모두 환영합니다 그래서 오늘 우리는 HTML에 관한 모든 것을 배울 것입니다 그래서 많은 시간을 낭비하지 않고 바로 다이빙하자 에서

그래서 HTML 뒤에있는 아이디어는 겸손한 아이디어였습니다 Tim berners-lee이 첫 번째 초등부를 모으고있을 때 브라우징 및 웹용 오소링 시스템 그는 빠른 하이퍼 텍스트 언어를 만들었습니다 그것은 그의 목적을 달성 할 것입니다 그는 수십 또는 심지어 수백을 상상했다

및 스마트 클라이언트에서 하이퍼 텍스트 형식 사용 쉽게 협상 할 수있는 문서 번역 인터넷상의 모든 서버에서 HTML 스탠드 하이퍼 텍스트 마크 업 언어 웹 페이지를 만들기위한 표준 마크 업 언어입니다 및 웹 응용 프로그램 웹 페이지의 구조를 설명하는 데 사용됩니다 마크 업 (markup)이라는 프로세스를 주로 HTML로 사용함 요소를 구성하다 및 이들 요소 HTML 페이지의 구성 요소입니다 태그로 표시됩니다

이제 간단히 소개하겠습니다 HTML 구조 이제 이것을 HTML 상용구라고도합니다 먼저 HTML 상용구는 HTML 태그로 시작합니다 HTML 페이지임을 브라우저에 알립니다

그리고 이것은 이것이 시작되는 곳입니다 다음으로 헤드 태그가옵니다 대부분의 메타 정보를 담고있다 헤드 태그에는 일반적으로 링크가 포함 된 문서 스타일 시트에 당신이 사용하고있는 Fawns 웹 페이지와 자바 스크립트에서도 당신이 사용하고 있을지도 모르는 이제 head 태그에는 title 요소도 있습니다 문서의 제목을 지정하는 탭의 텍스트로 볼 수 있습니다

당신이 브라우저에서 열어 이제 다음으로 바디 태그가옵니다 주로 내용을 주장하는 페이지 뷰어에게 표시되는 여기에는 H1 태그와 같은 요소가 포함되어 있습니다 또는 단락 태그, P 태그로 알려져 있으며 질량을 구성합니다 이제 HTML 페이지를 만들 수 있습니다

첫 번째로 열어야하는 몇 가지 단계가 있습니다 어떤 종류의 텍스트 편집기 메모장 플러스 메모장 부제 텍스트 일 ​​수 있습니다 또는 심지어 Visual Studio 코드 당신은 내가 원하는 텍스트 편집기를 사용할 자유가 있습니다

당신은 몇 가지 HTML 코드를 작성해야합니다 당신이 당신의 웹 페이지에 보여주고 싶습니다 그리고 파일을 DOT HTML로 저장하면됩니다 파일을 열 수 있습니다 브라우저에서 바로보기 만하면됩니다

지금 내가 너에게 간단한 데모를 해줄 게 그것이 실제로 어떻게되었는지에 관해서 아직도 이해하지 못한다면 그래서 먼저 폴더를 만듭니다 이 폴더를 HTML 데모라고 부르 자 이제는 Sublime Text를 사용하려고합니다

그게 제가 여기서 좋아하는 텍스트 편집기이기 때문입니다 새 파일 만들기 만하면됩니다 HTML 형식이라고 말할 것입니다 그런 다음 HTML 상용구에 적합합니다 내 제목이 내 첫 번째 웹 페이지가 될 것이라고 말하려고합니다

그것이 우리 웹 페이지의 제목입니다 이제 이것에 약간의 내용을 넣자 그래서 이것은 H1이 있다고합니다 그냥 텍스트 이것을 저장하면 HTML 데모에 저장됩니다 그럼 열어 봅시다

인덱스 도트 HTML로 저장하자 한번 저장했으면보기 만하면됩니다 폴더에 저장하고 브라우저에서 열면됩니다 여러분이 볼 수 있듯이 제목이 탭에 쓰여 있습니다 그리고 이것은 우리가 만든 H1입니다

좋아요, 그래서 당신이 기본적으로 HTML 페이지를 만드는 방법입니다 그럼 이제 나아 갑시다 몇 가지 요소가 있습니다 나는 당신에게 모든 것을 매우 중요하게 이야기하고 싶습니다 먼저 doctype 요소가 있습니다

따라서 doctype 선언은 작업중인 파일이 문서 유형이라는 것을 브라우저가 웹 페이지를 올바르게 표시하도록 도와줍니다 한 번만 나타납니다 HTML 태그보다 페이지 상단에 doctype 선언은 대소 문자를 구분하지 않습니다 괜찮아 이제 HTML이 실제로 어떻게 보이는지 HTML 코딩을 더 진행하기 전에 나는 너를 모두 알고 싶다

웹 페이지는 근본적으로 세 가지 구성 요소로 구성됩니다 첫 번째는 HTML입니다 두 번째는 CSS입니다 또는 계단식 스타일 시트이고 세 번째는 자바 스크립트입니다 이제 HTML은 웹 페이지의 구조 만 제공합니다

그것은 스타일과 아무 관련이 없습니다 CSS가 얼마나 아름다운 지에 대한 책임은 전적으로 귀하의 웹 페이지가 배경색으로 사용하는 색상을 보입니다 이미지가 실제로 어떻게 정렬되어 있는지 그리고 CSS에 대해 더 많은 것을 배울 수있는 모든 종류의 것들 CSS 자습서를 언제든지 참조 할 수 있습니다 에디 레코드의 같은 페이지에

세 번째로 자바 스크립트는 귀하의 페이지를 훨씬 더 동적으로 만들기 위해서 게시물을 실제로 클릭하는 버튼을 클릭하는 경우 제출 된 모든 것은 JavaScript에 의해 완료됩니다 JavaScript에 대해 배우고 싶다면, 우리는 또한 그것을위한 튜토리얼을 가지고있다 그리고 당신은 분명히 그들을 체크 아웃 할 수 있습니다 괜찮아 그럼 이제 몇 가지 요소를 만들고 보도록하겠습니다

HTML 페이지에서 어떻게 보이는지 이제 HTML 페이지로 돌아가 보겠습니다 그래서 이것이 H1의 모습입니다 그럼 그냥 복사하겠습니다 이 아래로 지금 나는 당신에게 표제의 모든 유형을 보여 주겠다

HTML은 우리에게 실제로 H1에서 H6까지를 제공합니다 그래서 H2 H3 H4 H5와 H6 salsa 청바지 저는 6 H5에 있습니다 4 3 2 이제 저장하십시오 우리 페이지를 다시로드 해 보겠습니다

그래서 이것은 다른 유형의 표제가 어떻게 생겼는지입니다 이것은 H 1이 가장 크고 6이 가장 작습니다 좋습니다, 그래서 그것은 제목에 관한 것입니다 지금 다른 태그도 있습니다

알로에 베라를 만들어서 P 첫 번째 비누가 일반적으로 의미하는 태그 단락에 대한 단락은 기본적으로 보이는 것입니다 좋아요 보통은 임의의 텍스트가 포함되어 있습니다 또는 귀하의 웹 페이지의 단락 그리고 이것은 그들이 어떻게 생겼는지입니다

이것은 단락처럼 보입니다 괜찮아 그래서 단락 추가에 관한 것이 었습니다 어떻게 이미지를 추가합니까? 그래서 당신은 단순히 이미지 태그로 이미지를 추가 할 수 있습니까? 그리고 당신이해야 할 말은 지금 근원입니다 나는 이미 포켓몬의 아름다운 그림을 가지고있다

내가 어렸을 때 정말 사랑했던 것 그래서 그 파일을 폴더에 복사 해두겠습니다 괜찮아 이제 이미지를 폴더로 복사했습니다 소스 코드를 제공하면된다

9 개의 꼬리는 B와 G로 그려져있다 그것이 우리 이미지의 이름입니다 우리 페이지로 돌아 가자 다시로드 해 봅시다 괜찮아

이제 높이와 같은 속성을 추가 할 수도 있습니다 높이가 7 또는 500 픽셀이 될 것입니다 그리고 너비라는 속성을 넣고 말하면된다 또한 500 픽셀이 될 것입니다 예, 이미지의 높이와 너비가 변경됩니다

당신은 또한 그것을 더 작게 만들 수 있습니다 수백 픽셀과 같은 것을 말하면서 그러니 그걸 구해 주실 것을 보여 드리겠습니다 그것을 다시로드하자 그리고 지금 우리는 지금 가정하는 그들의 훨씬 작은 90s가있다

사진이 없습니다 ALT 태그를 넣을 수도 있습니다 그래서 여기에 이미지가 있어야한다고 말했을뿐입니다 그럼 저장하겠습니다 이제 alt 태그를 볼 수 없게됩니다

우리의 이미지가 효과적이기 때문입니다 내 이미지의 이름을 잘못 입력했다고 가정 해 봅시다 이제는저기서 그런 걸 보게 될 겁니다 여기에 이미지가 있어야했습니다 우리가 가질 수있는 또 다른 일을 보여주고 있습니다

HTML에서 줄 바꿈 그래서 / BR이라고 말하면됩니다 줄 바꿈이있을거야 이 단어 Alam KO와 힘든 사이에 그럼, 그걸 저장합시다

이것을 취소합시다 좋아, 이제 새끼 양 Co 그리고 힘들게하는 것은 다른 라인에 있습니다 우리는 또한 물건을 대담하게 만들 수 있습니다 이 첫 단어를 굵은 글씨로 바꾸고 싶다고 가정 해 봅시다 그래서 당신은 B

/ B로 갈 수 있습니다 나는 그것을 대담하게 만들 것입니다 네 이제 경보는 대담합니다 강력한 태그를 사용할 수있는 것을 과감하게 만들 수도 있습니다

이제 앉자 이것은 대담합니다 그리고 지금 이것은 대담한 것입니다 그런 다음 텍스트의 크기를 변경할 수 있습니다 그럼 다른 텍스트를 만들어 봅시다

그래서 그것은 그렇게 어지럽히 지 않습니다 따라서 우리에게는 큰 세금이 있고 작은 것과 같은 태그도 있습니다 차이점을 보여 드리겠습니다 이 텍스트는 크다 이것은 작은 학생입니다

이 텍스트는 작지만 큰 텍스트입니다 여기에 줄 바꿈을하십시오 저것은 또한 여기에 줄 바꿈을 넣습니다 이제 이미지를 다시 돌려 보겠습니다 네,이 텍스트는 작지만이 텍스트는 빅입니다

가로줄을 넣을 수도 있습니다 HTML 내부 나는 인사라고해야만한다 그리고 저것은 거기 수평 라인에 바로 넣을 것입니다 여기 너비와 높이를 넣을 수도 있습니다

천부적 재능을 키울 이유가 없다 그것이 없기 때문에 너비 70 %와 같을 것입니다 70 % 너에게 줄이있다 그건 70 % 나된다 다음 화면을 통해 우리는 또한 링크를 넣을 수 있습니다

당신이 사이트에 가고 싶다고 가정 할 때 우리의 HTML에 그러니 에디 레카 (Eddie Rekha)에 가고 싶다고합시다 이제는 링크라고하는 텍스트를 넣을 수 있습니다 웹 사이트 저장하기 저것은 언덕을 자극했다 그리고 지금 이것은 Tracker dot go로 우리를 데려 갈 것입니다

네 그것이 작동하는 방식입니다 이미지에 링크를 추가 할 수도 있습니다 우리가 움직일 것이라고 가정 해 봅시다 이 텍스트는 여기에서이 이미지를 복사합니다

그냥 여기에 놓으세요 이제 우리가 클릭한다면 이미지에 코크스에 기록을 추가하는 데 걸릴 것입니다 좋아, HTML 페이지에 목록을 추가 할 수도 있습니다 따라서 목록에는 두 가지 유형이 있습니다 하나는 정렬 된 목록입니다

따라서 순서가 지정된 목록은 번호가 매겨진 목록입니다 이렇게 목록 항목을 넣을 수 있습니다 그럼 목록 항목을 넣자 자, 텍스트를 입력 해 봅시다 그래서 이것은 무작위 목록입니다

그래서 목록 항목은 실제로 물건이 될 것입니다 당신이 목록에 올거야 그래서 이것들은 무엇이든 될 수 있습니다 귀하의 목록을 우리가 좋아하는 모든 개 목록 수 있습니다 좋아하는 초콜릿을 나열 할 수 있습니다

또는 그런 것 어떻게 생겼는지 보여 드리죠 우리 페이지로 돌아가 봅시다 너희들이 여기서 목록을 볼 수 있듯이, 이것은 무작위 목록이라고합니다 이것은 임의의 목록입니다

그냥 좀 더 창의적으로 만들 수 있습니다 그런 것들을 넣어 보자 그래서 우선 여기에 가장자리를 놓으십시오 이들은 내가 좋아하는 개들입니다 내가 어떤 말을 좋아한다고 가정 해 봅시다

나는 또한 corgis를 좋아한다 나는 허스키를 좋아한다 나는 또한 골든 리트리버를 사랑한다 이제 우리는 여기서 실제로 좋은 목록을 갖게 될 것입니다 그래서 이들은 지금 내가 좋아하는 개 중 일부입니다

내가 그냥 만들면 이것은 정렬되지 않은 목록이므로 우리는 정렬되지 않은 목록을 가질 수도 있습니다 그래서 이것은 정렬되지 않은리스트를 만드는 방법입니다 너는 단지 ul로 가서 목록 항목을 넣는다 그래서 저는 H2를 다시 넣으려고합니다 이것들은 Dota 2에서 제가 가장 좋아하는 영웅입니다

목록 항목을 보자 나는 그림자 악마를하는 걸 정말 좋아합니다 그럼 다른 영웅들을 넣자 보카의 폭풍 정신과 템플러 어쌔신 (Templar Assassin)이라고합시다 그것을 저장하고 보자

그래서 이들은 Dota 2에서 제가 가장 좋아하는 영웅입니다 이제 우리 H2가 일종의 들여 쓰기가되어있는 것을 보면 우리가 지금 우리 목록에 넣었 기 때문에 네가 그것을 자르고 그것을 넣어야한다면 이 지역 바깥 쪽은 내 라인이고 보자 이제는 아마 이것들은 Dota 2에서 제가 가장 좋아하는 영웅입니다 이 목록 항목에 이미지를 넣을 수도 있습니다 우리가 몇 가지 이미지를 넣을 것이라고 가정 해 봅시다

어둠의 악마 폭풍의 성령 당신은 단지 여기에 이미지를 넣을 것입니다 당신은 지금 소스를 넣을 것이고, 이미지가 없습니다 이미지의 URL을 입력 할 수도 있습니다 그럼 어떻게하는지 보여 드리겠습니다 자, 그림자 악마를 보자

그것은 이미지로 갈 것입니다 작은 것을 찾아 봅시다 300 X 300이라고 가정 해 봅시다 괜찮아 그래서 이것은 멋진 만화 그림처럼 보입니다

새 탭에서이 이미지를 엽니 다 이 링크를 복사합니다 그래서 당신은 소스가이 링크임을 알 수 있습니까? 저장하겠습니다 그것이 나타나는지 봅시다 네

그리고 이제이 일이 그림자 악마 바깥에 나타납니다 또한 스타일이나 일부 속성을 넣을 수도 있습니다 너비가 100 픽셀이 될 것처럼 높이는 백 픽셀이 될 것입니다 그럼 저장하겠습니다 이제는 그림자의 훨씬 작은 이미지입니다

악마 이제 다른 유형의 태그도 있습니다 그래서 이것을 div 태그라고 부르므로 div 태그는 나눗셈을 의미합니다 따라서 페이지를 별도의 부분으로 나누려면, 여기에 꼬리말이 포함되어 있다고 말할 수 있습니다 따라서 바닥 글 태그는 정상적으로 끝납니다

이제 div 태그를 사용할 수도 있습니다 이것은 헤더를 포함 할 수 있습니다 따라서이 태그에는 헤더가 포함됩니다 이것은 너무 머리에 넣어 그냥 그래서 머리를 넣어 보자입니다 이쪽은 바닥 글입니다 그래서 이것은 헤더 헤드가 항상 위에 오게됩니다

이 사진이야 이제 HTML을 사용하여 양식을 만들 수도 있습니다 그럼 먼저 만들어 봅시다 그래서 우리 농장은 등록 양식으로 불리게 될 것입니다 괜찮아

이제 우리의 양식과 div를 먼저 넣으십시오 우리 부서에 ID를 줘 보자 그래서 ID와 클래스는 실제로 물건을 선택하는 데 사용됩니다 또는 스타일을 지정할 때 SDM 페이지 그래서 더 많은 것을 이해하기 위해서 아이디어에 대해 우리의 CSS 튜토리얼을 확인하십시오

이 ID 양식 오히려 우리의 div에 들어가 보자 양식 만들기 또는 양식은 항상 양식 태그 안에 있습니다 이제 우리가 해냈습니다 그것은 양식의 요소를 이해하는 것입니다 먼저 입력이 필요합니다

따라서 첫 번째 입력은 텍스트 형식입니다 이름이 첫 번째 이름이 될 것이라고 가정 해 보겠습니다 자리 표시자를 도울 것입니다 나는 REO를 본 것처럼 들리며 우리는 항상 요구할 것입니다 그러니까 누군가 필요한 것을 의미한다고 말하면 그가 실제로 양식에 물건을 넣는다면

이것은 필수 입력란입니다 괜찮아 그럼 저장하겠습니다 이제는 Aria라고하는 등록 양식이 있습니다 괜찮아

그래서 레이블도 필요합니다 이제 라벨을 만들어 보겠습니다 그래서 이름을 위해, 그리고 이것은 첫 번째 이름을 말할 것입니다 그게 : 그래서 지금 우리는 이것을 할 수있는 이름이라는 레이블이 있습니다 성을 위해

그래서 C 컨트롤 V를 제어합시다 그래서 마지막으로 잃어 버릴 것입니다 그리고 이것은 또한 마지막이 될 것입니다 일시 중지를위한 자리 표시자를 넣으려고합니다 이것은 필수 필드이기도합니다

이제이 자리 표시 자에 성이 있습니다 우리는 그것에 물건을 제출할 수 있습니다 이제 형식도 중요한 속성을 취합니다 나는 그것을 언급하는 것을 잊었다 그래서 하나는 행동입니다

그리고 다른 하나는 방법입니다 지금 행동은 무언가입니다 이 양식을 제출하면 문제가 발생합니다 그래서 당신은 스크립트 도트 PHP와 같은 것을 실행할 수 있습니다 하지만 지금은 다른 세션을위한 것입니다 괜찮아

이제는 다른 유형의 입력이 있습니다 이제 보자 다른 div는 이제 성별을 입력하려고한다고 가정합니다 먼저 레이블을 만들어 보겠습니다 그리고 그것은 또한 입력 유형입니다

그래서 척추 유형의 라디오 남녀라고 불릴 것입니다 또한 선택의 가치를 우리에게주십시오 지금 저장하십시오 너는 레이블을 붙이고 싶다 그 속성에 당신은 여기에있는 이름을주고 싶습니다

그래서 성별 남성을 구하기로하자 그리고 여기서 식사를 써 보자 그래서 보자 지금 그것이 무엇인지 보자 지금

우리는 우리가 그것을 확인할 수있는 식사에 싱크를 가지고있다 이제는 선택을 취소 할 수 있습니다 여성과 다른 사람들을 위해 만들어 봅시다 그래서 보자 이 여성을 불러 봅시다

나는 단지 선택의 여지가있을거야 이제 우리는 식사를합니다 그래, 우리가 실제로 둘 다 선택할 수 있다면 또는 모두 그래서 우리가 원하는 것이 아닙니다 권리

그럼이 선택을 세 가지로합시다 이걸 다른 곳으로 만들자 이제 우리는 성 (gender) 제출을 남성에게 맡깁니다 또는 그 여성 또는 안장 지금, 우리는 모든 것을 정말로 선택할 수는 없습니다 그러면 우리는 어떻게 실제로 해결할 수 있습니까? 그래서 그들에게 모두 같은 이름을 지어 둡시다

그래서 당신은 그것을 선택 성별이라고 부를 수 있습니다 이제 너는 남자 자존심이 여자가된다 또는 당신이 다른 사람을 선택하면 실제로 같은 것을 선택할 수 없습니다 그래서 그것이 당신이 그렇게하는 방법입니다 괜찮아

이제 다른 유형을 살펴 보겠습니다 우리가 취할 수있는 입력 유형의 다른 div는 당신이 이메일 주소를 들기를 원한다고 가정합니까? 가서 펼쳐 보도록하겠습니다 celeb가 보자 가장 먼저, 이 유형을 전자 메일로 변경해야합니다 우리는 이것을 이메일의 이름으로 알려줄 것입니다

가치 대신 자리 표시자를 태워 보자 같이 될 XYZ를 넣자 8 개의 emailcom 후 이제 우리는 계속 노래를 부릅니다 그럼이 라벨을 바꾸자

전자 메일로 보내고 전자 메일로 레이블을 변경 합니다 이제 우리는 노래가 있고 우리는 우리의 이메일을 입력 할 수 있습니다 등록을 위해 암호를 입력해야합니다 이 암호를이 암호라고도합니다 암호 유형이 입력됩니다

자리 표시자를 제거해 보겠습니다 비밀번호에는 실제로 자리 표시자가 없기 때문입니다 저장하고 이제 보게 암호를 입력 할 때 실제로 아무 것도 볼 수 없습니다 그것이 암호를 입력하는 거품을 만드는 방법입니다 좋아

어떻게 지금 전자 메일과 암호를 양식으로 가져 왔습니까? 내가 보여주고 싶은 다른 것들이 있습니다 그러니 바로 다이브로 들어가 봅시다 이제 다른 div를 만들어 보겠습니다 괜찮아 그래서 우선, 우리는 선택 태그가 필요합니다 선택 태그가 필요합니다 선택하기

그럼 어떻게 작동하는지 보여 드리겠습니다 첫째로 이 이름을 지어서이 생일이라고합니다 아니면 이번 달에 연락하겠습니다 레이블도 필요합니다

이 화면 라벨은 따라서 레이블은 한 달입니다 생일이라고합니다 이제는 다양한 옵션을 선택할 수 있습니다 그래서 당신은 기본적으로 무리에 넣을 것입니다 여기서 옵션의

이제 선택 사항입니다 실제로 12 가지 옵션이 필요합니다 그게 셋이야 6 시야 9 살이에요

이것들은 12 점입니다 내 라인을 다시 써라 이제 우리 옵션에는 가치가있을 것입니다 그래서 우리의 가치는 훌륭한 것입니다 그래서 Chan Fab 3 월 4 월 5 월 6 월 7 월 8 월 9 월 10 월, 11 월과 12 월

2 월 1 일 2 월을 볼 수 있습니다 저가 3 월을 빨리 창조하게하십시오 지금 이것을 저장합시다 어떻게 생겼는지 보자 생일 축하해

그리고 거기에 모든 달이 있습니다 좋아, 지금 여기있어 보시다시피 이미 기본값이 있습니다 1 월 현재, 당신은 또한 그것은 default라고하는 다른 옵션을 둡니다 다른 옵션을 넣자

이제 옵션이 생겼으니, 이 값을 0으로하고 오래된 것을 저장하도록 선택하겠습니다 나는 재 장전했다 이것은 아무것도하지 않지만 당신은이 모든 다른 가치들을 가지고 있습니다 이제 그냥 비워 두는 대신에 이것이 월을 볼 수 있다고 또 다른 판매 달 이네

그리고 이것에 대해서도 비슷한 것을 만들 수 있습니다 그래서 4 일, 이 중 30 개를 만들어야하고 논리를 얻길 바랍니다 지금이 일을 만드는 것 이제 양식에 제출할 버튼이 필요합니다 그러니 가자

다른 유형의 입력을 보여 드리겠습니다 입력 및 유형이 선택란이라고 가정 해 보겠습니다 이름이 일치하고 레이블을 붙이자 이것을 위해 동의한다 나는 형식의 모든 조건에 동의합니다

아니, 우리는이 일을 진행할 것이다 확인란이 있습니다 당신은 그것을 체크 할 수 있습니다 그러면 우리가 필요한 것은 입력과 입력입니다 우리는 버튼이 필요 없으며 버튼이라고 말할 수 있습니다

그리고 여러분은 또한 이것을 하나의 유형으로 주어야합니다 이것은 유형 제출이 될 것입니다 그래서 일단 끝나면, 우리는이 버튼을보고 제출할 수 있습니다 그래서 가서 제출하면이 필드를 작성하십시오 필수 입력란이므로 그것은 죽은 형태입니다

이것이 바로 HTML로 양식을 만드는 방법입니다 HTML로 표를 작성할 수도 있습니다 그래서 어떻게하는지 보여 드리겠습니다 다시로드하고 공백으로 저장하십시오 네, 테이블 테이블 태그를 사용하여 테이블을 만듭니다

테이블에 테이블이 있습니다 그래서 우리는 HTML로 표를 만들 수도 있습니다 우리는 테이블 탱크가 필요해 이제 테이블에는 테이블 헤더가 먼저 제공됩니다 그래서 여기에는 모든 테이블 헤더가 포함됩니다

그래서 당신이 개를위한 테이블을 만들고 있다고 가정 해보십시오 그리고 개 품종 개에는 이름과 품종이 있다고 말할 수 있습니다 이제 테이블 헤더가 생성되었습니다 그래서 내가 어떻게 보이는지 보여 드리겠습니다 그래서 지금 우리는 개를 품고 번식을 할 수 있습니다

간단히 들어가서 테이블 행을 넣으십시오 행운을 비네 넌 TR라고 해 모든 행에서 테이블 데이터를 입력해야합니다 그래서 당신은 테이블 데이터 태그 otd를 사용합니다 그럼 우리 개가 부름을 받았다고합시다

그럼이 개집 주인 이름을 만들자, 그렇지? 나는 개가 있었고 내 개 이름은 Stoner Scott이었다 Stoner 스토너는 길거리 개였습니다 그러니 그냥 번식 거리를 유지합시다 좋아, 이제 한 테이블이 그것을 제외하고 규칙을 만들었다 우리는 여러 테이블 행이 필요할 것입니다

그럼 붙여 넣기를 여러 번 복사 해 봅시다 그러니 내 친구 샤밥이라고합시다 그는 골디 (Goldie)라고 불리는 개를 가지고 있는데 그것은 검색 결과입니다 그리고 나는 또한이 친구를 ayushman이라고 부른다 네, 듀크라는 개 허스키이고 그 다음에 ishaan이라는 사람이 있습니다

그는 몬스터라는 개를 가지고 있지만 그것은 퍼그입니다 네 이제 테이블을 성공적으로 만들었고, 여러분 남자 애들이 아리아 슈 반 아유 쉬맨이라고 알 수있어 그리고 그들의 이름을 ishaan 그들의 개 각각의 총 골키퍼 듀크입니다 괴물과 품종은 스트리트 리트리버입니다 허스키와 퍼그 이제는 CSS를 사용하여 테이블을 만드는 방법입니다

Stables에 경계선을 추가 할 수 있습니다 우리는 CSS의 약간으로 어떻게 끝났는지 보여줍니다 그래서 스타일은 텍스트라고 말합니다 / CSS 이제 여기에서 당신은이 작은 스타일링을 할 수 있습니다 우리 테이블에 1px 검정색 경계선을 둡니다

자, 나는 테이블에 국경이있을거야 우리는 또한 TD의 국경을 줄 수 있습니다 그리고 그들은 가고있다 1 개의 검은 색 단색을 흑색으로하고 지금은 모든 병에 우리 테이블은 훨씬 깔끔해 보입니다 네

이것이 바로 HTML로 테이블을 만드는 방법입니다 OK 얘들 아 이제 시간입니다 나는 실제로 너에게 보여 준다 때때로 HTML이 실제로 어떻게 연마 될 수 있는지

이제 블로그를 만들어 보겠습니다 첫 번째 블로그는 이미 CSS를 만들었습니다 그래서 저는 실제로 스타일 부분을 설명하지는 않을 것입니다 그러나 우리는 우리의 블로그를 만들 예정입니다 이제 어떻게 보이는지 보도록하겠습니다

그래서 우선, 모든 것을 삭제합시다 이제 페이지를 만들어 보겠습니다 그럼이 블로그를 불러 봅시다 이제 우리 스타일 시트를 여기에 링크 할 것입니다 스타일 시트를 핥기 위해서 당신은 무엇인가를 말해야합니다

이렇게하면 스타일 시트를 복사합니다 데스크탑에서 sgml 데모로 작업하고 있습니다 이걸 여기 복사 해보자 우리 블로그의 CSS는 여기있을 것입니다 지금

우리 블로그를 만들기 시작하겠습니다 먼저 모든 것을 div 안에 넣자 이제 이것은 post라는 클래스를 갖게 될 것입니다 내가 수업을 사용했기 때문에 이제 실제로 스타일을 적용 해 보겠습니다

그럼 다른 div를 갖자 이 클래스에는 date라는 클래스가 있습니다 그리고 우리는 데이트 할 것입니다 따라서 날짜가 2018 년 10 월 24 일이 될 것이라고 가정 해 보겠습니다 자, 이제 우리는 제목이 있다고 가정 해 봅시다

밴쿠버 내가 가장 좋아하는 도시 그럼 몇 단락을 넣자 왜냐하면 모든 기사에는 단락에 대한 단락이 필요하기 때문입니다 그냥 lorem ipsum으로 채울 것입니다 단락에는 코트라는 클래스가 있습니다 괜찮아

이제 다시로드하고 만들어지는 것을 보도록하겠습니다 괜찮아 그래서 너희들이 블로그 포스트가 지금 나타나고있는 것을 볼 수 있다면 우리는 우리 블로그 게시물에 이미지를 추가 할 수도 있습니다 먼저 링크를 추가하겠습니다 그래서 우리는 https에 링크합니다

W 에드 도트 – 지금 도트 기록해 이미지를 클릭하여 실제로 만들 수 있습니다 그래서 우리는 이미 image 1 dot jpg라는 이미지를 가지고 있습니다 그래서 거기에 있습니다 또한 ALT 태그를 여기에 넣습니다

로드되지 않습니다 그래서 alt와 밴쿠버 이미지는 지금 말한다, 다른 단락을 넣자 그래서 많은 Epsom과 그 이상 단락, 이거 때문에 블록은 마치 블록처럼 보입니다 그것을 저장하고 또한 줘 보자 그것을 깔끔하게 보이게하는 수평선

저장해 두었다가 불러들이십시오 좋습니다, 그래서 우리는이 멋진 기사를 가지고 있습니다 이 이미지가 있습니다 이 이미지를 클릭하면 Eddie Wreck 사이트로 연결됩니다 따라서 이미지를 클릭하면 레코드가 편집됩니다

다른 기사를 추가합시다 이걸로 조금 더 오래갑니다 그럼 뻣뻣한 부분을 복사 해 봅시다 먼저 날짜를 변경해 보겠습니다 왜냐하면 우리가 다음날에 게시했다고 가정 해 보겠습니다

as shins title 그래서 제 두 번째 블로그 게시물은 그것을 저장합니다 이미지를 제거합시다 이걸로 조금 다르다 네

지금 당신이 나중에이 멋진 블로그 게시물을 보게되면 그것에는이 수평선이 있습니다 여기에 몇 가지 코드가 있습니다 어떻게 HTML로 물건을 할 수 있는지 안녕 얘들 아, 내 이름은 오디오 야 이 튜토리얼의 CSS 튜토리얼을 모두 환영한다

우리는 CSS의 기초를 다룰 것입니다 애니메이션이 포함 된 고급 CSS로 괜찮아 따라서 실제로 CSS를 코딩하기 전에, 몇 가지 기본 사항을 살펴 보겠습니다 CSS는 정확히 무엇입니까? Well CSS는 캐스 캐이 딩 스타일 시트 일반적으로 제어에 사용됩니다 HTML 태그 및 요소가 화면에 표시되는 방법 그래서 이것은 기본적인 스타일을 의미합니다 귀하의 웹 페이지는 CSS에 의해 관리됩니다

이제 CSS는 실제로 문제를 해결하기 위해 만들어졌습니다 HTML 32에 도입 된 HTML 32 새로운 속성들을 얻었고, 글꼴 색상 배경 ​​색상, 일반적으로 요소의 스타일링에 사용되었습니다 웹 페이지에

이제는 매우 필요한 기능을 추가했습니다 HTML 32에 개발자로서 코드가 복잡해졌습니다 그리고 미디어 수명은 꽤 비참합니다 그래서 귀하의 웹 페이지의 구조를 유지하려면, 그것은 sgml이며 스타일 CSS는 w3c에 의해 만들어졌습니다

따라서 w3c는 월드 와이드 웹 컨소시엄을 의미합니다 그리고 CSS가 날짜까지 w3c 개발자가 유지 관리합니다 좋습니다, 이것이 CSS에 대한 일반적인 소개였습니다 자, 앞으로 나아가 자 이것이 CSS의 기본 구문입니다

기본적으로 선택자가 있습니다 또는 장소를 목표로 삼는다 당신은 당신의 스타일을 당신에게 붙이고 싶습니다 기본 속성과 값 쌍을가집니다 이제 링크 태그를 사용하여 HTML에 CSS를 포함시킬 수 있습니다

href 속성을 파일 이름으로 넣을 때 또는 인라인 CSS를 일부 수행 할 수 있습니다 하지만 실제로는 권장되지 않습니다 왜냐하면 그게 문제 야 우리가 실제로 완화하려고하는 CSS를 다른 파일로 저장합니다 또한 다른 CSS 파일을 만들지 않으려면, 일부 스타일 태그를 삽입하여 내부 CSS를 수행 할 수 있습니다

당신의 머리 꼬리표에서 그리고 다만 그것에 몇몇 정규적인 CSS를 쓰십시오 괜찮아 이제 다른 유형을 보도록하겠습니다 CSS 선택자 따라서 이들은 모두 다른 유형의 CSS입니다

선거인들과 근본적으로 선택자는 방법이다 웹 페이지에서 요소를 타겟팅하는 방법에 대해 설명합니다 따라서 스타 선택기는 모든 요소를 ​​선택합니다 당신이 적용 할 CSS를 적용합니다 그리고 나서 div라고 말하면 CSS가 적용됩니다

모든 div에 지금 div 쉼표 P는 모든 딥에 적용됩니다 단락 div space p는 모든 단락에 스타일을 적용합니다 지금가는 사람들 안에 모든 CSS 선택기를 사용하는 것은 꽤 성가신 일입니다 그래서 나는 추천한다 w3schools에서이 페이지를 살펴 보았습니다

모든 다른 유형의 선택기가있는 및 다른 유형 의사 선택기의 모든이 똥 그래서 이것은 자신의 CSS를 할 때 당신을 도울 것입니다 지금이 페이지를 항상 열어 두십시오 기본적으로 pseudo selector에 대해서 알려주겠습니다 그래서 우리는 의사 선택 자도 갖습니다

이것은 다음과 같이 정의됩니다 그래서 의사 선택자는 지나치게 방문한 것과 같은 것을 포함합니다 그리고 그런 것들은 이제 당신이 태그 위로 가져 가려고한다고 가정합니다 그래서 당신은 특정 스타일링이 있어야한다고 말할 수 있습니다 당신이 그것 위에 공중 선회 할 때

그러면 어떻게 할 수 있니? 콜론 호버라고하면됩니다 그런 다음 실제로 스타일 지정을 지정합니다 당신이 원하는 그 이제 모든 유형을 찾을 수 있습니다 여기서 의사 선택기를 사용하면 여기에 모두 나와 있습니다

그래서 select like를 방문했습니다 모든 방문한 링크가 그런 식으로 이제 Box 모델에 대해서도 알고 싶습니다 CSS에서 많이 사용됩니다 이제 상자 모델에는 네 가지 콘텐츠 채우기 테두리가 있습니다

그리고 마진은 콘텐츠가 웹 페이지의 기본 콘텐츠이기 때문에 당신은 당신에게 당신의 일반 청중을 보여주고 싶다 패딩은 몸 사이의 공간입니다 및 내용 자체 테두리는 모든 크기의 색상 일 수있는 선입니다 너비와 여백이 있습니다

이 거리는 얼마입니까? 화면 가장자리에서 바닥까지 자, 이제 Box 모델은 이와 비슷한 모습을 보입니다 그 사이에 콘텐츠가 들어 오면 패딩이옵니다 국경과 내용 사이에있는 그리고 마진이있다 화면 사이에있다

테두리 자체는 화면 가장자리입니다 그리고 바닥, 오른쪽? 이것이 바로 Box 모델의 모든 기능입니다 지금 Basics의 마지막 부분은 CSS 단위입니다 그래서 네 종류의 단위가 있습니다

첫째로 우리는 픽셀을 가지고 있습니다 따라서 픽셀은 장치의 모든 픽셀을 나타냅니다 그래서 글꼴 크기가 25 픽셀과 같은 것을 말할 수 있습니다 그러면 실제로 25 픽셀이됩니다 그런 다음 포인트도 있습니다

대부분 인쇄 매체에 사용되며 모든 포인트를 올바르게 사용하는 것을 기억해야합니다 72 포인트가 1 인치와 같아서 마지막 두 타입이되었습니다 단위의 현재 단위는 상대적 단위이며, 이들은 현재 글꼴 크기에 상대적입니다 그래서 1eM 또는 100 퍼센트는 실제로 현재 글꼴 크기와 같습니다 따라서 글꼴 크기가 두 배가되도록하려면, 당신이해야 할 말은 모두 2E M

입니다 따라서 CSS에서 상대 단위가 작동하는 방식입니다 괜찮아 CSS의 모든 기본 사항과 직원 선택 방법 그리고 지금 모든 유닛들, 앞으로 나아가서 우리 자신의 CSS 중 일부를 코딩 해 봅시다 지금까지 이번에, 나는 실제로 많은 HTML 페이지를 만들었습니다

우리는이 SEO 스타일을 만들 예정입니다 페이지에 CSS를 추가하여 이것은 CSS만으로도 좋은 연습이 될 것입니다 괜찮아 그래서 첫 번째 페이지는 1 페이지라고 부르는이 페이지가 있습니다 꽤 기본적인 페이지입니다

내가 열어 너희에게 보여 주기로하자 그래서 이것은 어떤 정렬도없이 보이는 것입니다 CSS가 첨부되어 있습니다 지금 우리는 몇 가지 CSS를 만들 예정입니다

우리는 먼저 시도하고 연습 할 것입니다 가능한 모든 방법으로 물건을 선택해야합니다 좋아요, 그래서 우선 아주 임의의 CSS를 해봅시다 좋아, 먼저이 HTML에서 모든 div를 표시하도록합시다 그렇다면 실제로 어떻게 할 것입니까? 글쎄, 당신은 div라고 말할 것입니다

셀렉터를 선택하고 실제로 CSS 파일로 저장해 봅시다 우리의 문법은 적절하게 색칠됩니다 좋아요, 그래서 그것은 div입니다 이것이 엘리먼트와 CSS를 선택하는 방법입니다 이제 우리가 다시 말하겠다고 가정 해 봅시다

배경색보다는 오히려 색 자체 게시됩니다 텍스트 또는 텍스트의 색상은 흰색입니다 이제는 div 안에있는 모든 것이 그렇게 보일 것입니다 자 이제 보시다시피이 연설을 저장하겠습니다

그게 한 페이지 CSS의 점입니다 우리 페이지와 안에있는 모든 것을 다시로드 해 봅시다 이제 div에 흰색 텍스트가 있습니다 또한 자주색 배경이 있습니다 괜찮아

이제 ID를 실제로 선택하는 방법을 살펴 보겠습니다 따라서 우리는 해시가있는 ID를 선택합니다 그래서 우리는 신분증을 가지고있다 네가 가서 그렇게 보게되면 여기 코트를 외쳐라 그게 어디 갔어? 괜찮아

여기이 문단을 보시오 코트라고 불리는 신분증으로 그래서 우리는 우리 자신의 CSS 중 일부를 넣으십시오 이제 우리가 ID를 선택했음을 봅시다 폰트 패밀리를 바꾸고 싶다고 가정 해 보겠습니다 그래서 폰트 패밀리는 도나와 당신이 어디에 있는지 말할 수 있습니다

또한 경우에 따라 대체 글꼴 패밀리를 사용할 수 있습니다 도나가하지 않는 곳에서 네 시스템에서, 같은 손을 잘 죽여 그래서 이것이 귀하의 전화 가족을 설정하는 방법입니다 색상을 검정색으로 설정합시다 무엇이 지금 변화하는지 봅시다

이것이 바로 내가 말하는 코드입니다 이제 밴이 바뀌어야합니다 다시로드하십시오 어 그래 이제 폰트가 verdana가되었습니다

우리가 정확히 원하는 것 그리고 본문도 검은 색 칼입니다 괜찮아 그렇다면 지금 수업을 어떻게 선택합니까? 그럼 네가 여기 가서보고 있으면 우리는 영화라고 불리는 수업을 가져야합니다, 그렇죠? 그래서 이것들은 모두 영화라고 불리는 클래스를 가지고 있습니다 그럼 그들을 선택합시다

우선 당신이 말하는 클래스를 선택하기 위해 점 우리가 넣을 수있는 수업 이름을 말하면 돼 이 무작위 CSS를 다시 사용하십시오 색상을 만들어 보겠습니다 흰색으로 유지하고 배경을 파란색으로 만들어 봅시다 어디 보자

그럼 영화는 어디 있니? 영화가 실제로 어디에 있는지 봅시다 오, 그래 DOTA 파편 세포와 전쟁의 신 이것들은 영화들입니다 이제 이걸 저장하자 이제는 Steel의 배경색을가집니다

파란색과 그들은 싸움의 텍스트 색상을 가지고 그게 정확히 우리가 여기서 알아내는 것은 괜찮습니다 이제 다른 유형의 선택기를 사용해 보겠습니다 그래서 스팬 아웃에서 여기에 우리는 Auto라는이 아이디어를 가지고 있습니다 그래서 무엇을할까요? 우리가 목표로하고 싶다면 우리는 무엇을 볼 것인가? 그래서 지금 우리는 확장과 해시 태그 작성자라고 말할 수 있습니다 어떤 유형의 CSS라도 넣을 수 있습니다

그럼 텍스트 변환을 가정 해 봅시다 그래서 이것은 어떤 종류의 텍스트라도 변형시키는 방법입니다 이제 대문자를 볼 수 있습니다 자동차가 여기에서 대문자로 바뀝니다 이것은 교황 알렉산더 공원의 자동차입니다

지금 조심하세요 그냥 대문자예요 span이라는 선택자로 선택했습니다 해시 태그 가을 우리는 또한 다른 종류의 선택을 할 수 있습니다

우리가 동맹국을 선택할 수 있도록 당신에게 보여 드리겠습니다 정렬되지 않은 목록 또는 정렬 된 목록 그래서 우리의 기술은 신분증의 ID입니다 그럼 선택하겠습니다 이제 우리는 기술을 가지고 주문 목록에 갈 수 있습니다 그리고 나서 Li 우리가 여기에서 말하고 싶은 것은 색깔이 자주색이 될 것입니다

우리도 똑같은 일을 할 수있다 정렬되지 않은 목록으로 나를 복사 할 수있게 해줘 그 말은 여기에 순서가없는 목록을 말하고 텍스트 색상을 흰색으로 변경합니다 H를 다시 불러들이 죠

그래서 우리는 무엇보다도 먼저 이것을 드러내지 않게했습니다 이제 말해 보겠습니다 다시 페이지를 새로 고침하고 차이점을 확인하십시오 우리는 보라색을 주었기 때문에 이제는 모두 보라색으로되어있어 배경이나 흰색을 넣을 수 있습니다

당신이 그것을 볼 수 있도록 네 이제 이들은 보라색입니다 그리고이 배경은 우리가 똑같이 할 수있는 흰색 정렬되지 않은 목록에서 주석 처리를 취소하려면 그게 나에게도 배경을 줘 보자 보라색 또는 실제로, 그것처럼 보자

그냥 파란색으로 만들자 이제 SAS & Hamill이 파란색으로 바뀌 었습니다 당신이 여기서 보는 것처럼 이것은 파란 물건입니다 이제 그것은 셀렉터였습니다

괜찮아 이제 다른 것들을 선택해 보겠습니다 그렇다면 모든 단락을 선택하려면 어떻게해야합니까? 그것들은 H3 꼬리표에 떨어져 있니? 그래서 기억한다면 우리는 3이라고 말하면됩니다 더하기 b 그리고 우리가 배경을 원한다고 가정 해 봅시다 검은 색과 약간의 텍스트 색

흰색이므로 색상이 매우 독창적이지는 않습니다 지금 내 CSS로 이것은 단지 선택에 불과하기 때문입니다 자, 어떻게 그것이 재 장전되는지 봅시다 네 이제 우리는 흰색의 색과 검은 색의 배경을가집니다

S3 이후에 단락 만 선택했는데, 내 좋아하는 비디오 게임입니다 좋아, 우리는 또한 모든 단락을 선택할 수 있습니다 방금 B와 같은 것을 말하면서 수업을 듣습니다 우리가 색상을 지정할 필요조차없는 클래스 또는 나는 클래스 이름을 의미한다 그래서 당신은 배경으로 간다

회색 배경을주고 싶다고합시다 클래스의 모든 단락을 보자 그래서이 클래스와 단락입니다 이제 ID에 대해서 똑같은 일을 할 수 있습니다 여기에 모든 단락을 보도록하겠습니다

신분증이야 ID가 유일한 단락입니다 괜찮아 이제는 물건을 골라야합니다 가자

실제로 보자 CSS를 사용하여 텍스트를 변형하는 방법 벌금 가장 먼저, 이미 작성된 페이지가 있습니다 그래서 이것은 우리가 볼 수있는 우리의 페이지가 될 것입니다

텍사스 변형 방법 보시면 모든 유형의 주문 목록이 있습니다 변환 또는 텍스트 틸팅 나는 보여주고 싶습니다 그리고 우리는 또한 여기서 단락을 가지고 있습니다 어떤 테두리 상자 여백과 패딩과 같은 기본 상자 요소 그래서 저는 여기이 PID를 통해, 맞습니까? 시작하겠습니다

가장 먼저, CSS 파일을 만들고 CSS 파일에 우리는 그것을 구할 것이다 우리는 2 페이지 CSS라고 부릅니다 네, 페이지 2로 연결되어 있습니다 시작하겠습니다 그래서 우선, lorem으로이 신분증을 얻으세요

그래서 lorem ipsum은 약간의 라틴 단락입니다 웹 개발에서 일반적으로 사용되는 텍스트가있는 공백 언제나 돌아올 수있는 곳 그 텍스트를 삭제하고 좀 더 의미있는 것으로 채 웁니다 이제 우리는이 lorem ipsum 것을 사용할 것입니다 ID가 lorem 인 단락 태그에 있습니다

그러니 계속 선택하십시오 그래서 우리는 가고있다 로렌이라는 신분증의 도움으로 그것을 선택하십시오 지금 가장 먼저, 페이지가 어떻게 보이는지 보여 드리겠습니다

CSS를 붙이지 않아도됩니다 그래서 이것이 페이지의 모양입니다 그래서 이것이 부분입니다 지금 우리가 목표로 삼을 것입니다 우선, 배경을 알려 드리겠습니다

검은 색으로 색을 만들어 보자 흰색의 텍스트를 사용하면 무엇을 보여줄 수 있습니까? 그 모습입니다 좋아 이제 경계를 좀 해봅시다 포터에게 줄 첫 번째로 페어링 우리는 재산에 대해 경계 행위를 사용한다고 말할 수 있습니다

그런 다음 세 가지 매개 변수를 제공합니다 몸통 크기의 병 유형 그리고 나서 칼럼과 당신은 무언가를합니다 이 3px 단색과 같이 단색과 빨간색을 구분합니다 많은 종류의 테두리가 있습니다 그 점선은 점선으로 조작 된 장비를 포함합니다

이것들은 내 머리 꼭대기에서 나온 것들입니다 그래서 당신은 그들을 밖으로 시도하고 다른 유형을 찾을 수 있습니다 Google로 이동하면 CSS 본문을 볼 수 있습니다 CSS 테두리 유형을 말합니다 그래서 이들은 모든 종류의 병들이다 당신은 당신이 얻은 것을 확실히 볼 수 있습니다

보여줄 수 없다 그런 식의 비디오 하나 하나 그래서, 단단한 팁을 보여 드리겠습니다 그래서 그것을 저장하고 어떤 종류인지 보도록하겠습니다 우리가 실제로 얻는 보드

이 마을에 가자 네 이제 우리는 크기가 3 픽셀 인이 깔끔한 작은 테두리가 있습니다 수지 칼럼 이제는 어떻게 가르쳐 지는지 보여 드리겠습니다

그래서 이것은 이것이 가져온 것과 같습니다 그리고 이것은 무엇입니까 – 좋아 보인다 그리고 이것이 있습니다 괜찮아 자,이 패딩에 패딩이 있음을 알려줍니다

내용물과 병 사이 그래서 Box 모델에 대해 설명했습니다 우리가 CSS의 기초를 토론 할 때 그래서 그걸 기억하길 바래 패딩에는 실제로 네 개의 매개 변수가 있습니다

오른쪽 위 왼쪽과 아래 그래서 당신은 당신의 목장을 이런 식으로 정의 할 수 있습니다 13 픽셀 13 픽셀 13 픽셀 및 20 픽셀로 이동할 수 있습니다 자, 이들은 매우 임의의 숫자입니다 그러나 내가 설명하고 싶은 것은이 첫 번째 부분은 그 꼭대기에서 패딩의 저주 픽셀 그런 다음 시계 방향으로 이동합니다 그래서 이것은 오른쪽에 있습니다

이것은 바닥에 있습니다 따라서 아래쪽에 13 픽셀, 아래쪽에 20 픽셀 왼쪽에 패딩을하면 다음과 같이 할 수 있습니다 This really easy 만약 당신이 동일한 양의 패딩을주고 싶다면 지금 즉, 13 픽셀 위쪽과 아래쪽에 패딩을 추가하면이 두 번째 부분은 그 왼쪽에 패딩의 저주 픽셀 그리고 한 글자 만 넣으면 즉, 13 픽셀의 패딩이 있습니다

이 다른 패딩을 놓아 보자 lorem ipsum 주변 이제 훨씬 더 깔끔하게 보입니다 여백을 두어 마진을 둡니다 여백도 같은 방식으로 작동합니다

그래서 당신이 5 픽셀을 말할 것이라고 가정 해보십시오 즉, 5 픽셀의 여백을 줄 것입니다 귀하의 콘텐츠 주변 10 픽셀과 20 픽셀을 넣으려면 즉, 위쪽과 아래쪽에 여백이 10 픽셀 왼쪽과 오른쪽 여백 20 픽셀 또 다른 핵심 단어가 있습니다 내가 너를 깨닫게하려고하고 그게 자동이라는 걸

그렇다면 Auto는 동등한 마진을 제공합니까? 그러나 그것을 지정하십시오 그래서 여기에서 10 픽셀의 마진을줍니다 위아래에 왼쪽에 동등한 금액의 마진이 있습니다 그래서, 어떻게 작동하는지 봅시다 네

그래서 그것이 그것을 바 꾸었습니다 아니요, 그것은 Box 모델링에 관한 모든 것입니다 그럼이 부분 만 제거하도록하겠습니다 HTML에서이 부분을 CSS에서 제거해 봅시다 너희들이 볼 수 있듯이 나는 여기에 주문한 목록을 가지고있다

우선, 페이지를 새로 고침 해 봅시다 지금 이 주문한 목록은 여기 나와있어 우리 모두 보여 줬어 스타일과 가중치 및 크기의 유형 나는 지금 보여줄 것입니다

그리고 이것은 포함 할 것입니다 많은 부대들 우리는 Em의 포인트 픽셀과 퍼센테테처럼 논의했습니다 그럼 앞으로 나아 갑시다 그래서 나는 이것을 선택하기 위해이 ID들을 사용할 것입니다 그래서 첫 번째 품종을 기억하겠습니다

그것은 보통 이탤릭 기울기이고 작은 갭입니다 먼저 먼저 만들어 보겠습니다 우리의 정상적인 ID를 선택하고 우리가 시도 할 것이 무엇인지 말하자 당신이 글꼴 스타일임을 보여줍니다 폰트 스타일은 정상입니다

그래서 정상적인 의미는 기본적으로 폰트 스타일은 무언가가 아닌 보통이 될 것입니다 우리가 이탤릭체를 가졌다 고 생각해주세요 따라서 글꼴 스타일로 이동하십시오 기울임 꼴로 우리는 또한 기울어졌습니다 그래서 우리는 기울임 글꼴 스타일로 가고 우리도 작은 대문자를 가졌습니다

그러니 다시 한번 보게 그래, 작은 모자 야 그래서 작은 모자를 쓴다 그리고 우리는 무엇을 보여 주려고합니까? 작은 모자가 글꼴 변형입니까? 글꼴 변형 작은 대문자 그냥 다시로드하고 변경 사항을 확인하십시오

괜찮아 폰트 스타일 : 정상적인 상태로 유지됩니다 기울임 꼴과 기울기는 거의 비슷합니다 정보가있는 변형 작은 대문자 이것은 첫 글자가 어떻게 보일 것인가입니다

더 큰 글꼴 크기 마지막 글꼴 크기가 작습니다 그러나 모든 것은 자본에 있고 다음은 글꼴의 무게입니다 IDS를 봅시다 보통 볼드 볼더예요 그럼 이제 그걸로 가자

그래서 우리는 처음에는 정상이되었다 그래서 글꼴 크기는 크기입니다 또는 글꼴 무게가 정상이 될 것이기 위하여 그것에게 다량 무게를주십시오 다음 부분은 대담한 볼더 라이터입니다 괜찮아

그래서 우리는 보울 더를 선택했습니다 글꼴 두께는 더 굵습니다 우리는 다시 말할 수 있습니다 볼더 이후에 힘을합시다 대담합니다

좋아, 우리는 대담 해졌고 너는 서체 가중치가 굵다 그 변화가 어떻게 일어나는 지 봅시다 그래, 그래 굵게는 굵게 표시되며 글꼴의 굵기는 굵게 표시됩니다 응급실은 약간 더 대담하다

font-weight : normal은 절대적으로 정상입니다 좀 더 다음은 글꼴 크기입니다 초대형 대형 매체 소형 여분 여분 작은 그러자

그래서 처음에는 여분의 초대형 그리고 이것은 당신이 말하는 폰트 크기입니다 그래서 여분의 여분 초대형 사이즈도 있습니다 이렇게 여분 여분 큰보기는 이것 좋아한다 이처럼 괜찮은 것만보기도합니다 그렇다면 우리는 또한 큰 글꼴 크기가 큰 것입니다

큰 사이즈의 재미있는 크기입니다 우리는 중간 크기가 작습니다 여분의 작은 여분 그래서 작은 중간 여분과 여분 여분 그래서 이것은 재미있는 크기의 매체가 될 것입니다 글꼴 크기가 될 것입니다 : 작음 그리고 이것은 글꼴 크기가 아주 작을 것입니다

그럼 그 변화가 어떻게 일어나는 지 봅시다 그래서 이것은 작은 것을 추출합니다 이것은 작고 이것은 중간입니다 이제 우리가 볼 다음 일은 포인트의 작동 방식 그래서 우리의 크기는 25 포인트가 될 것입니다

그래서 그냥하는 대신 여분의 작은 여분을 조금만 바꾸어 보자 25 점이 기억해야한다 한 점은 약 2 인치입니다 그래서 글꼴 크기 추출 방법이 그것이 25 점이라면, 글꼴 크기가 150 %라고 말할 수 있습니다

그래서 그것은 우리에게 보여줍니다 백분율이 의미하는 백분율 책 현재 글꼴 크기가 바뀌어 보입니다 50 %가 다음 것을 의미하는 방법 우리가 보여주고 싶은 것은 선 높이입니다 그러면 ID가 무엇인지 말해 보겠습니다 ID를 확인해 볼게

따라서 라인 높이 ID는 라인 정상 하이 25 포인트입니다 그러니 한 라인 정상을 선택하고 이것이 진행 중입니다 정상적인 선의 높이를 가지려면 : 그것을 저장하고 그게 선 높이 : 정상입니다 방법입니다 그것은 정상적인 선 높이입니다 지금 당신은 선 높이가 25 점이라고 말할 수 있습니다

그리고 그것이 어떻게 변할 것인가입니다 라인 높이가 약 25 GM이라고 말할 수 있습니다 또는 단지 5 엔 그렇게 말하면 EDM으로 더 많이 당신을 변화시킬 수있는 방법 1 년은 당신의 일정한 글꼴 크기입니다 사용 중이거나 라인 높이가 200 %라고 말할 수 있습니다

기본적으로 줄 높이 또는 글꼴의 두 배입니다 그래서 그것은 바르게 바뀔 것입니다 그래서 모든 것이 텍스트 스타일에 관한 것입니다 자, 앞으로 나아가서 어떻게 배치와 물건이 CSS에서 일어나는지 포지셔닝을 위해 다시했습니다

이 Space 3 dot HTML을 만들었습니다 여기에 CSS 페이지가 포함될 것입니다 페이지 3 dot CSS라고합니다 그러니 계속 만들어 보자 가장 먼저, 우리는 CSS로 이것을 페이지로 저장해야합니다

3 시작해 봅시다 가장 먼저, 우리는 CSS에서 세 가지 유형의 위치 지정을 사용합니다 절대 고정 및 상대적 그래서 우선, 나는 너에게 경례 포지셔닝을 보여줄거야 이제 내가 경례 포지셔닝을 보여주기 전에, 내가 너에게 보여 줄게

텍스트와 재료가 무엇보다 먼저 중심에 위치하는지, 이제 임의의 CSS를 시작하겠습니다 그래서 우선, 우리는 컨테이너라고 불리는이 ID를 목표로 할 것입니다 그럼 해시 태그 컨테이너로 가서 배경으로 가자 임의의 색상 따라서 Color Picker는 Color Picker로 이동합니다

이 배경을 보러 가자 좋습니다, 그것이 우리가 선택한 배경입니다 그것도 약간의 테두리를 보자 단색 2 픽셀이됩니다 검은 색으로 경계선을 설정할 수도 있습니다

그래서 국경 반지름은 당신에게 콜라 병을줍니다 그래서 국경 반지름은 약 5 픽셀이라고 말할 수 있습니다 어디 보자 이제 HTML 파일을 열어 보겠습니다 걱정되는 이 순간 3이 기본입니다

괜찮아 이제 이것이 CSS의 일부입니다 먼저 CSS의 주석 처리를 제거하겠습니다 그래서 이것이 우리 페이지가 보일 것입니다 어떤 종류의 CSS도없는 것처럼

지금 이것이 CSS의 모습입니다 우리가 당신을 알 수 있도록 지금 포함 시켰습니다 박스 반경 작동 방식 먼저 저 주석을 지우겠습니다 코멘트를 해봅시다

상자가 작동해서는 안되며 나중에 칼을 가져와야합니다 너는 여기를 보자 이 경계선이 가리키고 있다고 가정합니다 우리는 그런 일이 일어나기를 원하지 않습니다 먼저 그것을 제거하고 이것을 제외하고 주석을 제거하겠습니다

재 장전합시다 그리고 이제 우리는이 약간의 작은 만곡 된 몸을 가지고 있습니다 그것은 더 깔끔하게 보인다 괜찮아 이제 우리는 또한 센터 물건 수 있습니다

그렇게하는 깔끔한 길 그게 내가 너에게 보여 주기만하면 돼 이 부분을 centered라고 부르 자 이제 그 중심에서 내가 너에게 줄께 다른 모양으로 보이게하는 첫 번째 배경 이 배경은 89 C FF 0 그게 우리 색이야

색깔이 어떻게 생겼는지 보자 그래서 그것은 당신이 중심으로 삼을 색상입니다 지금 우리의 재치가 가고 있다고 가정 해 봅시다 이처럼 요소의 너비를 설정할 수 있습니다

그래서 당신은 그것을 50 % 저장하고 당신은 간다 여백은 자동이 될 것입니다 그러면 자동 입력은 모든면에서 동등한 여백을 입력합니다 우리 페이지를 새로 고쳐 보자 네

그리고 지금은 Center입니다 Center도 할 수 있습니다 실제로 요소를 센터링하지 않고도 텍스트 줄을 말하여 텍스트 중앙에 배치하십시오 센터 괜찮아 이제 그 배경을 제거하고 그냥 여기에 텍스트를 보관하십시오

그래서 이것이 바로 우리가 원했던 것은 텍스트를 정렬하는 방법입니다 괜찮아 이제 절대 위치 지정으로 이동합시다 절대 위치 지정이란 문서 자체에 기반하여, 이 전체 웹 브라우저를 의미합니다 그래서 우리 선생님은 기본적으로 실제로 조작하고있는 문서

그래서 당신이 그 용어에 대해 들어 본 적이 있다면 문서 객체 조작, 자, 그럼 내가 너에게 보여 줄게 어떻게 절대 위치가 작동하는지 가장 먼저, 왼쪽 상단이라고하는이 요소가 있습니다 우리는 그것을 왼쪽 상단에 놓을 것입니다 그럼 처음부터 선택합시다

그래서 당신은 왼쪽 상단에 가서 그 배경을 부여합시다 좋아, 그 배경이 될거야 보르도도 좋습니다 그러니 한 픽셀을 단색과 검정색으로 쏟아 부어 봅시다 이제 말해 보겠습니다

이 위치는 절대 위치 지정이됩니다 포지션은 절대적입니다 지금 너비를 약 200 픽셀로 유지합시다 높이도 약 200 픽셀입니다

저장하겠습니다 스터프 (Stuff)가 어떻게 변화하는지 보자 네, 그래서 그것이 우리의 요소입니다 그래서 이것은 왼쪽 상단과 하단 오른쪽을 볼 것입니다 지금 우리는 시도 할 것입니다

이 요소를 선택하여 오른쪽 하단에 배치하십시오 이 패턴의 그럼 어떻게하는지 보여 드리겠습니다 선택하려면 이미 ID를 만들었고 바닥이라고 부릅니다 권리? 나에게 흰색의 배경을 줘 보자

그리고 당신은 그 입장이 절대적이라고 말합니다 위치를 실제로 요소 내부로 변경하려고합니다 그래서 우리는 바닥에서 0 픽셀이 될 것이라고 말해야합니다 또한 오른쪽에서 0 픽셀 그래서 절대적인 위치를 차지하고 있으므로 이것을 내부에 위치시키기 위해서

그래서 우선, 배경을 흰색으로하고 검정색으로 만들어 보겠습니다 괜찮아, 지금 우리가하지 않을 때 지금 우리는이 권리가 있습니다 인덱스라고하는 항목도 있습니다 그래서 Z 지수는 기본적으로 화면에서 처음 나타나는 것입니다 그래서 여러 가지가 있다면 서로의 위에 쌓인 절대 위치 지정 가장 많은 색인을 가진 사람이 상단에 표시됩니다

그래서 당신은 그 인덱스로 설정할 수 있습니다 이런 식으로 세트 인덱스는 5 번 훈련이라고합니다 Z- 인덱스 사용 ~에 대한 것이 실제로이 것의 아래에 올 것입니다 그래서 이것이 절대적 위치 선정에 관한 것이 었습니다 자, 이제 고정 위치 설정을 해봅시다

따라서 고정 위치 지정을 위해 고정 ID라는 ID가 있습니다 나는 여기에 머물고 있다고 단락이 들어있다 그럼 처음부터 선택합시다 그냥 모든 물건을 지우겠습니다 더 이상 어수선하지 않아야합니다

내가 페이지를 새로 고침하자 저것을 다시 적재하십시오 저것은 또한 여기에서 체재하고있다 가장 먼저, 이것은 고정 된 위치를 바꿀 것입니다 권리? 고정 위치라고 부르는 거니? 괜찮아 이제 우선, 당신이해야 할 말은 위치가 고정 될 것이라는 것뿐입니다

블랙의 배경을줌으로써 더 두드러지게 만듭니다 텍스트 색상은 흰색입니다 그래서 보자 이것은 검은 색이되었고 위치는 고정되어 있습니다 나는 무엇을해야합니까? 내가 스크롤하면? 그냥 거기에 머물러 있습니다

이 일에 내가하는 일은 정말로 중요하지 않습니다 좋아요, 그래서 그것은 모두 고정 된 위치 설정에 관한 것입니다 지금 다음 일은 우리가 보게 될 것은 상대적인 위치입니다 나는 이미 두 가지 요소를 만들었습니다

그럼 이들이 div라고 가정 해 봅시다 이것은 상대적이라고 말할 수 있습니다 따라서 상대 위치 지정 내가 말한대로 위치 기반 요소의 상대 위치 그래서, 지금 당신을 그렇게 친근하게 보여 드리겠습니다 배경을 먼저 살펴 보겠습니다

이제 색상을 선택해 보겠습니다 스크린을 스크린으로 만들자 좋아, 그건 색이 될거야 한 픽셀에서 보르도에 가자 솔리드 블록을 사용하여 높이가 될 것이라고 가정 해 봅시다

ra 백 픽셀 이제 다른 요소를 선택하겠습니다 이 요소에 상대적으로 배치하십시오 괜찮아 그럼 여기이 요소는 상대적인 존재가 될 것입니다

그 자리를 지키기 위해 우리가해야 할 모든 상대의 그 위치는 상대적이며 – 나머지 CSS는 임의적입니다 왼쪽 패딩이 아니라고 가정 해 봅시다 그래서 당신은 그것의 어딘가에 위치시키고 자합니다 그리고 그 위치는 상대적 일 것입니다 따라서 원래 위치에서 20 픽셀 왼쪽에서 20 픽셀 원래 위치에서 내말은 너는 말할 수있다

위쪽에서 30 픽셀이됩니다 당신은 또한 부정적인 30의 화소 움직임을 말할 수 있었다 다른 방법으로 배경을 알려 드리겠습니다 나는 백그라운드에서 이미 주어진다 괜찮아

노랑색을 배경으로 가자 그래서 당신은 배경이 노란색과 같음을 볼 수 있습니다 국경과 1px 솔리드 블루 말 파란색 배경이 좋아 괜찮아

그래서이 상대적 레이아웃은 상대적으로 배치 될 것입니다 이 일에 잘가 다시로드하고 보겠습니다 네, 그게 상대 위치 지정이 작동하는 방법입니다 지금

이것은 지금이 순간에 깔끔하게 보이지 않을 수도 있습니다 하지만 나는 홈 포인트를 잘 돌리려고 노력하고있다 괜찮아 이제 보자 에지 리프 (Edge Rekha)라는 PNG 파일로 인해 강아지 도트 JPG가있는 경우, 그래서 내가 너 한테 보여 줄게

가장 먼저, 그냥 여기에서 모든 것을 제거하겠습니다 괜찮아 이제는 상황이 복잡해지지 않습니다 이 이미지의 이름을 이미지로 바꿀 수있게 해줍니다 그것은 이미 있습니다

따라서 Eddie 레코드 또는 PNG 및 Eddie 레코드는 PNG를 잘 기록합니다 이걸 저장합시다 이제 우리 페이지의 모습을 보도록하겠습니다 이것이 바로 그 모습입니다 이제는 이미지와 같은 물건을 왼쪽과 오른쪽으로 띄울 수 있습니다

이미지 태그를 선택하면됩니다 오른쪽에 떠있는 말을한다고 가정 해 봅시다 이것들은 지금 모든 것을 떠 다닐 것입니다 플로트 태그로 물건이나 이미지를 배치하는 방법입니다 그래서 나는 지금 모든 것들의 위치에 관한 것이 었습니다

앞으로 나아 갑시다 괜찮아 그래서이 부분에서 우리는 오버플로에 대해 배우게 될 것입니다 오버플로 때문에 우리가 할 수있는 일은 2 페이지로 돌아가 보자 우리는이 텍스트 또는이 정렬되지 않은 목록을 가지고 있습니다

이 목록은 꽤 큽니다 가장 먼저, 새 페이지를 열어 보겠습니다 열어 괜찮아 나는 이것들을 막 닫을 뿐이다

이제 이것을 페이지 2의 CSS로 저장해 봅시다 당신이 무엇보다도 먼저 그것을 부르 자고하자 CSS를 바로 저장하도록 설정하고 오버플로라고합시다 이제 내가 보여주고 싶은 것은 사람들에게 정말 멋진 것을 보여주고 싶습니다 이제 정렬 된 목록을 선택하겠습니다

이것이 바로 우리가 선택하게 될 곳입니다 둥근 너비가 100 픽셀 인 것을 가정 해 봅시다 상단에 약간의 패딩이 있습니다 10 픽셀과 10 픽셀의 패딩을 만들어 보겠습니다 Rado 주변의 모든 픽셀 백 픽셀의 여백을주고 자동으로 중앙에 바로 가져 오십시오

주변을 둘러 보던 페이지가있는 것을 보자 이 페이지 2와 함께 이제 HTML로, 그냥 overflow dot CSS로 바꾸도록하겠습니다 이제 보자 네 이것이 바로 그 모습입니다

이제 스크롤을 보면 이 목록을 통해 매우 성가시다 실제로 스크롤해야하기 때문에 이렇게 배경을 얻으면 배경도 검은 색이 될거야 내가 흑인을 사랑하기 때문에 글꼴의 색상은 어떻게 변화가되는지를 알 수 있습니다 네 이것이 바로 그 모습입니다

지금 만약 당신이하고 최대 높이가 같다고 말한다면? 500 픽셀이 아니라 겨우 200 픽셀입니다 그래, 그렇게 말하지는 않아 말을하거나 흐름이 자동이라면 스크롤바가 있습니다 아니면 당신은 Kroll이라고 할 수 있습니다

이 최대 높이를 제거합시다 이제 우리는이 작은 스크롤 바를 여기서 볼 수 있습니다 정확히 오버플로 기본적으로 항목을 보여줍니다 그리고 그들을 스크롤 할 수 있습니다 그래, 기본적으로 그렇게

그래서 말하면 너비는 단지 50 픽셀이라고 가정합니다 그것이 더 작다고 가정 해 봅시다 그래, 그게 다야 이 스크롤 막대가있는 것을 어떻게 알 수 있습니까? 너는 물건을 스크롤 이것이 오버 플로우가 작동하는 방식입니다

괜찮아 이제 살펴 보겠습니다 일부 의사 선택자 또는 일부 의사 클래스에서 우리가 선택할 수있는 스타일 먼저 우리가 페이지를 열면 그것은 그 일을 책임질 것입니다 그래서 우리는이 페이지를 만들어 냈습니다

또한 새로운 태그가 표시 될 수도 있습니다 이들은 HTML5 태그입니다 이제 태그의 헤더 태그와 기본 태그, 이것들은 단지 새로운 태그들입니다 HTML5에서 볼 수 있으며 css3로 타겟팅 할 수도 있습니다 그래서 그들을 타겟팅 꽤 쉽습니다

하지만 제가 보여주고 싶은 것은 꽤 멋진 것입니다 먼저 저장하겠습니다 새 페이지를 만들어 보겠습니다 그것을 부르 자 권리

먼저 5 페이지 CSS로 저장하십시오 이제 CSS를 좀 더 연습 할 차례입니다 우리는이 페이지에서이 작업을 수행 할 것입니다 나는 창조했다 따라서이 페이지는 솔직히 말해서 큰 페이지입니다

그것은 꽤 많이있다 Carlo는 몇 개의 이미지를 연결합니다 또한 나는 HTML5 태그를 많이 사용한다고 생각한다 새롭게 도입 된 헤더 태그와 같이 nav ID 또는 nav 태그, 메인 태그, 섹션 태그와 많은 다른 태그가 있습니다 이 태그들을 지금처럼 선택할 수 있습니다

css3라고 말하면 도움이됩니다 이것이 우리가 배우고있는 부분입니다이 부분 만 제거해 둡니다 우리가 지금 그걸 필요로하지 않을 것이기 때문에, 우리의 콘텐츠를 저장하고 보여 주도록합시다 웹 페이지에서 실제로 어떻게 보이는지 알 수 있습니다

이제 5 페이지를 열어 보겠습니다 웹 브라우저에 CSS가 붙어 있지 않은 것처럼 이제 CSS를 사용하여이 기능을 변형 해 봅시다 첫 번째로 5 페이지 CSS라는 페이지를 만들었습니다 우리는 이미이 페이지에 여기에 첨부했습니다

링크 태그와 href 속성 시작하자 그래서 우선, 실제로 일부 의사 선택기를 실제로 사용하도록하겠습니다 따라서 이미 선택자에 대해 논의했습니다 기본 사항을 살펴 보겠습니다 이제 어떻게 작동하는지 보여 드리겠습니다

그래서 호버가 모든 A Links를 목표로 삼을 것입니다 우리가 그들 위에 떠드는 동안 이제 우리가 그들을 덮칠 때 우리는 배경이 검게되기를 바란다 텍스트가 가볍게됩니다

그래서 그것을 저장합시다 재 장전합시다 이제 위에 마우스를 올려 놓으면 배경이 검은 색이됩니다 텍스트가 흰색이되면 지금도 같은 일을 할 수 있습니다 이 셀렉트와 같은 다른 셀렉터가 많이 있습니다

링크를 클릭하면 그게 그렇게 되리라는 뜻입니다 그래서 그것을 저장합시다 어디 보자 우리 페이지를 새로 고쳐 보자 우선 우리가 아무 것도 떠오르지 않을 때를 본다

하지만 일단 클릭하면, 그것은 흑백의 일종의 것이되고, 우리는 방문을 위해서도 이것을 할 수있다 실제로 링크가 변경됩니다 한번 방문했을 때 그래서 우리가 가서 새 탭에서이 열린 링크를한다면, 그것은 여기에서 운동하지 않고있다 실제로 데이터베이스가 연결되어 있다면 실제로 지금 우리가 우리 몸을 선택하기를 원한다고 가정 해보십시오

배경으로 가자 먼저 색상 선택기를 가져옵니다 아이스크림 배경을 알려 드리겠습니다 좋아, 그게 우리 몸의 배경이 될거야 지금

우리는 또한 잔해의 신원을 가진 div가 있습니다 그럼 우선 선택하겠습니다 그래서 우리는 라포 (rapo)를 말하며, 여기에 약간의 CSS 그래서 마진은 0이 될 것이라고 말할 수 있습니다 언제든지 자동으로 당신은 실제로 단위를 지정할 필요가없는 0을 보았습니다 그래서 우리는 그렇게 할 수 있습니다

우리는 배경색으로 갈 것입니다 흰색의 경우 우리는 약간의 둥근 800 픽셀을 줄 것입니다 높이를 2,000 픽셀 정도로하십시오 괜찮아 이제 저장하겠습니다

그게 뭔지 알 것 같아 보자 그래서 이것은 이것이 무엇을 알기위한 것이 었습니다 우리는 또한 더 많은 것들을 할 수 있습니다 이제 HTML을 선택하겠습니다 헤더 태그와 같은 5 가지 요소를 보여 드리겠습니다

그 CSS는 여전히 작동합니다 우리가 원하는대로 간단한 채우기를 해보겠습니다 : 0 픽셀 꼭대기에 오른쪽에있는 픽셀 우리는 바닥에 약 10 픽셀을 얻고 싶습니다 왼쪽 튜브의 픽셀 어떤 변화가 있었는지 지금 우리가 조금 변화를 봤는지 보아라 80 년대와 같은 물건도 선택할 수 있습니다 방금 당신에게 보여 줬던 것처럼, 말 nav의 ID가있는 탐색을 선택합시다

내가 옳은지 확인해 볼게 네 말이라고합니다 이제 자본이 n 인 경우, 우리는 물건을 이렇게 말할 수있다 그래서 또한 display 속성이있다

이것은 요소가 현재 어떻게 표시되는지를 보여줍니다 차단되거나 인라인 블록 될 수 있습니다 이는 인라인 요소로 변환된다는 것을 의미합니다 이제 우리는 디스플레이가 전부 요리되었다고 말할 수 있습니다 그것을 분명히하기 위해 배경을 좀주세요

그럼 배경색 블록으로가 봅시다 그리고 흰색을 만들어라 어디 보자 네 그것이 그것이 선택된 방법입니다

지금 여기에이 태그와 같은 유사 태그를 줄 수도 있습니다 ID 학생을 방문하는 것 같아요 그러니 말하자 일단 우리가 navbar를 공중 선회하고 있으면

우리는 이것을 원한다 그래서 그것을 저장합시다 마우스를 움직이면 변경 될 것입니다 그것이 작동하는 방식입니다 이제 단어 간격을 살펴 보겠습니다

단어 간격은 주로 단어를 지정하는 데 사용됩니다 그럼 여기에서 몇 가지 물건을 제거하겠습니다 우선,이 모든 권리를 제거합시다 머리글 태그를 제거하고 자리가 필요합니다 우리는이 모든 단락을 가지고 있습니다

그래서 나는 목표로 삼을거야 첫 번째 단락은 모든 단어 간격을 보여줍니다 여기 이쪽은 여기 괜찮을거야 저장하겠습니다 어서

페이지를 새로 고침합니다 이것이 그 모습입니다 모든 것을 제거합시다 우리가 이미 만들었고 단지 하나를 선택하자 그것이 그것이 여기에서 부르는 것이기를 바랍니다

그래서 그것은 파워라고 불리 웁니다 이제 우리는 단어 간격을 가질 수 있습니다 그냥 말하자 단어 사이에 10 픽셀을가 봅시다 권리

그래서이 단어들 사이의 간격 이 단락에서 지금 바뀌어야합니다 우리가 그것을 구했다고 계속 진행하고 다시로드합니다 그래 이제 당신은 볼 수 있습니다

이것에 대한 단어 간격은 여기에 있습니다 훨씬 더 다른 지금, 우리는 같은 방식으로 문자 간격을 둘 수 있습니다 그럼 단락을 선택해 봅시다 그래서 글자 간격은 글자 간격 그러면 우리는 10 픽셀과 같은 것을 말할 수 있습니다 자, 여기에는 글자와 글자의 간격이 명시되어 있습니다

이제 너는 겉 모습을 볼 수있다 이 끔찍한 일은 10 픽셀을 가지고 있습니다 또한이 단어의 간격을 단어 간격으로 표시합니다 단어 간격을 늘리는 것과 같은 모습을 봅시다 20 픽셀을 사용하면 더 추해집니다

네 단어 간격과 같이 보입니다 및 문자 간격 그래서 그것은 단지 실험 목적이었습니다 당신은 언제든지 괜찮을 때마다 그것을 사용할 수 있습니다

그래서 또 다른 재산 내가 너에게 모두 알리고 싶다 CSS에서 실제로는 속성입니다 그래서 명확한 속성은 확실합니다 그 전에는 아무것도 보이지 않습니다 따라서이 경우 꼬리말 태그, 바로 여기에 있습니다

여기에는 저작권 부분 만 표시됩니다 이것은 우리가 말하고있는 꼬리표입니다 그러니까 당신이 말하는 것을 말하고 싶습니다 그래서 당신은 분명히 말할 수 있습니다 둘 다 Cleo를 지정해주십시오

괜찮아 그럼 검정 배경색으로가 봅시다 색깔도 말해 텍스트가 더 두드러지게 보이도록 흰색이어야합니다 그래, 실제로 아무 것도 듣지 않는 것 같아

어떻게 지금 깨끗하게 사용하는지 그래서 스타일이있는 스타일 목록도 있습니다 여기서 우리가이 목록을 가지고 있는지 보도록하겠습니다 가장 먼저, 무작위로 123 임의 1, 2, 3을 말합니다 우선, 먼저 말해 보겠습니다

정렬되지 않은 목록으로 변환하여 모두 찾기 그걸 순서가없는 목록으로 바꿀거야, 그렇지? 난 그냥 정렬되지 않은 목록을 먼저 보여주고 싶다 이제 모든 URL을 선택하고 목록 스타일은 아무 것도 될 수 없습니다 자, 여기서 보시면, 우리는이 글 머리 기호를 가지고 있고 이제는 괜찮지 않습니다 따라서 주문 목록을 사용하여이를 수행 할 수도 있습니다 다시 돌아가서 제어를 시작합시다

그리고 당신 LL은 모든 것을 찾았습니다 선택하십시오 Wells의 모든 주문 목록을 작성하겠습니다 이제 보자 오, 잘 목록 형식으로 작동하지 않습니다

없음 방금 깨달으면 우리는 뭔가를 할 수 있습니다 알파 알파 알파처럼 그럼 어떻게 작동하는지 봅시다 괜찮아

그래서 알파가 낮 으면 list-style-type으로, 그것을 기억하십시오 그건 내 실수 였어 오일을 다시 선택해야한다면 이제 너 볼거야 우리는 이러한 목록 유형을 말하지만 작은 대문자를 말합니다 이제는 라틴어가 낮고 라틴어가 더 느린 라틴어와 같은 다른 것들이 있습니다

그래서 저의 모습을 보여 주도록하겠습니다 좋아, 그건별로 변하지 않아 왜냐하면 나는 라틴계 인물이라고 생각하지 않기 때문에, 그러나 우리는 또한 그리스어로 갈 수 있습니다 당신이 할 수있는 많은 것들이 있습니다 그것은 꽤 재미 있습니다

그래서 저는 그리스어 설치를 마치고 알파 베타 버전으로 돌아갑니다 ABC 대신 감마 그게 당신이 물건을 바꿀 수있는 방법입니다 목록 스타일의 위치를 ​​변경할 수도 있습니다 그럼 입장을 시작합시다 밖에서 말할 수 있습니다

그럼 그게 무슨 뜻인지 보자 여기에서 많이 바뀌지는 않습니다 그러나 그것은 내가 보여주고 싶은 속성 중 하나입니다 괜찮아 이제 요소 앞에 내용을 배치 할 수도 있습니다

그럼 어떻게하는지 보여 드리겠습니다 이제이 모든 것을 정리합시다 그러니 우리가 권력 1을 선택하고 말하기를 원한다고 가정 해 봅시다 그래서 이것은 다시 의사 선택자가 될 것입니다 그래서 당신이 말한 후에 귀하의 콘텐츠가 가고 있습니다

이 모든 광고 요율이 될 주소를 말할 수있게하려면 이 작은 물건이 나오기 전에 그러니 그 변화를 보여 드리겠습니다 네 그래서 우리가 말한 이래로이 속성들을 모두 가지고 있지만 전에 말하면 어떻게 바뀌는 지 지금은 그것들 전부입니다 권리

괜찮아 이제 가보고 보자 우리가 어떻게 끝 자식 요소를 사용할 수 있는지 그래서 우리는 실제로 UL을 다시 선택하게 될 것입니다 먼저 모든 것을 모두 삭제하겠습니다

알았습니다 그래서 또 다른 HTML 상용구를 만들어 보겠습니다 이것은 list라고 불릴 것입니다 가장 먼저, 목록 항목이 많은 순서가없는 목록이 있다고 가정 해 보겠습니다 그래서 모든 주위에 동맹국

그냥 복사해서 몇 번 붙여 넣으시겠습니까? 그래서 이제 우리는이 목록 항목들을 모두 여기 있습니다 그냥 임의의 텍스트로 채우자 괜찮아 그래서 고양이처럼 무작위로 말하자 그래서 이것을 저장합시다

여기서 나가자 이제 고양이라고 불리는 것들이 있습니다 괜찮아 그래서 우리가 대체 문단을 갖기를 원한다면, 대체 배경색을 의미합니다 그래서 우선, 동맹국을 선택하겠습니다

그들에게 배경을 제공하십시오 이 회색 색상을 말해 보겠습니다 내가 ff7 ff7 ff7을 선택했다 지금 우리는 괜찮아, 이것은 동맹국이 아닌 것 같습니다

내 링크 태그를 삭제 한 것 같습니다 그것이 CSS가 작동하지 않는 이유입니다 이제 우리는 그것을 보자 괜찮아 그래서 우선, 되돌아 가서 이것을 ff7 ff7 ff7로 변경하십시오

권리? 이렇게하면이 회색 색상이됩니다 여기에서 보았습니다 너비도 알려줍니다 360 픽셀 정도 떨어져 있으므로 가져올 수 있습니다 상단에서 백 픽셀의 여백을 주자

옆줄과 같음 지금 당장 당신이 지옥과 아이라고 말하고 싶다고 가정 해 봅시다 그리고 당신은 할 수 있습니다 n 이렇게하면 모든 짝수 아이를 선택합니다 당신은 그들이 배경색이 흰색이라고 말할 수 있습니다 그래서, 그것이 우리에게 어떻게 변화되는지 봅시다

이제, 당신은 모든 것을 보았습니다 여기에있는 것들은 배경색이 번갈아 나타납니다 포도가 어디 있니? 나는 다시 쓰고 싶다 모든 평등 기회를 선택하는 방법 이제 첫 번째 하위 항목을 선택할 수도 있습니다

첫 번째 아이를 말함으로써 우리가 마주 칠 필요가 없다는 것입니다 그리고 이제 첫 번째 만 검은 색이어서 마지막 아이도 말할 수 있습니다 그리고 마지막으로 너는 백인이 아닐거야 그게 CSS로 물건을 바꾸는 방법입니다 이제 첫 번째 줄을 바꿀 수도 있습니다

이제 HTML을 약간 변경해 보겠습니다 그럼 단락을 만들어 보겠습니다 그리고 그것에는 일부 lorem ipsum이있을 것입니다 그래서, 정말 멋진 것을 보여 드리죠 이 모든 것을 이끌어 가자

우리 단락을 선택합시다 우리는 시리얼 선택기를 호출 할 것입니다 첫 번째 줄은 텍스트가 대문자를 변환한다고 가정 해 봅시다 그럼 처음부터 다시로드 해 봅시다 내가이 말을 그냥 논평하게 하렴

단지 CSS가없는 페이지의 모습을 보여주기 위해서입니다 그래서 이것은 CSS가없는 우리 페이지입니다 나 지금 그것을 비문하고 그것을 저장하고 거기에 간다 첫 번째 줄은 대문자로 완전히 완성되었습니다 이제는 첫 번째 줄 대신 어제 밤에 말할 수도 있습니다

래쉬 라인 및 마지막 행을 대문자로 변환합니다 당신은 또한 첫 글자와 같은 것을 말할 수 있습니다 그래서 그것이 실제로 작동한다는 것을 보여주기 위해서입니다 먼저 CSS없이 이것을 다시 읽어 보도록하겠습니다 괜찮아

이제 lorem ipsum이 시작된다는 것을 알 수 있습니다 소문자 L을 사용합니다 그리고 이제 너는 보았다 첫 번째 것은 당신은 갑판 크기와 같은 물건을 말하기 위해 수도를 바꿀 수도 있습니다 또는 다른 글꼴 크기를 말하고 백 픽셀 첫 글자가 100 픽셀 큽니다

그런 것들을 어떻게 할 수 있는지 괜찮아 다른 점은 포인터를 변경할 수도 있다는 것입니다 또는 커서 그래서 보자

당신이 단락 위에 마우스를 가져갈 때 예를 들어 그리고 우리가 배경이 검은 색이되기를 원한다 우리는 또한 색상이 흰색이되기를 원합니다 커서가 포인터가되도록하십시오 그래서 보자

그래서 당신은 그것 위에 공중 선회하고 있습니다 그것은 그의 손과 같이된다 그리고 나가면 정상으로 돌아옵니다 그래서 커서를 지금도 바꿀 수 있습니다 내가 상자 그림자라고 불리는 것을 먼저 보여 주겠다

이 커서 부분을 제거해 보겠습니다 그래서 커서를 사용하지 않고 다음과 같이 보입니다 전체 태그가 제거되었습니다 그게 항상 거기에 있잖아요, 그렇죠? 괜찮아 이제 이것을 회색 색상으로 변경해 보겠습니다

내가 정말 좋아하는 것은 Black의 모든 변화입니다 그래서 이것은 지금처럼 생겼습니다 400 픽셀 정도의 비트를 제공합시다 이것이 바로 그 모습입니다 이제 센터에 올려 보겠습니다

그래서 나는 당신에게 멋진 것들을 보여줄 수 있습니다 그래서 마진은 제로와 오토라고합시다 이제 화면 상단에 센터를 놓을 것입니다 그것은 중심에있다 괜찮아

이것이 우리 일이 보이는 것입니다 지금 당신이 그것을 보드에 제공한다고 가정 해보십시오 그래서 물은 정말로 산뜻합니다 그래서 2px 단색 검정 그래서 바가 좋아 보이지만 다른 것들도 있습니다

상자처럼 그림자 그래서 이것은 우리의 상자입니다 Shadow books takes 3 개의 매개 변수는 x XY 축은 실제 XY 순서가 아닙니다 XY Z 축으로 이동 한 다음 색상을 취합니다 그럼 어떻게되는지 보여 드리죠

그래서 우리는 0 X zero Y라고하고 3 픽셀을 가정 해 봅시다 Z 축에서 오히려 5 픽셀을 더 두드러지게 만듭니다 그런 다음 rgba를 사용합니다 0이면 정말 보이지 않게하고 싶습니다 그래서 0

5 그래서 그것은 그것에게 반절성을줍니다 이제 당신은 이것이 정말 깔끔한 작은 그림자임을 알 수 있습니다 우리의 모든 것을 가로 질러 그 그림자는 깔끔한 작은 트릭입니다 왜냐하면 당신은 국경이나 그와 비슷한 것을 사용하고 싶지 않기 때문입니다

지금 국경 이외의 윤곽선은 검은 색으로 표시됩니다 윤곽선이 완전히 무효화됩니다 우리의 상자 그림자와 당신은 또한 외곽선이 없음이라고 말할 수 있습니다 이제 그걸 제거합시다 상자 그림자가 정말 깔끔하게 보이기 때문입니다

네 괜찮아 이제 텍스트 장식에 대해 이야기합시다 그래서 우리는 이미 어떤 텍스트가 올라오고 있기 때문에, 그것을 장식하자 지금

몇 가지 종류의 텍스트 장식이 있습니다 나는 보여주고 싶다 그래서 텍스트 장식은 첫 번째 말은 라인입니다 모든 내용을 통해 선을 긋습니다 이제 모든 것이 취소 선입니다

그것은 또한 라인이나 밑줄과 같은 것을 말합니다 그러면 밑줄이 그어진 텍스트가 텍스트에 밑줄을 긋는 것을 보도록하겠습니다 예, 끝났어 당신이 지금 우리의 텍스트를 잘 추측했을지 모르지만 모든 것은 그것의 정상에 선을 가지고있다 이제 텍스트의 가시성을 설정할 수도 있습니다

또는 정직한 다른 어떤 꼬리표 가시성 그래서 다른 모든 가시성을 확인합시다 저기있다 그렇다면 항상 Google에 접속하여 가시성과 CSS 그리고 visibility 속성을 보자 그리고 그것이 어떻게되는지

그래서 당신은 이해해야합니다 CSS에서 모든 것을 아는 것은 불가능합니다 따라서 항상 이동 또는 백업해야합니다 그래서 내 백업은 일반적으로 W3 학교이고 그들은 CSS와 그 속성에 관한 모든 것 이것들은 당신이 가고 싶어하는 모든 속성들입니다

그리고 나는 대부분 가장 중요한 것들을 겪고있다 이 자습서에서 일상적인 투영 주제에 사용할 수 있습니다 하지만 때로는 희귀 한 것들이 필요할 수도 있습니다 카운터처럼 빈 셀을 재설정합니다 Flex Flex Paces 그리고이 모든 것들은 항상 w3schools로 돌아갈 수 있습니다

그 (것)들을 통해서 가십시오 이제 가시성이 표시된다고 말할 수 있습니다 또는 그와 비슷한 것으로 보이게해야합니다 그래 맞아 그래서 그것은 CSS의 기타 유형에 관한 것이 었습니다

우리가 처리하고 있었던 이제 몇 가지 그라디언트 및 CSS를 사용하여 아름다운 그라디언트를 만드는 방법 괜찮아 이제 이안을 만들려고하기 전에 너에게 보여 줄게 일부 공백 또는 일부 텍스트 변환, 맞습니까? 그래서 나는 이미이 모든 텍스트 변형을 보여 줬습니다 대문자를 통해 대문자로 소문자로 표시됩니다

온라인으로 대문자로 표시 우리는 단지 그것을 자본화 할 것이다 그래서 나는 너에게 그걸 보여줄 것이라고 생각하지 않는다 이제이 두 페이지를 닫으십시오 새로운 CSS 파일을 만들어 보겠습니다 그리고 무엇보다도 먼저 이것을 CSS로 설정해 보겠습니다

그것을 해보자 그것은 6 도트 CSS를 지불하게 될거야 아니, 내가 눈물을 것입니다 만약 당신이 지금 공백이 많다면 CSS를 사용하여 공백을 처리하는 방법을 살펴 보겠습니다 그래서 화이트 스페이스라는 ID라는 것이 있습니다 그게 바로 내가 생각하기에 화이트 스페이스 프리 네

그게 선택이고 당신은 말할 수 있어요 공백은 pre가 그것의 변화하는 것들을 보자 그래서 우선, 너희들을 위해 여섯 개를로드하자 권리 CSS를 제거하고 저장하십시오

다시로드 해 봅시다 그리고 우리가 실제로 목표로 삼고있는 것은이 지점입니다 공간에 의해 보존됩니다 권리? 이렇게 넓은 공간은 지금 보존하고 논평한다 그것을 저장하고 다시로드하자 HTML의 내용은 그대로 유지됩니다

아니요, 공백은 다른 방법으로도 처리 될 수 있습니다 그래서 내가 보여주고 싶은 두 가지가 있습니다 그럼 결코 절대로 감싸지 않는 감싸기라는 것을 선택합시다 맞아, 우리가 말한다 공백이 랩이되지 않을 것입니다

자, 어떻게 보이는지 봅시다 그래서 우선, 이것은 우리가 실제로이 lorem ipsum 부분을 목표로 삼고있는 것입니다 여기가 좀 이상 하네 그게 지금 어떻게 변하는 지 알 겠어 그리고 지금 당신은 그것이 완전히 여기서 사라지는 것을 봅니다

포장하지 않기 때문에 포장하지 않습니다 그래서 당신은 또한 미리 포장을했습니다 그럼 어떻게 작동하는지 보여 드리겠습니다 그래서 나는이 부분을 여기에서 목표로 삼을 것이다 이 이상한 종류의 싸움 간격

그래서 보자 사전 랩으로 보호 랩으로 랩을 보존하십시오 좋아, 그게 재산이야 그래서 보자 예전에 렘프가 랩을 돌리면서 보존되었습니다

괜찮아 이제 방향을 설정할 수도 있습니다 그럼 어떻게 끝났는 지 보여 드리겠습니다 그래서 우리는이 두 가지를 선택하게 될 것입니다 오른쪽과 오른쪽 왼쪽

해시가 왼쪽이므로 또한 C를 제어하고 이것을 오른쪽으로 만들자 좋아, 모두 제거합시다 지금 당장은 모든 것을 옮기자 왼쪽에서 제거하기 전에 이걸 제거합시다

보자 괜찮아 그래서 이것은 지금 당장 그리고 모두처럼 보이는 것입니다 방향은 L에서 R입니다 그래서 그 뜻은 남았습니다

지금 여기까지는 방향이 RTL이고 볼 수 있음을 알 수 있습니다 그게 어떻게 변화하는지 그래서 나는 오른쪽에서 왼쪽을 선호하고 왼쪽에서 오른쪽으로 선호합니다 그래서 그것이 잘 작동하는 방법입니다 그래서 그것은 모두 흰색 간격과 방향에 관한 것이 었습니다

이제 그라디언트와 애니메이션으로 넘어 갑시다 이것은 마지막 부분이 될 것입니다 제 의견에는 흥미로운 부분이 있습니다 그래디언트는 대부분의 웹 사이트에서 볼 수있는 아름다운 배경 그라데이션을 생성합니다 당신은 항상 크레아틴 생성기라고하는이 것을 사용할 수 있습니다

그래서이 그라디언트 생성기 여기에 정말 멋진 생성기가 있습니다 방향을 선택하고 통화를 선택해야합니다 그래서 이미 여기에서 그라디언트를 선택했습니다 이 그라데이션을 만들 것입니다 자, 이제 반복 7을 보자

body 태그를 선택합시다 이걸 끝내자 이걸 닫자 또는 이것을 저장하고 새 페이지를 작성하십시오 무엇보다 먼저 CSS가 될 것입니다

그래서 우리는 그것을 구하고 페이지 7을 지금 말하고 있습니다 우리는 우리 몸을 선택한다 그냥 어떻게하면 이런 일이 일어 났는지 설명 할 수 있습니다 선형 그라디언트가 있습니다 방사형 그래디언트라고하는 또 다른 것이 있습니다

그래서 나는 이제 막 당신에게 스테이크를 보여줄 것입니다 몇 가지 매개 변수가 있습니다 첫 번째는 오른쪽 방향이고 이것은 방향입니다 색상이 어떻게 바뀔지 그러면 어떻게 작동하는지 보겠습니다

가장 먼저, 나에게 이것을 말하게해라 나는 당신을 위해 7 페이지를 열 것을 의미한다 보시면 빈 페이지가 될 것입니다 좋아요, 이것은 그라디언트입니다 죄송 해요

저건 구해줘 권리? 이것이 그라데이션없이 보이는 것입니다 너는 이미 그녀의 외모를 보았다 인사와 함께하지만 너를 다시 쏠 수있게 해줘 이것은 그라데이션으로 보이는 곳입니다

이제 다른 것들로 배경을 설정할 수 있습니다 당신은 URL에 가서 당신은 URL에 붙여 넣을 수있는 이미지를 좋아해요 이제 아름다운 이미지를 찾아 보겠습니다 나는 Dragon Ball Z를 정말 좋아한다 그래서 Goku Super Saiyan 3, 그래서 그것은 배경으로 저장하는 좋은 이미지 여야합니다

그러면 정말 멋진 이미지처럼 보입니다 그래서 당신은 여기에 간다 이 이미지를 저장하면 Goku가 될 것입니다 데스크톱 및 CSS 자습서에 저장 될 것입니다 우리는 Goku dot jpg, 맞아, Goku dot jpg oright라고 말할 수 있습니다

이제 저장해두면 페이지로 돌아갑니다 고쿠의 사진이 있어야합니다 오케이 그래서 나는 일이 잘못되었다고 생각합니다 가자

분석해라 그래서 우리의 CSS 튜토리얼을 연다 좋습니다, 그래서 jpeg가 아니라 JPG 파일입니다 그럼에도 불구하고 우리의 실수는 그저 작은 실수였습니다 그리고 지금 우리는 Goku의이 그림을 가지고 있습니다

이제 배경 반복을 설정할 수도 있습니다 배경 반복을 끝내자 반복하지 않는다고 말할 수 있어요 더 이상 배경을 반복하지 않을 것입니다 또는 배경 반복 ' 배경 반복이 모두 체크 아웃되도록 할 것입니다

실제로 사용할 수있는 배경과 피트 그래서 만약 당신이 백그라운드 리피트 (background repeat)를하고 속성을 보게된다면, 너는 너 자신을 시험해 볼 수있다 따라서 Y 축에 따라 반복 할 수 있습니다 x 축에 따라 반복 할 수 있습니다 그럼 어떻게 작동하는지 봅시다

그래서 X, 그래서 우리는 그것이 x 축에서 반복되어야한다고 생각한다면 그랬거나 반복 할 수있는 것처럼 그것 y 축에 및 복용 여기에 대해 표시됩니다, 그러나 보자 네 그것은 y 축에서 반복하지 않습니다 그래서 이것이 배경 반복이 작동하는 방식입니다

그래서 우리는 그것을 또한 다루었습니다 지금 우리는 또한 그라디언트를 지금 다루었습니다 우리는 당신이 기억한다면 방사형 그래디언트를합니다 그라데이션 부분으로 돌아가겠습니다

방사형 그래디언트가있는 경우, 당신이해야 할 말은 모두 여기 방사형 그라디언트 라서요 그리고 그래디언트 읽기는 실제로 방향을 필요로하지 않습니다 그것이 반경이 될 것이기 때문에 Paige를 저장하십시오 다시로드 해 봅시다 괜찮아

이제 우리는 이미 합의했습니다 자,이 모든 라인들이 들어가는 것을 보았지만 그냥 축소하면 볼 수 있습니다 센터에서 시작하여 퍼져 나간다 옆면이 흰색이고 옆면이 흰색 인 곳입니다 방사형 그래디언트가 작동합니다

괜찮아 이제 그라디언트를 다뤘습니다 입장료에합시다 그래서 나는 애니메이션이 가장 흥미로운 일이라고 생각한다 CSS로 할 수 있습니다

그래서 우리는 div를 선택했습니다 그래서 우선 div를 테두리로 만들어 보겠습니다 흠 그래서이 경계선은 픽셀 솔리드와 블랙이 될 것입니까? 배경 시작하자 지금 프레드가 될 것이라고 말하자

이것은 애니메이션과 CSS를하는 방법입니다 좋아, 애니메이션이 실제로 나오기 전에, 내가 너를 보여 줄게 이걸 어떻게 움직일 수 있니? 좋아, 너에게 보여주고 싶은 것들이있어 그러니이게 내가 어떻게 보이는지 알려주도록 해주세요 그럼 우선 조금하겠습니다

400 픽셀 또는 다른 200 픽셀이 될 것입니다 높이도 200 픽셀이됩니다 자, 보자 좋아,이 부서는 여기있다 조금 더 큰 500을 만들고 화재를 저장하자

그래,이게 훨씬 더 두드러진거야 10 픽셀 배경으로 가보 죠 나는 10 픽셀 경계를 의미한다 이제 우리는 정말로 저명한 광장이 있음을 알 수 있습니다 자, 정말 재미있는 것들을 시도해 봅시다

div라고 말하면서 마우스를 올리면 당신은이 규모를 확장하고 싶다고 말하고 싶습니다 당신은 규모를 원해 좋아요, 그래서 그것은 당신이 처음으로 어떻게 비례하지 않습니다 당신은 변환 말한다 그리고 그것을 어떻게 확장하고 싶습니까? 너는 그것을 두 번 확장하고 싶어? 그래서 우리가 그것 위로 마우스를 가져갈 때, 그것은 두 배로 확장해야합니다

재 장전합시다 그리고 당신이 그것을 두 번 스케일링하는 것을 보았을 때, 우리는 다른 것들도 변형시킬 수 있습니다 우리가 회전 할 수 있도록 이렇게 그래서 우리는 45도 회전 할 수 있습니다 내가 45도 회전 할 때 보자 또한 기울일 수 있습니다

그래서 비뚤어 짐은 그것이 어떻게 작동하는지입니다 X 축 방향으로 20도에서 스키를 타 보자 y 축에 10도를 저장하면됩니다 대기열에 들어가는 방법은 비뚤어진 작업입니다 물건을 번역 할 수도 있습니다

그럼 내가 너에게 보여 줄게 어떻게 번역 작업이 번역되고 말할까요? 20 픽셀과 20 픽셀을 번역하려고합니다 자, 그 위에 마우스를 가져 가자 그리고 그것은 약간 번역됩니다 약 120 픽셀을 사용하면 더 명확하게 120과 120을 만들 수 있습니다

그걸 구합시다 이걸 다시로드합시다 그리고 당신은 지금 그것이 너무 많이 번역되고 있음을 보았습니다 권리? 이것이 번역의 작동 방식입니다 괜찮아

이제 회전 각도를 조정하고 기울여야합니다 전환을 설정할 수도 있습니다 우리는 전환이므로 많은 것을 설정할 수 있습니다 이제 전환 과정이 끝났으니, 애니메이션을 보러 가자 그래서 애니메이션의 경우, 실제로이 부서를 여기에서 타겟팅하려고합니다

실제로이 div의 스타일을 지정해 보겠습니다 나는 그것에게 100 픽셀의 폭을 주었다 및 백 픽셀의 높이 빨간색의 배경 그리고 세 픽셀의 경계가 단색과 검정색이 맞다고합시다 어떻게 생겼는지 보자 그것이 괜찮은 것처럼 보입니다

이제 조금 확대 해 봅시다 실제로 필요한 것은 키 프레임을 설정하는 것뿐입니다 그래서 우리는 키 프레임을 말함으로써 그렇게합니다 이제 키 프레임의 이름을 지정했습니다 애니메이션이라고 부르 자

우리는 설정해야한다 실제로 그것은 다른 시점에서 어떻게 보일까요? 그래서 우리는 0 % 배경색을 말해 보겠습니다 또는 Fred와 그것은 영혼을 움직이게 할 것이고 우리는 광장에서 그것을 움직이기를 원할 것입니다 그러니 그냥 패딩이되지 않을 것이라고 가정 해 봅시다 왼쪽과 위에서 0 픽셀

0이 될 것입니다 저장합시다 그걸 복사 했어 한 번에 여러 번 반복 해 나가자 이제 우리는 이것이 25 세가 될 것이라고 말하고 싶습니다

그것은 50이 될 것입니다 그것은 75가 될 것이고 이것은 100이 될 것입니다 그걸 구합시다 그들의 색깔을 바꾸자 그래서 이것은 처음에는 노란색이 될 것이고 녹색으로 바뀔 것입니다

꽤 예쁜 몇 가지 기본 색상이 파란색과 결국, 우리는 그것을 Red로 바꿀 것입니다 그래서 우리를 원래 위치로 되돌립니다 그것도 처음으로 움직입니다 300 픽셀 씩 움직여서 300 픽셀 두 방향으로 움직여 봅시다 이제,이 방법으로는 300 픽셀 밖에 없습니다

끝이 다시 온다 이제이 키 프레임 애니메이션을 사용하기위한 원래 위치로 이동합니다 우리는이 애니메이션 이름을 부여해야합니다 그 애니메이션을 사용하려고합니다 키 프레임 스팀 애니메이션

이제 애니메이션 지연을 말할 수 있습니다 2 초가 될 것입니다 또한 iterating 될 횟수를 볼 수 있습니다 그래서 당신은 내가 백이라고 말할 수 있습니다 그걸 구합시다

좋아, 그럼 우리 애니메이션이 작동하지 않아 우리가 포지셔닝을 말하지 않았기 때문입니다 이제는 저장하겠습니다 우리의 입장이 친척이 될 것이라고 말하자 그걸 구합시다

애니메이션을 주석 처리하지 않겠습니다 자, 보자 우리의 의도대로 애니메이션이 작동합니다 2 초 후에 우리 애니메이션이 작동하기 시작합니다 그리고 이것은 계속해서 계속 될 것입니다

실제로 애니메이션을 반복하려면 당신이 할 수있는 방법이 있습니다 그것은 애니메이션 반복 횟수와 관련이 있습니다 내가 100 번 거래했을 때를 보자 재 장전합시다 2 초를 기다려 봅시다

그리고 우리의 애니메이션은 계속해서 계속 발생할 것입니다 그래서 CSS 녀석들과 함께 움직이는 방법입니다 이 튜토리얼의 끝으로 넘어갑니다 안녕 모두 이것은 오늘의 세션에서 마두 라이 차에서 온 호수입니다

우리는 논의 할 것입니다 가장 인기있는 프로그래밍 언어에 대해, 자바 스크립트입니다 더 이상 Ado가 없으므로 시작하겠습니다 지금 내가 오늘 의제를 밟아 나갈 수있게 해줘

우리는 자바 스크립트로 시작하려고합니다 다양한 자바 스크립트 프레임 워크와 크리에이티브 웹 사이트를 구축하기 위해 HTML 및 CSS와 함께 사용되는 방법 다음 것 우리는 이점을 살펴 봅니다 자바 스크립트와 왜 당신이 그것을 배워야 만하는지

마지막으로 몇 가지 기본 개념을 살펴 보겠습니다 같은 변수 데이터 형식 배열로 if-else 문 및 그래서 기본 자바 스크립트 코드 스 니펫도 실행 중입니다 Visual Studio 코드에서 JavaScript를 실행하는 데 사용되는 편집기입니다 좋아, 첫 번째 주제부터 시작하겠습니다 이제 Javascript는 무엇입니까? 머리에 처음 튀어 나오는 것

아마도 자바 일 것입니다 그래서 너희들, 내가 너에게 말해 줄께 자바 스크립트는 자바와 전혀 관련이 없다 그렇다면 JavaScript라는 이름이 된 이유는 무엇입니까? 글쎄, 그건 일종의 JavaScript가 처음 출시되었을 때의 마케팅 전략 그것은 모카라고 불 렸습니다

나중에 라이브 스크립트로 변경된 다음 자바 스크립트로 변경되었습니다 넷스케이프와 아들이 라이센스를했을 때 아멘, 이제 그 세부 사항에 들어 가지 않겠습니다 지금 Javascript 란 무엇입니까? 자바 스크립트는 웹 언어입니다

그래서 기본적으로 모든 브라우저 PC 휴대 전화는 자바 스크립트를 인식합니다 그것은 보편적 인 언어와 같습니다 Javascript가 사용되는 이유는 무엇입니까? 이는 웹 페이지를 더 대화식으로 만드는 데 사용되기 때문입니다 대다수 웹 사이트에서 자바 스크립트를 사용한다고 알려 드리겠습니다 모든 주요 웹 브라우저에는 그것을 실행하는 자바 스크립트 엔진

또 다른 특징은 해석 된 언어라는 점입니다 이는 컴파일 할 필요가 없다는 것을 의미합니다 C와 같은 언어 Java를 사용하면이 작업이 훨씬 쉬워집니다 우리가 코드를 실행할 수 있고 실행할 필요가 없기 때문에 컴파일러를 통해 JavaScript의 또 다른 중요한 기능은 다음과 같습니다

그것은 주로 클라이언트 측 스크립팅 언어입니다 JavaScript Framework 덕분에 이제 서버 측에서도 JavaScript를 실행할 수 있습니다 JavaScript에 대해 몇 가지 더 알려 드리겠습니다 그렇다면 자바 스크립트를 실행하는 브라우저는 어디에서 실행됩니까? Google 크롬을 열면됩니다

또는 Internet Explorer를 시작하고 JavaScript를 실행하십시오 괜찮아 그렇다면이 브라우저는 어떻게 JavaScript를 실행합니까? 따라서 이러한 브라우저에는 자바 스크립트 엔진이 있습니다 그들에게 끼어 들었다 이제이 엔진은 자바 스크립트를 변환합니다

기계어로 변환 한 다음 코드를 실행하십시오 알았어 우리 모두는 알고있다 수백 가지 프로그래밍 언어가 언어는 매일 매일 만들어지고 있습니다 매우 적은 수의 강력한 프로그래밍 언어입니다 시장에서 큰 변화를 가져오고 당신에게 말해 줄 게요

그 JavaScript는 확실히 그들 중 하나입니다 JavaScript 항상 인기있는 프로그래밍 언어 목록에 포함되어 있습니다 개발자들은이 언어에 푹 빠져 있습니다 그들은 웹상에서 그것을 사용하는 곳곳에서 실제적으로 사용합니다 모바일 서버 애플리케이션

그리고 심지어 지금은 iot에서, 아마도 이것이 가장 인기있는 언어 일 것입니다 스택 오버플로에 따라 세계에서 6 년 연속 자바 스크립트 가장 널리 사용되고 자주 사용되는 프로그램으로 남아 있습니다 지금 명나라 언어, Java 스크립트의 몇 가지 일반적인 응용 프로그램을 살펴 보겠습니다 JavaScript는 JavaScript가 무엇을 할 수 있는지 주로 알려져 있습니다 아름다운 웹 페이지를 만들기위한 웹 애플리케이션의 예로는 Google지도가 있습니다

따라서 특정 지역이나 특정 지역을 탐험하고 싶다면 Google지도에서 마우스로 클릭하여 끌기 만하면됩니다 어떤 종류의 언어가 할 수 있는지 당신이 그것을 짐작했다 자바 스크립트입니다 다음 자바 스크립트도 사용됩니다 똑똑한 시계에 이것의 예가 있습니다

인기있는 스마트 시계 제조 업체 조약돌 자갈은 조약돌 점 J를 만들었습니다 작은 자바 스크립트 프레임 워크입니다 개발자는 응용 프로그램을 만들 수 있습니다 자바 스크립트에서 조약돌 라인을위한 그래서 많은 개발자들이 실제로 구축했습니다

Smartwatch 애플리케이션 기능 JavaScript를 사용하여 다음 작업을하는 경우 우리는 웹 사이트를 가지고 있습니다 이제 인기있는 웹 사이트의 대부분이 구글 페이스 북 넷플릭스처럼 아마존은 자바 스크립트를 사용한다 그 웹 사이트들 나는 그것이 충분한 증거라고 생각한다 왜 당신이 자바 스크립트를 배워야하는지

지금 다른 것들 사이에서 모바일 애플리케이션 디지털 아트 웹 서버 및 서버 응용 프로그램 자바 스크립트는 게임을 만드는데도 사용됩니다 우리는 모두 알고 있습니다 브라우저가 전통적인 게임 플랫폼이 아니었다는 점입니다 그러나 최근에는 4 개의 게임이 강력한 호스트가되었습니다

많은 개발자들이 소규모 게임을 만들고 있습니다 및 응용 프로그램 사용 JavaScript와 나는 여러분 모두가 그것을 할 수있을 것이라고 확신합니다 아주 간단합니다 이제 인기있는 JavaScript 프레임 워크에 대해 이야기 해 보겠습니다 개발자에게 가장 선호되는 플랫폼입니다

그리고 이틀 만에 비즈니스 Angularjs는 Google의 웹 개발 프레임 워크입니다 그것은 폭발했다 최근 몇 년 동안 인기를 얻은 angularjs는 현대 개발 신속한 애플리케이션 개발을위한 설계 기능을 제공합니다 내가 많은 개발자들에게 이 틀에 맹세코 빠른 발전 속도를 보였으므로 또 다른 정상에 서게 될 것입니다

그룹 프레임 워크는 reactjs입니다 그것은 페이스 북의 사용자 인터페이스 뒤에 서있다 효율성을 보여주는 Instagram 에도 불구하고 이러한 높은 트래픽 응용 프로그램을 유지합니다 반응이 더 높은 학습 곡선을 가지고 있다는 사실

응용 프로그램 개발을 간단하게 만듭니다 이해하기 쉽고 또한 매우 훌륭하게 수행합니다 검색 엔진 최적화에 이제 쯤이면, 여러분 모두 알고 있습니다 JavaScript는 보편적 인 스크립팅 언어로 사용됩니다

주로 브라우저에서 시간을 절약하기 위해 백엔드에서 클라이언트 측에서 사용 전문 지식 구축은 하나입니다 유성 뒤에 주요 아이디어의 마침내 프런트 엔드 개발자는 백엔드에서 편안하게 유성과 함께 자바 파이썬 PHP와 이것 저것 사이의 접촉 그래서 기본적으로 사용 유연성을 제공합니다 어디에서나 하나의 언어

나는 누군가가 언제든지 jQuery를 들었다고 확신한다 그들의 웹 사이트를 확장하고 싶어한다 또는 응용 프로그램 및 더 매력적으로 및 사용 만들기 jQuery의 이제이 라이브러리는 전체 웹을 변환합니다 재미있는 경험으로 jQuery에 대한 재미있는 사실을 소개합니다 세계 최고의 웹 사이트 중 70 % 이상이 무언가를 가지고 있다고 jQuery 회사와 관련있다

WordPress Google과 IBM은 jQuery에 의존합니다 하나의 독특한 웹 브라우징 환경을 제공합니다 이제 JavaScript에 대해 들어 본 사람은 누구나 알고 있습니다 그것은 HTML과 CSS와 관련이 있다는 것을 알았습니까? 이제이 세 가지 사이의 관계는 무엇입니까? 간단히 말해서 나는 그것을 당신에게 줄 것입니다 이제 머리를 함께 생각해라

웹의 골격으로서의 하이퍼 텍스트 마크 업 언어 그래서 기본적으로 3ml가 웹 표시에 사용되었습니다 다음 CSS는 세련된 옷을 입은 옷과 같습니다 보기 좋게 비슷하게

웹은 꽤 멋져요 그것은 CSS를 사용합니다 캐스 케이 딩 스타일 시트가 더보기 좋게 나타납니다 또는 스타일링 목적으로 자바 스크립트가 생기면 자바 스크립트가 생깁니다

아이가 어떻게 움직이는 지와 같은 I 페이지로 웹 스케이트 보드를 사용하여 주위에도 동작 자바 스크립트의 도움으로 자바 스크립트는 기본적으로 웹과 상호 작용하기위한 것입니다 자바 스크립트의 장점을 배우기 전에 다음과 같은 몇 가지 일반적인 웹 사이트를 살펴 보겠습니다 자바 스크립트 및 자바 스크립트 프레임 워크를 작성합니다 그래서 우리에게는 전자 상거래 웹 사이트 인 Amazon이 있습니다

나는 확신한다, 또는, 만일 당신이 여기에서 쇼핑을하면, PayPal에는 YouTube가 있습니다 우리 모두는 YouTube에 중독되어 있습니다 eBay Netflix 및 Reddit이 있습니다 자, 이것으로 충분하다 그 JavaScript는 매우 중요한 언어입니다

그런 미용 회사에서 브랜드는 JavaScript를 사용합니다 그것은 그것이 가지고있는 것을 의미합니다 그것에 관해 정말로 멋진 무엇인가 매우 이점은 이것을 염두에두고 있습니다 이제 JavaScript의 몇 가지 이점을 살펴 보겠습니다

그것은 배우기 매우 쉽습니다 사실 가장 간단한 프로그래밍 언어 중 하나입니다 그것은 엄격한 구문을 가지고 있지 않으며 완전히 읽을 수 있습니다 하드 코어 프로그래머가 될 필요는 없습니다 자바 스크립트 배우기

내가 너에게 말해 줄께 그것은 주 유형 언어 강력한 유형의 프로그래밍 언어와 달리 Java 및 C ++과 같은 코딩에 대한 엄격한 규칙이 있습니다 지금 다음 기능은 PDF 파일입니다 그것은 오늘날의 세상에서 더 빠를 것에 관한 것입니다

그리고 JavaScript 이후 주로 클라이언트 측 프로그래밍 언어입니다 그것은 매우 빠르다 모든 코드 함수가 즉시 실행될 수 있기 때문에 접촉 할 필요가있다 서버가 요청을 보내면 확인 응답을받습니다 그리고 나서 대답을 기다려라

지금 JavaScript에는 풍부한 프레임 워크 세트가 제공됩니다 nodejs angularjs처럼 반응하고 수백 가지가 있습니다 그러한 프레임 워크의 초반부에 대해 얼마나 효율적으로 이러한 프레임 워크 웹 응용 프로그램 서버 응용 프로그램을 작성하는 데 사용됩니다 다른 작업을 수행 할 수 있습니다

JavaScript 프레임 워크는 하나입니다 자바 스크립트의 인기에 대한 주요 이유 중 하나입니다 이제 다음 장점은 웹 페이지를 더 대화식으로 만듭니다 그래서 우리는 모두 아름답게 디자인 된 것에 매력을 느낍니다 대화식 웹 사이트 자바 스크립트는 매력적인 웹 사이트의 이유입니다

그러한 쌍방향 웹 사이트를 구축하는 것은 더 예쁘다 그것은 또한 리드를 끌고 고객을 전자 상거래 웹 사이트로 안내합니다 내가 언급 한 것처럼 이전 JavaScript는 해석 된 언어입니다 컴파일러가 필요 없다 브라우저가 자바 스크립트를 해석하기 때문입니다

자바 스크립트를 실행하려면 브라우저 만 있으면됩니다 그리고 당신은 브라우저에서 모든 종류의 것들을 할 수 있습니다 환경 점수 편집자의 고통없이 컴파일러 다운로드 및 학습 그들을 사용하는 방법 따라서이 모든 것 대신에 브라우저를 열 수 있습니다 JavaScript를 실행하십시오

그래서 많은 다른 장점들 중에 사실입니다 그 JavaScript는 플랫폼이다 독립적 인 JavaScript는 모든 브라우저에서 지원됩니다 인터넷 익스플로러 모질라 파이어 폭스 구글처럼 크롬 사파리 등 따라서 모든 JavaScript 지원 브라우저가 이해할 수 있습니다 자바 스크립트 코드 해석 및 해석 모든 플랫폼에서 실행할 수 있습니다

괜찮아 이제 당신은 좋은 생각을 가지고 있습니다 자바 스크립트가 무엇이며 어떻게 작동하는지에 대해 알려줍니다 코딩 부분을 살펴 보겠습니다 몇 가지 기본 프로그래밍 개념을 다룰 것입니다

JavaScript 및 이러한 개념은 매우 유사합니다 C 언어로 시작하겠습니다 그래서 너희들, 내가 너에게 말해 줄께 모든 브라우저에는 자바 스크립트 엔진이 있습니다

여기서 JavaScript 코드를 쉽게 작성할 수 있습니다 편집자 나 도구없이 따라서이 연습은 실제 응용 프로그램을위한 것이 아닙니다 그러나 나는 단지 당신에게 그것을 빨리 보여줄 것입니다 좋아, 열어

귀하의 브라우저 인 Internet Explorer 또는 Google 크롬에서도 가능합니다 페이지를 마우스 오른쪽 단추로 클릭하고 inspect를 클릭하십시오 Chrome 개발자 페이지가 열립니다 이제 콘솔로 이동하십시오 이것은 기본적으로 자바 스크립트 콘솔입니다

이제 JavaScript를 실행하는 방법을 살펴 보겠습니다 브라우저 자체에 그래서 저는 성명을 타이핑하고 나서 설명 할 것입니다 그것은 무엇을합니다 이제 기본적으로 Java 스크립트의 명령문입니다

제가 여기서하고있는 일은 제가 기록 할 것입니다 이 메시지 안녕하세요 세계 좋아, 그래서 콘솔에 hello world를 기록 할 것이다 그것이 바로이 기능입니다 괜찮아

이제이 안녕하세요 세상은 괄호 안에 들어 있습니다 따옴표와 자바 스크립트에서 우리는 항상 문장을 세미콜론으로 종료하도록 연습합니다 자, enter를 눌러 보자 그래서 여기에서 당신은 그것이 hello world를 보여주고 있다는 것을 알 수 있습니다 괜찮아

이것은 JavaScript가 콘솔에서 작동 함을 의미합니다 그래서 이것은 JavaScript 엔진에 브라우저가 내장 된 방법 이제 자바 스크립트 코드를 실행할 수 있습니다 자바 스크립트 코드를 작성하려면 코드 편집기가 필요합니다 다양한 옵션 중에서 선택할 수 있습니다 비주얼 스튜디오 코드 숭고한 텍스트처럼 오늘의 데모에서는 비주얼 스튜디오 코드를 사용할 것이지만, 원하는 편집기를 자유롭게 사용할 수 있습니다

Visual Studio 코드는 기본적으로 간단한 가벼운 가중치 편집기입니다 그리고 사람들은 설명 상자에 링크를 남깁니다 비주얼 스튜디오 코드를 다운로드하려면 당신은 앞서 가서 설명 상자를 확인할 수 있습니다 좋아요, 그래서 이미 지금 비주얼 스튜디오 코드를 다운로드했다 폴더를 만듭니다

코드를 저장할 새 폴더를 만듭니다 실행될 것입니다 그래서 새로운 폴더를 만드십시오 이 폴더를 드래그하면 좋아하는대로 이름을 지정할 수 있습니다 그것을 여기에 떨어 뜨려 라

좋아요, 그래서 당신은 생성 된 폴더를 볼 수 있습니다 우리는 폴더를 열었습니다 이 폴더에 새로운 파일 인덱스 도트 HTML을 추가합시다 이제이 자습서를 따르기 위해 HTML을 알 필요가 없습니다 여기에 기본 HTML 코드를 붙이고 있습니다

이 코드를 신경 쓰지 않아도됩니다 간단한 웹 페이지를 만드는 것입니다 좋아, 여기있어 JavaScript 자습서를 표시하기 위해 헤더를 사용하고 있습니다 단락 태그 내에서 에드 유레카와 함께 방영하고 있습니다

HTML에 대한 지식이 없어도됩니다 이 자습서에서는 자, 이제 우리가 할 일은 이 HTML 페이지는 자바 스크립트 코드의 호스트입니다 괜찮아 이제 변경 사항을 저장하십시오 여기에 확장 기능 탭이 있습니다

확장 탭입니다 이제 라이브 서버를 검색합니다 그래서 사람들은 이미 라이브 서버를 설치했습니다 하지만 지금 당장 설치해야합니다 라이브 서버는 기본적으로 가벼운 웹 서버입니다

우리는 웹 애플리케이션을 제공하기 위해 사용할 것입니다 좋아, 이것을 설치하고 Visual Studio 코드를 다시 시작하십시오 Visual Studio 코드를 열면 색인 도트 HTML 파일로 이동합니다 좋아, 이걸 오른쪽 클릭해라 이제이 옵션을 열어 볼 수 있습니다

라이브 서버 이 옵션 만 가져올 것입니다 라이브 서버를 설치 한 후 그러니 먼저 그렇게해야합니다 라이브 서버로 열립니다 네,이 페이지를 볼 수 있습니다

HTML 페이지가 여기 있습니다 지금 여기에서 콘솔을 확인할 수도 있습니다 이것이 자바 스크립트 콘솔입니다 좋습니다

그러면 기본 브라우저가 열립니다 이 주소로 보내주십시오 괜찮아 이제이 주소는 우리의 신청서가 제공되는 곳 괜찮아

그래서 여기에서도 콘솔을 볼 수 있습니다 이제 첫 번째 Java Script 코드를 작성해 보겠습니다 그래서 Visual Studio로 돌아 가라 괜찮아 이제 얘들 아, 내가 너에게 말해 줄께

자바 스크립트 코드를 추가하는 두 가지 방법이 있습니다 HTML 파일에 가장 먼저, 넌 알아야 해 자바 스크립트 코드는 항상 HTML 파일에 기록됩니다 또는 적어도 HTML 파일에 링크되어 있어야합니다 괜찮아

내가 말했던 것처럼, 자바 스크립트 코드를 추가하는 두 가지 방법이 있습니다 HTML 파일에 이제 첫 번째는 본문 섹션에서 스크립트 태그를 사용하는 것입니다 script 태그 내에 JavaScript 코드를 입력하십시오 어떻게 끝났는 지 보여 드리겠습니다

지금 본문 섹션이 여기에서 시작하는 본문 섹션입니다 그리고 여기서 끝납니다 괜찮아 그래서 당신은 확실히해야합니다

스크립트 태그가 본문 섹션에 있음을 나타냅니다 이제 스크립트 태그를 열어 보겠습니다 이제 첫 번째 방법으로 여기에 전체 Java Script를 입력 할 것입니다 그래서 스크립트 태그 내에서, 전체 자바 스크립트를 입력 할 것입니다 그럼 간단한 선을 치자

그래서 우리는 이것을 일찍 실행했습니다 그냥 해보 죠 콘솔에 메시지를 기록해 봅시다 좋아, 그럼 안녕하세요 이게 녀석들에게 효과가 있는지 알 수 있습니다

성명서를 세미콜론으로 끝내지 마십시오 이제 파일을 저장하고 브라우저를여십시오 표시됨을 알 수 있습니다 여보세요 알았어,이게 작동한다는 뜻이야

지금 이제 두 번째 방법을 시도해 보겠습니다 실제 응용 프로그램에서 자바 스크립트 코드는 수백 개가됩니다 수천 줄의 여기에 전체 코드를 입력하는 것은 좋지 않습니다

괜찮아 우리가 할 수있는 일은 새로운 파일을 열 수 있다는 것입니다 탐색기 창에서 좋아, 여기로 가서 새 파일을 열어 안녕하세요, JS라는 이름을 지어 보겠습니다

괜찮아 Javascript 파일입니다 지금 우리가 할 일은 이 코드를 여기에 붙여 넣으십시오 자, 당신은 당신의 헤지에서이 헬로우 점 JS 파일을 참고해야만합니다

Tml 파일 어떻게 그걸합니까? 괜찮아 여기에 속성을 추가합시다 이 속성은 SRC입니다 알았어, 미스터

C는 현재 SRC와 동일한 원본을 나타냅니다 따옴표 안에 Javascript 파일의 이름을 적어 두겠습니다 Dot JS는 자바 스크립트 파일의 이름입니다 Tans를 닫자 좋아, 다시 열어

알았어, 태그를 닫자 그리고 이것은 두 번째 방법입니다 그래서 우리는 기본적으로 Hello 파일 Js를 HTML 파일에서 참조하고 있습니다 괜찮아 이제 여기에 변경 사항을 저장해 보겠습니다

이제 브라우저를 확인해 보겠습니다 네, 그걸 볼 수 있어요 안녕하세요 안녕하세요 그래서 두 가지 방법 모두 작동합니다

너를 이해했으면 좋겠어 자바 스크립트 코드를 추가하는 두 가지 방법이 있습니다 귀하의 HTML 파일에 첫 번째 방법은 전체 코드를 작성하는 것입니다 스크립트 태그 내에서

두 번째 방법은 Javascript 파일을 참조하는 것입니다 귀하의 HTML 파일에 여러분, 간단한 아이디어가 있으시길 바랍니다 자바 스크립트 작동 원리 브라우저를 사용하여 JavaScript를 실행하는 방법에 대해 설명합니다 괜찮아

자 이제 자바 스크립트 기본 사항을 살펴 보겠습니다 변수 상수에 대해 논의 할 것입니다 여기에 몇 가지 다른 개념이 있습니다 괜찮아 가변 변수는 무엇입니까? 메모리 위치에 주어진 이름입니다

이는 데이터를 저장하는 컨테이너 역할을합니다 자,이게 무슨 뜻이야? name 변수를 정의하겠습니다 나는 그것에 이름을 저장하고 싶다 그 이름은 에드 유레카입니다 좋아요, 그래서 저는 name이라는 변수를 선언 할 것입니다

그리고 변수에 Eureka에 저장하겠습니다 그래서 name은 변수의 이름입니다 그리고 에리카는이 변수의 값입니다 괜찮아 여기서 일어나는 일은 임시 메모리 위치입니다

이름 변수에 할당 됨 이 이름 변수에는 값이 포함될 것입니다 그것은 Eddie Rekha 다 괜찮아 이제이 작업을 실제로 수행해 보겠습니다 당신은 그것을 더 잘 이해할 수 있습니다

그래서 상수는 고정 값입니다 실행 시간 중에는 변경되지 않습니다 자, 시간이있다 변수의 값을 변경하지 않으려는 경우 전체 워크 플로우를 방해 할 수 있기 때문에 그런 상황에서 변수 대신에 상수를 사용합니다

괜찮아 이제 여기서 상수 구문을 볼 수 있습니다 상수를 선언하려면 키워드 상수를 사용하십시오 자, 이제이 키워드를 사용합니다 실질적으로이 작업을 수행하고 작동 방식을 확인하십시오

권리? 그래서 저는 이것을하기 위해 새로운 파일을 만들 것입니다 나는 그것을 일정하게 명명 할 것이다 괜찮아 이제 선언하겠습니다 상수 변수 선언을위한 변수 당신은 const 키워드를 사용합니다

좋아요, 그래서 여기에 상수 변수를 선언하고 있습니다 지금 그 더미를 보자 괜찮아 Pi 3

14159 appens에 값을 지정하겠습니다 상수 변수의 값을 변경하려고하면 그렇게 해보 죠 좋아요, 이제 값을 바꿉니다 가자

이것을 콘솔에 기록해 봅시다 변경 사항 저장 HTML 파일의 경로를 변경해야합니다 그래서 여기에 그것은 여전히 ​​가변 점 JS 변경 그것에 연결되어있다 상수 GS에 괜찮은 새 파일을 만드는 경우 이제 여기의 변경 사항이 이제부터 열려 있기 때문에 여기에 브라우저를 올려 놓으십시오

화살표 상수 변수 지정을 볼 수 있습니다 이 모든 오류는 왜냐하면 우리는 상수 변수의 값을 변경하려고하기 때문입니다 값 314를 사용하여 상수로 선언됩니다 그런 다음 3

12로 변경하려고합니다 그것이 우리에게 화살이있는 이유입니다 그래서 여러분은 상수 변수만을 사용합니다 특정 변수의 값을 고정시키고 자 할 때 좋습니다, 그건 바꿀 수 없으므로 상수를 사용할 때가되었습니다

괜찮아 나는 당신 모두가 분명하기를 바랍니다 다음 주제로 나아 갑시다 좋아요, 원시 데이터는 이제 사람들이, 할당 할 수있는 다양한 유형의 값이 있습니다 변수에

지금 자바 스크립트에서는, 우리는 두 가지 유형의 데이터 유형을 가지고 있습니다 기본 데이터 형식이며 Do는 참조 데이터 형식입니다 이제 기본 데이터 유형에는 숫자 문자열이 포함됩니다 부울 null 및 정의되지 않은 참조 데이터 형식 다른 한편으로는 객체를 포함한다 및 배열 및 함수

괜찮아 이제 이러한 기본 데이터 유형을 살펴 보겠습니다 Visual Studio 코드에서 그래서 새로운 파일을 다시 만들 예정입니다 네가 좋아하는 이름을 말해봐

좋구나 그래서 이것을 위해 변수를 정의해야합니다 let 키워드를 사용하는 변수를 정의하는 방법 이것은 지금 나의 변수의 이름이다 이것에서 저는 Harry Potter의 가치를 저장하려고합니다

모든 권리는 세미콜론으로 끝났습니다 그래서 여기에 끈이있어 우리는 따옴표를 사용하고 있기 때문에 값을 따옴표로 닫을 때 그래서 컴퓨터는 이것을 문자열로 간주 할 것입니다 그래서 내가 이런 걸 가지고 있는지 보자고해도 어떻게 생각해? 이것은 당신이 문자열이라고 생각합니까? 또는 그것이 또는 숫자라고 생각합니까? 좋아, 확인해 보자

이제 콘솔에 기록하고 보자 그 이름은 오랜 세월뿐입니다 변경 사항을 저장하여 여기에서 참조를 변경하십시오 좋아요, 그래서 그것은 일정합니다 원시로 변경합시다

변경 사항이 여기에 있는지 확인하여 브라우저를여십시오 두 값을 표시합니다 괜찮아 이제 이러한 변수 유형의 유형을 확인해 봅시다 비록 여기에 하나이지만 문자열입니다

그것은 여전히 ​​문자열입니다 왜 그런가요? 우리는 이것을 인용문으로 묶었 기 때문에 따라서 동봉 된 것이 무엇이든지 따옴표 안에있는 문자열은 문자열로 간주됩니다 좋습니다 그래서 지금까지 숫자와 문자열에 대해 논의합니다

부울을 살펴 보겠습니다 option이라는 변수를 정의합시다 괜찮아 그래서 기본적으로 남자는 부울이있을 때마다 사용됩니다 논리적 상황 또는 논리 코드 그것은 실행되어야합니다

특정 조건이 충족되면 또는 특정 조건이 참인 경우, 그런 상황에서 다음 코드가 실행될 것입니다 부울을 사용합니다 부울은 두 가지 값만 가질 수 있습니다 사실인가 거짓인가? 그래서 이것은 부울입니다 이제 다음 유형의 데이터 유형은 정의되지 않습니다

지금 정의되지 않은 것은 무엇입니까? 내가 보여줄거야 가변 높이를 정의합시다 이제이 두 변수를 모두 기록해 봅시다 우리는 이러한 변수의 유형을 보게 될 것입니다

괜찮아 그럼 옵션도 기록해 봅시다 height 변경 사항을 저장하면 브라우저가 열립니다 이제 그리고 당신은 아무 것도 인쇄하지 않고 잘 볼 수 있습니다 그것은 정의되지 않는다

왜 그렇게 생각하니? 우리는 height를 초기화하지 않고 정의했기 때문에 그래서 우리는 어떤 숫자 나 값으로 설정하지 않았습니다 그것이 정의되지 않은 이유입니다 따라서 이것은 정의되지 않은 데이터 유형입니다 따라서 데이터 유형을 초기화하지 않으면, 그것은 undefined라고 불립니다

괜찮아 이제 마지막 하나가 null입니다 예제를 보여 드리겠습니다 그래서 저는 여기에 눈 색깔이라는 변수를 정의하고 있습니다 지금 null로 설정하고 있습니다

명시 적으로 지울 때마다 null을 사용합니다 변수의 값 좋아, 그 때 우리는 null을 사용합니다 그래서 사람들이 원시 데이터 유형으로 명확 해지기를 바랍니다 지금 다음 주제 배열로 넘어 갑시다

그래서 우리가 무엇을 추가합니까? 이것은 기본적으로 여러 값을 저장하는 데 사용됩니다 하나의 변수로 따라서 항목 목록이있는 경우, 너는 미술 용품을 사러 갔다는 것을 보자 네가 가지고있는 페인트 브러시가있어 당신이 연필이있는 약간 유혈이있어, 놓칠 수있다 스프레이 페인트가있어

이제 너는 이것들을 나열하고 싶다 한 변수에서 더 잘 이해할 수 있습니다 시각적 인 스튜디오 코드로 가서 코드를 실행 해 봅시다 그래서 array라는 새로운 파일을 추가하십시오 쇼핑이라는 배열을 정의 할 것입니다

괜찮아 정의하기 위해서 let 키워드를 사용해야하는 변수 여기에 대괄호를 사용해야합니다 이것은 배열을 정의하는 방법입니다 자 이제 대괄호는 왜냐하면 배열에 여러 값을 저장해야하기 때문입니다 배열은 기본적으로 여러 값을 저장하는 데 사용됩니다

단일 변수의 괜찮아 따라서 쇼핑은 여러 값을 갖는 변수입니다 이제 shopping 변수의 값을 정의 해 봅시다 첫 번째 가치는 페인트 브러시입니다 쉼표를 추가하고 쉼표가 필요한 다른 값을 추가 할 것입니다

두 값을 분리합니다 괜찮아 색상 표를 추가합시다 캔버스 좋아, 그래서 우리는 세 가지 항목이있다 쇼핑 목록에 지금

콘솔에 기록해 두자 변경 사항을 저장하십시오 HTML 파일의 경로를 바꿔야합니다 지금 당신이 볼 수있는 브라우저를 열어 저장하십시오 이제는 전체 배열을 표시하고 있습니다

배열에 0부터 번호가 매겨 졌음을 알려 드리겠습니다 따라서 0은 첫 번째 요소 1입니다 제 2 엘리먼트 (2)는 제 3 엘리먼트이고, 배열에 세 개의 요소가 있더라도 마지막 요소의 수는 2입니다 배열에 0부터 번호를 매기기 시작했기 때문입니다

괜찮아 이제 여러분은 배열 요소에 어떻게 접근합니까? 액세스하려는 경우 색상 팔레트를 표시 할 색상 팔레트 그렇게하기 위해 지금 어떻게 할 건가요? 배열의 이름을 쓰려고합니다 대괄호 안에 당신은 배열 요소의 번호를 넣을 것입니다 따라서 색상 팔레트를 표시하려면, 색상 표의 수는 하나입니다

그래서 여기에 1을 입력 할 것입니다 좋아요, 그래서 괄호 세미콜론을 선택하면 색상 팔레트가 표시됩니다 따라서 배열 요소에 액세스하는 방법입니다 괜찮아 따라서 하나의 요소 만 액세스하려는 경우 그 요소의 수 그 요소가 이제 표시됩니다

배열을 가지고 조금 놀아 봅시다 몇 가지 다른 배열을 정의합시다 그 밖의 무엇이 할 수 있는지 보도록하겠습니다 그래서 다른 예를 보여 드리겠습니다 아니요, 전화 번호 배열을 정의하고 있습니다

그래서 얘들 아 배열을 선언하는 방법은 let 키워드 이름을 사용합니다 대괄호와 동일한 배열을 사용하면 종료됩니다 세미콜론으로? 괜찮아 이제 배열 요소를 추가해 보겠습니다 그래서 임의로 숫자를 추가 할 것입니다

괜찮아 이들은 내 배열 요소입니다 지금 두 개의 숫자를 더하고 콘솔에 표시해 봅시다 괜찮아

어떻게 그걸합니까? 그래서 하나 추가하자 이 요소와이 요소를 추가합시다 괜찮아 그러면이 요소에 어떻게 접근합니까? 쓰기해야합니다 배열의 이름은 대괄호를 엽니 다

그리고 배열 0의 번호 위치 1에 숫자가 플러스이므로 기본적으로 1과 3을 더합니다 모든 변경 사항을 저장하면 브라우저로 이동합니다 모든 권리에 대한 답변을 볼 수 있습니다 자, 다른 것을 시도해 보자 함수를 사용하기 위해 이러한 요소를 정렬 해 봅시다

sort now sort는 사전 정의 된 함수입니다 그래서이 정렬 함수는이 배열을 정렬 할 것입니다 좋아요, 당신의 변화를 저장하십시오 로그를 살펴 봅시다 그래,이 어레이를 순서대로 정렬하고있어

하나, 둘, 셋, 넷 다섯 이제 우리는 여기서 6이 빠져 있음을 압니다 이제 배열에 요소를 추가하겠습니다 그렇다면 배열에 요소를 어떻게 추가합니까? 먼저 배열 도트 푸시의 이름을 입력하십시오 좋아, 덤불은 함수 야

요소를 배열에 푸시합니다 괜찮아 이제 어떤 요소를 푸시 할지를 기록 할 것입니다 within이 괄호 6 명이 푸시하자

이제 배열을 확인해 봅시다 변경 사항을 저장하면 브라우저로 이동합니다 이제 7 가지 요소가 있습니다 좋아, 여길 볼 수있어 자, 다른 예를 보여 드리겠습니다

지금은 배열과 함께 JavaScript에서는 변수를 가질 수 있습니다 하나의 배열 자체에 다른 데이터 유형이 있습니다 그래서 단일 배열 다른 데이터를 가진 변수를 가질 수 있습니다 이 예를 들어 설명해 드리겠습니다 그래서 나는 mixed라는 배열을 선언하고 있습니다

괜찮아 이제 믹스 요소를 나열 해 봅시다 먼저 문자열을 나열하려고합니다 좋아요, 그 다음 숫자를 입력하고 문자열을 다시 입력하십시오 괜찮아

이제 로그를 남기십시오 콘솔로 가서 무슨 일이 일어나는 지 봅시다 괜찮아 그래서 이것은 하루에 혼합입니다 여기에 요소가 있다는 것을 알 수 있습니다

첫 번째 요소의 유형을 확인해 봅시다 어떻게 그걸합니까? 따라서 배열의 이름을 쓰면 괄호를여십시오 그리고 배열 번호를 0으로 쓰면, 이것은 지금 똑같은 문자열입니다 두 번째 요소의 유형을 확인해 봅시다 이것은 숫자입니다

이제 우리는 알게되었습니다 배열 내에서 변수를 가질 수 있습니다 다른 데이터 유형의 괜찮아 이걸로 모든 사람들은 배열을 완성합니다

이제 다음 주제를 살펴 보겠습니다 우리의 다음 주제는 객체입니다 지금 객체와 객체 란 무엇입니까? 자바 스크립트의 경우 실생활의 객체와 매우 흡사합니다 예를 들어, 한 소녀를 생각해 봅시다

괜찮아 이제이 소녀는 이름을 가지고 있습니다 그녀는 거대한 눈빛을 가지고 있습니다 그녀의 이름이 Emily이거나 연령이 15 세라고 가정 해 봅시다 그녀에게는 갈색 눈이있다

그래서 내가 뭘 했을까? 나는 기본적으로 객체를 선언했다 어떤 여자 였어 그리고 나는 그녀의 재산을 열거한다 그녀의 이름은 그녀의 나이와 그녀의 눈 색깔입니다 그래서 소녀는 그녀의 재산에 대한 대상 이름 나이 아이 컬러입니다

이것은 객체가 작동하는 방식입니다 괜찮아 이제 객체 객체 란 무엇입니까? 많은 값 또는 많은 특성을 포함합니다 좋아, 각 자산은 이제 가치가있을거야 예제를 보자

그래서 사람들, 나는 objects라는 새로운 파일을 만들 것입니다 자, 어떻게 객체를 선언합니까? 그래서 나는 pain equal이라는 객체를 선언 할 것입니다 중괄호를 사용하여 객체를 정의 할 것입니다 자,이 중괄호를 사용하자마자, 그것은 pain이라는 객체를 만들고 있다는 것을 의미합니다 좋아요

이 객체는 많은 속성을 저장할 수 있습니다 각 속성은 일부 유형을 갖습니다 키 값 쌍과 같습니다 여기서 key는 속성 값으로 해당 속성의 값입니다 이제는 이 고통은 첫 번째 속성을 가지고있다

고통의 유형입니다 좋아요, 그래서 저는 볼펜을 쓸 것입니다 이제 서로 다른 속성을 쉼표로 구분합니다 괜찮아 이제 두 번째 속성은 검정색 일 것입니다

자 이제 다른 속성을 정의 해 보겠습니다 비용은 이제 여기까지 알았습니다 나는 따옴표 안에 10을 넣었다 이것은 숫자가 아니기 때문에 문자열이 아닙니다 좋아, 기억해

그래서 사람들은 이것을 세미콜론으로 종료합니다 자, 여기서 내가 뭘 했니? 펜이라는 객체를 만들었습니다 이 펜은 세 가지 속성이 있습니다 좋아요, 세 가지 속성은 색상 및 비용 유형입니다 이제 속성 유형에는 값 볼펜이 있습니다

비슷하게 속성 색 값은 검은 색입니다 비용은 10입니다 괜찮아 그래서 이것은 당신이 객체를 정의하는 방법입니다

그래서 대상은 펜입니다 세 가지 속성과 값을가집니다 이 고통의 비용을 표시하려면 어떻게해야합니까? 나는 단지이 고통의 비용을 원한다 전체 개체가 아닙니다 괜찮아

이제 어떻게 객체에 접근합니까? 이것은 구문입니다 객체 객체 이름 도트 속성 이름에 액세스하기위한 것입니다 괜찮아 이제 이것을 액세스하는 또 다른 방법이 있습니다 as 점 표기법 다른 방법은 이 객체 이름처럼 대괄호를 사용합니다

그 안에 속성 이름을 씁니다 괜찮아 이것은 이제 다른 방법입니다 솔직히 점 표기법을 선호합니다 왜냐하면 나는 그것이 더 간단하다고 느낍니다

괜찮아 자 이제 핀의 비용을 표시해 봅시다 괜찮아 그래서, 어떻게 그 일을합니까? 먼저 객체 이름을 작성하고, Penn DOT는 색상 인 속성 이름입니다 죄송합니다

발생한 속성 이름입니다 좋아, 이제 이것을 표시하고 싶다 그래서 이것을 콘솔 DOT 로그 기능에 넣을 것입니다 이 내용을 콘솔 DOT 로그 문에 넣을 것입니다 지금은 파일을 저장하는 것이 좋습니다

인덱스 또는 HTML에서 참조를 변경합니다 그래서 이것을 이것을 저장하는 객체로 변경하십시오 브라우저를 엽니 다 여기에 10이 표시되는 것을 볼 수 있습니다 좋아요, 그렇기 때문에 객체 속성에 액세스하는 방법입니다

괜찮아 이제 다른 객체 예제를 보여 드리겠습니다 괜찮아 이제 Emily라는 객체를 정의 해 보겠습니다 괜찮아

이제이 객체에는 몇 가지 속성이 있습니다 속성 및 해당 속성의 값 그것이 내가 넣지 않을 번호이기 때문에 따옴표로 묶은 다음 시원하고, 그녀가 DPS에 간다면 또 다른 자산 인 것을 알 수 있습니다 그리고 수업이 있습니다 10 번째 표준을 가정 해 봅시다

자, 다음 속성은 과목입니다 지금 나는 둘 이상의 과목을 가지고있다 즉, 하나 이상의 가치가 있음을 의미합니다 이 변수에

자, 어떻게이 변수에 하나 이상의 값을 저장합니까? 그래서 얘들 아, 내가 배열 배열에 대해 말한 것을 기억 하는가? 동일한 변수의 여러 값을 저장합니다 자, 이것을 배열로 정의 해 봅시다 이것이 우리가 배열을 정의하는 방법입니다 물리학을 추가하면 쉼표가 추가됩니다 모든 가치 후에 물리학과 화학

생물학을 추가합시다 Let 's and months 따라서 여기를 끝내는 것을 잊지 마십시오 지금 물리학에 대해 잘못된 철자를 입력했습니다

좋아, 얘들 아, 화학을 보여주고 싶다고합시다 내가 어떻게 그럴 수 있니? 그럼 내가 어떻게 할까? 그래서 내가 처음 말했던 것처럼 당신은 객체 이름을 쓸 것입니다 특성 주제의 특성 이름의 자, 이것은 배열 요소입니다 그래서 주제에, 두 번째 요소에 액세스 할 것입니다

좋아요, 두 번째 요소의 수는 하나가 될 것입니다 괜찮아 이제 이것을 표시하기 위해 이 진술서에 이제 파일을 Chrome에 저장하여 저장합니다 좋아, 오류가있다 화살은 정확히 무엇입니까? 좋아, 얘들 아, 오류가 끝났어

나는 쉼표를 넣는 것을 잊었다 그래서 모든 속성이 쉼표를 넣어야하기 때문에 나는 여기에 쉼표를 넣는 것을 잊어 버렸습니다 그리고 그것은 지금 오류였습니다 파일을 저장하고 Chrome을여십시오 그래서 여기에서 화학을 나타내는 것을 볼 수 있습니다

괜찮아 그래서 그것이 우리가 객체로 끝난 결과입니다 다음 주제로 넘어 갑시다 지금 다음 주제는 함수 함수는 JavaScript의 기본 구성 요소입니다

그것은 기본적으로 일련의 진술이다 어떤 작업을 수행합니다 지금 몇 가지 예를 들어 보겠습니다 지금 우리의 시야 스튜디오 코드를 살펴 보겠습니다

새 파일을 추가합시다 Js라는 함수의 이름을 지정하겠습니다 그렇다면 함수를 정의하거나 선언하는 방법은 무엇입니까? 따라서 사용해야 할 함수를 선언하려면 키보드 함수 공간 함수의 이름 그럼 안녕하세요 괜찮아

이제이 후에 괄호를 추가해야합니다 좋습니다 그리고 중괄호 안에 그리고 중괄호 안에, 당신은 함수의 몸체를 정의 할 것입니다 이제는 이것은 단지 메시지를 로깅하는 것입니다 안녕하세요

괜찮아 이제는이 기능을 지금 만들었습니다 이 함수를 호출 해 봅시다 어떻게 그걸합니까? 부모와 함께 함수의 이름을 씁니다 이것은 다음이며 세미콜론으로 끝냅니다

이제 변경 내용을 저장하면 함수를 추가해야합니다 여기 HTML 파일에서 여기 브라우저의 변경 사항이 여기에 표시됩니다 인쇄 된 것을 볼 수 있습니다 안녕하세요

이제이 기능의 핵심은 무엇입니까? 더 나은 것을 해보 죠 좋아, 더 나은 기능을 만들어 보자 우리가 함수를 생성한다고 가정 해 봅시다 두 변수를 곱하면됩니다 괜찮아

그래서 우리가 함수를 생성한다고 가정 해 봅시다 두 숫자의 곱을 구하기 위해 괜찮아 그래서 당신은 키워드 함수를 사용합니다 내 기능 제품의 이름을 지금 지정하겠습니다

이 괄호 안에, 저는 두 변수를 선언 할 것입니다 괜찮아 이제 이러한 변수를 매개 변수라고합니다 그래서 저는 두 개의 매개 변수를 함수에 전달할 것입니다 자, 내가 그걸로 나아가 자

너는 그것을 더 잘 이해할 것이다 이제이 함수가 반환 할 함수는 다음과 같습니다 A와 B의 곱 그래서 별 B 이제,이 함수를 호출 해 봅시다 그러면 함수 이름을 어떻게 부르죠? 기능에 대해서 그리고 여기에요? 그 가치를 지나칠거야? 당신은이 변수들에 속해야합니다

이제이 변수들은 여기에 어떤 가치도 주어지지 않았습니다 나는이 변수들을 정의한다 그들은 단지 매개 변수로 알려져 있습니다 이 변수는 매개 변수로 알려져 있습니다 괜찮아

이제 이러한 변수에 값을 전달해 보겠습니다 2시와 6시를 지나자 좋아, 세미콜론으로 끝내 이제이 값을 인수라고합니다 자, 함수를 호출 할 때 인자를 전달합니다

그 기능에, 그러나 당신이 정의한 함수를 통과하면 매개 변수를 해당 함수에 추가합니다 좋아, 보자 이걸 가지고 우리 콘솔을 열자 잠시만 요 그래, 나는 그것을 잊어 버렸다

지금 제품을 일부 변수로 둘러 봅니다 변수를 정의합시다 x라고합시다 좋아, 그래서 나는 X라는 변수에 내 제품을 저장하고있다

이 변수를 기록합시다 내 콘솔에 변경 사항을 저장하면 여기에 브라우저가 있습니다 12 번을 볼 수 있습니다 좋습니다 네 상사가 어떻게 다른 매개 변수로 작동하는지, 알았어

다음으로 조건문이 생겼습니다 조건문은 다른 동작을 수행하는 데 사용됩니다 다른 조건에 따라서 if는 코드 블록 만 실행하는 데 사용됩니다 조건이 맞다면 알았어

기본적으로 조건이 충족되면 명령문이 충족됩니다 이 블록 내에서 실행됩니다 이것은 if 문의 구문입니다 그래서 기본적으로 if 키워드입니다 괄호 안에는 이제 조건을 정의 할 것입니다

이 조건이 충족되면이 성명서 실행되거나 명령문 세트가 실행됩니다 괜찮아? 프로그램에서 작동하는 방식입니다 당신은 프로그램을 시작합니다 실행이 조건에 도달하면 조건이 true이면 블록이 실행되면 좋아, 거기서 끝이야

조건이 false이면 if 블록을 종료합니다 좋아, 이걸 실제적으로 보자 그래서라는 새로운 파일을 만들자 그래서 먼저, 이제 배열을 정의 할 것입니다 숫자를 더해 보겠습니다

배열에 일부 무작위로 숫자를 추가하고자합니다 자, 여기에 조건을 추가합시다 이제 조건을 정의 할 것입니다 이것은 숫자이고 0은 같음 숫자는 그때 그냥 몇 가지 진술을 표시 할 수 있습니다

좋아, 보자, 맞아 괜찮아 여기서 지금 무슨 일이 일어나고있는 걸까요? 기본적으로 내에서 조건을 정의하고 있습니다 if 문은 여기 있습니다 그리고 이것은 처형 될 성명서입니다

이 조건이 충족되면 그래서 조건은 이 번호 인 위치 0의 번호 이 번호가 위치 2의 번호와 같은 경우, 이 번호입니다 그래서이 두 숫자는 똑같습니다 올바른 인쇄 괜찮아 이제 부호와 같음이 비교에 사용됩니다

그래서이 변수의 값을 확인하는 데 사용됩니다 이 변수의 값 이 두 값이 같으면 조건이 충족됩니다 괜찮아 이제 우리가 여기서 한 변경 사항을 저장합시다 또한 꼭 기억하십시오

귀하의 HTML 파일에 참조 점을 JS로 변경하십시오 그래, 변경 사항을 저장하면 브라우저로 이동합니다 올바르게 표시되는지 확인할 수 있습니다 이제 이것은 if 조건문입니다 else 문은 어디에서 사용해야합니까? else else가 사용되었습니다

동일한 조건이 거짓이면 코드 블록을 실행합니다 괜찮아 그래서 이것은 Ethel의 구문입니다 거기에 어떤 조건이 있다면 조건이 충족되면이 명령문이 실행됩니다 이제이 조건이 충족되지 않으면 다른 것을하고 싶다면 else 문을 사용하십시오

그래서 이것이 거짓 일 때, 이것은 일어날 것입니다 좋아, 그래서 대신 종료 당신은 다른 작업을 수행 할 것입니다 순서도를 보자 조건을 실행할 때 조건이 참이면, 우리는 if 블록 내에서 코드 블록을 실행하려고합니다 괜찮아 이제 조건이 거짓이면, 대신 퇴사하지 않고 실행하려고합니다

다른 코드 블록, else if 블록에 있습니다 괜찮아 이제 실제로 이것을 살펴 보겠습니다 동일한 파일 자체 내에서 어떻게하는지 보여 드리겠습니다

지금 조건을 정의합시다 if numbers이 위치는 같음 그런 다음 올바른 것으로 인쇄됩니다 그렇지 않은 경우,이 조건이 false의 경우, 그러면이 콘솔 DOT 로그를 잘못 인쇄 할 것입니다

다시 시도하십시오 좋아요, 간단합니다 이것이 작동하는지 봅시다 괜찮아 브라우저에서 파일을 저장하십시오

괜찮아 여기에 몇 가지 문제가 있습니다 코드로 돌아 가자 좋아, 내 실수 야 파일을 저장하여 지금 브라우저를 열고, 이제는이 부분을 주석으로 처리해야합니다

그렇지 않으면 혼란스러워 할 것입니다 나는 여기서 쓴다 else / else 블록 인 경우 if / else 블록입니다 좋아요, 브라우저를 열어 저장하겠습니다 다시 시도해보십시오

그래서 이것은 else 문이 작동하는 방식입니다 괜찮아 이제 몇 가지 다른 예를 가지고 놀 수도 있습니다 다른 몇 가지 예를 보여 드리겠습니다 괜찮아

이제 if 블록 내에 두 가지 조건을 부여하겠습니다 괜찮아 이제 이것이 첫 번째 조건이되도록하십시오 그러면 다른 조건을 어떻게 추가합니까? 연산자와 연산자를 사용 하시겠습니까? 좋아요, 여기에 또 다른 조건을 추가하십시오 좋아, 나 여기서 실수하고있어

배열 이름은 숫자입니다 여기 조건에 더해졌습니다 지금이 두 가지 조건 이 성명서는 충족 될 것입니다 괜찮아? 우리가 지금 가고있는 동안, 이것이 괜찮은지 보자 우리는 당신이 혼란스러워하지 않도록 이것을 단지 주석 처리 만 할 것입니다

알았어, 변경 내용이 콘솔을 열어 볼 수 있습니다 좋아요, 그것은 약간의 화살표입니다 그래서 그것은 기본적으로 내가 한 일입니다 명명하는 동안 이것은 화살표입니다 왜냐하면 나는 어디 에나 S를 추가하는 것을 잊었 기 때문이다

괜찮아 이제는 이것이 작동해야하는 변경 사항을 저장하고 있습니다 알았어, 다시 말하면 잘못 했어 이제는이 두 가지 조건이 충족되기를 원하기 때문에 이것은 잘못된 것입니다 여기에 and 연산자를 사용하고 있습니다

그래서 의무적입니다 이 조건이 참이고이 조건이 참이라고 가정합니다 괜찮아 따라서 여기에서 or 연산자를 사용하면, 이것은 or 연산자입니다 좋아, 여기에 또는 연산자를 대신 사용하면, 이게 제대로 작동하는지 봐야지, 맞지? 좋아, 또는 의미 그 중 하나라도 또는 이러한 조건 중 하나가 참일 경우 올바른 것입니다

좋습니다, 그래서 우리는 if-else로 끝납니다 이제 루프로 넘어 갑시다 그래서 루프 루프는 기본적으로 사용되는 것입니다 매번 동일한 코드를 다시 실행하려는 경우 다른 값으로 그래서 루프가 사용됩니다 이제 루프는 3 가지 종류가 있습니다

while 루프가 있습니다 while 루프가 있습니다 그리고 do-while Loop가 있습니다 괜찮아 이제 각 루프를 하나씩 살펴 보겠습니다 먼저 while 루프가 생겼습니다

여기서 일어나는 일은 기본적으로 코드 블록을 반복하며, 지정된 조건이 참인 한 괜찮아 따라서이 조건이 참일 때이 루프 코드가 실행됩니다 조건을 실행할 때 조건이 true이면 조건부 코드가 실행됩니다 그렇지 않은 경우 조건이 거짓이면, 너는 끝내기 만하거나 끝낼거야

루프에서 괜찮아 이제 실용적인 예를 살펴 보겠습니다 이것으로 새로운 파일을 생성한다 반면 JS

그래서 예전으로 이동하기 전에 do-while에 대해 이야기합시다 루프 또한 기본적으로 while 루프의 그라디언트는 이제이 루프입니다 검사 전에 코드 블록을 한 번 실행합니다

조건이 참이면, 그런 다음 루프를 반복합니다 조건이 맞는 한 괜찮아 그래서 우리는 do 구문 내에서 구문을 볼 수 있습니다 코드를 반복하십시오

이제이 코드는 한 번 실행됩니다 그 후에 만 ​​조건이 점검됩니다 이제 조건이 참이면, 그런 다음 다시 실행하게됩니다 조건은 무엇입니까 거짓입니까? 당신은 그것을 실행하지 않을거야 그러나이 코드는 적어도 한 번 이상 실행됩니다

좋아요 그 동안의 차이는 루프 코드는 적어도 한 번 실행됩니다 do-while 루프에서 괜찮아 자 이제 사실상 이것을 해보 죠

변수 I를 정의하고 0으로 초기화 해 봅시다 자, 내 while 루프 내에서, 나는 다음 조건을 정의 할 것이다 나는 5 미만이지만 지금은 이것을해야한다 그 진술은 여기에 숫자가 표시되어야합니다 그리고 그것을 표시해야합니다

괜찮아 그래서 나는 더하기 값을 증가 시키자 지금 이게 지금 보일 지 봅시다 while 루프 while while 루프

나는 다음과 같은 조건을 정의했다 나는 5 미만이지만 수행해야한다 다음 코드를 먼저 작성하십시오 그래서 0으로 세트 I의 나는 5보다 작다 이제 0이 5보다 작다

이것은 사실입니다 그래서이 두 문장을 실행할 것입니다 그래서 숫자를 인쇄하고 싶습니다 제로입니다 그리고 나서 그것은 I의 값을 증가시킬 것입니다

그래서 지금 여기서 1이 될 것입니다 Lll이 루프로 돌아가서 확인합니다 하나가 5 미만이면 사실입니다 그래서이 두 명령을 비슷하게 실행합니다 계속 가라

I가 4와 같을 때까지 4 L입니다 하지만 내가 5가 될 때 5는 5보다 작지 않다 그래서 이것은 실행되지 않을 것입니다 괜찮아 이제 이것을 저장하고 경로를 변경합시다

색인 도트 HTML 동시에 이것을 저장하여 브라우저를 열어보십시오 그것을 여전히 인쇄 번호를 참조하십시오 012340 K입니다 인쇄 번호 5가 아닙니다 5가 5보다 작지 않기 때문입니다 괜찮아

이제 do-while을 사용하여 똑같은 일을 해봅시다 do while 루프를 먼저 수행하십시오 여기서 do 블록을 정의 할 것입니다 이 코드를 여기에 붙여 넣으십시오 괜찮아

이제 do 루프가 끝나면 while 조건 괜찮아 그럼 조건을 알려주세요 나는 5보다 큰 것을 보자 괜찮아

여기서 일어날 일은 먼저 실행하는 것입니다 이 두 문장 괜찮아 숫자가 0으로 인쇄됩니다 우리는 여기에 I-20을 초기화했기 때문에 있습니다

좋아요, 그러면 I가 1로 증가 할 것입니다 좋아요, 그러면 그 고리에서 벗어날 것입니다 그런 다음 상태를 확인하려고합니다 5보다 큰 하나는 거짓입니다 그래서 여기에서 끝날 것입니다

괜찮아 자 이제이 문제를 설명해 보겠습니다 혼란스러워하지 마라 좋아,이 모든 것을 주석으로 처리 할 것입니다 이제 변경 사항을 저장하여 브라우저를 엽니 다

숫자가 0 인 것은 한 번만 인쇄됩니다 이제 그것이 차이점입니다 while과 do-while 루프 사이에 있습니다 다음으로 우리는 Loop를 가지고 있습니다 Loop를 살펴 보겠습니다

그럼 Loop은 무엇입니까? 그래서 기본적으로 반복적으로 루프 코드를 실행합니다 주어진 조건이 참일 때 그래서 조건을 테스트해라 루프 본문을 실행하기 전에 여기에서 구문을 볼 수 있습니다 for 루프 내 for for 루프

조건이있다 세미콜론으로 구분됩니다 그런 다음 조건 세미콜론과이 단계가 있습니다 그런 다음 루프 코드가 있습니다 괜찮아

이제이 begin 문이 한 번 실행됩니다 이 코드 블록을 실행하기 전에 괜찮아 그래서이 루프 코드가 실행되기 전에 이 조건이 실행됩니다 괜찮아

이제 for 루프의 구문을 살펴 보겠습니다 for 루프에는 괄호 안에 세 개의 명령문이 있습니다 괜찮아 이제 시작은 한 번 실행됩니다 이 코드를 실행하기 전에 괜찮아

이제이 조건은 조건을 정의합니다 이 루프 코드를 실행하기 위해 다음 단계입니다 이것은 매번 실행됩니다 코드 블록이 실행 된 후 괜찮아

그래서 이것이 실행 된 후에 이것은 실행됩니다 그래서 사람들은 혼란 스럽다는 것을 알고 있습니다 실질적으로 이것을 해봅시다 너는 그것을 더 잘 이해할 것이다 이제는 Now라는 새 파일을 만들겠습니다

Loop for을 선언합시다 그래서 키보드를 사용하면 다음을 넣을 수 있습니다 첫 번째 진술 또는 첫 번째 조건, 그것은 I가 0과 같습니다 괜찮아 이제 다음은 내가 5 미만이다

나는 다음이다 플러스 플러스 이러한 조건을 분리해야합니다 세미콜론 (; 좋아, 여기에 세미콜론을 써야 해 이제 루프 코드를 엽니 다 루프 내에서 똑같은 일을 해봅시다 우리가 while 루프에서했던 것

좋아요, 그 번호는 잊혀지지 않을 거예요 선언한다고하자 그래서 선언하자 먼저 내가 여기에 선언했다고 말하게 했어 그래서 여기에 선언 할 필요가 없어요

구체적으로 할 수 있습니다 물론 이죠,하지만 여기서 제가 선언 할 수는 있습니다 그것은 F이다 내가 0과 같으면 나는 초기화하고있다 너는 그것을 선언하고있다

괜찮아 여기서 일어나는 일은 우선 제가 평등하다는 것입니다 변수를 정의하려면 0으로 설정하십시오 나는 당신과 그것을 2-0으로 초기화하고있다 일단 초기화하면 0으로 설정하면이 명령문을 한 번 실행합니다

좋아, 그래서이 진술을 실행할거야 그 후에는 갈 것입니다 이 조건에 나는 5보다 작다 0은 5보다 작다 뭐가 진실이지

그래서이 문장을 실행할 것입니다 괜찮아 지금이 실행 된 후 이 세 번째 선언문을 실행하려고합니다 나는 플러스 플러스입니다 괜찮아

그래서 저는 하나의 가치가 될 것입니다 그리고 똑같은 일이 다시 일어날 것입니다 그리고 다시 한 번 더 설명해 드리겠습니다 먼저 내가 너를 초기화하고있어 첫 번째 명령문을 실행할 때, 이 코드 블록은 한번만 실행됩니다

이것 이후에 나는이 조건을 망가 뜨린다 나는 5보다 작다 조건이 참이고 조건이 참인 경우에만 이 문장은 실행될 것이다 이제이 명령문이 실행 된 후이 세 번째 명령문이 실행됩니다 여기는 처형 될거야

괜찮아 나는 그것이 희망적이다 변경 사항을 저장하고 변경해 보겠습니다 여기 참조 좋아, 여기에도 변경 사항을 저장하십시오

그래, 네가 볼 수있어 그것은 5 번 표시하고 있습니다 좋습니다, 그래서 루프 작동 방법입니다 괜찮아 이제 Loop을 사용하여 많은 일을 할 수 있습니다

그러니 선생님이 처벌을받는다고합시다 네가 수업에서 너무 많이 말하기 때문에 그녀는 당신에게 글쓰기를 요청했습니다 50 번 미안해 루프를 사용하여 그렇게 할 수 있습니까? 글쎄, 당신은 확실히 lucre를 위해 그것을 사용할 수 있습니다

시도해보고 어떻게 작동하는지 봅시다 괜찮아 이제 우리는 똑같은 일을 할 것입니다 그렇다면 나는 50 개 미만의 나일론입니다 선생님이 친절하면, 그녀는 당신에게 50 번을 쓸 것을 요청할 것입니다

그렇지 않으면 100 배 이상입니다 이제 코드 블록 내에 있습니다 이 메시지를 기록해 봅시다 좋아, 그래서 우리가 먼저 미안해 그리고 스마일을 넣자

좋아, 그래서 여기서 실수를 했어 괜찮아 이것이 작동하는 방식입니다 이 코드를 저장하자 이것에 대해 설명해 보겠습니다

괜찮아 이제 브라우저를 확인해 보겠습니다 그래서 당신은 내가 여러 번 표시되어 미안하다는 것을 알 수 있습니다 그래서 사람들은 이것과 간단한 해킹입니다 우리는 for Loop를 완성합니다

이제 토론의 마지막 주제는 스위치 케이스입니다 따라서 switch 문을 사용하여 다른 조건에 따라 다른 행동 괜찮아 이제 switch 문이 어떻게 작동하는지 여기에서 알 수 있습니다 이것은 구문 다음에 표현식이 있습니다

케이스가 거의 없다 한 사건 두 사건 세 및 기본값 등등 좋아, 언제든지 하나는 코드 블록 하나가 비슷하게 실행될 사실이다 코드 블록 3을 맛보면 실행됩니다 자, 어떻게 작동합니까? 지금? 표현식이 어떻게 될까요? 이 switch 문 내에서 하나가 실행됩니다

좋아요, 그 후에 표현의 가치가 비교됩니다 E의 가치와 함께 따라서 이것이 사례의 가치입니다 이 표현은 사례의 가치와 비교됩니다

따라서 일치하는 것이 있으면이 블록이 실행됩니다 그래서 기본적으로 표현식의 값이 비교됩니다 그 사건의 가치와 따라서 일치하는 것이 있으면 관련 블록 실행됩니다 따라서이 표현식의 값 이 경우의 값은이 코드 블록과 동일합니다 실행됩니다

좋아요, 이것을 예로 들어 봅시다 이제 스위치라는 새 파일을 만듭니다 괜찮아 코드를 타이핑하겠습니다 그럼 내가하는 말을 이해할거야? 괜찮아

좋습니다 긴 코드는 매우 간단합니다 이제 내가 여기서 한 것은 내가 정의한 것입니다 게임이라는 변수 그 변수의 가치는 축구입니다 괜찮아

이제이 변수를 switch 문에 전달합니다 기본적으로 게임의 가치는 축구입니다 이제 값 이 표현의 어떤 것이 든 어떤 경우와 일치한다 그 블록은 여기에서 실행될 것입니다 게임은 축구입니다

이제는 축구를 찾아야합니다 여기 축구가 있습니다 그래서 기본적으로 이것은 처형 될 것입니다 괜찮아 이제 코드를 저장하고 실행 해 봅시다

내가 무슨 말하는지 이해할거야 그래서 여기를 참조로 변경해야합니다 로그를 확인해 봅시다 그것을보십시오 인쇄하십시오 나는 축구를 좋아한다

그렇다면 왜 이렇게 했는가? 이 식의 값은이 경우와 일치합니다 일치 했으니 까 이 경우에 해당 문장이 실행되었습니다 괜찮아 이제 값을 foosball로 변경하면, 저장하면 어떻게 될지 봅시다

그것은 내가 지금 다른 게임을 좋아한다고 말한다 이것은 기본 문장이었습니다 이제 기본 문은 언제든지 실행됩니다 이 표현은 어떤 경우와도 일치하지 않습니다 좋아, 내가 여기 어디서나 주먹 주먹이 아니기 때문이야

기본 명령문을 실행합니다 이것이 switch 문이 작동하는 방법입니다 안녕 모두 이것은 오늘 세션에서 에드 Rekha에서 호수입니다 jQuery에 대해 논의 할 것입니다

가장 인기있는 자바 스크립트 라이브러리를 가장 많이 사용합니다 더 이상 Ado가 없으므로 시작하겠습니다 그래서 우선, 오늘 의제를 통해 당신을 달려들 게하십시오 jQuery와 함께 시작하기 전에, 우리는 토론 할 것입니다 그 후 Javascript가 무엇입니까? 왜 사용해야하는지 알게 될 것입니다

그리고 jQuery는 다음에 무엇입니까? 우리는 jQuery를 설치하는 방법을 보게 될 것이다 간신히 우리는 Dom에 대해 토론 할 것이다 문서 객체 모델을 나타냅니다 및 jQuery 선택기, jQuery 메서드에 대해 살펴 보겠습니다 텍스트 HTML CSS 속성 다음에 이전과 같은 메소드가 있습니다

및 기타 여러 가지 일반적으로 사용되는 방법 좋아, 그럼 우리는 계속 나아갈거야 여기에 jQuery 이벤트가 있습니다 클릭 이벤트 사용 방법 on 이벤트 및 keypress 이벤트를 jQuery 효과로 이동합니다 수백 가지 jQuery 효과가 있습니다

우리는 가장 일반적으로 사용되는 효과 숨기기 / 보여주기 토글 슬라이드를 아래로 내리기 등 마지막으로 jQuery UI 또는 사용자 인터페이스를 살펴 봅니다 우리는 drappable draggable에 대해 토론 할 것입니다 날짜 선택기 UI 괜찮아 그래서 너희 모두, 나는 희망한다 너는 이제 의제로 분명하다

내가 계속 전진하기 전에 첫 번째 주제에 대해 말씀 드리고 싶습니다 나는 Visual Studio 코드를 사용하고있다 기본적으로 코드 스 니펫을 실행하는 코드 편집기입니다 이 세션에서 설명 할 내용들입니다 Visual Studio 코드가 없으면 모두 진행할 수 있습니다

다운로드하거나 다른 편집기를 사용하십시오 설명에 링크를 남겨 둡니다 당신은 모두 전에 Visual Studio 코드를 다운로드 할 수 있습니다 세션부터 시작하십시오 Visual Studio 코드가 어떻게 보이는지 보여 드리겠습니다

그래서 나는 지금이 편집장을 열 예정이다 이것은 매우 간단한 편집기이며, 내 생각에 가장 좋아하는 에디터는 숭고한 텍스트를 사용할 수 있다는 것입니다 또는 당신이 편한 다른 편집기 괜찮아 이것이 지금의 모습입니다

내가 한 것은 이미 jQuery라는 폴더를 복사 한 것입니다 데스크톱에 폴더를 만드는 것뿐입니다 여기로 드래그하여 여기에 붙여 넣으십시오 괜찮아 그래서 Bob은 이미 폴더를 만들었습니다

폴더를 만드는 것이 좋습니다 모든 코드 스 니펫을 포함합니다 좋아, Visual Studio 코드를 다운로드 한 경우 반드시 확인해야합니다 라이브 서버라는 확장 프로그램을 설치했는지 확인하십시오 좋아요, 그래서 이미이 라이브 서버를 설치했습니다

이제 이것이 기본적으로 웹 페이지를 호스팅합니다 그래서 우리가 무엇을 입력하든 또는 우리가 여기있는 코드는 무엇이든 에서이 생명을 사용하여 호스팅 얻을 따라서 라이브 서버를 순서대로 설치하십시오 귀하의 웹 페이지 또는 귀하가 만든 모든 것을 호스팅 할 수 있습니다 좋아요

더 이상 Ado없이 Visual Studio 코드에 대해 첫 번째 주제부터 시작하겠습니다 이제 Javascript는 무엇입니까? 간단한 단어로 자바 스크립트는 웹의 보편적 인 언어입니다 모든 휴대 전화와 브라우저가 이해하는 모든 PC 이제 자바 스크립트는 주로 웹 페이지를 만드는 데 사용됩니다 또는 응용 프로그램이 더 생생하고 대화식으로 보입니다

따라서 항상 멋진 웹 페이지를 볼 때마다 그래픽에서 동작의 JavaScript를 사용하여 디자인했기 때문입니다 지금 자바 스크립트의 또 다른 중요한 특징은 그것이 해석 된 언어라는 것 C ++과 같은 고급 언어와는 달리 Java의 경우이 고급 언어에는 이제 컴파일러가 필요합니다 JavaScript에 관해서는, 당신은 컴파일러가 필요 없다

자바 스크립트가 웹에서 실행되기 때문에 대부분의 웹 브라우저 구글 크롬 사파리 인터넷 익스플로러 모질라처럼 Firefox에는 이미 Google의 스크립트 엔진이 임베드되어 있습니다 그 (것)들에서 따로 따로 JavaScript는 주로 클라이언트 측 스크립팅 언어입니다 그래서 너희들, 나는 희망한다 Javascript가 무엇인지 명확하게 밝혀야합니다 자바 스크립트에 대한 간단한 아이디어가 있기를 바랍니다

이제 JavaScript에 대해 더 자세히 알고 싶다면, 설명에 링크를 남겨 두겠습니다 자바 스크립트에서 콘텐츠를 확인할 수 있습니다 그래서 당신은 그것에 대해 더 많이 배울 수 있습니다 괜찮아 이제 jQuery를 사용하는 이유는 무엇입니까? 우리 모두는 수백 명이 있다는 것을 압니다

JavaScript 프레임 워크와 라이브러리는 거기 밖에 있습니다 하지만 jQuery를 잘 사용해야하는 이유는 무엇입니까? jQuery를 사용하면 매우 쉽게 조작 할 수 있습니다 이제 Dom Dom은 기본적으로 문서 개체 모델을 대표합니다 이름에 겁 먹지 마라 나는 그것이 들리는 것을 안다

매우 복잡한 개념 인 것처럼 아주 쉽습니다 좋아요, 더 슬라이드에서 돔을 설명 할게요 그러니 계속 지켜봐주십시오 이제 Dom은 기본적으로 나무 구조와 같습니다 머리의 30ml 성분

이제 웹 페이지 대화 형 웹 개발자가 Dom을 조작 jQuery를 사용하면 매우 쉽게 작업 할 수 있습니다 그 점을 제외하고는 그것의 공헌자들 다른 자바 스크립트 라이브러리보다 다양하고 크다 그것은 상세하고 포괄적 인 문서를 가지고 있으며, 매일 더 좋아집니다 이제 또 다른 보너스 포인트는 jQuery에는 수천 개의 플러그인이 무료로 제공됩니다 프로젝트에 쉽게 추가 할 수 있습니다

따라서 이러한 플러그인은 사용자 경험을 향상시켜 가치를 높입니다 그런 예가 기술의 시대입니다 응답 성이 뛰어난 리치 사이트를 개발합니다 jQuery를 계속 사용하면 크로스 브라우저를 지원할 수 있습니다 그래서 기본적으로 코드를 작성할 때마다 로컬 컴퓨터에서 브라우저에서 실행하고 싶습니다

Google 크롬 Safari와 같은 모든 기능을 제공합니다 걱정할 필요가 없다 코드가 다른 브라우저에서 실행되는지 여부 jQuery가 종속성 문제를 처리하기 때문입니다 이제 일반적으로 사용되는 거의 모든 브라우저를 지원하기 때문입니다 좋아, jQuery를 사용해야하는 이유가 무엇인지 명확히 알기를 바랍니다

자, 지금 무엇이 필요한지 살펴 보겠습니다 jQuery는 기본적으로 간결한 JavaScript 라이브러리입니다 와 함께 멋진 모토와 바로 덜 말하고 더 할 지금 매우 적절하다 전체 기능이 돌아 가기 때문에 각각의 코드 라인을 단순화 할 수 있습니다 Dom 조작 이벤트 처리를 단순화합니다

기본적으로 jQuery가 제공하는 모든 다른 것들 다양성을 포착하는 매우 효과적인 방법 사용자가 링크를 클릭하는 등의 이벤트 HTML 코드를 혼란스럽게 할 필요없이 jQuery가주의를 기울인다 사이에있는 모든 복잡한 것들을 또한 추가 기능은 다음과 같습니다 그 jQuery는 가벼운 라이브러리이다 압축 후 크기는 약 19 킬로바이트이다 따라서 라이브러리를로드하는 것이 더 빠릅니다

또한 최소한의 리소스를 차지합니다 이제 jQuery에는 수백 가지가 포함되어 있습니다 내장 된 애니메이션 효과들, 당신이 사용할 수있는 귀하의 웹 사이트에 더 많은 상호 작용을하십시오 좋아, 얘들 아, 여러분 모두가 물 jQuery로 깨끗 해지기를 바랍니다 자, 다음으로 넘어 가자

이제 jQuery를 설치하기 위해 설치가 인식되지 않습니다 이것은 jQuery를 다운로드하는 것입니다 이렇게하는 데는 두 가지 방법이있다 첫 번째는 지역의 일사량이며 로컬 컴퓨터에서 jQuery 라이브러리 복사하기 HTML 코드에 포함 시키십시오 다른 하나는 CD와 연결되어 있고 현재 시리아는 서있다

콘텐츠 전송 네트워크 용 따라서 jQuery Library를 HTML 코드에 포함시킬 수 있습니다 시리아에서 직접 그래서 기본적으로 이것은 jQuery 라이브러리에 대한 링크와 같습니다 괜찮아

자, 이걸 어떻게 할 수 있는지 보여 주겠다 알았어 따라서 jQuery의 공식 웹 사이트가 어떻게 보이는지 지금 여기처럼 당신은 다운로드를 계속할 수 있습니다 그래서 여기, 너는 다운로드를 볼 수있다 압축 된 생산 jQuery 3 점 3 점 하나

이것은 아마도 jQuery의 최신 버전 일 것입니다 그래서 당신이 할 수있는 것은 당신이 이것을 클릭하거나 이 전체 라이브러리를 복사 할 수 있습니다 이것은 기본적으로 jQuery 라이브러리이다 이 전체 라이브러리를 복사 할 수 있습니다 그리고 여기 파일에 붙여 넣을 수 있습니다

좋아, 그래서이 jQuery 폴더 안에 붙여 넣을거야 나는 그것을 창조했다 좋아, 파일에 붙여 넣을 수있어 jQuery의 이름을 짓겠습니다 코드 전체를 복사하면됩니다

이 파일에 붙여 넣으십시오 그러나 이것은 우리가 할 일이 아닙니다 왜냐하면 당신이이 모든 것을 복사하면 그것을 폴더에 붙여 넣으면, 실수로 쉽게 이동하고 편집 할 수 있습니다 우연히 무언가를 클릭한다고합시다 작은 줄이 삭제되거나 작은 요소가 삭제됩니다

그래서 전체 코어가 엉망이 될 것입니다 jQuery 라이브러리가 괜찮아 졌기 때문에 좋습니다 이제 첫 번째 방법을 대신 수행 할 것입니다 우리는 이제 CD와 방법에 대한 링크를 할 것입니다

색인 도트 HTML 파일을 만들었습니다 여기 링크를 복사하십시오 자, 이것은 기본적으로 jQuery 라이브러리입니다 버전은 3 점 3 점 1을 볼 수 있습니다 또한 UI jQuery UI를위한 또 다른 링크가 있습니다

좋아, 이 무결성과 교차 출처는 단지 그렇게합니다 아무도, 당신은이 도서관의 내용을 연주했습니다 좋아요, 그래서이 링크를 복사했습니다 웹 어딘가에서 나는 기억이 안 난다

하지만 내 설명 상자에이 링크를 붙여 넣으려고합니다 그래서 너희들이 가서 이것을 사용할 수있다 그렇지 않으면, 더 나은 링크를 찾으면 모두 사용할 수 있습니다 그뿐 아니라 괜찮아

이것은 기본적으로 제 HTML 파일입니다 그래서 여러분, 이제 기본 사항에 대해 분명히 논의 할 것입니다 및 CSS의 그것이이 세션의 범위에 속하지 않기 때문입니다 여러분 모두의 기본적인 이해가 있기를 바랍니다 모두 기본 이해가 없다면 HTML CSS와 JavaScript의 내가 전에 말했듯이, 설명 상자에 링크를 남겨 두겠습니다

모두가 가서 비디오를 확인한 다음 올 수 있습니다 이 동영상으로 돌아 가기 좋습니다 그래서 jQuery를 다운로드하는 방법입니다 설치와는 다릅니다

그것은 기본적으로 jQuery를 다운로드하고 있습니다 괜찮아 이제 문서 객체 모델을 살펴 보겠습니다 이제 문서 개체 모델은 트리 구조입니다 여기에 HTML의 다양한 요소가 있습니다

문서로 시작한다는 것을 알 수 있습니다 기본적으로이 문서는 기본적으로이 파일의 다른 모든 요소의 조상 이 HTML은 다시 모든 사람의 조상입니다 이 다른 요소들 괜찮아 이제 머리 본문 요소는 HTML 요소의 자식입니다

그래서 이것은 기본적으로 나무 구조와 같습니다 그래서 기본적으로 제목은 머리의 자손입니다 마찬가지로 H 1과 P 태그는 몸의 자식입니다 그래, 이제 그들은 자손들 뿐이야 이것은 단순한 나무 구조이다

이것은 문서 객체 모델입니다 복잡한 개념이 아닙니다 이것은 HTML 파일의 아주 간단한 구조입니다 이제 jQuery 선택기로 넘어 갑시다 지금

jQuery에서 배울 점은 선택자가 지금, 왜 우리는 선택자를 필요로합니까? HTML 요소를 조작한다 또는 Dom 요소가 모두 웹 개발자가해야 할 일 웹 페이지를보다 상호 작용하기 위해 또는 그 문제에 대한 웹 페이지를 만드는 것은 돔이 쉽게 조작된다는 것만 효과를 추가 할 때 Dom에 어떤 변화라도 줄 수 있습니다 귀하의 웹 그래서 우리는 선택기를 사용합니다 그래서 기본적으로 선택자들입니다

특정 HTML 요소를 선택한 다음 이 HTML 요소와 man에 다른 함수를 사용할 수 있습니다 당신은 그 요소를 연주했습니다 괜찮아 그래서 우리가 할 일은 예제를 살펴 보는 것입니다 코드를 입력하고 예제를 살펴 보겠습니다

너무 혼란스러워하지 마세요 좋아요, 그럼 제가 파일을 열어 드리겠습니다 그래서 body 태그를 열자 이제 body 태그 안에 있습니다 헤더가있을거야

나는 H1 꼬리표를 가질거야, 기본적으로 jQuery 튜토리얼을 말할 것입니다 자, 대기열은 항상 jQuery에서 끝납니다 그래서 우리는 헤더가 있습니다 jQuery 튜토리얼과 Ed Eureka가 간략하게 설명하겠습니다 괜찮아, 좀 더 재미있는 일을하기 위해서

정렬되지 않은 목록을 만들겠습니다 그 안에는 목록 태그에 몇 가지 요소가 있습니다 그러니 내가 좋아하는 개 목록을 올리겠다고합시다 나는 개가 올 때 거기 마음에 드는 것이다는 것을 알고있다 모든 개가 정말 귀엽기 때문입니다 그러나 세 가지 즐겨 찾기를 나열해야한다면, 나는 분명히이 3 가지와 함께 갈 것이다

괜 찮 아 요 골든 리트리버 꽤 고풍스러운 개가되면 나는 골든 리트리버를 정말로 좋아한다 지금 새 품종이 있더라도, 하지만 이건 정말 귀엽고 시베리안 허스키 인 것 같아 그래서 사람들은 그것을 재미 있고 목록에 넣을 수 있습니다 네가 원하는대로 좋아하는 과일 목록에 넣을 수있는 것처럼 아니면 좋아하는 색이 뭐니? 좋아, 그게 복서 해치 태그를 닫습니다

그래서이 파일을 저장하려고합니다 그리고 제가 할 일은 탐색기를 공개 할 것입니다 그래서 기본적으로 이것이 우리의 웹 페이지가 지금 보이는 방식입니다, 이전에 브라우저의 대부분을 언급 한 것처럼 Chrome Safari Internet Explorer와 같은 기능 자바 스크립트 엔진이 내장되어 있습니다 그래서 이것은 Chrome 브라우저입니다 너희 모두 지금 볼 수있어

내가 할 일은 마우스 오른쪽 버튼을 클릭하는 것입니다 페이지의 아무 곳이나 여기서 검열을 클릭하겠습니다 괜찮아 이제 자바 스크립트 엔진이 열립니다 이것은 기본적으로 파일입니다

잠시만 요 좋아, 작은 오류가 있었다 내가 링크 할 CSS 파일을 열었 기 때문입니다 좋아, 무시하는 사람들은 무시해 이제 제가 여기서 한 것은 JavaScript 엔진을 여는 것입니다

여기에 자바 스크립트 콘솔이 있습니다 그것은 자바 스크립트 연락처를 말합니다 이제 할 수있는 일은 Dom 요소를 조작 할 수 있다는 것입니다 이 콘솔을 통해 그래서 기본적으로 여기서 다른 명령을 실행할 수 있습니다

당신은 무언가를 입력 할 수 있으며, 이제는 그것을 실행할 수 있습니다 바닐라 자바 ​​스크립트처럼 우리는 물건을 선택하고 jQuery에서 조작해야합니다 이 달러 기호를 사용하여 원하는 것을 선택할 수 있습니다 괜찮아

그래서 이것은 달러 기호 또는 달러 함수입니다 지금 당신이 선택할 수있는 것들 정기적 인 자바 스크립트 document dot get element와 같은 함수가 있습니다 ID 쿼리 선택기로 모두 다음 요소가 있습니다 클래스 별 태그로 요소 가져 오기 수백 가지의 그러한 기능들, 그러나 jQuery에 관해서는 달러 함수 기본적으로 다른 모든 기능을 대체합니다

이제 예제를 살펴 보겠습니다 이 헤더 헤더를 선택한다고 가정 해 봅시다 1 이것은 하나의 태그를 헤지 했지, 그렇지? 그래서 내가 할 일은 다음과 같이 타이핑 할 것입니다 먼저 달러 기호 대괄호를 열고 따옴표 안에 넣을 것입니다

우리는 무엇이든 우리가 선택하고자하는 것을 입력 할 것입니다 괜찮아 그래서 제가 여기서하고있는 일은 선택기 기능을 남용하는 것입니다 따옴표와 언급 한 머리 안에 그래서 이것이하는 일은 기본적으로 선택합니다

나를위한 H1 태그 괜찮아 입력을 클릭하십시오 이제 내가 헤지 1을 클릭하면, 내 머리글 하나의 태그가 강조 표시됩니다 괜찮아

또한 태그의 크기를 보여 주며 기본적으로 작품을 선택하는 방법 지금 시체를 선택해 봅시다 이제 내가 볼 수있는 시체를 선택했습니다 그것은 몸 전체를 강조 표시한다

그리고 그것은 나에게 몸의 치수를 보여줍니다 좋아요, 그래서 이것은 선수가 지금 어떻게 작동하는지, 좀 더 재미있는 일을 만들어 봅시다 괜찮아 다시 Visual Studio 코드로 돌아가겠습니다 지금

여기서 내가 할 일은 첫 번째 목록 요소 내에 있습니다 앵커 태그를 추가하겠습니다 자, 앵커 태그를 무작위로 추가한다고 가정 해 봅시다 우리는 기본적으로 googlecom으로 보내고 Google에 전화하겠습니다

그래서 얘들 아 기본 HTML을 모두 이해하시기 바랍니다 왜냐하면 지금 HTML을 설명 할 것이기 때문입니다 매우 긴 비디오가 될 것입니다 내가 앉고 HTML을 어떻게 설명하는지

그래서 나는 너에게 모두 말했어 설명에 링크를 남기겠다 모두가 그 링크를 참조 할 수 있으며 모두 HTML을 이해할 수 있습니다 이제 파일을 저장합니다 나는 새로 고침 할거야

괜찮아 여기서 앵커 태그를 볼 수 있습니다 현재 Google입니다 이 앵커 태그를 선택하고 싶었습니다 괜찮아

이제 우리는 이전에 H1 태그를 선택하는 방법을 보았습니다 시체를 선택하는 법을 봤어 알았어 이 특정 앵커 태그를 선택하려면 어떻게해야합니까? 그래서 내가 할 수있는 것은 나는 우선 순서가없는 목록을 타이핑 할 것이다 앵커 태그에 대한 경로를 입력해야합니다

이제 앵커 태그를 지정합니다 제가 할 일은 제가 지정하려고하는 것입니다 앵커 태그가 목록에 있고 차례로이 목록은 정렬되지 않은 목록 내에 있습니다 좋아요, 기본적으로 경로 지정과 같습니다 이 앵커 태그에 지금 이 전체 목록에는 단 하나의 앵커 태그가 있기 때문입니다

이 앵커 태그 만 선택합니다 그것이 어떻게 끝 났는지 보자 따라서 UL li 및 e를 입력하면됩니다 그래서 이것은 당신의 정렬되지 않은 목록입니다 이것은 귀하의 목록 항목이며 이것은 바로 앵커 태그입니다

Enter를 클릭하십시오 그래서 내가 클릭하면 볼 수 있습니다 내 앵커 태그를 강조 표시합니다 그것은 또한 나에게 그것과 함께 치수를 준다 여러분, 이것이 작동하는 방식입니다

지금 좀 더 재미있게 만들어 보겠습니다 지금 이 코드를 먼저 입력 해주세요 그 다음에 내가하는 일을 설명해 드리겠습니다

그래서 내가 먼저 할 일은, 머리글을 선택하겠습니까? 알았어, H1 꼬리표, 그런 다음이 방법을 적용 할 것입니다 먼저 타자를 치자 그러면 너는 모두 이해할 수있다 내가 말하는거야 그래서 내가 여기서하고있는 것은 H1 태그를 선택하는 것입니다

그 후에이 달러 함수를이 H1 태그에 사용합니다 나는이 메소드에 CSS 메소드를 적용 할 것이다 이 메서드 내에서 매개 변수를 전달했습니다 그 매개 변수에 대한 값 따라서 매개 변수는 color이거나 속성은 color입니다

속성의 값은 빨간색입니다 그래서이 라인이 할 일은 변화 할 것입니다 읽을 H1 태그의 색상 괜찮아 그게 효과가 있는지 봅시다

좋아, 너는이 차례를 레드에게 보았다 그래서 여러분, 이것은 셀렉터를 가지고 게임을하는 방법입니다 돔을 조작하십시오 괜찮아 그래서 이것은 내가 지금 돔을 조작한다고 할 때 의미하는 바였습니다

조금 더 재미있게 만들어 봅시다 그리고 배경색도 변경한다고 가정 해 봅시다 좋아, 우리는 배경색을 검은 색으로 바꾼다 여기에서 결과를 볼 수 있습니다 그래서 기본적으로 선택자는 Dom 요소를 선택하는 것입니다

그런 다음 원하는 방식으로 조작하십시오 괜찮아 이것이 jQuery 이해의 가장 기본적인 개념입니다 선택자는 매우 중요하다 선택기를 사용할 것이기 때문에 jQuery의 모든 라인에서

그래서 우리는 선택자들과 함께 끝납니다 이제 다음 주제를 살펴 보겠습니다 우리는 몇 가지 jQuery 메서드에 대해 논의 할 것이다 이제 방법 중 하나 이미 논의한 CSS 방법입니다 CSS를 사용하여 스타일을 지정하는 방법을 모두 보여 줬습니다

특정 헤더 좋아,하지만 나중에 다시 돌아올거야 그것과 비슷합니다 다른 jQuery 메서드가 있습니다 문제가 발생하면 이전 방법과 같습니다

이제, before 메서드는 무엇을할까요? 이제이 메서드는 insert를합니다 선택된 요소 앞의 지정된 내용 자, 이제 이것이 선택된 요소입니다 선택한 요소 앞에 이 콘텐츠를 추가 할 예정입니다 따라서 원하는 콘텐츠를 추가하십시오

특정 요소 앞에 당신은이 괄호 안의 내용을 언급했습니다 괜찮아 이제 살펴 보겠습니다 거의 브라우저를 열어 보겠습니다

괜찮아 그래서 제가 할 일은 제가 선택하려고하는 것입니다 순서가없는 나의 목록과 순서가없는 나의 목록 앞에 순서가없는 목록 앞에 뭔가를 추가하고 싶습니다 그래서 내가 어떻게 할 수 있니? 그저 내가하고 싶은 말만 할 것입니다

따라서 H2 태그 내에서, 나는 그 같은 나의 가장 좋아하는 개를 원한다 그리고 해치를 닫아 태그하자 그래서 제가 여기서 한 것은 기본적으로 선택했습니다 나의 정렬되지 않은 목록을 먼저 그리고 정렬되지 않은 목록에 나는이 기능을 수행 할 것이다

이제는 내가 입력 한 내용이 추가됩니다 내 정렬되지 않은 목록 앞의 인용 부호 좋아, 어떻게 작동하는지 보자 그래서 여기 당신은 나의 정렬되지 않은 목록 바로 앞에서 그것을 볼 수 있습니다 나는 이것에 지금 좋아하는 나의 아주 좋아하는 개를 가지고있다

after 메소드 좋아요, 슬라이드로 돌아가 봅시다 이제 jQuery 메소드가 지정된 내용을 삽입 한 후 선택한 요소 뒤에 괜찮아 그래서 이것은 선택된 요소들과 선택된 요소

이 콘텐츠를 입력 할 것입니다 좋아,이 작품들이 어떻게 보이는지 보자 같은 예제에서 그래서 내가 할 일은 나는 이것을 괜찮은 것으로 바꿀거야 입력 한 내용을 말해 보겠습니다

귀엽고 괜찮습니까 너 봤어 그것은 내가 좋아하는 개가 어쩌면 귀엽다는 말이다 좋습니다 그래서 이전에 함수가 작동 한 후 따라서 이것들은 이전의 방법에 대한 단순한 예일뿐입니다

그리고 일 후에 수프 다음으로 우리는 text 함수를 사용하여 텍스트를 설정합니다 또는 선택한 요소의 텍스트 내용을 반환합니다 여기에 선택된 요소가 있다고 가정 해 봅시다

그리고이 텍스트 메서드를 전달하면 선택한 요소에서 텍스트를 반환 할 것입니다 이 요소의 텍스트를 설정하거나 바꿀 수도 있습니다 텍스트 함수를 사용하여 특정 요소의 좋아, 너무 혼란스러워하지 말자 나는 브라우저를 열어 이것이 어떻게 이루어 졌는지 보여줄 것이다 그냥 내 페이지를 새로 고칩니다 좋아요, 예를 봅시다

그래서 저는 셀렉터를 사용할 것입니다 요소 목록을 선택하겠습니다 순서가없는 목록 내에서 그래서 거짓말을 선택했습니다 여기서 텍스트 함수를 사용할 것입니다

자, 이것이 무엇을 반환하는지 봅시다 괜찮아 그래서 여기를 보면 돌아 왔음을 알 수 있습니다 골든 리트리버 구글 시베리안 허스키와 복서 좋아, 먼저 한 가지 해보 죠

이 앵커 태그는 의미가 없기 때문에 제거하십시오 좋아, 그럼 난 내 파일을 저장하고 열어 보자 브라우저를 새로 고침하고이 명령을 실행 해 봅시다 괜찮아 그래서 당신은 그것이 돌아온 것을 보았습니다

골든 리트리버 시베리안 허스키와 권투 선수입니다 괜찮아 비슷하게 나는 단지 첫 번째 요소를 반환하고자한다고 가정 해 보겠습니다 내 목록에 다음과 같은 것을 할 것입니다

그래서 제가 여기서 한 것은 목록을 선택했습니다 그리고 내가 먼저 언급했다 좋아, 그래서 기본적으로 첫 번째 요소를 언급했다 목록의 지금 이것은 골든 리트리버를 나에게 돌려 줬다 이것은 정확히 내 목록의 첫 번째 요소입니다

그 골든 리트리버를 볼 수 있습니다 자, 이제 일부 내용을 대체하고 싶다고 가정 해 봅시다 좋아요, 추가로 바꾸고 싶다고합시다 에리카와 다른 것 괜찮아

그냥 새로 고침 해줘 괜찮아 그럼 내가 어떻게 할 건데? 먼저 항상 선택기로 시작하십시오 그래서 내 단락 태그 인 P를 선택합니다 이제 단 하나의 문단 만 있기 때문에 이 전체 HTML 파일 내에서, 이 단락인지 알았어

알았어 여기에 다른 단락이 있다고 가정 해 봅시다 그렇다면 단락을 언급하면됩니다 먼저 행동을 취하십시오 괜찮아

그래, 다시 돌아와 보자 나는이 재미있는 튜토리얼을 환영한다는 텍스트를 말할 것이다 제가 여기서 한 것은 단락 태그를 선택했습니다 그런 다음이 태그에 도트 텍스트 기능을 적용했습니다 지금

이것이 무엇을하는지 봅시다 좋아요, enter를 클릭합시다 여기서 일어난 일은 에디 레카 (Eddie Rekha)의 것이 었습니다 이 재미있는 jQuery 튜토리얼을 환영합니다 그래서 이것은 텍스트 함수를 사용하여 또는 일부 의도를 반환 할 수 있습니다

괜찮아 여러분, 지금이 자리에서 여러분 모두가 분명하기를 바랍니다 우리의 다음 기능을 살펴 보겠습니다 괜찮아 다음은 DML 헤드입니다

이제 HTML 메소드는 텍스트와 매우 유사합니다 설정에 사용됩니다 선택된 요소의 Hedge tml 내용을 반환합니다 자,이 둘의 차이점을 살펴 보겠습니다 처음 보자

HTML을 사용하여 콘텐츠를 반환하는 방법의 예 특정 요소의 마지막으로 HTML을 사용한다고 가정 해 봅시다 제가 여기서 한 것은 목록을 선택했습니다 선택된 목록에서 마지막 요소 나는 그것에 tml 태그를 달리고있다 그래서 이것은 볼 수있는 권투 선수를 반환합니다 그것은 권투 선수를 반환합니다

지금 HTML을 사용하여 콘텐츠를 설정하는 방법을 살펴 보겠습니다 이제 우리가 할 일은 우리는이 마지막 요소를 여기에서 바꿀 것입니다 와 함께 권투 선수는 그것을 다른 것으로 바꿀 것입니다 그래서 사람들이 코드를 입력 할 때 저를 참아줍니다

그래서 저는 독일인 목자와 복서를 대체 할 것입니다 지금 여기에 enter를 클릭하십시오 독일 셰퍼드에게 바뀐 것을 보았습니다 괜찮아

따라서 HTML을 사용하여 콘텐츠를 설정하는 방법입니다 자, HTML과 텍스트의 차이점은 무엇입니까? 괜찮아 그 차이점을 보여 드리죠 정렬되지 않은 전체 목록을 선택한다고 가정 해 보겠습니다 텍스트를 사용하여 값을 반환하고 싶습니다

텍스트를 사용하여 값을 반환 할 때 당신은 내가 HTML을 사용하여 똑같은 일을 할 때 이것을 얻는다는 것을 알지만, 무슨 일이 일어나는지 봅시다 그래서 정렬되지 않은 목록을 선택합니다 지금 여기에 HTML 함수를 실행하고 있습니다 당신은 HTML 태그를 나에게 돌려주는 것을 보았다

텍스트 내용과 함께 here reduce 텍스트 내용을 반환합니다 하지만 여기서, HTML 컨텐트도 리턴 할 것입니다 좋아 그래서 너는 볼 수있어 동맹국과 동맹국은 여기에 없다

That 's It 두 텍스트 콘텐츠 중 하나를 반환합니다 이렇게하면 HTML 컨텐트도 반환됩니다 좋아, 얘들 아, 나는 HTML의 차이점을 가지고 모두가 분명하기를 희망한다 및 텍스트 이동 다음 함수는 CSS 함수입니다 자, 이미이 CSS 함수의 예제를 보여 줬습니다

그러나 정확히 무엇 이 함수는 특정 요소를 스타일링합니다 따라서 CSS를 사용하여 선택한 요소를 스타일링합니다 따라서 페이지에 색상이나 팝이 표시되면 또는 웹 페이지에 디자인 위생병 준비 디자인의 어떤 종류, 그것은 CSS가 사용 되었기 때문입니다 괜찮아 이제 jQuery CSS 메소드는 설정 또는 리턴합니다

선택된 요소에 대한 하나 이상의 스타일 속성 예제를 빨리 살펴 보겠습니다 그래서 제가 할 일은이 정렬되지 않은 목록을 정리하는 것입니다 제가 여기서하고있는 것은 스크립트 태그를 만드는 것입니다 이제는 스크립트 태그가 항상 순서대로 사용됩니다

일부 자바 스크립트 실행 또는 일부 jQuery 스크립트가 여기에 있으므로, let 키워드를 사용하여 객체를 만들겠습니다 그래서 왼쪽 키보드를 사용하여 객체를 만듭니다 객체의 이름은 디자인이고 정의하겠습니다 이 객체의 일부 속성 색상이 파란색이라고 가정 해 보겠습니다 배경과 같은 또 다른 속성을 정의합시다

배경을 Green으로 설정합시다 다른 속성을 정의합시다 국경이다 우리는 3 픽셀을 검정색이라고 가정하자 제가 여기서 한 것은 제가 물건을 만들었습니다

나는 design이라는 객체를 만들었고 나는 이 개체는 세 가지 속성 색 배경과 테두리 괜찮아 이제이 세 가지 속성은 특정 값을 갖습니다 그래서 색상 값은 파란색입니다 마찬가지로 배경색은 녹색입니다

그리고 국경은 지금 너무 많습니다 이 파일을 저장합시다 나는 왜 내가이 일을하는지 궁금해하고 혼란 스럽다 하지만 잠시만 기다려주세요 그래서 내가 한 것은 지금이 파일을 저장하는 것입니다

우리 터미널을 열어 보자 헤더 1 태그를 선택한다고 가정 해 보겠습니다 죄송합니다 select 함수를 추가하는 것을 잊었습니다 헤더 1 개를 선택했습니다

그리고 이것에 우리는 CSS 기능을 적용 할 것입니다 그리고 우리가 할 일은 우리가 논쟁을 할 것입니다 이 CSS 기능 이제 우리가 통과 할 것은 객체를 전달할 것입니다 방금 정의한 그래서 우리는 design이라는 객체를 만들었습니다

세 가지 다른 속성 집합이 있음 다른 값을 가졌습니다 그래서 우리는이 값들을 적용 할 것입니다 이 H1 태그에 대한 속성 Enter를 클릭하여 어떤 일이 발생하는지 봅시다 너 봤어 배경색은 글꼴 색과 테두리 이 일이 지금에 추가되었습니다

우리는 물체를 만들었 기 때문에 색 배경 색 및 테두리 그래서 우리는 방금 이러한 모든 속성을 적용했습니다 헤지 펀드에 좋아요, 그렇게 간단합니다 CSS 기능이 작동하는 방식입니다

기본적으로 웹 페이지의 스타일을 지정하기위한 것입니다 괜찮아 따라서 귀하의 웹 페이지는 CSS의 도움으로 더 예쁘게 보입니다 이제 다음 주제를 살펴 보겠습니다 이것은 속성입니다

괜찮아 이제 속성 메소드를 사용하여 또는 선택된 요소의 속성 값을 리턴하십시오 그래서 헤지 요소를 선택한다고 해봅시다 램 엘리먼트는 수백 가지의 속성을 가질 수 있습니다 특정 속성을 선택하려고합니다

그 HTML 요소의 속성 함수를 사용하여 리턴 할 수 있습니다 당신은 또한 사용할 수 있습니다 이 속성은 요소에 속성을 설정합니다 당신이 선택한 여기에 대한 정의와 너무 혼동하지 마십시오 이것을 실행하고 어떻게 작동하는지 살펴 보겠습니다 괜찮아

이제 Visual Studio 코드로 돌아가 보겠습니다 좀 더 재미있게하기 위해서 이 모든 것을 정리해 드리겠습니다 그래서 내가 할 일은 사진을 보여줄 것입니다 3 마리의 강아지가 있고 우리는 그 3 마리의 강아지에 대해 연구 할 것입니다

좋아, 우린 그 이미지들을 다룰거야 우리는 그 이미지에 경계를 추가하려고 시도 할 것입니다 괜찮아 좋구나 그래서 우선 내가 한 일은 Puppy라는 폴더를 만들었습니다

나는 골든 리트리버의 세 귀여운 그림을 권투 선수가 어디에 허스키 괜찮아 그래서 내가 할 일은이 폴더를 드래그 할 것입니다 여기 jQuery 폴더 안에 붙여 넣으려고합니다 자, 그럼 여기에 강아지 폴더를 추가 한 것을 볼 수 있습니다

세 가지 다른 이미지가 있습니다 이제 우리가 할 일은 우리가 이 이미지들은 이제 그것을하기 위해서입니다 나는 div를 만들고있다 나는이 수업을 배정하고있다 먼저 이름을 지어 보겠습니다

이제 저는이 세 가지 이미지를 추가 할 것입니다 그래서 저는 IMG 태그를 사용할 것입니다 나는 근원을 세울 것이다 폴더의 이름은 강아지입니다 / 골디가 도트 JPG라고 해 봅시다

그것은 JPG 이미지입니다 그래서 붙여 넣기를 복사하여 붙여 넣으십시오 다른 두 이미지도 추가하겠습니다 그래서 다른 이미지는 허스키입니다 그리고 복서도 있습니다

지금 이 첫 번째 저장하겠습니다 그리고 내가 한 일은 이걸 루트 폴더로 옮겼습니다 그럼 그냥 저장하고 새로 고침 해 봅시다 좋아, 그래서, 나는 문제에 직면했다

어떤 이유로 든로드되지 않았습니다 그래서 jQuery 폴더를 열면됩니다 내 컴퓨터에서 강아지 폴더를 복사했습니다 괜찮아 이것은 기본적으로 색인 도트 HTML 파일입니다

내가 생각하는 곳 그리고이 안에 강아지 폴더도 복사했습니다 3 개의 이미지가 있습니다 괜찮아 이제이게 효과가있다 여기 jQuery 폴더에서 볼 수 있습니다

강아지 폴더가 있고 HTML 파일이 있습니다 자, 이제 이것을 저장합시다 이것은 확실히 실행되어야합니다 탐색기를 공개합시다 이제 너는 너 보자

우리는 귀여운 강아지 3 마리를 얻는다 그들이 그것을 좀 더 예쁘게 보이게 만드는 것이 얼마나 귀엽다 저는이 이미지들을 수평으로 정렬 할 것입니다 좋아요, 그래서 분명히 보입니다 그래서 그들을 왼쪽으로 정렬하려면 또한 나는 그들과 차원을 설정하려고합니다

그래서해야할 일은 다른 파일을 여는 것입니다 내가 전에 말했던 것처럼 그 CSS는 스타일링 목적으로 사용됩니다 이제 CSS 파일을 열어 보겠습니다 괜찮아 이것이 CSS 파일이라는 상징입니다

그래서 제가 할 일은 제가 선택하려고하는 것입니다 클래스 퍼퍼 그리고이 수업 내에서 저는 float : left라고 말할 것입니다 그래서 내가 한 것은 보라색 클래스를 선택했다는 것입니다 HTML 파일 내에서 정의됩니다 그래서 여기 당신은 이혼 서류의 종류가 이 div 전체를 선택하는 것에서부터 그리고 나는 그것을 왼쪽 의미로 떠 다니고있다

나는 그것을 왼쪽으로 정렬 할 것입니다 또한 이미지의 크기를 설정해 보겠습니다 그래서 저는 여기에 이미지 태그를 언급 할 것입니다 너비를 정할거야 300 픽셀과 높이로 설정해 보겠습니다

알았어, 250 번하자 그럼이 파일을 저장합시다 이 CSS 파일을 HTML 파일에 링크해야합니다 그래서 사람들은 그렇게하는 것을 잊지 마십시오 많은 사람들이 단계에서 놓친다

그런 다음 왜 코드가 작동하지 않는지 궁금해합니다 좋아, 그럼 링크 만 추가 할거야 여기 내 CSS의 그래서 그것은 스타일 시트입니다 CSS 스탠드를 모르는 사람들을 위해 계단식 스타일 시트의 경우에도 유형을 쓰려고합니다

유형을 언급하는 것이 좋습니다 그래서 그것은 text / CSS입니다 그리고 경로를 언급합시다 내 파일의 이름이 다음이나 CSS에 있습니까? 맞습니까? 그래서 그것에 관한 것입니다 지금

이 파일을 저장하고 열어 보겠습니다 괜찮아 이제 너희들은 볼 수있다 그들은 왼쪽으로 아름답게 정렬되어있다 그리고 그들은 모두 매우 사랑스럽게 보입니다

그래서 사람들은 산만 해지지 않습니다 여기에 우리의 임무에 집중하겠습니다 자, 내가 할 일은 내가 열려고하는거야 여기에 콘솔 올려 이 속성 함수를이 이미지에 적용 해 봅시다

지금 가장 먼저, 이 이미지들을 선택합시다 select a 함수를 사용하려고합니다 그리고 견적 내에서 나는 g 속성 특성 함수라고 쓰려고합니다

제가 여기서 한 것은 모든 것을 선택했습니다 이 이미지들 중 속성 함수를 적용하고 있습니다 다음과 같은 속성을 가지고 있습니다 변경하려는 속성은 테두리입니다 국경을 추가하는 것에서 나는이 값에 국경을 설정하고있다

그래서 그것은 5 개의 단색 검은 색 테두리입니다 괜찮아 그래서 여러분, 이것은 속성이 현재 어떻게 작동하는지입니다 Enter를 클릭하십시오 무슨 일이 일어나는지 봅시다

그래서 네, 당신은 분명히 그것을 볼 수 있습니다 나는 검은 경계를 1 초 추가했다 내가 더 잘 보이도록하겠습니다 그래, 훨씬 나아 보인다 그래서 내가 한 것은 국경을 추가 한 것입니다

검은 색 테두리 5 개와 단색 테두리 괜찮아 그래서 얘들 아 어떻게 속성 함수 상자가 지금, 우리의 다음 방법으로 돌아가겠습니다 좋아요, 그럼 우리의 다음 방법은 Value method입니다

이것은 기본적으로 설정하는 데 사용됩니다 또는 선택한 요소의 값을 반환합니다 괜찮아 그래서 여기에서 값을 반환 할 것입니다 속성을 반환하지 않거나 아는 경우, 너는 단지 지정한다

속성의 값이며이 값을 반환 할 것입니다 그래서 우리는 여기서 다른 것을 시도 할 것입니다 따라서이 Value 메소드에서 코드를 실행하려면, 클릭 기능이 무엇인지 알려줘야합니다 괜찮아 클릭 이벤트 란 무엇입니까? 이제 클릭 수를 살펴 보겠습니다

자, 여기 jQuery 이벤트 목록이 있습니다 그리고 첫 번째는 click 이벤트입니다 이제이 이벤트가 실행됩니다 사용자가 HTML 요소를 클릭하면 자, 기본적으로 다음을 사용하여 요소를 선택합니다 달러 함수

그런 다음이 요소를 클릭하면 간단히 말해서 이게 뭐지? 나는 지금 click 함수를 사용할 것이기 때문에, 파일을 열어 봅시다 그래서 우리는 여기서 다른 것을 입력 할 것입니다 괜찮아 그래서 내가 할 일은 나는이 모든 것을 정리할 것입니다 div 요소를 지우겠습니다

저는 스크립트를 추가 할 것입니다 이제 여기에 script 태그가 jQuery를 추가하는 데 사용됩니다 또는 자바 스크립트 코드 이제 여기에 내 스크립트 태그를여십시오 나는 함수를 타이핑 할 것이다

괜찮아 내가하고있는 일은 내가 선택하는거야 전체 문서 점 준비 완료 그런 다음 여기에 기능이 있습니다 알았어 움직이기 전에 너희들에게 말해 줄께

이 문서가 준비되지 않은 기능이 지금하는 일 이 기능을 사용하는 것이 좋습니다 너의 모든 파일에서, 그러나 나는 그것을 이전에 언급하는 것을 잊었다 이제는 아주 좋은 연습입니다 안전하게 조작 할 수는 없습니다 전체 문서가 준비 될 때까지 그래서 기본적으로 jQuery는 상태를 보호합니다

지금 준비 상태, 포함하는 모든 코드 이 문서 안의 준비되지 않은 기능 그래서 내가 여기에 타이핑 할 코드는 기본적으로 이 줄에서는 페이지가 준비되면 실행됩니다 괜찮아 그래서 기본적으로 코드 당신이이 기능에 포함시키는 것 그럼 내가 뭔가를 입력한다고 가정 해 봅시다

여기 킴이 내가 입력 한 코드가 뭐든간에 이 코드는 모두 내게 실행됩니다 이 모든 것이 실행 된 후에 따라서 모든 jQuery 라이브러리를로드 한 후에 만 및 프레임 워크 만 그 후이 문서에 언급 된 내용 또는 준비 기능이 실행됩니다 왜냐하면 말하기 때문에 여기서 jQuery 함수를 실행하고 싶습니다 좋아요, 일부 jQuery 함수와 저는이 라인을 무시했습니다

문서 도트 기능이 없었습니다 이제 무슨 일이 일어 났는지 말하자 웬일인지이 도서관이 많이 가져 갔어 로드 시간 그리고이 jQuery 함수가로드 될 때까지 지금 이미 처형 당했다

분명히 그것은 오류를 반환 할 것입니다 그것은 말할 것이기 때문에 jQuery 라이브러리 나 그와 같은 것이 없다는 것 이 라이브러리가 완전히로드되지 않았기 때문입니다 좋습니다, 그래서 당신은 문서 준비 기능이 필요합니다 괜찮아 이제 모든 것이 분명해지기를 바랍니다

이것을 포함시키는 것이 좋습니다 물론 필수는 아니지만, 하지만 항상 문서 준비 기능을 갖는 것이 좋습니다 시작 자체 괜찮아 따라서 라이브러리를로드 한 후에는 제목 뒤에 이 문서에서는 항상 함수를 추가해야합니다

좋은 습관입니다 괜찮아 그래서 우리가 여기에 코드를 입력하기 전에, 버튼과 입력 유형을 만들려고합니다 자 이제 입력 유형 기본적으로 사용자 입력을위한 공간을 만듭니다 그래서 내 입력 유형은 텍스트가 될 것입니다

그래서 사람들 HTML CSS에 익숙한 사용자 내가 정확히하고있는 일 그래서이 입력에 ID를 부여하고 있습니다 약간의 가치를 부여합시다 좋아, 그건 공백 값이야 여기서 무엇을 입력 하든지 구원받을 것입니다

좋아요, 그래서 여기에 입력 형식을 만들었습니다 또한 버튼을 만들 예정입니다 자, 간단한 키보드 버튼을 사용합니다 버튼의 이름을 입력하기 만하면됩니다 지금 제출하십시오

이 함수로 돌아 갑시다 이제 여기서 입력하고 싶은 것은 시작할 것입니다 버튼을 선택합니다 좋아요, 그래서 버튼을 클릭하면 여기에 클릭 기능이 추가됩니다 그래서 사람들은 내가 여기서하고있는 것에 세심한주의를 기울입니다

괜찮아 그래서 기본적으로 나는 달러 함수를 사용하는 버튼 내가 말하는 건 이 버튼을 클릭하면 특정 기능이 실행됩니다 실행될 것입니다 자, 함수를 타이프하자

버튼 클릭으로 실행됩니다 클릭은 기본적으로 이벤트입니다 따라서이 클릭 기능을 실행하면 어떤 이벤트가 발생합니다 그 사건 나는 여기에 타이핑 할거야

괜찮아 단추를 클릭 할 때 수행 할 작업은 다음과 같습니다 그것은 가치에 대한 경고를 줄 것입니다 도트 발 그래서 여기서 value 함수를 사용하고 있습니다 좋아, 이제 가자

괜찮아 그래서 제가 여기서 뭘하는지는 버튼을 클릭하면이 이벤트가 발생합니다 알았어, 너는 가치있는 경고를받을거야 그리고 우리는이 값을 텍스트 식별자로 사용할 것입니다 그래서 무엇이든간에 사용자 유형 입력은 여기로 전달됩니다

좋아, 그리고 나서 이 점 값 함수는 그 값을 당신에게 반환 할 것입니다 지금 너무 혼란스러워하지 마라 이걸 저장하고 우리가 이걸 실행할거야 내가하는 말을 너는 정확히 이해할거야 괜찮아

그래서 제가 여기서하려고하는 것은 보시다시피, 이것은 입력입니다 우리는 사용자 유형 입력에 있으며 제출 버튼입니다 우리가 만든 것 이제 제출을 클릭하겠습니다 괜찮아

그래서 submit을 클릭했을 때, 이것은 click 이벤트를 사용하여 발생합니다 기본적으로 값이 반환되는 위치에 경고가 표시됩니다 따라서 사용자가 입력 한 내용은 반환 값입니다 Val 함수를 사용합니다 여기

괜찮아 그래서 당신은 그것이 안녕하세요를 본다 보자 유레카 잘 지내? 좋아, 젠장 그래서 이것은 값을 반환하는 것입니다

내가 입력 내용을 입력하고 있습니다 그래서 사람들은 이것이 가치 기능이 작동하는 방식입니다 좋아, 아주 간단 해 그냥 설정할 수있는 것과 비슷한 값을 반환합니다 가치도

그래서 저는 여러분 모두가 가치를 설정하여 무언가를 시도하기를 바랍니다 시도한 내용에 대해 의견을 말하십시오 또는 새로운 프로그램 Val 함수를 사용하여 실행 한 결과 또는 다른 어떤 기능이 매우 흥미로울 것입니다 이 함수를 사용하여 빌드하는 방법 자신의 프로그램 이제 내가 말할 다음 기능은 클래스 추가 메소드 이제는 기본적으로 하나 이상의 클래스를 추가합니다

선택한 요소로 이동합니다 따라서 요소를 선택하려면 달러 함수 어떤 요소를 선택 하든지 클래스를 추가 할 것입니다 간단히 add 클래스 메소드를 사용하면 이것을 예제를 통해 살펴 보겠습니다 그래서 우선, 이 모든 것을 정리해 보겠습니다 괜찮아

이전 예제와 비슷하게, 우리는 모든 강아지의 이미지를로드하려고합니다 그래서 그것은 pup이라는 클래스를 가지고 있습니다 좋아, 우리는 모든 이미지를 추가 할 것이다 좋아, 골디 야 괜찮아

비슷하게 다른 두 개의 이미지가 여기에 있습니다 좋아, 복서 인 마지막 이미지 강아지 폴더를 선택한 다음 복서 이미지를 선택합니다 좋아요

그래서 우리가했던 것과 비슷한 div를 만들었습니다 이전 예제에서 이제 스크립트 태그를 열어 보겠습니다 전체 스크립트를 입력하기 전에 나는 단추가있을거야

여기에 버튼을 추가합시다 좋아요, 클래스 추가를 시도하겠습니다 이제 스크립트가 생겼습니다 괜찮아 이제 스크립트 내에서 내가 할 일은 내가 시작할거야

문서 준비 기능을 사용하면 이미 모든 기능을 사용할 수 있습니다 이 준비 기능의 사용법을 설명했습니다 그래서 저는 그것이 제가 여기서하고있는 것과 정확히 같습니다 괜찮아 이제 여기

먼저 선택을 시작하겠습니다 클릭 한 버튼 버튼 합계 기능이 실행될 것입니다 그리고 그 기능은 무엇입니까? 기본적으로 클릭에 버튼과 이벤트가 발생할 것입니다 나는 그 사건을 여기에 입력 할 것입니다 괜찮아

이제 이벤트를 시작하기 전에, 스타일 클래스를 정의합시다 괜찮아 이제 스타일 태그가 사용되었습니다 지금 일부 CSS 코드를 지정하려면, 당신은 분명히 CSS라는 또 다른 파일을 열 수 있습니다 전체 내용을 입력하지만 작은 코드입니다

그래서 저는 여기에 직접 타이핑 할 것입니다 그래서 저는 스타일 클래스라는 클래스를 만듭니다 좋아, 내가 갈거야 할일은 국경이라는 속성을 정의 할 것입니다 이 속성에 값을 할당하려고합니다

5 PX가 녹색이라고 가정 해 보겠습니다 그래서 이것은 스타일 태그에있는 것입니까? 자 이제이 기능으로 되돌아갑니다 따라서이 버튼을 클릭하면 발생해야합니다 나는 그 사건을 여기에 입력 할 것입니다 그래서 내가하고있는 일은 먼저 모든 이미지를 선택하는거야

그런 다음 add 클래스 메서드를 사용하고 있습니다 이 스타일 클래스 함수를 전달합니다 우리가 방금 만든거야 괜찮아 괜찮아

이제 여기에 괄호를 닫으십시오 그래서 내가 여기서하고있는 것은이 버튼을 클릭하는 것입니다 그리고이 심상에, 이제 광고 클래스 메소드를 실행하게됩니다 스타일 클래스라는 클래스를 전달한이 메서드에 이 스타일 클래스 내에서 나는 5 픽셀의 단색 녹색 테두리를 만들었습니다

좋아, 너무 혼란스러워하지 마라 파일을 저장하고 열자 괜찮아 무슨 일이 있었습니까? 이 단추를 클릭하면 다음이 모두 선택됩니다 경계가이 모든 이미지에 적용되었습니다

괜찮아 이제이 경계선이 지정되었습니다 스타일 클래스라는 클래스 내에서 우리가 여기서 만들었던 괜찮아 그래서 여러분, 이것이 클래스 추가 메서드가 작동하는 방법입니다 지금

다시 여기로 돌아가서 처음부터 다시 시작합시다 괜찮아 이제 ADD 클래스와 함께, 우리는 클래스를 제거하고 우리는 토글 버클도 가지고 있습니다 이제 클래스를 제거하면 기본적으로 해당 클래스가 제거됩니다 방금 추가 한 추가와 해제 사이를 전환 할 수 있습니다

수업을 지우고 괜찮아 어떻게 작동하는지 살펴 보겠습니다 좋아요 예를 들어, 콘솔을여십시오 괜찮아

이제 내가 할 일은 모두를 선택하는 것입니다 이 이미지들 중 좋아, 그럼 수업 시작 수업을 지우 겠어 지금 내가 여기서 한 것은이 모든 이미지를 선택했다는 것입니다

나는이 모든 이미지에서 클래스 제거 메소드를 실행하고있다 이 메서드에 인수로 스타일 클래스를 전달하고 있습니다 그래서 우선, 그것을 추가 한 다음 removeclass가 어떻게 작동하는지 보겠습니다 너는 볼 수있다 모든 이미지에 녹색 경계선이 있습니다

클래스를 제거하겠습니다 괜찮아 그래서 당신은 국경이 이제는 모드라는 것을 알았습니다 토글 버클을 해봅시다 나는 그렇게 할거야

걸쇠를 토글 할 때 다시 추가되었습니다 좋아, 내가 다시 토글하면, 다시 테두리를 제거합니다 제거를 추가합니다 좋아, 그래서 어떻게 클래스 removeclass 및 토글 잠금 장치를 추가 할 수 있습니다 이제 다음 주제로 돌아가 보겠습니다

jQuery 이벤트입니다 괜찮아 이제 클릭 이벤트에 대해 이미 설명했습니다 하지만 우리는 여전히 프로그램을 실행하고 어떻게 작동하는지 이제 클릭 방식은 기본적으로 이벤트입니다

클릭 이벤트를 적용 할 때 선택기에 어떤 함수가 발생하거나 어떤 이벤트가 발생합니다 좋아, 그 사건 이 함수 내에서 이제 지정됩니다 예제를 보겠습니다 그래서 우선, 필요없는 스타일을 제거합니다 이 단추는 필요하지 않습니다

그래서 우리는 이러한 이미지가 필요합니다 그대로 그대로 유지합시다 이제 우리가 할 일은 편집 할 것입니다 스크립트 경로 여기에 버튼이있는 대신, 이미지를 선택하겠습니다 따라서 이미지를 클릭하면 이벤트가 발생할 것입니다

해당 이벤트는이 함수 내에서 지정됩니다 그럼 그 사건을 타이프하자 내가하고있는 일은 내가이 키워드를 사용하고 있다는거야 숨기기라는 효과를 추가하고 있습니다 괜찮아

자, 내가하는 일이 무엇인지 말해 보자 기본적으로 클릭에 이 이벤트가 발생할 이미지를 이제 기본적으로 이것은 현재 선택중인 요소를 나타냅니다 그 요소는 더 높은 숨기기 효과를 사용하여 숨겨집니다 기본적으로 jQuery 효과입니다 이제 특정 요소를 숨기는 데 사용됩니다

선택한 요소에 관계없이 여기에 지금이 높은 결함을 사용하여 감추어 질 것입니다 내가 어떻게 보여줄지 그리고 모두 보여줄거야 내 아버지 슬라이드에서 이러한 다른 효과 중 그래서 기본적인 이해를 위해서는이 높은 결함 특정 요소를 숨길 것입니다 당신이 선택한 이제 파일을 저장했습니다

그냥 열어 보자 그래서 내가 할 일은 클릭을 하자는 것입니다 이 이미지들 각각에 우리는이 이미지들 각각에 이벤트를 추가했기 때문에 그렇습니까? 그럼이 이미지를 클릭합시다 너 봤어 다른 두 개의 이미지도 비슷하게 숨겨져 있다는 소리가 들립니다

지금은 이미지 클릭으로 인해 이런 일이 일어나고 있습니다 나는 그 이미지를 숨길 것이다 괜찮아 이제 이것은 현재 이벤트를 기록하는 데 사용됩니다 기본적으로 클릭에 그 이미지들이 숨겨 질 이미지들

좋아, 그게 우리가 여기서 한 짓이야 다시 한번 당신에게 보여 드리겠습니다 그래서 나는이 이미지를 클릭하고있다 그것은 이것과 이와 비슷하게 숨겨집니다 지금 클릭 이벤트로 모든 사람들이 분명히 희망을 갖고 있습니다

비슷하게 좋아, 이제 이건 내가 하나 이상의 이벤트 핸들러라고 생각했다 선택한 요소로 이동합니다 언제든지 많은 사람들이 클릭 사이에 혼란스러워합니다 on 이벤트가 다른 이벤트 처리기를 지정하는 데 사용됩니다 따라서 클릭 한 번에 함께 사용할 수 있습니다

지금 키를 누르십시오 프레스는 제가 논의 할 다음 방법입니다 그래서 저는 여러분에게 보여줄 모범을 보여 드리겠습니다 키 누름 사용 방법 및 on 이벤트 사용 방법에 대해 설명합니다 이제 키 입력은 기본적으로 문자가 입력 될 때마다 실행됩니다

기본적으로 키보드의 키를 누를 때마다 키의 도움으로 어떤 이벤트가 발생할 것입니다 ok를 누릅니다 얘들 아, 그건 아주 설명 할 만하다 이벤트 자체의 이름을 읽은 경우, 당신은 그것이 무엇을 말하고 있는지 이해할 것입니다 괜찮아

이제 키 누름은 키 입력과 키 업의 조합입니다 너무 자세히 설명하지 않겠습니다 그래서 저는 예제를 만들려고합니다 키 프레스 사용법을 보여 드리겠습니다 이벤트에서 어떻게 사용 하는지를 설명합니다

괜찮아 이제 Visual Studio 코드를 열어 보겠습니다 괜찮아 그래서 내가 할 일은이 전체 사업부를 정리 하자는 것입니다 이 예제에서는 이것을 요구하지 않습니다

괜찮아 따라서 우리가 할 일은 입력을 생성하는 것입니다 우리는 신분증을 제시 할 것입니다 언론을 예로 들어 보겠습니다 좋아요, 그리고 타입도있을 겁니다

알았어 종류가 텍스트 야 우리는 이것에 약간의 크기를 설정할 것입니다 좋아, 그럼 보자 지금 여기에 우리는 대본이 있습니다

이미지를 선택하는 대신 스크립트 내에서 입력을 선택하겠습니다 우선,이 전체 블록을 지우십시오 그래서 우리는 document dot ready 기능을 가지고 있습니다 이제 입력을 선택하겠습니다 여기서 우리는 달러 함수를 사용하여 입력을 선택합니다

여기에 on 이벤트를 추가하겠습니다 그래서 여기에도 keypress 이벤트를 추가 할 것입니다 일부 기능이 수행 될 것입니다 좋아, 얘들 아, 이걸 타이프하자 걱정마

나는 P 점 높이를하고있는 것을 설명 할 것이다 여기서 일어나는 일은 키 누르기입니다 이 입력에 대한 타이핑을 시작하자마자, 이 p는 숨어 지려고 할 것입니다 그래서 한 단락을 다시 만들어 봅시다 그것을 부르 자

이 코드를 타이핑하기 시작하면됩니다 괜찮아 이제 두 단락이 있습니다 그래서이 단락을 편집하고 싶습니다 그래서 저는 last라는 매개 변수를 전달할 것입니다

괜찮아 그래서 이것은 기본적으로 마지막 단락을 선택하려고합니다 이게 하나야 좋아, 얘들 아, 나는 이것이 다소 혼란 스럽다는 것을 안다 괜찮아

여기 어딘가에 작은 화살이 있습니다 좋아요, 그래서 저는 이것을 닫지 않았습니다 이제 파일을 저장하겠습니다 무슨 일이 일어나는지 보여 줄게 당신이 아무것도 이해하지 못했다면 걱정하지 마십시오

이제 기본적으로 입력을 정의합니다 그리고 내가 할 일은 타이핑을 시작할 때입니다 이 단락을 타이핑하기 시작하면 숨어지기 그럼 어떻게 작동하는지 봅시다 어디 보자

여보세요 네 곧 뵙겠습니다 첫 번째 문자를 누르면 전체 단락이 숨겨집니다 자, 어떻게 그런 일이 일어날까요? 왜냐하면 우리는 키 누름 기능을 사용하기 때문입니다

그래서 특정 캐릭터의 언론에 키보드의 마지막 단락이 숨겨집니다 그래서 얘들 아,이게 바로 언론과 주요 언론이 지금 어떻게 일하는거야 on은 다른 이벤트도 지정하는 데 사용됩니다 그래서 이벤트와 주요 언론도 이벤트입니다 괜찮아

따라서 이것이 작동하는 방식이며 이는 클릭의 차이입니다 그리고 이것으로 우리는 사건으로 끝난다 이제 우리는 jQuery 효과에 대해 논의해야합니다 좋아, 이제는 숨기기 효과에 대해 논의 해보자 지금

여기에 많은 영향이 있습니다 우리는 숨 깁니다 우리는 페이드 아웃 페이드 아웃 토글을 보여줍니다 페이드 토글 및 이와 유사합니다 다른 효과가 있습니다

이름처럼 그것은 일종의 효과라고합니다 그래서 기본적으로 hide는 효과와 같습니다 특정 요소를 선택하면 숨길 것입니다 좋아, 매개 변수를 가질 수있어 요소를 숨기려면 얼마나 오랫동안 또는 얼마나 오래 요소를 희미하게할지 이제 우리는 숨기기의 몇 가지 예를 이미 보았습니다

그럼 기본 예제를 보여 드리겠습니다 우리가 논의 할 숨기기를 논의 할 곳 우리는 토글에 대해 논의 할 것입니다 자 이제 우리는 그 특정 요소를 보이게 할 것입니다 토글을 토글합니다 숨기기와 보여주기 사이에 너무 혼란스러워하지 마라

Visual Studio 코드를 열자 그래서 제가 할 일은이 모든 것을 정리할 것입니다 알았어 그래서 우리는 어떤 종류든지 제거 할거야 이제 혼란스러워

여기에 두 개의 버튼이 있습니다 이 버튼 중 하나는 수업을 갖습니다 통화 버튼과 나는 각 버튼에 ID를 제공합니다 첫 번째 ID는 hide입니다 이 버튼의 이름도 숨 깁니다

좋아,이 모든 걸 복사 해보자 다른 버튼을 만들려고합니다 우리는 show라는 ID를 부여 할 것입니다 그 이름은 버튼 쇼입니다 좋아, 그래서 여기에 두 개의 버튼을 만들었 어

이 버튼들 각각에 다른 ID를 부여했습니다 이제 내가 할 일은 하나의 이미지를로드하는 것입니다 좋아, 그럼 시간을 낭비하지 말고 세 개의 이미지를로드하자 그래서 우리는 같은 강아지 이미지를로드 할 것입니다 클래스의 이름은 puppers입니다

좋아, 이미지를 추가하자 나는 너무 행복해 누군가를 선택합시다 그게 골디 야 괜찮아 그래, 이걸 끝내자

우리 div 섹션이다 괜찮아 이제 스크립트 태그를 추가해 보겠습니다 이제 우리는이 문서로 시작하려고합니다 도트 준비 기능

괜찮아 그럼 문서를 선택합시다 나는 이것이 지금 무엇을하는지에 관해 이미 설명했다 몇 가지 코드를 정의 해 보겠습니다 이제 첫

내가 할 일은 ID 숨기기를 선택할 것입니다 죄송 합니다만, 이것을 인용 부호로 넣는 것을 잊었습니다 내가 여기서하고있는 일은 내가 선택하는거야 이 식별자를 숨 깁니다 그래서 기본적으로이 버튼은 숨 깁니다

좋아요, 그래서 여기에 두 개의 버튼이 있습니다 그래서 내가 각자에게 그 (것)들의 당신은 알기 위하여 식별자, 이 두 버튼을 구별 할 수 있습니다 기본적으로 숨기기 버튼을 선택합니다 좋아요, 숨기기 버튼을 선택하고 클릭 할 때 이 숨기기 버튼 중 일부 이벤트가 해당 이벤트를 발생시킬 것입니다 이 함수에서 지정할 것입니다

그래서 일어날 일은 제가 선택하려고하는 것입니다 이제 여기에있는 이미지가 이제 이미지를 선택합니다 나는 그 이미지를 숨길거야 숨기기 버튼을 클릭하면 이미지가 숨겨집니다 이제 유사점을 확실히 닫습니다

우리도 똑같은 일을 할 것입니다 괜찮아 제가 붙여 넣기를 복사하면 더 쉬워 질 것입니다 따라서 숨기기 버튼을 선택하는 대신 쇼 버튼을 선택하고 클릭 할 때 쇼 버튼에

이미지가 표시됩니다 그래서 여기에 쇼 기능을 사용합니다 그래서 사람들은 그렇게 간단합니다 좋아, 너 모두 이해했으면 좋겠다 여기서 내가하고있는 일

그러니 내가 한 일을 통해 당신을 도망 가게하십시오 그래서 우선, 두 개의 버튼을 만들었습니다 나는이 버튼들 각각에 다른 식별자를 주었다 hide 보여주고, 그런 다음이 이미지를 단일 이미지로 표시합니다 그래서 여기를 클릭하면 이미지가 숨겨 지도록 숨기기 버튼

좋아요, 클릭 할 때 show button 이미지를 볼 수있게합니다 좋아, 저장하고 그냥 실행하고 보자 어떻게 작동하는지 숨기기를 클릭하자 표시되는 프로그램을 클릭합시다

괜찮아 이제 우리가 할 수있는 일은 여기 토글 기능 이제 이미지를 선택하겠습니다 죄송합니다, 유일한 이미지 우리는 가지고 있고 나는 그것에 토글을 수행 할 것입니다 그래서 그것은 숨겨집니다

이제 내가 비슷하게 보이도록 토글을 클릭하면, 그것은 숨겨지고 보이게됩니다 토글은 숨기기와 표시를 토글합니다 좋아, 얘들 아 그건 hide / show와 toggle에 관한 것이 었습니다 그 예에서이 세 가지

이제 페이드 아웃 페이드 인 및 페이드 토글을 살펴 보겠습니다 이름과 마찬가지로 기본적으로 특정 요소가 사라집니다 그래서 그 요소가 사라지거나 사라질 것입니다 또는 그것은 토글을 퇴색시킬 것입니다 괜찮아

이제 예제를 실행하고 어떻게 작동하는지 좋아, 우선, 이 모든 것을 포함하여 전체 스크립트 경로를 지우겠습니다 또한 버튼이 필요하지 않습니다 그럼이 두 줄을 정리해 보겠습니다 자, 내가 할 일은 내가 갈거야

여기에 다른 이미지를 추가 할 수도 있습니다 이제 각 이미지에 대해 나는 신분증을 줄거야 괜찮아 그럼이 이미지의 아이디어를 정의합시다

이 이미지의 ID가 1이고 나는 다른 두 이미지에 대해서도 그렇게 할 것입니다 그래서이 이미지는 ID가 있고 우리는 이것을 스키로 바꿀 것입니다 좋아 그리고 세 번째 이미지 나는 ID 3을주고 갈거야

복서에게 이것을 바꾼다 괜찮아 그래서 기본적으로 나는 모든 사람들에게 ID를 할당했다 지금이 짧은 이미지들 중 네가 왜 내가 지금 그 일을하는지 이해하는 동안, 스크립트 태그 스크립트를 만들어 봅시다 이 코드에는 몇 가지 코드가 있습니다

그래서 우리는 시작할 것입니다 문서 도트 준비 기능으로 좋아, 그럼 documentready 몇 가지 기능이 있습니다 그래서 버튼을 만드는 것을 잊었습니다 버튼을 만들어 보겠습니다

그래서 우리는 단 하나의 버튼을 만듭니다 버튼의 이름이 왜냐하면 페이딩 아웃이라면, 저는 버튼이라는 버튼을 만들 것입니다 괜찮아 이제 우리가 할 일은 버튼을 클릭하는 것입니다 여기에있는 버튼을 선택하고 있습니다

버튼을 클릭하면 이벤트가 발생할 것입니다 우리는이 함수에서 언급 할 것이다 좋아, 그래서, 이벤트는 기본적으로 모두 선택하려고합니다 이미지 하나 하나씩 먼저이 이미지를 선택합니다 괜찮아

그래서 기본적으로 골디 이미지입니다 내가 선택하고 그것을 퇴색시킬거야 여기서 페이드 아웃 효과를 사용하려고합니다 우리는 또한 매개 변수를이 메소드에 전달할 수 있습니다 그래서 내가 천천히 알아 낸다고 말하면 천천히 사라질 것입니다

그래, 비슷하게 나는 다른 두 개의 이미지를 위해 그것을 할 것인가? 이제 두 번째 이미지를 선택하겠습니다 빨리 끝내자 좋아, 정말 빠를거야 그런 다음 세 번째 이미지를 선택하겠습니다

그리고 우리는 천천히 말할 것입니다 좋아요 천천히 지키자 이제 알았어 괄호와 코드는 여기에 있습니다

괜찮아 그래서 내가 여기서하고있는 것은 세 개의 이미지를로드하는 것입니다 이 이미지들 각각에 식별자를 부여하고 있습니다 좋아, 그럼 나는이 이미지들 각각을 고르고있다 나는 그들을 퇴색시키고있다

괜찮아 자, 이것이 어떻게 작동하는지 보겠습니다 그러니 열어 봅시다 좋아, 안녕히 가세요 그래서 여기에서 첫 번째 것을 볼 수 있습니다

마지막 하나는 천천히 사라집니다 그래서이 이미지로 사라질 첫 번째 것 빠른 매개 변수를 전달했기 때문입니다 이 두 가지에 대해 우리는 천천히 언급했다 좋아, 다시 한번 보자 네, 그래서 사람들이 공정한 방법을 작동합니다

괜찮아 이제 페이드 인에 대한 예를 살펴 보겠습니다 괜찮아 그럼 우리가 여기서하려고하는 것은 우리가가는 것입니다 이 div를 지우려면

그래서 더 이상 강아지 이미지를 사용하지 않겠습니다 슬픈 이름이긴하지만 그래, 그래 그럼 우리가 할 일은 스크립트 기능 이 안에서 우리는 3 개의 div를 가질 것입니다 괜찮아

그래서 이것을 지키지 말고 페이드 아웃 (Fade Out)을 페이드 인으로 유지합시다 그래서 우리는 이것을 이와 비슷하게 페이드 인 (fade in)하게 만듭니다 또한 페이드 인으로 만들 것이고, 이것 역시 사라질 것입니다 페이드 인 (fade out)과 페이드 인 (fade in)으로 무엇을 할 것인가? 우리가 사라질 것에 대해 살펴 보겠습니다 지금

우선, 버튼을 만들어 보겠습니다 나는 namaste를 말하게 할거야 전형적인 인디언들이 여기 있습니다 괜찮아 이제 내가 할 일은 div를 만들 것입니다

나는 클래스를 생성하려고합니다 페이드가 있는지 봅시다 괜찮아 이제 내가 할 일은이 부서원이 가지고있는 일이다 3 개의 다른 상자 또는 사각형을 선택하고 각 용어에 ID를 부여합니다

그래서 그것은 지금 하나입니다 이 ID는 제가 여기서 언급 한 ID입니다 알았어, 이드는 그러지 1 우리는 그것을 스타일링 할 것입니다 우리는 일종의 폭을 줄 것입니다

좋아, 너비가 너무 많다고 가정 해 봅시다 비슷하게 높이를주고 60 픽셀을 가정 해 봅시다 그것들은 현재로서는 디스플레이를 아무 것도 안 보일 것입니다 처음에는 아무것도 볼 수 없어야하기 때문에 당신이 퇴색 할 때 아무것도없이 시작합니다 모든 것이 보입니다

좋아, 그래서 우리는 디스플레이를 none으로 유지하는거야 또한 배경색을 설정합니다 이것이이 주황색이라도 너무 주황색임을 의미합니다 좋아 그래서 너는 볼 수있어

나는 디스플레이를 None으로 설정했다 우린 이미지가 희미 해지고있어 그래, 배경색도 뒤죽박죽이다 주황색 괜찮아

이제 우리가 할 일은이 div의 끝입니다 여기에있는 부서를 닫으십시오 그리고 우리는 또 다른 부문을 추가 할 것입니다 지금 div 안에 나는 작은 휴식을 줄거야

BR을 사용하여 휴식을 취할 수 있습니다 내가이 모든 것을 복사하게 해줘 우리는 이렇게 세 가지 부문을 가질 것입니다 두 번째 div에 대해이 모든 것을 복사하고 있습니다 우리가해야 할 일은 단지 변화시킬 것입니다

배경색을 일종의 우리 깃발을 인도 깃발을 표시하는 것을 시도의 그 사이에 차크라를 얻을 수 없을거야 그러나 그것과 별개로 나는 그것이 효과가 있어야한다고 생각한다 좋아, 나야

저는 이것을 그린으로 바꿀 것입니다 그래서 우리는 여기에 세 번의 딥을 만들었습니다 그리고이 세 부서에 페이드 인 할 것입니다 좋아, 천천히 화면에 나타납니다

그래서 이것 또한 천천히 그리고 그 모두를 화나게합니다 내가 이것을 바꿔 줘 따라서 처음에는 기본적으로 나타날 수 있습니다 좋아, 내가 두 번째 매개 변수를 전달하려는 경우, 우리는 천천히 그리고 세 번째 것은 놓을거야 그것은 실제로 그것에게 약간의 가치를 제공합니다

괜찮아 이것은 기본적으로 밀리 초 단위의 시간입니다 그래서 저는이 가치를 부여 할 것입니다 파일을 저장하고 어떻게 실행되는지 봅시다 좋아, 그래서 구매 버튼을 제거하는 것을 잊었다

그걸 없애자 좋아, 우리는 Namaste 버튼을 가지고있다 파일이 있는지 확인한 다음 확인하겠습니다 좋아, 나 마스트라고 해보자 그래서 나는 여기서 어리석은 실수를 저질렀다

ID를 잊어 버렸습니다 그래서 이것은 2이고 이것은 3입니다 그래, 지금은 확실히 작동해야한다 변경 사항을 저장합시다 그리고 난 그냥 내 브라우저를 열어 갈거야

새로 고쳐 보자 좋아, 그럼 여기에 하얀 색을 볼 수있어 그것은 완전히 백색이기 때문입니다 그것은 보이지 않습니다 하지만 여기서 볼 수 있습니다

이 모양은 인도 깃발처럼 생겼다고 생각합니다 그래서 분명히 차크라를 얻을 수 없었습니다 네 이것이 작동하는 방식입니다 그래서 사람들은 퇴색 할 것이고 사라질 것입니다

그래서 여러분 모두가 페이드 인 페이드 아웃이 어떻게 작동하는지 이해하기를 바랍니다 괜찮아 이제 다음 주제로 넘어 갑시다 아래로 슬라이드 슬라이드 유사하게 우리는 슬라이드 토글 (slide toggle)을 할 것입니다 이제 이름처럼이 효과는 슬라이드하는 데 사용됩니다

선택된 요소를 내리다 비슷하게 속도가 있습니다 콜백 매개 변수와 비슷하게 켜집니다 선택한 요소가 위로 올라갔습니다 그리고 나서 우리는 슬라이드를 토글합니다

아래로 내립니다 그럼 예제를 살펴 보겠습니다 괜찮아 그래서 우선, 이 모든 것을 정리해 둡시다 괜찮아

나는이 모든 것을 정리할 것입니다 그래서 저는 버튼을 가지고 시작할 것입니다 그래서 이름을 말하자 버튼의 이름을 슬라이드로 지정할 수 있습니다 좋아

그럼 우리가 할 수있어 우리가 할 일은 여기서 div를 추가 할 것입니다 오케이 또는 부서 우리는 신분증을 갖게 될 것입니다 div 1이라고 부르 자

괜찮아 이것은 필요하지 않습니다 하지만 여기에 신원을 확인하는 것은 좋은 습관입니다 단 하나의 div 만 있기 때문에 그래서 우리는 그것을 스타일링 할 것입니다

폭을 90 픽셀로 설정한다고 가정 해 봅시다 괜찮아 마찬가지로 높이 매개 변수를 설정하고 60으로 설정하면 좋은 배경색을줍니다 그것을 분홍색으로 줄 것입니다 좋아

좋아, 나는 배경이 틀렸어 그래서 기본적으로 div가 닫습니다 여기 배당금 좋아요, 그래서 우리는 기본적으로 여기에 div를 만들었습니다 기본적으로 작은 정사각형이나 직사각형입니다

색상 분홍색의 좋아 자, 스크립트 태그를 갖자 이제 script 태그 내에서 제가 할 일은 제가 선택하려고하는 것입니다 여기있는 버튼 우리는 또한 이벤트를 여기에서 클릭하고 클릭을 추가합시다

좋아요, 클릭하면 이벤트가 발생합니다 그 이벤트는이 함수 내에서 정의됩니다 이제 우리가 할 일은 div를 선택하는 것입니다 우리가 div1에 준 식별자를 사용하여 좋아 좋아, 슬라이드를 위로 또는 슬라이드에 적용 할 것입니다

down 기능이 있습니다 좋아 슬라이드를 먼저 적용 해 보자 그런 다음 매개 변수를 전달할 수도 있습니다 천천히 말한다

이걸 끝내자 그러면 효과가있다 좋아, 저장하자 내가 여기서 한 것은이 div를 사용하여 작은 사각형을 만들었습니다 나는 그것을 스타일링했다

좋아, 그래서 여기에 작은 사각형을 만들었 어 그리고 나는 그 버튼을 클릭 할 때 slide라고 불리는 버튼을 가지고있다 이 사각형은 천천히 움직일거야 괜찮아 자, 어떻게 작동하는지 봅시다

좋아, 슬라이드 보자 그래서 다시 보자 그래서 천천히 미끄러 져 괜찮아 그래서 얘들 아

지금 슬라이드 업이 어떻게 작동하는지 그것이 아래로 미끄러지 듯 우리가 할 일은 처음에 아래로 내려야 만한다면 디스플레이는 none이어야합니다 그래서 우리는 디스플레이를 none으로 설정할 것입니다 그리고 우리는 이것을 아래로 내리기 위해 바꿀 것입니다

좋아요, 저장하고 작동하는지 봅시다 좋아요, 슬라이드를 클릭합시다 천천히 아래로 내려다 봅니다 그래서 사람들은 이것이 위로 움직이고 아래로 움직이는 방법입니다 좋아, 같은 방식으로 전환 할 수도 있습니다

괜찮아 그래서 이것을 토글하면 위로 움직일거야 또는 아래로 내립니다 자, 이제 우리는 jQuery 효과를 얻었습니다 마지막으로 마침내 마지막 주제로 넘어 갑시다

jQuery 사용자 인터페이스입니다 좋아요, 이제 UI에 불과합니다 여기서 세 가지 기능을 논의 할 것입니다 드래그 가능한 drappable이며 날짜는 지금 선택합니다 이름에서 알 수 있듯이

드래그 할 수 있습니다 드래그 가능한 메소드를 사용하여 선택된 요소 마찬가지로 드롭 가능 메소드를 사용하여 드롭합니다 지정된 타겟으로 선택된 요소 이것은 draggable 및 droppable 작업 방법입니다 이제 예제를 살펴 보겠습니다

알았어 그래서 나는 개간과 함께 시작할거야 여기 온갖 왜 내가 첫 번째 헤더를 제거하는지 모르겠다 좋아, 그냥 jQuery 자습서로 계속 사용 해보자

이제 우리가 할 일은 무엇보다도, 지구 스타일 태그로 시작하겠습니다 그래서 기본적으로 우리는 요소를 스타일링 할 것입니다 우리가 끌고 갈거야 그래서 이것은 단지 작은 사각형이 될 것입니다 또는 그런 것

그래서 드래그라고하는이 스타일의 ID를 제공 할 것입니다 지금이 안에 우리는 너비와 같은 몇 가지 속성 150 픽셀을 갖자 그 다음 우리는 높이를 유사하게 가질 것입니다 요소를 디자인하다 우리는 여기 저기로 끌고 갈 것입니다

좋아, 60 픽셀 그런 다음 배경색을 지정합니다 파란색이라고합시다 블루 바이올렛을 클릭합시다 괜찮아 이것은 기본적으로 스타일 태그는 기본적으로 여기에 사각형이 있습니다

배경색이 파란색 바이올렛 우리는 drag라는 식별자를 부여했습니다 좋아, 그래서 내가 언급하는 것을 잊어 버린 것은 CSS를 알고 있다면, 그러면 해시를 사용할 때 기본적으로 식별자의 경우, 그러나 내가 어떤 점과 함께 점을 말할 때마다, 그것은 의미한다 나는 수업을 선택하고있다 알았어, 그냥 여분의 정보 이제 스크립트 태그를 열어 보겠습니다

그래서 제가 여기서 할 일은 제가 가질 수있는 것입니다 여기있는 함수 좋아, 당신은 문서의 속기로서 기능을 사용할 수 있습니다 도트 준비 기능 괜찮아

그래서 이것은 기능에 대한 속기와 같습니다 나는 이것을 일찍 언급하는 것을 잊었다 하지만 지금 이걸 쓸 수있어 여기서 뭘하고 싶은지 선택하겠습니다 드러그 식별자 그리고 우리가 여기서 설계 한 것이 무엇이든지간에 죄송합니다

따옴표를 넣는 것을 잊어 버렸습니다 이제이 끌기는 기본적으로이 직사각형을 선택합니다 우리가 만든 것 그 사각형이 선택됩니다 우리는 그것을 드래그 할 수있게 만들 것입니다

좋습니다, 우리는 드래그 기능을 사용하고 네 괜찮아 좋아, 이제이 스크립트 야 제가 여기서하고있는 일은 제가 창조하고있는 것입니다 신분증 끌기? 괜찮아

그래서 기본적으로이 드래그와 나는 div를 만들고 있습니다 ID 드래그로 기본적으로 같은 부분입니다 그 위에 텍스트를 몇 개 넣을 것입니다 나를 끌어들이라고 가정 해 봅시다 그래, 네, 이걸 저장 해보자

괜찮아 이것은 기본적으로 우리가 만든 스타일 우리는 직사각형을 만들었습니다 보라색 파란색의 그리고 이제 당신은 그것을 주위에 끌 수 있습니다 좋아, 너는 볼 수있어

여기 전체 HTML 페이지로 드래그 할 수 있습니다 괜찮아 그래서 사람들은 이것이 드래그 할 수있는 방법입니다 나는 그것을 끌기 위해 정말로 차갑게 보인다라는 것을 알고있다 그것은 작은 게임과 같습니다

그래서 이것은 드래그 할 수있는 방법입니다 괜찮아 이제 이제는 droppable을 살펴 보겠습니다 이 모든 것을 정리해 드리겠습니다 그래서 우리가 할 일은 이미지를 가질 것입니다

우리가 그의 집에서 내려주고 싶을 때 강아지의 그래서 기본적으로 우리는 강아지의 이미지를 가질 것입니다 우리는 그것을 끌어다가 그의 집에 떨어 뜨릴 것입니다 그래서 우리는 드래그 가능하고 여기에 계산서를 떨어 뜨릴거야 그것은 귀여운 개념입니다 그래, 그래, 우선 이미지를 표시하는 것으로 시작하겠습니다

그럼, 알았어 나는 골디를 선택하고 괜찮을거야 이제 이미지를 선택 했으므로, 스타일 기능을 갖자 괜찮아 이제 우리는이 강아지를위한 집이 필요합니다

그래서 우리는 집을 디자인 할 것입니다 지금 나는 이것에 식별자를 부여 할 것이다 그것을 떨어 뜨려 봅시다 지금이 안에서 나는 조금 가질 것입니다

좋습니다 마찬가지로 400 픽셀로 설정합니다 높이 400 그리고 우린 그것을 오른쪽으로 뜨게 할거야 왜 그런지 말해 줄테니까 내가 이것을 표시하면 왜 내가 떠 다니는 지 이해할 것이다

오른쪽 배경색으로 빠른 머레이 (Murray)를 주자 괜찮아 이것이 스타일의 끝입니다 그래서 우리가 여기서 한 것은 기본적으로 사각형을 만들었습니다 색상 아쿠아 마린

이제 스크립트 태그를 추가해 보겠습니다 여기서 모든 일이 여기서 끝나는 곳입니다 나는 기능으로 시작할 것입니다 괜찮아 이제 이미지를 선택하여 시작하겠습니다

하나의 이미지 만 있거나 이미지를 말할 수 있습니다 또는 이미지를 식별 할 수 있습니다 그건 같은거야 이 이미지는 드래그 할 수 있어야합니다 좋아 권리

이제이 사각형을 선택하겠습니다 브래지어라는 식별자가있는 우리가 만든 그래서 저는 그 사각형을 선택하려고합니다 그것 droppable 좋아, 여기 괄호를 닫자 괜찮아

이것이 스크립트를위한 것입니다 이제 여기에 작은 텍스트를 추가하겠습니다 그래서 피해자가 div를 만들었 어 이 사업부 내에서 ID가 괜찮 으면 내 집에있는 작은 문단을 갖자 괜찮아

괜찮아 그래서 우리가 여기서 한 것은 우리가 시작한 것이 었습니다 이 이미지를 표시함으로써 그리고 우리는 사각형을 만들었습니다 그 후에는 다음과 같은 속성을가집니다 우리는 드래그 가능한 메소드를 할당하려고합니다

이 사각형에 이미지와 droppable 메서드 우리가 여기서 창조 한 것 괜찮아 이제 출력을 살펴 보겠습니다 훨씬 더 잘 이해할 것입니다 그래, 근본적으로이 남자는 집에 가고 싶어한다

괜찮아 잠시만 요 괜찮아? 그래서 끌리지 않는 이유는 내가 여기서 해쉬를 언급하지 않았기 때문에 당신이 식별자를 줄 때 여기에 해시 태그를 언급해야합니다

괜찮아 그럼 이것을 저장하고 열어 보겠습니다 그것은 draggable 볼 수 새로 고침 작업을해야합니다 그래서이 사람은 집에 가고 싶어하고 이것은 그의 집입니다 그러니 여기 빌려줘

좋아, 돌아 다니고 돌아 가지 않는다 그것은 droppable입니다 그래서 그의 집은 가라 앉을 수 있습니다 그래서 우리는 그냥 그를 데려가는 것뿐입니다 나는 이것이 어리석은 것을 안다 그러나 이것은 좋은 길이었다

얼마나 draggable 및 droppable 작품을 보여줍니다 좋아, 너 모두 이해했으면 좋겠어 draggable 이제 마지막으로 우리는 볼거야 데이트 피커에서 그래서 여러분, 이것은 inbuilt 함수입니다 jQuery에서 내장 된 위젯으로 날짜를 입력 할 수 있습니다

그런 다음 날짜를 쉽게 시각화 할 수 있습니다 우리는 이제 이것으로 자세히 설명 할 것입니다 간단한 예제를 보여 드리겠습니다 날짜 선택 도구가 작동하는 방식 좋아,이 모든 걸 지우는 것으로 시작하자

좋아, 여기까지 괜찮아 이제 내가 할 일은 입력을해야한다는 것입니다 여기서 사용자는 날짜를 입력합니다 신분증을 제시합시다

날짜가 ID라고 가정 해 봅시다 텍스트가 텍스트 인 경우 한숨이 할당됩니다 좋아, 그럼 괜찮아 이제 우리가 할 일은 우리가 가고있는 것입니다

스크립트 태그를 엽니 다 이제 스크립트 태그 내에서 아주 단순한 사람들입니다 제가 할 일은 제가 선택하려고하는 것입니다 입력은 여기에 입력 된 ID를 입력합니다 그리고 날짜 선택 도구를 호출합니다

좋아 그럼 이걸 저장하자 모두들 좋아요, 그래서 저는 입력을 만들고 있습니다 그리고 입력을 입력하자마자 데이트 피커를 얻으려면

괜찮아 따라서 이것은 내장 된 위젯이 여기에 코딩하는 것이별로 없습니다 알았어 내가 클릭하자마자 날짜 선택 도구가 표시되었습니다

자, 어떤 데이터를 무작위로 제공 할 수있는 날짜를 알려주겠습니다 또는 특정 날짜를 선택하는 경우 그 데이터는 여기에 표시됩니다 좋습니다 정상적으로 작동합니다 괜찮아

그래서 너희 모두, 나는 희망한다 너는 데이트 피커로 분명해 안녕 얘들 아 내 이름은 아리아이고, 또 다시, 편집자 아이콘에있는 모든 동영상을 환영합니다 너와 오늘 우리가 너를 데려 갈거야

각도에 대해 자세히 살펴 봅니다 그래서 여러분 대부분은 아마 알고 있습니다 너는 어떤 각도로 들어 봤니? 네 인생의 어느 시점에서 분노에 대해 특히 웹 개발에 대해 토론 할 때 네 친구들과 그래서 이것은 각도 자습서입니다 Eddie Rackham이 발표 할 예정입니다

우리는 각도에 대해 자세히 살펴볼 것입니다 각도 앱을 작성하는 방법이 쓰여지는 방법입니다 이 자습서에서는 실제로 그 (것)들의 어떤 apps든지 창조하기의 지상 뜨거운 기초 저 밖에있는 대부분의 YouTube 동영상 당신은 모호한 종류라고 생각합니다 당신이 이미 알고있는 것 그리고 그들은 일종의 앱으로 시작합니다

그리고 당신은 그것을 창조하는 방법에 대해 종류의 것을 배웁니다 그러나이 비디오는 매우 다를 것입니다 우리는 접근 방식과 같은 교실을 택할 것입니다 이 비디오를 통해 각성하는 학습에 이르기까지 그럼이 동영상이 첫 번째 동영상이 될 것입니다

우리가 차에 대해 계획 한 비디오 목록에 너희 각진 우리는 각도의 최신 버전을 목표로하고 있습니다 어떤 경우에도이 동영상을 항상 업데이트 할 것입니다 각도가 변했을 때 그래서 이것은 각도 8을 목표로 삼을 것입니다 그래서 방금 말했듯이 우리는 매우 교실을 택할 것입니다

지금과 같은 접근법, 무슨 뜻이야? 내가 말할 때 우리는 접근 방식과 같은 교실을 택할 것입니까? 음, 교실에서와 마찬가지로 당신이 덩어리를 시작한 후에 너를 배울 의미가있는 것은 과제가 주어진다 당신의 능력을 테스트하는 것은 그 기초를 적용하는 것입니다 매우 실제적인 방식으로 그래서 우리는 과제를 연습해야 할 것입니다 이걸로 사실은

아마 우리는 세 가지 임무를 갖게 될 것입니다 우리는 그 길에 결정할 것입니다 필요하다고 판단되면 당신이 임무를 마치고, 당신은 1을 얻을 것이므로 이것이 우리가 가고있는 주제입니다 이 각도 자습서에서 다루는 내용입니다 그래서 우선, 우리는 각진 것을 목표로 삼을 것입니다

나는 너희들에게 아주 간단한 소개를 할 것이다 우리가하는 일이 어떤 각도인지 새롭고 모호한 것을 보게 될 것입니다 그래서 이것은 각도 8이며, 여러분 중 몇몇은 생각하고있을 것입니다 나는 많은 것을 놓쳤다

내가 어떻게 따라 잡을거야? 걱정마 나는 바로 그 두 번째에 도착할 것이다 우리가 조금 지나간 후에 각양 각색의 이론 그리고 앵귤러 8의 새로운 점 우리는 실용적인 부분으로 바로 뛰어 갈 것입니다

실용 부분 시작 지역 각도 프로젝트를 설정하는 중입니다 그래서 우리는 프로젝트 설정을 진행할 것입니다 우리는 또한 글을 쓸 것이다 우리의 아주 기본적인 간단한 응용 프로그램입니다 우리는 가지 않을거야

이 모듈에 많은 복잡한 모듈을 통합해야합니다 이것은 매우 간단한 응용 프로그램이 될 것입니다 모든 것이 어떻게 작동하는지 알 수 있도록 얼마나 각이 진 큰 지그 소 퍼즐이 모든 조각을 함께 맞 춥니 다 우리가 조금 쓴 후에 우리가 처음 신청할 때 곧 깨닫게 될 것입니다 이 앵귤러는 타이프 스크립트라고하는 JavaScript의 상위 집합을 사용합니다

그래서 우리는 타이프 스크립트를 아주 간략하게 살펴볼 것입니다 나는 너에게 가르치 려하지 않을거야 너희들은 기본적으로 다른 것을 볼 수있다 이것은 각도를 의미합니다 그게 바로 우리가하고있는 일입니다

내가 준 후에 여러분들은 타이프 크로 트 (typescript)에 대해 아주 간단하게 소개합니다 또한 외부 CSS를 통합 할 수있는 방법에 대해서도 알아볼 것입니다 귀하의 각도 응용 프로그램에 그래서 우리는 주로 부트 스트랩을 사용합니다 3 그리고 우리는 배울 것입니다

이를 실제로 각기 다른 응용 프로그램에 통합하는 방법에 대해 설명합니다 그 후 우리는 매우 기본적인 근본을 찾을 것입니다 각 애플 리케이션이 대부분의 사람들에게 어떻게로드되는지 오늘 모퉁이를 배우고 그들은 매우 초보자입니다 그들은 앞으로 나아가서 신청서를 쓸 것입니다

그러나 그들 대부분은 알지 못할 것입니다 응용 프로그램이로드되는 방식 및 화면으로 가져 오는 방법과 파일 시스템은 무엇입니까? 실제로 호출됩니다 그래서 우리는 실제로이 문제를 해결할 것입니다 중요한 주제로서 그 후 각도 앱이 어떻게로드되는지에 대해 알려줍니다 우리는 또한 각진 빌딩 블록으로 바로 뛰어갑니다

그리고 그것은 우리가 보게 될 구성 요소입니다 CLI를 사용하여 구성 요소를 만드는 방법 우리는 또한 당신이 어떻게 창조 할 수 있는지를 볼 것입니다 사용자 지정 구성 요소를 수동으로 위에서 우리는 데이터 바인딩을 목표로 삼을 것입니다

데이터 바인딩에는 양방향 데이터 바인딩 문자열 보간 그 후에 속성 바인딩 우리는 또한 우리가 볼 이벤트 바인딩을 할 것입니다 지시어에서 그들이하는 일은 무엇인지, 그러나 우리는 보지 않을 것이다 자신 만의 고유 한 지시문을 작성하는 방법에 대해 설명합니다 그래서 당신이이 비디오에서 배우기를 기대한다면 커스텀 지시어와 어떻게 작성할 수 있는지에 대해 설명합니다

글쎄, 이건 너를위한 비디오가 아니야 우리는 비디오를 발표 할 예정이다 사용자 지정 지시문을 작성하는 방법에 대해 설명합니다 사실, 우리는 비디오를 공개 할 예정입니다 이 모든 주제에 대해 별도로 구성 요소 우리는 구성 요소가 무엇인지에 대해 훨씬 더 자세히 살펴 봅니다

모든 코드 조각이 어떻게 만들어 지는지 그것은 자신감에 들어갑니다 우리는 데이터 마이닝 이벤트 바인딩과 동일한 작업을 수행 할 것입니다 지시문 적어도이 특정 비디오에 관한 것입니다 우리는 선적하는 일부 inbuilt 감독을 배우게 될 것입니다 각도가 대부분 ng-ng4 인 경우 ng4와 같은 것을 사용합니다 그래서 그것들은 꽤 유용한 것들입니다

우리는 정말로 간단한 것을 만들 것입니다 그래서 내가 말했듯이, 나는 너희들에게 작은 작은 과제를 줄 것이다 우리가 길을 따라 가면 부비동을 계획 해 봅시다 그래서 제가 구성 요소가 어떻게 만들어 졌는지 당신에게 가르쳐 준 후에 나는 너를 만들어 줄거야

자신의 구성 요소 계속해서 내 솔루션을 확인할 수 있습니다 우리는 또한 데이터 바인딩에 대한 할당을 가질 것입니다 이벤트 찾기 우리는 또한 과제를 가질 것이다 inbuilt 지시어 용 응용 프로그램에서이를 사용하는 방법에 대해 설명합니다 그래서 그것에 관한 것입니다

이 비디오를 최대한 활용하려면 내가 너에게이 과제들을 줄 때 당신이 개념을 제대로 이해 한 후에 그때 만 과제를 시도해야합니다 할당을 시도 할 때, 제발 나랑 너무 오랫동안 가지 마세요 할당의 코드 긴 부분 만 사용하여 확인하십시오 솔루션을 올바르게 수행했다면 각성을 할 때 더 나은 편파성을 제공합니다

그것은 또한 당신의 두뇌가 그들을 보여줄 것입니다 지금과 같은 방식으로 생각 해봐야 겠어 내가 너희들에게 말할 필요가있는 모든 것을 내려 놓았다 우리가 시작하기 전에 그리고이 튜토리얼의 각도를 시작합시다 근본적으로 또 다른 작은 일 나는 방해가되고 싶다

당신이 앵귤러 앵거 5 나 그와 비슷한 것을 모른다면 너무 늦었 어 걱정마 이 과정을 계속할 수 있습니다 왜냐하면 당신은 잠시 동안 왜 이해할 것이기 때문에? 그래서 첫 번째 주제 오늘 우리가 다루는 것은 매우 이론적 인 주제입니다 그래서 그것이 각도입니다

따라서 Anglo가 정확히 무엇인지부터 시작하는 것이 의미가 있습니다 시청자에게 누가 처음으로 각도 동영상을보고 있습니까? 당신은 당신이 배우는 것에 대한 소개를 할 자격이 있습니다 자, 여러분 중 대부분은 이미 실제로 이미 가정합니다 YouTube에 오기 전에 조사를 완료해야합니다 각도 자습서를 입력하십시오

따라서 필수 항목 일뿐입니다 나는 당신에게이 소개를합니다 첫 번째는 프런트 엔드 개발 프레임 워크입니다 이제 그건 끝입니다 프런트 엔드 개발 프레임 워크가 무엇을 의미하는지 알아 보겠습니다

따라서 웹 개발자 친구가있는 경우, 당신은 두 단어 백 엔드와 프론트 엔드를 끊임없이들을 것입니다 백 엔드 및 프런트 엔드 그렇다면이 두 단어의 의미는 무엇입니까? 웹 개발자 Poke의 역할 이 업계의 두 가지 별개의 지점에 있습니다 첫 번째는 백엔드 개발자의 것이고 두 번째는 프론트 엔드 개발자가 현재 백엔드 개발자입니다 거의 모든 것을 책임지고있다 그것은 백 엔드에서 발생합니다

그래서 기본적으로 라우팅과 같은 것 잘 라우팅은 프런트 엔드 개발자가 수행합니다 하지만 그건 또 다른 문제 야 그러나 라우팅은 기본적으로 사물을 가져 오는 백엔드 개발자의 직업 그 모든 것들을위한 자바 스크립트를 작성하는 서버에서 완전한 백엔드 개발자가 설정을 노래합니다 실제로 데이터베이스 스키마를 설정하기위한 서버

그것은 백엔드 개발자가하는 모든 것입니다 프런트 엔드 개발자가 주로하는 일 지금 화면에 표시되는 내용 그래서 당신이 페이스 북을 보는 방법 그것은 모든 것을 설계했습니다 뉴스 피드가 실제로 어떻게 배치되는지 그것은 직업 선발 개발자입니다 웹 사이트의 모든 내용이 잘린 것을 확인하십시오

그리고 완벽 해 그는 많은 최적화 작업을 수행합니다 그래서 대부분 프론트 엔드에서 돌아 왔습니다 HTML과 CSS 및 CSS를 사용하여 매우 복잡해졌습니다 이런 식으로 여전히 조금 복잡합니다

매우 세련된 웹 사이트를 제공하려는 경우, 그러나 HTML을 만드는 것 훨씬 더 반응 적으로 만드는 것은 프레임 워크가 당신을 위해 무엇을하는지 따라서 대부분의 온라인 사이트에서는 프론트 엔드 개발 프레임 워크는 또한 CSS 프레임 워크로 이것은 사실이지만, 말 할 일이 너무 완벽하지 않아 그것은 CSS 프레임 워크입니다 반응 형 HTML 프레임 워크 그리고 지금 설명 할게

어떻게 그렇게 두 번째 것 너는 각도에 대해 알아야한다 Google에서 유지 관리하고 개발 한 것입니다 따라서 angularjs는 자바 스크립트 기반의 오픈 소스입니다 주로 Google에서 유지 관리하는 프런트 엔드 프레임 워크 및 개인 공동체 많은 도전 과제를 해결하는 기업 및 기업 단일 페이지 응용 프로그램을 개발할 때 발생합니다 또한 단일 페이지 응용 프로그램의 의미를 알 수 있습니다

잠시 후 개발을 단순화하는 것을 목표로합니다 이러한 애플리케이션의 테스트는 클라이언트 측 모델 뷰 컨트롤러를위한 프레임 워크 모델 뷰 viewmodel 컨트롤러의 MVC 아키텍처 mvvm 아키텍쳐에 너도 알다시피 기본적으로 Google Now에서 유지 관리 및 개발하고 있습니다 Google을 사용하지 않는다면, 물건은 놀랍습니다 실제로 안드로이드를 벗었다 알다시피, 오늘은 뭐지? 각도 G는 오랜 시간 이래 거기에 있었다

놀라운 커뮤니티가 있습니다 의심의 여지가 있다면, 스택 오버플로에 밀어 넣을 수 있습니다 각도 탭 아래 거의 즉시 답변을 얻을 수 있습니다 그 외에 문제가 이미있을 수도 있습니다 누군가에 의해 누가 같은 문제를 개발하고 직면하고 있는가

그래서 기본적으로 훌륭한 커뮤니티가 있습니다 Google에서 제공하는 기능으로 오늘날과 같은 각도에서 작업 할 수 있습니다 세 번째로 알아야 할 사항 약 앵귤러는 자바 스크립트 기반의 프레임 워크라는 것입니다 이제 그것이 앵글 1에서 분명하지 않다면, 이것은 각도 GS라고 불린다 글쎄, 난 그냥 거기에두고있다

자바 스크립트 기반입니다 그렇다면 Javascript 기반의 좋은 점은 무엇입니까? 자바 스크립트는 일반적으로 언어로 알려져 있습니다 웹의 따라서 웹의 어떤 부분과 상호 작용하는 경우, 아마 자바 스크립트를 사용할거야 또는 자바 스크립트 엔진을 사용하면 무의식적으로 수행 할 수 있습니다 그러나 당신은 확실히 그것을하고 있습니다

예를 들어 YouTube에서이 동영상을보고 계신가요? 지금 자바 스크립트 엔진을 사용 중입니다 비디오 프레임 워크를 실행합니다 그래, 그래서 JavaScript를 아는 경우, 기본적으로 알고 있습니다 웹에 대화하는 법

그래서 각도를 배우려고 할 때, 당신은 정말로 새로운 언어를 배울 필요가 없습니다 예를 들어, 당신이 펄럭임을 배우고있을 때, Dart가 새로운 언어이기 때문에 Dart에 대해 배워야합니다 Google에서 개발 한 것으로 펄럭이는 데 사용됩니다 즉, 모바일 애플리케이션 개발 프레임 워크입니다 당신이 펄럭임을 배우러 가고 싶다면, 에디 리카 (Eddie Rekha)에 관한 내 터틀러 튜토리얼을보실 수 있습니다

그러나 지금 당장 당신은 그 각도를 알아야합니다 자바 스크립트를 기반으로합니다 정확히 JavaScript는 아닙니다 그것은 typescript에 기초를 둡니다 typescript는 주요 언어입니다 각도 스크립트에서 사용되는 typescript는 기본적으로 JavaScript의 상위 집합입니다 우리는 내가 벗긴 것을 나중에 얻을 것입니다

그래서 기본적으로 사실 그것으로 구성되어있다 JavaScript를 사용하면 훨씬 더 보편적입니다 그 이후에 우리와 같은 개발자에게 쉽게 다가 갈 수 있습니다 우리는 방금 토론했습니다 그 각도는 주요한 첫 번째 단일 페이지 응용 프로그램입니다

그래서 우리는 다중 페이지 응용 프로그램을 만들려고하지 않습니다 단일 페이지 응용 프로그램을 만들기 위해 각 각이 있습니다 그렇다면 단일 페이지 응용 프로그램이란 정확히 무엇입니까? 글쎄, 그것은 페이지를 새로 고침 할 필요가 없습니다 그래서 예를 들어 Gmail은 훌륭한 단일 페이지 응용 프로그램입니다 그러니 내가 너에게 보여 주기만하면 돼

따라서 Gmail 계정을 열어서 받은 편지함 페이지에서 열어 볼 수 있습니다 이제 초안에 들어가려면 사이트가로드를 멈추게하십시오 괜찮아 그래서 만일 당신이 초안에 들어가면, 기본적으로 화면에 부하가 없음을 알 수 있습니다 로딩의 그 우스꽝스럽지 않은 일에 들어 가지 않습니다

그러나 단일 페이지 응용 프로그램에 있지 않은 경우, 예를 들어 웨비나로 이동하십시오 which is a Guarding service so out here we are in the my webinars tab And if I were to go to my recording out here, you see that this goes into a loading fashion This is loading up a new page So this means that gotowebinar is not a single page application while Google is a single page application and you just saw how much faster Google can be my God

This is still loading and Google was done with it already So yeah, single page applications certainly have the performance and speed that you required today to all your things very seamlessly So it's great to have a framework that lets you create single page applications with so much ease Okay, so that was all about angular and what you need to know about it to actually go ahead and start developing apps using angular Now

Another elephant in the room is angular 8, most people I actually teach angular are very flustered with the fact that angular is on version eat at this moment They are mostly flustered because they think they have to go through everything from version to version 7 and then learn it Well that is The case first of all angular was released as angularjs and angularjs was the very first released and everything changed with angular 2 itself The whole engine changed how angular written is change So basically the major overhaul was done in angular 2 and since angular 2 after every six months Google actually releases and update to angular and since then it's been like angular 2 3 4 5 6 7 and now we're eight

So those funny half years that have gone So it's basically being four years I guess if my math is correct So now we're at angular 8 and every update that they make out there is basically backwards compatible So think you've learn angular 5

Well, you can still work with angular 8 because most of the stuff that's been changed are backwards compatible So now that being out of the way, let's go ahead and see what is new in angular 8 now, if you're a beginner to angular most of this will not exactly make sense to you So I recommend you skip it, please use the time stamps that then the description to skip The next topic and that is Project setup and I'll be way more interesting for you But if you're a guy who is tech savvy and like to know what he's working with what's new in that version? Well this part for you so angular, it came with a few changes and one breaking change Most of angular updates have a few breaking changes

So the changes that are very relevant in angular 8 firstly is the IV engine So angular uses a visual rendering engine and that is going to be replaced with V it is still in its testing phases to be honest It's a Beta release and angular 8 It will become very much prominent in angular 9, I guess so IV is the most hype thing out there because you are visual rendering API remains unchanged So basically you're cute

You don't need to change a code, but the way it gets rendered is completely different It's faster much more optimized and it's basically a breeze to work with the next thing that's new in angular is the basil engine So vassal is your way of orchestrating how your dependencies are there So basically it's like webpack, but don't get this confused It's not going to be replacing webpack webpack is the god of their part it is going to make webpack job a lot more easier

It's going to orchestrate and really serialize out what dependency you need to actually really a projects So the coolest feature of Basil is that it has a very smart algorithm for determining the bill dependencies and injecting them into your project Another thing That is cool about angular 8 is Loading so this is just to make sure that there is a different type of loading for legacy browsers and the modern browsers out there So basically the modern browsers use more in JavaScript and Legacy ones use Legacy JavaScript

So basically there is a load time difference and when you are using Legacy JavaScript, it tends to be a little slower while modern ones are way faster They're much more quick to even write as a developer's perspective So differential loading the basil engine and Ivy so these are the three changes that are there in angular 8, there is also a very breaking change in angular 8 I have not listed that out out here Well that has to do with the HTTP Library

So to invoke the HTTP Library you would mostly have to import angular slash HTTP, but that has been changed and that is the most breaking change and that to now use the HTTP libraries You have to import at the rate angular / comment / HTTP and if you've used SE debe before, you know what I'm talking about so with that out of the way This is all the theory pot Let's go ahead and start up with our own angular project So the first thing that you need to do is to start off with angular is go ahead do your browser open up a new tab and search for no GPS No, I am assuming that you don't have no GS installed on your computer

So click on the first link and go ahead and download the one that is recommended for most users after you downloaded You will get a setup file Go ahead click the setup file and just follow the instruction It's a pretty easy install and I don't think there should be much problems with it But just in case our the you got a problem with it some configuration problem goes wrong, please go ahead and check out another video that actually explains how to install node

js on your computer because this video is meant for angular I have a lot to do and I can't waste time where stuff like how to install node There are a lot of videos out there including Eddie records itself, and you can go ahead and check them out And once you have installed note on your computer, you can go ahead and check if note is installed by just typing No, Don York

On prompt and this should open up a JavaScript console You can say stuff like print or let's say VAR x equals 5 and if you just call X it will say five out there I know my text isn't very clear because I have this weird blue background in my command prompt But yeah, if you can open up JavaScript console with just typing node, you have installed node in proper fashion now to exit from this console, you can just type dot X it and I will exit you from that console So let's go ahead and clear up our Command Prompt and the next thing that we are going to do is install angular on our computer

So to install angular Let's see what we have to do So the best place that you have for any doubts of this sort is the angular documentation So go ahead and search for the angular Doc's so this will open up the angular Doc's it's at angular dot IO / docks go ahead and check the set apart So I'll show you see that you need nodejs now that you have done it you can go ahead

And install angular 2 an npm command So npm is a node package manager and all you have to say to npm is that you need to install so install or you can just simply say I and then – gee which basically means that it is going to be a global install and not pertaining to any particular folder or any project setup So we are going to be installing this globally so that you can access the angular CLI from almost anywhere on your computer 그래서 그 후, all you have to say is angular / CLI from correct? 괜찮아 It's at the rate Anglo

So for stuff like this always keep the documentation open and you should go ahead and press enter after that So this command will go ahead and install angular on your local machine So let's just wait for this to finish 괜찮아 So as you guys know I already had angular installed on my computer

So nothing new has actually been changed It just says it updated one package So that doesn't really matter So this means that angular has been installed on our computer and you can go ahead and check that with just creating an angular project Now

I'm in my default user directory So let me just go ahead and change it to the desktop directory and out in the desktop directory I want to make folder called angular tutorial so angular underscore tutorial So this is where I'm going to be saving all the projects and all the setups that we will be needing for the various assignments and simple applications that we will be looking at and the concepts so this is going to be the folder for the day So let's go ahead and quickly change into that folder and so angular tutorial and we are in our angular tutorial folder so out here what you can do to start up a new angular project is as you guys can see I'll tell it is it says to create a workspace and initial application you can use the engine new command

So NG new basically tells angular CLI that you want to start a new project and then you basically give your project a name 괜찮아 So Angie knew and what do we name our project? Well, let's think of some appropriate name Let's go back and see what are we actually going to do next So we are going to be writing our first app

So it's very simple that we are going to be calling this our first app So engine you will go ahead and create folder which has everything that you need to create your first app so you can opt out for routing for now because we will not be going for routing in this tutorial and we will also be using CSS for our file So just press enter twice and I'll be using the default settings for setting up your angular project and there it goes so that completes our project setup and for this project setup We are also missing on one thing so Firstly we are missing our code editor So I'm going to be using visual studio code but you can use other paid applications like web storm out there webstorm is amazing

If you can pay for it, please go for it But for now for a very free way of making a tutorial I'm going to be sticking to my cheap ways and just use Visual Studio code now just because Visual Studio code is free doesn't mean it takes away from any other functionalities that come from the paid apps It has all the functionalities like syntax highlighting for creating and generating components 이거 정말 좋다 You even get a built-in terminal to actually run your angular CLI commands Okay

So let's just wait for this project to get set up It kind of takes a couple of minutes from some time So let's just give it some time 괜찮아 So now that our angular app is set up and up and running

All we need to do now is go ahead and just download visual studio code So to download visual studio code go ahead and type in Visual Studio code on your browser Go to the first link and also the second link out here the download visual studio code that should give you a set of file and you should just go ahead and set it up that's very easy to do So, let's not waste more time and get started with writing our first app Okay, so out here if you were to go to your desktop and if you made a folder like me like angular tutorial, you will see that there's a folder that says first app now if you were to open the folder you see a lot of things you probably don't understand out here

So there is a TS lint which is a Json source file There's also the package file There's a package lock There's also this implies very important angulardart Json file, which basically includes all your dependencies Now this e 2 e file is not really going to be useful for us in this Earlier tutorial it we basically means end to end and this is made for end-to-end testing of angular apps

What we are going to be interested in is mostly the node modules and the SRC so Archer and SRC you see that there is this index page there is an index page which is our HTML file There's also the style sheet, which is your basic styling of the web app that comes built in when you basically make any angular app 그래서 우선, let's go back and let's open this folder particularly with Visual Studio code So as you guys can see I have opened up our first app and we can go into our SRC and we can see that there's an app folder and we get a lot of files out here So we have an app component CSS file

We have an app component dot HTML file We have an app component dot spec dot DS file So all of these dots pecked RTS files are basically used for Testing purposes and I'm going to be concentrating on testing but rather more on developing an app So this is none of our concern for now You can feel free to actually go ahead and delete it

If you go ahead and open up app dot component of TS you can go ahead and see that there is a bit of code written out here So there is an import line from the first thing we can see that it's importing something called components from a library called angular / core There is also this decorator out here that tells angular that this is a component it has a selector and has a template URLs It has tiles URLs in in the class You can see that there is a variable that says title and it says first app now this really doesn't make sense to a beginner, but just wait on when we will know what all of these things mean from components to a class and everything else

그래서 우선, let's go ahead and see what this app that angular ships with looks like so to do that Go ahead and open up your terminal You can simply do that by dragging it up and down and out here What do you want to see is NG – – open which basically makes your default browser open up and all you want to say is serve So this command basically serves the app that is in development mode right now and it will serve it on a local host at Port number four thousand two hundred

So it's compiling at the moment So let's go ahead and see what it actually looks like Let's give it some time to compile and should open up the app for us automatically Close off this one Let's keep the documentation open

Let's close off The nodejs is closed off my mail 괜찮아 So this is the first app

괜찮아 So as you guys can see we are greeted with the welcome screen as you guys can also see it's on a local server This is not hosted at a global scale This is just for your testing purposes as a developer 너는 볼 수있다 that it says welcome to the first app

Now if you go ahead and see out here it says title equals first app Now if you go ahead and the HTML part you can also see that there is this little place where title is referenced back again So as a developer, I think you can make some sense that these three files app component DS the app component of HTML and the app component dot CSS is kind of interconnected with each other So yeah, this is basically what an angular app looks like Okay So this is basically the application that angler ships with it's a very welcoming application

It says welcome to First up It has some useful links such as the tour of Heroes link It has a link to the command line interface documentation and a few of the angular blogs Now This is of really no use to us if you want to learn so let's go ahead and actually fiddle around with this file that comes along with angular when you create your app

So if you go ahead and look at the app component HTML page, it looks deceivingly similar to what we see on our screen out here when with this app that angular ships with so as you guys can see it has an edge one that says welcome to and title and out here You can see welcome to First up So basically we can say that the title out here which we saw in the typescript file, which is said title equals to First app and that gets converted out here above that We also have a few links and basically it's an unordered list and also if Necessary there is some styling that goes along too But at this moment there is no styling that is available

So let's go ahead and Tinker around with this application just to give you an idea of how angular actually works So angular is basically divided into components and angular app so out here what you see is the app component So every component has three files It's basically it's a template so it has its own styling So that is app dot component dot CSS

It also has its template So The Styling is CSS The template is up dot component of HTML and the logic the business logic that goes inside this thing is in the app dot company dot DS file now, there is also this app dot module dot EPS file and I'll get to that just in a moment But for now, what you want to do is go ahead and just delete all these stuff that is there and appcom pin it on HTML file now, don't forget to keep your terminal running which is serving this application

So Time you go ahead and save it basically saves it and you can go ahead and see that it has reloaded it and we have nothing out here to be honest So let's make the speech a little more interesting So firstly let's give this just an input Let's say so we want a div and in this div, we are going to have an input of type text now every input should also go with the label and this label is for name so we can give this type name equals name out here, right? So let's make this a little less confusing for you guys Let's call this first name right and out here

You see if you go ahead and save it We should get an input out here We can type stuff out here, but it really does nothing even if we press enter and stuff like that so we can also have a paragraph out here which an output out our name for us Please don't pay much attention to the Syntax for now just try and understand what is happening in the background because we will get to the syntax just in a few moments So we want to display the name out here

So to display the name we need to create a variable called name So go ahead and go to your app dot competent RTS file and change this name the title to name and out here Let's change it to my name So we're going to say Aria So let's save that

Let's go back and save our HTML file and as you guys can see RL is coming out here But if we still type something in the input 실제로는 아무 일도 일어나지 않습니다 Now, what I want to do is what if I type in the input should automatically be reflected in this paragraph below it so we can do that very simply with so-called tools and angular ships it now these tools are called directives and we will get into directives just in this tutorial I'll be teaching you how to make use of inbuilt directives like the one I'm going to be using right now So let's go ahead and use this directive now pay no attention to the way I am writing this because syntax is something that can be dealt with later

So for now what we want to do is start up square bracket and then an open parenthesis bracket, that is the normal bracket And all I want to say is NG model is equals to name So name should be in your double quotes Now This will tell angular that whatever is being typed out here is going to be stored in a property called name and we are also going to be displaying the same name down here in this paragraph So let's go ahead and save this and let's go ahead and reload our file and you surprisingly see that the input quad that we had has suddenly disappeared

Now what we want to do to realize our mistake is go ahead and say inspect if you go into the console, it says uncaught error template parse error, so it can't bind to ng-model since it isn't known property of input 괜찮아 So basically angular can't figure out what NG model is now this is because we have not Imported the functionalities of ng-model now I said that this is an input model and it comes shipped with angular But the way typescript works is that you have to go and tell typescript everything you are importing that you will be needing for your app to be running now all your Imports to this is actually done in the module file So things that need to be imported when you are running this is done in the modules file

So as you guys can see we are importing a few stuff already that is by default So we are importing the NG model from angular / core and we are also importing the browser module from angular / platform browser now to actually make the magic of ng-model happen We need to import something and this is at the rate angular / forms So everything entered the semicolon so basically in typescript, you need to tell typescript where everything is particularly so angular / forms and what we need to import is forms module Now this was telling typescript that we are going to be using this but you also need to tell angular that your forms module needs to be imported

So you can do that by just copying this name and putting it in the Imports array out here So put a comma or press enter and type in forms module go ahead and save your HTML page also just in case and now what we see out here is we do not get any error First of all and we have this nice little input box So let's close this We also have this nice little input box

It says Aria in the paragraph It also says Aria in input box now if I were to delete that everything in the paragraph also automatically gets deleted So if this was not a single page application for example, reflecting the changes A to the input would probably take you to reload the page that that is not with angular You can go ahead and simply type your name and everything will happen like it's magic and it will appear down in the paragraph below So that was all about installing angler setting up your project and we set up a project we saw how the shipping app actually looks like and then we kind of fiddle with it And this is how an angular app basically works you have components and then you also have modules so modules are like sub-packages like any app would be divided into sub packages and angular app is divided into modules now molecules contain components and this is the component out here that we worked with just now it is called the app component

Also another thing that I want to bring to your notice is if we go ahead and open up the source code what you see out here is it's basically an HTML page but there's this weird app Root element out here It's almost seems like we I've built our own custom element below that what you see is a bunch of script Imports that angular does for you so that angle works properly but the main interesting part is this app Root element now, if you remember we had seen this app Root element in our app dot component RTS file and we see that we have a selector called uproot Now the page that gets loaded into the browser is actually this index dot HTML page now, I'll tell you see that we have created this app Root thing So basically uproot out he'll is like a selector So basically this will help you understand how an angular app gets loaded when we get to that so index dot HTML is basically the file or the source code that you see out here

It also happens to have this app route custom element now, we built this custom element using our components and we told our confident that the selector for this custom element We uproot and the template of that component is stored in app component that HTML which is basically this file and also the component has some styling which it at the moment doesn't have any if we would have any styling it would be in this app dot competent dot CSS file and basically that's it And we have our app dot component TS file which makes sure of the logic that is working properly So basically this is how angular works it's a bunch of components Now, let's go ahead and this was our first app that we created now, let's go ahead with our next topic and that is what is typescript

Now, you really saw that we are using something a little different from JavaScript It's basically not JavaScript It's typescript So what exactly is typescript well typescript is just a superset of JavaScript It is a strongly typed object oriented compiled language

It was designed by Microsoft and it is basically A superset of JavaScript So anything that is included in JavaScript is definitely included in typescript, but the reverse can be actually said so everything in JavaScript is there in typescript because it is a superset but everything in typescript is not there in JavaScript So typescript is basically used when you want to create a JavaScript based application that can actually scale at an industrial level because when we're talking about typescript it basically compiles down to JavaScript and this compilation is done by the angular CLI So if you want to go ahead and learn the nitty-gritties of typescript, you can go ahead and check out typescript tutorial out there on the web There are plenty of them typescript is really easy to learn and even if you don't want to learn typescript, I think it's easy enough if you know JavaScript, you can catch it up along the way it's basically like JavaScript but having classes interfaces and stuff like that

So with that out of the way, we can move ahead to our next topic and that is integrating external CSS into Will angular application 괜찮아 So for the purpose of integrating and external CSS, we're going to be working with bootstrap 3 so bootstrap, if you don't know is a CSS framework So let's go and see what bootstrap does So this is bootstrap

We are on bootstrap version for right now, but I will be using version 3 for this purpose of this demo So you can go ahead and see what bootstrap does out here on bootstraps official site I also have a bootstrap tutorial you can go ahead and check that out too I'll leave a link to that in the description below It's basically will show you how to use bootstrap and its various forms and formats

괜찮아 So now we are only going to integrate bootstrap into our project So to do that All you have to do is go out here and open up another Powershell the mound out here What do you want to do is type in the commands npm install and – does save and you want to say bootstrap 383 what this will do is download all the files of bootstrap 3 and store it in this node modules folder

So node modules folder is anything that you use from the know? Package manager if you download some external package, it will be saved in your node modules after that after its downloaded I will show you how you can integrate it into your project that you are working on Let's give it some time to actually download the node modules or what we have here That is bootstrap 3 Okay, so we have actually downloaded bootstrap 3 now, you can check that by actually opening the node modules folder and going down to be oo So ABCD be should be somewhere here

Okay, it seems I cannot find it there Let's go ahead and check it out on our desktop So we have angular tutorial first up no modules, and there should be a bootstrap out here Yep below bonjour, so it should be below bonjour So let's go ahead and find bonjour out here

So this is our bootstrap folder that we had just downloaded now out here we have a few folders So under this bootstrap folder going to the dist folder that stands with distribution go to CSS And all you have to do is copy this right click on it and copy the relative path Now, all you have to do is go into let's let's minimize this a little so that it becomes easier to work with Now all you have to do is go out here going to Styles This is the angular the Json file on almost line number 27, you'll see that there is a Styles array so out here

All you do is put a comma s press enter and put in the address of the bootstrap CSS file now be aware that when you copy the relative path you have to actually go ahead and change this all to a backslash So this change all of these two backslashes and you should be ready to go So, let me just show you guys this is without actually having bootstrap installed So this is the app that we have created now, if you were to just go ahead and inspect we can go ahead and see that in the Head bar There is only one Styles at the size deck / CSS

This other styles is just a way of telling angular that there's a source mapping of All the CSS Styles at this moment You can see that this is the global styles to this file now once we actually go ahead and save our angular dot Json file and then we have to do is actually go ahead and node where we were actually serving hit control C And then what you want to do again is serve it again to basically save your angular geojson file stop serving your application onto the server and then save all your files and then start up a new Fresh So process again, so to start a new Fresh serving process All you have to do is go ahead and tie Angie knew or you can just say n Oh wait, we're not creating a new component or we want to do is say ng – o and serve so remember this has only one style at this moment So now let's see how we can actually integrate bootstrap if We actually could integrate bootstrap into our project

Okay, so our application has actually compiled and let's go ahead and see let's go ahead and inspect our page and if you go into your head part, you will see that there is a new style that has been added So this says that bootstrap version three point four point one has been added and now you can use all the styling that comes along with bootstrap 예를 들어, if I were to put this division inside a can clasp called Jumbotron this would give it a specific type of styling a Jumbotron is not exactly meant to be used like that So let's go ahead and change it to a container Now if you want to know about all these bootstrap glasses that I'm using you can very well go ahead and check out my bootstrap tutorial that I have up on a direct course site

괜찮아 So let's remove this We are not doing the styling properly at this moment Let's get back to this 괜찮아

Looks like we have actually broken something But what I wanted to show you is that we actually have bootstrap going on and I bootstrap is completely working This is bootstrap version three point four point one for us So that is guys how you would add an external CSS file to your project 괜찮아

So our next topic for today is how angular actually loads so if we go back to our code at The Germ and we analyzed all the files that we've seen 그래서 우선, you have three component files that is the component styling file click on print template file and the component type script file now, if you were to go back to your page where your application is loaded you would inspect it or to be honest if we go and see the source, so in the source, you see that there is this app Root element Now, how does the up root element know that it has to end? Third an input box and a paragraph or two Well, let me just explain that first because this is a very important concept This will help you how in learning angular because you're getting to the root and fundamentals of how angular is working

So firstly the page that is getting served by the NG serve process Is this index dot HTML file now in this index dot HTML file We have somewhat of a custom element with the selector of a brute now, if you would realize we have died in this app route selector out here in this app dot component dot t– s file in this app dot competent RTS file We have a decorator method We have a decorator class

I'm sorry and in this decorator class we have said that the selector is going to be uproot Basically, it saves a string as a selector and it gives it a value that if this is going to be used for recognizing an element or an HTML page we have then also said that the element will have its Temple thing in app dot comprehend dot HTML file Very basically when a nap root component is present on your HTML file angular knows that it has to serve this three files out here these three files out here the app component files it knows because it's tied in with the selector Now if you go ahead and see it out here there is a module file also now before we get to the module file, I'd like to tell you that the first piece of code that is actually run is always the main file so out here the main file is the main dot DS file and out here You see this line out here so out here in this file

Basically, there are few Imports The one is to enable production mode for development purposes But the most important line out here is platform browser Dynamic and it's a bootstrap module So in this bootstrap module, we are passing in the app module as an argument So since the app module is being passed as an argument

The app module part is actually invoked out here and out here You see it has another bootstrap Re so this boot shop doesn't actually refer to our bootstrap CSS framework We just included bootstrap means what should be done first when you are actually running an application so out here we are saying that we want to run the app component and the app component here happens to have this HTML file the CSS file and this types file, which are also tied into the index dot HTML, which is a fruit selector So whenever this approach selector is found on this HTML page it is going to actually serve these three files and that is exactly how an angular app is loaded onto your screen

So this workflow is very important for you to understand such that you know, where you are going wrong just in case in future debugging processes We will be having a very detailed lecture on debugging in the future So please hang on for that So this part that I just explained well acts as a precursor of knowledge for the future videos, which will need you to understand An angular application is actually being presented to you on your screen

Now moving ahead We are going to go ahead to our next topic and that is confidence And what we have here under this app folder is a component now components are the building blocks of angular everything that you see on your screen using angular is basically a component So imagine there Is this website that you see on your mobile phone and it is a website built by angular now everything on angular will be starting with the root component and they will obviously contain subcomponents and even more subcomponents after that

So basically it is a tree of components now if you would remember my flutter tutorial if you haven't watched that, please go ahead and check that out flutter is amazing and you should be learning it today Well in flutter I had said that application built using flutter is a tree of widgets Now the same analogy can be put to web page that is built using As a tree of components it's basically a unit or a building block and each framework gives it gives its building blocks a different name So for flutter, it's a widget and for angular

It's a root component or just components in himself So what we did out here is that we had a component now, let's say that we want to create another component How do we do that? Well, all you have to do is go ahead and right-click on your applications folder And what you want to say is you want to put in a new folder Now, let's call this folder

Let's say we want to have a component called servers So let's call the servers and out here What we want to do is we want to create the server files so out here we are going to create a new file So we are going to create a new file and this file is going to be called the server dot component dot HTML So why did we Choose this naming process

Well, when you are building an industry level applications you tend to forget what is what so naming something appropriately so out here, you know that this is the server dot component HTML file This gives us very good information For example, it is a server it is a component and this is the template HTML file now in this template HTML file, we could be putting anything for example at just been H3 and we could say that this is the server component that you are viewing So if this is coming on our screen, we will know that their this is a server component now we can we also need to add a new file out here So just save this file

We need a type script file first of all, so what we need to do is create a new file and this will be the server dot component TS file So TS stands for Stipe script now if you were to go ahead and check Out the app component that ES file out here you see that there is an import and then there's a class 그래서 우선, we are going to try and replicate this because that is also a component and we are making a competent manually so we will know what we want to do So first of all, we want to say export class Let's say server out here

Let's see the naming fashion of what how it is used So it says app component So to make it more clear that this is a component we could just use something of a naming structure like server component is our brackets Now, we said export because we want to be using this glass everywhere else So this was your way of telling angular that this is a component but this is not where it actually ends

You also need to tell angular by actually putting a decorator So as rate component will tell angular that this is indeed a decorator so out here if you would go ahead And again look into your components file out here You see that we have to open the confidence bar and type in the selectors now Basically we want to put in in this component is want to say how I want to select this

So we're going to say selector and I selector will be lets say a server 죄송 해요 That's not how you do it Let's just go back and as you guys can see our things are becoming much more easier because of this IDE things are getting imported into our file system Now I want to say out here is our selector will be we have to pass a string so it is going to be server

No, we can actually call this a server but that is not the proper naming fashion So just to make sure your selector doesn't actually go ahead and clash with any inbuilt selector or some selector that might probably ship with angular or you want to do is call this app server So you just put a hyphen in between and you call this app So now another thing that we need to do is parse the HTML file so you can say template URL So let's see how we can actually use the template URL pain

So you see that it is a template URL and we have to pass in the components that HTML so out here, let's go back and let's say template URL and all we have to do is pass server dot component Dot HTML now, let's see if we are missing out on anything You can always go back and check their so we have to do put the dot and the / just tell it that it is in the same Parent Directory so dot slash server dot component of HTML and for now we can skip on The Styling because there is no styling involved So we did not put a semicolon here because this is basically like an array So let's go ahead and save that so that saved successfully and now what we can do is go back into our app component file and HTML file

Let's go ahead and delete all this now what we can see is let's put an H1 just know that we are in the app component file So this is app component that we are looking at now If you guys remember we have used to select the out here that are selected for this will be app server So whenever we put an app server type of selector then H3 should be rendered with says this is a server And then that you are viewing so let's go ahead and do that

So let's go back to our app component and let's say server So since we have put our apps over here, but we should be able to do is so since we have put it up server there and S3 should be actually rendered there Now Let's go ahead and check if that actually happens Let's save all our files save that let's see if this And what do you see out here is nothing is actually getting loaded

There is no h 1 and there is no S3 either now This is because we have forgotten to actually put it in our modules So if we see that nothing has actually getting loaded there is no h 1 there is no x 3 so let's go ahead and inspect and let's go into the console And if you go ahead there, you'll see that app server is not a known element and the Beautiful part of angular is that it also gives you a solution most of the time So if app server is an angular component, then verify that it is a part of this module

So this gives us an idea that there is something missing in the app module spot out here to know that what this actually does So if we were to look at our app modules type script file, we would see that there it kind of looks like a normal type script file There are bunch of imports in the beginning then there is a decorator which is the engi module decorator and it has a bunch of Is now in these are days we have understood what the boot strap ba Does it basically tells which component should be loaded or with service should be loaded when our app is noting for the first time now, we also need to tell angular that there is another component that you should be aware of This is not done automatically

If you are creating your servers and components manually So what we need to do is go ahead and tell angular that there is a server component So if we put a server component, we also see that there is another import line that has been added so out here This is typescript This is the way you tell typescript that there is a server component and this is the way you tell angular that there's a server component now if you were to go ahead and save that we can now see that there is two parts loaded one says that up component and the other said this is the server component that you are viewing if you want to go ahead and inspect you would see that This is a head then this is a body and inside the a fruit

We will have the app server component that is running inside the app So we see that there is an H3, which is basically this part So this is how you can create your components manually and then add them to your project and add them successfully do so that angular and typescript both understand how your compliments are being made Now You can also add a styling to your component by just adding a styling folder I mean styling file so you will be calling this the server dot component dot CSS

So this is going to be a CSS file and out here we can just say since we have an H3, you can say color will be lets say blue Let's go ahead and save that And now what we need to do is go into the typescript file and we also need to give the Styles URL and this is going to be so let's go ahead and see how the styles are actually put this is put in an area So that's exactly what we're going to do or to so we want to say is this is copy this hour because it's going to be the CSS file in the similar fashion go ahead and paste that in and just jeans is just CSS Let's go ahead and save that

And now if we go ahead and load it, 우리는 볼 것이다 that our styling I has also been applied to our components So this is a server component This is the app component which makes it very clear Now, if you are actually a guy who likes things to be much more automatic and seamless like me worry not because angular gives you the power to create components and not worry about if they're included in your Everything just through the CLI

So if we were to go to our partial bar and we were to actually run a command that says NG generate component and we could say let's say so we have a server so we need somebody to let's say sub server So stop Now what the CLI will do is it will go ahead and create everything that you need for your component So we see we have a sub server folder out here The sub server has a sub server that CSS file and this also has a sub server that component file only we can go and put the sews it has a component file has a paragraph that sets up server works is also the testing file which we didn't create this also the components file out here

I mean the typescript file and as you guys can see it says apps Observer So that is a selector that you use it with So let's go ahead and use this so we go ahead and put this into our servers HTML file and we can just say app some server Let's go ahead and save that Now what you should see is that there is a sub server works out here

So basically what you did was you created a component through the Ally and you basically just used it this is how you are going to be using most of your components creating most of it complements and that is through the CLI, I just wanted to show you how you can do it manually to just so that you know, how a server is written I mean how a confidence is written and what each line of code means when a component is also written now if you were to go ahead and compare this there is a Constructor function and there is this NG on in it We will get to these parts later in our playlist because for now if I were to go into the nuances of engine in it and a Constructor, it would only create chaos and confusion in your mind So that was about components for now So it's time for our first assignment OK guys

So that is how you use and create components using the angular CLI now coming back to the server component that we created I would like to bring to your notice a few different things that you can do So Of all let's go ahead and analyze the selected part So if you have any experience with web development, you will know that a selector is basically a way of selecting stuff or elements on your HTML page Now when we say app server like this out here this could be anything

This could be a property This could be a class or this could be an HTML element to for now This is an HTML element, but let me just show you this can also be used as a class So let's see we say it's dot app server and let's go ahead and save that So this is going to be dot app server

Now Let's go ahead and find very actually used our server So we have used Observer like this Now if you would comment this out and let's say we put in a div that Hal class and it said app server Now you see this is a silver confident that you are viewing and the sub server works

So let's go ahead and inspect that Let's go into the body That's the a fruit and then there's a div which has a class app server instead of an app server competent So what we did was that we created an App server and we meet the class a selector So the select is basically a class numb then the class can also have its own styling and that is basically how you do it

Now instead of actually writing your temple to URLs like this You could also its command this out You could also say something like a template see a template could be just a template and you are going to put your template in these goats Now this could be something like sub server Okay, so this will basically put the apps observer in this template

So instead of a template URL you could be using a template to and instead of hairstyles URL Basically, you can do some inline styling Now before we go ahead with our next topic What I would like you all to do is solve an assignment for me So this assignment will test how good you are at creating your components

So let's go back and just change everything back to the way it was So let's save it Save this save this save everything So out here we can just say app server again, and now that creates an observer for us 괜찮아

So this is save and now I want you guys to do a basic assignment actually, so let me just write down the instructions for the assignment 괜찮아 So your for your first assignment, this is exactly what you are going to do So as you guys can see on the screen, I have put down three instructions 그래서 우선, what you have to do is create three components called red green and yellow now, we have to use them in the app component part and then we have to give them some appropriate styling and probably an appropriate message

So you guys can pause the video out here and go ahead and try and create these three components and then come back if you actually are successful or not also and check out the solution that I will provide you guys OK guys, so that was the first assignment I just gave you so I hope you guys had balls to screen when I told you that I'm giving you guys an assignment and I hope you guys actually try to solve it because in this part we are going to try and solve the assignment I just gave you so this part you can use to see how correct you will well it was a pretty easy assignment So I hope most of you guys got it because that means I could successfully teach you how to actually use components So for the solution we have created out here angular folder that says assignment 1 and it has nothing in it

So, let me just go ahead and open it with Visual Studio code Out here if I would go ahead and go to my source folder into the app folder and just go ahead into the spec dot DS into the typescript file rather and we would go ahead out here and I would serve this you would see that there is nothing Okay, so if we were to just serve this file out here you would see that it is the normal application that ships with angular So let's just NG open and serve Okay, so as you guys can see it says welcome to assignment 1 and this is the basic application that angler ships with now what we're going to do is we're going to delete everything and we are going to start from scratch

Now Let's go back and see what we actually wanted to do So what we have to do is create three components called red green and yellow So let's go ahead and do that first So to do create these elements

가장 먼저, let's go ahead and delete all this garbage that we do not need save it again and let's just keep the title So to keep the title just pay attention to what I'm doing keep the title This is very you don't need to do this to get the assignment correct All you need to do is make the components So this is just me being Fancy with you guys

So this or we could say welcome to assignment one make this an H1 so that it looks better Yeah, so welcome to assignment 1 So that's it Now, what we have to do is create three components So to create three components what we want to do is create a new terminal in Visual Studio code so that we can create the confidence really easily and out here

We want to type NG generate component red and we're going to do this for three different times So we're going to have the red component We are also going to have the blue component And we are also going to have the yellow confident Now since we're doing this for the CLI are AB dot module automatically gets updated with red blue and yellow now

All we need to do out here is use them because that is a second part We have to use them in app component So our app component is out here This is our app component So what we can do is say app read this will produce the red part

This will produce the app and blue port And this will produce the app yellow Let's go ahead and save it Obviously is read books blue Works yellow looks so we have successfully created three components and we have put them in our app confident But now what we need to do is give them their styling

So let's go ahead and go and do the separate components Let's open up their styling files We want to say because we already know that it's a paragraph that works there So paragraph will have border or of since this is the blue component will give it a blue border So we 1px solid and blue and maybe we can also turn the color to Sky Blue

I'm using very basic colors out here That's also copy this because we're going to be using a very similar type of styling for red and yellow So let's go into red and let's face that we want this to be red and this to be crimson and let's go into yellow and let's say the same thing This is going to be yellow We could use heal and you could also use another color

Maybe much more pale yellow Let's keep it dark because fonts need to be dark actually So let's see if these let's save this file Let's save this file and let's see if this file now Let's go back and see how it actually is working

So blue Works yellow box We need to go and put up some more styling for the yellow part because that seems to be kind of going haywire So let's go to Yellow dot CSS, lets go here So we have actually done this in the app component Let's save this go back to Yellow go back a yellow dot CSS faces out here and let's save it

So now our yellow is yellow or blue is blue and I read I read you can also add some new styling to them by adding a background color So this is also going to be a yellow Or we can rather or choose some different yellow Maybe it's making much pelo on the yellow side Let's copy this line then red component that CSS

괜찮아 So for red we can choose something of Peel red sorts that makes it like that and in blue we can choose something of a blue sot So the blue we can go for a paler blue and that should be much more pillow Let's save all of this now 어디 보자

So yeah, we have a blue background a yellow background Why isn't a red background working? We haven't saved it it seems and I read background is working to so we have successfully completed our assignment 1 So I hope you guys are satisfied with the solution I hope you guys could do it on your own do it because that's exactly what matters 괜찮아

So now that we have learned about how confident are the building blocks we even made our own custom components and we even did an assignment on one So it's time we move on to the next topic and that is data binding So data binding is like communication Well, what are we communicating its communication between your type script file? And your template so basically your business logic and your and what basically the user sees so suppose you click a button on the screen and you want to take some action according to that or you are retrieving some information from a calculation or from a server and you want to put that on the screen Well, you do that with the help of data binding now, there are two types of data binding

The first one is string interpolation and second one is property binding So this is the way of you out putting something on to the screen So string interpolation and property binding So let's go ahead and see how we can do them So let's go back to our assignment that we had just done

그래서 우선, what we want to do out here is go to the modules and we actually want to remove all these components Let's go ahead and just remove these components Let's go ahead and remove these Imports and then we can go ahead and just delete these files out Let's leave that sleep this Let's also delete this

Now, let's go back to our app component and we have removed these So app module we have to actually save the stew Now that we have saved it we go ahead and see that it's just that it says welcome to assignment 1 now I'll tell you see that we are using this double curly braces and this is string interpolation So what the string interpolation mean? Well, it converts anything any variable any string like this into an interpolated format and it shows it to you on the screen

So let me just give you a rather better example of a usage of string interpolation So let's go back to our app component that HTML and out here you want to say there is a paragraph and in this paragraph We are outputting some server status So let's say server is a server with be ID is offline So we want to actually put out something like this So at this moment it will just simply say server with PID is offline, right? But what if a server had Certain name so server name let's see – – – with be IDE – – is at the status of – laughs – lets see now

What we need to do is go ahead and go into our app component DS file So that is our dark script file And now if you're going to do is create a few of what of these variables that we need So first of all is server name and let's say the server name is Apollo Okay, and we also need a server PID

So server PID is going to be let's say 11, and we also need a server status And then we can set the server status to offline So this will be a string So that's why we just surround them with our single quotes So now we can say something like this on our components dot HTML page

So if you remember we were getting the title of our General application that ships in with angular when you make a new angular project, you see that it says welcome to so-and-so application So that was done with string of depilation If you remember it was a curly braces that held something like title in there, right so out here what we can do is put some variable or even a function that will return a string or anything Basically that can be converted into a string and that will be displayed out here between these curly braces So what we can do is we can reference the server name

So server name is basically Captain like this and then with pi D so we can put the PID out here So this is a number so the number can Also be converted into a string So therefore string interpolation will work in this process and we can also put in the server status, of course, so we put in the server status by referencing the variable that holds the server status 괜찮아 So now we have done the string interpolation

So let's go ahead and see what our output looks like So server named Apollo with PID 11 that is process ID 11 is offline Now I had also said that we could put in a function out here So let's go ahead and create a function

So in this function, we will basically toggle the server ID so we can say toggle So in this function, we will basically be toggling the server status So we will say something like toggles server status and this will return this dot server status equals to not okay So what we do out here is for talking this we will say equals to false So if it's false, let's just understand that it is going to be offline

We could put in some logic to say that falls will print out offline, but let's not get into that for now so we can say something like or rather Let's not deal with this Let's do it the way Should be done not be lazy people Now we can say there is a status flag and it is set to true or false in this case because it is offline

Now this dot service status flag will be made throughout here So status equals to true So we're going to make it true or rather we could make it not of this dot server status status flag And Status flag now that will work properly because this will basically convert it and there should be no spaces out there and we can say if this start server status flag equals to true so we can say if this does that is flag equals true We have to open more braces and we'll say server status this dot server status will be set to online

Okay, and there we go And after this has been done we can just return this dot server status 권리 So basically what is happening out here is we have set a flag Okay missing white space Quick Fix so we can put in a triple equals just to make sure it's exactly true and not only check the equivalence that is and also check the value so out here what we are doing is we are setting up status flag to false and according to that state is flag

We are changing the server status to online or offline 괜찮아 So now that we have put in this function we can use that function by calling it in our string interpolation method So just instead of putting our variable we can put in the function and this will change the server status to online now Basically what we are doing here is really simple is it's returning a string and it's being converted into a string

괜찮아 So now that we have toggled the server status to online and we did that through passing a function in the string interpolation So now let's understand how we can do property binding so every HTML element has some property or the other these Lists can be easily found on MD n that is the Mozilla developer Network So let me just give you an example of a property So let's say we had a button to toggle the server status further from offline to online again, and again instead of just being toggled from offline to online hard-coded into the code

So let's say we had a button and let's say this said toggle server status, right? So if we had something like a button like toggle server status, so we have a button like this out here, but it really doesn't do much at this moment But let's say just for the sake of showing property binding let's say the button was disabled and you wanted this button to be actually enabled after 2 seconds that your website has loaded up just so that there are no discrepancies in the button, press Ok, so we can achieve that by writing a Constructor function in our class component so out here you can make a Constructor so we can say set timeout So we have to first give the time after which it will be enabled So let's say two and a half seconds So it's two and a half seconds

And now we have to put in of logic of actually turning this button to be enabled So let's say we have a variable called button state so button State at this moment should be true because our button is disabled first It's just a the Sable and then it should get enabled so we have to say this dot button State equals to false 권리? So now that we have done that all we have to do is go ahead and bind this property So we do property binding by putting the property in between the square bracket and then binding it to the outcome of a variable or a function so out here we can say we are going to bind the two button State

괜찮아 We need double quotes for this I'm sorry not single quotes So button State now Is happening out here after the Constructor is going to get executed I bought in state is going to become false So disabled will become false

And first of all, it will be true because a but instead being true for the first two and a half seconds And actually let's see this in action So our page is loading and after two and a half seconds are button becomes active So let me just show that to you again It's inactive for two and a half seconds and then it suddenly becomes active

So this is how you perform property binding So what we just saw here is we saw string interpolation in action We passed a string interpolation arguments with variable names and he even did a function then following that we did property binding so for property binding we first created a button so that we can toggle the server status, but we haven't really added that functionality yet yet to do that But what we did was we binded the disabled property of the button to a certain variable now, this could have also been a Ocean and it will be the same way You just fasten the function with the brackets and the work

And now what we will see is something that is our next topic and that is event binding So event binding is basically binding Dom events to certain logic that will reside in your typescript So we want to bind our toggle service status that we had created out here because we are basically toggling the server status and then returning the server status so we can basically do that by passing an event So every button has an event called click and to click we will pass the event toggle server status with the brackets now this will become active after 25 seconds

And basically it's not working as we wanted it to so let's go ahead and inspect it Okay, so it's not working because we are talking the server status out here And what we want to do is return the server status, so it should actually work to be honest So this top server status? So if we were to just output the server status out here Okay, so we do not have a logic out here

So to make it back to go offline So else we can just add something like else this start server status equals offline So now that we have set up our function to even display offline and because we will first changing it back to online and there was no real logic to change it back to offline again So let's do that and now we can have a talking happening out here so we can change it to online teaching it offline So now we have a button that can actually toggle our service status from online to offline and so forth and so on so that was event binding and property binding and we also saw string interpolation

So with the help of event binding and property binding now, we have a button that can actually make it offline and online but there's another way that we can do this and that is two way binding So for two-way binding what we're going to see is basically we are going to combine property binding and event binding So let's try and do that So for event binding let's go back to our code editor and out here Let's go to our HTML page and what we want to say

Till okay So let's remove all this so we can make this server information So first of all, we can have a form So basically we can have an input of type text and this will take in let's say let's put a place holder and let's put in server name Let's also put a button below this and this will be a submit button or rather instead of a button what we can do to show Two Way binding is put in a paragraph and we are going to type out our server name out here and we are going to put in the server name here

So server name is going to be here So this is basically string interpolation And what I am interpolating is the server name that we had created 괜찮아 So this has a capital S

So let's not forget that so our capital S should be out here and what we are going to do is basically use NG model So to use NG model what you need to do Is go into your app module out here So in your app module what you need to import is basically the forms module So to import the forms module you have to say import forms module from other eight angular / forms

So that's it And we have to put this in single quotes and out here What we need to do is let's go ahead and see what is saying disabled rule import spacing So we basically important the forms module and this forms module will have a functionality called ngmodel So anti model will let us bind

Whatever is being typed to be actually bind to a certain variable so we can put that ng-model property to our input So this NG model will be binded as an event and also as a property so we need to pass in the server name So, let's see We have a server name called Ebola out here So it's already prefilled with Apollo and let's say we want to name our server something else

So let's call it the Gixxer So Jackson could be their name of a server And as you guys can see it is being automatically updated out here So that is two way binding So just to give you guys the difference between two way binding and one way binding if we can do out here is say put a placeholder

So this is the same part we will have server name So what we can do is make another input and this time around we are going to put ngmodel as just the property So edgy model with camel casing and we are going to say it will be binder to server name So let's bind it to server name and let's see what happens So now we have two inputs and everything is filled with Apollo

Now if you see out here if I go ahead and change a poll out here It is not automatically changing in the Have to because it is only one way binded while out here If we were to give the name Paul to our server it would automatically updated everywhere But if you were to go ahead and delete little bit it's not really updating at the out here because it's not two-way binding You need a event to actually go ahead and submit this so that your event and your property gets binded together

And basically you have two way binding them Okay, so that does it and just to make this a little more interesting Let's make this something like H1 so we can put an x 2 and the say input server Information 괜찮아

So once we have that ready so we can say server name and the server ID will be the PID basically so we have an input server name part and then we can display so information out here so display This place so information what we can do is let's just copy this out So server PID the surf PID I constantly forget it server PID So that's why so be ID will be presented and server status So now we basically have a small little son of a bitch going on and we have a button that can toggle the server status

We have a place where we can input the server name So what we just saw out here is basically we saw string interpolation So all this output is being shown to you through string interpolation We are buying a property do this button and with the help of that we are talking it for the first two point five seconds This is disabled now and this will become enabled then we saw a event binding where we actually toggle the server status with the help of a button and then we also sought to way prevent binding where we put in an input method or an input element and we are constantly displaying what is there in the input with the help of two way binding

So this brings us to our second assignment for today And in this video, I would like to say that again, please try and solve this and mint on your own and these are the instructions for your second assignment So for assignment What you have to do is create a page that can take the input of a first name using two-way data binding and you have to Output the name using string interpolation So again for using two-way data-binding remember you have to use NG model and use NG model You have to go and import the forms module and to your app into your apps dot module the TS file and in that app start module dot ES file, you will also have to declare it out there

So don't forget to do all that and in the output you have to actually use string interpolation Then we have to add a button to reset the name to a blank string So this should be something like property binding I guess I won't know until I solve it myself And again this button should be disabled if the name field is currently empty

So I would suggest that you pause the video right here and you go ahead and solve this and if you can't solve it you can always follow along with me because I will be going to the solution of this assignment right now So let's go back to our code editor and what we want to do now is It's try and solve assignment number two So I'm going to keep on editing the assignment project that we had made I'm not going to make new assignment project So what we're going to do is basically remove everything from here

Let's remove everything We will also be needing some New Logic So this is not going to work for us So let's go ahead and remove that We also don't need a Constructor function

We don't need anything We just need the class to be there That's all at this moment I will also let entry module be there in our app start module because we will be needing it So I'm not going to edit this out

So let me just say that I have saved everything and now all we have is a blank canvas that we can start developing on So our first instruction says that we have to create a page that can take the input of the first name using two-way data binding So let's see you want the user to know that he is in putting his first name so label and this will be 4 so going to be for first name so we can say F name something like this and then we can say First name and out here What we can do is put an input that has type text and it also has a name of fname So the label is now bind it to our input

This is how you should probably always code We also should put in a placeholder even though we have a label because that is just good practice So we are going to say first name in the placeholder and now we have a place that we can put in our first name in so we can also put in a space out here First name is going to be here 권리? And we also need to input our first name in a paragraph according to the second instruction so we can put it out in a paragraph and we can use string interpolation for this and we can just use variable called name because we are only dealing with one name

There's no last name so we can just create a variable called name now we go back to our typescript and we create a variable called name and let's keep it blank for now Okay, we are not going to use double quotes We are going to use single quotes and let's keep it blank for now So now we can say our name which should be displayed out here So basically what we need to do is do a binding

So that is pretty simple We learned that really easily that we can do this to the NG model and we can bind it to the property of name or rather the variable name that we just created so out here we will have a name and we can just go ahead and start typing now and our name gets typed out here Now The other thing that we need to do is we need to add a button to reset the name to a blank string So first let's go ahead and create that button for ourselves

So we need a button and this button should said reset name and basically it should have a function or an event whenever it's clicked So whenever this click it should have a function that basically goes ahead and turns the name blank again so we can have a function called reset name So reset name is going to be our function So let's go ahead and create that function now So reset name is going to be our function

And what we want to do is set this dot name equals to blank again We can actually do this without the event I guess we can fix the missing white space Let's see if we are actually if you do reset name, it goes ahead and recites the name to blank so we have minded it to an event and that is the click event, and we need reset name out here We are not passing anything because it is directly being by the to the property or rather the event out here

So now we need to bind it to a property So the property that we are going to bind the two is disabled So the disabled property is going to now check a function basically to see if the name has any value or not So this can be really easily done by actually saying something like named length 0, but we are not going to try and add cold out here So let's just stick to the functions

사실은 We could actually have done a tertiary operation and basically down it in one line, but why do that? So, let's see check name Check name is either going to return true or false So now we have check name and what we can say is if this dot name equals to equals 2 and we can also set state So state is true wheeler need the state variable to actually handle the disabled functionality

So if this dot name is equals to equals to equals to blank or want to say is the start state will remain true or what we can do is if it is unequal to this what we can do is say this dot State equals 2 So let's go over our logic again So if our state is true and if it is not an empty string rather we are going to turn our disabled to false So if it is false out there what we need to do out here is a check name Okay, so we made a mistake

우리는 그렇게 할 수 없다 Let's see inspect console and template can't bind the disabled since it isn't a known property of button 괜찮아 So disabled is not the known property because it's disabled So that was the silly error that we had made now

어디 보자 What's go ahead and load it 괜찮아 So check name is not a function 괜찮아

So let's go ahead and use check name We actually forgotten to save this out here go ahead and put the white space there So now we have a button that can actually set the string to a blank string again But according to our assignment it says that this button should be disabled if the name is empty So this way we can actually practice our property binding

So basically we have to bind the property disabled to a function that will basically return the state So let's say it is a function that is called check Name and now let's go ahead and create this function So check name is going to be our function and put that in double quotes Now, let's go back to our app module out here

So let's create a state first down The state is going to be false 가장 먼저, and let's say we are going to have another function called check name and in check name, what we want to do is check whether so we can do the checking part with an if statement So this dot name we are checking for the name if it is empty string and if it is an empty string what we want to do is make our button disabled and that can be done by just returning true in our state variable So we're going to set it to true and we are going to return it

So return this talk state So if you return the start State out here we are going to have a button now that is basically the Sable dough 괜찮아 가장 먼저, we need to go ahead and check what we have done wrong So we need to go ahead and save this so check name is actually being passed

Now Let's go ahead and load that so now we see that we have a button that is disabled But as soon as we start typing the button gets enabled and we can click it to basically put it back into disabled State and also making the first name String into a blank string So this is the solution to assignment number two I hope you guys had followed along with me

And if you had any doubts when solving it on your own the doubts have been cleared now now let's move ahead and let's look at the last topic for our angular Basics today and that is directives So what exactly are directives well, let's head over to angular's site and let's see what they are saying about directors Well, it says that there are two types of directives out here So one is attribute directive and one is a structural directive So an attribute directive changes the appearance or behavior of a Dom element

So in short a directive is basically an instruction The Dome now this instruction may be to change the Dom due to some attribute or it could structurally change the Dome tube So that is a structural director So structural directives are basically used in places where you want to input a certain Let's say a Division I got here division is being used with the directive ng-if and we are outputting hero dot name out here So what this is is basically there is an if statement and we will get to what ng-if means just in a moment, but this is a directive and this has instructions written in a module which we will also get into future lectures about directives where we take a much much deeper look into what directives are and how custom directives can be built by you but for now we are just going to understand what a directive does

So in short a directive is a structure and this structure gives instructions to the Dom So let's look what a directive looks like and how directives can be made by just reading the documentation so To build a directive what we have to say is let's say we give a directive as app highlight So we have created directives Ang generate directive So this is a CLI command out here so we can generate directives like that But for now, what we are going to do is we are going to use some built-in directives to understand how attribute directors and how structural directives are actually working

So the directives that we are going to be using our ng-if NG else So basically if and else and ng4, so these are the three directives that we are going to be using today And after I show you how to use these directives I will also be giving you an assignment and that will be your last assignment for this angular tutorial and we will wrap it up after that in the future We will be actually discussing every single bit that we have learnt about the day that is components data binding two-way data-binding directives Everything will be done in much more detail

And when we are doing this in detail, we will have an In project, so we will be building a project through the course of this playlist and by the end you will feel pretty confident that you can go out there and pretty much crack angular interview job out there because we will be teaching you how to build an app and in the end we will also train you for angular interview questions Okay, but for now let's just focus on how to use the built-in directives that ship with angular So do you use the built-in directives? Let's see what we can do So the first directive that we want to use is basically an NG if directive so, let's see what we can do to show ngf So ngf is basically to show something structurally

Let's put up an edge one that says this is an example of ng-if now we want to show something if a variable is true and we want to show something else if it is false, right so we can do that by simply saying B, so we will Paragraph and let's say ng-if so we are going to tie it up to an expression and we're going to call this expression of flag and we are going to say flag is true and we are going to say flag is false Otherwise so out here to show flag is false Otherwise, we are going to use something called a local reference So a local reference is used within the NG template So for the NG template, we have to give a local reference name

So let's call it the else block And in the else block we want to put out a paragraph that says flag is false Now We need some way to actually toggle this flag So let's create a button

So we are going to say something like toggle flag and I'll cheer for toggling flag We are going to put an event and we are going to bind this event to a function that toggles our flag So we are going to call this function toggle flag Okay, so we have our template created now All we need to do is add the business Logic for this

So for all the logic that we need to do is create a variable called flag 가장 먼저, so let's go ahead and delete all this that we don't need so we are going to have a variable called flag and flag will be first of all set to true now There is also going to be a function called toga flag and in this function what we are Do is we are just going to toggle it now to toggle this All we can do is this dot flag equals 2 not off this dot flag So this is a really easy way to toggle a variable and just now we can just return this dot flag

So since we're doing that so now what we can do is save this and let's see how that actually works So says flag is true and flag is false So flag is false is actually not being displayed because we have not referenced this local reference that we have created So we have a local reference and we need to create it and we do that by saying else we create the else block Now, let's go ahead and save that

Let's see flag is true And now flag is false flag is true flag is false So to make sure that we are actually putting up two different paragraphs So let's go ahead and inspect this Let's go into our body

Let's go in to uproot Let's see this button So this has a paragraph created out here So let's toggle this and a new paragraph gets created which says flag is false Now flag is true flag is false flag is true flag is false

So this is a brilliant way to actually show something very conditionally Now I can show you this is a other block that we are actually showing instead of one block being constantly just modified It is a separate Block in itself So that is a very important thing to know So let's go ahead and do that again

So let's save it And now let's go ahead and see what we can get So in our head or rather in the body, we have the uproot and now we have paragraph that says flag is true And now there is another paragraph at the I d– flash which is a very wrong way to spell false but it proves the point that this is a new Block in itself So this is how you can use ng-if now, let's look at another interesting inbuilt directive that ships with angular and that is edgy style

So with any style what you can do is you can give Dynamic styling depending on a certain condition Now if you analyze what we have out here, we do have a certain condition which is where the flag is true or flag is false Now, what we want to do is we want to color this This is an example of ngif into red or green if flag is true or false respectively so we can do that very easily with the help of something called NG style So with any style oppa do is we A property now this property may not be in single quotation marks

So you can say color and what you can do is you can put an expression Now you can say something like a function that is get color And you could execute that Now what we need to do is we need to go ahead and create this function called get color So we are going to get the color and we are going to return a color that is probably a string according to the flag

So if so, what we want to say is if this dot flag is equal to equal to true we want to return You want to turn green and if it is false we wanted to turn red So let's go ahead and see so as you guys can see this is green right now and this turns red and then turns green and red again So what we did basically we passed an expression and in this expression, we are putting in a color and the get color method is returning a string which either says red or green So this is how you can dynamically add styles to your elements on your HTML page Now another way to do Dynamic styling is with the help of NG class

So what we can do out here is we can add a class to an element dynamically So let's say we have another H2 and let's say this is just an example of NG class Now, what I want to do is we want to turn this So the clasp you want to add is basically let's call it white and we want to add this when get color returns true Let's say so we just want to go ahead and paste that logic out there

And now what we have to do is go into the app component CSS file and create a class called White and this class will basically put a black border border:1px solid black It will rather let's make it a red and then we want a background color of let's say black and we want the font color to go white So this is a bunch of styling that we are adding which is basically the real reason you use classes in CSS so that you can use a bunch of styling together now that we have created the class Let's go ahead and save all our files Let's go ahead and see what it looks like

So this is what it looks like This is just an example of ing class Now when this is set to false so class is removed Let me just show that to you So if we go ahead in the body part and go in to uproot and just look at this class that will be added

So we add a class called White and then we remove a class called White class called White and this is how Angie class can be used to put in all sorts of dynamic styling into your HTML elements with the help of NG glass 괜찮아 So the next directive that we are going to have a look at is called ng4 So let me just give you guys a quick example of how to use NG for before I dive into the last assignment of this tutorial So Angie for is used when you actually want to iterate through an array

So let me just show you what I mean So let's say you had a bunch of names or let's make something very viable 그래서 우선, let's call this something like the student roster So H1 So this is called the student roster now suppose you had a method so input and what we are going to say is placeholder is name and out here We also want to display the name

So all the name of the students we want to display so student roster and there will be a button to say submit So this is a sub MIT student name and this will have a function So whenever we click it, we want to add the name that we just entered into Let's say another so we can say that is the name of the function Now if we want to do is go ahead and first of all create a student roster so student roster is equal to let's say let's add some pre-built students

So Aria and let's say Rohit and let's say oh Pasadena Now, what we want to do is let me just fix these white spaces up Now, what we want to do is we want to display the student roster And then we also want to add to the student roster every time the button is clicked So we have a function for that and it's called ad and basically what we want to do is we want to push an element so that could be a current name so current name could be Blank for now

And let's leave it like that And what we want to say is this dot student roster dot push want to push in this start current name So what this will do is this will push in the current name Let's go ahead and make a place so that we can display it Now

The whole point is that we want to display it in one single item We do not want to create let's say a paragraph for every time this list has to be populated So what we can do is we can simply create a list item and out here we can just say Ang for let's say names in the student roster So student roster, so is that how we had named it student roster and that's exactly how we are named it and what we want to display out is names So what we have done right now is we are pushing in something but what exactly are we pushing in? Well, we need to add that to our input

So what you need to do is say NG model and we are going to ng-model this into the current name So now that we have done that now if we want to do is we just want to interpolate the name out here So this will just display the names So this is going to be names Let's go ahead and save that

Let's see that if it's dips faces names So we have names are arrowheads and a pasta So let's say someone like Rahul also joins the class and we can see some ID student and Rahul is now added to the student roster 괜찮아 So this is how you can basically use NG for we have one list item

And basically it is going around And circulating through everything that is there in this array just out here So now that we have seen the usage of NG f and g if else and ng4, let's go ahead and do our last assignment Let's not forget We also saw how we can use Dynamic styling

So we are also going to incorporate that into our assignment So let me just go ahead and type out the instructions for your assignment Okay guys, so this is your last assignment I will again remind you that for assignments You have to pause the screen and try and do the assignment on your own and then you can compare Your solution with the code along part that comes after the assignment So for assignment number three, we have create a button to toggle a paragraph display

The paragraph could be saying anything So after that we have to lock the number of times the button was clicked Ok, so it says barn out here but it's button was clicked and after the fifth click we have to give some specific style to the log 괜찮아 So this seems like a pretty easy

Thing to do What we have to do out here is basically get rid of everything that is here And let's first create a button that says toggle display and then we can add a paragraph that says lorem ipsum So lorem ipsum is just a random paragraph So let's go ahead and see this So this is toggle display but toggle display at this moment does nothing so we have to put a functionality into the click the click will basically return true or false so we can bind us to a function that lets say toggle display

So this will return true or false So we have to go ahead and create the toggle display method first So toggle display And what we want to say, is this start State, let's see So let's create a state variable first

So state is going to be true and toggling is basically what we had learned that we have to turn it into something that it is not so this state equals to not of this state and that should do it for us So this will toggle the display So now that we have toggle the display now, all we have to do is bind this logic so we say ng -if and we only want to show this if state is equal to equal to true So if that is what we have done correctly, we are talking the display and this is true Now what we need to do

Another thing is according to the instructions of the assignment is that if the log the number of times the button was clicked So what we need is basically a counter to count the number of times we have click the button now every time the button is clicked we want to actually increase the counter and we can simply do that with an incremental statement So this dot counter now what we want to do is we want to say out here We want to create a paragraph and this will have n G4 and so click of Click so rather counter So for n G4 this needs to be pushed into an array, so we are going to say button click

승인 So there's another way to do this We don't really need a counter or rather we can make counter into an array itself and when this is clicked, all we need to do is say this dot counter dot push counter dot length plus 1 So we're going to say this dot countered at length plus 1 so the length initially is 0 so this should just go ahead and add it to this counter Now, what we want to do is we also want to cycle through this array of counters

So Clicks in counters And what we want to do is we want to print out the click information 그래서 보자 So now that we have actually put the logic to push the length of a counter into our array we need to do and cycle this array So to cycle the array we are going to create a paragraph and we're going to say ng4

And we're going to say clicks of counter and what we are going to try and interpolate out here is the counter or rather the clicks and let's see if that works So out here we have a display are going to click it once click it twice and we can see it goes on and on and on and we have kind of created a counter and this is kind of logging into all down now that we have set up our counter for our toggling All we need to do is follow the last instruction and that is after the fifth click We have to give some specific style to the log Okay, so we can do this with the help of NG Styles

So NG Styles Let's see We want to make the color of our font blue only when get length is more than 5 so get length is a function So this will return some value or the other So let's go ahead and create that too So get length is going to react and create if it's see this dot counter dot length is greater than 4 Then we want to return the string blue else

We want to return string black So now we have function that returns something and we have binded that function with the color Style with use of NG style director So let's go ahead and see if this works for us So let's toggle the display 1 2 3 4 5 and that has turned our list into a blue list just after 5:00 그래서 이것은 how you would approach the solution to assignment 3 and this brings us to the end of this angular tutorial

We learnt a lot today We saw what is angular We saw the differences that angular 8 has brought about in the industry after that We also started with our installation of angular Then we went ahead and set up our project

We learned how to create our own custom confidence manually and through the CLI, then we came to know how to use these components We did data binding did property binding and then we did event binding which of course includes two way binding then of course, we saw the inbuilt directives and what exactly did Tips are and this brings us to the end of the basics that you need to actually make an application through angular Welcome everyone This is Swati from Eureka in today's session will go through react Yes tutorial

So if you guys are familiar with the term react chairs, then you might know that it's a front-end Library developed by Facebook So today we'll learn in and out of reactors But before we start let Explorer youngjae's application I'm sure all of us spend a lot of time on Facebook If not a lot at least some so all of you can easily relate that this application looks exactly like Facebook comment section in this complication

We can add a new comment delete an existing comment or even can reply to some other common Let me show you how here I'm adding a comment I can delete my comment I can even delete some others comment if I have the authority and then I can reply to others comment like this perhaps you would have noticed whether I'm adding or deleting comments only that section is getting updated instead of the entire page So what I'm trying to say is that we do not have to reload

Refresh the entire application to see the updates So how exactly is this happening? Well, this is the magic of reactjs and that is what we are going to learn today But here some of you might ask that why the anxious when there are so many other Frameworks available out there to understand this Let's take up Facebook as example

So let's go back to the year of 2009 2010 when Facebook used to look somewhat like this If you guys remember during this time, you have to repeatedly reload the page for new updates at the back end the Facebook was using the operational data flow as you can see from this diagram the data came from various sources, like the initial leader the real-time data or the user input data Now this data was passed to the dispatcher then to the store and then ultimately came to the view now, we will the part where the user is actually interacting with the application and being a user whatever you see on the browser as a web page is the view itself So if there is a change in data from any These sources from the back end in order to reflect those changes on The View you have to refresh the entire page and then it seemed by the user This surely was not user-friendly and moreover this traditional data blue had some drawbacks like it use the Dom now

What is a dom dom stands for document object model It is an object that is created by the browser Each time a web page has loaded what does don't it was it can dynamically add or remove elements from a webpage at the bakit? But each time it did that the browser had to create a new Dom object for the same webpage this led to more memory consumption which ultimately made our application slow Let's take another example to understand this suppose This is an application in which we have four blocks 1234 Suppose

There is a change in Block one from the back end, but in order to see those changes, we had to reload the entire page and then only we can see the changes Now as you can see after reloading the one became one over so guys this is where the reality is comes into the picture with react Our entire application is divided into various components Now each time data is added it will automatically update the specific component whose state has actually changed So if we have changed in Block one, it will automatically change the block one only without reloading the entire page this reduced our page reloading Dusk and because of this the you I became more user-friendly moreover the react uses a virtual Dom instead of the real Dom which makes our applications lighter and faster

Now, what is virtual Dom will understand it later in this tutorial for now Let's see how we act change Facebook's UI So Facebook started implementing reactjs in its Newsfeed section since 2011 after this, it's you I became more user-friendly now whenever new updates gathered a new stories button popped up at the top of the page now clicking on this button will automatically reload only the newsfeed section without even touching the rest of the page this drastically improve the applications performance So what changed at the back end at the back and it still use the traditional leader flow, but now instead of loading the entire page again, what reacted was it blue of the previous View when did the components for the update and then place the new view in place of the whole one

This was possible because unlike other Frameworks react don't have any explicit data binding in react The only thing we have is a render function, which gets called once for each component in this render function We tell how our component will look like at any point of time Then this render function returns a An overview since the component can compose a real component The render function gets called recursively resulting in building up the whole view

So now that you have understood that why we use real chairs, let's now proceed with our tutorial before we start off Let's take a quick look on today's agenda today will first understand what exactly is reactive and then we'll find out some of its major advantages then I'll show you how to install reactors on your systems Once we are done with the installation will start coding with reactors by taking up a simple program of hello world, then we'll jump onto the various fundamental concepts which all night behind react cheers So without any delay, let's take up our very first topic that is what is react to use as I have already told you that reactjs is an open-source JavaScript front-end library that is used to develop interactive you is the Facebook was using it since 2011, but it was introduced to the rest of the word on me

2030 and later on March 2015 It was open sourced Moreover the reality is is concerned with the component that utilizes the expressiveness of JavaScript along with the HTML a template syntax That is it combines the features of JavaScript and the HTML and then provides us a dynamic language It is basically the view in MVC is the model view controller

It is not concerned with anything except for the view That is it handles a representation of our web page at any point of time But what aspects make it handle a dynamic view so effectively, let's proceed further and find out will react has three main aspects first It uses the virtual Dom second It has one-way data binding and third it provides a server-side rendering

Let's now discuss them in details The first is the virtual Dom So as I have told that it uses the virtual dog Now many of you might be wondering that What is a virtual Dom and how it is different from the actual dog

Well, like an actual down the virtual Dom is also no tree that lists the element and attribute and contents as object and the properties reactor in your function creates a notary out of the react component and then updates the street in response to the mutations in the data model which are caused by various actions done Maybe by the user or by the system Now this virtual Dom Works in three simple steps first will be whenever any underlying data changes The entire UI is rear-ended in the virtual Dom representation after this the difference between the previous round representation And the new one is calculated

Once the calculations are done Only after that the real Don will be updated with the only the things that have actually Teach you can think it as a patch as the patches are applied only to the affected area Similarly the virtual dog acts as a patch and is applied to the elements which have actually updated or changed in the real dumb This makes our application faster and more over there is no memory wastage unlike other Frameworks react follows, the unidirectional data flow Let's now move on to a next aspect that is one-way data binding unlike other Frameworks react follows, unidirectional DW or one-way data binding as you can see from this diagram in whole of the process

The data is flowing in the same direction The major advantage of one we did a binding is that throughout the application the data flows in a single Direction which gives you a better control over it and because of this the application state is contained in specific stores And as a result of this the rest of the components remains Loosely coupled so our third and last aspect is the server side rendering server-side rendering Allows you to present the initial state of your react component and the server side only because of this the page loads faster with the server side rendering the server's response to the browser is the HTML of the page that is ready to be rendered Thus the browser can now start rendering without even having to wait for all the JavaScript to be loaded and executed all of these features together makes react to use a powerful and robust language which provides us with some major advantages like because of the use of virtual Dom the applications performance increases moreover It can be used on client as well as server-side the reacts j6 file increases the readability of the code, so it becomes easy to debug and maintain and lastly the reality is can be easily integrated with Frameworks like meteor or angularjs So now that we have already understood that what is react cheese and whatever it advantages

Let's now proceed to its installation Well installing reactjs is very easy You just need to add the reactjs dependencies to your code

And then you are good to go You can add these dependencies even directly from online repositories or you can also download them and then add them to your project folder as you can see from this code I have added the dependencies here from the online repositories Now, let me show you how to add the dependencies after downloading them for that You need to go back to your project folder

So now this is my project folder inside this I will be pasting all my dependencies for that I'll go to my downloads here I have already downloaded the dependencies I just have to copy this And then I'll go back to my project folder and paste them here like this

So inside this I have all my dependencies which all I need So now to start coding with react you can use any text editor or any ID you want so here I am using the web some ID here inside my project folder You can see that I have already all my dependencies So now what I will do I will create one HTML file here Let me name it as index

Now in this HTML file, we have to provide it with some title Like I've given it demo 괜찮아 So now inside the head of this file now we have to tell that we have the dependencies So using the script tag, we will add the dependencies one by one

So, let me see the source and my dependency sources the build folder in this first dependency, which I need to add is the reactor Minn dot J's Now, this is the main react dependency that you will need Like this I have to add the rest of the dependencies 괜찮아 So now I am done with adding my dependencies

So next thing what I have to do is I have to create one Division I have to create one division so that I can display my react code over here So I will give this division when ideas will okay So here I have given the ID as content So for now we are done with this HTML file

Now we have to create one react jsx file So for that we will create one file Let me name it as script dot JS X So this j6 file is the file in which we will add our all the react code Now Jesus is a type of sentence that you can just type and it's very easy to understand and react as you know that everything is a component and each component needs a class to survive

So first we have to create a component and then provide a class for it So, let me just create one component Okay, so as you can see I've created when component name my component and then I have created one class So now I have created when comparing with the name my component and then I have provided one class for it to survive Now inside this class

I will be adding all the functions as attributes that my class is going to do So now each component has one render function which returns an HTML representation So here we'll add the render function which will contain what we want to display So since we are going to return the hello world just so here first Let me just create the render function

So render this is a function Okay, since this will be returning an HTML representation So inside the written after right we are returning only the hello world So I will write hello world Okay, so just save it

So now we are done with creating a component Now you have to tell react that you want this component to be displayed over here So for that 괜찮아 So here we are calling the render function of react Dom now inside this function

I will tell that I want my component to be displayed on the HTML P So for that I will fetch it by its ID So I'll call document dot get element by ID since we have given the ID and it's ID is content 괜찮아 So now here we are done with our j65 just save it go back to the HTML way

So now you can think this j6 file as external CSS or JavaScript as we refer this file in our HTML file Similarly We have to tell her HTML file that we have are reactive code in some other files So for that I'll say script and it's sources scripted Chase X Ok

So one thing we need to add here is its type So it's type is text Babel 괜찮아 Now we are done with both of the Now what I need to do is just run this file So now you can see that hello world

It's showing that means we have successfully compiler program And this is how the reactor uses working So here you will see that I've written the same program here Okay, and this is the my HTML file and then this is what we saw in the up since we are done with our first program Let's now find out the biggest fundamental concepts working behind it here first will understand

What is a j65 and how it is used then we'll learn about the component and its different forms after this we'll find out what our props followed by the states then we'll have a quick look on different phases of components life cycle next We'll learn about the react events and how they are triggered after this We'll see what are the references and keys and understand the importance in react finally will understand what is react router and then we'll proceed to add So without wasting any more time, let's take up our very first topic that is the chase X So J 6 times for the JavaScript example It's an XML HTML like syntax that is used by react this index exchange the ecmascript so that the examination table like ticks can coexist with JavaScript react code

This syntax is used by the preprocessors to transform the HTML like syntax that is found in JavaScript files into standard JavaScript objects with this fine instead of just embedding the JavaScript into HTML We can embed the HTML into the JavaScript as well This makes the HTML code easy and also boosts of the JavaScript performance moreover It makes our application robust Let's now see how this j6 can be used

Well, the first is the regular use of j6, which we already saw in our hello world program Next is the j6 nested elements Now as you know, in react the render function can render only one issue Element at a time So in case you want to render multiple HTML elements, then you need to put them inside the one in closing tag

Let's see it how Okay So let's try and add one more HTML element inside this render function So here let me say I have a ch3 you can see as soon as I add this H3 tag It's showing that here something is expected That means it can't compile

Well error symbol is coming So that's why we need to include this inside one in closing tag So I will be using div here So let me say div Okay, so I'll just cut it from here and paste it now inside this that I can add as many lemons as I want

So let me just use H 1 you can use any tag you want So just okay So now inside this I will say And Eureka, I'll just save it go to my browser Here you can see Eddie Rekha and hello world So this is how we can use multiple HTML element inside

Rj6 code So the next is the specifying attributes You can always make your code Beautiful by adding the attributes to it Let's see it how so inside this what you need to do You have to create one variable with the csis element

So here I'll say that I have a variable Let me name it Styles and I will just say that in this the color will be okay Let me say the color is red 괜찮아 So here I will add this Styles as a style to my HTML element

So like this style he'll say it will follow the Styles So now the entire division will be in Red So just save it go to the browser and reload it Now, you can see everything is in red You can specify side for a single element as well

So you just It's just see that we have a states to and here let me say the color is yellow Okay, and I'll see my H1 tag will come in yellow color So I will say that it will follow the side to just save it go back to the browser and reload You can see the editor a guy isn't yellow color? 괜찮아 So this is how our row attributes work

So next is embedding JavaScript into j6 as in normal HTML We embed the JavaScript expression similarly here Also, we can add the JavaScript Expressions directly into the code Let me show you okay I'll go to the ID and I will just say I'll take one H3 tag and inside I will say just some is something I'll throw in some random numbers over here

So let me just say save it go back and here it will give me the sum So the sum is 30 So like this we can use j6 in different forms 괜찮아 So here we are done with all the users of j6

Let's now move to our next topic That is the component since the beginning I'm saying that in react everything is a component So now let's find out what actually this component is to understand this Let's again go back to Facebook as you can see This is a Facebook page

Now This page is divided into various components Like this is a component This is also a component And again, this is also a component like this

There are many more components over here since then react everything is a component and each component returns a Dom object It results in speeding up the entire UI into various independent and reusable pieces to understand this better Imagine the entire UI as a tree here the starting compound becomes the root and each of the independent pieces becomes the branches and which are further divided into sub branches Now this pattern keeps our UI organized and moreover it allows the details Changes to logically flow from the root to the branches and then to the sub branches moreover the compound can always refer to other components

Let's see how this is happening 괜찮아 So here I have one component named my component So let me just create few more complaints over here for this again I'll use the variable and let me name it as header

So here I'll call the reactor not create create class So inside this again, I will create one render function Now what I wanted this render function should return me just well HTML representation to show that this is my separate component So therefore I will just simply write return and I'll put 1 h2 tag over here and I will say that this is hidden component Okay like this so I'll create one more component like this So for that I'll just copy this and I'll paste it up here and I'll change its name to put okay and here it will say

This is foogtor competent So now how I can refer these components from my component for that I just need to go inside the enclosing Tab and here I'll just say header and moreover again I'll can just say footer like this save it go back to your browser and reload So this is how our components work

We can call one comment from other component as we have seen 괜찮아 I hope this thing is clear to you Now Let's go further in our Peabody

괜찮아 So here a valid react component can always accepted single object argument and then produce a reactive element Now, these are called the functional elements as they are literally the JavaScript functions as you can see So here we are calling one handle click function Now whenever this function is called it will always return a 1 inch team representation

So that's why these are called the functional elements On addition to this we can simply Define a competent through JavaScript as you can see here We are creating one function which is named prob demo It is accepting one props and then it is returning one HTML representation So this is how the components work moving further in this the component in reactions can be in two forms the stateful and stateless components the stateful components are those components which remembers everything it does whereas the stateliest components are those components which doesn't remember anything it does

So let's not discuss these components in detail So first we have the state full component These are the core components with store information about this component state in the memory Now, these components can change the states as well They contain the knowledge of the past current and future possible changes in state of the component in case there is a change in state they will always receive the information from the Stitches components

These components are called the smart or active confidence Next we have the stateless components These are the state list component which always calculate the internal state of a complaint They can never change the state moreover They do not contain any knowledge of the past current as well as possible future changes of the state of a component these details components provide the referential transparency that is for same set of inputs

It will always generate same output The these combinations are called the dumb components now, I hope you have the fear understanding about the component So now let's move on to our next topic that is props The simplest way of describing process would be to say that the function similar to HTML attributes These are the read-only components which provide configurational values thus by using the props

We can always pass data from Pain component to a child component whenever the component is declared as a function or a class It must never change its props all the Components are therefore called the pure functions If you see this function as I have seen in this demo, we have the function called thumb which is accepting argument X and Y So it's prop is to always return the sum So whenever this function is called it will never change it from in react the Only Rule we have and that we must follow is all react components must act like pure functions with respect to their props

So let's find out how it's happening with the help of practical demo 괜찮아 So now here what I'll do I'll use the header and here I'll provide the prop But before that inside this header since we have to provide information from the parent to the child, let me say that my component is the parent component and header is the child completely So from here, I will say that header has a name

Let me say name is let me see Alex Okay now What I'll do, I'll just copy and provide one more hedral prop So I will just change its name to else a Max 괜찮아 So now how we can provide this information to child component for that

What we need to do here is I'll just use one H3 tag and inside this I'll refer my component So here I'll say this dot props dot since I've given the name so I'll say name here Okay, here are we have to create one division as well? 괜찮아 So what I'm doing here is that I'm passing the name from my component from here from my company to the header component, which is just printing out the representation So this is how the props for whatever you give as input

It will always display the same So let's just save this go back to the browser and reload So here you can see Alex and Max its print So each time The header component is referred

It will print this element I hope you are clear with the props Let's now move to our next topic that is States So what is the state and how they can be a sign here in react the states are the heart or we can see the core of react components though Most of the component simply taken props and render them, but they can also provide States

These states are used to store information Nation or data about the component which can change over time because of user or system evens You can say that the determine the components rendering and behavior and therefore the state must be kept as simple as possible using the state It leads to a dynamic and interactive components which adjust themselves according to the changes So let's now see how the States can be assigned with the help of the demo

괜찮아 So since we have already used the props, I'll use this putter to show the state now to access the state first We need to assign One initial state to the component because by default it state will be set to null so for that I'll call one function called get initial state Auntie inside this class I have two functions, so I need to separate them

So I'll put one calm over here inside putter I'll say I have user and let me set its initial state to and say it Eureka So it's the user initial state is at Eureka So now whenever we call this user it will always display the at Eureka now, how can we refer to this for this? What we need to do is okay now, I'll add one div We were here you just cut this from here and paste it and now here I'll say I have one H1 tag and here I'll refer to the state

So to refer to the current state what you need to call is this dot State and our element name is user So here you'll see use them like this save it go back to the browser and reload it see so our user is either a car to make it more clear Let's go back to the and here I'll say user is Eddie Reka morvay, you can put any number of elements you want Let me just say I have an idea Also whose default state is 101

I'll save it and inside the cell say, okay here are we use one brick and then I will say ID is And again, I'll refer this thing with the this dot state DOT ID So now again go back to the browser and reload it So here you can see user is in Eureka and ID's 101 So this is how we set the initial state but as I have told you that we can change the state as well So let me just say that after some time these two elements change their state

So in order to do that, what we have to do is we need to call one other function, which will automatically change its state after let's say after 2 seconds, it will change the state So I'll call the settimeout function and it will automatically after two seconds Let me see the two seconds it will change the state So I'll write tooth seconds and after 2 seconds it will call one function So let me write that function as well

괜찮아 So now inside this function, I'll call this Dot It State inside, huh set state So inside this state function what I will say that my username should change from Eureka to let me say Swati and my ID should change from 1012 Let me say 303

괜찮아 So let's now just save it go back to the browser and reload this So now you can see the user is and Eureka and ID swathi Okay, let me just go back and I will increase it's time to let me change it after 5 seconds So here

괜찮아 So let's now write C So here the user is in Eureka and ID swathi, but after five seconds, it will automatically update to Swati and 303 So this is how to react works It will automatically update the Dom manipulations for us and because of this the applications become extremely fast

So this stage is mainly used if the component has some internal value and moreover which doesn't affect any other component then only we can use the states So I hope you guys are clear with the state 괜찮아 So let's move to our next topic that is life cycle of the components So react provides various methods which notifies Venice 33 of life cycle of a component occurs, and these methods are called the life cycle methods

Now these methods are not very complicated You can think these methods as the specialized even handlers which are called at various points during components life You can add your own code to these methods to perform various tasks when we are talking about the life cycle The life cycle is divided into four phases They are the initial phase the updating face the props change phase and the last is the unmounting face now each of these ways contain some life cycle methods which are specific only to them

So let's find out what happens during each of these phases The first phase in the components life cycle is the initial phase or the initial rendering phase This is the phase when the component is about to start its life and make its way towards the door So in order to do so all these methods are invoked in order So first order method we have is the get default props

This method allows you to specify the default value of this dot props It gets called before your competition When does even created or any props from the parent our past the next we have the get initial State now this method allows you to specify the default value of this dot State before you're confident is created just like the previous method it took with called before the component is created So next method we have is the component will Mount method now This is the last method that gets called before your component gets rendered to the dog

There is an important thing to note here If you were to call set treat method inside this one your component won't re-render Then we have our render method Now This is a method you should be familiar with every comment must have this method defined and this method is responsible for returning a single root HTML note though

This single route may have many child note inside it So if you don't wish to render anything simply written null or false then we have our final method in this phase That is the component did But that this method will get called immediately after the components renders and gets placed on the dorm at this point You can safely perform ain't on quitting operations without worrying about whether your component has made it or not Now one thing you need to remember here is that except for this render method all of these life cycle methods can fire only one

So this concludes our initial phase then we can move on to our next phase That is the updating face So after the components get added to the Dome they can potentially update and re-render only when a prop or a state change occurs during this time a different collection of life cycle methods gets called Let's see what happens when a state changes whenever a state change occurs The component will call its render method again

Now any component that is relying on the output of this component will also called a render function again Well, this is done to ensure that our compound is always displaying the latest version of itself So when a state change occurs, all of these methods gets involved in order So here our first method is should comprehend update method Sometimes you don't want your company to update when a state change occurs

Now this method will allow you to control this updating Behavior If you use this method and return a true the component will update else it will skip the updating part Next we have the component will update method this method gets called just before your component is about to update one thing you should note here is that you can't change your state by calling this dot set state from this method now again, we have the render method So if you didn't overwrite the update by a should comment update method the code inside the render method will get called again to ensure that your component displease itself properly Again, the last method we have is the component did update method

Now this method gets called after your component update and the render method has been called If you need to execute any code after the update takes place You can put it inside this method So now let's move on to our next phase That is the props change phase after a component has been rendered into the tongue

The only other time the component will update is when a prop changes its value now, this is when all these methods will be called the only method that is new here is the component will receive props If you want to compare we can go back to the previous slide and you can see we have the should component update method component will update method render method and component did update method and in next phase We have should complete update complaint will update render and component did update So here only this method is new now this method returns one argument and this argument continues the new prop That is about to be assigned to it

The rest of the life cycle methods behave identical to the methods which we saw in the previous phase So this is how the props change phase is completed now move on to our last piece That is the unmounting phase Now This is the phase when the component is destroyed and removed from the dog

There is only one life cycle method over here That is the component will unlock method You can perform any cleanup related tasks here such as removing the even listener stopping the timers Etc after this method gets called your component is completely removed from the door So here we are done with all the phases of the components life cycle along with their methods So now let's move on to our next topic

That is the evens Well, if you guys are familiar with HTML and JavaScript, then you might know that what are evils in reactor also even saw the triggered reactions to specific actions like Mouse hover Mouse clay keypress Etc Hi, I'm leaving these even czar's very similar to handling the theevans and dog but here are some syntactical differences in react the events are named using the camel Keys instead of using the lowercase moreover In fact, the even surpassed as functions rather than the strings here the even document contains a set of properties which are specific to an event What I'm trying to say is that each even type contains its own properties and behavior, which can be exist only via its event handler moreover

In other you eyes Well even Handler is assigned for each event, which leads to more memory consumption and also makes our work tedious But in react the event handler is not attached to the Dom elements directly rather It only uses the route even Handler which is responsible for listening to all the events and then calls the appropriate event handler as per need Let's now see how the event is created and triggered

정말? So to make you understand I'll be using one demo code here Let me show you how it should be looking So I'll show you how the events work by the help of this example here I have one Bull and one button with me So clicking on this button will turn on the bulb and again when we click it will turn off

So, let's see how this is happening for this Let's go back to our code 괜찮아 So now what I'll do, I'll leave this file like this and I will create one more j6 file So here I'll see even script dot j 6 okay

So now inside this file what I'll do, I'll create one variable and let me just say its name as well 괜찮아 So again, we'll call free app dot create class and inside this will first we have to mention our render function 괜찮아 Now inside this render function, I will say that I have one image and just close it and I'll say that it's coming from some source and name that Source later then we have one button over here

Okay, so I forgot to put it inside the division so here too Just got to it and piece to it Okay, so it's final and now I'll admin button over here Okay here I'll say that this button on clicking this button something happens So what will happen? I'll write it later for now

Let me just name it as quickly 괜찮아 So here we have one button clicking on which it will do something and here is one image which will be shown 괜찮아 So here we are done with the render function since we want on our HTML page

We want one button plus one bulb So we here we have described both of the things now, we have to set up an initial state for our bulb status So let me say get initial state And this is a function and since inside this bulbs class We have two functions

We have to again separate these and inside this we will say that okay, let's return the status Let me set the status first So I will say the bulb status is by default its false So now inside this I have to add two images as well because on the page, we are displaying the images for that I'll go to my downloads

Okay here I have already downloaded two images I'll copy them come back to my project and here I'll say that I need one directory and I'll let me name it as image Now inside this I'll just paste them now here you can see I have both one and two in each So this is the initial state, but now we want that on clicking this thing this button something should happen So let us create one function to tell what exactly will happen on clicking the button

So for that I'll say that we have one function name switch So this is a function looking super ated So now this function will change the status from false to true and true to false because we want on each click the status should change So here what I will see is this dot set State Okay inside this I'll say that my status should change

So for that I'll say status status should always change from whatever the current state is So for that this dot state DOT status, And we want each time the state to change So for that I will say not so whatever the current status is, it will always change it to the opposite one So if it is true, it will change it to false And if it's false it will change it to true

Now We have to provide the source for this What I need to do is inside this render function 괜찮아 So here we have to put this code inside the return which I forgot

Okay, return since returned It will return as the HTML representation You must remember this thing 괜찮아 So now inside this one what I'll do I'll see I have one variable and I'll say disp bulb means display bulb

So which bulb will it display? So here I will put the sources along with a conditional operator whatever the condition is according to that It will display the bulb So I'll say this dot state DOT stay If the students are false, it will show the image one And if it's true, it will return the image to so for that I'll give the path of the image that is image to dot PNG

So this is the folder where am I images? And this is the name of my File versus when my condition is false It will show image / first image that is image / paint Okay, just save it 괜찮아 So like this this is we are changing the image over here

So here I'll say that image source is dispersal So depending on the condition it will automatically retrieve the image Okay, here we are done So here what is happening depending on the condition the image will change but now we have to tell it also that on clicking the button you have to do this thing So for that here, I'll say that this dot switch that whenever I click on my button then switch function should be called so for that I have written this dots which here we'll call the react Dome dot render

Okay, and inside this else say that grab this bulk component and display it over the HTML page whose ID is content So here we are done So see if this go back to the HTML file and tell it that rd6 file is now even script 36 So just save this now and run it now you can see we have a bulb along with a button now clicking on this will turn this on and again if we click it will again turn off 그래서 이것은 how the events are created and react so now I hope that you can create your own evens

So let's take up our next of it that is riffs riff stand for the references now in react a parent compound can interact with its style component only through props So if you want to modify the child, you need to re-render it with the new props This is the typical data flow So in case you want to modify the child without following the typical flow, what you need to do is make the child and instance of the react component or the Dom element in such cases only you can use a reference Now this the Riff attribute makes it possible to store a reference to a particular react element or component written by its components render function

Now this can be valuable When you need to reference it from within another component render function as you can see here One of my render function is written in one reference, which is then used by another components render function So let's now see how this works practically So here I'll go back to my code here

What I'll do, I'll create one more script file because I don't want to confuse you guys with all these stuff So here I'll create one more file and I'll just name it as a ref script Dot j So what I'll do here, I'll create one variable Let me name it as a ref component

And again, I have to create one class for this I'll call react dot create class 괜찮아 So inside this I'll be putting my functions So here first of all, I have to create one render function

So this render function will always return me something Okay, so here let me create one division first So what here I'll do I'll create one input text box along with a button So inside this text box

You have to type your name, which I'll take and display it back to the webpage So how we can do it with help of reference will see so first let me say that I will use when h2 tag here and I'll see the name So here inside this Al create an input element Okay, so it's type will be 'text only and and next I'll create one button for this

어디 보자 Click that's it And here whenever we click this button, something will happen That is it should retrieve the name from this input box and then displayed for that I'll say that on click it will do something

So for now we are done with this So how the references are created now so here whatever we get as input I want this to refer by this method so for that I need to create one ref here So here I'll say that we have a riff and in this we have to take the input So from here, we'll grab the input whatever the value with the user is passing

It will take that input and it will be then referred by the function which will be called on on click So here I'll just name this reference as let me name it as input demo So let's say this Dot Input them Okay, and it will be referred by the input like this 괜찮아

So now let me say that Okay, let me put one brake function over here so that this input text box and the button should appear in different lines 괜찮아 So here we are done with the render function Now, what we want to do is we will call one function over here that whenever with this is click

It should retrieve the value from this thing So for that I will create one function Let me say display function So what this function will do whatever the user gives that input It will take the name and it will display to what the HTML page so for that I need to create one more

Let me say I have H1 tag over here and I'll say hi to whatever the name is So here I want to display my username So for that I will create one span over here and I will provide one ID to this So I'll just say this name 괜찮아

So now what my display function will do it will take this input value and it will display it on this area So for that let me create one variable and set name So here are any here now this function can refer to my reference So to refer this will see this dot whatever our reference name And as input demo, I'll just copy this and paste it here and then I'll say that receive its value

So here we are done So one thing here which we need to do is we have to display this name whatever The value is in name We have to display it over here So for that what we need to do is as you know to display it on the web page we have to use the inner HTML and for that we have to get the span by its ID

So get element by ID and the ID name is display name this pool name and then we'll say dot inner HTML and here we want to display the name 괜찮아 So this thing is done here Now again, since we need to tell react that you have to render this drift component over the content area So here call the react Dom dot render inside this you have to call ref component and again get the dividend by its ID so document

Dot get element by ID where the ID is content? 괜찮아 So here we are done Just save this file 괜찮아 No here

We are still left with this thing We have to tell that on clicking You have to call the display function on each button click This display function should be called so now we are done So we'll I'll just save this and I'll go back to the HTML and a little that rj6 file has again changed and now it's like rough script

So save this and run this so here you can see that I have named and I have one button and then it says hi So as soon as I put my name over here and just click it it will say hi spot So this is how the references are used But one thing you should remember is references should be used in the Darr need only so references can be Used when you are trying to manage the focus or text selection or media playback, then it can be used while triggering the imperative animations and moreover when we are integrating with a third-party Dome libraries then also we can use the ribs So I hope now the refs concept is clear to you

So let's take up our next topic that is keys will keys are the elements which helps react to identify different components uniquely They are especially helpful when we are working with dynamically created components assigning the key value will help you identify the components Unity even after they have changed As you can see from this diagram here We have two components with different key values one with key 101 and one with key one or two Now these are in it for the first time

So the reactor will render them without any problem But next time when we try to render them hear the complaint once key value is same whereas comparing to ski value has changed So now the reactor will render only the second component not the first one as the first components Chi is sick So here the react will think that as the key haven't changed So the element is same so no need to render this one and it will go ahead and render the second component

So this is how the key works in react now finally we come to our last topic that is router in react router is a powerful routing library that is built on the top of react framework using the router We can quickly add new screens and flows to the application It keeps the entire URL in sync with the data Being displayed in the web page moreover It provides us some of the major advantages like it can easily understand different views of the application

It can restore any state and view of the application just by using a simple URL along with this it can efficiently handle the nested views and resolution with reactor outer the state of the components can be easily restored by the user himself just by navigating backward or forward moreover by the router We can maintain a standardized structure and behavior of the application Also, it can do implicit CSS transitions while navigating only so here we are done with our router Also I hope now you understand about react

js thoroughly what it is how it is implemented and what all things we can do with it You know now so I think you guys are ready to create one application with reactors thus without any more delay Let's now find out Code behind our Facebook comment application which I used in the beginning So if you guys remember I showed the demo of this application So now we will see what are the codes which are working behind this application

Okay guys, so here we are with our code So to save time I have already created HTML the PHP and the CSS files which all I am going to use in my application and moreover I have already downloaded the pictures also so that I can display the profile pictures if you remember from that application 괜찮아 So this is our HTML file

I have included the dependencies here and I have told that I have one scripted J6 since I'll be naming my 3658 a script only and here I have added the CSS style sheet as well So now next step what we have to do is create a j6 file So without any delay, let's get started So inside this as we were doing earlier where create one noscript GSX

괜찮아 So now inside this file I'll be creating some components along with their functions And these all components will be doing some or the other work So here first, we'll start off by creating the base means first really create one wall in which all our comments will be posted for that I will create one component named Wall form

And then inside this I will be putting some functions like get initial State means to set different states I'll be setting different states inside this and then finally I'll use one render function which will be displaying one text area So without any delay, let's quickly start 괜찮아 So here we are done with our first component now, let's move on and create one another component and let me just name it as where comment form

So now what this comment is doing that it will accept all the new comments and it will at the back end process them and integrate them with this wall So for that again will set the initial State and then tell that how many cases it will go through and then we'll put it to the render function So let's quickly do that Okay, so we are done with our second component as well Now

Let's move on to our third component That is where let me see How meant grid 괜찮아 So now this component will be taking the comments and then it will link them to a particular user as specified for users in my PHP files

Now, whichever the user will add the comment it will take the comment and it will just integrate with it at the back end So for that what we have to do is again create the class and put some initial State and then give a render function to it and just add some methods in order to integrate them So let's proceed So here as you can see in this range of function will provide one division in which we will place our comments along with its related profile pic So this is how we are integrating the comments along with the pick

So now we'll create another component and now let me name this as comment block So now this comment will be displaying the comments along with its user in the in order They are inserted like in this what we are doing we are presenting one representation This component will be taking in the comment and integrating it with its related profile pic And then this block what we'll do it will displayed back on the HTML page

So for that, let's see So now we have done with our comment block So since this component is done after this will create one more component and what this component will be doing is it will be responsible for updating our comment wall like whenever a comment is deleted or any comment is added at that time This component will get activated since we are updating the ball on this So let me just name it as wall update

Okay, so I hope you can understand what's going on So let's just quickly create this component and see inside this complaint We will have some functions and along with that We will have the render function which will keep on updating the HTML representations Like whenever the comments are updated on that is above added or deleted at that time

It will assign the particular profile pic and we'll link it with the computer and then displayed So, let's see how it's doing 괜찮아 So here we are done with our update Paul updates and then ok So here we will create one more component that is wall feet

And now this component will be responsible for maintaining all the comments on the wall So whether we are adding the comment or we are deleting it from there this component will Rend it accordingly So let's just get on it Okay, so finally I will create one final component So this will be the component which will be triggering the render function from this component dressed

All the components will be triggered So basically this is the component which will be responsible for our view So let's get started with this one So this is our final and mean component So here will tell react at first you have to render this wall container

Then this wall container will call the wall feed 괜찮아? So this is our wall feet component Now this Wall Street will in return then it will call the wall form and wall updates like this internally one component will call another component and this will build up our whole view So let's just quickly render this wall Contino So for this we have to call the react Dom dot render and now inside this will tell that you need to render the wall container and you have to put it in the place of container

So here we'll see document dot get element by ID and let me just cross take the ID So IDs continue just copy this one And go back and pissed finally we are done with our whole of the reactive code So there is nowhere no errors Are there I hope yeah, okay

So here I'm on my browser So what I will do I will just say Local Host 괜찮아 Look I will host its cheesy 081 and my application is react 예

So, okay, so you can see that my application is up and running So let's just test it out whether it's working or not So I'll say hi Yeah, it's accepting the comments I can delete my comment and let me try replying so we'll say hello

So as you can see our application is perfectly working So I hope I was able to make it clear how it's working how the codes are working So now I will conclude this tutorial here Hello everyone and welcome to the nodejs tutorial from at Eureka

I'm Ravi Juelia, and I'm your trainer for today Let's check out the agenda for today So if we see the agenda we would see that what node js is you'll see the node js architecture We would see what node

js package manager that is npm is nodejs modules What is a packagejson file then we'd go more into nodejs Basics, which is any language Basics that is there

We will also move into the file systems There is an fs module in nodejs that would enable us to read file and write files on our server and then there is an events module in nodejs there is also something called HTTP module and there is also something called Express that we would be going for which is a nodejs framework

So at the end we would be going through the entire code and we'd be going through a small demo as well which would be something of a mix of all the Yes Concepts that we go forward So let's go ahead and see what node js is actually so if we speak about nodejs it's a powerful JavaScript framework or I might say it's a runtime where you can run JavaScript on the console It is developed on Chrome's V8 engine So if anyone doesn't know what a V8 engine is, let me just tell you what it is

So if I check out the V8 Dev the official website of chromes V8 engine you would see that it is an open source high-performance JavaScript in webassembly engine written in C++ and you know more or less this is the engine that runs on the Chrome browser So you would see that whatever your Chrome browser understands It would be the same thing that nodejs also understands So the creator of node

js thought that okay This is an open-source JavaScript engine Why not Implement that in a platform which enables you to run JavaScript on the server So this is the reason why nodejs understands

So that is one thing that we would like to also keep in mind So it's something that runs on Chrome's V8 engine and it compiles JavaScript natively into the machine code that is all because of chromes V8 compiler that we have and it is basically used for creating server-side web applications and also Network applications actually so mainly nodejs is used for and basically if it is a data intensive application nodejs is something that is specifically made for that Let's see how that happens

Basically if you talk about the features of nodejs it is open source, it is simple and fast it is asynchronous highly scalable You would face no problems in scaling your nodejs application It basically works on something called a micro service architecture as well

And it facilitates that micro service architecture really Well, it is a single-threaded model which means it is not resource intensive and yet it is fast, you know yet it allows things to be done in parallel We'll see How that is done and then there is no buffering Basically, there is no waiting as far as node

js is concerned and that is because of a concept in JavaScript, which is called event Loop We'll see more about that as well and it works on so many platforms So that is some brief of the feature Let's see nodejs architecture and before going into the architecture of node

js we would also like to see the traditional architecture So traditional architecture if we speak about traditional server architecture is basically where every client request is managed by separate threads So there is a multi-threaded model going on in normal server architectures like Java, for example, it's a multi-threaded application or a multi-threaded set up altogether So where your web application runs on multiple threads and various client requests are processed parallely now, there is nothing to take away from this model because it is really good and it has been working throughout years when Java is at this point of time Java is actually one of the best language

Is and secure language has to be programmed in However, this is resource intensive because you can see that there are so many threads going on in parallel which means your server or your machine as should be something which is capable of running these many threads However, if you talk about nodejs it only runs on single thread and still it processes requests in parallel So one thing that I would also like to clarify here is in the background or maybe under the hood if you may say no just doesn't process any requests in parallel, but it goes through an event Loop where once the request comes it goes into the process and node

js doesn't wait for the output of the request to come in while it takes in the next request So as and when the first request for example gets the output it would just respond for the output or with the output to the respective client basically, so, you know in the background or under the hood it is basically running only one thread, which is not resource intensive and At the same time processing requests from so many clients and it provides a virtual feel that everything is running in parallel, but everything is not so that is all because of event Loop that is going on So that is basically the architecture and then we talk about something very important as far as nodejs is concerned which is called node package manager now, it is called npm in short and it was primarily known as node package manager, but nowadays it is not known as node package manager because it is doing so many things then package management is doing so many other things as well We'll see what it is

So if we talk about the official definition, it's a package manager for nodejs packages or modules, which has been added as a default installation from nodejs version 6 or 06 onwards and then it's stuck It is already there in any installation that you do in node

js if you are a Java programmer, you can relate this with Maven and if you are a PHP programmer, you can relate it with composure So it is the same Mechanism where npm has a repository of so many libraries and then the repository serves whatever the package you need for your project And if we talk about the features it provides and hosts online repositories for nodejs which can easily be downloaded in our project using a command line

So it provides a command line utility as well And it also allows you to manage the repositories or the versions of libraries that your project may use So we'll see what are the versions and what are the libraries that we are talking about So the library is that I'm talking about when I say libraries it is just nodejs modules so node

js modules or if we talk about the module system There are core modules There are local modules and then there are third-party modules So code modules are the ones that are actually available in the default installation of no chairs You don't have to program anything

You don't have to install anything else Nodejs to get the core modules working few of them are listed in here like HTTP URL query string will be using them and there are some others as well, which we'll be using today and then local modules It is something that a programmer builds It could be a function

It could be an object P anything the programmer builds and the programmer exports so that other team members are other programmers can import that module and use them 그래서 뭔가 있어요 that a programmer would build like a custom module and then third party module This would be installed through the npm repository So if we speak about npm in this particular case, let me just also open up the npm website

So it is basically n PM J scom And you can see that it has so many repositories There are so many companies that it is serving and all there are so many repositories available as well Let's just search a few repositories in this particular case

I'll search one of them If we talk about react you might have heard of react react is one of the repositories it is available in npm You might have heard of Angela That's also one of the libraries that is available in the npm repository You might have heard of jQuery

You might have heard of bootstrap These are like naming just a few of them There are so many so many repositories that are available even express that we are going to use is one of the libraries that is available in this particular proposed ettore of nbm So you can see here that Express is one of the libraries that is to be used So we'll be installing expression C

By the way This is the way you install any third party library from the npm repository Alright, so that is the 3rd party modules and you would be using npm install or in PMI to be in short to install this particular poetry Now, let us see the packagejson file package for Json file in node

js is the heart of the entire application is basically the Manifest file that contains the metadata of the project now at this point of time Let me just create a nodejs Project and see what this package dot Json file looks like and then we'll analyze what this file actually is

So let me just create a folder here at Eureka and in this folder I'm willing to you know, initialize a nodejs project So let's say I'll call it nodejs demo, or maybe I'll call it task manager even better We'll try to create some of the task manager functionalities in here and it will be an API that will be creating or a web service that will be created will see what it is

So in this task manager, I am going to initialize a nodejs project And in order to initialize a nodejs project you need to have node js installed in your computer, which means you have to go to nodejs dot org website and you can download this LTS version

This is a currently release which is basically experimental It'll have all the latest features but it is prone to be erroneous at some time So, you know generally for You don't use this one but you use this one but say if you want to check out the new features, you can also install the current release but will always go with the LDS and I already have this installed now clicking on this will allow you to download the MSI file that is the setup file and then you can just double-click on that set up in just install it on Windows and in Mac as well The setup is really simple and in Linux as well probably will give you a tip file For example, if you're going for a boon to so the setup of node

js would be really straightforward But after the setup is done, what you have to do is you have to just check whether nodejs is installed in your computer or not And you'd be checking it this way node – we will give you the version of nodejs and you can see that I already have it installed and I have the version 10

15 point three that is the LDS and then I'd also check npm If you recall we saw that npm is something that comes in inherently with nodejs all together So we'll be going for npm – be that will give you Npm version so we're all set in we're all ready to go

So let's go for creating or initializing a no chase project It is something like this and pm In it dot which means current directory So if we just hit enter I think dot is something that is not to be done 권리? So this would ask you certain questions Like what is the package name? Let's say I want the same package name as task manager

I want the version 2 B1 Okay, the description let's say this is a task manager project Right entry point would not be significant at this point of time So we'll just keep it as it is No test command as of now no git repositories

I'm not going to even commit that to a git repository and no keywords as well author I can say at Eureka and license no meaning as of now for a license because we are not going to make it public or anything So it tells us that is it? Okay and also tells you that it's about Right to this particular file package of Chase on inside our task manager folder So which means after I say, yes, there is a possibility of this being written into a file called packagejson inside my project

So let's go for hitting enter Let's say yes, and if I now check out my folder you see that the packagejson file is in let's just open this up in our editor You see that here is the package dot Json available with every information that we provided Now

This is a very basic package dot Json There'll be so many things inside a packagejson file and a normal or a real world Baxter Json might look something like this where there are so many things like the name of the project is there then there is something called version as well description of the project What is the starting point of the project which is Humane script to run first

There are certain scripts We saw that we didn't provide any test command and then there are certain engines What all tools do you use to run this project? Who is the author? What is the license? There are certain third-party modules that we would like to have you can see in this particular example that there is Express that is there as a third-party modules which will be using and then there is Dev dependencies Like when you go into a development environment, like for example our computer, they'll be certain dependencies that will be there and that will be tested inside the dependency Then there is repository related information

Shouldn't which we didn't provide actually if you want to see what are the bugs and all there has to be a separate URL and the homepage So that is your packagejson file which got created 그건 그렇고, when we initialize the nodejs project and you can also manually created but it's better that we go for npm in it as a process

So now let's go for nodejs Basics So if we talk about Basics, it's like any language Basics and the main thing that we need to check out as a basic is the data types So there are certain primitive data types There are certain abstract data types, like non primitive data type

So primitive data types as string number Boolean null and undefined abstract data types are object array and date to name a few by the way There are so many others but these are to name a few so say for example, if I create an application, let's just create a string as a variable and let's see how that works So, let me just create an app dot JS file and in this I'll create a variable and I'll be very specific I'll say first name and I'll say first To be and Rica This is a variable that we declared and if I want to show this variable in my console, I'll just do console DOT log first name

So when I do this the main perception is basically if I want to run this app to JS I might have to create an HTML file where I might have to include this app as a script file and then I might have to execute the HTML file and open the console to see this particular output But if you have installed nodejs on your computer, which we have you would actually be able to run this particular app dot JS really easily Let's run this one for that

I would have to go into my project Let me just clear the screen and run this one and really simple to run a nodejs application It's simply node And the file name that is app dot JS and you can see that it displays the first name in my console

So whatever I do as console DOT log gets displayed in my terminal that is something that I would like to keep in mind And remember this is a string that we have created but there is no concept of a strict data type So basically the first name can also be something like this The first name can be reassigned to let's say a number and that will not be a problem for JavaScript That is the core nature of JavaScript is not strictly typed

So that is something that I would also like you to keep in mind So there are so many data types that are available which we have created a string and then there are so many others This is how you create a variable that we already saw and then there are operators Now as I say like there is something that is already similar to all the other programming languages variables are one of them operators as well However, there is one operator that is pretty unique and that is the triple equal to sign

So say for example, if I go for something like this bar, let's say h 1 is equal to 30 and for H2 is equal to 30 and then let's say VAR result is equal to H1 Double equal to h 2 I'm using this double equal to similar to any other binary operator like I might go for plus and similarly I'm going for double equal to now this is because it is a comparison operator This would return either true or false and this will get stored inside the result variable So this time I know that you might have guessed it it would be returning as true

And if I do the result if I go for console log of result and if I execute this after chase, you see that it returns as true now if I go for a string, all right, and when I declared a variable in the previous example, we saw that there is no strict data type So this would not actually check for the data type This will just check the value and though it may seem that it should give us false This would give us true and the fact is like JavaScript doesn't care about data types So if say for example you want to also compare the data types along with the value instead of double equal to use triple equal to And that way this would give us false

There is so much going on inside or in this particular two examples that we have but for now, you can remember that double equal to doesn't compare the data types while triple equal to also checks the data types, but then again there is so much going on under the hood, which it's not in the scope of this particular session, but just keep this in mind as a unique operator that is available for JavaScript specifically and then there are certain other languages that might have these operator But JavaScript is the one that came up with this 괜찮아 So this is one thing and by this time you might have got an idea on how we run an application or how we run a file in nodejs

So this is one other thing that I would also like to mention where functions are created say, for example, if I have a function to create let's say function say hello and I pass in name inside it and I return let's say hello plus name a plus here is a concatenation operator and that would return Name our Hello message with the name whatever we have lasting so I can do this like console DOT log say hello and let's say hello to Ravi 괜찮아 So if I run this particular file, it will give me whatever output we expect which is fine Now one thing I would also like to tell you is in JavaScript There is a provision where you can create a function without a name an anonymous function, which is also something that JavaScript came up with a function with no name

And if this is the case then how would you call the function so for that you can do something like this VAR say hello is equal to a function something like this And then there is something Remains the Same function gets called as as normal What we have done is we have created a variable and inside this variable We have assigned a function rather than a value So and then we are calling the variable as a function

So again, if I run this particular code the output would be the same just keep in mind that function here can be an This in JavaScript All right, and then objects now object There are two ways you can create objects one is through object literals Like were let's say a student is equal to a constant object which has let's say name Ravi and email robbery at gmailcom

For example, right and then we can do a something like this console DOT log student dot name, right and then student email and so on and that would display whatever the name is basically so an object dot property can be done and then there is a Constructor pattern as well available, 하지만 괜찮습니다 if we don't go for that but then there is another pattern which uses object Constructor to create an object now going into node js core modules One of the modules is file system That is the fs module FS module if you want to include or any module if you want to include you go for this syntax a variable is equal to require And the module name and this would be something like this for example par FS is equal to require FS Now for this FS module you don't have to install anything else but node

js has to be there and which is there and if is module would be available It's a core module in nodejs so let's say for example if I have a file called hello Dot txt, and it has some data All right, and if I want to read this file, I'd be able to do this like FS dot read file and it asks me the path of the particular file So let's just give the path

Basically I can try with the relative path first so it will be basically Hello dot txt Let's see what it gets and the second argument that we need to pass is the Callback function so nodejs or any JavaScript platform would work more on the basis of callback function That's how it creates the virtualization of so many things working at the same time All right, so, I would go for a callback function and this function Anonymous function would go for two arguments one is error and one is data

Let's see if there is no error then we'd go for logging the data inside the console 어디 보자 What data we get 괜찮아 So if I run this file now, hopefully I should get the contents of Hello dot txt file

어디 보자 Here, I don't get the content but I get something called a buffer that buffer is basically some container that contains raw data out of this buffer I can get the string basically So let's say if we go for buffer dot tostring which is a function which would convert the data to a string So now it will give me whatever the content hello world has and similarly if I for example have to write something inside a file

Let's say if I want to write something inside a file and then once the file is written I would like to read out the file we do something like this FS dot right file and write file would again go for the path And I would be going for the data as well And the data is something like something like this and once I go for the data data could be any data type by the way could be Boolean could be object could be any data type and then I go for a callback function The Callback function would have something only one argument here, which is error if there is no error like if no error then I would like to read the file right so then I can go for fs dot read files I can just take this whole thing and I can put it in here

So what I have done is I have written something into the file and if there is no error after writing whatever I have written, I would be trying to read that file and in here if there is no error I would like to display the content the hopefully this should give me how are you or maybe let's see whether it overrides whether it appends 무슨 일이 일어나는지 봅시다 If I check out this you can see it gives me how are you and if I go into Hello dot txt, you can see that it has overwritten the particular content that was there before So this is an fs module demo This is how you would be reading and writing files

I might like to also try and read and write Json in some Json file that might actually give me a feel of an API that is being created Let's see how that goes Then there is something called events, but before going for events, I would like to create a server first So let's just create a server and you know, the events are basically something that we would be working with where we would be emitting certain events And then we'll be listening to those events

Let's see how that whole mechanism works and how the event handlers would work and all but before events 나는 가고 싶다 into creating the server through the HTTP module because server is also a network application, which is something that node js would enable us to create so Create a server through the hdp modules and then I'll come back to the events Let's see how that goes All right, so let's just get rid of this FS related code and I will again go for the fs code in sometime

I'd also get rid of the Hello dot exe I don't need this 권리 And then what I'll do is I'll create a server in here before the server I'll go for VAR H DP is equal to require HTTP and then there is something which is really simple to create a server in node

js as opposed to all the other languages So is something that a programmer would create so say for example, if you compare no TS with JSP or Java, there is Tomcat Apache web server that is already available If you compare notes as withnet there is is server that is already available If we talk about PHP there is Apache server that is already there compiled and available in node

js there is no server So the concept of nodejs being a server It's something that is not true in nodejs it is just a runtime which enables us to run JavaScript on your machine so that you can create a server if you want to and creating a server

It's not a big deal in nodejs this is how you create a server HTTP dot create server 그게 전부 야 And I'd save it A variable called server and my server would listen to the port number 3000 the server Dot listen 3000

Alright, so this is what your server would listen to and if you want you can also provide the hostname here which is by default localhost / if you want explicitly can provide Local Host as the host name So your server would be listening to Local Host and 3000 and after it, you know starts listening I'd also like to provide a message and again the Callback function or an anonymous function would come into the picture so function So log will go for our server started on Port 3000, right? 괜찮아

So what have we done? We have simply created the server by HTTP create server and we're listening on port number 3000 So that is what it is And then at the end we are displaying some message on the console So let's see one thing that you'd notice is in the other programs The application actually ended like once you are done with the whole program

You see that you get the command prompt back But in this case when we are listening the server is constantly listening to the port number 3000 So the application would not end in this particular case you may have to end the application forcefully by hitting Ctrl C So, let's see now if I run it you see that server started on port number 3000 and the application is not ending 괜찮아

So if I go for say localhost port number 3000 Something that might happen you see here that the request is sent to the server the server is not responding because we have not programmed our server to respond with something So here the server is not responding while the server is running 괜찮아, so if I stop my server you would see it would tell you that the site can't be reached So basically what that meant was previously the server was running So if I for example run the server this would again let me just open up localhost 3000 this would again start to load but the messages the side country reached won't come because the server is still there

The site is Rich with the server is not responding to us So let's program our server so that it responds to us in which you go for a callback function inside your create server method and this callback function has two things request and response to arguments And if I want to send a response in this particular case you go for response dot end All right, and I let's say server works That's the message that I want to send

괜찮아 So what this would do is it would send a message to your browser saying server works So let's just take that message So for that because I have changed something in my app doj's I might have to stop this and I might have to restart my server So server listening on Port 3000 and if I now refresh you see that it gives me the message server works

So this is pretty cool We have created a server in like almost three statements, right? So that is something on how you create a server But generally what people do is people use this functionality of creating a server long with Express and then create a server through Express the framework that we are talking about So we will see how to create a server through Express But before that let's move back to the events and let's see how events would work in this particular case

Now when you talk about events, there are two methods It's that you would be generally going for one is called M it and one is called on so remember these two methods Emmet and on let's see how we can make it work and what our events basically or how an event ID system would work So in that case we again use a core module which is called events So far events is equal to require events again, a nodejs code module

You don't have to do anything to include this one and in this particular case, but also create an event emitter so far event emitter is equal to events dot event emitter And it should be a new event demented actually right now If we go for the presentation you would see that they have also emphasized on to things that is on and Emmet So we will see what these things are 괜찮아

So now in this particular case, let's go for something called event dot on even dot on or not even taught on actually even Demeter dot on this function It's basically an event listener Now whenever an event occurs this function would listen to that particular event 괜찮아 So this would listen to the event and event dot on we would have the name of the event and let's see what we can do as a function

There's a callback function that is also something that is involved in here So we will see even diameter where it will go for event dot on and something inside as arguments But as of now, I'll just keep it this way And I'll simply go for something on the image side of things I would like to emit an event and let's see how that goes

괜찮아 So in this particular case, what I would do is whenever there is some requests on the server, I would like to emit an event and then I would like to listen to the event and log something on the console, right? So, let's see in this particular case I'll go for event emitter dot m it and I can name the event anything the event that I'm trying to You Know M It is basically someone has requested to the server So what I would say is on request maybe just someone I can name it anything

That's why I'm naming it a very bizarre names or someone requested It is an event name and if I want I can pass in some data as well But as of now I'll just keep it this way I'll just omit someone requested and when I would like to do something when someone requested so I would go for even diameter dot on someone requested and That is a callback function Let's just go for console DOT log and I'll just say a request has been done on the server

Something like this on the console 괜찮아 So this is an event emitter and basically on is an event listener Alright, so we are triggering an event or maybe I can call trick even trigger that will be a better name So this is an event trigger and this is an event listeners or even admitted it m it is an event trigger and even tomato dot on is an event listener

So whenever this would be triggered this event will be executed and this function would be executed So, let's see So if I now read on my server because I have changed something in my nodejs app I'd have to rerun this

It says server started on Port 3000 I will just refresh and we'll give me server works That is fine But if I check out on the console, you'll see that a request has been done If I refresh again, you see that a request has been done and then there are two requests that is because one is checking whether the method get is available on the server or And thus the other request is basically executed with the method get' actually so there are two requests but we don't need to you know, go into detail in that particular case

However, one thing is for sure that whenever the event emitter is triggered we can execute the on method and we can listen to that particular event 괜찮아, and if say for example, I want to pass in some data, let's say test, right this data can be taken into the function the anonymous function as an argument and again just display that for example data that should display test to me So whatever you pass in could be a string could be a Boolean and object anything would be taken into the function as an argument can name it anything and you can display that particular argument as well inside the console Let's rerun our program and let's refresh the server is requested and you can see request has been done on the server and test this particular data is also been displayed So that is the event diameter you can emit events and you can listen to events whenever the event would be emitted the listening would happen

괜찮아 So this way, you know, our nodejs server becomes an invented server and this is really good If you want to create a chat application or any real-time application event handling would actually help us create a good real-time application So that is where this would basically come into the picture

So, you know, you can check out socket IO there is a library called socket IO which helps you to create a chat server This would heavily use event amateur on and emit methods 괜찮아 So this is the one now we have created the server using the HTTP module and if we talk about the server you can always see that the client would be either a web browser or mobile browser or an application that might request to your web server The web server would contain your server file

That is the app dot JS that we created plus some application logic as well if you want and the Might be taking data from the data layer or any external system and it might be serving the request back to the client So basically this data would be taken into the business layer and to the web server and the web server respond, like response dot end sort of thing would happen in this particular case 그래서 이것은 how the request response cycle would go on and then we see here that it's creating a web server using nodejs you can pause this particular portion You can also try out this whole thing

I think you would know how a server is created You already know that and then there are certain other things that are listed in here which you can try now we'd go for third-party module or a third party package You may say or even we can call it a library It is called Express JS next press JS It is an OG s framework which is basically facilitating the management of data flow and routing as well

It is very lightweight and nowadays if you create a node application for an a By order of Observer expressjs is something that you definitely have so it's like basically the part of the language itself right Now It facilitates faster application development It provides applications with template engines two of them are Jade which is nowadays known as pug and ejs to of the very popular ones, but then there are so many others it helps, you know, building single page applications building multi-page applications as well It helps you to connect with any database MySQL mongodb red is ETC

The configuration is really simple will see how you create a server in express its really simple and it also helps you to handle errors or maybe it gives you a good facility to Define error handling processes so that your maintainability of the application is something that would work So let's just create a demo in Express and let's see how that goes And as I said and be using HTTP and express together Create a server That is an ideal way of doing it So let's just get rid of everything and let's just start with the express server for that and have to include express

Our Express is equal to require Express Now when I do this and if I execute this, you might expect that this might work but remember Express is a third-party Library It's a third-party module So in that case you would have to install that particular module on your system Obviously, if I run this, let's say if I try to run this this will give me an error cannot find the module Express

So let's install Express in here in order to install expression Remember the file structure that we have We have an app dot JS file a packagejson There's nothing else in here

So let's just install Express Let's say npm install Express You can go for install the whole word or I as a short form 괜찮아 I didn't stall Express and this would actually download Express from the npm Repository

And install it on your local machine and you'd be able to also see where that Express exactly gets installed So you can see that expresses installed 48 packages installed 괜찮아, and now you can see a change in the file structure there was already package dot Json an app dot JS in my file system while there is a folder called node modules created and package underscore Dr Jason also created the node modules folder would actually have the library Express and then there are so many other libraries that Express depends on which are also imported and installed

So now if I execute this this will not give me an error However, we have not created a server We have not listened to a port number So we'll be doing that through Express Let's do that

What we would do is Express And brackets like be calling expressed as a function and we'd be saving it in silver a variable called server 그래서 이것은 how you create a server in Express pretty simple And what we would do is server Dot listen 3000 and then the same drill like 3,000 and not specify Local Host because I know that it is localhost and at the end a function that tells that the server is listening to 3000 so consolelog, so listening to Port 3000

괜찮아 So the express is required like included a server is created and the server is listing now, let's just rerun the application and because the server is listening the application would not stop it will keep on listening and let's go into our browser and let's refresh this time around when we refresh you Do not get that whole loading thing But instead you would get an error and it says that it cannot get / this is actually not an error on the server side the sir Is all okay

문제는 that we have not programmed as server in a way that it would address the get request on the root path This is our root path There is no get request addressed on the route, but that's what it says So what we'll do is we'll address the get request I will do something like this

We'll go for Server dot get well actually rub the naming it a server because I would like to use this server identifier somewhere else in some time I'll go for app now go for app Dot listen this time around All right, so app and this also tells you that you don't have to name it server can name it anything that you want So this is my Express app and app dot get / and a function request and response the same request response function that we had but it is now specifically for the root path and in here I can go for a response dot either I can go for end or I can go for send and response that send Let's say X This works I can also let's say have an H1 tag so that I had browser displays it as a heading that can be done

And now let's rerun the application and hopefully the root path get request is addressed So let's go for it I'll stop this we run the application 그건 그렇고, there is a utility called Node 1 which would help you to run your application automatically once there are some changes but this time around we'll just you know, read and the application manually So if I now refresh you see that it gives you an H1 which says express works

So which means this is all done Your root path is addressed Your route get request is done But what I would like to do is I would like to go for something called tasks Okay, there is no route that is tasks that is defined yet not programmed our application so that it addresses the get request on the tasks in this get requests

Let me just go for the get request first sap dot get slashed asks is what I want to have the server address and Request and response request and response So now I can go for response dot send I can go for another H 1 which says tasks work if I now restart my server and remember to stop myself I'm just pressing in control C And if you are a Mac User is command C that is stopping the server And now if I refresh to see that tasks work this works

Now what we have done here is we have created two routes one is app dot get for the root and one is apt-get for the tasks It could be a blog post It could be about put up dot delete AB dot patch anyone who is familiar with the rest API would be familiar with all these words your server can address any requests get put post delete patch any requests that you want to address here We are just going for get requests 괜찮아

So now what I would like to do in here is I would like to return something from a file Like for example, I'd create something called DB dot Json Json file And in this Json file, I'd like to go for let's say a key called tasks and tasks would be basically an array of tasks which would be learn node Js now in JavaScript You can create area with square brackets similarly in Jason's in text that will will work

Let's say learn JavaScript learn Express So these are the three tasks that I have And what I would like to do is from this Json file, I would like to read these three tasks and I would like to return them as a response So, let's see what we do in this particular case Let's see how that works

And that response has to be in this particular case right in this particular response dot send I'd like to read the file and then send the response so we know that what we use for reading the files, which is the fs module and also we know what we use to create a server as well Here we have Created a server by Express but generally people always use a mix of Express and HTTP to create a server Let's see how that happens What I'll do is our first I'll go for H DP is equal to require HUD p and for this week, obviously, we don't have to install anything It's a core module and I'd go for VAR server is equal to HD P dot create server

괜찮아, and app is something that I'll be passing in as an argument So my server is created which has all the goodness of Express So instead of app Dot Listen, I'll go for Server Dot 들리다

괜찮아 Again, this is all stay the same will it will listen to the port 3000 and then go for a message It is server is listening to poetry thousand and so on and so forth So what we have done is we have included Express We have included HDPE you created an Express app

We have created a server with the create server method We have passed on the express app as an argument, which means all these routes would be something that would be addressed And then at the end we are listening to poetry thousand Now, this is the common way that people would use to create a server and an Express app together Alright, so now let's rerun our program

무슨 일이 일어나는지 봅시다 It gives me an error and that is a typo So let me just resolved that Right, and now let me just rerun the program So again listening to Port 3000 this would not probably give me anything

You can see that it is still loading because there's no response that I have programmed in here which I would like to but say, 예를 들어, if I go to my root path, it gives me Express work So that is all working fine, which is cool actually to be using Express and nodejs server together Alright, so now I'd like to read from the DB dot Json So obviously I would need VAR fs is equal to require fs

And in here at go for fs dot read file and go for the path that is TV Dot Json the relative path and the Callback which has two things as far as read file is concerned one is error and one is data Let's go for console DOT log or not even console DOT log, let's just do a response dot send Once you have the data you go for data dot tostring would be something that we'd be going for Let's see what we get in this particular case I would have to restart my server and this works and if I go for tasks this gives me an object that has an array of tasks

So I don't like to have the whole object but I just want the array of tasks to be there So one would think that okay I can do something like this Like let's say War tasks is equal to Theta dot tostring dot tasks That is the object that we want to get but the thing is like this tostring would convert the whole data to a string which would not have that property called task

So if I want to convert this string to a Json I'd like to do something like Json dot parse One of the codes have a script methods this would then have the property called tasks Json dot parse data or two string which we are passing As an argument and that will convert this string to a Json and then I'm going for tasks as a property at the end I can simply send in tasks

So that will give me the plane are a that we require All right, and specifically if I want to send Json I'll just do response dot Json rather than going for response to its end So I am being specific in here So let's just stop this and start the app again and refresh and now you see that you get the array now, you might not get the same output that I am getting as far as the color is concerned because I have a an extension which is running in my Chrome browser that is adjacent reader or something like that I had installed it years ago

So that is the thing But the more important thing is you're getting the plane are a from the file that we have So in this case we have used almost all the things that we have learned We went for Express We went for HTTP combined

It was a server that was created and then the fs module to read something from the file this would probably be Something that we would like to go for from a database like we'd like to get a database connectivity done and get all the data in and then read data from this particular case But as of now read file would be enough and this might give you a good introduction to node js So this is what it is and further down You can try out more routing and more database connectivity in nodejs see how that goes for you

Hi everyone This is a she's from Erica And today we are going to learn how to build a mean stack application from scratch So before moving ahead, let us discuss the agenda for today's session So we start with what is a Min application then we'll talk about mongodb Express anger to a node

js basically mean is an acronym for Mongo DB Express angular 2 and no dot j So we were talking about all these four Technologies They will talk about credit operation And at last we'll start building our application which is contact list mean app So let us start with very first topic of today's session which is what is the main application means that refers to a collection of JavaScript based Technologies used to develop web application

So from client to server to database everything will be based on JavaScript If you see the diagram which shows a simple client server architecture that will be following in our main application If you see there you will find angular 2 that we'll be using for our client side development Then we will using Express which is based on no dot DS for server-side development and at last we'll be using mongodb as our database So this is the architecture that will be following

So let us talk about this for Technologies starting with mongodb So mongodb is an open source schema list nosql database system So if you are working on Mongo DB you will be working on Collections and documents a collection is a group of documents Whereas document is a set of key value pairs You can refer to a collection as that of a table in our dbms system

So basically all the data that will be working on inside mongodb will be in the form of chi and values mongodb saves data in binary Json format, which makes it easier to pass data between client and server So next on our list is Express So Express is a lightweight framework used to build web application based on node dot JS It provides your setup robust features, which you can use to build single page application as well as multi page application The idea of Express came from Sinatra, which is a very popular framework based on who be so basically Express provides you boilerplate by encapsulating the functionalities of node or chairs

So that the whole app building process becomes easier and fast now, let us talk about angular 2 using angular 2 you can make application for your mobile as well as your desktop angular 2 is by far the most popular JavaScript framework available today And with the introduction of typescript angular 2 is bringing a true object-oriented web development into mainstream So we'll be using our interface through which our client will be interacting using angular 2 So at last let us talk about no dot JS So no dot J's is a server-side JavaScript execution environment built on Google Chrome's V8 JavaScript engine

It follows an event-driven architecture where there is a single thread mechanism to process your events and even can be a clicking a button or filling a form in our website So all these events are then sent back to your server for processing and then the server after the processing is done generate the response The processing of these events are done Asynchronously that is if we have multiple events in our event queue our node Server doesn't wait for a particular event to complete so it can process or serve multiple requests at the same time So these very whole event-driven architecture makes our node

js server highly optimized and scalable So I hope guys you have a clear overview of All the technologies that will be using in our mean Stacker So now let us talk about credit operation prayer is an acronym that stands for create read update and delete So basically these four operations will be performed on our database So we will be using post method for inserting new data into a database will be using get for retrieving data from a database will be using put for modifying or updating any data that is there in our database and at last we'll be using delete method for deleting resources or deleting any data that is there in our database

So we will be implementing all of these for functionalities or operations using restful apis that will be learning while building our whole application So guys let us start with building our application before that We need to install manga TV, and no dot JS locally into our system So let us go ahead and do that So for installing know dot JS you need to visit

This website called nodejs dot o– r– g– go to the download section then according to your operating system choose the correct installer and download it So I'm going to go ahead with Windows So basically installing no dot years or longer Even your system is pretty easy

You just have to go through setup Click a bunch of next button and specify your location where you want to install it or go with the default and that's it So my download is complete I'm installer I have already downloaded and install node or chairs in my system

So I'm not gonna install it but I'm gonna show you the procedure or way to do it It's pretty easy And then we're gonna stall mongodb I think I have also installed a mongodb in my system, but I'll tell you how to do that So specify your location here then click on next next and then finally install

So once your installation is completed click the Finish button and open the node dot JS command prompt So basically we will be using this command prompt No dot S Command prompt to build our entire project So let's check out the node version

Then you can go ahead and check out the npm version Npm stands for node package manager, which is there for managing your dependencies and their versions So whatever dependencies you need to run your application or for your project, even I use NTM to manage that now let us install mongodb into our system So you go to mongodbcom

You click on download then again as per your operating system choose the correct installer I'm going to go ahead with this very version and I'm going to download the MSI It's a big file 148 mb so I have already downloaded it So I'm not gonna go ahead with the download You have to run this setup

Click on next I have Mama TV already installed in my system So I'm gonna remove it first then you can show you the installation I could have done that with no dot J's as well But it's pretty same like you just have to click bunch of next have to specify your path And that's it installed it then go next agree next

I want complete install You can go ahead with the custom options as well where you can specify the location and other configurations, but I'm going to go ahead with the default mode or the complete installation and the mongodb files will be installed in my program files if you're using Windows and you can go ahead and check out that so I'm going to show you that once the installation has been completed Yeah, so click on finish Your father will be installed by default in your program files If you're using Windows go to Mongo DB server 3

4 then so this is where you're all the files reside in your system Now for running your mongodb service, for example, whenever you are creating a mean app, you need to run the mongodb service so that you can make a connection to it and performed it operations So for that what you can do is go to dogs in mongodbcom because you will get the whole procedure or step by step process to do that Welcome 1tb

Soho installation manual Community Edition windows We have already computed this very step that is install mongodb Community Edition Now, we need to run this mongodb service So for that we need to create two directories called as data and one subdirectory steamy So let's go ahead and do that will open command prompt

Let me delete the data file because I had a mongodb already installed in my system I'm gonna delete it So yeah, DB has been created now the next step is to tell mongodb that this is the part where my database data or data for the database will be deciding I'm going to copy this command and I'm gonna paste it here I'm going to change my path which is see / data, that's it

So my connection has been started My service has been started and sweating poor connections on port 27 0 17, which is the default port for mongodb to connect if in case like if you go ahead with this very step and it doesn't work out and you have to execute the Mongo d dot exe, which is the third step you can do that as well So we have mongodb ID and no dot JS ready So now we need to create our project So I'm going to go ahead and start building my application for that

I'm going to go to my project directory which is in 3 Drive Yeah, so I'm going to make a folder where I'll be putting all my source code Server side as well as my client side So let's name it as the name of our application which is contact list Now I'm going to use npm and it command to build my project as well as create package dot Json thyroid which will contain all my dependencies and their version

So you'll go ahead and rip and pm And it will ask you your project name Version description of the project that you are building simple mean application entry point is the file from with where your server side exhibition will start So let's name it as AB dot JS You can go ahead with index dot J's as well

I always use app dot j So it's up to you to name Whatever you want to name that file You can do that You can put your name as author

I'm going to put mine right now Let's open this folder So it project Okay, I have already opened in my vs code So I'm gonna use vs code as an editor

You can use any editor of your choice So this is your packagejson file which contains all the information regarding projects We haven't installed any dependencies yet That's why you're not seeing any dependencies or anything like that

We're going to go ahead and do that So for that I'm going to use the command + V app installed So for installing any dependency or module you use npm install command followed by the name of that particular module, which is Express Then you can use – that's a flag in that way whatever dependencies or modules You're installing

It will be written to your packages on fire So I haven't told my Express and you can see over here in the dependencies section We have Express of version 41 52 and oh, so this is how you do things

So now if you want to share your project with your friend or colleague, so you don't need to send the entire project along with the dependencies So you just need to send them the source code and this package for this one file so that they can download the dependencies or install dependencies and start working with your project You can also install multiple dependencies or modules or at the same time What I mean to say is using a single command install go ahead with Mongoose and then we need cars we need body parts So Mongoose is an object document mapper for using mongodb and body parts are used for forcing the incoming Json data and course is power because we will be having our server code running at Port 3000

Whereas our client side code run on 4,200 4,200 So that's why we need to enable course so that we don't get any error, which is not allowed by default As I told earlier we have our entry point file called AB dot J's from where our server side execution is start So you start server side code by making that verify locating that verify the first place So we'll go ahead and do that

app dot DL then what we will do we will import the modules or dependencies that we need to build our project or our server side code So importing modules So first we need Express We need mongoose We need body parcel

We need cars And we need part We haven't installed part because it's one of the code module So you don't need to install it separately Now now for making a express application now using Express we need to use express method and assign it to some variable

So we'll assign it to app 괜찮아 Now we need to define a port number Now we need to bind our server with this port so These are callback you can go ahead and I'm using Arrow function

You can use function as well the JavaScript function After a successful connection, we need we want to say that server started at home Concatenate the port number Now what we need to do is we need to add our out so that if we go to localhost 3000 then way to specify our server what it needs to render for that home page route Testing server because we're gonna hit on create all our doubts in a separate file called route dot J's or something like that so that all our hours are in particular file, and it's not in our app dot J's file

For creating route you need to use get method For example, like this is how I am defining a route and the route is for my homepage That's why I'm using / the next argument is request response Stockton now, let's go ahead and run our server For that you need to execute note space your entry point filename

So our server has been started go ahead and check that So we have a full bar So everything is running fine now So remember I told you that I want all my routes to be in a particular folder So I'm going to create a folder called route

We can simply put it in a file because it's a simple application So we do that or we can create a folder as well your outdoor chair Now we want to use this very particular folder So what I'm gonna do is I'm gonna Define this particular file with a variable So first I'm going to use Rao

four we need out slash Now we need to use it 그래서 So I want all my heart which is proceeding with / contact or / API or / ABCD to be forwarded to that for a particular file So for that, for example, I want it to be / API

So all the routes with / API slash ABC let's say will be directed to my route dot J's file and where I have defined what to do with that particular route called For example, I'm having / API slash at contact for adding the contact So whenever a client needs to add contact it will make a power to this very API slash API slash add contact and I would be defining my Logic for adding contact to my database over there in my route dot J's file beside that very particular route That is / API slash add contact So that's how things work

Right, so we need Find out so that we can make call to it and we can perform our data operation So for now this is the reason that we are making the roads So it's done now we need to add our middleware so that we can parse our data and we can use korres So let's go ahead and do that So we need cars

We need body powder as well So you want to parse the Json data? sad and we need to do one more thing We want all our static files to be in a particular folder So for that I'm going to create a folder called Public and inside that I'm gonna create my file index dot HTML, which will be rendered by our front-end application

so static files join Basically, I'm defining the path here You can directly go and specify the path of this folder public folder or can use underscore underscore dir name which will point to your current directory and you want to join it with public So guys we are done here now Let's create some route So we need to bring Express

You can use cost or wear whatever you want But in general we use cost because the value of Express is not going to change I mean the value of variable Express is not going to change in our code Same with router we're gonna use express routers I told you that we'll be adding routes here

So whatever call I'm making two / API, which is there Let me show you / API slash contact It will be directed to this very particular dot get method The quest is bouncing next Now this is my / contacts folder

그래서 And I'm gonna use this very route for retrieving the contact list 괜찮아 So every time you make changes to your server side code you need to restart your server or what you can do You can go ahead and install node mode, which will continuously watch your source code files for any changes Whenever there is a change it will restart your server on Stone

So we don't do that Now you go ahead with node mon 어서 Just start your server So getting an error, so whenever you're creating route, you need to export your router as well

So basically what it does it goes to your package dot Json file and where it finds the node one that our main entry point file is uploaded tears and finally start the server using this very particular file So if you see over here the same command that we use to execute for starting a server node app dot JS has been used by note mode Now if I go ahead with / API slash contacts See we can have the data So now what we're gonna do you're gonna connect to our database and then here we want to write our Logic for retrieving data from a database and that's how we will send data to our client-side application, which will make a call to this very particular API and it ripped the list of contact We need few methods for example for reading data

We need a method to add data at contact For that we'll be using post method Then we need a method for deleting contact pretty similar the syntax or the signature of these method So how I'm going to delete a particular contact is by referring to that very particular contact using its ID So today know what we need

We need to create schema for our contact that will be inserted into our database and we need to make connection to our database So we're going to make a folder called models inside that we need a file contacts got tears So this very particular file will be having all our schema or contact schema So that is the reason I am making this file So we need to bring in Mongoose for since we are going to make schema for a mongodb

So in to bring mom goes through which will be talking to mongodb or through that will be using our mongodb database contact schema Mongoose schema So this is our function and I'm going to pass the schema that I'm going to use for my contact So I'm going to go ahead with first name and last name Drive strength but crew then we need last name Let's make it required also

You can make it false as well But since it's a demo, so I'm going to go ahead with true Last field will be for contact number or phone number So let's keep it string only Now we need to export this very schema

So it's done Now what we need is we need to create connection or way to connect to our mango TV So we're going to go ahead and do that So we have Mongoose already here So now for connection will be using Mongoose dot connect function

So let's go ahead and do that connect to Mongo DB Mongoose dot connect then we need to pass the URL along with port number through which we gonna connect to our mongodb So it is mongo DB Local Host two seven zero one seven, so we're going to go ahead with our default port Now on successful connection we need to display a message that yeah, the connection has been established successfully

on connection we need to say mongoose connection dot on connected then we want to say that Connected to the database Mongo DB at yeah, that's it now in case of error Suppose we have an error while doing the connection or while establishing the connection

if you are we need to know that what is the error that we are having? Prints a message as well is connection Yeah, we don't need So it's done I think now we can check out if we have made the successful connection or not yet So we have been connected to our database at Port to 7017

Now, what we need to do is create apis for retrieving contacts are adding contact or database or deleting contact from our database So you're going to do that So first we need to bring the schema the contact schema that we have created in our contacts dot JS file Now for retrieving contact we're going to use find method or function Then we're going to pass a callback

So this is one other way to define a callback or function the JavaScript way Yes torches on contact So after achieving the contact all the contact or the contact list will be saved in our contacts variable which we are sending or responding back to our client in Json format No, we need our post So first what we need, we need to create a new contact which will be adding to our database

So I'm going to make an object in contact Let's go to new contact It will be of type contact name I won my first name to be from my request body dog first name Then last name? So it will be lost

Then we need phone number That's it guys Now we want to insert this very new contact into our database So for that we're going to use new contact dot safe and we need a call back Let's go ahead with the arrow function

if error Way to send all we want to send Let's search fail to add contact else contact added successful That's it guys Now for delete what I'm trying to show you is that if you are inserting any data into your database, what are mongodb does it creates an ID for each document or each contact? So using that for a particular ID, we gonna refer to that particular contract which we want to delete and will perform art-lete operation So that's how we want to do things

So from client side will be receiving that very particular request for deleting a particular contact then using that very ID, we're gonna issue or delete command so Contact dot the move Now as I said, we need to retrieve the ID This ID and then a call back pepper hose That's it guys So our delete method has been added to our layout file successfully

So we have 3 methods now later on we will also add our update method So it's done We have no error or no issues now for checking our apis we gonna use Postman which is a Chrome extension, which you can add to your web browser Chrome browser and go ahead and check your apis You want to go with post nine crew? Here you will get an option for adding it to your browser or to your Chrome Now first of all, we need to insert some data so that we can fetch it

So, you know what with our post method then we want our header as content type to be Json Then we need to send draw later 그래서 first name Bruce last name whale then phone number Okay, I'm gonna go ahead with string But yeah, let's add some random number here Now

We have to enter the URL or URL of the API that you want to make the call to so that it can be directed to that particular post method So we're going to go ahead with Local Host 3000 / API slash contact so contact added successfully Let's add some more contact Peter Now let us retrieve the contacts that we have already added into our database For that we'll be using API slash contact

So we have these two contact So that's what I was talking about You can see over here We haven't added any ID field while inserting our contact So this is automatically generated by mongodb

And this is what we are referring to in our delete method So what we're going to do is copy this very particular ID No, we're gonna issue a delete command So now our method will fetch this very particular ID from our URL and it will refer to that very particular document for that very particular contact and deleted so the contact has been deleted Now let's check that

We are having issues here so we can see that our Peter Parker has been deleted So this is how you can check your apis Now what we're going to do We're going to make our client application and where we will be making call to our apis for performing various kind of data operations that we have to find in our server file or server side code So that's it guys are server-side code is complete

Now, we're gonna go ahead with a client-side application using angular 2 and we'll be creating view templates and all to show a contact list will add buttons for delete for adding contact 그리고 모든 것 Let's go ahead and do that So for that I will be using angular CLI or command line interface that will be using to build our entire client side project So go ahead and open a new instance of node Js e MD then go to the project directory

So now we need to install angular CLI for that you'll be using again npm install add the rate angular / CLA So basically angular CLI will help you to provide all the boilerplate or all the files which is necessary to run your client side angular application It will also provide you the core node modules or core modules, which we are going to use in our angular app Yeah, so npm install has completed and our angular CLI has been stalled Now

We're gonna go ahead with creating a angular project So for that you will use NG new and the folder name where your angular app will be deciding so ingenue client I'm gonna name this kind because it's a client-side application So as I said, it will provide your boiler plates or all the files So these are the files that will be created using your ingenue command

So you'll have a basic component called as AB dot component and you will have a basic model I've got module where you will be specifying all the modules which you're going to use across the application as well as your components and services Then we'll have index dot HTML which is the file that will be rendered in the first place to your web browser So which we have specified in our public folder then we have packages own There are other files as well

If you see over here, we have protractor for testing and for linking we have t es Lindo Json and although configuration for our angular CLI is in angular – CLI dot Json so couple others are there so which is not required for now, like don't need to know all of that So our project has been created successfully now, let's go inside that very particular folder No what we need we need to create components Okay, let me just give you a quick walkthrough So inside our client folder, we have Source then app

These are component our basic component called as AB dot component So if you look at index dot HTML file, which I told you it's gonna render in the first place So here in body We have app – truth So this is a selector or tag which will load our app dot component for their so basically we will have AB dot component or app component class to be rendered in the first place

So here you can see we have AB – route as selector So for building an angular 2 application we use typescript as language of which is based on object-oriented features So here you can see that it's a typescript class called as app component Now, we have something called as decorator at the red component decorator which tells angular that this very class is Component and we have template URL over here which specify the template for our component which is over here And then we have CSS for styling

So let's run this very particular application So npm start is the command or you can go ahead with NG serve now you go ahead and What 200 you are having that for a particular thing as app works? So basically first our index dot HTML file is rendered which is calling are approved or app component So if you check out the app dot component template to in this template, we have what we call as interpolation or one-way data binding so we are winding this value as app works so left Let's make it welcome to El Dorado

It has been changed So like for in case of server-side applications while we were creating the express app, we had to run server every time whenever there is a change and for that we use node more similarly in our angular side application There's a difference is that we don't need to restart our application or it continuously watches for any changes that we make in our source code and it re-enters or restart the whole application each time so you can go ahead and check that So if you see over here, then we had a change over here So it recompile it and start the whole application

All these TS files are converted to JavaScript files or transferring to JavaScript file And then our render now we need a basic component called as a contact for listing our contact as well as there will be a form of over there which will have three for adding contact then we'll have button for deleting contact So Let's go ahead and do all of these So first of all, we need to create a component So I'm going to stop it for now

We'll be using NG G or NG generate for generating component or services Name of our component will be contact we need a service to so basically it's considered to be a good practice to separate your business logic or your data retrieving or data operation logic in a separate file, which we call as a service Then what we do is we inject those Services into a component over where it is necessary So as to use those services No, you can see a warning here that service is generated but not provided So basically whenever you have to use or in whichever component, you have to use the service you have to provide it in your at the rate component accurate

So there will be a field here called as providers and we will add the service that we will be dating now So we have contact or service dot DS or contact service class where we'll be writing our business logic or our data retrieving or write operation logic Then we'll have contacts component where we'll be creating our template and all the logic behind up So we'll start with creating our service so that we can retrieve the data first then we'll start with creating these contacts dot compound No, one more thing we need is we need a schema for our contact

So let us go ahead and make a file called as contact or chairs or Ts that will transfer into jai's so you do that contact dot DS? now we'll have a class called contact which will have four fields I-80 we have tried string Then we need first name print last name String and phone optional field now

We need to import our HTTP model for all getting all HTTP methods for retrieving data or for sending data or in other words contacts so import http We need headers as well from angular http then we need our contact class to be imported here so that we can use the schema boat contact from Then we need reactive just operators basically will be using nap operator So it's done now

We need to use our HTTP module so for that 끝난 Now, let's create the methods for retrieving contacts Then we will add contacts and we will delete contacts so we will have grieving contact So which is get contacts

And I want to return All the contact call the contacts or cut the contact list, which I will be getting through while I'm calling to my API Then the API URL you can see over here This is the signature or syntax of your get method or signature You can call like we will have first argument as a URL string so we'll have as HTTP / localhost

/ 3,000 total number then we'll have a pi then we have contacts then you want to map it to? Json format So we have our get contact method radio here Now we need add contact method Add contact Which will be taking new contact as an argument We are now up and content type in our header, which is So now I want to return

the response and I want to make a call to my add contact API, which is / API slash contact I'm going to copy this very same thing and then I'm going to pass the new contact Then the headers Will map it response as Json

now either delete method Tim I told you that for deleting a contact will be using ID so as to our effort that's very particular contact in our database, so we need ideas are parameter Then I'm going to append or concatenate the ID So we have our service ready now, we will be using all of this method or injecting these Services into our component and then we want to use all of his method to retrieve data and finally do something on it For example, if you want to show the contact list, so we'll do that then for adding contact will use this add contact method So that's how we're doing things

So let's go ahead and create our component So we'll go to our contacts dot component TS Private contact service Yeah, but we need to import it first So we have contact service

from dot slash contact Yeah, so now we need our contact class for schema 그게 전부 야 Now We're going to initialize our contact service or we want an instance of that for you contact service class so that we can use the method that we have defined there So for that what we will do will We'll pass the argument as private contact service of type contact service class

So this very process is called dependency injection or that's how we inject our services into our compound and second thing is you need to provide your service So as to use it providers now let us go ahead and retrieve data So we'll be quoting are retrieving data logic inside NG on init method which will be initiated Once your component is being loaded into your browser

So every time you load your component, it will automatically call this very particular method to retrieve all the data So we'll be having this dot contact service and we want to use get contact method so you can see over here that we have 3 methods add contact list contact and get contacts We're going to use get contacts and since it will be turning an observable in to subscribe that we want our contacts to be saved as restore contact now it's showing an error because I haven't made any variable for contact So let's go ahead and do that So it will be one tax type contact and it will be an error

Yeah, so we have done that Let's get some more variable that will be needing it wrong We need one then we need first name texting Then last name? then phone number that's it guys Remember, I told you that the bootstrap component is AB got component

So we need to specify in our app dot component that this particular component should be loaded So we'll go to template and we're going to use app – contacts Because if you go and look at the selector, it's app – contact so contacts works So guys, we have retrieved the data here Now, let's get our template so that we can display this very particular data

So I'm going to go ahead with my contacts dot component dot HTML and so before doing this we need to refer to our bootstrap style sheet so that we can incorporate it into our template So we'll go ahead with boots watch then these are the size that's available which you can use So I'll go ahead with something super hero

So you can go ahead and click the download and copy this very thing and put it into your HTML or index dot HTML file So we'll go there Will copy this very thing And they sit here and then we need to write stylesheet And will you move this very particular field and we'll copy it here in our HAF so that it can refer to it

So it's done Now we can go to our component and here what we want is we want to iterate over our list So for that we will be using something called as n G4 which is a structural directive So the strick and G electric contact contacts so we'll be iterating over contacts using contact variable

So each contact in our contacts array will be retrieved in this very particular variable and that variable we will be displaying as a list so Let's go ahead and do that So we need our class md3 again until closing div tag So now again, we will be using that very interpolation or one big data binding To display our contact DOT

First name then we need similar columns for our last name and phone number So it's done So let's check out our yeah, so we can see over here that our list is being generated We'll put some more style so that it will look good in the end So what we'll do right now, it's will add a delete button using that we can delete any contact So we'll go ahead and do that

So for that I'll be copying this very thing again, and I need my foot type Be a button Even click which we'll call a method call as deal contact – we haven't created yet, but we'll do it soon Now what we want is we will be referring to that very particular contact using ID as I told you earlier, so Eddie so the value should be the we'll be using a class

Call us button Danger So it's done so we have this very particular thing over here Now, what we need is will add few breaks so that we are iterating over the list So yeah, we'll do it later on this stylings So now we'll add our delete method over here which will be using and we also need something called as adding contacts add method or contact method

So let's go ahead with our delete first We need delete contact Let's assign ID as any type of type any now so basically we'll be calling our service again So this dot yes contact service dot delete contact and then we'll passing the ID and since it returns an observable We need to subscribe that very particular observable

So we'll go ahead and do that Now what we need to do is even if we have polluted the data or the contact from our back inside of my database I need to remove it from my contact at as well This very particular contact where all the contact has been safe So we'll go ahead and do that

if the delete operation was successful then straight over apps dot length then okay, so I'm having an error because I haven't defined the variable contact so contact skull to this dot contacts So it's done Now we need to increment our iterator so if contact I dot underscore ID is equal to the idea that has been provided to my method Then I want to remove it splice iPhone so our delete contact is done

No, we need to add our new method for adding contact So delete functionality is done So let's add our add contact method so that we can add more contact and delete them and see if everything's working fine or not So what that I'll be using that contact and This will be creating new contact

Here I need first name to beat the start First name then I need last name to bring this dot last name and I need phone to be this dot pool Now I need to provide this particular contact that I have created to my service or in other words I need to call the method that is defined in our service So for that will be going ahead with a contact service

Doc add contact and will you pausing this particular variable? We're going to subscribe it Just start contact dot push So we are pushing the new contact into our array We are having here, okay So it's not able to find any not finding the contact and I don't know why we are having this error

Okay, let's check it out So yeah So it's done So this is our add contact method now We need to call it from our template

So we're going to modify our template so that we can add a form on top of our class and which will have three Fields 14 name one for last name and then 414 phone and then I submit mutton for adding the contact finally So far form we need to use form tag or submit event And then we'll add add contact So this is the method that we're going to call when the form has been submitted Close the tag form tag now

We need three field guys So the first one will be of power first name So let's go ahead and do that So for that will be using the class equal to the classical to form group now we need to close this particular tag, and I want my label as first name Yeah, now I need input type equal to text Then we gonna use something called as NG model for two-way data binding

So whatever changes that we're going to make there should be reflected in our list as well Where will be showing the contact list So we're gonna use that and G model goes to name equals 2 first name class equal to from So it's done we have our first three four The first name similarly

We need it for our last name and then for our phone number, so we'll treat it as last name and then we need to write it as last name here Finally we need for phone number So phone number so you want to put this value to our phone variable? Yeah, everything is done here Now we can add something goal is required So if you are not putting that very or feeling that very feel then it will pop up a message or they will be a message popped up stating that you need to fill that very particular form or particular field so we can use this require here now

We need one button also for our submit button for submitting our form Now on top of that we need to add some heading stating that this is the section for our add contacts Oh It's done Now We have everything here All we need is a horizontal line or too low Yeah, so basically these are at contact form using which we can add our contact and these are delete button everything is there let's try my name you're having a tear but yeah, it's there and the second thing is that if you are seeing this that every time we are adding a data we need to reload it is happening because our this very method for retrieving the contacts

So basically whenever you are retrieving the contact and displaying it at that particular time, like your browser never allows you to block your UI, so that is what is happening right now So what we can do to fix it is we can copy this very particular thing over here and we're going to put it inside our a contact To be called just after we have pushed the contact So now if we go ahead and Do that then Yeah, you can see where okay, we should add some BR tag so that it looks good or present table over here

So we're going to do that here So this is so far now Let's check the our delete button It's working as well So our whole application is working

Let me give you a quick walkthrough or a quick recap so that we can do fresh all the things that we did for creating this very particular mean application So what we did we start with our server side coding where we had our AB dot J's or entry point file where we imported all the models that we required for application Then we use middleware for applying cores and body parser to parse the Json data and then we put all our routes in a separate file call as rho dot J's, which is over here Now there we created routes for each grid operation and then we created schema for database for contact Like for example, first name will be like this last name will be this and phone this No, we have our client side or client folder

There we started with creating our component So these are component and then we had a service called as contact service where we have mentioned all the data operation logic and we have injected this way service in pure component that we need to buy use or we want to use so that's it guys This was the whole angular application and express and Mongo DB So we have created our main app successfully I hope you find this whole session to be informative

Hey everyone on behalf of Eddie Rica I'm going to be bringing you a full stack application tutorial now many of you may be familiar with What's called the mean stack which is mongo DB angularjs Express and nodejs we're going to be doing a couple twists on this very popular stack and introducing graphql, which is a technology from A book that makes it easy to query fields and send data between the server and client and we're also going to be replacing angular with react and this is called the mern stack So what exactly is the mern stack? Well, it's the same thing as the mean stack but replacing angular with react So here is what it looks like we're going to be using react js on the front end for the web application and the middle is going to sit our server which is going to take requests from their web app

And this is going to be running nodejs with Express And then we're also going to communicate between the web app and the server using graphql and then in the very back is our database We're going to store all the data and we're going to be using mongodb for this you guys may be wondering why might you want to use react curious over something like angular or just JavaScript itself Well, this is a very popular framework right now

It is currently what Facebook uses on their very own website and it's very nice to build applications with it has somewhat of a steeper learning curve I would say in some of the other Frameworks, but once you learn it, you can be very productive and build very high quality production ready web applications, which is very cool and then graph ql is going to help us Optimized and sent really good queries That's another thing that is used by Facebook as a Facebook technology and then mongodb is just really solid database for no sequel So that means it's very easy to store different types of data

And as our database changes in our application changes, it's very easy to change our schema or what our data looks like in the database and then Express is very nice to make a server with very fast So that's our choice here So there's really four main operations when building an application like this and they're known as crud So what crud stands for is create read update and delete so we're going to be using mongodb and Mongoose Mongoose is a library to basically do operations on the mongodb database and nodejs and to create we're going to basically add something to our database

We're going to be using the save command then there's reading which is viewing objects or viewing data from our database which is fine command and then update which is changing some values in the database using update again, and then finally delete removing data from our database in this is going to be remove so that application that we're going to be building to try the stack out Ameren stack is a to-do list app So without further Ado, let's go ahead and get started So there are a few pure prerequisites for this tutorial first off Make sure you have a editor of some sort

I'm going to be using visual studio code where I can edit files and then you want to make sure you have a terminal I'm going to be using the terminal built into Visual Studio code and we're just going to be doing some things with that So make sure you have both of those and then we're going to be using mongodb So you're going to want to install that and the recommended way to install mangu B I'm using a Mac, I would recommend something called Homebrew Homebrew is a package manager makes it really fast really nice to install dependencies If you just copy this URL right here you can paste that into terminal and run it Arie have it so I'm not gonna do that right now, but then you have Homebrew and then with Homebrew I can Brew install Mongo DB and that will just install Mongo DB on my computer and then to verify that you have mongodb

You can just type mongo and you can see here's the version of my Mongo shell and then you can see whether you connect it to it So the other thing is make sure you do start your Mongo database So I already had mine started So I was able to connect to this these Brew can just do Brew services and then instead of restart We're going to start to brew services start Mongo DB if you installed this with home brew, the other thing we're going to need is node

js So again, once you have Homebrew you can do Brew install node, so you See, it's really nice to just install things with home-brewed makes it super easy And if you type no – be in terminal you should see a value and here's the version I'm currently on node 911 And then with that you should get em pm Which is node package manager

I'm using 58 So you just want to verify both of those guns stalled now, if you're not running on a Mac, you can't use Homebrew I just recommend going to the official websites for mongodb and nodejs and downloading them that way

괜찮아 So we're ready to get started We're going to be starting from a blank directory So I have just an empty folder right here called server I do an LS

There's nothing in there right now and I'm going to start off the project with npm in it, and I'm just going to do – why this accepts all the defaults and just creates a packagejson file So we have one file now in our project and this is going to hold basically where our configuration stuff for the project So what dependencies we need mainly So we're going to start off by adding a dependency called graphql yoga This is a really nice graphql server that makes it super easy

We're going to install it So we're going to copy this I'm just going to say npm install graphql Yo and you want to make sure and run this command inside these server directory and it's going to go ahead and install this for us now here is a little quick start that we're going to use and we're going to copy the quick start and paste it into a file I'm going to create a new file called index dot JS and paste it in here

So let's go through exactly What all this stuff is doing first line is importing the package we're going to use the require syntax because we're just going to use node So here we are importing graphql Yoga, which is that Library here is what's known as the schema So we're using graphql

So with graphql you have to set up a schema and our schema right now has this thing called a query type Inside of query type we have hello and hello takes one argument the kind of looks like a function This argument is named name is the name of the argument and then string is the data type for it And then this is the return type which is a string as well the exclamation mark at the end means this is a string that is mandatory You have to pass it in and then here are what known as the resolvers for this So the resolvers you'll notice the kind of the shape of it matches

So query than hello query then hello and here there's argument called name so you can see we're D structuring this second parameter, which is called just the arguments and we're going the name and here we're returning a string and we're using a string template here So we're saying hello and if they give us a name we say hello that person's name or we do just hello world If they didn't give us a name right and then here we're specifying the type deaths in the river solvers and we're going to do server dot start to At the server now, we're going to get more into what the type deaths in these resolvers are but want to go ahead and just run this so you can see what happens So I'm going to say node and then index dot JS to start it up And now we have a graph ql server running on Locos 4000 and we're not using expressed directly

But under the hood graphql yoga uses Express So, all right, let's go to localhost 4000 and see what's going on there So we'll get this thing that says loading graphql playground I've been here before so I have some junk just going to clear that off And so if I click on schema I can see on the right

What thing is I can run or what things I can do here This is a graph ql playground and what this is is you can run your queries & queries are read So we talked about crud operations before queries are Or reading things or finding or viewing the data you have stored so last we want to query this hello thing So, how would we do that? Well, we would do curly braces like that And then we say hello and I can either pass an argument or I don't have to pass an argument so we can prettify this

So if I don't pass an argument and I hit run I get data hello and then hello world So by default the argument would be null or undefined king passed in and then we saw that that would go to world, but here I can specify an argument if I want to and I could say been so hello Ben Let me run that and we can see it changes So you can notice this argument we can change and we get different results out of it I can just do a random string if I want and I get that back

So with graphql we can pass different things in and get different results that kind of like a function call and we're just getting a string back And you'll notice the shape is very similar to the shape over here, which is nice That's how graphql works So we have this outer data and then after that matches so hello is the name of the query so that's why those two match up and then here's the string that that equals and we're going to get more complicated as we add to dues and whatnot 괜찮아

So this is the basics of how the graph ql is working There's those other things which are called mutations So there's two main things in graphql queries and mutations queries are for looking at the data, which I already said and that's what we ran right here We could prefix this with the word query to be more explicit Those are doing the same things

The other thing is called mutations These are when we add data we update data or we delete data we're going to be running mutations and we'll get into those very shortly When we add our Mongo DB connection So our service good we're going to move on to connecting to mongodb and To do this we're going to be using something called Mongoose So first off we need to install this

So I'm going to come over here to terminal stop My server do npm install Mongoose So Mongoose is going to allow us to connect to our mongodb database and then run queries create data or whatnot and we're just going to follow the getting started So here is how we make a connection So I'm just going to add this at the very top and it changes the cost

So I am first grabbing this from the package or importing it So here I have the Mongoose object and I'm first connecting to the database So I'm at local host and I'm going to connect to the test and I'm just going to call this test 5 because I don't know if I already have a test database or not I'd like to connect to a fresh database So this is the name of your database at the very end here and then after that we want to do is first connect to the database and then start the server so it doesn't immediately connect when we run this

It actually runs in the background and we can use a callback so DB dot once and wait for it to open or it get connected now, we don't they to get this DB variable They did mongoose Connection and then inside of that they're going to pass the server dot start So once we connect to the Mongo DB database we then start our graphql server 좋구나

So next thing we want to do is create a schema, which is then going to be our basically our database model or what we're going to store in the database So we're going to grab this Mongoose model and we're going to change it up a little bit So they are doing a kitten for us we are going to do a to do so the model is going to be to do and we're going to have a few things So the first is text and here we passed we put on a pass the data type So the text is going to be a string so we say string and then we want to have a complete which is going to be not a string but a Boolean Okay, so we have two Fields text and complete on this to do object so we can save this in our database if we want to and we can pass to fields in the text

And whether the to do is complete or not So I'm first going to add a type called mutation and I'm going to say create to do and I'm going to have two arguments I want to get passed in the text and that's actually it by default I want to say complete is false because when you first created to do it is not complete So text here is going to be a string and I'm going to say you have to pass in a parameter and to force them to pass an argument

You do the the bang sign there And then what we're going to do is return a to do instead of just like a string or a Boolean we're going to return a type called to do so, I can create this type to do and it's going to have text which is a Which is required and complete which is a Boolean which are required So T required Fields text and complete and inner mutation We're going to create a to-do and assuming you gave us a good text will pass you back a to do the other field This is going to have and this is a field at Mongo ads by default which is an ID and there's a special type for this and graphql called ID

So that's required as well So we don't have to pass the ID here it's going to be automatically generated for us So now we can try creating this to do so, I'm going to say mutation and create to do and we don't care about the first argument to this graph ql function So these are called resolver functions right here the first thing layer Pastor the parent which you don't have to worry about for this the second argument is the argument So for this we expect an argument called text, so I'm going to say 10

Steer and from this what we're going to do and I'm going to make this an async function We're going to first create a to do some this a const to do is equal to Nu to do and here I pass in the text and complete so pass in text and complete and by default I'm going to say complete is false that the to do is not complete and then we're going to return the to do but before we return it, we have to save it to the database with DOT save and Dot save returns a promise So we want to wait that and we'll wait this to do from being saved to the database So we're creating an instance of it saving it to the database and then returning it so I can start my server and we can see if this code works and if it does what we should do is be able to create a to do in our database So we're going to say node index such as alright so it started up so it looks like it was able to connect to the Mongo DB instance

Okay and bring the playground over Here and I'm going to say mutation So for queries, we could say the word query there or leave it off for mutations We have to say the word mutation here and then I'm going to say create and we can see it in our schema over here whether it's there or not and it's not that usually just means you have to refresh whenever we restart the server So now under mutations we can see the create to do and this is kind of like our own documentation that was automatically generated for us

So that's really cool and nice feature of graphql So create to do we now have text so create to do text and I'm going to say my first item now you can see it's kind of mad at us But this is the exact same thing that we did with the hello 권리? Well, it expects a little bit different return type to do which is an object So we have to actually specify which fields that we want back

So there's text there's ID and there's complete right? So if I specify all Here I'm going to get all three Fields back So when I run this we can see Hey look our item was created We can see an ID and it's false I can run this again

You'll notice we should get a different ID there Looks like the bees incrementing at the end and here you'll see what the power of graphql is If I only want a single field back, so maybe I only care about the ID I only have to select the ID here and I'll only get the ID back here So I only get one field back or maybe I only care about the name or not the name text so you don't get extra Fields Back, which is really nice grab kill You just get exactly the data that you want

But all right cool We just add a bunch of to do items to our database Let's go ahead and fetch them or read them or query them So to do this, we're going to add a query we first update the schema and then you add the implementation of how the data is getting fish So here I want to get all the to do so I'm going to call it to do

And it just returns an array of to dues now to return an array you do brackets like that So to do so, this means we return an array of to do of the type to do so then in my query over here I'm going to say to deuce and I don't really care about any arguments because I'm just returning all of them I'm just going to say to do dot find and this will find all the sidhu's and it'll return them and then we can see them all So that's all we needed to do

So, I'm going to Ctrl C restart the server and now we can head back over to our application and refresh we should now have a new query and we can see right here called to deuce and we should be able to see all the different to dues that we created earlier So miss a to dues and I don't need to pass it any arguments, but I do need to select which attributes that I want to get back So ID text and then complete So if I run this I can see all the different items that we created earlier I give them all the same name know

So that's why it looks like this if we want to we could create a new one so mutation Create to do and I could give it a different text like item to for example, and maybe I only want to see the ID back And now if I clearly that again, you can see at the very bottom are new item item to so perfect And again, we don't have to query all the fields For example, I could just do ID and text and then complete would be removed from all these items just like that

Alright, so that's perfect We now have two of the crud operations done creating to-do items reading to-do items with this query right here The next thing we want to do is updating an item So the way we're going to do that is we're going to create a new mutation called update to do This will have two arguments the ID and this is what we'll use to know what to do to update and then also complete and this is going to be a Boolean we could also specify the text but we don't really need to update the text at least in this application

Just whether this to do has been completed or not And then we're going to return a Boolean and this is going to be true or false whether we were able to update the to do so now we're going to add the implementation for this update to do and a sink and this is going to have those two arguments ID and complete and here we're going to do to do dot find by ID and update and here we're going to specify the ID of the first argument and the second we satisfy what changed So the thing that changed is complete and we're going to pass that in and this is the new value for what complete In this returns back, I believe I guess a document query is looks like what it comes back I was thinking this might be a promise as well that we might have to await it will see if this works

I think it should and then lastly if that works We just return true So if this doesn't work, we'll get an error or something and that will be thrown back and that's fine So let's go back over and see this in action and I make sure to restart the server So anytime throughout this if you don't see something we're looking right when you cut over here

Just remember to refresh and also restart your server So we see in our mutations down update to do you can see the two arguments right here and we expect bullying back So why don't we change this one right here? So I'm going to copy that ID I'm going to say mutation and I'm going to say update to Du by D is going to be that string that I copied and It's going to be true and we can run that and we get true back meaning it worked and now I can query all the to dues so we can go back And I can grab it and we need to grab complete and this first value is now true

So perfect so update works So now we can update any item NR database based on the idea that we are given the last thing we want to do is delete it So pretty much the same way we did update to do we're going to do remove to do and here we don't need to know whether it needs to be complete or not So we can just remove that part and have only one argument which ID that we need to remove and then a Boolean true or false whether the operation was successful so we can copy this I'm going to do remove to do we get rid of that argument and then here we're going to say find by ID

But now it's going to be removed And now we don't need this second argument We just need to pass in the ID So I'm going to restart the server and we're going to try this one last time the last operation that we need and let's say I want to delete this item right here That is so we see a remove to do they're perfect

And the other thing is you can create tabs So I'm going to go ahead and pop tab open here That way we can do this in a separate Tab and not have to redo this So remove to do ID pass that ID in we get true, which means it should be gone So now when I re run this query here, we should not see this first one right there and sure enough it is gone

So delete also works So that's perfect We have all our credit operations that we want to do and we're done with our server now really what we want to do is create a client or a web app using react that allows us to do these so we can view our to Deuce we can click on it to cross it all out we can add to dues or we can just straight-up delete them if we're no longer need So let's get into doing that So I'm going to keep this server running and open up a new tab

And what I'm going to do is I'm going to go to a different folder and I want to create a folder for my react application Now we're going to be using something called create react app So this is a CLI tool and you can download it using npm So mpm install – gee create react app If you go ahead and run that they'll download it for you

And then what you can do is do create react app and then the name that you want, so I'm going to call mine client now I've already run this and when you run this you're going to get a folder and I can just do LS right here a folder called client or whatever You named it and it's going to download this this operation also takes a little bit of time because it's going to download all the dependencies and whatnot This is a boilerplate for creating a react applications that If you set up really nicely so I have it open right here and we can check out what's going on here We can look at package

json We have dependencies react and we can see we have some couple scripts that we're going to be using so just right off the bat if we wanted to I could CD into my folder and Run npm start and what that will do is it will run the scripts start command which runs this thing right here And what that does is it starts to my server and this is a different server So this is a development server and this is just going to be allow you to see your react application as you develop it So here's the basically the hello world and we can go in and change it

So if you go to Source should see app dot JS and you should see some stuff So instead of Welcome to react we could say welcome to graphql save this and what's going to happen is it's going to refresh and we see in our browser welcome to graphql So it's kind of cool So as we do this it's going to just Automatically refresh as we're typing so already start adding some stuff to our application now, I guess I should go over the structure real quick So the important parts are the source

This is where all our JavaScript code is going and we're all the react there's a folder called public which you can see has HTML in it And this HTML file is what our JavaScript or react application runs in or gets run plaid to if you will so here we can see this div root This is where our entire react application is going to be put so an index dot JS when I say react Dom render app, our application is being rendered in the element which is root 2 which we just saw and if we look at what act out Jas is we can see this is what's getting rendered So when I changed welcome to graphql, that's why we saw a change over there and you can see this is just kind of similar to HTML This is called jsx this allows

He to mix pretty much JavaScript with HTML and we'll see more of this when we actually do some more coding with this but we can go ahead and delete some of these extra files because we don't need them first off app DOT test We don't need we don't need app dot CSS We don't need index dot CSS and we don't need logo to SVG So those are just some extra files We don't need we can clear out all this code right here and simplify it a little bit we can just say div hello and get rid of these things at the top things at the top or just import statements using a fancier JavaScript syntax, and we just need to import react and index such as you can just remove the index that CSS

So if we come back over here, which should now be blank just hello and we can start adding our code So what we want to do is to run the same queries and whatnot that we ran and graphql playground So for example, I would like to render these two dues and my react application And to do that I want to run this query and to run graphql queries from react into server We're going to be using something called Apollo

So Apollo graphql allows us to this It's very easy to get started We're going to be downloading a few things here to help us out So Apollo boost, which is the library They created react Apollo graphql tag and graphql

Here's some little descriptions about what each one does but basically graphql graphical tag or for parsing the query So basically what we write here parses this into an object that basically they can understand and then react Paulo is the bindings to react gives you some react components and we'll see that and then Apollo boost is for actually just setting up and making the queries So we're going to copy this in pm Statement and I'm going to Ctrl C the server that started and add this in and the first thing that we need to do is create what's called a Apollo client I'm going to copy this and we're going to add that to our index actually getting at to our yeah index dot JS is fine We could add it to either place

But the reason why I want to do it here is because we also need to get a Palo Provider from react Apollo and pass in our client Sao Paulo provider, and this is just going to wrap our whole application And we need to pass in our client So our client is this thing right here that we create and basically the only thing we're still spying here is the URL to our server So our server is not running at this location It's running at issue P / Local Host 4000

So it knows where to make requests So it's now going to send graphql request all to the server which is perfect That's where server is running and we need to be able to access this client throughout our whole react application in the way we do that is by using react Apollo's Apollo provider So this wraps our entire app and now we have access to this client and we can make requests throughout our app and we'll see that so let's make sure adding that didn't break anything So I'm gonna do mpm start and we should still see just the word hello and nothing different because this doesn't actually do anything yet

We didn't tell it what to query always said was this is where we You to make queries I had this client equal new Apollo client before these import statements, you know, make sure that comes afterwards So just like that and cool so refreshes and hello Is there nice now, we can start doing some stuff So an app JS

Why don't we run a query in the query that I want to run is that same one we have here in our playground So what I usually like to do is run it here and then just copy it so const and will say this to Deuce query and paste it at so this is just a string of the query now We added a library to help us parse this called graphql tag So we're going to import gql from graphql tag, and this is actually going to parse this query right here and the way we do that is gql right there Now, you may be thinking I might have missed type this I meant to do something like this in the past in the function and that is not the case

You actually call it just like this we're gql is right up against it This is a string template calling and it will pass to this function Okay, and it will parse this out Next thing is we need to basically bind it with our component in the way we do that is with higher order component So import graphql from react Apollo and this is coming from the react Paulo package

So we say graphql we specify what query we want or what mutation we want in this case I want the to do is query and we wrap our app and now injected into the apps props are some stuff So now when I say this top crops, I have a few things I have data and loading so loading and why don't we actually I'm just going to console DOT log this so we can take a look at what actually the values are and if we come over here if you just right-click and inspect you can see in the console what these are so Let's do a before and after so this is export default app So before we actually call this higher or component graphql, you'll notice your the props just an empty object But now when we add this thing back, we have some stuff in our props that are going to help us out So first you notice we have dot data and inside a data there is loading

So loading is true and there's basically nothing else There's a bunch of functions we can call but those don't look how full right on those are three other things which some more complex but once it's done loading, it'll say loading false and it should get some to do so we can see this to do is here and we can actually see wow, look this looks like the data that we had over here 권리? Well it's exactly that So what we can do in our code now is we can say kant's data and we can get loading and to Deuce So this is just D structuring it from the props

I'm getting the loading that we saw in the two deuce 나는 말하고있다 if it's loading just return null and if it's not what I want to do is just to do this dot map and for each to do I want to just render it So I'm going to render a div and I'm just going to display the to do Dot txt and we can come back over here going to load for a second and we got to see all our items Now We need to add a key

And the reason for this is we need to have every single one be unique and this helps for loading purposes with react it'll load faster and have less conflicts in your list So I'm going to say pass in the to dude ID to make this unique I'm going to say to do I so this is a unique string that identifies each to do and then that are goes but we can see our items right here And now if I want to I can change one of these items So for example, I could remove a to do so, we have one to do down here called item to I could remove him And if we refresh it now fetches it it's gone

So pretty cool So those are connected to the same database same server all that stuff 괜찮아 So this is a little teaser a little intro and to Apollo and how we're going to do our queries But now what I want to do is add some material UI to make this look pretty and then we're going to continue on with some more mutations and whatnot

So we're going to be adding this package This is material UI from Google and it just makes everything look really nice and it's a nice utility So we're going to install go through the installation So we need to install the core of it again Just going to control C and add that and then we need to add some things to our header some links

So to Port the Roboto font And that's when we just go to the public index dot HTML and we can put that right here And the reason this material UI needs this font So we're just importing the font So it has access to it

And then the other thing is we also want to add some SVG icons So I'm going to go ahead and install that package as well 괜찮아 And the first thing I want to do is render some paper and the reason why I want to render some paper This is a component from Material UI is so I can put a list on that paper

So we're going to come back over here and the nice thing about materialize they have great demo so I can actually just take this and grab what I want from it So we're going to import paper So to do that we have to import paper from aperture you like or paper and then we can actually render this So I'm going to have an outer div and I want to Center this guy and the way I'm going to Center this is by creating two divs And you can actually add styling to these using the style prop and this is kind of like CSS, but it's all camel cased

I'm going to say display flex and then the style here I'm going to say margin Auto I'm also going to give it a width of 400 So now I've created this basically inner div and I'm going to render my paper here and then I'm going to give it an elevation and let's give an elevation of one So let's see that paper and action that we just added and once we get this paper the way we like it we're going to then turn the list that we have here and to it actual material UI list that looks like this and looks more like to do items or check items

All right, so I reran the server and we can see it's nicely centered and it's on some paper Perfect Let's go ahead and now add a list So this is the list that I want to add and we're going to just copy this and I'm actually just going to copy this entire example here and we're going to take the bits and pieces that I want from that So let's grab that and we're going to paste it in

I'm just going to paste it in below First thing that I want to do is remove some of these things that I don't care about So the first three Imports we don't need but I do need list all this list associate things and I do want the icons So I want to copy those and just move them to the top where my other Imports are and then I basically just want to merge these two I don't care about the style We're going to add our own style

So when we're he was adding Styles here, I just want to move their outer div, and I'm going to replace it with my stuff So this is what we added and I want to just add the stuff in there I guess the best way is we're going to copy these two and we're just going to go through what this code does and just one second I first want to make sure it renders, okay So we're going to add these two state is kind of interesting and this is just another function will talk about state in the second

We don't care about the props This is our list and we don't care about these things either Okay, so we're going to take our list and plop it down here And they're going over their mapping and they're doing this thing, right? So that's exact same thing we did here So we want to just replace that map with to deuce and instead of value

This is going to be to do and here's our key I'm just going to call it to to ID We could just pass ID, or we could do it like this since our applications Not too big I'm just going to pass in the ID

Now anywhere we see a value we're gonna have to change this stuff I'm not gonna worry about the class name stuff I'm going to remove that So handle toggle We're going to pass in our to-do item and then here going to pass in to do I guess this is a separate thing checked

I'm going to say to do doc complete So if the to do is complete, I would like to check box to be checked Value I want this to be Line item I think that's what their rendering

You can come back over here Yep line I don't want this is a text that's getting rendered The text that I would like to get rendered is to do Dot txt And get rid of that

Alright, let's go ahead and see if this actually shows up Okay, and then we're going to walk through the code 괜찮아 So this looks pretty good and I can see my items 아무 일도 일어나지 않는다 when I click but we're going to go over how we can get stuff to happen Okay, so let's go over the code

So starting at the top we have this thing called state 그래서 이것은 where we store information about our application that could change So for example, they are keeping something called checked and this changes So depending on what is checked in the application They're keeping track of here

Now, we don't really need state So I'm going to go ahead and get rid of it because we're storing everything and the mongodb is our state if you will and we're fetching everything with graphql this handle toggle thing This I believe is okay 예 So when we click on a list item for us, what we want to do is actually just mark it off right when Click on this it should be whoops

We crash it because we were not supposed to click on things When I click on this we should complete it and we don't need any more right? It should check off or whatnot So here I'm going to just add a to do basically we're going to remove all the stuff here is going to be update to do and it's just going to toggle whether it's complete or not And this is going to be a to do okay So next bit

We can just go down the code right here So we have a list item I don't know why they have a role of undefined This stuff is probably a specific to material UI and how The Styling looks checkbox disable Ripple I guess that's when you check to these are some CSS things that you can take on off depending on what you want to look checked

This is a value of whether or not the check boxes are checked So for example, if I say true all the checkboxes are going to be checked here They were all false Because all of them to do doc complete are false, but if I were to say update one of them, so let's say the first one and just remove this update to do ID complete is true All right, so it's now been updated in the database if I refresh can now see the checkbox checks there

So all we need to do is update our database and this stuff changes You can see our primary This text is just going to take whatever the text is for the to do and then this second part here is just this rough whole right side This is how we get this thing on the right now for us We don't really like this comment icon

Really what we want is instead of a comment like an X to delete it right and I'm just going to remove I guess I'm going to remove this aria-label We don't need it So let's go ahead and do that replace this icon with a new one So we did all of these and we want next is to pick out an icon So here it is the website for material

I that you can actually search and find all the icons that are available in which one you want to pick This is the one I want to do this close right here, which is an X and it's under navigation So to add this we're going to scroll to the top and save a comment icon on this a close icon and I'm just going to replace comment with clothes and we'll see if that works close icon refresh And sure enough icon shows up as an ex Perfect

So now I just want to hook this up So this icon button should have an on click and we're just going to pass in And here what we're going to do is delete this to do right so we can create one So this is called handle toggle I'm going to call this

And I want to just do this in a slightly different way I'm just going to create the Lambda like this So it's a little bit simpler Alright, so I'm going to call this function update To do and this is a function that is going to update the to do and I also want to do remove to do which takes it to do and we're going to remove to do so, those are two things we need to do

So here I made a little Lambda that's going to call this dot remove to do passing in our to do so, it should remove it whenever that gets clicked and then we every click this we're going to call this dot update to do and the reason why we want to do the functions like this you may have seen stuff like this And we want to access something called this and we can actually not access this and functions like that unless we do an extra thing called binding but this automatically binds so that's the reason why I like using a function like this and general I would just recommend writing your functions like this if you add functions, all right, so let's get into the logic of how update and remove work So I guess let's do update first So to actually update we come to our playground we have the code right here So I'm going to copy this and I'm going to say update mutation

So what I want to do is pass in a variable ID in a variable complete or not in the way you do this with graphql is I'm going to say dollar sign ID and dollar sign complete So these are variables and I have to specify my variables up here So I'm have an ID and specify the type ID is going to be an ID and complete This variable is going to be a Boolean Both of these are mandatory and you need to make sure the types here match the types in your schema

So if we come here we expect an ID required in a Boolean required So I need to put those here as well So now I need to inject my app with this mutation Now I could do this in a very ugly Way by doing this and then I could wrap that entire application like so mutation oops, not mutation of it, but our update mutation, but you can see this will slowly grow and get super ugly There's a function that react Paulo gives us called compose that's going to help us out

So I just leave the whole application accident 우리는 거기에 갈 Welcome back So composed what we're going to do is have graphql like that So now we pass graphql all our graphql us are all are higher order functions to the compose function which basically squishes them together and then we wrap our app

This is just a little bit nicer way to write it They're equivalent JavaScript though Alright, so now what we can do is we've added a new thing to our props and we can give it a name I'm going to call it update to do So now in my update to do function I can say this dot props that update to do in this function is available in my props because I specified it here in the name

I specified matches 괜찮아 So what I need to do to pass this is those variables and this is a asynchronous function So I'm going to await it And the variables that I need to pass in our an ID and complete so the ID I'm going to say to do dot ID and then complete I'm going to do the opposite so to do dot complete

Some of the opposite of the current value of complete So if it is complete right now, I uncomplete it if it hasn't been completed I now complete it So, yep my server started if I come over here and I click on this It'll look like it's not working Right I clicked on every single one of these nothing happened, right you may be oh an error occurred or something, right? It actually worked if we refresh we'll see all the items are there and if I click those to refresh I see those items changed

So why didn't update right away, right? Why did we have to refresh the page for this happen? Well Apollo caches all your stuff by default, 정말 근사 하네 because it saves you request and basically optimizes things but it doesn't re fetch the data whenever we update it So what we need to do is we need to tell Apollo to update so there is something called update that we can pass our mutation or our function that looks like this and this allows us to update the cache So let's copy this in and how this works is the store is where the cash so you could think of this is the Apollo cash and right here This is us getting the data

And then this is the name of our mutation So the name of this mutation is update to do and this name should match what we have right here, which it does So this data is what I get back from the to do update to do so, this should be true or false Boolean of whether or not it worked So we actually don't even need this if we were don't want to because we don't need the response to update the cache we could just do that So first thing we do is read the data from the cache

And the thing that we need to update is this to do is query So I'm going to say to Deuce query so we now have read this into a cache and if we look down here what we were doing we're saying data to do So here I want to do data dot to deuce And what I want to do is update one of the items So I want to look through the two deuce and update the one that has an ID that matches and change whether it's complete or not So to do this, what I'm going to do is I'm going to say data to do stop map and I'm going to search for the correct to do and I'm going to say if x that ID matches to dude ID then I want to create a new to do or update the completion value of to do

Otherwise, I just want to turn X So basically what this mapping is doing is it's looping all through all the to dues until it finds the one we needed to update And what we want to do is keep all the same values that to do as so this variable is coming from up here that to do has but change complete equal to to do dot complete So just updating the value of to do So we're saying data got to do so, we're updating what this value is looping through we're changing this one

So it now is equal to the opposite of complete and then we're just writing it back to the store And then we just have to say our query here is to do is query and our data that we're writing back is right here So now if we come back here when I click on this item it actually updates the cash which then propagates and renders So I now get real time updating of my items and these are actually persisting to write I refresh they're still there So it actually is in fact updating the database to so nice

So when do the same thing with deleting items, so we're going to come back up here and do delete mutation And we have basically the code for that too So remove to do and we just pass it an ID so we can copy that const remove mutation Pass that in and here we want to pass in a variable called ID similar to what we did with update and it's going to be an ID And we're just going to call that and I want to basically pass the same do the same function

So I'm going to copy it and paste it So there's going to be a few differences The name of our function is going to be different So I'm going to scroll down here and I say graphql This is going to be removed mutation

And the name I'm going to call it remove to do And come back up here I'm going to say remove to do And variables we want to pass in we only care about the ID and then the update the store instead of this mapping stuff

We want to remove an item from the list So to remove an item from the list we're going to filter So we're going to look for the ID that is not equal to Du Dy D So we're going to filter through the items and only remove the item where these two match up So in other words if the IDS don't match we want to keep that so we're comparing it against the one we need to remove another important thing

I did not mention about this update function is you want to make sure to when updating this not mutate and create a new instance of it So with Filter we create a new instance of that array So let's see this and oh, will you just make this an async function? Just like we did update and let's go ahead and delete this So when I delete it, we should see these two Reds match up and sure enough We do and Ali another one and our delete function looks like it's working properly

I refresh we should see those items gone and nice So there's one last thing that I want to do and that is creating to deuce and so we want to create just like an input field at the top where I can type stuff and submit So I'm going to create a new file called form dot JS and this is going to store our form and keep track of the value as the person types it out So I'm going to import react from react whenever you create a component in react you always start off like this and we're going to export default And we export this like that so you can import it in our app

So I'm going to say form extends react component and we're going to render and what we want to render is an input field in the input field that we want to render is the nice material UI one So this one looks really nice We're just going to do the basic one We can just grab the import statement And we can grab this just this first one

Okay, so we're going to talk about on change in value in a second I'm going to remove those three fields in the ID the label I'm going to call this to do dot dot dot and I'm now just going to render and our app that form So first I guess we should import it So import form from dot slash form capitalization is important there and we're going to render it and when I render it between the paper and the list So now we should see an input field and we do hey and I want to make this full width

So it extends the whole thing And I don't know Yep So there's a property called Full width we can just pass on that And now it should extend this whole length

Perfect So now we can even see this is where the helper text is I just call that to do, but you could call it whatever you want to type all that stuff in and then hit enter and then add or item right? So we need to add some more stuff to a form So we need to keep track of what the user is typing in to keep track of that We're going to use state

So I talked about earlier that we wanted to manage stuff in our state and data that changes So this is going to be text that changes at first It is just an empty string and I can get that text from this dot State and a pass that value in So the value of the text field is equal to this text All right whenever someone Types on changes called, so there's an event called on change and when this is called and I'm going to call this handle on change or we could just call handle change

And I'm passing this function Okay, so I want this function to be called whenever this one is it's going to be passed an event and if we do New text is going to be e dot Target value So e dot Target that value is going to be have the new text that the user just typed in So this new text do you want to now store in the state? And the way you update this state is with this dot set State and then you pass in the new value

So I'm going to say text is equal to new text So This Is Us updating the state with this new text value So whenever I'm typing on change will update the value in the state in the state will propagate in the state now is going to change the text field value So now as we're typing this you can see the value and if I were to Console DOT log this new text We can see the value each letter that we type you can see each letter that I type

It kind of makes a little pyramid here and it adds on the new text value and then whenever the user hits enter what I'd like to do is submit this if you will or create a new item here now, I'm just going to defer to whatever app dot JS wants to do So I'm going to pass a prop I want to call it from App dot JS So to do that What I'm going to do is create a function called handle key down

And here I'm going to say on key down handle key down So now every time I press a letter both key down inhale change you're going to get called Now What I want to do is listen for when the person hits the enter key So whenever they hit the enter key we want to submit the form

So to be able to know this we have access to what Q is pressed We get this by doing e dot key and we can check if it's equal to enter and if it's equal dinner, what we want to do is call this dot props dot submit and I want to pass in the current value of text So this is something I want to pass down from App dot JS So when I call this I want to say submit and give it a function called this dot create to do so up here I'm going to say create to do

And we know it's going to have one value in here called text So this is the function that we're passing to submit and then our form we're calling submit passing in a string which is text So here is we want to create to do and we want to come over here to our playground and do create to do and really there's only one value for this which is the text and then what stuff you want to get backslid the text complete and we want to get it all back in this case and we'll see why in a second I'm going to say const create to do mutation Pass it in and then we're going to have one variable here

I'm going to call it dollar sign text And by the way, you do not have to call it the same name as what you have here just a good convention that I like to follow so text string and that's going to be mandatory Come down here and actually all the way down because we want to add another one So this is going to be create to do mutation and I would say create So in here now, I'm going to say and we can I guess copy this because we're going to be doing similar things

I need to make this asynchronous I'm going to say create to do the variables that I'm going to pass in is just the text and now I want to update the store after we create the to do because I want to update the to do query and add my new to do but here I care about the second thing because the second thing here data and then create to do this is going to have three values It's going to have the ID the text and complete which is what we need So I'm just going to push it on so plush and we're going to add this create So we read what to do is we have cashed we add the new item that we added and then we write it back to the query

So usually what I like to do is just add a console log statement to see if this is not getting called or what could possibly be going wrong e dot key This might be an uppercase enter not a lowercase Yep, and that was the case So watch out for that and you'll notice this did not clear So two things I notice first off

This is not clear at the top we want to do that and secondly it added at the very bottom I want to add it at the top so we know this was getting called and after we submit we're just going to say this dots that state and set it to an empty string and that will clear it and then our app dot JS were pushing to the end There's a function called and shift this adds it to the beginning So if I say first we now have an item at the beginning and now I can just rapid-fire create items if I want to can check them off and delete them if I want and we have a whole to-do list create it so that is it for this tutorial We did all the operations creating reading updating and deleting to-do items

I hope that was helpful and you got a good grasp of how to do this Will taste of how graphql and react works Hi guys, this is Alia call from Eddie Rekha 오늘 We're going to learn how to become a superhero just kidding now becoming a full stack web developer is no less than becoming a superhero

It was continuous dedicated practice and a strong will to learn with this in mind in today's session We are going to discuss how to become a full stack web developer So let me run you through today's agenda We're going to begin with what is full stack web development Next we will discuss the different layers of full stack web development

After that We look at the different types of web developers over here We'll discuss front-end back-end and full stack web developers next We'll discuss a few reasons as to why you should practice full stack development Once we're done with that

We'll see how to become a full stack web developer over here We'll see what exactly a full stack web developer does will discuss how the front-end back-end and the database management works All right now moving on we'll finally discuss some important web development tools and Allergies that you must know in order to become a successful web developer So guys, I hope all of you are clear with the agenda without wasting any further time 시작하자

So what is full stack web development? I'm sure you all must have heard a front and in back in web development, but what is full stack web development now full stack web development basically involves front-end and back-end web development It requires in-depth knowledge of the different scripting languages like HTML JavaScript CSS, which make the web look more interactive and Alive It also requires high-level programming languages such as Java Python and so on to code the server side apart from this you also require experience in working with JavaScript Frameworks, like nodejs and libraries such as jQuery and so on now in the further slides, I'll be covering the different aspects of becoming a full stack web developer in depth So stay tuned

So before we move onto Water full stack developer does and how a front-end and back-end developer Works Let's look at the Ben layers of full-stack first we have the presentation layer or the front end of the web this layer helps you interact with the web watch videos perform actions like register to when online shopping site, so guys, whenever you serve a website the different fonts images and the content of the website forms a presentation or the front end of that website So basically the design look and feel of the web is accomplished with the help of HTML CSS and JavaScript, then comes the logic layer or the back end layer Now this layer forms a dynamic connection between the front end and the database So every time you search the web it's the logic layer that transmits your requirements to the database and Returns what you searched for all of this is powered by a web server

Now in order to get this layer working It's important to know at least one of the programming languages such as python Java or C, hash 괜찮아 Now lastly we have the database layer This layer is a massive Warehouse of information it Contains a database repository which captures and stores information from the front end through the back end

Now a prerequisite over here is to have knowledge of how data is stored edited retrieved and so on languages such as MySQL Mongo DB are a must to know now, let's look at the type of web developers So guys front-end developers are responsible for a websites look and feel these developers must be Masters at three main languages, which is HTML CSS and JavaScript They also need to be familiar with Frameworks like bootstrap angularjs and emberjs which make the website look more interactive and Alive libraries, like jQuery also help to package code into a lightweight and compatible form now moving on to the back end developers Now the back end of a website consists of three components the server the application and a database a back-end developer creates and maintains the web server application and the database which allows the front end of the website 20 Great to make the server application and a database to communicate with each other back end developers use server-side languages like PHP Ruby python Java and

net to build an application They also required to operate on tools like MySQL SQL Mongo DB in order to fetch tour or edit data and then serve it back to the user in the front end now guys, this is how back end developers work now moving on to full stack developers The term full stack developer was popularized in a meeting around eight years ago when Facebook announced that they are looking to hire only full stack web developers now basically a full stack developer should be knowledgeable enough to work on both the front and technology and the backend technology So he needs to have an understanding of how the web works at each and every level including setting up and configuring Linux or Windows servers coating server-side apis running the client side of the application by using JavaScript Structuring and designing the web page with CSS and HTML a full stack developer is like the Jack of all trades one must have enough knowledge to run both the client and the scripting side

Now, let's discuss a few key points about why one must practice full stack web development One of the reasons is the first and developers can choose from a rich set of tools and Technologies for creating and designing unique code They are not restricted to a certain set of tools for development because there are n number of Frameworks and libraries that will assist a full stack developer and achieving an effective web application Now, the next reason is design and development Now one of the best things about working as a full stack developer is that you're not restricted to only development as a full stack developer you can design and style your application

And then if you're bored of Designing, you can probably switch to your developer mode now develop skills come into handy when you want to create a functional and a bug free application a full stack developer is basically Create a person who can both develop and design an application So guys I'm now going to lie to you a full stack developer is like the Stephen Hawkings of web development after mastering very scripting and programming languages and working alongside several Frameworks and libraries a full stack developer is no less than a master Of course one requires to have work experience and a lot of knowledge but nothing is unachievable If you have the will to do it apart from that a full stack developer is highly valued in all parts of the world in the US the average salary of a full stack developer is over a hundred and ten thousand dollars not only in the US all around the world full-stack developers are in high demand Now that you have a basic understanding about what a full stack developer is let's dive deep into how to become a full stack developer

Let's look at the responsibilities of a developer And what exactly does he do? All right, so guys to begin with you must have a decent understanding of how a website or a web Application is built and what tools and Technologies are used to do so, so let's begin with a front-end web development to master front-end web development You need to know many Technologies, but the main Technologies are HTML CSS and JavaScript now HTML which stands for hypertext markup language is the skeleton of every web page It defines the structure of the web without it

The web would be as shapeless as a lump of clay by using HTML you tell the browser how you want your content to be structured by defining the different parts of a web page For example, you define the content of your web page within HTML tags Now these facts tell the browser which part are headings body sidebars and Footers this not only helps to structure the web page It also lets you style each HTML element by selecting them and then adding different style parameters now CSS, which stands for cascading style sheets is like the clothes we wear to look stylish and attractive That's DML elements

We Define can now be styled using CSS For example, you can change the color of the header add in style various buttons You can also use CSS to adjust the width of the HTML elements You can style them by adding color and design you can also play around with buttons and make them look colorful and attractive So guys, you can style a web page in any way you want CSS has thousands of styling functions, which let you design and make a webpage look like a beautiful painting

Next up is Javascript Now before I get on with half would suck developers use JavaScript It is important to understand how JavaScript Works JavaScript is basically a language of the web which every browser PC and mobile phone understands now JavaScript can natively run on the browser by natively I mean that most of the web browsers like Google Chrome Safari and Internet Explorer have a JavaScript engine embedded into that browsers 괜찮아

Now this JavaScript engine interprets the But script code so that it can run on the browser So guys, this is exactly how JavaScript runs on the web browser Now where is Javascript used now? 예제를 보겠습니다 So guys when you're browsing on a webpage you come across many buttons on clicking these buttons some event occurs Now JavaScript has event listeners with perform specific actions on the click of a button like for example on the click of a button another page might open up or a personal detail form can pop up

All of this is Possible only to JavaScript It is basically used man you play the HTML elements add motions and Graphics to them So any sort of motion that you see on your web page is all JavaScript now that you have a good idea of how food sack developers work on the front end Let's look at the back end now when a user opens up a webpage and clicks on a link or submit some form or let's say he enters our URL where does this data gets stored and how does the browser return in? Mission to the user So basically the browser connects to a web server now a web server is just a computer running an application or a software that delivers resources to the web pages

So guys when a web server receives a request for a resource, it has to respond with that resource So how does it do that now basically back end developers program the web servers to respond with the right resources So the main aim of the web server here is to respond with the correct resources But where do they get these resources the web server is connected to a database which is continues the cold on receiving some requests So the role of a full stack developer here would be to create an application that fills a web page with the required resources, but pulling data from the database

Now this application is programmed using server-side languages like Java python PHP nodejs and the database is also programmed using languages such as MySQL Mongo DB and SQL So guys, basically The back end of a web page is used to serve the required resources to a user So here we just discussed how the front-end development is used to design The user facing part of a web page that lets us interact with the web page

We also discuss how the back end is used to deliver a web page to the browser along with the requested resources, which are retrieved from a database So guys, this is what a full stack developer does He has to create both the front end and the back end of a web page 괜찮아 Now, let's look at some of the important Technologies and tools that a full stack developer must know first of all a full stack developer must choose a code editor that is best suitable for him

There are hundreds of code editors out there personally, I switch between Visual Studio code and Sublime Text They're the most user-friendly code editors, but you guys can go ahead and choose whichever code editor you like now The second tool is a Version Control System a Version Control System basically is used to keep a track of all the changes that you make to your code files Any sort of documents now like the name suggests it creates versions of your code or your file every time you change something So let's say that you created a web application and added an additional feature to it

But for some reason this feature slow down your website and you want to go back to the old version of your website So usually it is very hard to revert back to an older version but a version control system takes care of this because it has a track of all the code changes that you've made and it can easily revert back to any code change some of the popular Version Control Systems include get and subversion now guys that are thousands of JavaScript Frameworks and libraries which will come handy during web development Frameworks, like nodejs can have with back and development of a webpage and JavaScript libraries such as jQuery can help at the front end to design a web page Then there is angular react backbone meteor, which are all very useful to a full stack developer a full stack web developer is Reese familiar with a couple of JavaScript Frameworks and the best part of these Frameworks is that after learning JavaScript which you will definitely need while developing the front and they are very easy to understand next up We have had 3 TP protocols

Now HTTP is basically a stateless application protocol on the internet which allows clients to communicate with a server So basically it enables communication between the front end of your webpage and the back end guys 내가 너에게 말해 줄께 that there are a lot of web developers out there who don't know much about HTTP, but it is quite essential to have an understanding about HTTP and how the internet works It is also necessary to understand what is rest and why is it important in regards to the HTTP protocol in web applications apart from all of this a full stack developer obviously needs to have prior knowledge about running the application on operating systems such as Linux windows and so on because at the end of the day all of this is running on top of an operating system also a lot of fools Developers have brushed up on various project management tools like jira teamwork base camp to effectively carry out the web development process

So guys becoming a full stack web developer requires good amount of effort and dedication, but is it worth all the effort? I would say definitely it is it is the most value designation And once you practice full stack web development, you'll become a master of the web and a Tedder a copy provide a full stack web development course that has all the required tools and technologies that you need to learn and we also make sure that you don't just learn it you master it So guys if you're interested in learning the full stack web development master course or any other training Technologies, let us know in the comment section and we'll get back to you at the earliest So guys, thank you so much for watching this video Have a great day

I hope you have enjoyed listening to this video Please be kind enough to like it and you can comment any of your doubts and queries and we will reply them At the earliest do look out for more videos in our playlist And subscribe to Edureka channel to learn more Happy learning

1.3: Graphing with Chart.js – Working With Data & APIs in JavaScript

이전 비디오에서 우리가 한 것을 검토해 보겠습니다 따라서이 비디오는 전적으로 의존적입니다

이것은 CSV 데이터 파일을 그래프로 표시하는 두 번째 부분입니다 그래서 이전 비디오에서 우리는 갔다 세계의 세계 기온, 평균 세계 1880 년부터 현재까지의 온도 CSV로 쉼표로 분리 된 값을 얻었습니다 NASA의 파일

간단한 문자열 전달 기법을 사용하여 구문 분석했습니다 분할 기능 이제 우리는 그 데이터를 로그 할 수 있습니다 그러나 콘솔에 데이터를 로깅하는 대신 그래프로 나타내기를 원합니다 우리가 취할 수있는 접근 방식은 매우 다양합니다

차트를 만들기위한 많은 JavaScript 라이브러리가 있습니다 아마도 가장 유명한 것 중 하나가 데이터 시각화 인 D3입니다 JavaScript 용 라이브러리 또한 HTML 5 Canvas를 사용하여 자체 차트를 그릴 수 있습니다 함수 그리기, 무언가 사용 창조적 인 코딩 JavaScript 인 p5 js와 같습니다

모든 종류의 그림을 그리기 위해 톤을 사용하는 도서관 인터랙티브 애니메이션 그리고 거기에있는 데이터를 기반으로 무언가를 그릴 수있었습니다 하지만 나는 당신에게 가장 빠른 것이 무엇인지를 보여주고 싶습니다 이제 브라우저에서 데이터에서 차트로 이동하십시오 그리고 간단한 도구 인 Javascript 라이브러리 이를 위해 Chart

js입니다 Chartjs는 가져올 수있는 라이브러리입니다 바로 클라이언트 쪽 JavaScript에 있습니다 차트 개체를 만들면 구성 할 수 있습니다

당신은 그것에게 데이터를 줄 수 있고, 그것에게 약간의 색깔을 줄 수 있고, 당신이 선 또는 가로 막 대형 차트를 원 하든지, 웹 페이지의 차트가 캔버스에 표시됩니다 따라서 라이브러리를 가져 오는 방법을 단계별로 보여 드리겠습니다 캔버스를 추가하고, 차트를 그린 다음 그리기 자신의 데이터를 사용하는 차트 여기 Chartjs 웹 사이트가 있습니다

많은 예제와 많은 문서가 있습니다 GitHub의 소스 코드에서 자바 스크립트에 대해 자세히 알아 보시기 바랍니다 도서관 이 시작 페이지로 이동할 예정입니다

Chartjs를 사용하기위한 기본 기술을 제공 할 것입니다 그래서 가장 먼저 라이브러리를 가져 오는 방법은 무엇입니까? 그리고 이것은 매우 중요합니다 Chartjs CDN을 사용할 것입니다

따라서 CDN은 콘텐츠 전달 네트워크를 의미하며, URL을 통해 라이브러리를로드한다는 의미입니다 그것은 인터넷 어딘가에서 호스팅됩니다 여기를 클릭하여 우리가 필요한 부분을 보도록하겠습니다 JS 전달하는 데 우리가 걸립니다 그럼 내가해야 할 일은 여기서 내려가는거야

가장 최근 버전 인 280을 볼 수 있습니다 도서관의 이 버튼을 클릭하면 새로운 웹 페이지가 나타납니다 사실, 저것은 자바 스크립트입니다

라이브러리, JavaScript 라이브러리 자체의 모든 코드 그것은 실제로 약간의 미니 필드입니다 도서관의 원천은 줄 바꿈 및 큰 변수 이름 그리고 모든 종류의 물건 하지만 내가 필요한 건 바로이 URL입니다 나는 내 코드로 돌아갈거야 머리글에 들어가서 대본을 말할 것입니다

나는 소스가 같다고 말할 것입니다 그리고 내가 원하는 것은 자바 스크립트 라이브러리에 대한 URL입니다 is, Chartjs 이제는 바로 붙여 넣을거야

이걸 끝내 자마자 Visual Studio 코드는 나에게 좋은 일을하고 있습니다 스크립트 태그를 자동으로 닫습니다 하지만 그렇지 않으면 입력해야합니다 그래서 오픈 스크립트 태그, 소스와 URL은 동일합니다 그런 다음 스크립트 태그를 닫습니다

이제 Chartjs가로드되었습니다 내가 필요로하는 다음 것은, 내가 가질 필요가있다 내 HTML 자체에 캔버스 그래서 캔버스 요소를 추가해야합니다

차트와 같은 ID를 부여 할 것입니다 그리고 나는 또한 폭을 줄 필요가 있다고 생각합니다 400 번 시도해 봅시다 그리고 400 야 그리고 그것들은 따옴표 안에 있어야합니다

저장을 클릭하면 Visual Studio Code를 수정 해 주셔서 감사합니다 그래서 거기에 간다 이제 캔버스를 추가 한 것을 볼 수 있습니다 내가 신분증을 줬어 그리고 폭과 높이를주었습니다

그래서 어떻게 든이 데이터를 그래프로 나타낼 필요가 있습니다 그 캔버스에 시작 페이지로 돌아가 보겠습니다 그리고, 여기에 우리에게 몇 가지 코드가 주어졌습니다 일부 데이터가있는 일종의 막대 차트 코드입니다

그래서 우리가 실제로 할 수있는 한 가지 방법 이 작업을 시작하십시오, 그냥 복사, 붙여 넣기, 이 코드를 작성하십시오 그래서 새로운 라이브러리로 작업 할 때, 당신은 다양한 것을 시도 할 수 있습니다 당신은 문서를 읽을 수 있습니다, 당신은 예를 찾을 수 있습니다 나에게 이것은 시작 예제가 될 것입니다 함께 일하기에 완벽해야합니다

그래서 나는 이것을 가져갈 것입니다, 나는 그것을 복사 할 것입니다, 여기에 스크립트 태그의 맨 위에 붙여 넣습니다 승인 그래서 거기에 있습니다 그래서 이론 상으로는 페이지를 새로 고칠 때 차트가 보입니다 아니

아니 어떻게 된 거예요? 그래서 우리는 지금 뭔가를 만났습니다 발생하는 비동기 이벤트와 관련이 있습니다 웹 페이지를로드 할 때 그래서 재산을 읽을 수 없다는 말입니다

인덱스 13에서 null 컨텍스트를 가져옵니다 색인 선 13에 가자 문서 – 오, 오케이 사실 이것은 다른 문제입니다 내 차트 이름을 내 차트로 지정하지 않았고 차트 이름을 지정했습니다

그래서 이것이 오류를 수정하는지 봅시다 내가 생각하는 다른 오류가 발생했다 그러나 이것은 분명히 오류입니다 내 차트의 ID는 차트 일 뿐이며 내 차트는 아닙니다 오, 거기 있네

자, 차트가 있습니다 아름다운 그래서 나는이 도표를 가지고있다 그것은 세고있다 각기 다른 색으로 투표하면 규모가 있습니다

y 축에는 x 축의 눈금, 데이터 콘솔 로그가 표시됩니다 내 데이터를 차트에 어떻게 가져 옵니까? 자, 코드를보고 우리가 몇 가지 탐정 작업을하고 알아낼 수 있다면 그리고 우리가 붙어 있다면, 우리는 Chartjs 문서를 참조하십시오 여기서 볼 수 있습니다

음, 내가 원하는 레이블은 지구 평균 기온입니다 그리고 다시, 나는 조금 더 필요하게 될지도 모른다 그 진술의 정확성에 대해 사려 깊다 NASA 데이터 세트를 보면 진정 무엇입니까? 그러나 지구 평균 기온은 지금 당장 할 것입니다 그럼 그냥 바꾸자

우리는 말할 수 있습니다보세요, 그것은 우리에게 보여주고 있습니다 전지구 평균 온도 그러나 이러한 레이블, 빨강, 파랑, 노랑, 그 사람들은 어디에서 왔습니까? 여기에 레이블이 있습니다 그래서 나는이 라벨을 원하지 않는다

내가 원하는 건 그 해가 레이블 일 때, X 축을 가로 지르는 레이블로 파싱합니다 그래서 내가 말하면 어떨까요? 우선,이 예제는 이전 JavaScript 구문을 사용하고 있습니다 당신이 이것을보고있을 때쯤에는 아마도 다른 뭔가 하지만 var 대신 const 대신에 말할 것입니다 그리고 var 대신에 여기에 const라고 말할 것입니다

내 변수 선언을 업데이트합니다 const가 무엇인지 궁금하다면, 그것에 관한 다른 동영상이 있습니다 그런 다음 다른 변수를 만듭니다 x 축에 대해 xlabels라고 할 것입니다 빈 배열로 설정하십시오

여기에 언급 된 변수를 넣을 것입니다 내 차트의 실제 레이블이 가리키고 있습니다 xlabels라는 배열에 내가 할 수없는 이유가 없습니다 매년 읽는 중이므로 매년 배열에 추가하십시오

xlabels 이제 데이터 분석이 완료되었습니다 차트를 만들었습니다 그래서 내가하고 싶은 것은 모든 데이터를 파싱하는 것입니다 라벨을 차트에 추가하기 시작합니다

캔버스에 그린 거기서 무슨 일이 일어나는지 봅시다 승인 나는 어떤 상표도 보지 않는다 자, 다른 문제가 있습니다

생각은 일어날 것입니다 차트를 먼저 만들고 데이터를로드하고 있습니다 그래서 이것은 문제입니다 그런데 이상하게도 창문의 크기를 조정하는 것과 같은 경우, 갑자기 데이터가 나타납니다 하지만 처음 페이지를로드 할 때 나타납니다

그래서 나는 이것을 다른 순서로해야한다 데이터를 가져 오는이 getData 함수가 있습니다 await fetch를 사용하여 비동기 적으로 응답 text를 기다립니다 내가 지금하고 싶은 것은 올라간다

이 차트 생성을 별도의 함수로 넣습니다 그래서 함수 차트를 말할 것입니다 함수에있을거야 이제 제공된이 예제가 Chartjs 시작하기 페이지에서 정말 유용하지만, 지금 당장 나를 위해, 그 안에 여분의 물건

따라서 많은 구성 옵션이 있습니다 차트를 표시 할 수 있습니다 사실 지금 당장 그걸 제거하려고합니다 너를위한 운동으로서, 나는 너를 위해 마지막에 제안 할 것이다 찾는 방법에 따라 다른 방법으로 차트를 그릴 수 있습니다

문서에서 그리고 저는 또한 한 가지 색을 고집 할 것입니다 그래서 나는 지금 모든 것을 꺼내려고합니다 아마 전적으로 색을 빼낼 수 있었을 것입니다 나는 구원을 칠거야

이제 적어도 내 chartIt 함수에서 볼 수 있습니다 조금 더 적은 일들이 진행되고 있습니다 이제는이 chartIt 함수를 호출 할 수 있습니다 그리고 우리가 돌아 가면, 이것은 같은 것입니다 나는 같은 문제가 있지만 xlabels 정의되지 않았습니다

그래서 나는 어떻게 든 xlabels 변수 전역 변수 여야합니다 나는 실제로 내가 여기서하고있는 것에 대해 무언가를 좋아하지 않는다

그래서 우리는 리팩토링을 할 것입니다 내가 어떻게 지내는지 끝까지 다가 가라 데이터를 가져 오는 사이에 의사 소통을하려고합니다 차트 그리기 그러나 지금 당장은 xlabels을 전역 변수로 만들 예정입니다

나는 chartIt 함수를 호출 할 것이고, getData 함수를 호출하십시오 여전히 같은 문제 그럼 당신은 생각할 것입니다, 좋아, getData chartIt 전에 getData를 기억하기 때문에 여전히 같은 문제 비동기입니다 그래서 제가 여기서 고용하고자하는 해결책은 ChartIt을 비동기 함수로 만듭니다

그리고 실제로 그것의 시작 부분에서 getData를 호출하십시오 그래서 내가 말하는 경우 getData를 기다리고 있습니다 이제 chartIt 전에 데이터가 완료 될 때까지 기다릴 것입니다 이 물건의 나머지는 않습니다 그리고 우리가 돌아 가면 볼 수 있습니다

해당 레이블이 모두 적용된 것을 볼 수 있습니다 이제 이것은 실제 데이터가 아닙니다 이것은 여전히 ​​여기에있는 데이터입니다 그래서 내가 지금하고 싶은 일은 계속해서 ytemps를하게하는 것입니다 이것은 y 축의 온도입니다

그리고 저는 데이터 아래에서 말할 것입니다, 그 더미 데이터 대신에 ytemps라고 말할 것입니다 그리고 나서 여기, 각 온도를 읽을 때, 나는 ytempspushtemp라고 말할 것입니다 임시 직원 자 이제 이것을 살펴 보겠습니다 우리는 거기에 갈

이제 우리는 전지구 온도를 봅니다 1880 년에서 2018 년까지 지금 여기서 무슨 일이 일어나고있는거야? 음의 02, 0 이 온도는 얼마입니까? 이러한 차이가 있음을 기억하십시오 1951 년과 1980 년 사이의 지구 평균으로부터 그리고이 세계 평균은이 웹 페이지에서 찾을 수 있습니다

여기 섭씨 14도입니다 그래서 내가 여기서하고있는 일에 대해 정확하기를 원한다면 나는 말할거야 온도를 임시 온도 + 14로하고 싶습니다 권리? 나는 단지 섭씨 14도를 더하고 싶다

나는 이것이 문제를 일으킬 것이라고 생각한다 여기서 어떻게되는지 봅시다 내 그래프로 돌아 가자 나는 여기서 다른 것을 보지 못했다 푸시 템프 + 14

글쎄, 나는 여기서 무슨 일이 일어나는 지 생각해 만약 내가 옳다면, 우리는 두 번째를 발견 할 것입니다 당신은 텍스트 파일에서 파싱을하고 있습니다 당신의 내용은 여전히 ​​텍스트입니다 그것은 문자열입니다

문자열에 14를 추가하는 방법을 알지 못합니다 실제로 parseFloat라는 함수를 사용할 수 있습니다 사용할 수있는 전역 JavaScript 함수 인 그 문자열은 숫자로 바뀝니다 이제 실제로 숫자 14를 더할 수 있습니다 온도의 수에

이제 우리는보아야합니다 이것이 1880 년의 실제 평균 기온임을 알 수 있습니다 ~ 2018 년 이것은 막 대형 차트입니다 막대 그래프가 이것을 설명하는 가장 좋은 방법이라고 생각하지 않습니다 이게 저 한테는 우스운 것 같아요

다르게 색칠되어 있습니다 컬러 일을 제거했기 때문이라고 생각합니다 그래서 우리가 그것을 고칠 수 있는지 보자 그래서 나는 내가 그걸 제거하면 나는 단지 짐작하고있다 그러나 나는 감각이있다 Chartjs는 색상을 배열로 제거하면 작동합니다

예 그것은 모든 것에 색상을 적용합니다 그리고 저는 이것을 타입에서 라인으로 변경할 수 있습니다 그리고 거기에 우리가 간다 자, 필자는 그 아래에 채우기가 반드시 필요한 것은 아닙니다

이것은 내가 문서에서 찾아 볼 필요가있다 내가 어떻게 돌릴지 모르니까 줄 아래 채우기 아마 그 매개 변수 일 겁니다 옵션 또는 데이터 세트로 이동합니다

Chartjs 웹 사이트에서 찾을 수 있는지 보겠습니다 여기 측면이 다른 모든 것들입니다 내가 줄을 서면 상상한다 그것은 나를 보여주고있어 줄, 예제 사용법, 데이터 집합 속성, 채우기

우리는 거기에 갈 가득 따르다 이것들은 내가 시도 할 수있는이 모든 다른 것들이다 채우기, 부울 또는 문자열입니다 기본값은 true입니다

그래서 필을 추가하면 이것이 의미한다고 생각합니다 false이면 데이터 세트 객체의 다른 옵션으로 그럼 내가 여기로 돌아 가면 우리는 말할 수 있습니다, 예, 더 이상 채우기 잘됐다 아마도이 라벨이 무엇인지 생각하고 싶을 것입니다

더 정확하게 말하십시오 이것은 매우 중요합니다 그렇다면 데이터가 무엇인지 정확하게 말하면 어떻습니까? 여기 정확한 데이터가 있습니다 지역 연간 방법, 복합 육지 서비스 공기 해수면 온도 그래서 육지의 해양 온도 지수

Celsius로 레이블을 변경해 보겠습니다 그리고 그 학위 기호를 입력해야합니다 아무도 학위 기호를 입력하는 방법을 알고 있습니까? 외관상으로는 그 옵션, 변화, 정도 기호를 입력하는 8 나는 이것을 실제로 시도하지 않았다 작동하는지 봅시다

예 우리는 거기에 갈 섭씨가있어 그리고 내가 돌아가서 볼 수 있습니다 우리는 거기에 갈

그래서 지금 내 레이블이 있습니다 내가하고 싶은 일은 내가 리팩토링하게 해줘 이 코드는 조금 그래서 나는이 전역 변수의 사용을 정말로 좋아하지 않습니다 나는 더 이해가 될 것이라고 생각한다

우리가 할 수있는 많은 다른 방법들이 있습니다 하지만 좀 더 단순하게 만드는 한 가지 방법을 알려 드리겠습니다 실제로 여기에 지역 변수를 갖도록하겠습니다 나는이 X와 Y라고 부를 것이다 그리고 나서 저는 X를 여기에 밀어 넣고 Y를 밀어 넣을 것입니다

이리 그리고 나서, 이것이 끝나면 나는 갈거야 X와 Y가있는 객체를 반환합니다 그래서 getData 함수는 실제로 이 두 배열을 가진 객체를 반환 할 것입니다 그리고 제가 여기서 말할 수있는 말은 제가 말할 수 있습니다, 데이터는 getData를 기다리고 있습니다

그리고 나서, 여기에, 레이블 아래에, 나는 데이터 xs를 원합니다 여기 데이터 세트 아래에 데이터 ys가 필요합니다 다시 말하지만, 이것이 최상의 솔루션이라고 확신하지 못합니다 그러나 적어도 이제 chartIt 함수와 getData 독립적으로 작동하는 기능 종류 일종의 전역 변수를 공유하지 않고 나중에 문제가 발생할 수 있습니다 그리고 우리는 이것이 여전히 잘 작동한다는 것을 알 수 있습니다

학위 기호를 여기에 추가하는 것도 좋습니다 그게 가능한지 나는 모른다 이 레이블을 자동으로 만들고 있습니다 그래서 문서를 다시 보면서 – 그리고 나는 이것을 사전에 발견하기 위해 잠시 쉬었다 그러나 여기 아래, 축 아래, 라벨 부착 내가하고 싶은 일이다

나는 y 축 레이블링이 작동하는 방식을 바꾸고 싶습니다 제가 여기를 클릭하면, 우리가 볼 수 있습니다 – 우리는 이것이 모든 가능성 들임을 알 수 있습니다 그러나 실제로 이것은 내가 원하는, 사용자 지정 진드기 형식입니다 왼쪽에있는이 레이블들 각각은 진드기입니다 진드기, 진드기, 진드기, 진드기, 진드기, 똑딱처럼

그래서 내가하고 싶은 것은 이러한 옵션을 다시 추가해야한다는 것입니다 이것은 이전에 제거한 것입니다 옵션을 다시 추가하겠습니다 틱 (tick) 아래 y 축 아래에서 이것은 콜백 함수입니다 이것은 일종의 미친 짓이다

그래서 이것은 달러 기호를 포함하는 예입니다 기본적으로 다음과 같은 함수가 있습니다 y 축에 레이블을 지정하는 방법을 정의합니다 값을 가져 와서 달러 기호와 값을 더한 값으로 바꾸십시오 그래서 내가하고 싶은 것은, 가치를 가져라

값을 + 도로 바꾸십시오 그리고 나는이 논평을 제거하고 싶다 이제 차트의 일부로 구성되었습니다 그리고 여기 있습니다 저기 봐라

이제 학위 기호가 있음을 알 수 있습니다 그러니 그냥 다시 돌려 보자 이 모든 것이 캔버스 크기가 이상하다고 느낍니다 그래서 이것을 800만큼 400으로 만들 것입니다 우리는 거기에 갈

그런 다음 콘솔을 제거 할 것입니다 그리고, 짜잔! 결합 된 토지를 보여주는 완성 된 차트가 있습니다 표면 공기 및 해수면 섭씨 온도 섭씨, 평균 1880 년에서 2018 년까지 그리고 여러분은 여기에 아주 아주 중요한 증거를 볼 수 있습니다 지구가 온난화되고있다 1880 년 이래 지금까지의 평균 기온은 시간이 지남에 따라, 올라가고있어

요약하면,로드하는 방법을 보았습니다 쉼표로 구분 된 값 파일 형식의 표 형식 데이터 우리는 어떻게 수동으로 해당 파일을 구문 분석합니다 궁극적으로 우리는 진행중인 구문 분석 엔진 사용 모든 종류의 오류 또는 사안을 처리 할 수 ​​있어야합니다 그게 올지도 몰라

이 데이터가 있으면 우리는 다른 라이브러리에 해당 데이터를 다시 패키지하는 방법 이 경우, Chartjs를 사용하려면, 해당 데이터가 포함 된 차트를 캔버스에 적용 할 수 있습니다 그리고 우리는 조금 조정하는 방법을 보았습니다 스타일의 종류와 그 차트의 레이아웃과 포맷 그럼 여기서 뭘해야하지? 그래서 몇 가지 옵션이 있습니다

한 가지 운동은 정확히 똑같은 일을합니다 내가 여기있는 것처럼,하지만 당신의 데이터로해라 어떤 CSV 데이터를 찾을 수 있습니까? 시도해 볼만한 재미있는 또 다른 것 , 가서 p5js js library를 얻으십시오 자신의 선 그래프를 그릴 수 있습니까? Chart

js없이이 원시 드로잉을 사용합니다 p5js의 기능? 나는 그 해결책을 포함 할 것이다 이 동영상 설명에 시도해 볼 수있는 또 다른 운동 실제로 동일한 차트에 여러 줄을 그래프로 표시합니다 많은 경우, 데이터와 선량한 사람을보고 싶습니다

다른 데이터로 예를 들어, 같은 데이터 파일에서, 너는 평균 기온을 얻을거야 북반구와 남반구에서 그래서 세 가지를 모두 그래프로 나타낼 수 있습니다 : 전지구 온도, 북반구, 남반구, 각 라인마다 서로 다른 색으로 표시된 차트에서 그리고 그 해결 방법을 운동으로 포함 할 것입니다 이 비디오를 시청 해 주셔서 감사합니다 이것으로 첫 번째 모듈의 두 번째 부분을 마칩니다

이미지로 가져 오기 기능을 배웠습니다 이제 CSV로 가져 오기 기능을 배웠습니다 또한 Chartjs로 데이터를 그래프로 나타냅니다 다음 프로젝트에서 우리는 보게 될 것입니다

웹 API에서 데이터를 가져 오는 방법, 로컬 파일이 아닌 그리고 자주 변경되는 데이터 그리고 데이터 세트, 내가 사용할 예제, 위도와 경도의 위치입니다 국제 우주 정거장의 그것이 지구 위에있는 곳? 그런 다음지도에서 위치를 그리는 방법을 알려 드리겠습니다 그리고 매번 그 위치를 새로 고칩니다 종종 그것이 실시간으로 움직일 수 있도록

이것이이 첫 번째 모듈의 마지막 부분입니다 데이터 및 API 작업 그리고 그 비디오에서 뵙죠 매우 감사합니다