01 Introduction To Javascript Course

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

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

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

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

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

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

jQuery Full Course | jQuery Tutorial For Beginners | jQuery Certification Training | Edureka

안녕하세요 여러분,이 세션에서 jQuery에 대한 포괄적 인 세션에 오신 것을 환영합니다 우리는 화면에서 볼 수있는 다음 주제를 다루어서 시작하겠습니다

이 세션에서는 jQuery에 대한 소개를 이해하고 일단 돔 조작 및 jQuery 효과를 이해하면 이해해야합니다 개념 우리는 jQuery 양식과 이벤트를 살펴보고 마지막으로 이것을 끝내겠다 jQuery AJAX 및 유틸리티와의 세션이므로 오늘 우리에게는 특별 게스트가 있습니다 누가 앞으로 세션을 가져갈거야 그래서 당신은 안녕하세요 모두 환영을 원하십니까? jQuery UI 개발에서 80 에이커까지이 강좌의 강사가 되겠습니다 내 이름은 바룬이고 우리가 시작하기 전에 짧은 소개를하고 싶다

나는 약 6 년 동안 개발을 해왔고 여러 언어의 개발에는 python, JavaScript, PHP가 포함됩니다 루비, 자바, 안드로이드 등 지난 2 년 동안 angular 1X JavaScript는 계속해서 내가 가장 좋아하는 go-to 언어 중 하나이다 그것의 사용 용이성과 jQuery는 내가 광범위하게 사용했던 것입니다 과거와 나는 이것이 매우 중요한 디딤돌이라고 생각합니다

프론트 엔드 개발에 대해 배우고 있습니다 이것이 핵심 요소 중 하나입니다 당신이 필요로하는 디딤돌은 모든 개발자가 조금 알 필요가 있다고 생각합니다 조금 전에 그들은 angularjs 또는 reactjs와 같은 것들에 계속 가기 전에 vue

js 그래서 나에 관한 것이므로 HTML CSS와 JavaScript는 기본적으로 html로되어 있습니다 건축술 ok 이것은 동일 하 ok 나는 상자를 원한다 곳에 여기에서 원한다 여기 둥근 모양과 이것은 레이아웃 CSS를 광고 스타일을 작성하는 모든 종류의 색상 또는 그림자 또는 글꼴 크기 또는 글꼴 가중치에서 가져온 구조 그러나 여러 개의 여러 가지 JavaScript는 귀하의 웹 사이트를 현실로 만듭니다 맞습니다 물론 예쁜 HTML과 CSS 웹 페이지를 만들 수는 있지만, 그렇다면 아무 것도하지 않고 클릭하면 버튼을 누르거나 무언가 또는 일부를 가리키면 네, 정말 아무 것도하지 않습니다 그런 종류의 것이 나중에 지루해집니다

페이스 북에서의 의미는 페이스 북이 정말로 좋지 않을까 싶습니다 정보를 읽는 것만으로 JavaScript가 대화 형 기능을 추가하거나 웹 페이지에서 이미 경험 한 경험이있는 경우 자바 스크립트를 끝내지 만, 그렇지 않으면 지금 어떻게되는지, 그리고 어떻게되는지 보게 될 것입니다 인터랙티브로 인터럽트를 어떻게 추가 할 수 있는지에 대한 방법 웹 페이지와 마찬가지로 이미지가 오른쪽으로 이동 hTML 너무 구조 CSS를위한 것입니다 프리젠 테이션과 자바 스크립트는 동작을위한 것이므로 기본 Dom을 살펴 보겠습니다 구조 그래서 기본적인 그려진 구조 이것은 여기에 간단한 HTML 문서입니다 그들은 나무 모양의 패턴으로 그것을 놓았습니다

문서가 있습니다 다른 모든 것의 부모 문서 태그 내의 문서 태그 그러면 머리와 몸이 더 들어간 HTML 태그가 있고 그 다음 머리 제목이 포함되어 있으며 여기를 보면 텍스트를 포함하려고합니다 이 권리와 그 다음 당신은 약간의 본문을 포함하고있는 h1 꼬리표를 가지고있다, 그리고, 당신 돔이 실제로 언급 한 일부 텍스트가 포함 된 P 태그가 있습니다 HTML을 작성할 때마다 실제로 일어나는 일은 글을 쓰는 것입니다 특정 방향으로 브라우저에 연결되므로 브라우저는 바로 소프트웨어입니다

HTML을 쓰면 브라우저에 특정 방향을 쓰고 있습니다 내 웹 페이지가 특정 방식으로 표시되므로 친구가 있고 그 사람이 캔버스와 그 친구가 함께하는 캔버스는 브라우저이고 당신은 개발자는이 브라우저 또는 사람에게 지시하는 사람이고 너는이 사람에게 나에게 상자를 그려 넣는다 이렇게하면이 그림자 효과가 인쇄되거나 인쇄되거나 표시됩니다 상자 하나 이상의 메시지 글꼴 크기 글꼴 무게 여러 배 맞습니다 아니면 문서를 쓰는 것 같아요

누군가에게 문서를 작성하십시오 시작하는 jQuery 교육으로 제목을 지정해야합니다 소제목 jQuery 소개와 함께 단락 계획을 시작하십시오 jQuery 교육이 이제는 그렇게되었습니다 브라우저는 본질적으로 본질적으로이 HTML을 사용합니다

브라우저 방향 브라우저가하는 일은 방향을 만들고 추가 기능이라고하는 것을 만듭니다 문서 개체 모델 유물 이제 스타일을 적용해야하기 때문에 개를 만드는 이유는 무엇입니까? 당신이 CSS에서 제공 한 것은 여러 가지 일을 할 필요가 있기 때문입니다 그것을 dom으로 불리는 것으로 변환하고 그것을 당신과 당신에게 제공합니다 자체 조작 및 JavaScript 또는 jQuery의 많은 부분은 처리해야합니다 돔 조작과 당신이 바로 그걸 따라갈 때 당신은 그것을 알아낼 것입니다

이 예제를 본다면 돔 조작에 관한 것입니다 이 권리에 익숙 할 수도 있으므로이 특정 라인에 대해 이야기 해 봅시다 이 특정 줄에 ID 결과가있는 div 태그가 있다고 가정 해 보겠습니다 기본적으로 해당 요소가이 변수에서 Dom 요소를 가져옵니다 이 JavaScript 변수와 다음 행은 HTML을 설정합니다

그 안에 기본적으로 HTML을 설정하고 있거나 내부에 텍스트를 설정하고 있습니다 자바 스크립트를 사용하는 HTML은 매우 강력한 개념입니다 특정 모양과 느낌으로 사용자에게 페이지를 전달할 수 있고 사용자가 상호 작용을 결정하는 방법에 따라 변경합니다 해당 웹 페이지로 가면이 웹 페이지 전체를 그대로 변경할 수 있습니다 그리고 나서 JavaScript가 액세스 할 수 있기 때문에 당신을 돕는 JavaScript를 가지고 있기 때문에 DOM이 읽을 수있는 HTML 문서를 읽을 수 있으며 노드를 선택할 수 있습니다

Dom에서 이들을 노드로 생각하고 jQuery에 대한 액세스 권한이 있다고 생각합니다 이 노드들 각각은 이들 노드들 각각을 수정할 수있는 능력을 가지고있다 노드의 내용이든 아니면 노드의 내용이든간에 노드에 대한 한 가지 점은 모든 브라우저가 약간 동작한다는 것입니다 다르게 그렇게한다면 Chrome 또는 Mozilla에서 웹 사이트가 동일하게 보이지 않는 것으로 느껴짐 Safari에 대한 인터넷 익스플로러 대 오페라와 나는 당신이 가지고 있어야한다고 확신합니다 그들이 매우 다른 경향이있는 아주 좋은 웹 사이트조차도 이것을 경험했습니다

개발자가 얼마나 조심 스러웠는지에 따라 꽤 많은 그것은 깨진 것이 아니라 모든 브라우저가 다르게 작동한다는 것입니다 이것은 각 브라우저를 사람으로 생각해보십시오 이건 기차 날이 친구 야이 친구 야 네가주는 것을 보아

당신이 문서로 불리는 뭔가를 원한다면 돔을 그리는 방법 캔버스에 페인트 칠하거나 인쇄 한 다음 각 캔버스에 지침을 제공합니다 브라우저가 있지만 각 브라우저는 사람과 같이 각 비트가 다르게 동작합니다 브라우저는 지시 사항과 다르게 작동합니다 행동은 유사하지만 어떤 종류의 지시에 따라 10 % 15 % 웹 사이트가 크게 달라 보이지 않도록 변경할 수 있습니다 그러나 그들은 여전히 ​​조금 다르다

그래서 누가 개발 했는가? 그 브라우저는 무엇을 주 목적으로 만들었습니까? 예를 들어 Internet Explorer는 기본적으로 보안을 위해 작성되었습니다 매우 안전한 크롬은 다른 것을 위해 지어진다 파이어 폭스는 속도를 위해 제작되었습니다 사파리는 오페라를 위해 만들어졌습니다 그 밖의 다른 것들을 결정하고 때로는 그러한 결정들에 기초하여 이러한 행동들 CSS 속성에 반응하지 않거나 인식하지 못할 수있는 위치를 변경하십시오

어떤 방법으로 특정 지시어에서 특정 방식으로 특정 방식으로 이 문제는 신속하게 구축해야하는 개발자에게는 큰 문제입니다 적어도 90 ~ 99 개의 웹 사이트를 만들어야합니다 시간의 비율은 브라우저 전반에서 비슷한 방식으로 작동합니다 네 가지 다른 브라우저를 만들거나 별개의 멋진 의견을 쓸 경우 여러 브라우저에서 똑같은 일을하는 것은 너무 많은 작업 일뿐입니다 그리고 개발자는 jQuery가 jQuery를 돕도록 게으른 것으로 생각됩니다

정말 자유롭게 우리를 도와주었습니다 그래서 jQuery를 다음과 같이 생각하십시오 매니저는 jQuery를 각 관리자를 알고있는 관리자처럼 생각할 수 있습니다 만약에 이것이 내 친구들이라면 그는 각자의 행동을 알고 있습니다 그는 Firefox가 Chrome 또는 Chrome보다 더 많은 방향을 요구한다는 것을 알고있는 친구입니다

Internet Explorer 나 Internet Explorer보다 느린 비트가 필요합니다 명령은 천천히 지금이 실제 차이가 아니지만 난 그냥 이제는 관리자로서의 예제를 제공합니다 jQuery는 다른 브라우저의 서로 다른 동작으로 인해 우리는 대신 브라우저에 고유 한 코드를 작성하십시오 jQuery가 그렇게 인기가있는 첫 번째이자 가장 근본적인 이유 개별 브라우저마다 코드를 작성해야하는 의존성으로 인해 너와 나 같은 사람들이 웹 사이트를 정말로 빨리 만들 수있는 아주 쉬운 방법 그렇다면 jQuery는 본질적으로 JavaScript 라이브러리이므로 테스터 자바 스크립트를 혼동하지 마십시오

조기에 사람들을 봅니다 그 차이점은 조금 혼란 스럽다 자바 스크립트 및 jquery 자바 스크립트는 언어입니다 jQuery는 자바 스크립트이므로 jQuery는 근본적으로 많은 JavaScript 코드입니다 매우 숙련 된 개발자가 작성한 것으로 20 ~ 25 년간의 경험 개발 및 프로그래밍 등등 jQuery는 2006 년에 처음 출시 된 라이브러리입니다

크로스 브라우저를 지원하는 가장 대중적인 라이브러리는 가볍습니다 가볍지 만 파일이 너무 많아서 개발자가 좋아지지 않는다 물론 CSS를 기반으로하기 때문에 배우기 쉬운 효율성 문법이 곧 나올 것이므로 다음 질문으로 넘어가 자 jQuery를 사용하는 이유는 무엇입니까? 이를 통해 jQuery는 자바 스크립트 라이브러리를 단순화하여 CSS를 교차하는 구문의 클라이언트 측 스크립팅 브라우저 지원 동적 웹 페이지를 동적으로 만드는 데 도움이됩니다 당신이 Dom을 조작 할 수있을 때마다 귀하의 웹 페이지에 동적 인 성격과 웹 응용 프로그램이 있으므로 사용자에게 응답하는 동적 인 웹 페이지를 생성한다는 것을 다시금 기본으로합니다

입력은 직관적이며 쉽게 배울 수 있습니다 ID와 통합되므로 ID가 즉시 지원되므로 도움이됩니다 페이지가 더 빠르게로드되므로 크기가 작기 때문에 도서관과 그 자체가 작아서 웹 사이트를 찾을 때 일반적으로 도움이됩니다 인터넷 연결이 느려지거나 그렇지 않은 경우 그러면 웹 사이트의 무거운 무거워서 코드 크기가 웹 사이트를 실행하기 위해 다운로드하는 것이 다음에 많이 있습니다 애니메이션 페이지는 자바 스크립트 나 jQuery 또는 심지어 jQuery보다 훨씬 앞섰다

웹 페이지에 애니메이션을 적용하는 일반적인 방법 중 그러나 플래시는 프런트 엔드 개발자임을 의미합니다 HTML CSS JavaScript와 플래시가 더 이상 플래시가 아닌 것 같습니다 그것을 처리 할 때 가장 우아하지 않다고 말하는 데 충분합니다 브라우저에 문제가 없으며 브라우저 전반에 걸쳐 많은 문제가 발생합니다 그렇다면 jQuery는 사용하기가 너무나 쉽기 때문에 어떤 일이 발생합니까? 이미 내장 된 많은 함수들은 우리에게 많은 기능을 제공합니다 플래시와 비슷하지만 플래시를 사용하지 않는 애니메이션을 만들려면 새로운 것들을 배우는 용어는 새로운 것들의 수를 줄입니다

당신은 배우지 않아도된다는 것을 배워야합니다 그리고 당신은 여전히 ​​창조 할 수 있습니다 동적 웹 페이지의 일부인 jQuery를 사용하여 아름다운 애니메이션 사용자 입력을 기반으로 애니메이션을 정렬 할 수있는 페이지의 오른쪽 특정 섹션이로드되는 등 HTML 문서 유형에 따라 브라우저의 단어 문서 유형은 다음과 같습니다 문서의 해석은 다시 HTML 문서만으로 이루어집니다 웹 페이지를 그리는 방향을 포함하고 doctype은 기본적으로 방향의 버전이있는 브라우저이므로 매우 중요합니다

이 때까지 HTML은 HTML 문서 유형을 언급하는 방식이었고 html5에서 매우 간단합니다 그냥 입력하면됩니다 지금은 CSS 선택기로 충분하므로 잘 모르겠습니다 너희들은 지금까지 여러 가지 방법이 있으므로 이것을 건너 왔음에 틀림 없다 당신이 헤이의 관점에서 지침을 줄 때마다 상자가 당신의 프레드 색이되기를 원합니다

또는 글꼴을 14 픽셀로 지정하거나 페이지와 열을 나누고 싶습니다 20 % 20 %와 40 %의 오른쪽 코드를 CSS로 쓰지 만 CSS를 어떻게 표현합니까? 스타일이 무엇인지에 관해 HTML과 CSS를 어떻게 연결합니까? 선택자를 통해 발생하는 요소에 적용 공격을 선택하거나 식별하는 방법을 이렇게 상상해보십시오 네가 친구 튜브에 너에게 네 친구에게 말한 8 상자 캔버스에 페인트하면 상자 중 하나가 자연스럽게 붉은 색으로 표시됩니다 친구는 상자에 번호가 매겨진다면 지금 어떤 상자를 요청할 것입니다 1 2 3 4 5 6 7 8로 표시하면 친구에게 여기 상자 번호 3 붉은 색이어야합니다

이것을 할 때 식별자입니다 selector는 동의어로 생각하면 동의어로 사용할 수 있습니다 식별자가 있으므로 HTML 태그를 식별하는 다양한 방법이 있습니다 그 중 하나는 태그 이름 자체는 P 태그 또는 div 태그 또는 span 태그이며 그 다음에는 보편적으로 적용되므로 글꼴 크기가 14 픽셀 인 span 태그를 적용하면 내 HTML 문서의 어디에서나 span 태그를 사용하여 적용 할 수 있습니다 HTML에 ID를 설정하여 설정 한 ID 선택기가 있습니다

그럼 물론이 클래스 선택기뿐만 아니라 클래스의 ID를 태그라고 말할 수 있습니다 가장 인기있는 경향이 있지만 그 다음엔 더 많은 것이 있습니다 선택자를 설정할 수있는 방법에는 의사 클래스 선택자가 있습니다 부모 – 자식 관계 인 셀렉터가 있습니다 관계에 속성 기반 선택기가 있고 그 다음에 다중 셀렉터도 마찬가지입니다

이제는 그가 3 위를 차지할 수 있다고 생각합니다 클래스의 태그 ID이지만 관계를 기반으로하는 선택기조차도 다른 것들과 비교하여 일반적으로 사용된다 그래서 JavaScript를 공부했다면 jQuery 객체를 공부해야합니다 개체 그래서 누군가가 잊어 버린 경우에 대비하여 빠른 재충전 내 localhost 좋아, 이것이 바로 빈 웹 페이지입니다 지금은 말이지하지만 내가 말하는 의미를 빨리 보여주기 위해서는 이것이 자바 스크립트 오른쪽 중괄호가 열리고 중괄호는 닫히고 본질적으로 키 값 쌍을 포함하므로 저장할 수있는 과일의 수를 계산해야한다면 그것은 이것을 좋아한다

그리고 내가 점 사과를하면 그것은 바나나에 하나를 인쇄한다 페인트 두 개와 구아바도 세 개 넣고 그래서 당신이 가지고있는 것은 jQuery 객체로 불리는 것입니다 jQuery 객체를 사용하는 두 가지 방법 중 하나는 달러 기호이고 다른 하나는 jQuery는이 특정 케이스에 쓰여지고 j-cap은 작은 큐 큐브입니다 나머지는 다시 작아서 달러를 사용하면 괜찮을 수도 있습니다 또는 jQuery를 사용하지만 많은 경우에 해당 예제를 찾을 수 있습니다

인터넷은 달러를 사용하게 될 것입니다 지금 달러는 본질적으로 당신이 정말로 볼 필요가있는 함수입니다 그것은 자바 스크립트 문법을 좋아해 그래서 달러는 변수 일뿐입니다 if 나는 당신에게 다시 그것을 보여주었습니다 이 지금과 동등하다 나는 달러 도트를 3과 같다고 말할 수있다

그리고 만약 내가 인쇄 달러를 더하면 달러가 유효하기 때문에 그것은 객체입니다 식별자 또는 일반적으로 자바 스크립트에서 JavaScript의 변수 이름 jQuery가하는 일은 달러를 모두 상징으로 채택한다는 것입니다 jQuery는 달러를 통해 액세스 할 필요가 있습니다 그냥 변수 실제로 그것은 함수 jquery Fisker 이러한 괄호 오른쪽 경우 그래서 자바 스크립트 함수에서 괄호는 대괄호를 닫고 코드를 작성하면 이것이 본질적으로 그 안에 많은 것들이 많은 jquery 함수 우리가 발견 할 것이지만 실제로 시각화 할 필요가 있습니다 내가 좋아하는 함수를 호출하는 특별한 방법

그래서 jQuery 객체는 0 개 이상의 인덱스를 포함하는 배열과 같습니다 길이 컨텍스트와 선택기와 같은 객체 메소드도 포함되어 있으므로 우리 모두가 어떻게되는지를 알아낼 것이므로 jQuery 객체이다 많은 것들을 포함하고 있습니다 그리고 저는 여러분에게 몇 가지로 보여줄 것입니다 모든 내용이 포함되어 있지만 자바 스크립트라는 것을 명심하십시오

하루가 끝날 때 우리는 기초를 놓치지 않을 것입니다 매우 매우 중요하므로 일부 ID는 jQuery이므로 원자를 사용하려고합니다 거기에 경이로운 아주 좋은 것들 중 하나가 다시 숭고한 텍스트가 있지만 거기에있다 Dreamweaver도 방금 내가 사용한 것처럼 브라우저 콘솔에서 사용할 수 있습니다 jsfiddle J의 핀 클라우드 9와 같은 편집기 만있는 것을 시연 한 후 디버거가 있으므로 Mozilla에서 Chrome 웹 검사기를 사용합니다 파이어 폭스는 파이어 버그이며 익숙한 것에 따라 이토를 사용할 수 있습니다

당신이 그들 모두를 설치했기 때문에 jQuery CDN과 설치 때문에 웹 프로젝트에 jQuery를 설치하는 두 가지 방법이 있습니다 jQuery를 다운로드하고 저장되는 자바 스크립트 파일처럼 파일의 절반을 다운로드하는 것입니다 랩톱이나 프로젝트에서 자신의 위치를 ​​파악하고 경로를 지정하면 내가 한 일은 내가 jQuery를 가지고있는 것을 볼 수 있다면 여기에 gs5가있다 무서운 JavaScript를 많이 혼동하지 마십시오 읽을 필요가 없습니다

이것 전부를 통해 그러나 나는 다만 그것을 이렇게 포함했다 그래서 나는 그것을 추가했다 여기에 그것을 발견 할 것이고 나는 그것을 괜찮게 사용할 수있을 것이며 다른 길은 콘텐츠 전달 네트워크라고 불리는 CDN을 통해 노드 CDN의 날은 가지 않겠지 만 CDN은 기본적으로 Google과 같은 CloudFlare와 같은 대기업은 자체적으로 Amazon jQuery입니다 기본적으로 현지화 된 서버 인 자체 CDN을 가질 수 있으므로 서버 귀하의 특정 위치에 가까운 귀하의 요청에 응답 CDN의 장점은 서버가 물리적으로 가까이 있기 때문입니다 당신이 인도에 있다면 그것은 미국에 앉아 있지 않다는 것을 물리적으로 의미합니다 그것은 싱가포르에 있지만 당신이 우리에 있다면 당신의 파일을 제공하지 않습니다 인도, 영국 또는 유럽에서 파일 자체를 제공하므로 근접성은 물론 전송률의 역할을 수행 할뿐만 아니라 파일 버전이 유지 관리 중이므로 파일 버전을 유지 관리 할 필요가 없습니다

자신의 머신에있는 파일 또한 역할을 담당합니다 무게가 표준 파일이되는 등의 이점 열악한 개발자가 다운로드 한 것을 당신이 알고있는 것을 선택하도록 강요합니다 당신에게 그것이 원래의 jQuery이고 그것이 수정되지 않았 음을 확신합니다 이걸 제대로 생각하면 이 파일을 우연히 편집 할 수 있습니다 방금 편집 한 파일이 있습니다

이 프로젝트의 다른 개발자이지만 다운로드하는 경우 CD에서 나는 우연히 뭔가를 바꿀 수는 없다 그래서 Sirian이 도움을주는 이유는 무엇입니까? 개발 모드에 있다면 현지인을 선호합니다 내 컴퓨터의 파일은 훨씬 빠르게 전송되기 때문에 내 컴퓨터에서 내 컴퓨터로 파일을 전송할 때까지 기다릴 필요가 없습니다 서버에서 다운로드하여 govind를 다운로드하는 것이 좋습니다 우리가 이것으로 시작하기 전에 파일을 확인하십시오

jQuery 파일 JavaScript 파일을 이미로드했음을 유감스럽게 생각하고 있습니다 달러의 콘솔 도트 로그 나는 어디서나 달러를 정의하지 않았다 브라우저가 정상이며이 페이지를 새로 고칩니다 내 브라우저에서이 페이지를 다시로드하려면이 작업을 제거하고 if 당신은 그것이 jQuery HTML 936 라인 36을 가지고 있다는 것을 알았을 것이다 함수를 반환 했으므로 jQuery dollar은 필수적으로 사용할 수있는 함수입니다

머리가 조금 돌아가지만 자바 스크립트에서도 함수 나 객체가 괜찮아요 함수는 객체이므로 달러가 객체라고 말했을 때 올바른 것이고 달러가 함수라는 이유는 함수가 정확하기 때문입니다 jQuery를 사용하면 JavaScript의 객체이기도하다 결과를 같은 함수로 가져올 것이고 비교를 위해서 내가 해줄거야 이렇게하면 두 가지가 똑같은 것을 돌려주고 있다는 것을 알게된다면 그들은 똑같은 기능을하고 있습니다

또한 다른 것을 시도해보십시오 만약 그들이 똑같은지, 내가 말하는 것처럼 보도록합시다 jQuery 또는 dollar 이제는 우리가 무엇인지에 대해 이야기하는 것과 같은 것입니다 여기 그냥 div 태그가있는 간단한 HTML 파일을 가지고 있으므로 괜찮습니다 이 div 태그 안에는 아무 것도 없다는 것을 알기 때문에 이것을로드 할 때조차도 페이지 오른쪽에 아무 것도 표시되지 않습니다

빈 HTML 페이지입니다 그것 안에 아무것도없이 기본적으로 나는 주석 처리했다 모두 하나의 div 태그 만 있지만 내부에는 아무 것도 없습니다 페이지가 방금로드 된 후 무언가를 표시하려고한다고 가정합니다 그 작품 그래서 조각별로 조각을 깰하자 그래서 내가 걸리는 달러가 문서로 불리우는 무언가 때문에 내가 여기에 문서를 전달할 때 jQuery 나는 바로 전체 HTML 문서를 언급하고 있음을 이해한다

위로 가기 그리고 나는 준비가되어있는 준비가되어있는 것을 사용할 것입니다 다시 함수입니다 그래서 이것은 제가 강조한 함수입니다 그 위에 또 하나의 기능이 있습니다 자바 스크립트를 사용하면 좋아, 서로 위에 정의 된 함수가 있다고도합니다

chaining Rev 함수 맨 위로 다른 함수를 수행하여 함수를 호출했습니다 어떤 매개 변수를 취하는 매개 변수는 또 다른 함수이므로 우리가 여기에 많은 기능을 가지고 있지만 잠깐 나와 함께 있어야합니다 기본적으로 브라우저에 문서 준비가 완료되면이를 알려줍니다 내가 방금 선택한 것을 작동 시키면 그 안에 무엇이든지 달려서 페이지가로드 될시기를 알지 못하기 때문에 여기에 타이머를 설정하지 마십시오 페이지가 준비가되었을 때 나는 그저 내가 어쩌면 문서는이 함수 안에있는 어떤 것으로 든 준비가되어 있습니다

그래서 그것을 시도해 봅시다 간단한 콘솔 도트 로그 문서를 준비한다 나 또한 실제로 주석 처리한다 이 모든 것이 이제는 페이지를 새로 고침하여이 내용이 인쇄되도록하고 이 외부에서 36 번 줄에 줄 번호를 설정 한 다음 line number 42 그래서 쓰기 라인 번호 36이 실행되면 라인 번호 42가 실행됩니다 실행했지만 문서가 나중에 실행 준비가 완료되었습니다

그것이이 지시로 옮겨졌고 모든 것이 끝나면 페이지 준비가 완료되면 문서가 준비 될 때까지 페이지가 준비되지 않았습니다 그것이 문서를 통해 모든 것을 거치지 않는 한,이 것이 아니라면 브라우저에서 준비가되지 않은 것으로 간주되므로이 기능을 사용할 수 없습니다 트리거되었지만 내부적으로 자바 스크립트 트리거 일단이 모든 기능이 준비되면이 기능이 실제로 첫 번째 스 니펫입니다 코드 대부분의 사람들은 jQuery를 작성할 때 문서 준비가 완료되면 다음 작업을 수행 할 수 있습니다 웹 페이지에서 뭔가를 표시 할 수 있습니다

jQuery를 사용하면 객체를 선택할 수 있습니다 또는 돔에서 요소를 선택하거나 세분화하여 특정 HTML 태그는 이제 여러 가지 방법으로 선택할 수 있습니다 도움말을 말하면 문서에서 사용할 수있는 모든 div가 선택됩니다 수천만 일이 걸릴지라도 모든 조언 자연적으로 원인이되기 때문에 권장하지 않는 모든 팁을 선택하십시오 당신이 모든 div에 스타일을 설정하고 싶다면 CSS와 같은 많은 문제들 그 다음에 할 일은 ID로 선택하는 것입니다

이 ID는 준비된 데모이므로 여기를 보시면 해시 태그를 설정할 수 있습니다 나는 CSS에서 이렇게 할 것입니다 또는 해시 태그 해시를 비슷한 방식으로 준비해 보겠습니다 해시 태그를 통해 jQuery 또는 브라우저에 알려주는 준비를 할 수 있습니다 사실 이것이 우리가 말하는 것입니다 이것이 우리가 원하는 것입니다 우리가해야할 일에 대해 끝내야 할 것이 있습니다

그것이 비어 있기 때문에 그 안에있는 텍스트와 문서가되기 위해서 필요한 것은 준비가되어 있습니다 우리는 콘솔 도트 로그를하고 있었지만 지금은 사용자에게 내 탭이 있다는 것을 보여주고 싶습니다 페이지가 준비되었으므로 페이지가 준비되었음을 알 수 있습니다 이제 페이지를 다음과 같이 다시로드 해 봅니다 당신은 그것을 거기에 넣어 내 코드가 없다는 것을 알 수 있습니다

여기 위에 인쇄 된 것이 있으면 여기에 표시됩니다 낮은 문서 점 준비가되었으므로 문서가 준비되면이 기능을 사용할 수 있습니다 함수가 실행되고 이것이 실행되기를 원했습니다 먼저 변경하려는 팩을 선택하여이 노드에 조작 된 수정이 필요합니다 웹 페이지가 준비되어 있어야합니다

그리고 그게 제가 슬라이드로 돌아가서 결국은 끝났습니다 문서가 Dom 조작을 위해 준비되면 곧 함수를 할당합니다 지금 jQuery가 우리에게 할 수있는 또 다른 것을 지금 진행하고 있습니다 우리가 할 수있는 사슬 또는 사실 심지어 자바 스크립트에 대해 이야기하는 것은 이 연쇄 기능은 함수가 하나씩 실행되는 서로에 대해 기능합니다 다른 하나는 지금 당신이 이걸 가지고 있지 않다는 것을 압니다

너에게 친숙하지 않아서 나는 하나씩 차례로 살펴 보자 jQuery를로드 한 후에이 색상을 설정해 주었으면합니다 도트 CSS라고하는 메소드와 이러한 유형을 검색 할 때마다 온라인으로 당신은 jQuery에서 dot CSS로 그들을 참조해야하고 즉시 Google 알리미 또는 jQuery 웹 사이트 Sociedad에서 설명서를 엽니 다 jQuery의 CSS는 두 개의 매개 변수 인 첫 번째 매개 변수 CSS 속성이어야하며 두 번째 매개 변수는 값이어야합니다 좋아요

잠시 후에 이것을 실행하고 작동하는지, 그렇지 않으면 결과를 봅시다 이미 올바른 웹 페이지를 만들었습니다 또 다른 하나를 이것에 연결 시키거나 다른 것을 파괴하지 않겠다고 생각해 봅시다 시도해 보도록하겠습니다 글꼴 두께와 같이 700으로 만들면 대담해진다

대담한 것은 아니다 1000 그것은 뽑아지지 않는 것은 괜찮습니다 1000 유효한 속성이 아닙니다 700은 대담 해져서 색상을 다시 바꿀 수있어서 만들 수 있습니다 파란색 지금 오호 내가 만약 당신이 그것을 보면 순서를 먼저 색상을 생각 텍스트를 설정 한 다음 색상을 다시 지정하면 프레임하지만 이번에는 캔버스가 준비되어 있고 아마 두 번째 프레임입니다 내 JavaScript 및 jQuery 프레임입니다

지금이 말을 지금하겠습니다 이제이 작업을 수행하고 슬라이드 데크에서 마지막으로 수행 한 작업을 시도하십시오 기본적으로 페이드 인되어서 일종의 애니메이션으로 사라 지도록 지시합니다 너는 갈거야 나중에 얘기하자하지만 보자

좋습니다 이렇게 느리지는 않습니다 느리게 만드는 법을 보도록하겠습니다 jQuery 문서 이제 막 느리게 만드는 방법을 알아 내려고 노력할 것입니다 알았어

번호가 필요해 내가 말할 수있는 번호를 줄 수있어 1000 밀리 초 또는 100 초로 표시 할 수 있습니다 밀리 세컨드 (milliseconds)라면 5,000으로 설정할 수 있습니다 꽤 느린 5 초가 될거야

알았어 내 재 장전은 어때? 이것이 실제로 가능하지 않은 이유입니다 진정한 의미가 아닙니다 효과는 이것 같이 그것을 밖으로 시도하게한다 알았어 당신 jQuery를 사용하면 우리가 선언 할 수있게됩니다

달러 오브젝트에 대한 우리 자신의 함수가 이제는 다시 함수가 객체이기도하고 객체가 함수를 포함 할 수 있다는 사실 그래서 JavaScript의 객체는 키 중 하나와 같을 수 있습니다 키의 값은 다음과 같은 함수 인 값에 해당합니다 자바 스크립트에서 커스텀 함수를 정의하라 이것은 우리가하는 일종의 일종이다 여기서 우리는 달러 도트 F n을 내 사용자 정의 함수에 도트라고 부르고 다음을 정의합니다

기능을 수행 할 수있는 기능을 추가로 수행 할 수 있습니다 자신 만의 jQuery 함수를 정의해야한다면 할 수있는 일이있다 그게 아니라면 전체 라이브러리를 다시 쓰는 것도 알지 못합니다 그 이유는 단지 지금 그것을 정신적 인 메모로 유지하는 것입니다 당신이이 일을 해낸보다 진보 된 사용자라면 Java JRE 및 Java Script에 대한 친숙 함의 일종의 시도 이것은 라이브러리를 확장 할 수있는 것을 알면 좋으며 jQuery에 대한 가장 아름다운 것들을 라이브러리로 확장 할 수 있습니다

Dom을 질의하거나 다양한 부분을 선택하는 것을 의미하고 패션을 의미합니다 DOM 개체를 사용하여 jQuery와 JavaScript를 사용하므로 예제가 있습니다 너는 단순한 목록에 불과하다 그리고이 목록에서 어떤 일이 일어나고 있는가? 거기에 세 가지 항목이 있습니다 HTML 바로 그래서 이것은 목록에있는 세 항목이있는 목록입니다

바깥쪽에는 아무 것도 언급하지 않은 태그가 있지만 아마도 우리는 Google에 div 태그가있는 div 태그 그 안에있는 태그는 데모 목적이지 반드시 그런 것은 아닙니다 이 같은 것을 만들지 만 그것은 내가 어떤 것을 증명할 수 있도록 도와 줄 수 있습니다 개념의 양 그리고 그 안에 다른 요소가 있습니다 이제는 괜찮아요 ID 선택기를 사용하여 기숙사에 대한 질의를했지만, 다른 CSS 선택기도 사용하십시오

하지만 지금은 ID 선택기로 가져가 보겠습니다 이제 여기에 우리가 가진 예제가 있습니다 과일과 우리는 그것에서 텍스트를 가져와야했습니다 그것은 전체 전체를 돌려 줄 것입니다 이 내부의 우리가 다음에 다시 갈 경우 이것은 별도의 방법입니다

이것을 언급하는 것은 또 다른 방법이며 이것은 또 다른 방법입니다 당신이 가장 많이 사용하는 것을 옳고 그름으로 사용하십시오 편안함을 느껴서 많은 사람들이 처음에는 편안 할 것 같아요 이 옵션은 좀 더 일반적인 것이고 이것은 li jQuery는 CSS에 의존 할 것이라고 말한대로 괜찮습니다 선택기는 동일한 전원을 사용합니다

ID 선택기가 나타납니다 고유 한 ID를 찾아 선택하고 이미 완료 한 텍스트를 설정합니다 이 시연 권리는 다음 시문으로 넘어 가게됩니다 클래스 선택기도 마찬가지입니다 그래서 내가 문서로 이동한다고 가정 해 보겠습니다

e1을 읽도록 클래스를 변경하고 이것을 e1을 읽도록 변경하고 이것을 변경하십시오 e1을 읽은 다음 이동하여 페이지를 다시로드하면 여전히 작동합니다 왜냐하면 지금은 클래스이기 때문에 해시 대신에 이제는 점이됩니다 언제 당신에게 달려 있으며 실제로 의존하고 있는지를 네가 프로젝트를 만들고 있다면 나는 너를 떠날거야 일반적으로 하나에 충실한다고하지만 여분의 ID를 정의하지 않으려는 경우 div 태그가 있고 클래스를 정의했다고 가정 해 보겠습니다

이제 ID 태그를 추가하여 추가 HTML을 추가하고 싶지는 않습니다 자바 스크립트에서 뭔가를 참조하고 참조를 잊어 버렸습니다 계속해서 클래스를 사용하는 것이 편리 할 수도 있습니다 어떤 특정 경우에 HTML에 클래스가 없으면 개발자에게 정의 할 수 있습니다 죄송합니다

아니면 ID를 정의한 다음 그 ID를 사용할 수 있습니다 자연스럽게 요소 선택자가 있습니까? 여기로 향하고 h1을 닫고 페이지가로드되면 우리는 달러 h1 점 CSS 색상을 말할 것입니다 나는 빨간색이라고 말하려고합니다 그 다음에 가서 그 페이지를 다시 썼습니다 그래서 매초마다 풀면 그것은 검은 색이지만 빨리 빨간색으로 전환됩니다

그래서 h1 태그를 사용하는 것조차도 그것이 어떻게 작동 할 것인가와 매우 흡사합니다 귀하의 CSS에서 당신이 그것을 설정할 수 있습니다 또는 텍스트를 완전히 변경할 수 있습니다 우리는 이것을 할 수 있습니다 우리는 이것에 와서 변화시킵니다 나는 당신에게 변화를 요구해서는 안됩니다 Irishman text OK 그럼 물론 옮겨 다니는 속성 선택기가 있습니다

태그가 있다고 가정 해 보겠습니다 타겟이 있습니다 자기 자신으로 설정하거나 googlecom에있는 H ref가 있고 선택하고 싶습니다 그것과 나는 그것의 색깔을 수정하고 싶습니다

그래서 이것이 작동하게 될 것입니다 그냥 여기에 태그를 붙여주세요 대상이 그래서 그것은 그것에 설정된 속성입니다 그리고 또 다른 것이 괜찮아요 그래서 jQuery가 할 수있는 것은 여기에있다 자기 자신과 동일한 타겟을 선택하면 CSS 색상이 파란색으로 바뀝니다

일반적으로 녹색이어야합니다 따옴표를 잊어 버렸습니다 따옴표는 여기에 와야합니다 이 값을 큰 따옴표로 변경하십시오 그래서 만약 당신이 색깔이 바뀌 었음을 알게되면,이 모든 것들을 음소거 시켜서 내가 판에서 판자로 바꿀 때 색이 바뀌 었음을 분명히 볼 수있다

구글 블랭크가 색이 칠해 진 다른 하나가 내가 이것을 바꿀 지 보자 yahoocom 알았어 두 사람이 모두 실수했다고 가정 해 봅시다 그 안의 구글은 사용자를 좋아하지만 실제로는 야후를위한 것이다

지금하고 싶은 것은 yahoocom이라고 말한 것을 선택하고 싶은 것입니다 야후를 말하는 텍스트를 변경하십시오 이전에 HTML에서 알았 으면 Google 셀로 설정되었지만 Google에서 선택한 셀을 변경했습니다 속성의 기초를 설정하고 그 안에있는 텍스트를 바꾼다

기본적으로 속성을 기반으로 선택하는 방식이므로 속성이 참조합니다 클래스의 ID도 속성이므로 약간 혼란 스러울 수도 있습니다 왜냐하면 나는 많은 레드가 판사 CSS의 의견이라고 말하기 때문이다 속성에 아이디어를 클래스로 넣을 수 있습니다 속성입니다

그러나 우리가 여기서 언급하는 것은 ID가 아닌 종류의 속성입니다 또는 ID 나 클래스가 아닌 클래스는 다음과 같다 기본적으로 스타 스템 스타 기호는 문서에서 모든 것을 선택할 것입니다 이 작업을 권장하지 않는 것은 많은 메모리를 먹을 것입니다 사용자의 브라우저에 웹 사이트가 있으므로 별 기호가 기본적으로 사용됩니다 모든 것을 선택하십시오

다음으로 위치 선택기와 pseudo-class selector는 바로 이것에 대해 실제로 시도해 봅시다 지금 내가 특별히 Li를 선택해야한다면, 내 목록에있는 항목 목록 항목을 선택한 다음 거짓말을하고 CSS 색상을 빨간색으로해야합니다 결과가 무엇인지 봅시다 좋아, 이건 작동하지 않을거야 어쩌면 이것은 괜찮을거야 그래서 무슨 일이 일어 났는지 이것은 부모님 안에서 아이들을 선택할 수있는 방법입니다 내가 말했던 것은 아이템리스트와 함께 아이템리스트를 선택하고 그 안의 첫 번째 것으로 가면 그 안의 첫 번째 것으로 간다

빨간색의 CSS와 마찬가지로 이제는 첫 번째 페이지에서만이 작업을 수행해야합니까? 하나 그래서 만약 내가 그것을 첫 번째에서만해야만한다면 이것은 내가 어떻게 할 것인가이다 그 차이가 단지 첫 번째인지 빨간 색인지주의하십시오 일부러 혼란 스러울 수도 있으므로 제거하십시오 여기에서 플레이하는 CSS 우선 순위입니다 그래서 첫 번째 CSS가 있다고 가정 해 봅시다

내가 커피를 두 번째로 선택해야만 커피를 마실 때 커피가 먼저 나옵니다 두 번째 괜찮아 질거야 내가 실수 한거야, 네, 한번 보자 조금이나 해보자 네, 제 생각 엔 이건 단지 첫 번째로만 작동하고 두 번째로는 작동하지 않는다고 생각합니다

그냥 내가 마지막으로 예와 함께 작동 생각 첫 번째 선택해야합니다 그것은 작동하지만 마지막 하나 뿐이지 만 괜찮아요 마지막이지만 두 번째 세 번째 또는 네 번째가 아니므로 개인 자산에 대해 더 쉽게 이해할 수 있습니다 하지만 논리적으로 목록의 항목 수를 생각하면 백도 될 수 있으므로 중간 이름의 종류는 불가능합니다 다른 사람들은 다른 사람들을 다른 사람들과 방법과 그것은 unmaintainable 일 것입니다 그래서 당신은의 첫 번째 또는 마지막 볼 수 있습니다

물론 첫 번째 또는 마지막으로 그리고 나중에는 의사 클래스를 사용하여 다른 옵션은 다른 모든 것들이 있어야한다고 생각한다면 나는 이렇게 말할 수있을 정도로 나는 그렇게 할 수 있었다 그렇다면 여기에 내가 한 일이 있습니다 google 통신은 그렇게하지 Yahoo하지 않습니다 걸렸다으로 href가있다 옵션으로 제공되므로 다음은 기숙사를 지나치므로 트래버스가 가능합니다 근본적으로 기숙사를 걷는 것은 걷는 요소를 걷는 것과 같습니다 요소별로 요소별로 그리고 첫 번째 부분 인 쿼리 선택기로 당신은 첫번째 선택을 할 수 있습니다

HTML에서 기숙사를 가로 지르는 특정 중첩 태그 세트 도움이 될 것입니다 그런 다음 우리에게 유용한 공통 기능이 있습니다 fine은 일치하는 모든 요소를 ​​찾습니다 한 수준 아래로 가장 가까운 Dom 트리 위로 이동하므로 아래로 이동하지 않습니다 안쪽으로 이동하면 일치하는 부모 부모를 찾을 때까지 Dom 트리 위로 이동합니다

Dom 트리를 움직이지만 단 하나의 레벨까지 가면 가장 가까운 것이 가장 가까운 것을 발견 할 것입니다 부모님이 곧 바로 다음 단 하나의 집으로 이사 올 것입니다 레벨 괜찮다면이 특정 노드의 부모가 아래로 이동하고 즉각적으로 떨어지는 형제 자매를 대상으로 여기에 주목할 중요한 것은 그것이 형제에게 갈 것임을 알 수있는 형제 자매는 형제에게 가지 않을 것입니다 자식 그래서 li 태그가 있다면 li 태그는 li 태그로 호출하면됩니다 다음 Li 태그로 이동합니다

내부의 HTML에는 아무 것도 표시되지 않습니다 그것은 이전처럼 그냥 다음으로 이동하지만 위로 이동하므로 이동합니다 선행 형제 및 형제 자매는 위아래로 움직이는 대상이므로 li 태그에서 선택하면 다른 모든 형제를 먼저 선택합니다 선택한면의 첫 번째 요소와 마지막 요소가 마지막 요소를 가져옵니다 내가 콜리어에서 처음으로 그리고 마지막으로 기본적으로 처음으로 멘토를 보여주는 쇼들 첫 번째와 마지막은 중간에있는 것이 아니라 마지막에있는 것뿐입니다

당신은 아마도 중간의 것들을 통과해야했습니다 다음 또는 이전의 박수가 도움이 될만한 것입니다 각각의 몇 가지 예를 살펴 보겠습니다 좋아, 그럼 이걸 음소거하고 이것도 음소거하자 좋아, 내가 한 일은 내가 간단한 버튼을 여기에 추가하고 그것에 클릭 기능을 추가했습니다

여기에서 완료되면이 버튼을 클릭 할 때마다 웹에 표시됩니다 여기에 뭔가 일이 일어날 것입니다 무언가가 나에 의해 여기에서 정의되고있을 것입니다 그래서 이것은 무엇을 할 것인가입니다 당신이 만들었던 아이템 목록에 갈 예정입니다

태그를 붙이고 모든 CSS를 만들어 붉은 색으로 만들어 보자 이 버튼을 클릭하면 모든 태그가 빨간색 커피가되었습니다 사실 전자 태그가 아니 었어 그래서 우리는 기억할 수 있고 yahoocom이라고 말할 수 있습니다

클릭 만하면 나만 태그를 발견하고 커피는 안 보이고 우유가 아니라 차가 아니라 그래서 본질적으로 항목 목록은 다음 사람이 평가하는 센터 동료를 찾는다 예를 들어 만약 내가이 일을하려고한다면이 일을 시도하거나 해보 라 이 예에서는 항목 목록을 만들었으나 항목 목록을 만들었습니다 첫 번째 li 대신이 특정 Li 태그를 선택합니다

결과는이다 마치 내가 처음으로 목록 항목을 선택했던 것과 같은 것입니다 이번에는 내가 빨간색으로 색을 설정했는데, 내가 자식으로 바꾸면 어떨까요? 무슨 googlecom만이 일어날 것인가? 아이들은 바로 옆에 바로 가기 때문에 안쪽으로 들어가면 깊숙한 곳으로 가지 않을거야 이 태그가 여기 div 태그 밖에 있다면 div 태그에이 권한이 있습니다 그게 효과가 없을 것 같았지만, 그렇지 않은 것 같아

그래서 아이들은 바로 옆에있는 한 곳으로 가자 가장 가까운 곳으로 가자 내가 증명하기 전에 그 결과가 무엇인지 알아보기 위해 시도해 보라 그래서 가장 가까운 것이 가장 가까운 것입니다 한 번 정의를 봅시다

Dom에서 일치하는 요소를 찾을 때까지 Dom 트리를 위로 이동하여 위로 이동합니다 돔 나무는 실제로 괜찮습니다 아무 일도 일어나지 않습니다 이유는 그것이 사실이라는 것입니다 그것이 위로 움직이는 것은 아래로 움직이지 않고있다

그래서 우리는 찾을 필요가있다 여기 뭔가 있습니다 그래서 우리가 여기에 태그를 추가하면 ul의 바깥에 있습니다 그래서 더 이상 ul 안쪽에 ul 태그가 없다 당신 그래, 내 생각에 그 사람이 내면 가장 가까운 사람이 그랬다면 좋을 것 같아

그것은 특정 유형의 가장 가까운 부모를 찾기 위해 노력했습니다 대신에 내가 살아있는 내부의 특정 키 태그를 선택했습니다 나는 가장 가까운 동맹국을 찾고 색을 정했다 빨간색으로 가면 이것이 가장 가까운 동맹국으로 갈 것입니다 페이지가 다시로드되면 빨간색으로 설정됩니다

이 버튼을 클릭하십시오 버튼을 누르면이 시간에 연합군이 눈치 챘을 때 Li는 빨강 그래서 내가 이전에 시도했던 것이 관계가되어야합니다 Li 태그와 그 외부에있는 태그 사이에는 관계가 없었지만 이제 우리는 부모 – 자녀 관계가되어야한다는 것을 알고 있습니다 가장 가까운 부모를 찾으려면 이제 부모에게가는 사슬을 찾으십시오 다시 div 태그 내부를 선택하려고합니다

부모와 우리는 하나의 픽셀의 경계를 줄 필요가 있습니다 yahoocom을 포함하는 div 태그는 여기에 한 픽셀의 테두리를 가져옵니다 넥서스 다음에 당신은 첫 번째 앨리에 갈거야 우리는 다음에 갈거야 그리고 우리는 첫 번째 픽셀의 CSS 테두리에 Ally를 부여하고 그것을 제공합니다 그것은 부모가 아닌 아이가 아닌 형제에게로 이동하기 때문에 우유에 형제에게 그렇게 똑같은 계층 적 수준으로 이전의 하나는 괜찮아요

그래서 사실 좀 더 간단하게 만들어 줘요 그래서 그것은 마지막 li에 갈 것이고 그때 그것은 이전 형제에게 갈 것입니다 그래서 그것은 T에 갈 것이고 T에서 그것은 우유에 갈 것이다 그래서 이것까지는 t에있다 다음 그것은 우유에 가고 그 때 CSS 다음 형제 자매를 놓는다 그래서 당신은 그 때 첫째로 속인다 형제들은 국경에 넘겨 줘야합니다 좋아요

우리도 그렇게 할 수 있어요 우리가 이것을 선택하면 당신이 먼저 할 수있는 사랑 대신에 오른쪽 그리고 나서 이것들 둘 다로 설정됩니다 마지막으로 달의 테이블을 넣어 그것을 할 것입니다 좋아 다음은 처음이다 그래서 무엇을 보자 이것은 우리를 위해 우리가 Li를 선택할 것이고, 우리는 첫번째 것을 선택하여 선택할 것입니다 리와 우리가 제일 먼저 선택하고 우리가 발견 하고이 하나를 선택합니다 마지막으로 물론 다른 방법으로 그것을 할 수 있습니다 동일한 방법을 사용하는 여러 가지 방법을 선택하는 것이 좋습니다

당신이 마음의 꼭대기를 기억한다는 점에서 가장 편안함 그리고 이걸 진짜로 두껍고 옳고 그름으로 여기에서 사용하십시오 4:54 큰 코와 결국이 변수를 사용하거나 죄송합니다 일종의 어떤 의미에서 이러한 기능을 사용합니다 주어진 순간에 당신에게 편리합니다 그래서 당신이있을 때 그들이 편리하게옵니다

많은 복잡한 Dom 조작을 처음부터 다룬다 요소를 선택하는 첫 번째 부분에 초점을 맞추십시오 클래스 식별자 또는 아이디어 식별자 또는 태그 식별자 jQuery의 중요한 측면은 Dom 조작을 수행하는 Dom 조작입니다 각 브라우저가 다른 브라우저를 기반으로하면 일반 자바 스크립트를 작성하는 경우 지침과 다른 방법 그러나 jQuery는 Dom 주위에있는 많은 방법으로 구조에 나옵니다 현재와 ​​마찬가지로 브라우저에서 브라우저로의 차이를 처리합니다

프로그래밍이나 컴퓨터 과학과 관련된 것은 네 가지가 있습니다 어떤 특정 물체에 대해서도 할 수 있고 그것을 읽고있는 사람들 그것을 업데이트하고 삭제하여 추가 또는 제거하는 것은 생성 또는 삭제입니다 수정은 복사를 갱신하는 것 또는 복제는 읽고 쓰는 것입니다 본질적으로 많은 것들을 기반으로하는 네 가지 기본 원칙입니다 조작 우리는 단순히 업데이트가 생성되었는지 여부에 관계없이 또는 삭제 또는 심지어 단순히 그것을 읽을 수있는 모든 종류의 지금 우리가 사용할 수있는 돔 조작은 특정 간단한 방법이 있습니다

돔 요소 내부의 콘텐츠를 조작하여 하나의 돔 요소가 자체적으로 Dom 요소를 조작 한 다음 내부의 내용도 조작합니다 예를 들어 마지막 클래스에서 빈 div 태그가 있음을 확인했지만 페이지가로드 된 후에 텍스트를 배치했습니다 콘텐츠 조작의 예를 웹 사이트에서 볼 수있는 경우가 있습니다 버튼을 클릭하면 무언가를 스스로 검토 할 수 있다고 가정 해 봅시다 여기서 퀴즈 중 하나를 택했으면 질문이 나타납니다

그 밖의 일이 발생하면 그 대화는 당신이 무언가를 클릭하고 응답은 텍스트가 나타나거나 내용이 조작된다는 것입니다 주로 세 가지 값이 있습니다 하나는 업데이트 할 텍스트 방법입니다 HTML 내의 텍스트에는 HTML 코드가 삽입되거나 업데이트되는 HTML 메소드가 있습니다 내부 요소 그래서 그때 Val 메서드 값이있다

입력 상자에서 값을 가져 오거나 입력 상자에서 값을 설정할 수 있습니다 텍스트와 HTML의 차이점은 텍스트가 텍스트라는 단순한 텍스트라는 것이 자연 스럽습니다 텍스트를 사용하지만 HTML을 사용하면 실제로 HTML을 문서 내에 배치 할 수 있습니다 빨리 예제로 뛰어 들었으므로 여기서 한 것은 내가 작성한 것입니다 간단한 HTML 컨테이너 태그 안에 있습니다

거기에 질문이 있습니다 답안 상자는 결과가 비어 있기 때문에 사용자가 지금까지 질문에 답변하지 않았으므로 여기에 답변이 있습니다 우리는 정답이므로 사용자가 제출 한 결과를 보여줄 것입니다 내가 한 일은 일단 문서가 준비되면 내가 말한 것을 엿 들었을 것이다 트릭 청취자로 불리는 어떤 것, 그래서 마지막 수업에서 이것을 다룰 것입니다

여기서 이것은 이벤트 리스너의 일종입니다 그래서 이것은 들어올 것입니다 깊이가 있지만 나중에 이해할 수있는 것은 버튼이 클릭하면 특정 일을하고 싶습니다 응답 상자에서 값을 가져 와서 열어 보겠습니다 우리가 나란히 비교할 수 있도록 나타난다

그래서이 줄 위의이 줄은이 오른쪽을 가리킨다 D 우리가 그것을 선택했습니다 Val Val 그것은 우리에게 대답을줍니다 우리가 질문을 알고 있기 때문에 죽은 전자는 당연히 인도입니다 현실 세계에서 예를 들어 술은 일단 당신이 그것을 만들고 나면 그럴 것입니다 당신은 그것에 다른 연산들을 추가 할 것이고 만약 그 대답이 우리가 당신의 대답이 정확하다는 것을 표시하고자하는 결과를 수정하십시오

대답이 정확하지 않습니다 대신 span을 사용하여 HTML을 표시하고 싶습니다 당신의 대답이 틀렸다는 것을 말하는 붉은 색의 스타일 텍스트를 사용하여 정답을 표시하므로 파일 텍스트를 사용하게되었습니다 및 HTML은이 예제에서 모두 3 가지이므로 신속하게 브라우저가 어떻게 작동하는지 확인해 주시고이 캘커타에게 답을 알려주십시오

구문 오류가 발생했습니다 제출 된 것으로 보입니다 그냥 빨리 고쳐서 여기가 끝났다고 해 알았어,이게 바로 캘커타를 타이핑 하자고 고쳐야 해 그래서 우리는 잘못된 대답의 경우에 당신이하기를 원했던 것처럼 당신의 대답은 올바르지 않은 권한이 여기에 표시되고 답변 태그는 답변입니다

표시된 HTML이 제대로 제작 되었다면 보이지 않게되었습니다 콘텐츠가 시작되기 전에 콘텐츠가 포함되어 있지만 지금은 콘텐츠가 있습니다 안쪽으로 기울여 답을하면 올바른 답을 찾아 봅시다 리로드를 수정하고 델리에서 입력하면 답변이 맞다고 말할 수 있습니다 이것에 덧붙여 당신은 실제로 앞에서 일어나는 돔 조작을 볼 수 있습니다

다리로 눈을 감았 으면 여기에 주목하면 결과가 비어 있습니다 그리고이 부분을 계속 지켜 보셨습니까? 이것은 존재하지 않습니다 다시 해 보겠습니다 비어 있습니다 아무것도 없습니다

그 안에 내가 매일 입력하고 난 다음 갑자기 작은 애니메이션이 있습니다 크롬 개발 도구에 의해 잠시 동안 깜박임을 볼 수 있습니다 JavaScript와 본질적으로 관련이 없지만 당신이 볼 수있는 효과는 돔이 조작되었다는 것을 볼 수 있습니다 눈앞에서 효과를 발휘하면 우리가 양쪽 모두가 영향을받는 것을 보았던 이래로 잘 섹션을 여기에서 관찰해라 이제 다시 보자

두 사람 모두 영향을받는 결과를 보았다 뿐만 아니라 대답을 할 수 있습니다 나는 그것이 우리가 할 수있는 것과 똑같은 것에 대해서 이야기하는 것을 의미합니다 텍스트 HTML 또는 값을 설정합니다 이제 다른 것은 우리가 추가하거나 제거 할 수 있다는 것입니다

DOM 요소는 매우 강력하여 HTML을 실행할 수 있습니다 HTML이 제공된 후에 지금까지 우리가 한 일은 우리가 만든 것입니다 HTML 문서이며 P 태그를 더 추가 할 수없는 것처럼 수정되었습니다 그것에 더 많은 dev 세금 그러나 페이스 북의 피드 같은 것을 생각해 봅시다 두 번째로 계속 무한한 피드 또는 소셜 네트워크 피드 중 하나입니다

아래로 스크롤하면 절대 끝나지 않으므로 끝이 무한합니다 근본적으로 페이스 북은 div 태그 또는 기사를 더 많이 추가하고있다 또는 게시물하지만 그것은 본질적으로 HTML 코드이며 계속 추가됩니다 추가 및 추가하여 무한한 목록을 생성하므로 계속 시작됩니다 자바 스크립트가있는 JavaScript를 통해 Dom을 만들고 계속 유지합니다 피드에 무한히 추가 한 다음 몇 가지 방법을 사용할 수 있습니다

앞에 추가하기 전에 이렇게하기 때문에 모든 작업이 앞에 추가됩니다 다른 방법으로 코드에 들어가서 각각의 코드를 실제로 볼 수 있도록하자 더 이상 필요가 없기 때문에이 부분을 주석으로 처리하겠습니다 좋아, 나는 행복 할거야 그래서 이것을 다음과 같이 제거합시다

그리고 여기이 곳으로 가져 가자 좋아, 내가 한 것은 내 웹 페이지에서 4 개의 상자를 만들었습니다 잠시 후에 그걸 네게 보여줘 네 번 상자가있어 추가 및 추가하기 나는 각 함수의 예제를 보여주기 위해 이 상자들 각각은 여기에 있고 스타일링은 끝났습니다

어딘가에 그래, 그래서 색상 상자가있는 무게를 가지고있다 높이에는 경계 여백이 있고 그 다음에는 타이어에 후 타이어가 있습니다 그것은 색상 그래서 우리가 지금은 각 상자에 주어진 색깔이 주어집니다 이벤트를 클릭하면 이벤트 자체를 추가합니다 다시 div 태그가 될 것입니다 이렇게하면 다른 책이 될 것입니다

상자 중 하나가 데모의 목적을 위해 다른 상자를 추가합니다 심지어 다른 상자를 제거하여 한 상자에만 집중할 수 있습니다 그래서 나는이 상자 하나와 상자에 대해 언급 할 것이다 첨부하여 클래스를 가질 예정이며 색상이 될 것입니다 노란 그래, 네가이 특별한 물건을 보았다면 그것에 붙어있어

click을 다시 클릭하면 또 다른 하나가 수직으로 나타나는 이유가 발생합니다 이 점이 CSS의 문제입니다하지만 우리가 Dom을 보면 우리가이 div 태그를 가지고있는 Dom에 집중하십시오 그 특정 div 태그 안에 붙입니다 그래서 우리는이 텍스트 뒤에 상자가 올 것입니다

div 태그는 div 태그 내부에있는 다른 태그입니다 점을 추가 한 후 점을 선택하면 점차 계속 추가됩니다 계속 추가하여 계속 추가해주세요 계속해서 다시 보여 드리겠습니다 DOM 그래서 그것 dev에 HTML 태그를 보자

내가 추가하고 싶었던 사실이 실제로 추가 된 후에 추가되었습니다 예를 들어 실제로 이렇게 해보자 좋아, 다시 우물 오른쪽에 추가됩니다 그래서 바깥쪽에 있지 않다는 것을 기억하는 것이 매우 중요합니다 이것을 제거하고 그 전에 어떤 일이 일어나기 전에 가자

다시 전에 우리는 방금 전에 본 것처럼이 방법을 이전에 가르쳐야 할 것입니다 슬라이드와 무슨 일이 벌어지는 지 보자 그래서 지금은 이것 앞에 추가된다 전에 우연히 일어나기 전에 여기서 무슨 일이 일어나는지 보자 지금은 상자 밖에있어 더 이상 안에 있지 않습니다

텍스트를 입력하면 초보자에게 혼란을 줄 수 있습니다 지정된 요소가 올바르지 만 그 후에는 가지고있는 태그 내에서 태그의 바깥 쪽에서 선택하기 전에 다음 태그로 이동하십시오 뒤집다 그래서 upend는 다시 그것을 뒤엎고 화가는 꽤 많이 뒤따를 것이다 현재 보류중인 색상 상자 내에 추가되는 것과 유사합니다 원래의 dev 태그 안에 정의는 지정된 요소에 마지막 자식 요소를 추가합니다

그래서 그것은 하나의 자식으로 계속 추가됩니다 앞에 붙이고 이것을 음소거 해제합니다 요소가 해결되기 전에 첨부 된 prepend 필을 위해 이것에 부모를 추가하십시오 특정 요소 나는 그것이 분명하다는 것을 알기를 바랍니다 추가하려는 태그에 추가 할 특정 태그 외부 펜던트가 있기 전의 기본 차이점 그래서 우리에게 유용한 또 다른 매우 유용한 jQuery 메서드 우리의 HTML Dom에서 속성과 속성을 조작하는 것은 attr 속성입니다

메소드를 사용하면 값을 가져 오거나 태그의 값을 설정할 수 있습니다 또는 이미지 태그 또는 그 어떤 문제라도 시간의 종류가 아닌 하나의 종류 유용성에 관해서는 링크 목록이 있고 어떤 조건에 따라 다른 것으로 바꾸고 싶거나 원하는 것을 원한다 그것을 다른 것으로 바꾸어서 예제로 시작하자 태그 전문가라고해도 좋아, 여기 목표는 공백 ~이다 yahoo

com Yahoo 여기에 버튼이 있다고 가정합니다 IIT는 무언가입니다 링크 수정이라고 부르 자 그래서 우리는이 모든 코드를 사용할 수 있습니다 거기에 우리는 물고기를 쓸 수 있습니다 예

고민 도트 클릭 기능 그리고 이것들은 모든 속성을 찾았습니다 모든 a 태그와 타겟을 측면에 설정합니다 무슨 일이 일어나는지 보자 진정한 표적은 비어 있지 않습니다 세포입니다

이 yahoocom을 클릭하면 바로 눈앞에서 바뀝니다 이 속성이 자체적 인 경우 대상 속성이 변경되고 심지어 이것이 자아였습니다 그들은 둘 다 바꾸기 위해 이것을하고있다 네가 할 수있는 또 다른 일은 먼저 값을 얻을 수는 있지만 목표는 그냥 처음으로 콘솔 점입니다

이 값들을 기록하고 우리가 얻는 것을 볼 것 바로 첫 번째 경기가 있습니다 실제로 빈 상태로 만들어 봅시다 어떻게되는지 봅시다 두 가지 종류의 가치가 있다면 링크를 수정하고 다시 우리는 스스로를 얻는다 그래서 나는 그것이 처음의 것을 고를 것이라고 생각한다

첫번째 경기에서 여러 경기를 골라서 조건 값이 목표 값 프로토콜 인 경우 태그를 가져와 속성을 설정하십시오 – clack 그래서 당신은 그것을 공백으로 표시한다는 것을 볼 수 있습니다 마지막으로 설정 했으므로 마지막으로 설정하지 않았습니다 괜찮아 맞아 미안해

둘 다 설정하고 비어 있다면 그래서 여러 경기가있을 경우 그렇게 될 것이기 때문에 이것은 작동하지 않습니다 처음에 멈추십시오 처음에 멈추고, 그렇지 않을 것이기 때문입니다 공백으로 찾는다 또는 우리가 HTML 태그를 배웠기 때문에 우리가 말할 수있는 다른 것을 할 수 있습니다

우리가 볼 수있는 점 달러를 말할 수 있거나 우리가 할 수있는 것은 우리가 통제를 할 수있다 점을 찍어서 실제로 선택했는지 확인하십시오 우리는 이것을 클릭했다 이걸로 본질적으로 우리에게 준다 두 가지 모두를 시도해보고 대신이 결과가 무엇인지 살펴 보겠습니다

이 조건이 설정되어 있지 않으므로 첫 번째 값만 반환합니다 자체의 문서가 있더라도 사실이므로 매우 중요합니다 우리가 attr을 다루고 있다는 것을 기억하십시오 그것을 사용하는 무언가는 오직 첫 번째 것에 갈 것이지만 만약 당신이 설정한다면 그것을 사용하는 무언가는 일치하는 모든 요소를 ​​설정합니다 바깥 쪽에서 했는가? 그렇지 않더라도 고정 될 것이다

당신이 가치를 얻었을 때 각각에 대해 개별적으로 지금은이 중 하나의 위에 사용할 수있는 다양한 방법이 있습니다 속성을 제거하여 선택한 요소에서 속성을 제거합니다 it 어떤 요소가 특정 클래스를 가지고 있는지 검사하는 클래스가있다 클래스를 추가하고 있지 않습니다 거기에는 토글 잠금 장치가 있으므로 제거 클래스가 있습니다 clasp은 기본적으로 클래스가 존재하는지 여부를 확인합니다

그것이 존재하는 경우에 그 때 그것을 제거 할 것이다 추가는 친절한뿐만 아니라 소품이다 jQuery 16에 도입 된 attr 메소드는 내부적으로 소품 (prop)을 호출하고 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다 매쉬 된 요소들로 인해 우리는 그것이 매쉬 된 요소 세트의 첫 번째 요소 또는 하나 이상의 속성 설정 모든 측정 요소에 대해 이것이 동작이 어디에서 오는 것인지를 나타냅니다 왜냐하면 attr은 내부적으로 brop prop를 호출하기 때문에 매우 명시 적으로 말합니다

여기서는 첫 번째 요소에 대한 속성의 값을 가져옵니다 매쉬 한 요소 세트의 첫 번째 요소 또는 일반 속성의 집합 현저하게 다른 모든 마스터 요소에 대해 이 예제에 대한 몇 가지 예제를 신속하게 실행 해 보겠습니다 그리고이 방법들 각각은 빠른 데모 용으로 좋습니다 속성을 제거하기위한 ID가 있다고 가정 해 보겠습니다 어떤 이유로 ID 속성을 제거하여 작업을 수행 할 수있게했습니다

이런 식으로 당신은 attr을 제거 할 수 있다고 말할 수 있습니다 우리는 ID를 부여 할 수 있습니다 그것을 제거하든 그렇지 않든간에 현재 우리는 내 반지를 아이디어로 수정할 수 있습니다 우리가 HF를 제거하라고 말하면 한계가 제거됩니다 그것은 리프가 제거되었습니다 링크를 볼 수있는 가장자리 스트레스가 없어 지금 참조하십시오 그것도 대상을 제거하는 그들은 제거됩니다 다음에 클래스가 있으므로 클래스 이름을 전달해야합니다

그러면 우리가 칼라 상자라고 부르면 오스카라고 부릅니다 우리는 다음과 같은 클래스를 가지고 있습니다 우리의 클래스로 사용할 수 있도록 클래스를 추가하거나 클래스를 제거하겠습니다 나는 후에 수업을 삭제할거야 고든 링크라고 불리는 클래스의 추위 간단한 시연 우리는 그것을 전화 할 것입니다

이미 존재하는 것을 제거함으로써 금을 얻습니다 그래서 우리는 그것을 가지고 있는지를 점검 할 것입니다 수업이 끝나면 사실로 밝혀지면 수업을 취소 할 것입니다 후에 우리는 클래스를 추가하려고합니다 콜드 링크는 가능한 한 시도해 보겠습니다

이미 Google이 대표하는 방식에 약간의 차이가 있음을 확인하십시오 여기에 CSS가 변경되었습니다 클릭하면 내 링크가 수정됩니다 가버 리고 Colden 링크 수업이 적용되었습니다 나는 실수를했습니다

스타일 한 예 맞춤법 실수를 했어 지금 시도해 보자 내가 하나를 사용하고 있기 때문에 두 사람 모두에게 주어졌다 바로 클래스와 모든 것을 추가하고 있으므로이 작업을 수행하지 않는 것이 좋습니다 대신에 그들이 이렇게 좋아하는 것으로 선택한 다음 이동한다고 말합니다 횃불 후 수업을 위해 유리를 빨리 제거 할 때 유리를 골든 링크에 추가하십시오

그래서 우리는 Google a 태그에만 그것을 추가하려고 시도하고 야후는 아닙니다 태그를 선택했기 때문에 모든 유형의 금에 추가 할 수 있습니다 우리가 클래스를 제거한 후에 달러 점을 말한 다음 그것의 또 다른 클래스와 그것은 우리가 할 수있는 다음번에 수정 된 okay입니다 달러 토글 클래스 그래서 지금 우리가 말하고있는 요소는 수업 후 그것을 추가하지 않는 것들을 제거하십시오 그래서 당신은 하나에서 다른 것으로 전환하는 방법을 볼 수 있습니다

우리는 또 다른 것을 추가 할 수 있습니다 다른 하나는 황금 링크라고 부르지 않습니다 황금 링크는 황금으로 연결됩니다 또 다른 하나는 total plus color box라고 말하는 것입니다 여러 효과를 함께 묶어서 이제는 완전한 전환점이되었습니다

야후에 구글이 남자에게 물어 보자 그래서 당신이 기숙사를 알면, 나는 이것을 할 수있는 때마다 변화하고있다 이것이 계속 일어날 횟수 내가 직접 해본 예에서 볼 수있는 것처럼 슬라이드로 돌아가 보겠습니다 방금 약간 다른 예제를 따를 것입니다 아마도 시도해 볼 수 있습니다

당신의 끝에서 나가서 결과를 보거나 내가 준 예제를 시험해 볼 수 있습니다 이제 또 다른 하나는 복제하고 또 다시 매우 유용합니다 복제본을 정렬 할 수 있습니다 요소와 당신은 그것을 삽입하거나 전에 또는 기본적으로 무언가를 할 수 있습니다 복제하고자하는 특정 링크를 가정 해 보겠습니다

HTML 태그 그래서 이것이 당신을 돕는 것입니다 링크를 제거하고 이것을 제거합시다 이것도 제거해 보겠습니다 우리가 할 일은 점을 찍었습니다 알았어

어쩌면 우리가 그 후에 삽입 될 수 있도록 삽입해라 태그 자체에 대해 살펴 보겠습니다 그렇다면 왜 그런 일이 일어 났을까요? 첫 번째는 모든 전자 태그를 선택하는 것입니다 그들 모두를 포함해서 나는 IDE를 창조자 IDE 또는 마스터 및 해시 태그 마스터 또는 복제 말할 수 있습니다 다운 즈 나는 이것을 heath clones 후에 말 할 수있다

이제 해시 태그 대출 후에 삽입됩니다 그것이 이것에 관해서 일하는지 또는 가려 지는지 보자 괜찮아요 작동하지 않는다면, 추가 작업이 있는지 살펴 봅시다 오 맞아요

그래서 그 후에는 효과가 없습니다 추가를 계속하고 다른 하나가 있다고 가정 해 보겠습니다 그것에 설정된 이벤트의 종류와 그것에 대해 말한 어떤 종류의 데이터 그런 다음 복제본을 설정해야합니다 기본적으로 진리의 논리 값을 전달해야합니다 이벤트를 복사하는 것은 잘못된 것입니다

그렇다면 버튼을 사용하는 것입니다 복사하거나 상자 중 하나입니다 이것은 우리가 방금 만든 것이며 시도하는 것입니다 그 상자를 복사하고 심지어 후속 상자가 그것에 응답하기를 원한다면 그 상자들도 이벤트를 가질 수 있도록 클론을 true로 설정해야합니다 이것을 시도해 봅시다

방금 전에해야 할 일이 있음을 알았습니다 덧붙여서 지금은 상자 안에 들어 있지 않은 상자를 추가해야한다고 생각합니다 우리가 이것을 복제하고 우리가이 복제물 뒤에 삽입해야한다는 것을 보아라 우리는 우리의 컬러 박스 후에 그것을 삽입하자 이 상자를 클릭하면 아무 것도 나타나지 않습니다

그들은 다른 상자 세트를 클릭하면 나를 보자 재 장전 해 보겠습니다 하나의 상자를 여러 개 축소하면됩니다하지만 아무거나 클릭하면 다른 복제 상자는 아무 일도 일어나지 않습니다이 상자를 클릭하십시오

이 상자는 아무 것도 없습니다 그런 다음 나는 이것이 사실이라고 말할 필요가있다 지금 일어날 일은 두 상자 다 이 중 하나를 클릭하면 복제 할 수도 있습니다 이 작업을 복제하면 이벤트 핸들러를 추가 할 수 있습니다

다시 한 번 미안해 기다려 지금 이것은 이것들이 바깥쪽에오고있는 바로 후에 온다 다음 요소로 넘어가므로 요소를 이동시키는 두 가지 접근법이 있습니다 기숙사는 다른 요소와 관련하여 일치 요소를 배치하고 다른 하나는 마스터 요소에 상대적으로 요소를 배치하므로 하나 기본적으로 일치 요소를 가져 와서 상대적으로 배치한다는 것입니다

다른 요소로 이동하거나 요소를 대체하여 요소를 대체 할 수 있습니다 마스터 요소를 기준으로 상대 위치에 추가하고 추가 할 위치입니다 사진은 두 사람 사이에 약간의 차이가 있습니다 jQuery는 우리에게 달러 점으로 불리는 매우 유용한 것을 제공합니다 각각은 자바에서 N이나 for 루프를 대신 할 수있다

스크립트를 작성하고 실제로 우리에게 도움을줍니다 이것에 대한 시연과 이것이 작동하는 방식은 내가 let의 배열을 정의하자 num list가 1 일 때 쉼표 2 쉼표 3 쉼표 4 쉼표 5 6 그리고 나는 각자에게 달러를 말할 것입니다 나는 마비 함수를 전달할 것이고 인덱스가 될 것입니다 값에서 우리는 콘솔에 로그 인덱스와 값을 알려 주기만하면됩니다

콘솔에서 결과를 보자 0은 1 1 2 2 3 3 4 4 & 5 5 & 6 그래서 I의 초기화를 사용하지 않고 눈의 특성을 볼 수 있습니다 제로 증가 감소 연산자와 같습니다 그냥 루프 할 수 있습니다 모든 것을 생각해보십시오

여러분이 반복하고있는 인덱스와 값을줍니다 특히 당신이 어떤 종류의 기능을 수행하고 있다면 꽤 유용 할 수 있습니다 프로그래밍 및 자연스럽게 그것은 또한 당신이 링크 집합을 통해 반복 수 있습니다 요소들 어떤 종류의 목록 요소들이라면 매우 일반적으로 그럴 것입니다 원한다면 Dom 또는 문서 객체 조작의 컨텍스트에서 유용합니다 동맹국의 전체 목록에 걸쳐 루프를 가정하면 다음이 슈퍼가 될 것입니다 유용하므로 빨리 시도해 보도록하겠습니다

목록을 가지고 있습니다 그것을 여기에 놓아두면 내가 이걸 음소거하게 내버려둬 내가 할 모든 동맹국을 선택하고 점을 부를거야 그것들과 나는 각각 그것과 나에게 색인과 요소를 줄 것이다 확인하는 것은 요소 첫 부분이다

그냥 해보자 각 요소 내부에 무엇이 있는지 그리고 추가 조치를 취하십시오 알았어 우리가 먼저지고 나서 가져 가자 추후 조치 맞아, 우리는 Li 태그 하나 하나를 얻고있다

거기에 jQuery 함수가 있는지 살펴 보겠습니다 당신은 괜찮은 것들을 계속 시험해 볼 필요가 있습니다 중요한 것은 실패가있을 것입니다 일하지 않고 있지만 실망하지 마라 네가 그것이 무엇인지 생각한다면 말이다

빨리 두 번 시도해보십시오 한 가지가 작동하지 않지만 뭔가 있습니다 그렇지 않으면 그게 당신에게 당신이 다루는 것을 더 잘 이해하게 해줍니다 어떤 타입의 물건을 당신이 여기에서 극복하고 있는지 보자 그게 목표 야

그리고 우리는 여러 가지 일을 할 수 있습니다 그래서 이것을 다루는 다른 방법은 자바 스크립트에서이 변수를 사용하는 것입니다 우리가 여기서 얻은 것을 구글 야후와 아마존으로 가져 가자 패스 클래스 황금 링을 확인할 수 있습니다 각 요소마다 그렇게하지 못하게한다

토글 버클을 해보자 그래서 각 요소는 아그라 치실을 돌 봅니다 무슨 일이 일어 났는지 봅시다 우리는 각각의 리가 다루는 UL이 골든 링크를 얻습니다 토니 치실 물론 태그와 자체는 파란색으로 표시되어 있으므로이를 무시합니다

누군가가 여전히 파란색으로 보이고 노랗게 보이지 않는다는 것을 혼란스러워합니다 이것은 우리가 각각의 루프와 본질적으로 우리는 나무의 다리에 클래스를 말하는 것을 끝내었다 또 다른 하나는이다 특정 시간에 일치하는 요소 집합에서 선택하는 EQ 우리가 단지 우리가 그것을 두번째 것에 추가하기를 원한다고 덧붙이고 싶다고 가정하자 첫 번째 것이 아니기 때문에 우리가 이것을 할 수있는 방법은 이것을 잊어 버리는 것입니다 이것은 기본적으로 당신이 할 수있는 일 대신 전체를 반복하는 것입니다 이런 식의 코드를 추가 할 수 있다는 것과 우리가 dot dot에 equals라고 말할 수 있다는 것입니다

플러스 나무 링크 그래서 그것은 자연스럽게 지금은 제로 인덱스가되는 것을 선택하게되었습니다 우리는 그것을 사용할 수없는 색인에 설정하면 0을 선택합니다 아무것도하지 않으므로 요소 목록에서 특정 항목을 선택할 수 있습니다 우리가 일치 할 수도 있으므로 실제 필터링중인 필터 역할을합니다 우리가 만지고 싶지 않거나하고 싶지 않은 다른 요소들을 빼내고 싶지 않다

이제 필터를 호출 할 수있는 다른 함수가 있습니다 자체 및 선택기를 전달할 수 있으므로 점 EQ는 기본적으로 지정된 값을가집니다 인덱스 그래서 당신이 배열과 같은 정렬 사실을 고려해야합니다 여기에 반환되는 배열과 같습니다 우리는 말하고 있습니다 배열의 두 번째 요소 만 필요하거나 특히 하나지만 일치하는 기준이 조금 다르다고 가정 해 봅시다

나는이 동맹국을 가지고있는 동맹국을 선택하고 싶다 클래스는 모든 합금을 걸러내는 것이었다 중간 정도의 수업을 가지므로 가정 해 봅시다 중간에 스타일을 추가한다고 가정 해 봅시다 우리는 하늘색으로 빛깔이 나고 일단 우리가 그것에 도달하면 우리는 황금 링크의 버클을 전환 할 수 있습니다

우리가 몇 가지 문제에 부딪 쳤던 것처럼 나는 내가 원하기 때문에 점을 그리워한다 쓰기를 선택하면 EQ를 사용하여 선택할 수 있습니다 하나지만 집합 내에서 여러 개를 선택하려면 원한다면 앞으로 그리고 당신은 두 개를 선택할 필요가 있습니다 그러면 호수 필터를 사용할 것입니다 EQ로 특정 기준을 지정하는 모든 요소가 고정 된 곳 한 번에 하나의 색인 만 가져올 수 있기 때문에 하나의 요소가 필요합니다

여기에 어떤 인덱스가 있는지 알고 싶으면 필터가있는 것입니다 헤이 나에게 중류 계급을 가진 모든 요소를 ​​주도록 조건을 설정한다 이 경우 여러 요소가 될 수있는 요소를 설정합니다 그때 어떤 것으로 확인 된 것이 있습니다 따라서 CSS를 설정하거나 추가 작업을 수행 할 수 있습니다

이 경우 자손을 검사하고 일치하는 요소를 찾으면 피고인 측에서는 어떤 일을 할 것입니다 그래서 여기에 예를 들면, 만약에 우리 아이가 차례로 다른 세트의 성게 타일을 가지고 있다면, 나는 아마도 그것에 CSS를 설정하고 싶습니다 아마 CSS를 설정하고 싶을 것입니다 이 예제를 실제로 사용해 보도록하겠습니다이 예제를 제거하고 마지막 하나가 똑같지 않다면 다른 것과 똑같습니다

너는 그 안에 들어가서 말한다 그것은 그들이 뭔가를 말합니다 그래서 많은 시간 웹 사이트는 그 나라에 기반한 웹 주소를 가지고 있습니다 그들은 아마존 프랑스 아마존 도트를 제공하고 있으므로 가정 해 봅시다 아마존이라고 불리는 또 다른 하나는 당신이하고 싶은 것이 우리가하고 싶은 것입니다

그것을 확인 ul 괜찮아요 리이 ul 그때 내가있다 밝은 회색으로 배경색의 속성을 설정하려고합니다 또는 그냥 스타일 밖에서 스타일을 만들어 보자 배경색을 설정할 수있다 회색처럼 우리가 몇 가지 문제를 결정한 것 같아

내가 CSS로 시도하자 그래서 우리는 그것을 설정했지만 이 하나의 작품은 아마도 배경색 일 것입니다 속성이 ul 태그에서 작동하지 않으므로이 방법이 작동하며 배경을 설정했습니다 이 테두리로 지금은 배경색이 누구인지 시험해 봅시다 나는 어딘가에서 철자법 실수로 다시 시도하게했다

이 색깔이 똑같은 색깔을 시도해 보도록하겠습니다 UL에 적용되지는 않지만 Li 레벨에서 적용됩니다 자녀에게 신청하는 것은 부모님에게도 적용되는 것이지만 그것을 필터링하는 것은 우리가 어떤 특정한 요소 우리가하지 말아야 할 것은 지금부터 공격하기를 원합니까? 마스터 요소가 매우 간단해서 모든 것을 위해 이것을하고 싶다고 가정 해 봅시다 중간에 있지 않으므로 반대가 아닙니다 처음부터 세 번째가 선택되고 다른 것은 선택됩니다 당신도 충분히 알기 때문에 jQuery는 데이터 API를 지원합니다

html5에서 소개되어 데이터 속성을 설정하거나 데이터 속성을 가져올 수 있습니다 당신이 설정 한 HTML로부터 예제를 보도록하겠습니다 내가 너에게 조금 설명 해줄거야 그래서 내가 여기에 2 개의 버튼이 하나있다 데이터를 개발팀에 전달하고 다른 팀원은이를 제거하고 이러한 클릭 이벤트 테스트 객체 대신에 동일하게 설정된다 데이터 그들은 그것을 하나님 200으로지지하고 우리는 하나님의 데이터를 얻고 자합니다

우리가 얻은 것을 보아서, 당신이 여기있는 방식대로 발전하지 못하게하십시오 이 특정 개발에 대해 이야기하면서 뭔가 추가해 봅시다 ID 태그를 추가하여 예제를 작성해 보겠습니다 그런 식으로 사용하십시오 다른 하나와 혼동하지 않는다

당신 이 특정 div 태그에 대한 데이터를 설정해야합니다 이 같은 객체를 전달한 다음 버튼을 클릭해도 그것과 관련된 데이터 그래서 이렇게하자이 0을 제거하자 이 버튼을 클릭하면 효과가 발생했습니다 콘솔이므로 데이터 속성을 사용할 수있는 방법입니다 여기에 여러 가지를 설정하는 데 사용하십시오

사실 내가 항목을 말한 다음이 일을하고 나서 할 수 있다고 가정합니다 항목에 대해 다시로드 할 때이 항목을 이동 한 다음 두 항목을 모두 표시합니다 그 중 200 장이 카트에, 300 항목이 다시 jQuery로 돌아옵니다 표시 / 숨기기 등의 효과를 제공하며 Dom 요소를 보이거나 숨겨서 그렇게 할 수있는 요소를 제거 할 수 있습니다 당신이 보여줄 수 있고 숨길 수있는 요소들을 추가하십시오

이것은 매우 무언가입니다 매우 일반적으로 사용되며 두 매개 변수가 필요합니다 함수와 그것들은 두 가지 매개 변수를 취합니다 하나는 얼마나 천천히 속도에 관한 것입니까 또는 빨리 또는 바로 표시하고 싶거나 표시하지 않으려는 경우 그들이 표시되거나 숨겨진 후에 가정 할 경우에 대비하여 함수도 사용합니다 당신은 그것이 보여지는 요소에 기초하여 다른 것을하기를 원한다

숨겨진 코드가 실행될 수 있도록 콜백 함수가 제공됩니다 요소가 표시되거나 숨겨진 후에 실행해야하는 작업 내가 할 일의 예는 상자에 HTML을 설정하는 것이다 우리는 그렇게 했어 상자에서 해보자 모든 상자를 보여줄거야

네 용기 한 잔주고 그들은 라인 락 (line-lock)을 없애고 용기를 줘야한다 비어있는 채로 두지 않았습니까? 채우기가 필요한지 살펴 보겠습니다 우리의 페이지가 지금 보이는 것처럼 우리 페이지는 이렇게 보입니다 버튼을 제거하겠습니다 태그를 사용하여 데이터 예제에 사용 했으므로 이제 쇼 상자의 ID를 버튼에 추가해 보겠습니다

상자 숨기기 버튼 그들 안에서 어떤 공간을 만들어 보자 어떻게 이끌어 가면서 포기해야하는지 보자 나는 용감한 소년이다 여기도 괜찮아 이제 네가 여기에 두 개의 단추가있어

스크립트가 이것을 가져 와서 그것을 어딘가에 옮겨 봅시다 자바 스크립트를 스트레칭 해 보겠습니다 이 상자들은 이벤트를 다시 클릭합니다 상자 도트 클릭 기능이 준비되었습니다 이제 우리가하고 싶은 일은 그 전에는 숨기기 상자에 대해서도 정의 해 보겠습니다

말하자면 색상 상자 클래스가있는 것입니다 그것을 숨기고 당신은 유사하게 색깔 상자 종류 쇼에 무엇이든을 말할 것입니다 오, 우리가가는 것처럼 보이지 않는 것 같아 그 일이 왜 일어나는 지 알아 내 ID 태그를 그리워 매우 중요한 일종의 어리석은 실수로 코드가 작동하지 않는 경우를 대비해 보자 태그를 놓쳤거나 다시 시도하지 마라 상자가 숨겨져있는 상자입니다

상자가 숨겨져 있는지 확인하십시오 상자는 지금 확실합니다 이것은 갑작스런 무릎 덩어리의 일종의 반응입니다 들어오고 나가는 대신에 우리가 일종의 점차적으로 일어나는이 동작에 대한 느린 동작이므로 500을 추가합시다 각자에게 밀리 초 단위로 우리가 상자를 숨기고 있습니다

차이점을 봅니다 갑자기 사용자 친화적 인 것처럼 보입니다 천천히 그리고 그것을 2,000으로 만들자 그런 다음 그 속도가 느려지므로 그 움직임은 매우 부드럽습니다 아주 좋았던 사용자는 이전과 같이 각 oaktree 작업을 완료하지 않았습니다

나타나고 사라지는 것과 마찬가지입니다 물론 다른 것은 지금입니다 우리는이 두 버튼을 결합하여 토글 상자 또는 플레이를 가정 해 봅시다 버튼을 토글 박스라고 부르는 버튼은 이제 다른 이벤트를 추가하겠습니다 우리가하려고하는 것은 두 개의 상자를 두 개의 다른 상자로 정의하는 대신 기본적으로 토글 토글을 수행 할 버튼 jQuery는 기본적으로 두 가지 중 하나이므로 숨겨져 있습니다

그것들이 보여 진다면 그것을 숨길 수 있습니다 그래서 토글을 해봅시다 그것을 회전 시키자 오른쪽 버튼을 클릭하면 톰 레벨 그들은 개에서 삭제되지 않습니다 그들은 여전히 ​​존재한다

다시 한 번 표시 : none 속성이 추가됩니다 모든 것이 있고 우리는 토글에서 자바 스크립트를 통해 이것을 수행하고 있습니다 기능을 수행하면 페이드 아웃이 페이드 아웃하여 슬라이드로 이동하는 다른 기능이 있습니다 아래로 슬라이드 위아래로 슬라이드 토글 어떤 종류의 애니메이션을 가지고 각자의 취향에 따라 효과를 시험해 보도록하십시오 어떤 영향을 미치므로 대신이 대신 음소거하지만 지금은 대신 보이고 숨기는 것은 페이드 아웃을 할 것이고 우리는 페이드를 할 것입니다

색상 상자의에 이제는 의도는 상자가 페이드 인 또는 페이딩 효과가 있음을 알 수 있습니다 이것은 모션에 주목하면 이전에했던 것과는 다릅니다 그것들을 숨기면 나는 다시 그것을하면 매우 다르다 그것이 왼쪽으로 가면서 사라지는 것을 보아라 그러나 그것은이 지역에서 출발한다

그리고 이것은 이것과 매우 다릅니다 이제 이것들은 물론 미묘한 차이점이지만 프론트 엔드는 약간의 차이점을주의 깊게 살펴보면 큰 차이를 만들 수 있습니다 귀하의 웹 사이트에서 사용자 인터페이스 및 사용자 환경에 미치는 영향 페이드 인 및 페이드 아웃 대신 피드도 있습니다 객체의 불투명도를 점차 변경하여 객체로 변경합니다 특정 불투명도 그래서 우리가 의미하는 바는 그것이 여전히 존재한다는 것입니다

하지만 불투명도가 줄어들어 이것을 시험해 봅시다 그들은 존재하지만 불투명도가 05이므로 정상적인 경우 1이됩니다 상황 지금도 쇼 상자에서 동일한 작업을 수행 할 수 있습니다 내가이 일을 할 때 일어난다

이미 그곳에 이미있는 대신에 내가 그 반대 일을하고 싶다면 내가 가질 것입니다 이렇게하면 나를 스케이트 해 보자 그러면 나를 시켜라 페이드 아웃으로 스케이트를 타세요 웹 사이트에서 버튼이나 다른 영역에서 볼 수있는 종류의 주 섹션이 활성화되었는지 여부 또는 장애 여부 슬라이드 아래로 슬라이드라는 슬라이드 및 슬라이드 토글이라고도하므로 음소거 해주세요

이들 그래서 슬라이드를 잘 내려 봅시다 위로 슬라이드를하십시오 502 번째 슬라이드를 위로 올려 봅시다 여기도 마찬가지로 슬라이드 위로 이동합니다 아래로 내려 가서 슬라이드가 어떻게 움직이는 지 보았습니다

다시 한 번 다른 종류의 애니메이션 효과이며 이제 슬라이드를 위로 밀었습니다 기본적으로 서랍 슬라이드 위로 슬라이드 아웃하고 슬라이드 토글 기본적으로 슬라이드 아웃 현재 상태에 따라 두 가지 방법 중 하나를 수행합니다 우리는 비슷한 방식으로 그곳에 토글을 사용하고 있었지만 차이는별로 없었습니다 마지막으로 jQuery도 점 애니메이션 기능을 제공합니다 이제 hide show fade in / fade를 참조하십시오

당신이 제공하는 종류의 애니메이션입니다 상자에서 꺼내지 만, 당신이 무언가를 과감하게하기를 원한다고 가정 해 봅시다 너는 상자 크기를 원했던 종류의 애니메이션 효과를 원했다 특정 시간에서 특정 크기에서 특정 크기로 증가하는 상자 그래서 당신은 이것을 현재 애니메이션 상자에 넣고 싶었습니다 250 픽셀이지만 그가 성장하기를 원했습니다

한숨이 들었습니다 20 분의 270 픽셀을 가정 해 봅시다 애니메이션 효과가 도움이 될 수 있도록 효과를 생성하는 밀리 초 너는 그 일을하는 방식으로 네가 원하는 재산이 필요하다는거야 먼저 변경하려는 속성과 변경하려는 속성이 있습니다 우리가 이전에 보았던 콜백 함수는 콜백 함수를 구현하십시오

수행 할 조치 그래서 일부 애니메이션을 추가하고 보자 이것이 어떻게 작동하는지 보자 상자에 애니메이션을 적용하고 버튼을 애니메이션으로 표시 한 다음 추가 된 애니메이션 여우는 애니메이션을 가르쳤고 1 천 밀리 초로 좋아요 클릭 이벤트를 터치해야합니다 그건 바로 버튼 일 뿐이므로 우리는 컬러 박스에서 호출해야합니다

그러나 움직이기 우선 간단한 픽셀을 사용하여 픽셀 너비를 늘리고 싶다고 가정 해 보겠습니다 그게 다야 우리는 아주 천천히 일어나기를 원한다 밀리 세컨드 (milliseconds)는 우리가 어떻게 작동 하는지를 보자 이 특정 줄의 구문에 오류가있는 것처럼 보입니다

좋아, 나는 그것을 함수로 선언하지 않았다 나쁘다 미안해 이걸 시험해 보자 다시 편집하지 마라

예, 코트 사이에 이것을 유지해야한다고 생각합니다 그래서 당신은 아주 천천히 가장 천천히 일어난 일을 아주 천천히 보았습니다 이 시간에 다시 2 ~ 300 픽셀의 시간에 머물러 있습니다 우리가 그것을 위에서 약 40 픽셀만큼 움직이기를 원한다고 가정 해 봅시다 같은 시간에 우리는 절대 위치로 설정되기를 원합니다

그게 효과가없는 것 같아요 대신 마진으로 몰아 가야 겠지요 그것이 심각한 갈등을 일으키는 경우 작동합니다 네 좋아, 그렇게 앉아있을 필요가 있다고 생각해 이제 별을 움직이면 아래로 내려갑니다

이 작업을 수행함에 따라 불투명도를 08로 변경하고 싶었던 동일한 시간 또는 나는 그것을 조금 더 극적으로 만든다고 생각한다 그래서 속성은 CSS에서 원하는 것처럼 여기에서 말하고 있습니다 당신이 정말로 여기에 어떤 애니메이션이 있는지 이해하려고 애쓰면서 애니메이션은 위치 지정을 특정 시간 내에 특정 HTML 태그가있는 것처럼 작동합니다 그래서 이것은 이것이 최종 결과 인 타겟입니다

이것들은 이것이 최종 CSS 속성입니다 당신은 그것에 끝낼 것입니다 당신은 그것이 일정한 양의 시간에 끝나기를 원한다 display 대신에 애니메이션의 속도 : inline-block 디스플레이 : 블록이 많이 변경되지 않거나 인라인으로 시도해 봅시다 if 그들이 정렬되어있는 방식에 중요한 차이를 일으키는 것은 괜찮습니다 그래서 당신이 정말로 일어나길 원한다면 애니메이션이 정말로 내려 오는 것입니다

빨리 당신은 시간을 바꾼다 그러면 그것은 단지 일어날 것이다 우리가 달성하고자하는 목표를 성취하고 싶다면 움직이는 점이 무엇인지를 물론 서로의 위에 여러 애니메이션을 변경할 수 있습니다 움직일 수 있고 그들이 다른 것일 수있는 것보다 더 될 수 있습니다 함께 결합해라

나는 그것이 정말로 무엇에 달려 있냐는 것을 의미한다 당신은 그것을 달성하기 위해 노력하고있다 그래서 유효성 검사를 위해 html5를 사용하면 좀 더 쉽게 얻을 수있다 이러한 기능을 체크 아웃하지 않은 경우에 대비하여 html5로 사용할 수있는 양식 유효성 검사를 체크 아웃하는 경우도 있습니다 그러나 html5 유효성 검사가 실패하므로 기본적으로 수행 할 수있는 작업은 유효성 검사를 수행하기 위해 HTML 태그의 속성을 설정할 수 있지만 때로는 유효성 검사가 실패하거나 어쩌면 매우 관습이 필요하거나 시나리오가 있습니다

그것들을 사용할 수 없다 그리고 그것은 jQuery가 자바 스크립트 단계에 대해 허용하는 곳이다 자신 만의 맞춤 규칙, 규정 및 요구 사항을 사용하여 검증을 수행해야합니다 jQuery 유효성 검사에 대해 먼저 이야기하십시오 값을 양식에서 가져 오거나 양식에서 값을 설정해야하는 경우 당신이 다루고있는 분야의 종류에 기초하여 그것을 할 수있는 다양한 방법들 제가 여기있는 것은 제가 다양한 분야를 포함하는 데모를 설정하고 당신은 각각을 사용하여 변수 값을 얻고 설정하려고했습니다

이 분야들과 내가 어떻게 조사하는지 그리고 내가 어떻게 이야기하는지 jQuery를 얻으려면 이름을 올바르게 입력하면됩니다 변수 이름 나는 이것을 간단히 수행 할 수 있으며 물론 당연한 가치는 없다 내가 여기에 아무것도 넣지 않았기 때문에 사슴 한잔을 넣고 우리가 벌써 Rekha를했을 정도로 와아 참조 그들은 가치를 말했다 Eureka Inc 그래서 이름 상자의 값이 바뀌 었음을 알았습니까? 다시 그래서 너는 내가 이것을 사용할 수 있음을 알아 차렸다 아니면 내가 값을 얻을 수있다 그래서 나는 이것을 망고로 바꾼다고 가정 해 보자

내가 자바 스크립트에서 값을 얻을 수 있다는 점을 잘 알고있다 다음은 hTML이 특별한 필드임을 알 수 있도록 암호 필드입니다 비밀 번호는 비밀 번호가 숨겨져 있으므로 우리가 어떻게 얻을 수 있는지 보자 암호 필드의 값을 설정하여 HTML 필드를 살펴 보겠습니다 HTML이 유형을 암호로 설정한다고 가정 해 봅시다

1 2 3 4 5 6 매우 안전한 비밀번호는 아니지만 데모 용으로 만 사용하십시오 목적과 가치를 얻어야 만한다면 얻을 수있는 방법입니다 텍스트 필드를 선택하는 것만 큼 명확합니다 그것은 당신이 다른 어떤 형태를 사용할 때까지 또는 입력 암호를 ​​사용합니다 선택기는 ID 또는 클래스 일 수 있지만 유형별로 선택하는 경우 입력의 경우 텍스트 상자와 암호간에 약간의 차이가 있습니다

값을 가져오고 설정하는 것은 텍스트를 영역에 적용하는 경우입니다 텍스트 영역에서 멋진 입력을 사용하여 값을 가져올 필요가 있습니다 다음 값을 전달함으로써 라디오 버튼을 커버하자 그래서 여기에 두 개의 라디오 버튼이있어서 재미있어 체크 여부를 확인하려면 is 키워드를 사용하십시오

지금 내가 처음으로 확인해보기로되어 있지 않다면 사실이된다 나는 또한 할 수있다 이 속성을 설정하여 지금 체크해 둡니다 여기의 라디오 버튼은 false로 설정하려고합니다 지금 여기서 일하는 이유는 내가 선택하지 않은 이유입니다

하나는 여기에 두 개의 라디오 버튼이 있으므로 설정하고 첫 번째 세트를 설정하겠습니다 당신 그래서 TDR 대신에 사소한 차이가 있다면 여기에서 사용해야합니다 먼저 꺼내지 말고 도트 속성을 사용하면됩니다 그것을 false로 설정하거나 그것을 사용하여 그것을 true로 설정하고 그것을 사용할 수 있습니다 기본적으로 입력 라디오가 여러 요소와 일치하기 때문에 이것들은 두 개의 라디오 버튼으로 배열과 같은 넷 제로를 사용할 수 있습니다

이 배열의 0 또는 첫 번째 요소에 액세스하여 이제 첫 번째 요소에 도달했습니다 또는 두 번째 라디오 버튼은 사실입니다 지금은 false로 설정하고, 하나는 0으로 설정하면됩니다 다음 체크 박스는 체크 박스에서 다시 값을 얻을 수 있습니다 원하는 경우 입력 체크 상자 속성을 사용하는 확인란 이름에 전달할 수있는 특정 확인란을 선택하면 확인란 이름과 같습니다

잘하고 같은 것을 선택하십시오 그래서 이것을 시도해 봅시다 두 개의 체크 박스가 있습니다 여기서는 먼저 HTML을 살펴 보도록하겠습니다 다른 이름은 그렇게 시도해 봅시다

그래서 입력 체크 박스 값은 HTML에서 자신이 설정하거나 설정하지 못하게하는 것입니다 그래서 첫 번째 체크 박스가 설정되어있는 것을 보았습니다 비슷하게 나는 계속해서 이름을 바꿀 수 있고 나는 각각을 위해 이것을 계속 할 수있다 체크 박스는 이것에 대한 네트워크인지 아닌지를 확인해 보도록하겠습니다 하나는 모두 0으로 놓아 두자고 가정하자

잘 그리고 지금 매시간 나는 처음은 거짓으로 나는 두 번째가 거짓이라는 것을 잠시보고 싶습니다 그리고 이것은 단지 뭔가입니다 이것은 보통 jQuery 코드를 타이핑 할 때 보이지 않을 것입니다 왜냐하면 당신이 가치를 저장하지 않는 한 당신의 예술을 의미하기 때문입니다 이 함수는이 특정 행을 여기 호출하고 이것은 반환 값입니다

지금 당신이 뭔가를하려고하지 않으면 그것에 대해 신경 쓸 필요가 없습니다 그래서 보통 자바 스크립트 나 jQuery 코드를 작성할 때 당신이 그걸 수업이라고 부르는 것을 의미하기 때문에 이것을 보지 못했을 것입니다 그럴 가치가 있다고 생각하는 대신 양식에 숨겨진 필드를 입력 한 다음 coolin 숨겨진 방법입니다 갈 텍스트와 매우 유사하므로 비밀번호 필드를 남겨 두어야합니다 당신 자신의 과제물의 일부로 그것을 시도해 보도록하라 선택 드롭 다운 옆의 숨겨진 부분을 제외하고는 차이가 없습니다

그래서 기본적으로 드롭 다운 버튼과 우리가 주변에서 놀 수있는 방법을 알아 봅시다 그것으로 나는 작은 HTML을 정리할 것입니다 ID로 선택하고 가치가 무엇인지 확인하십시오 아무런 가치가 없으므로 메모가 Google에 알려주므로 가치가 없습니다 특정 옵션을 선택하지 않았기 때문에 값이 이미 있습니다

그래서 아이디어가 선택되었습니다 Kars 우리는 가치를 얻었습니다 값을 설정하여 값을 설정할 수 있습니다 우리가 설정하고자하는 가치 본질적으로이 값을 보면 값이 자본은 2 배가되지 않습니다 B 값은 정확히 같아야합니다

그리고 지금 나는 이것을한다 그렇지 않다면이 경우가 아니기 때문에 그것은 말할 것이다 과민 한 그래서 나는 그것이 일하지 않을 OD를하고 싶은 경우에 어울릴 수 없다 그러나 만약 내가 이것을하면 효과적 일 것입니다 그래서 당신이 정말로 가치있는 것을 볼 필요가 있습니다 value 속성을 사용하여 옵션을 설정하고 option 태그를 설정하려고합니다

당신이 사실 인 옵션의 선택된 인덱스를 얻고 싶다면 드롭 다운을 기반으로하는 양식을 만들고 있다고 가정 해 보겠습니다 특정 일을하고 싶어 그래서 당신은 그렇게 선택된 색인을 얻고 싶다 다시 선택하겠습니다 그리고 우리는 슬레이트 인덱스를 입력하여 Adi가 켜져 있기 때문에 우리에게 3을줍니다 네 번째 숫자가 3 번이지만 인덱스가 0 인 경우로 설정하면 이 값을 2로 설정하면이 값이 1로 변경됩니다

드롭 박스에서 값이 자동으로 변경되므로 값을 설정할 수 있습니다 배정을 사용하고 여기에서 사용하는 가치를 잊어 버리면 당연히 이러한 것들이 입력 유형을 기반으로 수행되는 방식의 약간의 차이 당신이 다루고있는 것은 이것입니다 왜냐하면 선택된 색인 여기에있는 속성이며 입력 상자와 같이 값을 정확하게 설정할 수 없습니다 그래서 점 Val을 다루는 대상에 대해 염두에 두십시오 여러 곳에서 일하지만, 당신이 특정 유형의 입력은 재설정 버튼의 제출 버튼입니다

다시 사용할 수 있으므로 냉각수 서브넷이 제출 버튼을 선택할 것이며 Col deze를 입력하면 재설정 버튼이 선택됩니다 필수 값은 없습니다 그 (것)들 안쪽에 그러나 이것은 기본적으로 더 많은 것을 위해이다 선택자는 여기에 제출 및 재설정 버튼을 선택할 수 있음을 언급합니다 또한 더 많은 조치를 취할 수 있습니다 우리가 따라갈 때 다음 비트가 양식 유효성 검사이므로 지금 참조하십시오

일단 당신이 당신이 전형의 어떤 것을 적용 할 수있는 양식의 가치를 가지고 있다면 문자열 평등 또는 원하는 항목을 확인하는 JavaScript 여기 예제를 살펴보면 간단한 예가 될 것입니다 이름을 확인하고 싶으면 값이 비어 있지 않은지 주소를 확인하고 싶습니다 값이 비어 있지 않고 이메일 값을 확인하고 싶습니다 비어있는 경우를 대비하여 비어있는 경우 다시로드하려는 경우 볼 수 있도록해야합니다 검은 색으로이 특정 필드를 남겨주세요

유효성 검사는 확인란을위한 것이며 메시지가 이렇게 될 것입니다 시연을 위해 체크 박스가 선택한 경우 HTML에 메시지가 설정되고 그렇지 않은 경우에는 오히려 그것은 모폴로지 조건 체크와 비슷한 것입니다 우리가 방금 전에 말했던 개념들에 대한 타당성을 입증하는 것보다 정규 표현식은 이제 매우 중요하며, 당신은 그것들을 발견 할 것입니다 자바 스크립트뿐만 아니라 파이썬 자바와 같은 언어에서도 사용할 수 있습니다 C ++ Ruby는 그 어떤 것도 중요하지 않으며 일반적으로 주문하고 있습니다

확인뿐만 아니라 그들은 매우 중요합니다 그래서 그들은 본질적으로 무엇입니까 아래로 종기가 너무 C 간단한 문자열 일치하는 경우 매우 쉽습니다 오른쪽 빈 문자열을 확인할 수는 있지만 특정 가치는 이메일이거나 그렇지 않은 것이기 때문에 조금 어려워졌습니다 즉각적인 회신이나 내가 빨간색 기호를 추가하지만 그 다음에 보일 것입니다 사용자가 com을 추가하는 것을 잊어 버린 경우에는 예외가 있습니다 그래서 사용자가 리카에서 속도로 강사로 재구성 한 것처럼 당신은 침착 함을 또한 검사 할 필요가있다 그러나 그 후에 이렇게 많은 도메인 이름이있다 그래서 그것에 대해 당신은 갈 수 없으며 나는 기록적인 코드 또는 10을 이미 rakat 또는 10을한다 유효한 전자 메일로 간주하지 말아야합니다

단순한 간단한 결정을 할 때 합병증이 주어진 가치는 전자 우편이거나 아닙니다 정규 표현식이 오는 곳입니다 기본적으로 주어진 문자열 내부의 패턴을 찾는 데 도움이됩니다 패턴이 있는지 여부를 판단하여 인간이 전자 메일을 인식하도록합니다 무슨 일이 있어도 우리는 그것이 가지고있는 패턴을 이해하기 때문에 컴퓨터는 자신이 실제로 알고있는 것을 모르고 그래서 당신은 말할 필요가있다

이봐 요, 당신이 필요로하는 패턴은 문자열이 필요할 것으로 기대합니다 에 패턴이 있거나 가중치가있는 X가 작성되었습니다 언어에 의해 이해되는 특정 문자로 작성된 그것들을 구현하고 그것이 의미하는 것은 모든 언어가 당신에게 정규 표현식의 기능 및 사용할 수있는 기호는 다음과 같습니다 예를 들어 꽤 보편적 인 예를 들면이 캡 문자열 그래서 내 주어진 문자열이 항상 시작해야한다고 가정 해 봅시다 중간에 있지 않은 알파벳이 아니라 결국에는 알파벳으로 시작해야합니다

그 문장은 그 문장이 끝나는 곳에서부터 시작해야합니다 당근은 당신이 끝나는 모든 단어를 원한다고 가정 해 봅시다 작은 m과 그것이 달러가 다음에 오르는 기간 기호입니다 주어진 문자를 키보드에서 볼 수있는 문자와 정확히 일치시킵니다 유효한 utf-8 값을 묻는 것은 하나 이상의 문자를 참조하므로 이름 길이가 적어도 5 자릿수이거나 원하는 경우 말할 수 있습니다

확인하거나이 특정 문자열을 사용해야한다고 말하고 싶습니까? 이름은 적어도 하나 이상의 글자이어야합니다 자연스럽게 와서 달러 기호 자체가 문자열에 포함될 수 있습니다 if 당신은 바로 $ 400 $ 300 정도의 금액을보고 있습니다 당신은 일종의 달러 기호를 무시했다는 것을 정규식에 알려주고 있습니다 역 슬래시 물음표는 0자를 더 나타내므로 보여 드리겠습니다

단지 이것에 대해 이야기하는 것 외에 다른 것들에 대한 간단한 시연 내가 추천 할만한 것을 배우기에 아주 유용한 웹 사이트가있다 여러분 모두에게 무료 웹 사이트 인 x101 com을 방문하십시오 그래서 이것이 정규 표현식을 쓸 곳이라고 가정 해 봅시다 테스트 문자열을 작성하여 일치하는지 확인하십시오 내가 말했듯이 내가 선택한 일치 정보를 얻을 것이다

언어로 여러 가지 맛을가집니다 선택하겠습니다 JavaScript는 여기에서 시작하므로 모든 문자열을 자본 e 그래서 알파 베타 쉼표 사과 미국 그래, 쟁반 따라서 단일 테스트 강도는 힘을 제거하면이 부분이 제거되고 시작 부분에서만 일치합니다 문자열은이 모든 것을 하나의 입력이 아니라 입력으로 제공합니다 이 항목을 제거하고 일치하는 항목이 없다고 가정하면 베타를 제거하지 않습니다

문자열이 G로 시작하기 때문에 Max가 여전히 있습니다 문자열이 시작되기 때문에 사과가 너무 많이 반복됩니다 이것이 이제는 다음 라인이기 때문에 돌아 오지 않는다 그러면 다시 일치가 생기므로 문자열의 끝입니다 이제 let 's 문자열이 종료되어야하는 특정 문자로 끝나야한다고 가정하십시오

C가 있으면 아무것도 될 수 있지만 C로 끝나야 EB C가 일치하므로 말 그대로 오른쪽에 아무 것도 없어 그냥 여기에 임의의 횡설수설을 치는 것처럼 끝이 끝나는 한 바다 난 괜찮아 내가 그것을 제거하면 그 질량은 사라 졌어 자본 C는 자본 C 만 작동 할 수 있습니다 무엇이든 될 수 있습니다

2 3 4 5 5 7 8 9 10 그 다음으로 자본 C가 뒤 따른다 이 정규식은 이제 내가 시작하는 세 글자의 단어를 원한다고 가정 해 봅시다 A는 가운데에 어떤 문자가 있고 그 다음에는 가장자리로 끝납니다 그래서 abh는 abb이 작동하지 않을 것입니다 그래서 Dotson은 여기에 어떤 캐릭터라도 나눕니다

어야 작동합니다 아아 폴란드어 그렇게 작동합니다 하지만 돌아가려면이 부분이 설명의 패턴 일뿐입니다 이것은 패턴입니다 내가하고있는 묘사와 이것들은 테스트 음료 다 그래서 만일 당신이 이해하면 패턴 설명이 무엇인지 조금 재미있어 보인다 당신은 일종의 상징의 의미를 어떻게 이해할 수 있을까요? 이 일치가이 특정 패턴과 일치한다는 것은 이 특정 패턴 설명은 내가 말하려고하는 것이지만 이것은 한 캐릭터 만 있기 때문에 작동하지만 앞에 더하기를 추가하면 플러스는 임의의 수의 문자가 하나 이상의 문자 였기 때문에 그 교수법 가르쳐 어떤 유형의 문자를 더하기 참조하는 방법을 말합니다 그들 중 많은 수가 발생하여 하나의 점만으로도 한 문자가 될 수 있지만 도트 플러스는 저에게 E와 가장자리 사이에 무한한 점들을 쓰는 저에게 저 말입니다

강화가 의미하는 어떤 수의 문자라도 질량은 계속됩니다 이 일이 끝나 자마자 여기 가장자리가있는 한 일어난다 그것은 사라졌어 다음은 성가신 캐릭터 다 4 백 달러 또는 나는 어떤 종류의 종말과 달러 또는 놀람 그래서 나는 수확 400 달러가 다이애나에게 500 건이 필요하다고 말하고 싶습니다

100 %는 일치하지 않지만 400 달러는 다음에 여기에있는 것은 제로가 더 많아서 제가 말해야한다고 가정 해 봅시다 그 다음에 그 캐릭터가 거기에있을 수도 있고 그렇게 될 수도 없습니다 do a little match 어 ABH 경주 어 어

물음표가 있기 때문에 헤이 어쩌면 그것은 클래스와 다른 0 개 이상의 문자를 말하는 하나 이상의 문자가 물음표가 더 열린 방식으로 표시됩니다 이 후에 우리는 영숫자가 일치하므로 필요한 기본 단어가 있습니다 내가 어디에 있는지 알기 위해 우리가 볼 수있는 대괄호에 잘 맞는다 나는 그것이 A 또는 B 또는 C 내부의 어떤 단일 문자와도 일치해야한다고 말하고있다

그것은 당신이 가지고있는 문자열과 일치하는 모든 조건에 더 가깝습니다 일치를 위해 A 또는 B 또는 C를 포함 할 필요가있는 경우 유효합니다 문자열 이제는 말하지 않는 한 문자열의 어느 부분이든 포인트로 표시됩니다 당신이 그것을 원한다면 나는 그것이 처음에 있기를 원한다 나는이 모든 것을 말한다

B 또는 C로 시작하는 편지 미안하다 그래서 이것은 유효합니다 유효한 권리도 있지만 유효하지 않습니다 테스트 문자열에서 내 페이지의 일치 정보를 보는 것입니다 이것은 유효하지 않으므로 a 또는 B 또는 C로 시작하십시오

그것 앞에 당근 상징을 놓으십시오 이것은 외부가 아닌 괄호 안에 있습니다 그러면 자동으로 정규식 엔진에 시작될 수 있다고 말합니다 이것과 별개로 당신이가는 길에 달려 있습니다 나는 당신이 포함 시키거나 제외시킬 많은 성격을 느꼈는지의 여부 그것에 따라 선택의 여지가 있습니다

그렇다면 ABCD 아마도 첫 번째 문자가 아닐 것입니다 아마도 두 번째 옵션이 첫 번째 옵션과 마찬가지로 나머지 22 개의 알파벳을 모두 씁니다 if 당신은 이런 식으로 똑같은 것을 쓰면 결국 끝날 것입니다 이 23 개의 다른 모든 문자 또는 언어의 것들을이 글자를 씁니다 그것이 E – Z라고 말하는 흥미로운 것은 소문자 e 범위의 문자들이다

대문자 e는 말하고 그래서 다른 것들은 거의 식물이 아니다 제안 할 것입니다 당신이 정말로 그들을 시험해보고, 무엇이 될지에 관해서 말입니다 내가 뭘 제안했을 때 사용되는 경우 이미 정규식을 사용합니다 그 질문에 대한 답을 꽤 많이 알고 있다고 생각하지만, 너의 상황에 따라 다르지 않을까 당신이 있고 실제로 도움이되는 상황은 연습하는 연습입니다

너는 여기 연습하면 네가 찾을 수있을거야 연습 문제가 있거나 내 과제가 그렇게 할 것이라고 생각합니다 아주 중요한 연습은 정규 표현식을 배우는 가장 좋은 방법입니다 방금 규칙을 외우는 것이 아니라 규칙을 연습하는 것보다 자연스럽게 당신에게 올 것이다 여기에있는 양식 중 하나의 양식은 짧은 양식이므로이 양식을 작성한 것을 기억하십시오

그래서 밑줄 문자가 다음과 같이 유감스럽지 않습니다 음, 그렇지만 꽤 가까운 숫자 일 뿐이니까요 그것은 비어있는 D를 원한다면 역 슬래시입니다 그런 다음 슬래시 캐피털에 대해 이야기하십시오 D 당신이 그것을 원한다면 당신은 단지 단어를 가지고 있고 밑줄을 긋는다

당신이 보는 경우에 영숫자와 같은 종류의 슬래시 W 이것은 영숫자입니다 이것은 영숫자가 아니며 모두 흰색입니다 공백은 스페이스 바를위한 공간이므로 jQuery는 우리에게 정규식 매치를 제공합니다 그렇지 않으면 거짓을 반환합니다 그렇지 않으면 일치를 찾습니다

여기에 주어진 정규식을 초보자에게 협박 하겠지만, 당신이 쉬는다면 전자 메일에 대한 테스트 후 true를 반환 할 수 있습니다 그렇지 않으면 반환 할 수 있습니다 false 그래서 제발 상당히 복잡한 정규 표현식 내가 격려하는 걸릴 것을 유의하십시오 너는 무엇을 의미하는지 알아 내려고 노력하지만 너는 얻지 못한다면 괜찮아 그러나 기억해야 할 점은 빨간색 점 테스트를 사용할 수 있다는 것입니다 일치로 성공했는지, 아니면 성공했는지에 따라 참 또는 거짓 경기의 실패 그리고 당연히 당신은 다양한 시나리오에서 그것을 사용할 수 있습니다 – 어떤 종류의 입력을 기반으로 당신은 현재의 상황에 대해 무엇을 얻고 있는가? 귀하의 응용 프로그램이 수행하는 업무 로직 또는 비즈니스 논리입니다

다음에 만들려는 유효성 검사는 매우 중요한 개념입니다 자바 스크립트에서의 이벤트 핸들링을 시작하자 시작하자 산스크리트는 도트 바인드 기능이있는 흰색 소스를 제공하므로 예를 들면, h1을 클릭 할 때마다 T가이 것을 호출한다는 것입니다 함수에 대해 설명하고 간단히 짧은 데모를 보겠습니다

그러니 내 파일로 가서 내가이 모든 것을 음소거하게 해줘 명확한 경기장을 알다 예 또는 D를 설정하여 P 태그가 있고 단락이 있습니다 나는 그것이 생성 될 때마다 경고를 표시하고 싶었고 그래서 나는 앞으로 나아 갔다 그것을 클릭하면 그곳에 무엇이 있더라도 경고가 실행될 수 있습니다

성가신 그래서 이것은 콘솔 도트 로그에있다 그래서 우리는 그것이 그렇게 불리는 시간보다 사건을 봅니다 성가신 상처 진술 대신에 이것은 훨씬 더 많이 알았습니다 콘솔 도트 로그를 사용하는 더 나은 옵션 이제 다양한 종류의 이벤트가 있습니다 JavaScript 클릭은 그 중 하나이지만 일반적으로 누군가는을 클릭하지 않습니다

우리 단락의 오른쪽과 당신은 단락을 넘을 것입니다 미안 해요 이벤트는 마우스 입력이었다 그래서이 작품에 마우스 입력 우리가 입력 마우스 입력 나는 또한 작동하게 할 수 있습니다 마우스를 사용하여 들어 오거나 나가는 것은 기본적으로 다음과 같이 정의됩니다 그래서 마우스가 요소를 향해가는 경우에는 입력으로 냄새가납니다

이 요소의 도메인은 내가 여기에 머무르면 아무 일도 일어나지 않을 것입니다 그러나 나는 도메인을 떠날 때 떠나 갔다 나는이 지역을 떠나고있다 그래서 나에게 일종의 더 나은 모습을 보여주게된다 아이에게주는 것으로 오, 한 픽셀에 단색 검정과 내가 텍사스의 여백을주고 보자

미안해 내가 그걸주고있는 이유는 내가 페어링 아이 패드를 줘야한다고 생각해 패딩 (padding)은 마치 커다란 것이고 지역 코드가 있습니다 내가 들어올 때 무슨 일이 일어나고 있는지, 나는 괜찮은지두고 갈거야 또 다른 일을 해보자

이것들을 분리해서 마우스 센터를 갖자 House Lee가있다 당신의 세계에서 이것은 당신의 세계에 들어서고 있습니다 그래서 그것은 이벤트 또는 사용자 상호 작용에서 바인드를 묶어서 사용자가 그렇게하는 것입니다 상호 작용을 클릭 할 수 있습니다

또는 그것을 떠날 수있는 키를 누르십시오 키 아래로 전체 목록은 동일하고 이것들은 이벤트이며 이것을 핸들링하는 이벤트 처리라고합니다 기본적으로 웹 페이지에서 무언가가 발생했음을 의미합니다 이제 어떻게합니까? 개발자가 그에 대한 응답을 쓰면 응답이 실제로 작성됩니다 이 함수가 여기에 있으므로 이벤트가 어떻게 될 것인가이며 이것은 무엇입니까? 이제는 이벤트가 어떤 것인지 어떻게 알 수 있을지에 대한 응답이 하나의 질문입니다 웹 페이지에 잘있게 될 것입니다 제품하지만 괜찮아 내 웹 페이지에 사용자가 그것을 통해 사용할 수있는 영향을 미칠 수 없습니다 사용자가 버튼을 클릭 할 수 있음을 알 수 있습니다

당신과 당신의 애플리케이션의 비즈니스 로직을 상호 작용을 통해 응답을 정의해야합니다 드래그 여부에 관계없이 여러 가지 작업을 수행 할 수있는 앱에서 유용하게 사용할 수 있습니다 항목을 놓아두면 버튼을 클릭 할 수있게 해주는 것이 더 간단합니다 정말 당신이 무엇을 만들고 있는지에 달렸습니다 그리고 그것은 어떻게 사건들이 일종의 일을하는지에 달려 있습니다

사건에 대한 당신의 반응의 관점에서 보면 또 다른 일이있을 수 있습니다 이 키워드는 기본적으로 범위 내에서 자동으로 할당되며 원래의 HTML을 가리키며, 이는이 JavaScript 객체를 참조합니다 함수가 선언되었으므로 곧 보게 될 것입니다 데모 네가 나에게 들어오고있어 당신의 세계는 단지 달러를이 도트 텍스트라고 부르기 때문입니다

단락 태그 안쪽에있는 모든 것은 이제 바인딩 해제됩니다 일정이므로 가끔씩 특정 이벤트를 제거해야 할 수도 있습니다 더 오래 걸리고 나는 기억에서 사람지도에서 매우 중요하다고 생각한다 관리 관점에서도 마찬가지입니다 이벤트를 제거하는 것이 중요합니다

더 이상 필요하지 않고 비즈니스가 발생할 수 있다고 생각한다면 논리가 항상 권장되지는 않지만 우리가 사용하고있는 좋은 유스 케이스가 필요합니다 그게 처음으로 이런 일이 생기면 내가 바인딩을 풀고 싶다고 가정 해 봅시다 마우스를 입력하십시오 그래서 내가 여기서 뭘하는지 아주 조심스럽게주의하십시오 말하자면 처음으로 마우스를 떠났지만 마우스가 PP를 떠난다는 것입니다 태그를 입력하면 마우스 입력 이벤트가 더 이상 적용되지 않아야합니다 내 jQuery에 알려 주려고하면 어떻게 반응하는지 보자

그것은 한 번 그리고 지금은 결코 실행되지 않은 그림을 그리는 것에 응답하지 않았다 이 권한을 다시 실행하십시오 종료시 엔트리 종료시 아무 것도 종료하지 마십시오 예,하지만 엔트리가 아닙니다 왜냐하면 우리는 마우스 입력에 바인딩을 해제하지 않았기 때문에 바인딩을 해제했습니다

보편적으로 모든 이벤트 핸들러를 제거하므로이 핸들러 만 마우스를 제거합니다 이 이벤트 핸들러를 모두 제거하려면이 필드를 입력하십시오 이 요소는 어떤 요소라도 완전히 비활성화시키지 않으려 고합니다 상호 작용에 대한 응답의 이것은 지금해야 할 일이 아닙니다 두 가지 작업을 모두 마쳤으므로 한 번 실행하면됩니다

또한 라이브 메서드는 너무 낮은 모든 이벤트를 연결할 수있는 라인 메서드를 사용하여 원래 선택기와 일치하는 미래 요소에 이제는 이해하기가 까다 롭지 만 운좋게도 라이브 메서드에서 바인딩과 바인딩 프로젝트가 여전히 jQuery 버전 17에서 사용 중지 된 경우 17을 사용하면 다른 경우이지만 새 프로젝트를 시작할 경우를 대비하여 확실히 jQuery의 최신 버전을 사용하여 보겠습니다 jQuery 버전이 현재 활성화되어 있으므로 지금 버전 3을 사용 중입니다 그래서 당신이 1

7을 사용한다면 그것은 정말로 정말로 오래되었고 강하게 강하게 사용됩니다 17에서 무언가로 마이그레이션 경로를 찾아내는 것이 좋습니다 3처럼 17이 몇 년 전에 강하게 나왔을 것입니다

이 방법들을 사용하지 않았 으면하는 것이 좋습니다 2 페이지에서 더 이상 사용하지 않아도 마음과 같은 작품은별로 좋아하지 않습니다 당신이 그것을 정의하고 그것을 어떻게 사용하는지에 대한 관점에서의 차이점 jQuery는 약간의 변경을 가했을 것입니다 방법은 지금 내가 당신을 보여준 것처럼 바인딩에 여러 개의 이벤트를 추가 할 수 있습니다 하나의 흥미로운 예제는 다른 서로 다른 두 가지를 생성하는 대신 다른 행동을 기반으로 한 응답 이런 바인딩은 당신이 할 수있는 일은 당신이 단순히 내가 이봐, 당신이 그것을 객체에 전달할 수 있기를 원했고, 손실이 내가 원하는 것을 입력한다고 말할 수 있습니다 이 작업을 수행하는 방법은 대부분이 작업을 수행하는 방법입니다

그래서 간단한 HTML 상자가 여기에 설명되어 있으므로 색상 상자를 살펴 보겠습니다 스팬 클래스 메시지를 설명하겠습니다 나는 메시지를 남긴다 색상이 맞습니다 글꼴 크기는 16 픽셀로 설정됩니다

그리고 우리는 아무것도하지 않을 것입니다 단순히 가서 메시지를 받겠습니다 당신 알았어 미안하다고 생각하는구나 여기가 너무 커서 구부린다

EE와 함께 그들은 대만이 그 마지막 비트를 바꾸지 않고있을 때 그것은 그것을 제거하는 것처럼 보입니다 그래서 교환하는 것이 매우 분명합니다 전체 문자열 및 방금 다른 방귀 없습니다 감사합니다 그래서 나는 그것이 너무 다르지 않다는 것을 의미합니다 그러나 이것은 단지 매우 깨끗합니다

이런 식으로하면 이런 식으로 아주 깨끗해 그래서 추천 할께 사실 이것을보고 이것은 구문을 보았을 때와 같습니다 당신이 중괄호를 쓰고있는 모든 여자와 혼동스러워 보이지만 그저 이벤트 이름에 해당하는 3 개의 키가있는 JavaScript 객체 다음에 동일한 핸들러가 여러 개있는 것은 실제로 클릭이나 마우스 인턴이 실제로 일어날 것입니다 이벤트가 발생할 때마다 이벤트 객체 인 하나의 매우 중요한 요소 이 이벤트에 대한 추가 정보가 필요할 수도 있습니다

하나의 속성을 가진 이벤트 객체에 의해 전달됩니다 mistype 그래서 여러 사건이 있다고 가정 해 봅시다 너는 내가 가질 수있는 것들을 쓰는이 특별한 방법을 본다 이걸 잘 쓰고 지금 당장 어떤 이벤트가 있는지 알아야 해 일어난 일로 내가하고 싶은 일을하고 싶지 않다고 생각했다

여기서 원하는 것은 여러 가지 조건을 생성하고 싶지 않았기 때문입니다 이벤트의 내용에 따라 다른 것을하고 싶었습니다 나머지 단계는 그대로 유지해야합니다 그래서 당신은 우리에게 눌려진 버튼이나 키를주는 타입이 필요합니다 target은 우리에게 원래의 요소를주고 x와 y는 마우스가 어디에 있는지 알려줍니다

그들이 정확히 쇼핑몰의 출처와 이벤트 객체로 작업하는 것은 특정 이벤트에서 발생했는지 확인할 수 있다는 것입니다 특정 위치에 또는 특정 위치에 놓고 결정을 내리거나 글을 쓸 수 있습니다 논리 따라서 우리가이 결과로 얻고있는 것을 빨리 봅시다 하나의 오른쪽 마우스를 떠나는 것은 그것은 포착하고 위치는 제로입니다 제로의 측면에서 더 비슷합니다 코끼리가 어디 있는지, 그 다음 요소 나 그 자체, 그리고 마우스 위치 267 355 그래서이 목표는이 특별한 것이고 마우스를 떠나는 것은 이벤트 도트 유형을 전체적으로 제거하면 이러한 점을 제거해야합니다 이런 식으로 끝날 수 있고, 매우 다양하게 보입니다

안에있는 물건이 많은 물건은 모든 것을 알아야 할 필요가있는 것이 아닙니다 오늘 나는 여기에서 언급 한 어떤 것들과 슬라이드 데크를 생각한다 확실히 씨앗 이벤트 이벤트 도트 등에 유용합니다 그래서 당신이 링크 작업의 방법을 오버라이드하고 싶다고 가정 해 봅시다 원하는 링크를 클릭한다고 가정하십시오

해당 페이지 자체의 iframe에있는 웹 페이지 또는 버튼을 기반으로 양식을 클릭하십시오 끝에서 특정 유효성 검사를 추가하여 버튼을 사용하고 싶습니다 시간을 보내고 싶지는 않지만 원하는 양식을 제출하는 것은 바람직하지 않습니다 우리에게 다른 종류의 요청을하거나 그렇게하기를 원한다면 그것이 preventdefault가 정상 동작을 제거하는 이유입니다 당신이 목표로 삼고 자하는 특정 일을 시도해 봅시다

타겟 링크 휴일 Jessica Lewis GPS googlecom 목표를 공백으로 지정하는 호출 다음으로 그것을 호출하자 타겟 링크를 클릭 이벤트에 바인딩 할 수도 있습니다 그리고 나서 우리는 그래서 지금 클릭하면 아무런 일도 일어나지 않습니다 링크가 깨져 있지 않은 것이 아닙니다

링크가 잘되어있어 Google이이 특정 페이지에있는 링크입니다 다섯 가지 기본 동작을 변경 한 후에 이것은 매우 강력 할 수 있습니다 당신이 태그를 가져 가거나 버튼을 사용할 수 있다고 상상해보십시오 일종의 특정 동작을 재정의하는 일종의 기본 동작이 있습니다 특정 웹 서비스를 제공하는 사용자 정의 웹 사이트를 만드는 데 도움을줍니다

당신의 필요에 따라 당신이 원했던 효과의 종류는 수정에 관한 것입니다 또는 결함을 방지하기 위해 정지 전파라는 또 다른 것이 있습니다 이벤트가 바로 지금 일어날 때가끔 이벤트 공개라고하는 무언가에 문까지 모든 사건을 유발할 수 있습니다 그래서 우리가 여기를 살펴보면, 클릭시 트리거 될 별 선택기 권한은 내가 우리는 개발 권리가있는 별을 저장하고 dev 요소에는 클릭이 있습니다 이벤트하지만 이후 div 또는 아이의 모든 어린이 그들은 click 이벤트를 가지고 있지만 부모 div가 그것을 캐스팅하는 것을 원하지는 않습니다

이벤트는 거품이 나오므로 어떤 것을 사용할 것입니다 빨대 전파라고 부르는데 지금 공부할 때 매우 유용합니다 각과 같은 무언가가이 곳에서 정말 도움이 될 것입니다 이벤트 버블 링을 이해하는 것은 매우 중요합니다 함수는 바인딩 및 바인딩과 같은 종류입니다

그래서 어떻게 바인딩을 해제했는지 보았습니다 jQuery가 우리에게 제공하는 특별한 이벤트는 지금은 켜고 꺼져 있지만 그 다음에는 조금 지루한 일이라고 생각하면 조금 성가신 일입니다 일단 이벤트를 설정하면 별도의 이벤트로 이벤트를 끌 것입니다 라인 당신이 뭔가를 호출 할 수있는 일이 무엇을 할 일은 이벤트를 실행하는 것입니다 한 번만하고 다음 번에 클릭하면 그 위에 있지 않습니다 그래서 우리가 오면 이걸로, 나는 그걸 괜다

직접 페이지를 닫으면 이제는 더 이상 없습니다 Ranma 그때 그것은 여러 번 실행됩니다하지만 내가 그것을 하나로 변경 순간 그때 그것은 단지 한 번 실행됩니다 바인딩 해제하는 것은 매우 단순합니다 그것을 하나로 바꿔라 나는 여기에 올 것이다

그리고 나는 이것에서 벗어난다 내가 너를 활 센터에서 움직이기를 원한다고 가정하자 슬리브 그래서 내가 뭘 할거야 나는 페이지를 모른다 지금 나는 그것이 나가면 나는 앞으로 나아갈 때만 움직인다 지금부터이 값에 여러 값을 지정할 수도 있습니다 그래서 그들은 둘 다 장애인이거나 그렇지 않다면 나는 모든 사건의 꼬리를 옮기고 싶다

지금 이것과 같은 방식으로 unbind와 마지막으로 같이 작동합니다 위에서 언급 한 것처럼 이벤트 바인딩 만 사용하는 것이 좋습니다 특정 이벤트 바인딩이 필요하지 않은 경우에 대비하여 최상의 방법 정말 복잡한 응용 프로그램과 나는 말을하지 않기 때문에 그들을 제거하는 하나의 간단한 애플리케이션에 대해 복잡한 애플리케이션을 원하지 않는다면 이벤트가 많고 청취자가 많으면 최적의 성능을내는 데 가장 좋을 수 있습니다 특정 이벤트가 더 이상 필요하지 않으면 제거하십시오 개발을 제거하는 경우 일종의 Dom 요소를 오프로드하는 방법을 알 수 있습니다

또는 개 요소를 숨기면 이벤트도 함께 제거됩니다 특정 버튼을 숨기고 있지만 이벤트가 계속 오른쪽에 있다고 가정합니다 당신이 1000 개의 그런 버튼을 가지고 있기 때문에 바인딩을 해제하는 것이 합리적이라고 생각합니다 예상치 못한 결과가 발생하지 않도록 해당 이벤트를 유지하십시오 이제 다른 점은 특정 이벤트를 트리거 할 수 있다는 것입니다

요소를 트리거 함수를 사용하여 이제 브라우저 이벤트를 모방하는 데 사용할 수 있습니다 앵커 태그를 클릭하기 만하면 매우 유용합니다 내가 네가하고 싶은 걸 내가 나는 링크가 작동하기를 원했다 맞아 컬러 워크 외국 행위를 막았다

당신 맞아 어디에서 브라우저 동작을 모방하고 싶었는지 링크는 실제 클릭이 아니지만 동작을 모방 한 것이고 이것을 사용하여 어떤 것들을 관찰 할 수 있고 나는이 예제를 본다고 가정한다 그리고 그것이하는 일은 B 태그에 foo라는 함수를 설정하고 함수를 클릭하면 실행 하겠지만 트리거는 다른 곳에서는 마우스가 아닌 다른 곳에서 트리거가 발생합니다 그래서 이것은 또한 사용자가 어떤 특정 정보를 입력했다고 가정 할 때 기초가 될 수 있습니다 입력을하고 특정 동작을 트리거하려는 경우 그 의미는 아닙니다

여기에 주요 부분 인 사용자 상호 작용없이 어떤 방식 으로든 일어난다 그것은 점이 너와 함께 그리고 마지막으로 꺼내는 곳이다 맞춤 이벤트가 작동하도록 맞춤 이벤트를 만들면 나만의 이벤트를 만들 수 있습니다 이벤트 이름을 입력 한 다음 트리거 하나를 사용하여 동일하게 트리거 할 수 있습니다 본질적으로 무엇이든 될 수 있으므로 맞춤 이벤트를 가정 해 봅시다

내가 읽기 때문에 나는 곧바로 그것을 부르고 싶다 그래서 당신이 가질 수있는 한가지 질문은이 C 언어를 사용하는 곳이면 어디든됩니다 웹 사이트가 정말로 대화식 일 때 유용합니다 기존 이벤트 및 마우스의 특정 위치를 기반으로 가정 해 봅시다 이벤트를 시작하려는 마우스의 위치를 ​​마우스로 가정 해 봅시다

다른 이벤트와 충돌 할 수 있기 때문에 다른 이벤트로 호출 할 수 없습니다 어떤 정렬 및 귀하의 고유 한 사용자 정의 이벤트라고 부르기를 원합니다 이것이 유용 할 때의 응용 프로그램은 사용자 정의 이벤트가 호출 된 것을 확인합니다 여기에서 페이지를 불러 오면 즉시 여기에서 불러옵니다 밖에서 나는 여기에서 그것을 밖에 부르고있다

나는 또한 그것을 여기에서 부를 수 있었다 그래서 내가 할 수있는 또 다른 일은 링크를 클릭하는 것이지만 당신은 고객 이벤트가 호출 된 다음 페이지가 열려 있음을 알게되지만 고객 이벤트도 호출되었으므로 링크 수를 추적해야한다고 가정 해 보겠습니다 이 버튼을 클릭하는 것이 매우 쉬운 방법 일 수 있으므로 가정 해 볼 수 있습니다 트랙 링크 너는 여기에 전화 할 수있어 호수가 방아쇠를 당겼습니다

그리고 주문의 이벤트는 이것들이라고 이름이 지어졌다 나는 종류의 예다 당신이 그것을 밖으로 시도하고 이것이 어떻게 작동하는지 이미 이미 제거 된 것을 볼 것을 제안하십시오 광고 교실에서 웃음을 터뜨리면 정말 좋은 임무가 될 것입니다 그래서 그것을 밖으로 시도하고 당신이 그것을 사용하지만 일종의 관점에서 볼 수있는 방법을 참조하십시오 그들이 사용되는 이벤트 나는 그것이 사용자 정의에 관해서는 더 많이 있다고 생각한다 응용 프로그램을 이해하는 범위에서 응용 프로그램의 규모가 너무 작아서 보통 꽤 괜찮은 상태 일 때 사용됩니다 당신이 작성한 코드의 라인 수 또는 이전에 개발 한 응용 프로그램의 폭과 Exchange 데이터 정렬에 사용되는 50 개의 비동기 JavaScript 모든 행위 이전에 인터넷 상에 모든 것이 서버 측에서 수행되므로 버튼을 클릭 할 때마다 다시로드됩니다

전체 페이지를 보지만 오늘 당신이 Facebook이나 당신이 댓글을 달았거나 페이스 북이 뉴스 피드를 다시로드해야한다면 각 호가 그 뒤에있는 마법이기 때문에 항상 그렇지 않다 서버를 호출 할 수 있고 서버가 URL을 통해 전화를 걸 수 있습니다 URL 보안 URL을 사용하고 데이터를 가져 오거나 웹 서버에 데이터를 보내십시오 이점은 사용자가 보는 것이므로이 전체 프로세스가 전체 웹 사이트를로드하고 다시 전체 웹 사이트를로드합니다 다시 HTML CSS 및 JavaScript 파일을 다시로드하는 것을 의미합니다

필요한 데이터 만 가져오고 있기 때문에 훨씬 빠릅니다 자바 스크립트를 사용하여 업데이트하므로 많은 시간과 비용을 절약 할 수 있습니다 주요 브라우저는 xhr XML HTTP 2003 년 요청 그런 종류의 문제는 이제 모든 주요 브라우저가 지원하는 경우 매우 인기가 높아졌고 이제는 보게됩니다 기술 차트 메시지에서 거의 모든 조치를 취하는 거의 모든 곳에서 좋아하는 YouTube를 구독하거나 좋아하는 것을 생각해보세요

채널은 모두 Ajax에 의해 수행되고 있으므로 페이지를 볼 때마다 로드 중 일부 유형의 데이터가 인터넷에서 교환되는 것은 Ajax입니다 첫 줄에 나와있는 것처럼 당신을 돕고 있습니다 클라이언트와 서버 인 브라우저 및 서버 지금 웹 페이지를 새로 고침하십시오 이렇게 교환 된 데이터는 어떻게 URL에서 발생합니까? 본질적으로 우리가 알고있는 모든 URL은 일부 데이터를 당신이 facebookcom 또는 google

com에 갈 때 응답은 HTML입니다 웹 페이지를 오른쪽으로하고 놀 때 웹상의 이미지에 대한 링크가 있다고 가정합니다 URL이지만 이미지 데이터 형식으로 응답하므로 비슷하게 URL의 끝에 어떤 종류의 데이터라도 가지고 있고 데이터를로드 할 수 있습니다 데이터를 가져 오거나 특정 데이터를 특정 URL로 보낼 수 있습니다 액션은 XML HTTP 요청 API를 통해 JavaScript에서 Ajax를 통해 발생합니다 자바 스크립트와 Ajax를 사용하면 매우 인기가 있습니다 요청은 비동기식이므로 나머지 코드는 계속됩니다

요청이 처리되고 응답이 수신되는 동안 실행 XML 형식으로 이제는 2003 년에 돌아 왔지만 이제는 필요한 형식의 형식을 지정하고 전체 형식을 지정할 수 있습니다 이 전체 과정을 비동기 자바 스크립트라고 부릅니다 오늘날 XML은 약간 날짜가 있기 때문에 xml은 여전히 ​​사용되지만 새로운 시스템과 앞으로 출시 될 시스템에서는 데이터를 교환하여 XML이 매우 대중적이었습니다 그러나 그것이 매우 부피가 커지기 때문에 유행에서 크게 나갔다 그러나 주된 물건 여기서 기억해야 할 것은 나머지 코드는 계속 실행된다는 것입니다

요청이 처리되는 중입니다 이것은 매우 강력한 아이디어입니다 즉, 동시에 여러 Ajax 호출을 할 수 있으므로 Facebook 페이지가로드됩니다 뉴스 피드가로드되고있는 동안 차트의 친구 목록이 로드 된 모든 교육 이야기가로드 됨 티커가 여러 번로드 됨 페이지가로드되는 동안 개별 요청이 동시에 발생하므로 전체 프로세스가 정말 빨라 보입니다 적어도 일부 데이터는 일부 데이터를 볼 수 있기 때문에 나머지 부분은로드되므로 가끔씩 당신은 그것을 알고있을 것입니다

티커가로드되지 않았거나 채팅의 친구 목록이로드되지 않았지만 모든 것이 표시됩니다 다른 사람은 당신이 코멘트를 좋아할 수 있다고 뿌리 박았으며 다른 하나는 아직로드 중입니다 비동기 적이기 때문에 발생합니다 직렬로 연속적으로 발생하지 않습니다 패션 그들은 병렬 패션에서 일어나는 지금 당신이 궁금해 수도 있습니다 이것은 여러분이 보았던 스레딩의 개념과 비슷한 방식입니다

Java 또는 독서를 지원하는 다른 언어와 같은 것입니다 브라우저에서 사용할 수있는 스레딩이 아닙니다 뭔가 이벤트 루프라고하지만 정말 주제입니다 훨씬 더 진보 된 자바 스크립트가 이벤트 루프 (event loop)와 어떻게 작동하는지 그러나 그것은 매우 인기있는 인터뷰입니다 질문 자바 스크립트가 단일 스레드 동기 언어면 어떻게됩니까? 비공식적 인 귀 행위로 불리는 무언가가 있다는 것입니다 다른 모든 것들과 병행하여 JavaScript와 그 자체를 이해합니다 여기에 변경되지 않은 것은 JavaScript의 규칙이 이 특별한 일은 여전히 ​​하나의 스레드로 계속됩니다

그러나 동기식 언어는 브라우저가 비동기 동작을 가능하게합니다 브라우저를 기반으로하므로 마지막 슬라이드가 언급 된 것처럼 보입니다 2003 년에 그들은 브라우저를 올바르게 지원하기 시작했기 때문에 브라우저는 그 이전에도 존재 했었습니다 거기에 넷스케이프가있었습니다 모질라도있었습니다

그러나 브라우저는 2003 년부터 시작하여이 문제를 지원합니다 XML을 지원하는 일종의 JavaScript가 아니므로 인기가있었습니다 HTTP 요청 API는 브라우저 API이므로 해당 종류의 문장 당신에게 명확하지 않다는 것은 브라우저가 Ajax 요청을 취할 수 있음을 의미한다 당신은 JavaScript를 통해 그것을 할 수 있습니다 기초가 좋다

브라우저가 이들을 위해 제공하는 토대가있다 우리가 그것을 가능하게하는 브라우저에 대해 이야기 할 때 자연스럽게 가능할 것입니다 바로 거기에서 우리는 첫 번째 수업에서 이야기했던 것과 같은 문제에 직면 해 있습니다 다른 브라우저는 다른 화가 또는 다른 사람과 같습니다 그들 만의 방식으로 기능을 구현하여 모든 사람들이 다른 XML HTTP 요청 API로 인해 보안이 아름답게 나옵니다

요청을 처리하는 단일 메소드 세트를 제공하는 방식 이동하면서 볼 수있는 여러 브라우저에서 실행되지만 이것이 가장 많은 브라우저 중 하나입니다 다시 jQuery를 라이브러리로 허용하여 관리하는 데 도움을줍니다 JavaScript 관련 크로스 브라우저 의존성 및 달러 점 분리 Ajax는 메소드인데 거기에는 달러 개처럼 사용할 수있는 다른 메소드가 있습니다 고양이 또는 강아지 스크립트 달러 강아지는 또한 사용할 수있는 JSON 달러 게시물을받습니다 이제 요청을 보내는 두 가지 가장 일반적인 방법이 있습니다

서버 중 하나는 get 메소드를 사용하여 서버가 될 수 있으므로 검색 결과에 문제가있는 것일 수 있습니다 친구 목록이 알림 목록 일 수 있습니다 이것은 목록 일 수 있습니다 이야기는 YouTube의 동영상 목록 일 수 있습니다이 목록은 채널 목록 일 수 있습니다

YouTube에서는 식당 목록이 될 수 있으므로 일반적으로 검색 결과를 얻으려고하면 블로그에서 읽으려고하는 기사에 액세스하려고 시도합니다 이미지 집합 또는 gifs 게시물 요청은 서버에 데이터를 보내고 요청할 때입니다 업데이트 또는 생성되어 가입 양식을 생성합니다 어딘가에 페이 스북 (Facebook)에서 귀하의 프로필을 업데이 트하는 주위 에이 어딘가에 있습니다 페이스 북에 게시물을 작성하는 것은 댓글을 작성하는 것입니다 그래서 Kett는 읽기 및 게시는 기본적으로 생성 또는 업데이트입니다

달러 OT 잭의 지프 Willys 아약스 방법에 특정 옵션이 있습니다 어떤 데이터 유형의 조건을 교환 할 수 있으므로 어떤 것으로 시작할 수 있습니다 텍스트처럼 간단하게 문자열을 전송할 수 있습니다 전송할 수도 있습니다 HTML은 웹 페이지의 일부분 만로드 할 수있는 웹 페이지를 상상해보십시오 서버에서 HTML 조금 어쩌면 이상한 것 같아요

HTML은 약간의 요청이 있었는지 약간의 업데이트가 있었던 서버에서 왔습니다 응답을 기반으로 HTML 블록을 만들 수 있습니다 특정 웹 페이지에 추가 스크립트를 추가하려면 데이터 유형으로이 스크립트를 전달하십시오 다음 JSON 형식이 매우 인기있는 JSON 형식입니다 자바 스크립트에서 JSON P가 있으므로 JSON P는 사용할 수있는 객체와 같습니다

다른 도메인에서 데이터를로드하려고 할 때 기본적으로 사용됩니다 여기에 오면 XML이 기본적으로 XML 스키마를 따릅니다 사용자 정의 XML 형식으로 데이터를 전송했으나 거의 모든면에서 철저하게 데이터를 교환 할 수 있습니다 Ajax 기능을 사용하여 거의 모든 종류의 데이터 JSON P에 대해 이야기하므로 동일한 출처 정책이라고하는 무언가가 있습니다 그래서 같은 출처 정책에 따르면 facebook

com/이 Ajax 요청을하는 경우 그것은 페이스 북이 facebookcom 서버에 대한 요청을 자체적으로 만들어야한다 서버의 도메인 이름과 마찬가지로 프로토콜 HTTP 또는 HTTPS 또는 FTP 또는 다른 것 또는 다른 것 포트와 도메인 이름은 될 수 없습니다 다르기 때문에 웹 페이지가 다를 필요는 없다는 것을 의미하지는 않습니다 그 HTML CSS JavaScript 파일을 보낸 사람이 우리와 같은 사람이라는 이것은 대부분의 브라우저가 실행하는 실용적인 보안입니다

다른 서비스에서 데이터를 가져 오려면 어떻게해야할까요? 공급자 나는 당신이 당신의 웹 사이트를 위해 IMDB에서 먹는 사람을 원한다고 가정한다 귀하의 웹 사이트는 imdbcom이 아니며 BC 또는 Ad Reaper cokr 사이트입니다 이를 위해이 JSON P라고하는 무언가가 존재합니다

다른 도메인의 요청이므로 JSON P의 경우 공급자 또는 서비스는 스크립트에로드 할 수있는 스크립트로 응답합니다 페이지에서 스크립트 태그를 사용하면 해당 스크립트에는 당신이 제공하는 콜백 함수는 기본적으로 그것을 회피합니다 데이터 부분을 포함하는 스크립트 제공의 종류에 따른 제한 물론 이것은 손으로 쓰지 않습니다 그래서 스크립트는 특정 문자열 형식을 가지므로 작동합니다 스크립트 언어 PHP 또는 Python 또는 무엇이든간에 생성해야합니다

fly와 JSON P는 주로 다음과 같은 요청을하고 싶을 때 사용됩니다 크로스 브라우저 요청을 사용할 수있는 다양한 방법이 있습니다 jQuery에서 Ajax 요청을 만들지 만 Ajax 메서드는 대부분 선호되고 좋은 연습으로 간주되며 그것은 강력합니다 Ajax를 만들 수있는 많은 옵션을 가진 많은 기능을 가진 메소드 요청하는 것은 구성 가능한 객체이므로 구성 가능한 객체의 의미입니다 방금 설정하고 사용할 수있는 스테핑 또는 옵션 이제 Ajax를 사용하여 요청을 완료하십시오

물론 가서 다양한 옵션을 모두 찾아 보자 당신은 jQuery를 검색 할 수 있도록 처음보기를 가질 수 있습니다 당신은 질의를 검색 할 수 있습니다 당신이 여기서 알아 차릴 것입니다 사용 가능한 옵션이 너무 많아서 사용하지 않아도됩니다 첫 번째 또는 순수한 최초 정확한 요청을하기위한 모든 것이 있지만 자연적으로 나는 그것을 의미하기 때문에 사용할 수있는 옵션이 많이 있다는 것을 알아라

더 나은 방법으로 또는 뭔가 생각한 것을 할 수있게 해줍니다 당신은 할 수 없지만 옵션을 사용할 수 있다는 것을 알게되면 그것을 사용할 수 있습니다 도서관의 특별한 특징과 정말 재미있는 것을 만들어라 그것은 몇몇 옵션을 그렇게 움직인다 그들 중 하나가 비동기 적이기 때문에 기본적으로 사실이 사실입니다

비동기 적으로 동기를 만들 수 있기 때문에 실제로 퀘스트를 수행 할 수 있습니다 면접 시험에서 까다로운 질문이 되겠지만 면접관은 당신에게 묻습니다 동기식 JavaScript Ajax 요청을 가능하게합니다 가능하지만 가능합니다 다른 응답이 수신 될 때까지 코드 실행을 차단합니다

캐시는 무엇을합니까? 기본적으로 캐시는 Ajax의 응답을 캐시합니다 요청하고 동일한 유형의 다른 요청을하는 것으로 보이는 경우 이 요청을 다시하지 않고 내부적으로 처리합니다 complete는 요청이 완료되면 실행되는 콜백 함수입니다 성공 또는 실패 여부와 관계없이 URI가 존재하지 않거나 URL이 반환되거나 오류 500이 발생했다고 가정 해 보겠습니다 그래서 그것은 4 오 4 또는 500 또는 그 밖의 어떤 오류입니다

코드 또는 요청이 완료되면 성공 200을 반환합니다 jquery 호출이 끝나면 결과가 무엇이든간에 하나의 일반적인 사용 사례로 인해 수행해야하는 작업이 적을 수 있습니다 로드를 보여 주거나 Ajax 요청이있을 때 간단한 로더 막대를 보여주고 싶다 요청이 완료되면이 로더 표시를 시작하기 시작합니다 당신은 의존하지 않는 로더 바를 자연스럽게 제거하기를 원합니다

성공 또는 기능의 실패 여부는 요청 여부에 달려 있습니다 오류 요청이 잘되었지만 여전히 로더를 제거한 경우 완료 되었습니까? 그 다음은 데이터이므로, 보내고있는 모든 데이터는 get 요청 – 만약 내가 당신이 그런 질문을한다면 검색 중인지 여부 또는 해당 데이터가 포함 된 게시물 요청을 확인할지 여부 이 매개 변수에서 올 수있는 것을 데이터베이스에 제출하려고합니다 다시 값은 객체 여야합니다 일반적으로 일반적으로 객체입니다 물론 URL 구성 및 모든 항목에 따라 다를 수 있습니다

서버 쪽이지만 JSON에서 좀 더 나은 방법 중 하나는 대화에 있습니다 그 자체로 객체라면 JavaScript 객체이고 Ajax는 기본적으로 그것을 보낼 것이다 JSON과 같은 서버를 가로 지르므로 기본적으로 JSON API를 사용합니다 다음으로 이야기하는 것은 데이터 유형을 지정하는 데이터 유형입니다 서버에서 기대하는 데이터의 종류를 지정하십시오

다음에 서버가 오류라고하는 것을 사용합니다 이제는 단락 함수가 화살표에 요청할 때 단락 함수입니다 JSON 옆에 쿼리 문자열로 전송되는 콜백 이름을 지정하고 이 요청과 기본값에 그냥 콜백 트럭 요리사입니다 이것은 함수입니다 요청이 완료되고 모든 것이 완료되면 호출됩니다 200의 상태 코드가 완료되었습니다 이제 데이터가 반환되었습니다

Nexus 시간 초과가 필요하다는 것을 나타냅니다 시간을 밀리 초 단위로 지정합니다 기다렸다가 실패 요청자를 고려하십시오 그래서 여기에서 지정하면 1000 밀리 초를 기다리십시오 이것은 1 초와 같지만 그 후에는 응답을 보내지 않으면 실패에 대한 질문을 고려해야합니다

이것이 타임 아웃을 구축하는 응용 프로그램의 종류라고 가정 해 봅시다 그 유형에 도움이되는 것은 HTTP에서 사용하는 동사의 종류입니다 게이터 또는 게시 또는 지원 또는 삭제 기본값은 이제 당신이됩니다 물론 URL을 요청하십시오 이렇게하지 않으면 아무 일도 일어나지 않습니다 필수 옵션입니다

그 밖의 모든 것은 단지 필수 구성이거나 다른 모든 것입니다 선택 사항이므로 간단한 예를 들어 보겠습니다 예를 들어 보겠습니다 여기 실제로 꺼내기 기능을 사용하면이 기능을 변경할 수 있습니다 권리 당신 그래서 이것은 자바 스크립트 객체와 같습니다

이것은 자바 스크립트 객체입니다 난 그냥 여러 가지 매개 변수로 오류와 함께 완료 고려 중입니다 성공과 데이터 우리는 타입에 대해서도 명시 할 수 있습니다 이 데모를 위해 JSON 요청을 할 것입니다 매개 변수를 사용하여 타임 아웃을 사용하자 2100으로 설정하자

그리고 우리는 좋다 이제 URL에 대한이 작업을 수행 할 수 있다고 생각합니다 또한 뭔가를 시험해 볼 때마다 JSON URL처럼 필요합니다 여기 가면 내가 갈 수 있기 때문에 여기있는 JSON을 직접 만들 수 있습니다 당신 창조의 길 우리는 여기에 우리의 접근 URL을 보았습니다

JSON은 단순한 JSON이 아니며 여기에 URL을 전달할 수 있습니다 이 페이지를 회전 시키세요 좋아, 그렇게하지 않을 경우를 대비하여 버튼이 피어링된다 네트워크 탭이라고하는 뭔가가 있기 때문에 일단 디버거를 열면 네트워크 탭이있어서 Ajax 요청을 위해 매우 유용하다 그것은 xhr로 불리는 어떤 것을 가지고 있습니다

이것은 여러분이 모든 Jax를 볼 수있는 곳입니다 당신의 웹 페이지가 이제까지 만들 것이라는 점을 요구하십시오 이것은 너 자신을 위해이지 않는다 이것은 귀하의 웹 사이트를위한 것이 아니라 모든 웹 사이트를위한 것입니다 youtubecom으로 이동하여 네트워크 탭을 열어보고 xhr을 클릭하면 해당 요청을 모두 볼 수 있습니다 버튼이 자동으로 표시되므로 요청이 있으면 요청이 올바르게 처리 된 것입니다

만들었고 당신이 전화를했다는 것을 제외하고는 이것과 같은 반응을 보았습니다 jQuery를 찢어서 콘솔의 성공과 데이터를 얻은 다음 완료되면 URL이 변경됩니다 조금이라도 요청이 실패 할 것입니다 어쨌든 제가 제거한 7 개였습니다 이제 7 명이 페이지를 새로 고침하고 이제 나에게 실패하자

그러나 화살로 끝난다 왜 이것이 중요한가? 이 상황을 처리 할 수 ​​있도록 중요하다 여기에 화살표를 밀어 넣으면 뭔가 잘못 된 것처럼 보입니다 이에 나중에 다시 시도해주세요 물론 그들은 물론 비슷한 요구를합니다

데이터를 가져 오는 중입니다 그런 다음 HTML로 설정합니다 문제가 있다면 지원을 위해 손을 뻗어보십시오하지만 꽤 예쁘 네요 내가 그렇게해야하고 진술을로드하는 것이 그렇게 많이 나타났습니다

HTML에있는 뭔가와 그래, 이걸로 충분할거야 사용 가능한 다른 거부 메소드 중 일부를 살펴 보도록하겠습니다 달러 게이트 그래서 사실 나는 우리가 이것을 위해 달러 게이트를 사용할 수 있다고 생각한다 우리는 여기서 알라 신 게이트를 처리 할 것입니다 URL은 GSR이 될 필요가 있습니다

동일한 URL 기본적으로 요청이 완료된이 기능이 있습니다 동일한 트리 객체는 기본적으로 우리가 말하고 싶은 데이터이지만 이 경우 쿼리 매개 변수가 없으므로 그것과 여기는 서버 응답이므로 우리의 달러를 사용해 봅시다 get 내가 할 일은 원래 Ajax 요청을 음소거 한 다음 이것을 시험해 볼 수있다 내가 구문 오류를 만든 것처럼 보자 9:54 당신 그래서 네가 본 것처럼 우리는 단순히 이런 요청을 할 수 없다

그리고 이제는 당신이 얻는 달러와이 세상이 완벽 하리라 생각합니다 우리를 위해 잘 그리고 지금 우리는 콘솔에 요청 완료 변수가 인쇄되어 우리에게도 사용 가능합니다 내가 만들고 있던 열쇠가 열쇠 였어 하나는 이제 작동 할 것입니다 나는 단지 그것을 패치하려고했습니다

매개 변수가 필요합니다 단지 참여한 실수 일뿐입니다 기억해주십시오 Ajax와 같은 객체를 사용하지 않습니다 이미 JSON 요청이 될 것임을 알고 있습니다

이스케이프 JSON이라고 불리우거나 다음과 같이 간단히 URL을 지정할 수 있습니다 당신은 당신이 데이터 객체를 전달할 수있는 모습을 가지고 있으며 응답을 전달할 수 있습니다 응답은 간단합니다 함수가 될 것입니다 우리는 조절견을 말할 것입니다

로드 됨 나는 맞춤법 오류를 만들었다 고 생각합니다 그래, 그것도 ortho 컵에 kgs이고 우리는 콘솔에 그것을 볼 수있다 JSON을 사용하면 터빈에서 요청을 볼 수 있습니다 다시 보여 드리겠습니다 get JSON을 사용하여 호출합니다

마찬가지로 post 메소드를 사용하여 데이터 값을 약간 사용했습니다 함수를 호출하고 현재 예상되는 응답을 지정합니다 매우 흥미있는 무엇인가 달러 점 두포라고 이름이 지어지는 이것은 전체를 뻗는다 URL에서 가져온 HTML을 사용하여 무엇을 할 것인지 신속하게 알려 드리겠습니다 컨테이너 div 여기 그리고 난 그냥 테스트 또는 HTML 그냥이 h2 차례가 포함되어 있습니다 어떤 문제도 포함 할 수 있지만 여기에 지금 내가 할 일이 포함되어 있습니다

테스트 나 HTML을로드하려고 시도합니다 HTML에서 테스트를로드하려고합니다 컨테이너에 들어가면 어떻게 할 수 있는지 보자 이것은 매우 유용합니다 왜냐하면 당신이 방어해온 구성 요소들을 정렬 할 수있게 해줍니다

여러 페이지에서 HTML의 다른 섹션을 재사용합니다 그래서 이것이 매우 인기 있고 흥미로운 아이디어입니다 재사용 가능한 구성 요소를 사용하여 더 작은 버전의 HTML 파일을 만들고 일반적인 색상으로 묶어서 여러 곳에서 움직이기 때문에 직렬화와 Cyril RA 그래서 그녀가 실현 한 것은 그가 형식을 깨닫는 것입니다 쿼리 문자열로 직선적으로 들어가고 입력 요소에는 name 속성이 있어야합니다 입력 형식에 이름이 없으면 오늘 밤에 말할 수 없으므로 속성을 직렬화 할 수 없습니다

그렇다면이 방법은 이것을 serialize하면 게시 요청을 키 값 쌍을 원하는 서버에 알려줍니다 헤이,이 데이터는이 특별한 가치입니다 그렇지 않으면 어떻게 알게 될까요? 그 이름이 성이라면성에 대한 성은 무엇인가? 이름이 걸린 작업을하는 중간 이름입니다 사용자의 성함 그리고 그것을 적절하게 저장하여 어디서나 사용할 수있게한다면 그래서 직렬화가 왜 다시 활용하는 데 도움이 될 수있는 것과 비슷합니다 활용하지만 문자열 대신 RF 객체를 생성합니다

이상하지만 완성 된 나는 개체의 배열을 재현한다 아이리스가 어떻게 자신감을 지녔는가에 따라 더 유용 할 것입니다 이것들은 jQuery 웹 사이트 자체가 매우 훌륭하다는 것입니다 이것의 데모와 내가 점차적으로 똑같이 거기에서 똑같이 보여줄 것입니다 여기에 오시면 우리가 가지고있는 것은 다른 다중 입력 그래서 하나의 입력을 선택하자

어떤 체크 박스도 선택하지 말고 선택하자 두 라디오 버튼 그래서 만약 당신이 단일보고 단일에 여러과 동일합니다 여러 사람과 같음 나는 또한 하나를 선택할 수 있으므로 여러 사람이 하지만 그것은 여러 배가 될 것이고 라디오는 라디오와 동등 할 수 있습니다 다른 라디오 버튼을 선택하여 라디오를 만들어야 왜 내가 아직 하나를 체크 할 수 있는가? 이것이 실제로 일어나고있는 방식으로 출력 강도가되도록 큰 체크를합니다 이 입력 양식이 귀하의 오른쪽에있는 양식을 보자 변경 사항에 따라 Donna가 변경 사항을 기반으로 선택합니다

다른 입력 상자에이 중 하나를 변경하면 값이 통화로 표시됩니다 드롭 다운, 멀티 선택, 체크 박스 또는 라디오 버튼은 show value 또는 show values라고하는이 메소드를 호출합니다 그것은 개가 다음 전체 것을 취하는 형태 객체를 취하는 것입니까? 그냥 serializer를 호출하는 것이 좋습니다 그게다고 문자열이옵니다 문자열과 그것을 우리가 전환 할 때이 결과에 추가하여 우리가 당신이 대신에 모든 가치를 가지고 있다는 것을 알기 때문에 그렇게 간단하게 볼 수 있습니다

하나 하나 하나 하나씩 하나 하나씩 모든 입력을 선택하면 당신을 위해 자동적으로 가치를 얻을 수있는 아주 아주 멋진 방법 문자열이지만 폼이나 옵션을 선택하지 않고 serialize 메서드를 on으로 호출하면됩니다 그것은 여기에 배열을보고 약간의 거짓말을 본다 예제는 꽤 많이있다 비슷하게 실행은 약간 더 깔끔합니다 그것은 ArrayList를 유지하고 나는 더 나은 문자열 아티스트를 가지고 있다는 것을 의미한다

작고 쉽게 오염 물질이 많아서 우리는 각 기능에 치코를 사용했습니다 기본적으로 다시 비행하는 9 발을 보면서 들판을 통과했다 우리는 그것을 읽고 위에 결과를 여기에 표시하여 Dean이 소스 요청을 사용하여 서버에 데이터를 제출하는 경우 매우 유용합니다 이제는 jQuery 유틸리티에 와서 달러가 우리에게있는 것이 아닙니다 과거에 이미 시작된 것입니다

기본적으로 값의 배열을 취합니다 그들 하나 하나 하나씩 차례로 거래하므로 우리는 단지 물건을 가져갈 수 있습니다 또는 배열 및 qidan 값을 전달하고 그들은 전체에서 가정합니다 그래서 그것은 매우 쉽고 편리한 방법이고 그것을 사용하는 것이 좋습니다 것이 Carnation for loops를 사용하면 코드가 좀 더 멋지게 보입니다 깔끔하고 정리 된 것은 당신이 알고있는 것보다 물론 for 루프를 쓰는 것을 압니다

그 안의 물건은별로 바뀌지 않을 것입니다 그렇지만 그것은 단지 훨씬 더 깔끔합니다 대형 응용 프로그램에 대한 내 경험에서 훨씬 더 강력하고 무언가를 사용합니다 for 루프로서 거의 모든 곳에서 사용할 수 있습니다 물론 jQuery에서는 요소의 전체 세트를 원한다면 원하는대로 작업하십시오

나는 당신이 링크 내부의 링크 값을 얻고 싶을 것이라고 생각한다 당신이 나에게이 코드 스 니펫으로 태그를 붙이면 거래를하게됩니다 모든 Li 요소에 대해 e 태그의 스 니펫을 가져 와서 상담하거나 기록하십시오 다음은 지금지도입니다지도는 매우 유용합니다

배열과 당신은 그것을 포함하고있는 다른 것을 다시 만들고 싶습니다 대문자로 바꿔서 변경하지 않으려는 이름의 목록을 가져 가고 싶습니다 원래 하나를 만들었 으면서 새로운 것을 만들려고했다 수정 또는 일종의 달러 닷지도가 오는 곳으로 변경 너는 여기서 몰리와 리비라는 이름을 알아 차린다 이름과 이름에 대한 흔적은 공간에서 분할됩니다

그 (것)들을 나누고 선물하기 위하여 말할 어떤 것이 든 포함한다 내가 기록한대로 너는 여자들을 우스운 종류로 폭발 시켰지 만 그래 그게 뭐야 달러 도트 맵은 일을 처리하는보다 강력한 방법 중 하나입니다 달러 도트 트림은 단순히 트리밍 기능이므로 작은 것을 보여줄 수 있습니다 여기서 데모를 해보니 이 그래서 그것은 중앙의 공간이 아닌 초기 공간과 끝 공간을 제거하지만 DNA에서 시작 부분의 공간을 제거합니다 당신은 유틸리티 함수라는 것을 알기 때문에 사용자를 트리밍해야 할 수도 있습니다

서버에 보내기 전에 입력을해야합니다 아니면 정리 만하면됩니다 손상되었거나 손상되지 않았으므로 서버에 올라온 데이터 그러나 당신은 그것이 깔끔하게 유지되지 않는다는 것을 알고 있습니다 특정 선수 제한이 배열에 있다면 다음 배열 검사에 도움이됩니다 물론 지금은 자바 스크립트에서 다른 메소드도 있지만 다음 이것은 jQuery에서 사용할 수있는 매우 유용한 유틸리티 기반 함수입니다

배열로 전화해라 그러면 우리는 말할 수있다, 그리고, 당신은 우리가 여기에서 볼 수있다 거기에 없다면 음의 값을 반환하고, 그렇지 않으면 반환합니다 인덱스 그래서 기본적으로 인덱스를 반환합니다 괜찮아요 그래서 조건은 최종 결과가있는 경우 무언가가 영역인지 여부를 실제로 확인합니다 이 값이 음수 값보다 크면 음수가 아니라면 참값이됩니다

하나는 100이 일기에 있는지를 확인하고 있다고 가정하면 지금은 거짓입니다 그 중 하나가 호출되는 다른 유틸리티 함수가 있습니다 특정 물건이 기능인지 또는 매우 흥미롭지 않은지 확인하십시오 당신이 재미있는 방법으로 알고 있도록 시도해보십시오 그래서 그것은 달러 점에 대한 함수입니다

각각 그리고 그것은 사실 배열을 hollering 여기 기능을 예 jQuery입니다 우리 모두가 창 객체를 본 함수를 사용하십시오 함수가 없으면 함수가 아닙니다 우리가 표시하면 객체입니다 이런 식으로 뭔가를 호출하면 그 함수는 모두 거짓말입니다 뭔가를 확인하는 편리한 방법 뭔가있는 유형의 경우 다음으로 우리는 무엇이라고 불리는 것을 가지고 있습니다

비행기 개체 그래서 내가 지금 막 설명했던 것과 같이 우리가 창 함수는 평면 객체이므로 평면 객체가 아닙니다 유럽 ​​객체 창은 평면이 아닌 객체이지만 평면 객체입니다 여기이 경우에는 달러 달러가 객체를 얻지 못했습니다 jQuery는 평면 객체가 아닙니다 – 그의 도끼에 관한 모든 것 Colorado Ajax 다른 평면 객체이지만 높이가있는 점 Ajax 우리의 기능 그렇습니다

Ajax의 딸은 비슷한 기능을 가지고 있습니다 어떤 것이 배열인지 또는 매우 유사한 방식으로 작동하는지 검사하기 우리가 다루어야 할 다음 주제는 지연 객체 또는 그러나 JavaScript 나 jQuery에서 지연된 개념을 사용하기 전에 여기로 가보겠습니다 내가 문제의 진술을 소개해 줘 좋아 말하자고 가정 해 봅시다

LED를 넣고 여기에 올려 놓거나 우리가 할 일은 사용자 세부 정보 및 결과의 가치를 부여 할 예정이므로 웹에서 세부 사항에 직면 한 다음 지금 내가 한 일은 내가 아약스를 불렀고, 잭스가 그냥 콘솔 도트 로그 사용자 세부 정보를 배치했습니다 정확한 진술이라고 아무것도 사용자가 처음에 무엇을 할 것으로 예상합니까 잠시 아무것도 어떤 가치가 없다면 아약스 전화를 한 다음 인쇄하려고합니다 콘솔에서 세부 사항에 대한 정보를 얻고 응답을 기다립니다 세부 사항을 인쇄 할 것을 기대하지 않거나 세부 사항이 아니라는 것을 예상하고 당신이 무엇을했는지 결정했다고 가정하십시오 우리는 실제로 그것이 무엇을 할 것인지를 보자 이 그래서이 952를 보면 이것이 정의되지 않았다고 말합니다

이것은 정의되지 않았지만 한 번입니다 우리는 41이 성공했다고 말한다 우리가 아약스 치료라고 부른 이유는 무엇일까요? 성공했다는 것은 네트워크 탭이 성공했다는 것을 의미합니다 데이터를 가지고 있지만 우리가 뭔가 잘못되어 간 것처럼 보입니다 그래서 여기에 그것은 비동기 적이기 때문에 그것을 기억하십시오

JavaScript는 이것을 호출하고 다음 줄로 이동합니다 JavaScript는 이것을 호출하고 다음 이름으로 이동 한 다음 응답을 보냅니다 자바 스크립트가이 함수를 실행할 서버에서 다시 온다 비동기식입니다이 모든 일이 요청이 성공적으로 완료되어 콘솔 도트 로그가 항상 표시됩니다

여기에 정의되지 않은 사용자 세부 정보는 실수가 아닙니다 이것은 기본적으로 아약스 웹의 개념을 이해하지 못하고 있습니다 복잡한 애플리케이션을 다루거나 복잡하지 않은 경우 응용 프로그램이지만 업계 수준에서 알고있는 것보다 더 많은 것 이러한 상황에서 응답이 결정될 상황을 다루려고합니다 특정 아약스 호출이 발생할 수 있으며 각 행위의 응답이 호출 어떤 다른 일을하고 싶다 그래서이 모든 것을 어떻게 관리 하는가? 왜냐하면 당신이 그 퀘스트가 해결 될 때까지 기다리고 있다면 나는 내가해야할 일은 내가 영화 목록을 API 호출에 의한 IMDB 및 API 호출에 의한 잘못된 IMDB 영화 목록 가져 오기 나는 2 시간이 넘는 영화를 골랐다

영화 목록은 또한 그 영화를 찾은 후에 각 영화의 길이를 가지고 있습니다 액터 목록에 대한 또 다른 API 호출을 만들어야합니다 액터 목록에 대한 또 다른 API 호출은 액터 목록에 Tom Hanks 그 안에 T가 첫 번째 이름 인 문자 T가있는 특정 배우가 있습니다 세부 정보를 얻는 데 필요한 배우의 이름으로 Thomas litter t 개별 API 호출이므로 URL 호출이거나 맞아요 첫 번째는 영화의 목록을위한 것입니다

그 특별한 영화에서 그 영화 속의 배우들과 다른 영화 속의 배우들을 요구하고 있습니다 배우의 이름 일 수도 있고 이름의 길이 일 수도 있습니다 배우 그래서 기본적으로 우리는 모든 배우를 가진 모든 영화를 원합니다 이름은 문자 T로 시작하고 둘 이상의 영화에 출연했습니다 2 시간 동안 나는 그것이 상상할 수있는 시나리오가 아니라는 것을 알고있다

이것이 우리가하고 싶은 일이라고 추측 할 수 있습니다 경험이 많은 개발자라면 비즈니스 로직을 믿어주세요 이보다 더 복잡한 사례를 보았을 것입니다하지만 개발자가되면 한 번 놀라지 않을 것입니다 3 ~ 4 년 동안 업계에서 일하면서 어떻게 대처합니까? 이 물론 하나의 대답은 내가 뭔가를해야한다고 가정 해 봅시다

그 결과로 내가 여기있는 조건과 내가 조건을 가지고 있다고 가정합시다 또 다른 Ajax 콜을 만들어서 간단히 할 수있다 다른 Ajax 호출을 작성한 다음 다른 Ajax 호출을 작성할 수있다 성공이라고 불렀고 나는 또 하나 쓸 수 있었다 그런 다음 계속해서 계속해서 그것에 대해 생각하는 순진한 방법이 있습니다

그것에 대해 생각하는 기본적인 방법은 AJAX 호출이있을 때 괜찮습니다 성공하면 다른 것을 만들 겠어 또 하나 만들게 나는 다른 것을 만들 것이다 그러나 그때 당신은 정말로 어느 시점에서 너 자신에게 물어봐야한다

이것이 디버깅하기가 매우 어려울 것이기 때문에 어디에서 끝나는가? 우선 디버그하기가 어려울 것입니다 이 경우에도 오류가 발생하여 쿼드가 배출되면 잘못 될 수 있습니다 두 번째로 너무 많은 것을 통해 이런 종류의 상황은 실제로 자바 스크립트는 콜백 지옥이라 불리우는 바이 덜 바쁜 용어로 바니와 콜백 지옥이라고 불리는 용어를 조정하십시오 실제로 가지고 있다면 지옥입니다 뭔가를 디버깅하려면 복잡한 비즈니스 로직이 많고 자바 스크립트 커뮤니티의 사람들은 이것을 이것을 잠재적 인 것으로 보았습니다

문제는 다가올 복잡한 애플리케이션이 매일 올라오고있어 그냥 블레이크가 일어날 수밖에 없었어 너는 너무 부자가된다는 뜻이야 오늘 인터넷을위한 웹상의 응용 프로그램은 이것이 일어날 수밖에 없습니다 이제 그들은 지연 객체로 불리는 것을 생각해 냈습니다 보류 상태에서 시작하여 이제 우리는 그 올바른 달러 점 e를 식별 할 수 있습니다

잭은 출력이 정의되지 않은 보류 상태에서 시작하지만 아직 알지 못합니다 그것이 성공 또는 실패라면, 내가 당신에게 말했을 때, 헤이 나는 Ajax 호출이 해고되었지만 여기서 끝내고 뜨거운 바위를 팔았지만 우리는 그것이 완료되었는지 알 수 없으므로 요청이 대기 중 상태에 있습니다 우리는 서버가 어떻게 응답 할 지 아직 알지 못했고 지연된 객체는 기본적으로 두 가지 중요한 메소드가 있습니다 그 중 하나가 결과 또는 jQuery AJAX 메서드의 거부는 지연된 개체에 대한 resolve를 호출합니다 요청이 성공하면 리턴하고 요청이 성공하면 요청은 실패이며 해결 및 거부 모두를 수동으로 실행할 수 있습니다

수동으로 생성 된 모든 지연된 객체이므로 여기에 대해 생각할 필요가 있습니다 내부적으로이 Ajax 함수 내부에 있으므로 두 번째 jQuery에서 작성된 각 호의 함수로 불리는 것이있다 정확하게 뭔가를 호출하고 옵션을 걸리는이 같은 지금 그들이 한 것은 무엇입니까? 지연된 개체는 미안 해요 Capaldi 그래서 이것은 Ajax 함수가 어떻게 보일지에 대한 의사 코드이다 jQuery 코드 기반의 측면에서 이제는 이것이했을 것입니다

요청을 받으면 뭔가를 요청했을 것입니다 그들이 무엇을했는지를 완료하면 해결됩니다 옵션 시작 성공 이런 식으로 부름 받았을 거고 REO 어느 쪽이든 이렇게 부름 받았을 것입니다 내부적으로 작업하면 수행 할 작업을 지정하지만 작업의 수행시기는 지정해야합니다 실제로 이런 일이 발생하는 것은 내부적으로 어떻게 일어 났을 까하는 것입니다

응답이있을 때 아직 알지 못하는 지연된 결정입니다 그 초기 요청을 해결하거나 거부 할 것입니다 그들은 그것을 해결하고 있거나 거부하고 있습니다 그래서 그들은 이것을 호출 할 것입니다 object right 이것은 옵션입니다

method options 옵션은 다음 중 하나입니다 options 매개 변수에 들어오고 거기에 정의 된 success 메소드가 있거나 그것은 그것에 정의 된 오류 메쏘드를 가지고 있습니다 해결 방법은 옵션 또는 성공 방법을 호출해야합니다 거부가 발생하면 옵션 도트 오류 메서드가 지연된 객체를 호출합니다 done 콜백 함수 또는 always 콜백 함수라고 불리는 다른 콜백 함수가있다

Manly 없이도 여러 명의 청취자가 e Jax 이벤트를들을 수 있습니다 콜백을 연결하는 체인 콜백을 호출하면 이전에 여러분에게 설명했듯이, 그렇게하면 매우 유용합니다 당신은 여러 개의 청취자에게 e Jax 이벤트를 보내고 시나리오에 응답해야합니다 jQuery에서 얻는 것에 따라 다른 방식으로 약속이라고 부르며 연기 된 대상을 기반으로하므로 파생됩니다 지연된 객체에서 가져온 것이지만 지연된 객체가 아닙니다 서브 세트입니다

그것의 한 가지 방법은 당신이 가지고있는 읽기 전용 지연 객체라는 것입니다 콜백을 첨부하는 메소드는 해결할 금속이 없거나 거절 한 그래서 그것을 보는 한 가지 방법은 생산자가 연기 한 것입니다 실제로 작업을 수행하므로 실제로 Ajax가 올바르게 호출 할 수 있습니다 어디에서든지 지연이 정의되었지만 약속이 반환되므로 함수가 이것은 아마 뭔가를 돌려 줄 것이라는 점에서 약속을 되 돌린다 요구 도트 약속이라고 불리는 지금 약속은 소비자이다 그래서 약속은 무엇을 할 것인지 결정할 때이다

함수가 반환됩니다 예를 들어 보겠습니다 친구 한테서 전화해서 친구 한테 전화 해봐 너는 나에게 친구가 말한 쪽지를 주노라 나는 약속을한다

나 너에게 노트를 가져다 줄 것이므로 너는 친구와 가진 약속이 아니다 친구가 약속을했다는 약속은 친구가 약속이 성공하든 실패하든 이제는 약속하겠다 너의 것이지 만 그 메모를 요구하기 위해 할 수있는 것은 아무것도 없다 기차가 성공하거나 실패 할 때 나는 물론 당신이 그들에게 인센티브를 줄 수 있음을 의미한다 나는 당신이 메모에 도착한다면 당신에게 치료를 줄 테지만 그것은 실제 세계이지만 여기에 있습니다

당신은 이상적인 세계 시나리오에서 그들이 생각하는 친구가 친구는 메모를 xeroxed 받아야 그들에게 줄 수 있습니다 – 당신은 이미 그들을 가져와야합니다 다른 누군가로부터 얻은 것이지만 그들을 찾아야 만 실제 작업이 만약 당신이 노트를 얻으면 당신의 답은 다음과 같을 것입니다 메모가 거부되면 귀하의 응답은 다른 사람에게 전화하는 것일 수 있습니다 친구가 요청을 받으면 그것을 방어합니다 기본적으로 그는 즉각적으로 메모를하지 않는다는 의미에서 청색의 부분에서 그를 불러내는 사람은 그 메모가 없습니다 즉시 그리고 그는 내가 당신을 위해 그들을 얻을 것 인 ok를 말한다

그래서 이것은 시나리오가 아니다 이봐, 네가 나에게 그 노트를 줄 수 있겠 니? 그 시나리오는 시나리오가 있다면 내가 당신에게 그것을 줄 것이다 나는 약속하겠다 그것을 당신에게 주겠지 만, 아마 명시 적으로 말하지는 않는다면 그들은 그것을 말합니다 그것은 맞습니다 약속 예입니다

저는 여러분에게 메모를 줄 것이며, 그들은 Efford 상황에 대한 메모를 줄 것입니다 그것은 연기 될 때까지 그리고 그들이 당신에게 돌아 오지 않는 한 그것이 다릅니다 큰 의미있는 차이와 약속은 제한적이라는 점에서 유용합니다 그들이 그렇게 할 수있는 측면에서 당신은 분명합니다 당신의 반응은 jQuery에서 정확한 것입니다

메소드는 3 가지 주요 메소드가 있다는 약속을 리턴합니다 항상 내가 할 수있는 일은이 일에 대한 것입니다 나는 내가 할 수있는 일을 부를 수있다 세부 이것을 시험해 봅시다 그리고 이제는 69 행에서 작동했습니다

너는 여기서 물어볼지도 모르지만 나는 여기서 똑같은 일을 할 수 있었다 내가 콘솔 점 로그를하고 있기 때문에하지만 원래의 예제를 기억하기 때문에 콜백 지옥 이제 다른 Ajax 함수를 호출하기에 좋은 곳이다 Jax 함수를 호출하기에 더 좋은 장소입니다 너는 이것의 종류를한다 그 때 너는 다음 3 개의 잭을 부르 십시요 또한 부른다 그리고 나서 항상이 Clearfield가 기본 콜백입니다 거부 된 요청은 항상 무엇이든지 상관없이 항상 호출됩니다

내가 보여 주던 것과 거의 비슷한 간단한 예입니다 함수를 Ajax 응답으로 호출하면 개별적으로 정렬 할 수있다 이것을 설정하는 것이 훨씬 더 깨끗합니다 물론 나는 그것을 첨부하고있었습니다 너는 여기에 있었지만 나는 이것을 할 수도 있었다

좋아, 이제 이건 요청이야 나는 이것을 할 수 있었다 그러니 가볍게 생각하지 마라 오 이런 생각 일 뿐이야 가독성에 대해서는 있지만 가독성 문제는 상당히 중요합니다

코드 십일 십만 번 코드베이스에서 작업하는 것을 상상해보십시오 정말 빨리 제어 할 수 없게됩니다 당신이 그것을 깨닫기 전에, 당신이 그것을 기다리지 않고 살아남을 수 없다는 것이 아닙니다 거기에 더 많은 것을 약속하는 개념은 당신이 할 수있는 것과 나는 사람들을 보았습니다 그러나 이런 것들을 배우고 최선을 다하는 것이 훨씬 낫습니다

그들이 생각하는 또 다른 개념이 있습니다 그래서 저는이 Ajax를 만들고 있습니다 몇 번이고 다시 전화 해 나는 인터넷 전화를하고있다 저장하려는 결과를 저장할 위치의 캐싱 개념 지금 결과로 얻은 결과는 매우 단순한 캐시 여기 기술은 당신이 요청을했고 약속을 객체의 값은 모든 것을 잊어 버리십시오

요청의 ID가 다음과 같은 경우 첫 번째 유형에 대한 요청을하는 경우 그들이 내가 1 2 3 4 개의 ID로 노래를로드한다고 가정하는 감각 다섯 곡짜리 건물과 곡 하나가 아직로드되지 않았다 이 조건이 맞을 때가되어 약속을 저장하고 싶을뿐입니다 약속을 저장합니다 결과를 저장하지 않습니다 나는 단지 약속을하고 있습니다

지금이 결과는 물론 지금은 정말로 결의안을 거부합니다 그 일은 내가 지금 전화가 끝났을 때 전화를 받았다는 것입니다 처음 약속이 없을 때 이것은 매우 흥미롭지는 않지만 때 이 블록을 두 번째로 호출하는 음란 노래를 호출하면 if 블록이 더 이상 사실이 아니기 때문에 내부에 가지 마라는 약속 때문에 캐시 객체 내에 이미 존재하고 그 위에 점을 호출해야합니다 그래서 요청은 요청을 다시 호출하지 않을 것입니다 다시 한 번 요청되지 않을 것입니다

완료되었습니다 그래서 그것은 이렇게 일종의 전화가 될 것입니다 네가 10 장 챕터의 네 권을 얻었고 그 챕터는 열 장이다 그가 당신에게 당신이 만든 노드를 당신이 바로 바른 메모를 읽고 싶다면 지금 약속을 전달합니다 여기서 콜백 함수는 콜백 함수가 수행해야하는 작업입니다 한 번 특정 챕터의 노트가 발견되면 네 친구에게 전화 할 필요가 없어 내가 할 수있는 메모가 필요해

당신에게 주어진 것을 의지해서 현금은 아무것도 아닌 스토리지 일뿐입니다 메모를 가지고 있고 이제는 대신 메모를 저장 한 것과 같습니다 이 상황을 친구에게 물어 보면이 블록은 8 장의 노드가 없어져서 그를 불렀고 약속을했다 너와 너에게 너는 일종의 어딘가에 그것을 썼다 약속이 성취되면 지금 내게 줄 것이 야

그때까지는 메모를 읽을 수 있지만 그 전에는 메모를 읽을 수는 없습니다 약속이 성공적으로 전달되면 메모를 읽을 수 있습니다 한 번은 여러 번 읽지 만 여러 번 읽습니다 콜백이 무엇인지 알려주 죠 여기 콜백이 노래를 재생한다고 가정 해 봅시다

또는 오른쪽 또는 홀수의 노래를 불러 와서 노래 때마다 나는 콜백을하지 않았을 때마다 그것이라고 부르지 않는다 그 데이터를 몇 번이고 다시 불러올 것입니다 다시 전화 할 것입니다 이 약속이 원래 약속 인 콜백 데이터가 어획 된 것이고 당신이 그걸로해야 할 일이다 이제는 여기에서 또 다른 것은 점 주 기능이고 다시 이것은 직접 여기에서 콜백을 처리하면 내가 볼 수있는 것처럼 보여줄뿐입니다

이것은 콜센터 콜에있는 콜과 같습니다 순서대로 노래를 불러오는 중 하나 2 3 당신은 당신이 할 수있는 일은 노래에 로드 된 그래서 이것은 당신이 이것을 읽어야하는 방법입니다 달러 점은 연기되었지만 사람은 그들이 달러 문설주라고 생각한다 여기에 모든 세부 사항을 쓰려고하면 노래라고 가정 해 봅시다 ID 하나 그래서 나는 그러한 요청을 n 번 전달할 수 있고, 일단 그것들 모두가 그때 나는 초안을 말하고 있는데, 그들은 노래가 내가하고 싶어하는 것이라고 생각한다

세 곡 모두를 불러 들여서 그 고통이 도움이되는 곳입니다 우리가 제공하는 모든 요청의 관점에서 그리고 물론 그들은 Flickr API에서 사용하여 지연 객체를 만들었습니다 그들은 데이터에 걸린 요청을 한 다음 문제를 해결합니다 응답 데이터를 백업 한 다음 달러 도트 통증이 있습니다 TFT에서 호출되기 때문에 단계 2에서 먹는 것이 완료되면 그렇게 설정됩니다

도트 맨을 사용하여 Hellyer 콜백을 피하고 있습니다 L에 합류해서 좋은 하루 되세요 그래서 훌륭한 세션 하나에 대해 감사드립니다 관련 질문이 있으면 유익한 정보를 얻으 셨기를 바랍니다 이 세션에서 아래의 댓글 섹션에 의견을 남기십시오

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

Learn JavaScript in 60 Minutes | JavaScript Crash Course | JavaScript Tutorial | Edureka

넷스케이프 커뮤니케이션즈 (Netscape Communications)는 웹이 동적 인 지금 그들은 애니메이션 상호 작용과 다른 형태의 작은 것을 원했습니다 미래의 웹의 일부로서의 자동화가 이제 목표는 웹을 확장하면 자바 스크립트가 탄생했습니다

안녕 모두 Edureka의 Sayantini입니다 오늘 세션에서 우리는 60 분 안에 자바 스크립트를 배울 수 있습니다 이제 오늘 세션으로 시작하기 전에 의제를 간략하게 살펴 보겠습니다 오늘 세션에서 나는 자바 스크립트에 대해 가장 많이 묻는 질문에 대답 해주세요 먼저 JavaScript가 무엇인지부터 시작해 보겠습니다

JavaScript가 할 수있는 것, 그리고 우리는 계속 나아갈 것이고, 코드가 어디서 움직이는 지 볼 것입니다 마지막으로 JavaScript 이동의 다양한 이점을 살펴 보겠습니다 우리는 또한 개발 환경의 설정이나 여기서 IDE를 사용하고 마지막으로 몇 가지 기본 사항을 보여줍니다 자바 스크립트에서 코드를 작성하는 법을 배우는 데 도움이되는 자바 스크립트 지금 우리가이 모든 질문에 대답하기 시작하기 전에 구독하는 것을 잊지 마세요

Edureka youtube 채널 최신 기술과 연결 유지 그래서 JavaScript를 시작해 봅시다 이제 javascript는 기본적으로 고수준의 인터프리터 프로그래밍 언어입니다 웹 페이지를 더 대화식으로 만드는 데 사용됩니다 Brendan Eich가 10 일 동안 자바 스크립트를 만들었던 1995 년 여러 버전의 업데이트를보고 다음 단계로 성장했습니다 이제 자바 스크립트는 기본적으로 웹 언어이므로 웹을 만드는 데 사용됩니다

그것보다 더 정밀하지 않기 위해 움직임을 추가함으로써 살아있는 것처럼 보입니다 그것은 프로그래밍입니다 복잡하고 아름다운 물건이나 디자인을 구현할 수있는 언어 이제 웹 페이지로 이동하여 무엇을 할 수 있는지 알아 봅니다 javascript는 기본적으로 왜 우리가 필요한지에 대한 많은 쿼리가 있습니다 JavaScript와 이미 HTML과 CSS가 있지만 JavaScript가있을 때 할 수있는 일 언어로서 당신은 단지 gawk보다 훨씬 많은 일을 할 수있는 웹 사이트를 구축 할 수 있습니다

지금 현재 우리는 수백 가지 프로그래밍 언어를 가지고 있으며 매일 새로운 언어 중 일부는 현재 강력한 언어가 아닙니다 시장과 자바 스크립트에 큰 변화를 일으키는 것은 분명히 그들 중 하나입니다 지금 자바 스크립트는 항상 대중적인 프로그래밍 언어 목록에있다 6 년 연속 Stack Overflow에 따르면 JavaScript에는 가장 널리 사용되는 프로그래밍 언어로 자리 잡았습니다 이 프로그래밍 언어가 실제로 할 수있는 것, 우리는 자바 스크립트가 주로 아름다운 웹 페이지와 응용 프로그램을 만드는 것으로 유명합니다 이것은 또한 Google지도이기 때문에 특정지도를 모두 탐색하고 싶다면 마우스로 클릭하고 드래그하면 어떤 종류의 언어가 가능합니까? 물론 JavaScript입니다

이 언어는 smartwatches 이제 인기있는 SmartWatch 제조 업체 조약돌 만든 조약돌 점 j / s 개발자가 자바 스크립트 프레임 워크를 만들 수있는 작은 자바 스크립트 프레임 워크입니다 자바 스크립트에서 조약돌 줄 응용 프로그램에 대한 Google Facebook Netflix Amazon 등의 가장 인기있는 웹 사이트는 JavaScript를 사용하여 모바일 애플리케이션과 같은 웹 사이트를 구축하십시오 디지털 아트 웹 서버 및 서버 응용 프로그램 자바 스크립트도 사용됩니다 게임을 만드십시오 많은 개발자는 소규모 게임 및 앱을 만들고 있습니다 지금 자바 스크립트를 사용하여 많은 사람들이 자바 스크립트 코드를 어디서 실행할지 물어 봅니다 이제 자바 스크립트 코드를 실행할 때 콘솔을 사용할 수 있습니다

그것은 당신이 무엇을하고 싶은지를 입력하기 만하면되기 때문에 매우 간단합니다 코드를 작성하면 출력 자체가 표시되거나 텍스트를 사용할 수 있습니다 편집기 예를 들어, 내가 코드를 사용하고 어떻게 할 수 있는지 보여줄 것입니다 여기에 코드를 작성한 다음 웹 사이트에서 어떻게 실행하고 어떻게 볼 수 있습니까? 모든 데이터를 입력하거나 입력 할 수있는 두 가지 방법으로 작업 할 수 있도록 작동합니다 그러면 콘솔로 돌아가 출력을 확인할 수 있습니다

코드 자체를 점검하면 콘솔 자체에서 확인할 수 있습니다 이제 javaScript는 원래 브라우저에서만 실행되도록 설계되었으므로 모든 브라우저 우리는 JavaScript 코드를 실행할 수있는 자바 스크립트 엔진을 가지고 있습니다 firefox와 chrome의 JavaScript 엔진은 SpiderMonkey와 v8을 사용하면 JavaScript 코드를 온라인으로 실행할 때 매우 쉽게 사용할 수 있습니다 이제 JavaScript를 통해 웹 및 모바일 응용 프로그램을 다시 사용할 수 있습니다 요컨대 javascript 코드는 브라우저 내부 또는 노드 브라우저에서 실행할 수 있습니다

노드는 자바 스크립트 코드의 런타임 환경을 제공하므로 코드가 어디서 움직이는 지 알아보고 다른 코드를 살펴보십시오 자바 스크립트의 이점 이제 많은 개발자들이 좋아하는 이유가 있어야합니다 잘 자바 스크립트에 대한 작업이 언어를 사용하여 여러 가지 이점이 있습니다 배우기 쉽고 구현이 간단하고 약한 유형입니다 자바와 같은 강력한 유형의 프로그래밍 언어와는 다른 프로그래밍 언어 코딩에 대한 엄격한 규칙을 가지고있는 C ++은 오늘날 빠르다는 것을 의미합니다 세상과 이후 자바 스크립트는 주로 클라이언트 측 프로그래밍 언어 모든 코드를 실행할 수 있으므로 매우 빠릅니다

서버에 접속하여 응답을 기다리지 않고 즉시 Jas가 반응하는 Jas와 같은 프레임 워크가 풍부하다는 것입니다 웹 응용 프로그램을 작성하고 마지막으로 다른 작업을 수행하는 데 사용됩니다 우리는 모두 아름답게 디자인 된 매력적인 웹 사이트를 만들었습니다 웹 사이트와 자바 스크립트는 이러한 매력적인 웹 사이트의 배경입니다 이제 마침내 우리는 애플리케이션의 설정을 살펴볼 것입니다

개발 환경 또는 IDE를 사용할 수있는 다른 편집기가 있습니다 이 비주얼 스튜디오 코드를 작성하기 위해 JavaScript 코드를 작성한 다음 숭고한 텍스트 그리고 우리는 이제 원자가 있습니다 이것들은 꽤 유명합니다 모든 프로그래밍 언어로 작업 할 때 인기가 있지만 올 때 내가 선호하는 비주얼 스튜디오 코드를 선택하면 오늘 나는 당신에게 모든 것을 보여주기 위해 비주얼 스튜디오 코드를 사용할 것이다 예제 및 자바 스크립트의 기본 사항에 대해 설명합니다

이 내 즐겨 찾기는 간단하고 쉽게 실행할 수있는 시각적 인 스튜디오 코드입니다 Visual Studio 코드를 다운로드하려면 여기를 클릭하십시오 다운로드를 입력하면됩니다 Visual Studio 코드 웹 사이트 koatcom으로 가서 귀하의 버전을 다운로드하십시오

귀하의 시스템은 이제 아주 간단한 경량입니다 크로스 플랫폼 및 강력한 에디터를 사용하면 Visual Studio 코드가없는 경우 당신의 기계는 즉시 진행하고 바로 다운로드 할 수 있습니다 이제 프런트 엔드 개발자가되기 위해서는 HTML 코드이므로 여기에 HTML 코드를 호스트로 사용하려고합니다 JavaScript가 먼저 라이브 서버 확장을 가져와야합니다 여기에 자바 스크립트 나 HTML 코드를 실행하기 전에 여기에 모든 것을 설치하십시오

확장 프로그램으로 이동 한 다음 라이브를 검색하면됩니다 지금 서버가 이미 설치되어 있으므로 이 코드를 실행하기 전에 이것을 설치해야합니다 자바 스크립트로 코딩하는 법을 배우고, 이제 기본으로 시작하자 기본 사항에 대해 이야기 할 때 가장 먼저 JavaScript에서 변수가 있습니다 이제이 특별한 프로그래밍 언어는 기본적으로 가지고있는 변수들을 포함합니다

데이터 값이며 언제든지 변경할 수 있으므로 예약 된 키워드가 사용됩니다 변수를 선언하려면 var을 사용합니다 이제는 모든 변수가 고유 한 이름을 가져야합니다 시각적 인 스튜디오 코드로 돌아가 봅시다 이것이 여기 내 기본 HTML 파일입니다

여기에 HTML 머리글과 제목이 있고 그 후에이 스크립트 태그가 있습니다 그럼 내 몸 안에는 내가 그것에 대해 환영한다고 말하는 머리 꼬리표가있다 나가 나의 웹 사이트에 갈 때 나가 저에게이 특정한 머리 꼬리표를 보여줄 것이라는 점을 의미한다 Eddie Rica에 오신 것을 환영합니다 이제 스크립트 태그를 보관하는 것이 좋습니다

브라우저가이 파일을 위에서 아래로 파싱하기 때문에 끝납니다 머리 부분에있는 스크립트 요소가 많을 수도 있습니다 자바 스크립트 코드가 있으므로 브라우저가 구문 분석 및 실행 중일 수 있습니다 자바 스크립트 코드를 사용하면 페이지의 콘텐츠를 렌더링 할 수 없습니다 거의 항상 스크립트 요소 사이에있는 코드는 예를 들어이 웹 페이지의 요소와 대화하거나 표시하려면 일부 요소 그래서 여기에 코드를 추가하여 신체 섹션의 끝에 우리는 것입니다 브라우저에서 모든 요소를 ​​렌더링한다고 확신하십시오

그래서 여기서 변수를 사용하여 컴퓨터의 메모리에 일시적으로 데이터를 저장합니다 어딘가에 우리의 데이터를 저장하고 그 메모리 위치와 이름을주고 우리는 예를 들어 미래에 주어진 위치에서 데이터를 읽을 수 있습니다 당신이 물건을 정리하는데 사용하는 상자들 상자에 넣고 각각에 라벨을 붙여서 지금 쉽게 물건을 찾을 수있게하십시오 변수는 기본적으로 상자와 같습니다 따라서 상자 안의 값은 값입니다

우리가 변수에 할당하는 것은 데이터와 레이블입니다 상자는 변수의 이름이므로 선언 할 코드가 무엇인지 살펴 보겠습니다 지금 우리가 Val Q를 사용하거나 변수가 있지만 특정 문제가 있으므로 이제는 변수를 선언하는 left 키워드는 먼저 left 키워드를 사용합니다 여기에 우리는 변수의 이름을 선언해야합니다 그러면 이름이 있어야합니다

이해할 수 있거나 코드를 보면 알 수 있습니다 그래서 여기에 변수 이름을 가진 코드가 있기 때문에 무엇을 쓰려고합니까? 에디 리카 (Eddie Rica)라는 이름을 붙인 다음 콘솔 점 로그를 작성합니다 이 코드를 저장하면 이제는이 코드를 저장하게됩니다 확장 점 J s 그래서 this를 실행하기위한 자바 스크립트 파일입니다 웹 브라우저에서 HTML 파일이 필요하므로이 파일은 여기에 자바 스크립트를 가리키는 소스가 하나 추가되었습니다

여기에 파일을 넣으십시오 SRC가 색인 1에 해당하는만큼 확장을했습니다 GS는 기본적으로 저를 JavaScript 파일로 가져가 HTML 파일을 통해 브라우저로 이동하게되고 여기서 제목을 볼 수 있습니다 Ed Eureka에 오신 것을 환영합니다 이제 어떻게이 콘솔을 얻을 수 있습니까? 귀하의 웹 사이트를 클릭하고 조사하러 가면이 창이 열렸습니다

당신은 에레 카를 가지고 있다는 것을 콘솔에서 볼 수 있습니다 여기에 언급 된 1은 ed라는 이름의 변수를 선언했기 때문입니다 유레카 그래서 우리 출력은 콘솔 도트 로그 이름 그래서 우리가이 코드를 실행하고 콘솔로 가면 유레카에서 지금 볼 수 있습니다 이름을 바꿔 예를 들어 이름을 바꾼다 자바 스크립트는 이제 당신이 사용할 수 없기 때문에 당신이 독특한 것을 제공하는지 확인합니다

JavaScript에 변수 이름 또는 기타 키워드로 들어있는 키워드 여기서 일종의 가치를 배웠으므로 변수에 대한 가치를 배웠습니다 이제 자바 스크립트를 한 번 저장하고 브라우저로 돌아가서 새로 고침하십시오 이제 자바 스크립트를 배우기 위해 바뀌 었음을 알 수 있습니다 이전에 유레카에 있었고 이제는 이름이 바뀌 었음을 알 수 있습니다 값이 여기에 변경 되었기 때문에 JavaScript 그래서 이제 여러분은이 변수 와트가 어떻게 여러분에게 말하게되었는지 보았습니다

이름을 쓰는 동안 따라야 할 특정 규칙에 대해 이제 변수는 첫 번째 규칙은 키워드가 될 수 없다는 것입니다 자바 스크립트에서 예약 된 키워드 예를 들어 이들은 모두 예약 된 어디 보자 자바 스크립트 용 키워드는 변수 이름으로 사용할 수 없습니다 항상 의미있는 이름을 붙여야합니다 변수에 이름을 붙이면 의미 있고 이해할 수 있어야합니다 그 이름 자체를 보는 동안 당신의 이름도 어떤 숫자로 시작해서는 안됩니다

그래서 이상한 것은 단지 1 ed와 같은 숫자로 시작하는 이름을 갖는 것입니다 Eureka 또는 2 ed Eureka는 그렇게 잘 보이지 않아서 다음에 숫자로 시작하는 변수 이름은 거기에 있다는 것을 명심해야합니다 공백이 아니어야합니다 – 자바 스크립트의 이름과 관련하여 예 저는 JavaScript를 여기에 적었습니다 두 가지를 분리하기 위해 하이픈이나 스페이스가 없어야합니다

두 단어 사이에 이름을 써야합니다 분명히 대소 문자를 구분합니다 이 다음 두 가지를 사용하여 JavaScript를 배우기로 바꾼다 대소 문자를 구분하므로 다른 이름으로 간주됩니다 이제는 변수에 관한 것이 었습니다

기본적으로 의미있는 이름을 지정하는 상수를 선언함으로써 상수 하나의 상수가 선언되면 값을 수정할 수 없거나 다른 값을 할당 했으므로 상수를 정의 할 수있는 방법을 보겠습니다 예를 들어 자바 스크립트이므로 두 가지 다른 이름으로 이름을 설명하고 싶습니다 이름과 성 등과 같은 부분이 있으므로 먼저 이름은 에드 유레카와 같습니다 그런 다음 성을 JavaScript로 사용하면 여기에 있습니다 두 가지를 분리하고 그것을 별도로 선언하기 위해 세미콜론이 필요합니다

그런 식으로하지만 이것을하는 것보다 당신은 상수를 사용하여 당신의 일은 더 쉬워 졌으니 이제 당신이 당신의 상수를 어떻게 사용할 수 있는지 보도록하겠습니다 JavaScript 코드이므로 이제는 변수 이름을 H로 가져와 특정한 가치가있다 내가 타이프 할 때 나이를 23 세라고 가정한다 콘솔 도트 로그 나이 그리고 나서 내가 이걸 한번만 다시 저장하도록하자 내 웹 사이트로 돌아가서 새로 고침하면 가치 23을 얻을 수 있습니다

여기 내가하고있는 일은 내가 변수를 선언하는 것뿐만 아니라 변수를 선언하는 것이다 일정한 가치 그래서 지금 나는 나의 나이의 가치를 때때로 바꿀 수 없다 우리는 변수 값이 바뀌기를 원하지 않습니다 그렇지 않으면 변수가 변하기 때문입니다 지금 상황에서 우리의 응용 프로그램에 모든 종류의 버그를 만들 수 있습니다

변수 대신에 상수를 사용하여 변수의 값을 이름이 바꿀 수 있음을 암시하지만 그 값은 현재 다음 줄은 나이를 21로 맞추고 이제는 이걸 저장하고 보도록하겠습니다 이 출력을 실행할 때 출력은 어떻게됩니까? 우리가 이미 일정한 값을 선언했기 때문에 여기에 오류가 발생했습니다 다시 우리는 가치를 변화시키고있는 나이 21 이렇게하면 잡히지 않은 유형 오류 인 오류가 발생합니다 상수 변수에 할당하십시오 여기서 변수 나이는 상수입니다

이 변수에 다른 값을 지정하여 표시 할 수 없습니다 당신은 오류 그래서 기본적으로 우리는 한번 상수를 재 할당 할 수 없다 사용 된 상수이므로 값을 변경할 수 없으므로 모범 사례는 사용하는 것입니다 언제 어디서나 가치를 바꿀 계획이라면 무엇이 변수인지, 어떤 것이 무엇인지 궁금해해야하는 상수입니다 우리가이 변수들에 할당 할 수있는 가치의 종류는 이제 앞으로 나아 갑시다

지금 사용할 수있는 다양한 데이터 유형을 살펴보십시오 두 가지 유형이 있으므로 처음에는 프리미티브 또는 값 유형이 있습니다 그런 다음 참조 유형을 먼저 가지고 있습니다 다른 원시 타입 이제 데이터 유형은 기본적으로 데이터 유형입니다 프로그램에서 사용하고 조작 할 수 있으므로 다른 데이터 유형 숫자 문자열을 포함합니다

boolean undefined 및 null 이러한 데이터 유형은 코드로 돌아가서 문자열 리터럴 우리가 무엇을 우리 숫자로 만들었습니까? let let name to Ed 유레카 그러면 우리는 나이가 23이라는 또 다른 변수를 갖게됩니다 승인 된 다른 변수를주는 boolean 검사는 다음과 같습니다 true, true, false는 우리의 불리언 값을 나타내는 것입니다 기본적으로 우리의 문자열 리터럴이고 이것은 우리의 숫자 리터럴입니다 우리가 그냥 이름을 써서 세미콜론을 쓰면 부울 다음에 사용하고있다

이것에 자동적으로 정의되지 않은 값을 주지만 우리는 또한 이름 그대로 undefined와 같으므로 기본적으로 할당 된 값은 없습니다 이 특정 변수에 이제 최종 값이 널값이됩니다 그냥 날짜가 null과 같아 지도록하십시오 이제 이것을 저장하고 나서 저장하십시오 다시 한번 콘솔로 돌아 가자

근본적으로 나는 그것을 리프레시한다 여기에 콘솔이 없으므로 내 콘솔에 출력이 없지만 항상 여기에 리터럴의 유형을 확인하십시오 시간을 끄고 내 변수 이름의 유형을 확인하면됩니다 이름을 줘 그러면 내가 여기있는 문자열을 보여줍니다

나는 리카를 할 때 내 이름을 가지고 있습니다 문자열 리터럴이 정확히 여기에 나와있는 값입니다 내 이름의 유형은 문자열입니다 이제 볼 수 있도록 연령 유형을 확인합시다 내 나이가 내 숫자 리터럴을 같은 방식으로 선언하도록 숫자를 표시합니다

타자를 치는 타입이 승인되었을 때 타입을 쓰는 것이 승인됩니다 그것은 나를 부울적으로 보여 주므로 콘솔 내부에서 볼 수 있습니다 이 변수들 모두의 유형을 지금 알아 내고 싶으면 지금 찾으십시오 내 날짜의 유형은 날짜 형식을 쓰고 개체를 보여줍니다 여기에 값이 없으므로 null 값을 갖습니다 자바 스크립트에서 객체로 간주됩니다

유형이 제공되므로 서로 다른 기본 유형이되었습니다 개체를 살펴보고 이제는 기본 유형을 다음과 같이 보았습니다 자바 스크립트 우리는 참조 유형에서 참조 유형을 살펴볼 것입니다 카테고리 우리는 객체 배열 함수를 가지고 있으므로 이제 우리는 이 세 가지 다른 유형은 먼저 객체에 대해 이야기 해 보겠습니다 JavaScript 및 기타 프로그래밍 언어에서 실제와 같은 객체입니다

나이 주소가있는 사람을 생각해보십시오 그래서 여기에 제가 말했습니다 내 특정 객체에 대한 세 가지 속성은 소녀가 내 객체라고 가정합니다 이 객체의 세 가지 속성 (이름 및 색상) 이제 여러 개의 관련 변수를 처리 할 때이 변수를 내부에 넣을 수 있습니다 예를 들어 우리의 객체에는 이름과 나이라는 두 개의 변수가 있습니다

그래서 우리는 우리가 객체의 속성으로 선언 할 수 있기 때문에 참조 할 수 있습니다 우리의 객체에 대한이 두 요소 또는 속성은 기본적으로 코드를 만든다 이제 우리가 어떻게 선언 할 수 있는지 보도록하자 자바 스크립트에서 객체를 사용하므로 내 변수를 소녀 및 내부로 선언합니다 여자 나는 여자를위한 속성을 추가 할 것이므로 우리는 우리의 곱슬로 시작해야한다

중괄호 내부에 중괄호가 있으므로 지금은 첫 번째 속성을 추가합니다 재산은 이름 이었어 그래서 나는 단지 Emily로서 이름을 줘야한다, 그리고, 우리는 나이는 23이고, 우리는 또 다른 속성을 가지고 있습니다 그래서 Brown입니다 이제 쉼표를 사용하여 이러한 속성을 분리합니다

이제 마침내 세미콜론과 함께이 중괄호를 닫습니다 콘솔 도트 로그를 사용하여 내 개체에 대한 출력을 찾으십시오 이제는이 파일을 저장하고 콘솔로 돌아가서 이제는이 내부에서 작동합니다 내 개체에 대한 속성이 목표이므로 여기에 이름을 지정해야합니다 첫 번째 속성의 다음 사용 : 그리고 그 이름을 필자는 Emily 쉼표를 사용하여 속성을 구분하므로 다음 속성은 H로 써서 23으로 작성하고 중괄호를 닫아야합니다

세미콜론으로 이제 콘솔 도트 로그와 내 이름을 입력 할 것입니다 좋은 개체이며 세미콜론으로 닫으십시오 그래서 여기에 선언했습니다 변수 또는 내가 선언 한 소녀와 소녀 인 내 물건 13 이름과 나이 인 여학생을위한 속성이 이제 막 저장됩니다 이 하나 그리고 콘솔로 돌아가서 볼 수 있도록 내가 이것을 한 번 실행하면 코드 내 개체의 속성을 볼 수 있도록 이름이 표시됩니다

23 세의 Emily와 H는 이제 우리가이 특별한 이름의 이름을 바꾸고 싶어한다고 가정합니다 object 우리는 무엇을 하는가? 그래서 이것이 정확히 점 표기법을 사용하는 곳입니다 그래서 우리는 여기에서 할 것입니다 우리는 단지 우리 물건의 이름을 줄 것입니다 이름은 여기에 이름을 바꾸고 싶을 뿐이므로 이름을 알려줄 것입니다

같으면 여기에 다른 이름을 붙이 겠어 내가 이름을 알려줄거야 존으로서 그리고 나서 세미콜론을 추가하면 이제 이걸 저장하고 무엇을 보게 될까요? 출력물에 발생하므로 일단 콘솔로 이동하면 이름이 요한에게 바뀌 었습니다 이제 이것이 또 다른 접근법입니다 이름을 변경하기 위해 변경할 수 있으므로 대괄호 표기법이 이제는 대괄호 표기법이므로 입력하기 만하면됩니다

소녀, 대각선 괄호 안을 대괄호 안에 넣어주세요 지금 내 이름을 바꿀 계획 인 변수의 이름입니다 나는 Sam이라는 이름을주고 싶어서 Sam을 입력하면된다 세미콜론으로 닫은 다음 이걸 저장하겠습니다 이제는 일단 내 콘솔로 돌아가서 이름이 변경된 것을 볼 수 있습니다

존에서 샘에게 다시 이렇게 그들은 점인 2 개의 다른 접근이었다 표기법과 괄호 표기법을 사용하여 개체의 속성 및 특정 변경 만들기 이제는 객체를 선언하는 법을 배웠으므로 계속해서 움직여 봅시다 우리의 배열과 JavaScript에서 배열을 선언하는 방법 이제 JavaScript 배열 객체는 기본적으로 사용되는 전역 객체입니다 객체와 같은 높은 수준의 목록 인 배열의 구성에서 장바구니에 제품 목록 또는 색상 목록이있는 경우 당신이 그들을 선언해야 할 그림을 만들기 위해 사용되는 항목들 배열을 사용하여 변수를 사용한다고 선언하면 정신없이 바쁠 수있는 모든 것을 따로 정의해야하기 때문에 바쁠 것입니다 할 일 목록이 꽤 길어서 지금 여기 배열이 당신의 구원에 이릅니다 자바 스크립트에서 배열이 어떻게 작동하는지 보도록하겠습니다

항목으로 이름을 지정하고 여기에 배열을 선언합니다 예를 들어 예를 들어 내 목록에있는 특정 항목은 색상이 있고 그림 붓과 그러면 저는 판을 가지고 있습니다 그래서 이것들이 내 목록에 나타나기 때문에 내가 할 수있는 일은 세미콜론으로 닫고 지금 나는 콘솔의 점 로그를 사용할 것이고 아이템을 여기 넣을 것이다 이걸 다시 콘솔로 돌아가서 이제는 내가 새로 고침하면 그것을 볼 수 있습니다 나에게 가치를 주며 내 목록에있는 항목은 무엇인지 알 수 있도록 내 목록에 색 페인트 브러시와 세 가지 항목이 추가되었습니다

그래서 내 목록 안의 항목 수의 가치를 제공합니다 그 다른 항목은 무엇입니까 그래서 여기를 한번 클릭하면 볼 수 있습니다 또한 Eddie의 인덱스에서 각 항목에 대한 인덱스 값을 제공합니다 값은 항상 0부터 시작하여 1에서 시작하지 않으므로 색인이 표시됨을 알 수 있습니다 색상 값은 0이고 페인트 브러쉬 값은 1이고 마지막으로 plate 우리는 기본적으로 인덱스 값이 0에서부터 2가되므로 여기에 우리는 0 1 2 이는 배열의 문 길이가 3임을 의미하므로 표시하려는 경우 특정 항목은이 색인 값을 사용할 수 있으므로 페인트 브러시를 표시하여 값이 0이면이 대괄호를 사용합니다 인덱스가 0이기 때문에 1로 붓의 인덱스 값이 1이되도록하자

이걸 저장하면 콘솔로 돌아가서 볼 수 있습니다 출력은 그것이 단지 그림 붓이기 때문에 나에게 준다 consolelog 항목 값을 1로 설정하면 해당 값만보고 싶다는 의미입니다 인덱스 값이 1이어야한다는 것 대신에 에 대한 색인 값의 도움으로 목록에 다른 것을 추가하십시오

예를 들어 이름을 지정하고 원하는 곳에 색인 값을 지정할 수 있습니다 다른 항목을 추가한다고 가정하고 인덱스 값이 이제 추가됩니다 내 목록의 끝에 추가하고 싶기 때문에 3이되어야합니다 값을 3으로 설정하고 스프레이를 추가하여 스프레이를 입력하면됩니다 세미콜론을 입력 한 다음이 코드를 저장하면 여기에 항목 스프레이가 추가됩니다

이제는이 항목을 변경하여 모든 항목의 가치를 보여줍니다 이제는 내 콘솔로 돌아가서 이걸 다시 불러와 보자 항목의 가치가 3에서 4로 변경되었고 다른 항목도 변경되었음을 알 수 있습니다 항목이 내 목록에 추가되었으며 스프레이에 대한 색인 값을 볼 수 있습니다 정확히 내가 추가 한 인덱스 값 3에 올 수 있습니다

정확히 그 값입니다 가치가 지금 여기에 추가 된 곳에서는 비슷한 것을 가질 필요가 없습니다 어떤 숫자가 여기에 추가되기를 원하는지에 대한 데이터 유형입니다 100을 추가하여 여기에이 번호를 추가 한 다음 코드를 저장하면됩니다 출력에서 색상 붓 플레이트로 값을 줄 수 있습니다

수백 가지가 있으므로 비슷한 데이터 유형 일 필요는 없습니다 다른 데이터를 추가 할 수 있습니다 타입을 입력하고 배열에 넣는다 이제 콘솔로 돌아 간다 내가 목록으로 주었던 항목의 이름을 입력하십시오

당신은 그것이 객체를 보여줌으로써 배열이 기본적으로 타입임을 알 수 있습니다 우리는 또한 여기에 점 표기법을 사용할 수 있고 다양한 것을 발견 할 수 있습니다 속성을 사용하면 이미 두 가지 새우 속성이 있음을 알 수 있습니다 당신은 알아낼 수 있습니다 그래서 우리 목록의 길이를 찾으십시오

길이를 입력하고 일단 우리가 돌아가서 이것을 새로 고침하면 지금 이걸 저장하도록합시다 당신은 그것이 기본적으로 도트의 도움으로 4로 길이를 제공한다는 것을 알 수 있습니다 표기법을 사용하여 값 또는 다른 속성을 찾을 수도 있습니다 배열이 이제 위험에 관한 것이 었으니 우리의 물체와 물 배열이 지금 무엇을 보았는가? 계속 나아가고 볼 시간이다 JavaScript의 함수에서 JavaScript의 함수가 두 개로 나뉩니다

먼저 다른 유형의 사전 정의 된 함수가 있고 그 다음에는 특정 사용자 정의 함수 그래서 기본적으로 함수는 하위 프로그램입니다 특정 작업을 수행하도록 설계되었으므로 기능이 실행될 때 실행됩니다 그리고 값은 함수로 전달 될 수 있고 그것들 내에서 사용된다 자바 스크립트에서 함수를 선언 할 수있는 방법을 보도록하겠습니다 함수 나 이름을 선언하는 함수로서의 키워드 내 함수에 제공 할 것이므로 이제 어떻게 함수를 선언 할 수 있는지 보겠습니다 그래서 저는 감독에 오신 것을 환영합니다

그래서 제가하는 일은 function 키워드를 입력하고 view를 타이프하자 안쪽에 중괄호를 추가하여 콘솔 도트 로그를 갖게하고 싶습니다 Ed Eureka에 오신 것을 환영합니다 그래서 지금 내가 중괄호 뒤에 이것을 선택한 후에 우리는 지금 함수가 내 함수 이름을 볼 수 있도록 내가 뭘 할거야 그냥 내 함수를 호출하는 것입니다 여기 그리고 지금 내가 지금 내 콘솔에 가서 한번 이걸 저장하자 이 코드를 실행하면 Eureka에 오신 것을 환영합니다

실제로 나는 함수보기를 사용했고 삽입했다 내가 보여주고 싶은 것은 무엇이든 그 후에 나는 나의 기능을 이렇게 불렀다 무슨 일이 벌어 지든 내가 작성한 내용이 consolelog에 표시됩니다 이 특정 함수의 도움으로 얻은 내 산출물 이제는 매개 변수를 추가하여 매개 변수를 추가 할 수 있습니다

함수 이름을 매개 변수로 추가했다고 가정 해 보겠습니다 해당 매개 변수를 연결하여 여기에 이름을 입력 한 다음 내 함수 내에서 내가 전달할 매개 변수를 입력합니다 그것을 통해 내 함수 안에서 나는 단지 자바 스크립트를 작성하므로 여기에서 그냥 내 함수 안에 매개 변수를 전달하므로 여기에 대출 자바 스크립트 그래서 그냥이 하나를 저장하고 다시 한 번 콘솔로 이동하자 우리는 당신이 Dirac에 오신 것을 환영한다는 것을 알 수있는 코드를 실행합니다 JavaScript가 있으므로 값을 여기에 연결하여 볼 수 있습니다 거기에 누락 된 공간이 여기에 내 코드에서 공간을 추가하지 않은 때문에 주문을 공백으로 남겨 두어 공백으로 두었다가 다시 추가해야합니다

이제이 코드를 저장하고 내 콘솔로 돌아가서 다시 실행할 수 있습니다 유레카에서 공간이 생겼다는 것을 알았습니다 왜냐하면 여기에 공간을 추가했기 때문입니다 이름을 연결 한 다음 값의 제곱을 확인해 봅시다 이제는 JavaScript에서 함수가 어떻게 작동하는지 살펴 보도록하겠습니다

키워드를 함수로 사용하고 우리 함수에 이름을 지정했습니다 숫자의 제곱을 찾아서 함수 이름을 다음과 같이 취했습니다 square 이제 정사각형 안에 숫자를 매개 변수로 입력 한 다음 당신은 안에 중괄호를 열고 내가 원하는 값을 반환해야합니다 여기 내 출력으로 숫자의 제곱을 원해서 반환을했습니다 나에게 사각형을 줄 숫자에 숫자로 값을 입력하십시오

이제 닫아야합니다 다음에 중괄호를 사용하면 번호를 지금 정의 할 수 있습니다 숫자 2에 대해이 사각형을 찾으십시오 그래서 여기에 숫자를 넷 번호로 정의했습니다 2의 제곱에 해당하므로이 2 번째 칸의 사각형을 찾고 싶습니다

그리고 마침내 우리가 우리의 콘솔에 가면 마침내 도트 로그 번호를 콘솔에 넣을 수 있습니다 그것이 2의 제곱이 4이기 때문에 그것이 4로 출력을 주었다는 것을보십시오 그리고 이것이 숫자 2의 제곱을 물었습니다 그래서 이것이 결과물입니다 이제는 JavaScript에서 함수가 어떻게 작동하는지 알게되었습니다

JavaScript의 조건문을보고 조건부 다른 말처럼 단어를 사용하거나 특정 조건을 넣을 때 조건문이 JavaScript로 제공 될 때 그렇다 먼저 작동하므로 if 나는 여기에 숫자를 변수로 선언한다고 가정 해 보겠습니다 두 개가 같으면 다음에 정의되지 않은 배열이됩니다 위로 배열을 정의하거나이 내부에 일련의 숫자를 제공합니다 특정 배열 그래서 그냥 정의하고 특정 값을 제공하자 그래서 내 배열은 1 4 4 1 2 5 5 2 그래서 이들은 내가 가지고있는 값들의 집합이다

내 변수 내에서 제공되는 다음은 if 조건문을 사용할 것입니다 우리가 근본적으로라면 지금 내면의 성명서 어떤 특별한 조건을 제공해서 사탕을 찾아야 해 여기서 제로 위치의 숫자가 제로 위치에 있는지 확인하고 싶습니다 포지션 2에있는 번호 그래서 여기에 제가 제공 한 조건이 있습니다

지금은 조건을 얻은 후에 출력을 얻으 려하므로 콘솔 도트 로그 그래서 대답은 '예'라고 대답하겠습니다 조건이 충족되면 출력이 '예'가 될 것이므로 지금 알려주세요 이것을 세미콜론으로 닫으십시오 이제는 if와 if를 사용하는 곳입니다 조건부 성명서

우리가 사용하고있는 변수에 대한 조건 위치 0의 숫자가 위치 2의 숫자와 같은지 여부 인덱스는 항상 0부터 시작하므로이 배열은 0이라는 것을 기억하십시오 2 그래서 당신은 그 숫자가 위치 0에 있음을 볼 수 있습니다 그리고 2는 기본적으로 동일합니다 출력은 yes 여야합니다 이제이 파일을 저장하고 다시 콘솔에 표시되는 내용을 확인하면 출력이 예로 표시됩니다

만족 한 경우 여기 내 조건은 만족하고 그 정확히 어디에 나는 출력을 얻었으므로 이제 if-else 조건이 무엇인지 살펴 보겠습니다 if 조건과 매우 유사하므로 if 조건과 매우 유사합니다 이 경우 여기에 추가되는 조건이 하나 더 있다는 것입니다 두 숫자가 같지 않았다 이 값을 3으로 변경하면 내 출력을 저장하고 보도록하겠습니다

내가 어떤 가치도주지 않았기 때문에 우리는 어떤 산출물도 없다는 것을 알 수있다 이 두 숫자가 같지 않은 경우 다음 조건은 이제 else 조건이 들어있는 곳에서 else를 추가하는 방법을 보여 드리겠습니다 조건 그래서 당신은 다른 사람을 써야만합니다 그러면 다른 출력물을 여기에서 줄 것입니다 그래서 나는 단지 콘솔 도트 로그를 타이핑 할 것이고 그때 그것을 알려주도록 할 것이다

조건이 만족스럽지 않으면이 루프에서 빠져 나와 else 안에 들어갑니다 조건이 충족되지 않는 경우 그것은 나에게 출력을 줄 것이다 No 그래서 지금 내가 이것을 저장하고 되돌아 가게하자 콘솔에 표시하면 출력이 아니오로 표시됨을 볼 수 있습니다 여기 조건이 만족스럽지 않아서이 특별한 상황에서 나왔습니다

조건을 확인하고 다음 조건을 확인하면 여기에서이 조건이 충족됩니다 만족하지 못하면 출력은 no가됩니다 횟수 및 당신은 다른 조건을 제공 할 수 있으며 또한 당신이 암시하려고하는 다른 조건들에 대한 다른 산출물들 이제는 JavaScript에서 루프를 살펴 보도록하겠습니다 for 루프 while 루프와 do-while 루프 처음에는 while 루프가 어떻게 작동하는지 먼저 보도록하겠습니다 변수를 선언하면 0으로 같음을 취하고 있다고 가정합니다

가치의 I와 그 다음 조건을 줘라 그래서 나는 루프를 사용할 것이다 반면에 나는 조건이 5보다 작 으면 나는 그것의 가치이다 5보다 작 으면 콘솔 출력이되도록 여기에 출력을 보냅니다 로그 번호는 이제 여기에있는 값을 연결합니다

그리고 나서 마침내 그것은 플러스 플러스입니다 그래서 지금 정확히 무슨 일이 일어 났습니까? I의 값을 0으로 초기화 한 다음 그 루프를 지정했습니다 나는 5보다 작지만이 숫자가 인쇄되고 특정 숫자와 I 플러스 플러스 값은 각 루프 그래서 여기서 일어나는 일은 루프가 0부터 시작해서 계속 될 것입니다 4 시까 지 0 1 2 3 4 I 값이 5에 도달하면 곧이 값이 나옵니다 특정 루프와 출력은 0 ~ 4 비커스에서만 가능하므로 순서대로 while 조건을 먼저 확인하려면 I의 값을 초기화합니다

그래서 저는 초기 값인 0을 취하게하고 여기에 제 루프를 사용할 것입니다 제가 5 세 이하이며, 5 세 미만의 5 미만의 값 콘솔 출력 로그가 될 출력을 제공합니다 숫자는 내가 여기에있는 값을 연결하고 마지막으로 마침내 여기서 I의 값을 증가 시키면 여기서 정확히 무슨 일이 일어나는가? 먼저 나는 I의 값을 0으로 초기화했다 조건은 5보다 작아야하므로 루프 안에 넣어야합니다 while 루프를 여기에서 가져 왔습니다

그래서 우리는 사납게 가치가 있다고 생각합니다 5보다 우리의 출력은 숫자가 될 것이고 특정 숫자를 취할 것입니다 숫자가 0에서부터 계산되고 즉시 4까지 계속됩니다 5 이것은 I + 플러스가이 특정 루프에서 나옵니다 0에서 4까지 증가하며 5에 도달하자마자 빠져 나올 것입니다

이 특정 루프와 숫자 0 ~ 4만이 우리의 출력 그래서 지금 내가 여기에 저장하고 어떻게되는지 보자 콘솔로 돌아가서 번호가 인쇄 된 것을 볼 수 있습니다 0 1 2 3 4로 번호가 5에 도달하자마자 이렇게되었습니다 특정 루프 너무 정확하게 while 루프가 작동하는 방식 비슷한 방식으로 for 나 do-while을 사용할 수도 있습니다 귀하의 JavaScript 코드에서 반복되므로 어떻게됩니까? 작업은 당신이 do 키워드를 사용하고 결과물을 넣는 것입니다 원하는 값을 입력하고 나중에 조건을 입력하면 조건이 적용됩니다

나중에 확인한 반면에 처음에는 조건을 설정하고이를 기반으로 출력을 제공하므로 괜찮습니다 자바 스크립트의 루프는 이제 진행하고 do-while 루프는 JavaScript에서 작동하며 do-while이 while과 어떻게 다른지 루프 그래서 do-while 루프의 경우에는 어떤 일이 발생합니까? 조건은 조금 있습니다 나중에 나중에 변수를 선언하고 여기서 do 루프와 inside를 취한다 중괄호는 출력을 제공하므로 숫자를 출력 할 수 있고 I의 값을 연결 한 다음 I plus plus로 증가시킵니다 이 루프에서 빠져 나왔습니다

우리는 while 루프를 추가 할 것입니다 우리의 조건을 주어서 제가 6 미만으로 조건을 부여한다고 가정하십시오 무슨 일이 일어날 지 5 시까 지 값을 가져오고 여기서 일어나는 일은 그것은 가치를 인쇄하고 루프에서 나와서 값 또는 while 루프 내부에서 제공 한 조건 내가 이걸 저장하고 내 콘솔로 돌아가서 이것을 새로 고치고 보자 여기서 0에서 5까지의 값을 출력하고 있음을 알 수 있습니다 그래서 이전에 우리는 5보다 작아야하므로 조건을 부여 했으므로 인쇄했습니다

4의 가치까지 지금 나의 듀아 루프에서 나는 내가 6 이하가 될 때까지 점검했다 그래서 여기에 0에서 5까지의 값이 출력되고 값이 더 커지 자마자 5보다 크거나 값이 6이되면 루프에서 빠져 나옵니다 이제 for 루프로 이동하여 for 루프가 어떻게 작동하는지 살펴 보겠습니다 그래서 for 루프를 사용하면 여기서 값을 초기화 할 필요가 없습니다 그래서 여기에서 우리는 for 루프로 시작하고 for 루프 내부에는 세 개의 섹션 그리고 첫 번째 섹션에서는 값을 초기화합니다

그래서 여기에서 저는 0과 같고 다음 섹션은 I 값의 조건이므로 여기에서 I 나는 가치가 7 미만이어야하고 마지막으로 우리는 조건을 부여하고있다 증가 또는 감소 값을 줄 것이므로 나는 여기에 플러스 플러스를 준다 마지막으로 우리는 콘솔 도트 로그 번호가 우리 출력을주고 우리는 여기서 변수를 선언하는 대신에 여기에있는 값을 연결하십시오 한 가지 더 할 수 있으므로 for 루프 자체 내부에서 할 수 있습니다 let을 타이프하고 다음과 같이이 값을 초기화 할 수 있습니다

그럼 지금은 그냥 이걸 저장하고 우리 콘솔로 돌아가 보겠습니다 출력이 무엇인지 확인하면 내가 제 조건을 부여 받았음을 알 수 있습니다 값은 7보다 작아야합니다 그래서 여기에 인쇄되는 것은 숫자 0의 값입니다 숫자 6을 사용하면 for 루프를 사용하는 것이 다른 루프에는별로 없어 – 너무 많지 않은 오디오 이 섹션에서 나눌 섹션은 for 루프를 사용해야 만합니다

변수 값을 초기화하고 조건을 제공 할 수 있습니다 증분 또는 감소 값을 모두주고 마지막으로 인쇄하고자하는 내용을 출력에 추가해야합니다 for 루프와 이것으로 우리는 루프의 끝으로 와서 우리가 while 루프 do-while 루프와 for 루프 및이 3 루프가 어떻게 작동하는지 JavaScript 및 얼마나 쉽게 변수를 정의하고 변수에 삽입 할 수 있습니까? 똑같은 것을 두 번 쓰는 것보다는 어떤 종류의 조건이라도 반복합니다 또는 세 번 또는 몇 번이나 할 수있는 일은 당신이 그들을 안에 넣을 수 있다는 것입니다 이 루프는 한번에 모든 것을 수행하도록합니다 JavaScript에서 마지막으로 논의 할 수있는 것은 switch 문입니다

이 switch 문은 무엇입니까? 스위치를 사용할 수 있도록 특정 프로그램을 확인해야합니다 문이 그래서 무슨 일이 귀하의 스위치 성명을 내부에 추가 할 수 있습니다 다양한 사례를 실행 한 다음 실행하려는 가치를 찾으십시오 switch 문은 JavaScript에서 작동하므로 예를 들어 변수를 가져 오도록하겠습니다 게임을 평등하게 만들어서 크리켓과 같은 특정 게임을 어쨌든 월드컵 시즌 이니까 내 게임의 가치를 크리켓으로 가져 가자 switch 문을 사용해야 만합니다

변수 게임 그래서 먼저 우리가 취할 스위치 조건을 취한다 게임으로서의 변수와 중괄호 안의 변수 나는 나의 첫 번째 경우를 가질 것이다 그래서 나의 첫 번째 경우 나는 게임을 축구로 추가 할 때마다 게임 축구를 할 때마다 나는 출력을 콘솔 도트 로그로 줄 것이다 나는 축구를보고 싶지 않습니다 이제 이것이 우리의 결과이며, 우리는 휴식을 제공합니다

우리가 다음 사건으로 전환 할 수 있도록 성명서 그래서 지금 우리가 다른 경우를 생각해 볼 때 여기에 하키가 있다고 가정하면 우리는 콘솔 도트 로그 인 하키에 대한 또 다른 결과를 줄 것이다 하키 게임을하지 않은 상태에서 콘솔 도트 로그를 읽은 다음 문장을 다시 깨뜨립니다 다음 사건은 크리켓이 될 것입니다 그래서 여기에 크리켓이 있다고 가정합니다 출력을 여기에 콘솔 도트 로그로 제공하십시오

나는 크리켓을 좋아한다 이제는 특정 게임을 초기화하지 않았을 때를 대비해서 항상 switch 문에 대한 기본값은 여기에서 우리가하는 일은 여기에 있습니다 다른 기본값을 사용하고 우리의 기본값은 다른 콘솔을 제공합니다 도트 로그 그래서 우리는 단지 일치하는 것을 찾지 못합니다 그래서 이것은 우리가 스위치를 쓰는 방법입니다 자바 스크립트의 문장을 사용하면이 코드를 저장하고 내 콘솔로 돌아갈 수 있습니다 이 오류를 새로 고침하여 오류를 보도록하겠습니다

예, 세미콜론 대신 콜론을 넣어야했습니다 이제 콘솔로 돌아가서 출력을 볼 수 있습니다 나는 크리켓을 좋아한다 왜냐하면 이미 내가 게임을 초기화했기 때문이다 귀뚜라미 그래서 내가보고 싶은 스위치 성명을 올 때마다입니다 통찰력 스위치 우리는 다양한 경우를 가지고 있습니다

이 가치를 축구로 바꿀 경우를 대비해 크리켓 게임으로 가치를 얻으십시오 이제는 이걸 저장 해보자 지금 콘솔로 돌아가 보자 그것을 새로 고치고 보자 그리고 나는 축구가 내 키스를하는 것을보고 싶지 않다고 말한다

내가 축구를보고 싶지 않기 때문에 나는 결과를 주었다 정확하게 무엇이 인쇄되고 있는지 또는 이것이 우리가 산출물로 얻는 것입니다 내가 주전자를 주자 그리고 우리는 이들 중 어느 것에도 주전자가 없다 사례가 있으므로 기본값으로 이동해야하지만 출력이 무엇인지 확인해 보겠습니다 여기에 이제이 파일을 저장하고 콘솔로 돌아가서 새로 고치도록하겠습니다

예, 그렇습니다 정확하기 때문에 출력은 일치하지 않는 것으로 나타납니다 이들 중 하나라도 발견되거나 일치하지 않을 경우 기본값입니다 초기화 된 값으로 여기에 기본값이 제공되므로이 값은 모두 자바 스크립트에서 switch 문에 대해 이제는 이것에 대해 더 많이 알게됩니다 증서 루프 및 스위치 성명서를 작성하십시오

객체 배열과 같은 모든 기본 사항 문자열 및이 구문을 사용하고 내부의 모든 것을 포함하는 방법 자바 스크립트 코드 및 콘솔에서 가져 와서 볼 수있는 방법 HTML 파일의 도움으로 출력되는 내용은 무엇입니까? 변수 객체에 대해 배웠던 것들은 배열 루프 JavaScript의 조건문을 사용하면 자신 만의 템플릿을 만들 수 있습니다 이제 웹 사이트를 멋지게 디자인 할 수 있습니다 자바 스크립트를 사용하여 웹 사이트를 방문하고 자바 스크립트의 기본 사항이므로 오늘 세션에 관한 내용이었습니다 이 동영상을 통해 기본 및 기본 사항을 JavaScript를 사용하면 더 많은 것을 시작할 수 있습니다 자바 스크립트 코드를 만들고 자신 만의 웹 페이지를 만들 수도 있습니다

더 많은 것을 기대해주세요 동영상을 원할 경우 언제든지 돌아가서 재생 목록을 확인할 수 있습니다 JavaScript에 대해 자세히 알아보십시오 또한 귀하의 의견을 공유하는 것을 잊지 마십시오 그때까지 당신과 행복한 학습에 감사의 아래의 코멘트 섹션

~ 이길 바래요 이 비디오를 듣는 것을 즐겼습니다 의심과 검색어에 대해 의견을 말할 수 있으며 가장 초기에 우리의 재생 목록에서 더 많은 동영상을 찾아보고 Edureka에 가입하십시오 채널을 통해 자세히 알아볼 수 있습니다 행복한 학습

JavaScript Full Course | JavaScript Tutorial For Beginners | JavaScript Training | Edureka

안녕 얘들 아, 환영 해 이 흥미로운 자바 스크립트 세션

그래서 우리는 이해를함으로써이 세션을 시작할 것입니다 자바 스크립트 란 무엇인가? JavaScript의 다른 데이터 유형 다양한 데이터 유형을 이해하면 JavaScript로 갈 것입니다 운영자 조건문 및 JavaScript의 루프 모든 기본 개념을 이해하면 자바 스크립트에서 자바 스크립트의 함수를 살펴 봅니다 마지막으로이 세션을 끝내고 끝내십시오

및 개체 단면도에서조차 취급 할 것이다 브라우저 개체 모델 Dom 및 폼 유효성 검사에 추가합니다 그래서 오늘 우리에게는 특별한 손님 Gauri가있다 누가이 세션을 앞으로 진행할 것인가 그래서 너를 Gauri

안녕 모두, 나는 당신 각자를 환영한다 알기 Javascript는 무엇입니까? 웹 페이지 나 웹 앱이 무엇인지 알아야합니다 웹 앱은 무언가이다 웹이나 인터넷에서 볼 수 있습니다 그래서 우리가 인터넷이라는 말을 할 때마다, 우리 마음에 오는 것은 언제나 브라우저 일뿐입니다

우리는 브라우저를 열고 브라우저의 링크를 누르십시오 화면에 나타나는 것은 웹 페이지 페이지입니다 브라우저에서 호스팅되는 브라우저가 우리에게 표시하는 것을 웹 페이지라고합니다 이 웹 페이지는 우리에게 데이터를 보여줍니다 우리는 데이터가 나오는 곳에서보고 싶은 것을 말합니다

이것은 귀하의 브라우저입니다 웹 페이지가 표시됩니다 데이터가 나오는 곳에서 데이터가 나옵니다 가장 덜 불리는 것에서 서버로부터 나오는 시간 그래서 그들은 지금 서로 이야기하고 있습니다

우리가 서버 측에서 어떤 코딩을 하든지간에 이것은 서버 측 프로그래밍이라고하며 코딩은 무엇이든 이 브라우저 측면에서 우리가하는 일 클라이언트 측 프로그래밍 JavaScript라고합니다 서비스가 아닌 클라이언트 측 스크립트 언어 나는 스크립팅 언어

그래서 우리가 배우고있는 것은 여기서 왼쪽 편에 있습니다 JavaScript를 어디에 배치했는지 JavaScript 코드를 작성하는 JavaScript 코드를 작성하는 방법 우리가 요구하는 것은 HTML 파일뿐입니다 HTML 파일이란 무엇입니까? 궁극적으로 우리는 브라우저에서 우리 페이지를보아야 만합니다 브라우저는 단지 마크 업 언어 HTML은 그러한 마크 업 언어 중 하나입니다

이는 하이퍼 텍스트 마크 업 언어를 의미합니다 그래서이 브라우저는 파서 (parser)라고 불리는 것을 가지고 있습니다 내부, HTML 파일을 읽습니다 이제이 HTML 파일을 작성하기 위해이 HTML 파일을 어떻게 작성합니까? 우리는 바로 메모장을 열어야합니다 규칙에 따른 파일 이 파일은 OK로 정의되어 저장됩니다

HTML 또는 점 HTM으로 확장됩니다 그렇다면이 HTML 파일에 대해 왜 배우고 있습니까? 왜냐하면 HTML 파일이 자바 스크립트 코드의 호스트이기 때문입니다 우리가 자바 스크립트 코드를 넣고 싶다면 HTML 파일이 있어야합니다 HTML 파일이 없으면 자바 스크립트 코드를 사용할 수 없기 때문에 또는 우리가 볼 수없는 다른 자바 스크립트 코드에서 무슨 일이 일어나고 있는지

자바 스크립트 코드의 호스트와 같습니다 그래서 우리의 자바 스크립트 코드 우리가 배우게 될 내용은이 HTML 파일에 있습니다 그래서 우리는 짧은 이해를했습니다 이제 우리는 단지 집중하고있다 클라이언트 쪽 프로그래밍에

두 번째로 입력하고 싶습니다 그 코드에 대한 자바 스크립트 코드입니다 HTML5가 있어야합니다 먼저 첫 번째 HTML 파일을 만들어 보겠습니다 그 간단한 일은 메모장을 여는 것입니다

HTML 코드를 계속 입력하십시오 어떻게 HTML 코드를 작성합니까? HTML 코드는 항상 이들에 반환됩니다 Stores Carlos HTML 태그 HTML의 모든 태그는 두 부분으로 구성된 시작 태그 및 종료 태그 당신이 그 안에 무엇을 쓰든 그 내용이 있습니다 기본적으로 HTML 태그에는 두 개의 자식 헤드가 있습니다 몸 머리는 그 자식이야

제목에 집중하다 또는이 파일의 헤더가 어떻게 보이는지 브라우저에서와 같이 몸은 그 아이이다 전체 페이지에 집중하다 우리가 브라우저에서 볼 수 있습니다 확장자가 dot HTML 인이 파일을 저장해야합니다 하나의 폴더를 만듭니다 이 폴더에서, 이 파일을 저장합시다

정적 도트 HTML로 모든 파일을 선택했는지 확인하십시오 확장을 변경했기 때문입니다 그래서 우리는 단지 그것을 집중할 것입니다 이 파일의 확장자를 점 HTML로 변경했습니다 이 페이지의 아이콘이 바뀌면 기본 브라우저로 설정하면됩니다

이것이 HTML 파일이라는 것 더블 클릭하면이 파일이 브라우저에서 열립니다 원하는 브라우저로 열려면, 당신은 마우스 오른쪽 단추로 열 수 말할 수 있습니다 Chrome 또는 기타 파일 사용 원하는 브라우저 또는 브라우저 당신이이 싸움에서 선택하고 싶습니다 본문 부분에 몇 가지 요소를 계속 작성한다면 표시됩니다

HTML에서 모든 요소가 브라우저에 표시됩니다 뭔가를 볼 수있는 버튼을 볼 수 있습니까? 같은 입력 상자 단락을 가질 수 있습니다 기타 등등 많은 요소가 있으므로 우리는 HTML 파일로 작성할 수 있습니다 그래서이 파일을 저장하고이 파일을 새로 고치려고 할 때, 나는 많은 것을 볼 것이다

나는 의견을 보았다 나는 클릭 할 수있는 버튼을 볼 수 있습니다 이것은 편집 가능하며 이것은 정적 단락입니다 나는 볼 수있다 그래서 이것들은 내가 몸의 일부에 들어갈 수있는 모든 요소들입니다

브라우저에서 렌더링 할 수 있습니다 이제는 HTML 파일을 만들 때마다 시간의 정적 파일 공부하면서 무엇을 의미합니까? 내가 추가 한 것은 무엇이든 이 HTML 파일은 브라우저에 표시됩니다 여분의 것도없고 아무것도 없다 런타임 또는 동적으로 작동하는 일어날 수 없다

일반 HTML 파일이 있고 이것이 필요한 곳입니다 자바 스크립트는 HTML로 자바 스크립트를 사용할 때마다 온다 우리는 동적 인 것을 가장자리에 추가합니다 동물 문양으로 정적 문단임을 알 수 있습니다 이것이 제가 작성한 것입니다

나는 뭔가를 쓰고 싶다 내 이름처럼 ABC이기 때문에 모든 데이터를 제공해야합니다 이 HTML 파일에 해당 파일 만 렌더링됩니다 그래서 이것이 HTML을 정적 인 것으로 부르는 이유입니다 본문 부분에 무엇이 든간에 렌더링 될 그래서 우리는 자바 스크립트라는 것을 추가하려고합니다

이것이 JavaScript 사용입니다 어디 보자 추가 라이브러리가없는 Javascript는 무엇입니까? JavaScript는 바닐라 자바 ​​스크립트라고도합니다 그래서 내가 말했듯이 우리는 은폐 할 것입니다 처음 세 모듈 완전한 바닐라 자바 ​​스크립트는 언어입니다 대소 문자를 구별하는 언어입니다

매우 구체적인 프로그래밍 언어 또는 다른 언어입니다 스크립트 언어로 불리며 대화식 웹 페이지를 만들거나 동적 인 페이지를 추가 할 때 – 웹 페이지에 어떻게 해석합니까? 따라서 클라이언트에서 실행되는 것으로 해석됩니다 브라우저에있는 컴퓨터 기본 스크립팅 언어로 사용됩니다

HTML 페이지 용 이 특정 언어는 서버의 부하를 줄입니다 일부 작업은 클라이언트 측에서 수행되므로 내가 한 가지 예를 들어 보겠다 지금 웹 페이지가있는 경우 두 개의 숫자가 필요합니다 두 숫자의 합계를줍니다

이 두 숫자의 데이터가있는 경우, 당신은 서버에 가서 서버에게 말할 필요가 없다 이 두 숫자를 더해주세요 나에게 결과를 돌려줘 JavaScript는 클라이언트 측 언어이므로 이 두 값을 취할 수있는 값을 계산합니다 최종 사용자에게 결과를 보여줄 수 있습니다

그래서 그것이 당신이 어떻게 줄어들 었는지에 대한 것입니다 자바 스크립트는 운영자가 많기 때문에 부담이됩니다 루프 것들 이는 클라이언트 측에서 작업 할 수 있습니다 JavaScript를 사용하여 모든 작업을 수행 할 수 있습니다 따라서 JavaScript의 서버 기록에 대한 부하가 줄어 듭니다

그것은 1995 년에 처음 개발되었습니다 그러나 버진이 10을 올린 다음 11이 올랐습니다 1997 년 1

2 1998 원 포인트 3 및 9 우리는 이전에 jscript 5라고 부르기 시작했습니다 이 자바 스크립트는 특정 브라우저에서만 지원되었습니다 하지만 요즘에는 많은 브라우저 또는 다른 모든 브라우저에서 지원됩니다 처음에는 브라우저

그것은에 의해 지원되었다 Netscape Navigator 20을 볼 수 있다면 시작되었습니다 Microsoft Internet Explorer도 지원을 시작했습니다 당신이 그걸 1999 년까지 볼 수 있듯이

그것은 단지 두 개의 브라우저가 그것을 지원하는 것과 같았습니다 하지만 이제는 모든 브라우저에서 지원하고 있습니다 UI 개발에 사용하기에 최상의 브라우저 사용 또는 무엇이라고 불리는 자바 스크립트 코딩은 Chrome이 될 것입니다 많은 디버깅 도구로 도움이됩니다 자, 디버깅 도구가 무엇인지 알게 될 것입니다

브라우저가 지금 당신이 볼 수 있듯이 모든 직업이 있습니다 이 자바 스크립트의 단어 많은 시간 우리는 그 느낌을 시작합니다 알았어, 뭔가 관련이있어 하지만, 그것은 둘 다 서로 관련이없는 방식이 아닙니다 Java는 객체 지향 프로그래밍 언어입니다

그것은 언어이다 이는 완벽한 비즈니스 로직을 구축하기 위해 개발되었습니다 jsps와 같은 부분이 있습니다 브라우저에서도 실행됩니다 좋아요,하지만 의미는 아닙니다

그것은 순수한 클라이언트 측 언어라는 것입니다 양쪽에서 사용할 수 있습니다 반면 JavaScript는 실행됩니다 브라우저에서만 Java 프로그램을 실행하려면 먼저 컴파일해야합니다 그런 다음 실행됩니다

자바 스크립트의 경우 컴파일은 발생하지만 라인 간 불일치는 발생하지 않습니다 우리는 정확히 무엇을 볼 것인가? JavaScript에서 컴파일러가 어떻게 발생해야하는지, 그러나 그것은 항상 말하게된다 그게 바로 컴파일러 동작이라는 것입니다 기본적으로 해석됩니다 지연이 없다

세 가지가 말로 표현하면 시간이 좀 걸릴 것입니다 그리고 나서 실행될 것입니다 아니, 그것은 just-in-time 컴파일러 똥이 일어나는 것과 같다 Java에 대한 실행이 시작됩니다 정적 유형 검사라고하는 것이 있습니다

JavaScript의 경우 동적 유형 검사입니다 그래서 우리는 정적 및 동적 타입 검사를 볼 것입니다 우리가 무언가를 들여다 볼 때 JavaScript의 데이터 유형이 적습니다 이 자바 스크립트는 어디에서 사용할 수 있습니까? 글쎄, 우리는 알고있다 사용할 수 있다고 동적 분석을 추가하기 위해 클라이언트 측 스크립트에서 서버가 실제로 작동하거나 작동하지 않아도되는 경우 모든 논리를 처리 할 수 ​​있습니다

클라이언트 측에서는 그러한 애플리케이션이 존재하지만, 이들은 모두 자바 스크립트로 구성됩니다 예를 들어, 일부 게임 응용 프로그램 또는 모바일 응용 프로그램 등 그래서 요즘 JavaScript가 많이 호황을 누리고 있습니다 이 모든 분야에서 사용될 수 있습니다 JavaScript 부분을 시작하자 스크립트 작성 방법 또는 HTML 파일에 스크립트를 포함시키는 방법

우리는 그것을 두 가지 방식으로 포함시킬 수 있도록 만들었습니다 하나는 내부 내장이고 다른 하나는 외부입니다 다른 태그와 같은 두 가지 방법을 살펴 보겠습니다 좋아요, 우리는 여기에이 꼬리표들을 가지고 있습니다 body tag, head tag, 하나 더 많은 태그입니다

사용할 수있는 HTML로 JavaScript를 침입하는 데 도움이됩니다 태그 이름은 script입니다 그리고 우리는 자바 스크립트 코드를 작성할 수 있습니다 이 두 태그 안에 따라서이 두 태그 내에 코드를 작성할 때마다 내부 임베딩이라고합니다

스크립트 태그에서 스크립트를 사용하기 전에 발생합니다 이 자바 스크립트의 기본 사항을 이해합시다 우리는 HTML의 본문 부분에 무언가를 씁니다 기본적으로 우리가해야 할 일 왜 우리는 이 사용자 인터페이스 사용자 인터페이스를 사용할 수 있습니다

사용자가 몇 가지 세부 정보를 입력 할 수 있도록 그래서 당신은 그 데이터에 대해 어떤 데이터 작업을 할 것입니다 그것이 인터페이스를 갖는 주 목적입니다 그래서 우리는 많은 요소들을 추가 할 것입니다 사용자가 예를 들어 데이터를 쉽게 추가 할 수 있습니다 일부 라디오 버튼에 일부 체크 박스를 추가합니다

그런 다음 입력 상자를 추가 할 수 있습니다 그럼 우리는 몇 가지 버튼 등을 가질 수 있습니다 그래서이 모든 요소들을 body 태그에 넣을 수 있습니다 HTML 페이지에 있습니다 자바 스크립트에서이 모든 요소를 ​​추가 할 때, 우리가 얻는 것은 아무것도 아니다

그러나 큰 물통이 양동이는 모든 이들 요소를 가지고 있습니다 버튼 일부 입력 유형 라디오 버튼 기타 따라서이 버킷의 요소로 호출됩니다 이 큰 물통은 자바 스크립트에서 참조됩니다 기술 문서가 될 문서는 기성품이다 이 문서를 사용하여 JavaScript에서 사용할 수 있습니다

모든 요소에 액세스 할 수 있습니다 이 문서에는이 문서가 있습니다 그 객체는 이미 많은 메소드를 가지고 있습니다 Define 우리가 특정 요소에 도달하는 데 도움이됩니다 메소드는 다음과 같습니다

ID 또는 문서 객체로 요소 가져 오기처럼 get 요소를 사용할 수 있습니다 안녕 얘들 아, 닝 거기에 더 많은 요소를 얻을처럼 클래스 이름으로 따라서 사용할 수있는 많은 메소드가 있습니다 이 특정 요소에 대한 액세스 권한을 제공합니다 이제 우리가 사용하고 싶다면 ID별로 요소 가져 오기, 그럼 우리는 반드시 확인해야한다

우리는 이러한 요소들에 대해 신원을 밝히고 있습니다 그래서 우리가이 요소들을 쓸 때 우리는 확실히 그 사람들은 화려 함의 열쇠 인 ID를 가지고 있다고 우리는 또한 이 메소드를 사용하여 하나의 요소 만 원한다면, ID는 고유해야합니다 다른 요소에 대해 동일한 ID를 사용할 수 없습니다 우리가 클래스 이름으로 불리는 것을 사용하기 원한다면 나는 여기에 클래스 이름을 추가해야합니다

그래서 많은 속성들을 그 속성들을 사용하여 추가 할 수 있습니다 나는이 요소들에 접근 할 수있다 이러한 요소에 액세스하면 이 요소에 나는 그 표정을 돌아볼 수있다 그 기능에 대해 해결할 수 있다고 생각합니다 내가 가지고 있기 때문에 나는 무엇이든 해결할 수있다

이 특정 요소를 극복 할 수있는 것처럼 그래서 정복하기 위해 또는이 요소를 얻기 위해서 우리는 많은 메소드를 가지고있다 이 문서 개체와 함께 사용할 수 있습니다 나는 개발자로서, 이 문서 개체를 만들지 않습니다 그것은 자바 스크립트입니다, 이 문서 객체를 준비하고 우리에게 제공합니다 우리는이 객체를 곧바로 사용해야합니다

JavaScript로 이미 객체를 만들었습니까? 그럼 보자 요소 중 하나를 사용하는 방법 객체 문서는 ID로 요소를 가져옵니다 이 메소드의 명명 규칙을 보시면 낙타 껍질을 사용하고 있습니다 첫 글자가 더 작습니다 그리고 모든 단어의 다음 문자는 자본입니다

그래서이 특정 ID에 액세스하고 싶습니다 이 특별한 절 이 특정 단락을 사용하고 싶다면, 나는 그것을 줄 것이다 ID가 데모 인 요소를 가져오고 싶습니다 일단이 요소를 얻었습니다 내부 HTML이 무엇이든간에 변경하고 싶습니다

그것은 현재 쓰여져 있습니다 이것은 정적 단락입니다 나는 이것을 동적 인 단락으로 바꾸고 싶다 그래서이 요소의 속성을 변경하려고합니다 재산의 이름은 innerhtml입니다

그래서 그게 내가하고있는 일이야 나는 무엇을하고 있는가? 내가이 특정 요소를 ID로 가져갈 것인가? 나는 그것을 가치로 바꾸고있다 이전에는 정적 단락이었습니다 지금 동적 단락으로 변경하고 싶습니다

자,이 특별한 스크립트 태그는 어디에 두었습니까? 스크립트 태그를 볼 수 있다면 스크립트 태그를 추가 한 것은 본문 아래에 있습니다 그것은 신체가 끝나는 곳입니다 왜 나는 그것을 체내에 두었 을까? 그 이유를 몇 분 후에 설명해 드리겠습니다 그럼이 파일 파일을 머리 부분에 본문 부분으로 저장하도록하겠습니다 내부에 스크립트 부분 스크립트 경로가 추가됩니다

이것은 JavaScript를 내부적으로 추가하는 방법입니다 스크립트 부분 내에서 나는 오직 하나의 성명서를 썼다 나는 무엇을하고 있는가? 그것은 기성품 인 문서를 사용하고 있습니까? ID가 데모 인 요소를 얻습니다 내부 HTML을 변경합니다

어떻게 작동되는지 보겠습니다 그 값을 볼 수 있습니까? 그 단락의 그래프가 나맥 나쁜 것입니다 그런 다음 외부 스크립팅을 사용하려면 나는 무엇을해야합니까? 나는 무엇이든을 복사해야 할 것이다 이 스크립트 태그에서 다른 파일에 복사하십시오 이 파일을 Javascript 파일로 저장하십시오

어떻게해야합니까? 도트 J 확장 체이스 체이스를 넣고이 파일을 저장합니다 폴더 구조에서 열면 나는 볼 수있을거야 이 Javascript 파일의 아이콘이 바뀌 었습니다 그게 내가 그걸 확실히 할 수있게 해준다

이것은 JavaScript 유형입니다 파일의 링크를 클릭해야합니다 이 두 파일은이 파일을 링크합니다 스크립트 태그를 보관해야합니다 그대로 그리고 그냥 뭔가를 쓰십시오

내가 사용하는 곳에서 지금 파일 이름을 반환했습니다 완전한 확장과 함께 그것은 역동적 인 체이스입니다

나는 그때 내가 여기에서 그것을 복사하게 두배로하고 싶다 여기에 붙여 넣으세요 이 파일은 Javascript 파일입니다 링크 될 HTML 파일에 저장됩니다 둘 다 같은 폴더에 있습니다

파일의 이름을 직접 쓸 수 있습니다 그러나이 파일이 다른 폴더에있는 경우, 나는 완전한 길을 유지해야 할 것입니다 나는 절대 경로 또는 상대 경로를 제공한다 그래서 외부 Javascript 파일을 제공 한 후 보도록하겠습니다 코드가 예상대로 작동합니다

네, 그렇습니다 따라서 내부적으로나 외부 적으로 추가 할 수 있습니다 자바 스크립트 경로 이제 문제는 남아있다 왜 그 스크립트 태그를 썼지? 파일 맨 아래에? 페이지를 디버그하고 싶다면, 당신이 할 수있는 일은 페이지를 오른쪽 클릭하고 inspect를 선택하는 것입니다

당신이 검사를 선택할 때 좋아,이 모든 가치를 얻을거야 그래서 저는 현재 누구든지 Google 크롬을 사용한다면 Google 크롬, 그들은이 모든 가치들을 보게 될 것입니다 따라서 요소는 모든 요소를 ​​보여줍니다 이 데크에 있습니다

그래서 하나의 버튼과 같은 것이 있습니다 다른 버튼이 있습니다 당신의 의견은이 버튼 안에 있습니다 좋아, 그 다음 두 단락 그것이 바로 버튼에있는 것입니다 그래서 내가 그런 식으로했는지 보자

예,이 버튼을 닫지 않았습니다 그래서 새로 고침하면 버튼이 별도로 있습니다 입력 상자가 있습니다 나는 단락이있다 나는 또 다른 단락이있다

그게 내가 그 시체에서 가지고있는 것입니다 괜찮아 그래서이 요소들을보고 싶다면 그 요소들을 볼 수 있습니다 elements 태그에 있습니다 무엇이라도 추가하면 근원은 무엇인가? 외부 적으로 모든 출처를 볼 수 있습니다

여기에 첨부되어 있습니다 현재 Javascript 파일이 있습니다 내가 볼 수 있도록 외부에 부착되어있다 그 소스 탭

어떤 언어를 배우는 데있어이 콘솔 태그는 무엇입니까? 우리는 실제로 알 필요가있다 버그를 테스트하거나 코딩을 테스트하는 방법 우리가 한 것 다른 언어에는 표준 출력 표준 콘솔이 있습니다 예를 들어 자바를 사용한다면 우리는 표준 콘솔을 가질 것입니다 명령 프롬프트가 우리 콘솔이 될 것입니다 다른 언어의 경우

대부분의 시간 명령 프롬프트는 우리의 문의입니다 브라우저가 우리의 콘솔을 볼 수 있도록 모든 브라우저에는이 검사 요소가 있습니다 이 inspect 요소를 사용하면 콘솔 태그가됩니다 좋아, 우리 콘솔 탭, 그것이 출력물을 보는 데 도움이 될 것입니다 그래서 이것은 콘솔 탭입니다 이제 body 태그에 대해 위의 스크립트 태그를 이동하면 어딘가에있는 머리에서 페이지를 새로 고칩니다

너 볼거야 내가 JavaScript로 작성한 것 왜 그런 일이 일어 났는지는 알려지지 않았습니다 내가 한 가지 오류가 있음을 알 수 있습니다 그냥 콘솔로 이동하십시오 오류가 표시됩니다

오류가 분명합니다 즉 자바 스크립트는 속성을 설정할 수 없습니다 null의 innerhtml로 불리는 그래서 아무것도없고, HTML 안에는 아무것도 없다 왜 이런 일이 일어날 지 앉아 있어야 해 HTML 페이지를 작성하고 해당 페이지를 붙여 넣을 때 브라우저에서 브라우저 컨트롤이 실행을 시작합니다

그래서 컨트롤이 여기에옵니다 좋아, 머리에 이른다 그것은 대본에 온다 그래서 실행을 시작합니다 한편 스크립트는 페이지 렌더링을 시작합니다

모든 요소를 ​​스크립트가 완성 될 때까지 렌더링합니다 실행되고있다 그것은 일어날 수있다 요소가 렌더링되지 않았다는 것 귀하의 요소가 페이지에 존재하지 않기 때문입니다 코드는 분명히 오류를 줄 것입니다

데모로 ID가있는 요소가 없기 때문입니다 그래서 당신이 body 태그의 끝에 스크립트를 작성한다고 그래서 완전이 완전히 렌더링되면 이 작업을 수행하는 스크립트 만 오류가 발생합니다 너는 볼 수있다 귀하의 스크립트가 실행되고 있습니다 이것이 우리가 한 일입니다

JavaScript로 시작했습니다 그래서 그것이 당신이 볼 수있는 곳입니다 우리가 스크립트를 추가 한 방법은 스크립트 태그를 추가 할 수 있습니다 본문 태그 또는 심지어 HTML 아래 HTML이 도착하더라도 너는 너의 JavaScript를 쓸 수있어

그것을 내부적으로 그리고 외부 적으로 어떻게 추가 할 것인가? 스크립트 유형을 작성해야만 내부적으로 추가 할 수 있습니다 그 안에서 JavaScript의 모든 코드 외부에 추가하려면, 그런 다음 스크립트 태그에 속성을 작성합니다 Sr C 스탠드 영혼을 위해 당신은 파일의 이름을 쓸 수 있습니다 즉 자바 스크립트 파일은 다음과 같은 폴더에 있습니다 HTML 파일의 내용 그런 다음 팝업을주지 않으면

그냥 보자 예제의 이름이 옮겨진 아름다운 예 그렇게하기위한 HTML 단락에서, 메모장 파일을 열어야하는 단계는 무엇입니까? HTML 코드에서 확인하십시오 확장 점으로 HTML 파일 저장하기 또는 HTM이라는 파일을 하나 더 만듭니다 Javascript 파일은 확장자를 점자로 저장합니다 링크를 HTML 코드에 링크하여 SRC 속성을 사용하십시오

스크립트 태그에 좋아, HTML 확인 및 JavaScript 파일은 같은 폴더에 있습니다 네가 방금 이름을 언급 했으니 까 자바 스크립트 파일의 브라우저에서 HTML 파일을 엽니 다 출력 확인 당신이 창조 한 것입니다

이것이 우리가 작은 부분을 완성한 곳입니다 우리가 자바처럼 배치는 어디입니까? 그리고 어떻게 JavaScript를 작성합니까? 자바 스크립트의 다음 부분으로 넘어 갑시다 이는 문서와 같은 JavaScript의 데이터 유형입니다 우리에게 또 하나의 대상이 있습니다

JavaScript로 준비되어 있으며 사용할 수 있습니다 어느 색상 콘솔입니다 이 콘솔 객체는 우리가 무언가를 쓸 수있게 도와줍니다 콘솔과 콘솔에 있습니다 만약 당신이 당신의 브라우저를 검사한다면, 화면 색상을 볼 수 있습니다

브라우저에없는 것을보고 싶다면, 콘솔에서 확인 만하면됩니다 논리가 잘 작동하는지 여부 호출 된 객체를 사용할 수 있습니다 콘솔로 이제 메모장을 사용하는 것은 매우 사소한 일입니다 다른 많은 텍스트 편집기를 사용할 수 있습니다 시장에서 구할 수 있습니다

메모장 더하기 플러스 거기처럼 가려져 있습니다 거기에 숭고한 텍스트가있다 현재 저는 많은 텍스트 편집기가 있으므로 사용하고 있습니다 그리고이 편집자를 사용하면 어떤 이점이 있습니까? 당신은 어떤 타입의 전달을 얻을 수 있습니다 여러분은 도움을 얻을 수 있습니다

그래서 처음부터 모든 것을 타이핑 할 수는 없습니다 예를 들어, 여기에 숭고한 텍스트에 HTML 페이지를 쓰고 싶다면, 그래서 여기에 폴더를 하나 더 만듭니다 좋아요, 폴더의 이름은 Eureka를 추가하는 것입니다 이라크 내에서, 나는 내가 만드는 파일을 만들려고 노력한다 이 파일을 HTML 파일이라고 말하고 싶습니다

그래서 저는이 정적 또는 좋아하는 것을 만듭니다 첫 번째 Dot HTML 파일을 말하고이 HTML 코드를 입력하면 그 마법을 볼 수 있니? 이미 코드를 반환했습니다 그것은 내가 쓸 필요가있는 기본적인 물건과 같다 PSI는 저에게이 모든 것을 쓰는 데 시간을 낭비합니다 그래서 그것은 나를 도와줍니다

그것은이 유형 포워딩을 수행했습니다 코드 전달은 이미 완료되었습니다 그래서 내가 각자 제안 할 것입니다 그리고 여러분 모두는 어떤 종류의 ID를 사용합니다 우리가 더 빨리 입력하는 데 도움이 될 것입니다

여기에 하나의 스크립트 태그를 만들어 보겠습니다 그 소스를 같은 폴더로 사용해도됩니다 오케이와 데이터 JavaScript의 데이터 유형, 그래서 하나의 데이터 유형 점 자바 스크립트 파일을 만들자 같은 폴더에 있습니다

같은 폴더에서이 파일을보십시오 유레카 말이 맞았 어? 이 파일을 데이터 유형으로 저장하려면 폴더를 클릭하십시오 하나님 이 언어로 데이터 유형 학습 자바 스크립트 언어입니다 내가 네게 말했듯이 콘솔에서 무엇인가를보고 뭔가를 배우고 싶다면

우리에게주는 결과물을 보셔야합니다 어떤 새로운 언어를 배우기위한 영감의 종류 그래서 이것이이 콘솔 주제를 도입 한 이유입니다 좋아요 문서와 같은 기성품입니다

및이 개체를 사용하여 우리는이 콘솔에 무엇이든 입력 할 수 있습니다 브라우저에 뭔가를 입력하려면 JavaScript를 사용하면 이전 객체를 사용할 수 있습니다 그게 문서 야 브라우저에 무언가를 쓰는 방법 사용되는 것은 문서 도트 쓰기입니다

괜찮아 그래서이 두 가지를 모두 사용하도록합시다 내가 콘솔 도트라고 할 때 사용되는 방법은 로그이다 그래서이 기록에서 나는 단지 말할 수있다 안녕하세요,이 파일을 저장하십시오

그래서 JavaScript를 작성했고 하나의 HTML 파일이 있습니다 HTML 파일에는이 파일에 요소가 없습니다 예, 임베드 된 스크립트가 있습니다 이 파일을 실행 해 봅시다 이 폴더를 열자

따라서 Chrome에서 첫 번째 HTML이 열리는 것을 볼 수 있습니다 요소가 없습니다 body 태그에 이 페이지에서 아무 것도 볼 수 없습니다 마우스 오른쪽 버튼을 클릭하고 검사하여 탭 콘솔을 엽니 다

콘솔 DOT 로그 방법으로 입력 한 내용을 볼 수 있습니다 나는 그것을 여기에서 볼 수있다 좋아, 내가 쓰고 싶으면 자바 스크립트를 사용하는이 브라우저의 어떤 것, 그것은 이런 식으로 될 것입니다 Belson JavaScript의 모든 문장이 종료됩니다

세미콜론으로 내가 이걸 실행하게 해 줘 그걸 볼 수 있니? 나는 그것을 썼다 이제 자바 스크립트에서 데이터 유형으로 이동하는 브라우저로 약 56 개의 데이터 유형이 있으며, JavaScript에 있습니다 숫자 부울 문자열입니다 그러면 대상이 있습니다

좋아요, 특별한 가치가 있습니다 그래서이 4 형 5 형과 6 형, 그들은 다른 유형입니다, 자바 스크립트 호출에서는 하나의 유형으로 간주됩니다 우리 정의되지 않은 객체 숫자가 아닌 특별한 값이 있습니다 JavaScript에 있습니다 변수 자바 스크립트 변수를 작성하는 방법 특정 값을 저장하는 컨테이너로 간주 될 수 있습니다

또는 Caleb 블록의 이름 다른 언어로 된 메모리 엄격한 유형이 있습니다 예를 들어, Java 또는 C ++을 사용하는 경우 변수에 숫자가 필요한 경우 그 숫자 만 포함하면 확실해진다 예를 들어 해당 변수를 해당 유형으로 선언해야합니다 ta에서 변수 a는 항상 숫자를 포함합니다 자바 스크립트에서는 그렇지 않습니다

너는 항상 Mark VAR 유형의 변수는 변수를 나타냅니다 그래서 당신이 그것을 다시 상상할 수있는 일반적인 것입니다 이 특정 버킷에 추가 한 모든 값의 버킷 해당 버킷 유형이 이 변수에 숫자를 지정하면 숫자가됩니다 타입 번호 문자열을 추가하면 문자열 형식이됩니다

만약 당신이 그것을 추가하면 객체가 될 것입니다 배열을 추가하면 객체 유형의 변수에 이름을 지정하는 것은 type 배열입니다 몇 가지 규칙을 따라야합니다 규칙이 말하는 규칙은 무엇입니까? 자바 스크립트 언어를 사용할 수 없다는 점 특정 키워드 그것은 do for function과 같습니다

그래서이 모든 키워드는 JavaScript에서 의미가 있습니다 거기에 어떤 논리가 실행됩니다 뭔가가있다 키보드를 사용하는 경우 키워드에 변수 이름을 지정할 수 없습니다 자바 스크립트 언어로 존재합니다

자바 스크립트 변수를 시작할 수 없습니다 어느 쪽도 아니다 사용할 수 있습니까? 백분율 달러와 사람과 같은 특수 문자 변수의 이름을 지정하면 항상 변수가 시작됩니다 알파벳이있는 그런 다음 그 알파벳을 숫자로 따라갈 수 있습니다 또는 대문자를 사용할 수있는 밑줄 소문자 알파벳

그래서 여기에 몇 가지 예제가 잘 보입니다 그것은 어떤 것과 같다 또는 에스코트가 필요한 첫 번째 밑줄 이름을 사용할 수 있습니다 하나만 잘못하면 숫자로 시작할 수 있습니다 함수와 같은 키워드를 사용할 수 없으므로 사용할 수 없습니다

라는 특수 문자는 달러입니다 괜찮아 따라서 변수를 정의하는 몇 가지 규칙이 있습니다 이 모든 유형의 변수를보고 유형을 확인해 봅시다 이 코드를 제거하겠습니다

변수를 만듭니다 또는 일반이라는 변수를 만들면됩니다 이 일반 변수가 무엇인지 살펴 보겠습니다 나는 창조했다 이를 선언이라고합니다

이 변수를 초기화하지 않았습니다 나는 어떤 가치도주지 않았다 기본적으로 어느 값이 소요되는지 보도록하겠습니다 내가보기 위해 그것을 초기화하지 않으면 콘솔 Dot을 작성할 수 있습니다 어느 정도까지 입력 할 수 있습니다

이 값으로 복사하여 붙여 넣기 세미콜론으로 파일 저장 기본적으로 볼 수 있습니까? 값 호출을 정의되지 않은 것으로 가져옵니다 그래서 그것이라고 말한 이유입니다 undefined가 있다는 것은 JavaScript에서 특별한 값입니다 같은 변수에 좋아요, 지금은 어떤 유형도 아닙니다

이 일반 번호를 추가하고 보도록하겠습니다 어떤 유형의 변수와 같은지 확인합니다 이 일반 키워드는 어떤 유형의 변수인지 또는 일반 변수는 사용할 연산자입니다 모든 소형 타입으로 불리는 타입 그래서이 연산자 오른쪽에있는 것이 무엇이든간에 알 수 있습니다

그 유형은 무엇입니까? 좋아요, 그럼 유형이 이제 숫자라는 것을 알 수 있습니까? 이 장군에게 내가 준? 문자열 값을 확인한 다음 유형을 확인하십시오 유형이 문자열로 변경되었음을 알 수 있습니까? 작은 따옴표로 문자열 값을 지정하면 어떻게됩니까? 어디 보자 다시 문자열이되는 유형은 무엇입니까? 그래서 우리는이 숫자와 문자열을 은폐했습니다 부울 값을 지정해 봅시다 뭔가 그게 사실입니다

변수를 취하는 데 필요한 값을 봅시다 이제 부울 유형이됩니다 그것은 당신이 페인트하고 싶은 페인트와 같습니다 좋아, 그 특별한 타입 일거야 다른 가치관을주고 싶다면 null이나 early를 말하거나 우리가 객체로 만들자

그래서이 세 가지 유형 모두에 대해, 타입은 항상 객체가되어 보자 어떤 유형이 될지 지금은 데이터의 객체 유형이됩니다 다음 데이터 유형부터 시작해 보겠습니다 즉, 배열을 쓰는 배열입니다 괜찮아

우리는 구문을 가지고있다 선언 부분에 여기에 나와 있습니다 이 변수 공간을 쓸 때 그래서 공간은 동일하다 to 및 대괄호로 초기화합니다 즉, 타입 배열의 내부 배열 자바 스크립트에서이 배열을 쓰는 객체로 취급됩니다

두 가지 방법이 있습니다 대괄호를 사용하여 초기화 할 수 있습니다 또는 새로운 운영자 목이라고 불리는 것을 사용할 수 있습니다 new라는 단어 뒤에 array 키워드를 사용해야합니다 그 다음에 따라 온다

괄호 안에는 요소의 이름을 쓸 것입니다 또는 추가 할 요소를 선택하십시오 배열이란 무엇입니까? 만약 당신이 이것을 보게된다면 어떻게 기억이 그것을 필요로하는지 예를 들어, 이것은 당신의 기억이다 변수 A라는 이름을 쓰려고하면 9와 같으면 작은 메모리가 할당됩니다 또는 작은 장소가 메모리에 할당되면, 가치 9를 유지하고 현재 귀하의 변수 a는이 메모리 위치를 가리킬 것입니다

자, 예를 들어, 10 학점을 상쇄하는 점수를 추가하려면, 어떻게 할거 니? 학생은 1 점의 다양한 점수를 만들 것입니다 학생의 점수 3에 학생의 등등 그래서 그들은 만들어 질 많은 변수가 될 것입니다 그래서 그러한 시나리오에서 우리는 거의 10 개의 변수를 갖게 될 것입니다 10 명의 학생으로 구성됩니다 그러나 배열을 사용하여 이 문제는 배열 메모리를 사용하여 해결됩니다

좋아요, 순차적으로 요소가 있습니다 마치 10 명의 학생의 점수를 저장하려는 경우 그들은 10 가지 요소가 될 것입니다 다섯 학생의 점수를 저장하려면, 5 개의 요소가 생성됩니다 5 명의 학생들로 구성된 일련의 마크를 만들자 자, 배열을 선언하도록 배열을 선언하는 방법은 무엇입니까? 우리는 a라는 변수를 사용할 수 있습니다

대괄호로 이런 모든 표시를 추가 할 수 있습니다 이것은 배열을 다른 방법으로 선언하는 한 방법입니다 배열을 선언하는 것은 너는 쓸 수있어 키워드 배열과 함께 키워드 new 이 대괄호 뒤에 대문자 A가옵니다 브래킷 안에서 요소의 모든 값을 유지할 수있다

그래서 이것은 그것의 사용이다 그 메모리는 순차적으로 할당됩니다 하나의 변수 만 사용하여 모든 마크에 액세스 할 수 있습니다 개별적으로 또한 모든 요소에 액세스 할 수 있습니다 어떻게 그걸합니까? 배열의 모든 요소에는 하나의 인덱스가 있습니다

배열의 인덱스는 항상 0으로 시작합니다 따라서 약 5 개의 요소를 추가 한 경우, 마지막 색인은 5에서 1을 뺀 것입니다 4는 항상 0부터 시작합니다 이러한 요소를 개별적으로 초과하는 경우 어떻게 그걸합니까? 0을 쓰고 있나요? 두 번째 요소에 액세스하려는 경우, 당신은 1을 쓸 것입니다 세 번째 요소에 액세스하려는 경우 그것은 네 번째 요소에 액세스하려는 경우 그것은 세 가지가 될 것입니다

이 요소를 개별적으로 초과 할 수있는 방법입니다 여기에 배열을 만들려고합니다 이 cendol 변수를 배열로 유지하도록합시다 Alexei는 우리에게 어떤 가치관을 주 었는지 알려줍니다 다시 한 번 값의 객체 유형을 알 수 있습니다

변수를 배열로 타입에 초기화하면, 이 유형과 함께 객체의 유형이됩니다 우리는 또한 이 배열의 길이는 얼마입니까? 그래서 배열 타입의 객체를 가질 때마다 Carlos 길이를 사용하여 길이를 얻을 수 있습니다 어디 보자 이것의 길이는 얼마입니까? 길이가 4인지 확인할 수 있습니다 너가 교차하는 경우에 체크 1 2 3 4 길이는 4 그러나 색인 0 1 2 & 3부터 시작합니다

그래서 이들은 몇 가지 데이터 유형이었습니다 자바 스크립트에있는 우리는 편안하게 지낼 필요가 있습니다 괜찮아 이제이 연결 연산자가있는 변환을 입력하십시오 지금 플러스라고 불렀습니다

이 연산자는 정말 마술 적입니다 또는 오버로드 된 연산자로 지금 호출 할 수있는 항목 이 연산자에게 네가 양쪽면에 준다면 숫자가 두 개 더하기 3을 보면, 두 숫자를 더하고 합계를줍니다 그냥 확인해 봅시다 그래서 두 개 더하기 세 개를 말하고 그냥 보자

철자를 잘못 입력 한 결과는 무엇입니까? 그것은 콘솔입니다 당신은 그것이 저에게 몇몇을 제공하고 있다는 것을 볼 수 있습니다 네가 양쪽면에 준다면 이 더하기 연산자 문자열 유형의 데이터 높음을보고 더 이상 그런 시나리오에 있다고 말하지 마십시오 연결된 문자열을 제공합니다

그래서 확실히이 유형 그것이 제공하는 것은 숫자 형입니다 이것은 문자열 유형입니다 이 플러스 연산자의 피연산자 두 개 모두 문자열 인 경우, 문자열을 연결합니다 그래서 하나의 숫자와 하나의 문자열을 주면 어떨까요? 이 경우 내가 보게 해줘

그것이 다시 작동하는 방식은 연결된 유형의 역할을합니다 그래서 이 마법의 연산자 연결 연산자는 무엇입니까? 우리의 주제이기도하다 또는 더 적은 유형 변환 프로세스 한 데이터 유형의 엔티티가 다른 데이터 유형으로 변환됩니다 유형 변환이 완료되는 두 가지 방법이 있습니다 JavaScript에서는 무엇인가 모두 암시 적 변환입니다

문자열을 정수로 변환했습니다 다시 자동으로 이것이 바로이 연산자를 사용하여 수행하는 작업입니다 자, 예를 들어, 여기에 변수 num 1이 있으면, 이것은 Phi로 초기화된다 그래서 그것은 항상 우리에게 숫자를 줄 것입니다 유형의 값입니다 이 번호로 만약 내가 하나 더 숫자를 추가하면 확실히 num2 될 것입니다 정수 또는 숫자이지만 같은 수의 정수 값으로 5를 더하면, 그러나 코팅 된 값으로 그건 내가이 3 번에 문자열을 추가한다는 것을 의미합니다 문자열 유형의 객체가 자동으로됩니다

유형이 변경됩니다 따라서 기존 가치에 어떤 가치를 더하고 있습니까? 해당 유형은 기본적으로 자동으로 변경됩니다 좋아, 프롬프트로 불리는 것을 사용하면, 프롬프터 란 무엇인가? 당신에게 글쓰기를 촉구하는 데이터 에서처럼 JavaScript에 함수가있는 것처럼, 이는 프롬프트 (prompt)라고하는 전역 함수입니다 좋아 그 말을 들으면 좋아, 브라우저가 실제로 당신에게 어떤 가치를 추가하라고 요구할 것입니다

이렇게 해보 죠 내가 프롬프트를 볼 수 있는지 보자 값을 입력하십시오 너 볼 수있어? 그것은 나에게 어떤 가치를 입력하라고 요구하고있다 그래서 그것은 나에게 알리는 메시지입니다

그래서 내가 어떤 가치를 추가 하든지 숫자를 더할 수 있습니다 세 개 또는 문자열을 추가 할 수도 있고 기본적으로 아무 것도 추가 할 수도 있습니다 이 프롬프트에서 내가 추가하는 가치 좋아, 그래서 유형 문자열입니다 유형 문자열 인 숫자를 추가합니다

그래서 내가 num1로 주어진 값을 취하면, 그런 다음이 num1의 유형이 무엇인지보고 싶습니다 그래서 num1의 타입을 입력합니다 우리가 어떻게되는지 보자 그것은 나에게 묻는다 그래서 나는 DOT 로그를 작성하고 콘솔을 작성한다

나에게 번호를 다시 써 보자 네 종류가 볼 수 있도록 문자열입니다 이 프롬프트에서 내가 쓴 것은 기본적으로 문자열로 간주됩니다 그래서 문자열이라면, 그런 다음 글쓰기를 원하는 것처럼 내 가치를 사용합니다 콘솔 DOT 로그

나는이 번호 하나를 생각한다 좋아, 9 번을 더하고 싶다 따라서 어떤 값을 추가 하든지 9 번을 추가하고 싶습니다 그러나 이것이 지금은 왜 작동하지 않을 것인가? 왜냐하면 지금은 하나의 유형 문자열입니다 우리는 연결 연산자 이 모든 것을 문자열로 변환하는 하나의 문자열 유형을가집니다 그리고 그것은 단지 연결될 것이다

이 두 숫자를 추가하는 대신 그래서 그 문제에 대해, 문자열을 정수로 변환해야합니다 또는 그 문제에 대한 부동 따라서 사용할 수있는 몇 가지 방법이 있습니다 우리는이 메소드에 float을 전달하기 위해 구문 분석합니다 문자열을 전달하면이를 정수로 변환합니다

그렇다면 우리가 얻는 가치는 무엇인지 알아 보겠습니다 나는해야하고 11로 값을 얻을 것이다 하지만 내가 그 파섹을 한 게 아니라면, 그 때 나는 9에 갈 것입니다 나는 여전히 가치있다 그래서 이것은 하나 더 많은 방법이있는 것이 어떤 문제입니까? 사용할 수 있습니다

우리에게 전화해라 그것은 또한 당신에게 일종의 경고를줍니다 안녕하세요 이것은 경고입니다 그래서 당신은 그 차이를 보지 못합니다

에서 값을 쓰라고 요청할 것입니다 반면 경고는 단지 당신에게 메시지를 돌려 줄 것입니다 그래서 이들은 두 가지 다른 방법입니다 자바 스크립트와 함께 사용할 수 있습니다 우리는 데이터 유형을 완성했다 자바 스크립트에서 연산자를 살펴 보겠습니다

자바 스크립트의 일부 그래서 많은 연산자가 있습니다 자바 스크립트에서 사용할 수 있습니다 애처로운 운영자 봄 운영자 지정 연산자 비교 연산자 3 항 연산자 및 부울 연산자를 포함합니다 연결 연산자 인 위로 문자열 연산자 우리는 또한 극적인 연산자를 보았습니다

플러스처럼 그렇게 비슷하게 – 곱셈 분할 계수 증가 감소 연산자가 작동합니다 실용적입니다 자바 스크립트 파일을 하나 더 만들어 보겠습니다 연산자 이름을 JavaScript로 지정하십시오 이 특정 파일을 스크립트에 연결하려고합니다

그래서 나는 원하는만큼의 스크립트를 추가 할 수있다 좋아요, 그냥이 파일을 추가하는 것입니다 그래서 두 스크립트가 먼저 실행됩니다 스크립트 파일이 실행됩니다 스크립트 파일은 현재 실행됩니다

우리는 이미이 스크립트 파일을 테스트했습니다 이 파일을 추천 해 주시면 감사하겠습니다 그래서 우리가 말하면, 어떤 라인에 주석을다는 것은 파서 (parser)입니다 브라우저에서 HTML로 주석 처리 할 행을 무시합니까? 각괄호는 느낌표입니다 – – 그것과 함께 – – 각괄호로 자바 스크립트에서 의견을 말하십시오 두 개의 슬래시를 사용할 수 있습니다

그래서 이것은 주석입니다 이제 Matic 연산자를 배워 봅시다 다른 언어와 마찬가지로 간단한 연산자가 있습니다 예를 들어, 2 + 3은 두 개의 값을 – save bun에 추가합니다 우리는 빼낼거야

좋아, 그렇게 간단 해 그래서 우리는 직접 2-1과 같은 것을 가질 수 있습니다 또는 우리가 당신을 알 수 있습니다 변수 차이는 3-2와 같습니다 자,이 콘솔을 로그 할 수 있습니다

그건 달라 차이점의 가치는 무엇이든 여기에 올 것입니다 두 숫자의 제품을보고 싶다면, 당신은 단지 7을 8 또는 9로 말할 수 있습니다 좋아요, 그 제품을 기록하십시오 부서를보고 싶다면 변수를 하나 더 만들 수 있습니다

네가 원하면 그냥 보아라 내가 나누고 그냥 쓰면 로그에서 계수를보기위한 출력을 봅니다 너는 말할 수있다 그 mod는 5 퍼센트와 같다 왜냐하면 계수는 당신에게 나머지를주는 어떤 것입니다

그렇다면 차이점은 무엇입니까? 그럼 그냥 대학의 차이를 끈으로 묶으려고합시다 여기서 우리는 제품을 쓰고 있습니다 제품임을 알려주세요 여기 우리는 타고있다 부서의 결과는 무엇입니까? 그리고 여기서 우리는 모듈러스로 검사 할 것입니다

이 결과물을 봅시다 차이점은 하나의 제품은 63입니다 25 모듈 부 계수에는 하나가있다 연산자를 늘리거나 줄이는 것은 무엇입니까? + +처럼 우리는 차이가 1이라는 것을 보았습니다 좋아, 단지 하나씩 늘리고 싶다면

그래서 당신이 할 수있는 것은 단지 차이를 말하는 것입니다 플러스 플러스 그것은 무언가를 쓰는 것만 큼 좋다 이 차이가 현재 값이 무엇이든간에 차이 플러스 1 내가 다른 경우 – – 글쓰기 차이가 같으면 좋다 다른 값 -1의 현재 값입니다 따라서 이들은 증가 및 감소 연산자입니다

이제 너는 차이 값은 이미 1 씩 증가합니다 테스트하고 싶다면 이걸 실행하면 볼 수 있습니다 이전에 그것은 하나 였고 이제는 역시 그렇게되었습니다 그것은 1 씩 증가했습니다

그래서 그들은 귀하의 예술 Matic 연산자 플러스 마이너스 분할 모듈러스 제품, 좋아요 증가와 감소 연산자 이것은 이미 지워진 문자열 연산자입니다 다음 연산자 유형으로 넘어 갑시다 그것은 우리가 이미 가지고있는 대입 연산자입니다

우리가 변수 변수를 선언 할 때마다 같음을 확인했습니다 우리는 단지 우리가 값을 할당한다는 것을 의미하는 것과 똑같다고 말합니다 이것이 바로 지금 가치있는 것입니다 설명을 볼 수 있다면 이것과 n을 더한 것입니다 그것은 기호를 추가한다고 말하며 어떤 가치를 더합니다

변수에 새로운 값을 뺍니다 그리고 당신이 어떤 가치를 뺄 수 있도록 배정하십시오 변수에 값을 할당하십시오 우리가 그 예를 보자 이 선들을 칭찬합시다

이 집행은 이미 너에게 보여지기 때문에 슬래시 별을 사용하여 여러 줄을 주석으로 처리 할 수 ​​있습니다 괜찮아 그래서이 모든 줄은 이제 여기까지 주석 처리됩니다 슬래시 스타를 사용할 수 있도록 댓글을 달고 싶습니다 이제 다음 유형을 보자

할당 연산자 인 연산자에 대한 설명입니다 예를 들어, 변수가 있으면 s는 9와 같으므로 숫자 유형 변수의 9 가지를 할 수 있습니다 8 변수 S 플러스 8에 해당합니다 따라서 글쓰기만큼이나 좋습니다 s는 S Plus 8의 현재 값이 무엇이든간에 같습니다

그래서 보자 우리가 여기서 얻는 결과는 무엇입니까? 내가 이걸 실행하게 해 줘 s의 출력 또는 값이 변경된 것을 볼 수 있습니까? 17로 비슷하게? 8 빼기 8 빼기 그래서 값은 1과 비슷하게 사용할 수 있습니다 곱셈과 나눗셈을 모듈러스 부호로 나눈다

그래서 이것들은 할당 연산자와 일부 정규 할당 연산자 일부 고급 과제 연산자 다음 연산자로 이동합니다 그것은 비교 연산자입니다 이제는 비교 연산자로 무엇을 의미합니까? 또는 비교 연산자가 필요한 이유는 무엇입니까? 우리가 몇 가지 논리를 그리기 위해 두 가지를 비교할 필요가있는 많은 시간, 예를 들어, 이 두 변수가 같으면 뭔가하고 싶다 이 두 가지 평등하지 않다면 뭔가하고 싶다 그래서 대학 논리를 구축하면 많은 것을 구축 할 수 있습니다

그리고 당신이 논리를 구축 할 때마다, 두 연산자를 비교하여 빌드해야합니다 논리를 주요 진술로 우리가 일반적으로 사용하는 것은 if-else 문입니다 Loops를 덮을 때 커버됩니다 그럼 소개하겠습니다 that-else Loop 여기 당신을 설명하기 위해 반복합니다

우리의 비교 사업자들이 지금 우리가 이것을 칭찬 해준 것을 다음 연산자 세트로 이동하십시오 비교 연산자를 호출하십시오 if 루프는 무엇입니까? 좋아, 어떻게하면 다른 루프를 볼 수 있을까? Loop가 일상 생활에서 볼 수 있다면 논리를 쓰고 싶다면 당신이 어떤 조건을 갖게되면 언제 운전할 것인가? 도로가 차선 인 경우, 그러면 오늘 차를 운전할거야 나는 운전하지 않을 것이다

그래서 이것이 당신의 논리라면, 그게 당신이 당신의 코드에 쓰고 싶은 것입니다 그렇게하고 싶다면 좋아, 그게 가장 간단한 방법이야 IF else 문을 사용하여 작업 수행 else 문에 구문이있는 경우, 괄호 안에있는 것처럼, 당신은 당신의 상태를 쓸 것입니다 이 조건이 참이면, 그런 다음 작성한 모든 진술 이 중괄호 안에 조건이 거짓이고 작성한 내용이 무엇이든 이 브레이스 브래킷에서 실행됩니다

따라서이 조건은 이제 출력이 true 여야합니다 또는 거짓과 어떻게 그런 결과를 얻을 것인가? 비교 연산자로 불리는 것을 사용한다면 비교 연산자, 우리와 함께 사용할 수있는 것은 동등한 가치가있다 그때와 동등하지 않다 그보다 작은 경우 이 모든 운영자는 항상 우리에게 출력을 줄 것입니다

Boolean 유형입니다 예를 들어, 변수 s가 9와 같을 수 있습니다 즉 변수 S 2가 8이고, 그래서 나는 언제나 1을 말할 것이다 그리고 S 2가 같으면 무언가를 쓸 것입니다 그들이 평등하지 않으면 당신은 뭔가를 할 것입니다

하수구 나 코드에 그걸 쓰고 싶으면 그것은 자바 스크립트 코드입니다 나는 s가 S 2와 같다고 말 할 것이고 이는 둘 다 같으면 콘솔에 씁니다 좋아, S1은 S2와 같습니다 이것이 당신이 인쇄 할 것입니다 동등하지 않은 경우

그럼 그걸 인쇄 할거야 예, 둘 다 체크와 동등하지 않습니다 그들이 평등하지 않은지 여부 비교 연산자는 감탄 부호입니다 및 기호와 동일합니다

그래서 저는 s1과 s2가 같지 않은 출력을 얻습니다 왜 그들은 평등하지 않은가? 일단 값이 9이고 다른 값이 8이기 때문에 그래서 그것이 평등하지 않은 이유입니다 그래서이 다른 부분에오고이 부분을 실행합니다 여기에 조건을 적으면 동등하지 않은 것과 나는 여기에 말할 것이다 부분적으로 다른 부분이 있다면

그리고 이걸 실행하면 부분 답처럼 답을 얻을 수 있습니다 내가 여기서 시험하는 것은 그들이 같지 않으면 당신은 이것을 실행합니다 그들이 동등하다면 지금 당장 실행하십시오 이 무언가와 동등한 것 안에서 또는 무엇보다 적은 트리플을 할 수 있습니까? 어떤 트리플은 괜찮은거야 또한 유형을 확인합니다

자, 예를 들어, S2가 9인데 타입이 string이면 바로 여기에서 1은 S2와 같습니다 무엇이 실행되는지 봅시다 If 부분에 여전히 있습니다 그 값은 같지만 s 1은 S 2와 같습니다 그러나 유형은 다르다

유형을 확인하기를 원한다면, 그럼 여기서 하나 더 평등하게 쓸 수 있어요 이 경우에 s와 같은 트리플을 S2와 같게 만드십시오 else 부분으로 이동합니다 값은 같지만 유형이 동일하지 않기 때문에 그래서 이것이 거짓말을하게됩니다 뭔가 체크 할 수있어

너는 그것보다 더 큰지 알지 그 중 큰 수 있습니다 그것은 두 조건 모두에서 같거나 같을 수 있습니다 이것은 실행됩니다 그래서 보자 여기 출력은 무엇입니까? 그렇다면 부분적이라면 좋은 것을 보유하고있는 것과 동등합니다

값이 10이면 여기에있는 else 부분으로 이동합니다 이것이 우리가 쓰는 방법입니다 우리가 더 쓸 수있는이 비교 연산자들 너는 아는 것보다 덜한 것보다 Triple과 같음은 double과 같음 동등하지 않다 그래서이 모든 비교는 다음을 사용하여 수행 할 수 있습니다 비교 연산자 다음 부분으로 넘어 갑시다 그것은 부울 연산자입니다

이제 부울 연산자 이 부울 연산자를 사용할 위치 이러한 부울 연산자는 예를 들어, 같은 효과 문을 사용하려면, 그래서 첫 번째 조건은 무엇입니까? 도로가 4 차선이라면 그때 만 너 차를 몰고있어 좀 더 많은 조건을 추가하려면, 도로가 떨어진 것처럼 그리고 교통량은 그다지 적지 않습니다 차를 운전할 것입니다 그래서 당신은 방금 하나 더 끝을 붙였습니다

그리고 하나 더 조건 여러 조건으로 작업하는 경우, 네가 모든 것을 원한다면, 당신은 진실한 당신이 사용하고 연산자를 알고 그래서 s와 같아야합니다 1이 2보다 큰 경우 + S1은 S2와 같은 트리플입니다 괜찮아 그래서 그것은 타입이 또한 사실임을 의미합니다

그리고 이것은 조건이 true이면이 부분 만 실행합니다 이 두 가지 조건을 첨부 할 수 있습니다 및 연산자를 사용하여 그러나 조건을 쓰고 싶다면 어떨까요? 그리고 그것은이 조건 중 어느 하나라도 사실 인 것처럼, 그런 경우이 시나리오에서이 부분을 실행해야합니다 너, 여기 사용할거야, 그렇지? 이상하게도 그것은 두 개의 파이프 라인입니다

그래서 당신이 쓰고 싶은 논리에 달려 있습니다 좋아, 글쓰기를 원하든 두 조건이 모두 충족되어야합니다 그건 속임수 야, 그럼 너는 갈거야 그 중 하나가 사실이라면 두 조건 모두가 참이면, 그 때 그것은 또는 상태 다 부정 조건이란 무엇입니까? 자, 결과가 어떻든간에 이 조건의 참이 틀릴 수도 있습니다

이 조건의 출력이 참이면, 하지만 당신이 거짓으로 원한다면 당신이하는 일은 당신이 그것을 부정하는 것입니다 즉이 브래킷 외부에 하나의 연산자를 추가하면됩니다 이 말은 네가 여기에 부정을 쓸 때 또는 출력이 무엇이든지 그 시간에 괜찮지 않다 이 내부 브래킷의 그건 부정적 일거야 그것이 사실이라면

이것은 거짓입니다 따라서이 전체 조건의 결과는 부정입니다 이 내부 브래킷의 좋아, 너는 어떤 일이 일어나길 원하지 않는다 이 시점에서 이것이 당신의 논리라면, 당신은 조건을 쓰는 방법을 안다 일어날 일

그럼 네가 앞에서 부정을 쓸 수있어 그 논리 앞이나 그 상태 앞 마지막 연산자의 마지막 부분은 삼항 연산자입니다 삼항 연산자에 관한이 삼항 연산자는 무엇입니까? 두 가지 문법이있다 또는 두 개의 연산자 두 개의 연산자를 조합 한 것입니다

어떻게 그걸합니까? 우선이 부분을 추천하고 다음 단계로 넘어 갑시다 그것은 삼항 연산자에서 삼항 연산자입니다 좋아요,이 두 부분이 있습니다 좋아, 냄비는 물음표로 나눠져있어 그래서 물음표는 왼손쪽에있다

왼쪽에 오른쪽이 있습니다 당신은 논리를 쓸 것입니다 그것은 항상 당신에게 true 또는 false로 결과를 줄 것입니다 따라서 확실히 비교 연산자를 사용할 것입니다 좋아, 쓸 논리를 써라

그 1은 2보다 큽니다 그래서 이것은 비교 연산자를 사용합니다 이것은 나에게 진실하거나 거짓을 줄 것이다 그래서 이것이 내가 대답을 사실로 제시한다면 무엇을 실행해야 하는가가 반환 될 것이다 이 왼쪽에 : 나는 사실을 타이핑 할 것이다

이 조건의 출력이 거짓이면, 그러면 당신이 쓴 모든 것을 실행하게됩니다 이 오른쪽에 : 그래서 여기에 출력물을 보도록하겠습니다 거짓 일 수 있습니다 1이 2보다 크지 않으므로 출력 이 조건은 거짓입니다 그래서 이것의 오른쪽에 갈 것입니다 : 그래서 삼항 연산자는 항상 물음표가 있고 : 질문 미사가 조건을 분리한다

결과는 다음과 같습니다 진실하고 잘못된 결과를 구분합니다 그래서 우리는 운영자를 끝내고 이사하게됩니다 루프로 그래서이 조건문에서, 우리는 이미 if와 if-else 문을 은폐했다

if-elsif-else 문은 무엇입니까? 그래서이 조건부의 우리가 이미 은폐했다는 진술, 지금 다른 경우라면, 이게 뭐야? 내가 말했듯이 다섯 번째 선언문 그것이 사실 일 때 두 부분이 있다면, false 인 경우 블록으로 실행합니다 else 블록을 실행합니다 else 블록 내에서 그런 경우에 하나 더 조건, 당신은 성명을 쓸 것입니다 if then then then else와 같은 구문을 갖습니다 만약에 또 다시, 그러한 구문의 예를 보도록하겠습니다

예를 들어, 사용자에게 나이를 물어 보도록 요청할 수 있습니다 그 H 그것이 60보다 크고 메시지를 쓸 수 있는지 여부 60 년이 넘었습니다 소금과 설탕 섭취를 조절해야합니다 그래서 당신의 상태는 60 세 이상입니다 비교 연산자로 진실 또는 거짓을 줄 것입니다

그래서 그것이 사실이라면 이 명령문 만 실행합니다 그것이 틀리면, 그러면 아무 일도 일어나지 않을거야 기록 된 블록이 없기 때문에 열을 옮기면 말이야 당신의 나이가 30 세 미만인 경우 귀하의 상태가 보입니다 그래서 이것이 사실이라면, 조건이 거짓이면 if 블록이 실행됩니다

그러면 else 블록이 실행됩니다 좋아, 그래서 우리는 어떻게 보았는가? if / else 블록이 지금 실행 됨 만약 else 블록에서 당신이 원하는 것이 있다면 어떤 조건을 쓰려면, 예를 들어, 사용자에게 또는 사용자가 자신의 나이를 추가합니다 또는 그녀의 나이 당신은 H로 불리는 변수에서 가져 가라 이 나이 변수에서 조건을 작성합니다 그 나이는 60 세 이상입니다

설탕과 소금 섭취를 조절해야합니다 그러면 다른 부분에 도달 할 때를 이해하게됩니다 그건 그가 60보다 크지 않다는 것을 의미합니다 그것은 그의 나이가 0에서 59 사이임을 의미합니다 그래서 그 안에 또한 당신이 그것을 분류하고 싶다면 30 세 이상인지 아닌지, 30보다 큰 경우, 다음에는 확실히 신중해야합니다

그가 무엇을 먹고 있는지 통제하지만 완전히 신중함 그래서 당신은 다시 한 번 넣을 수 있습니다 if else else 그래서 그러한 진술은 마치 다른 것과 같이 호출된다 if else 문 그래서 우리는 그 아름다운 예를 화면에서 보았습니다 다음 조건문을 살펴 보겠습니다

switch 문으로 이 switch 문 switch 문은 항상 무엇입니까? 지금 하나의 가치를 취하고, 복용하지 않고있다 비교 연산자는 항상 값의 출력이 아닙니다 switch 문은 다음과 같습니다 return이 항상 부울 값을 제공하지는 않습니다

또한 정수를 제공 할 수도 있습니다 또한 부동 소수점에 문자열을 줄 수도 있습니다 그래서 당신의 상태가 당신에게 그러한 가치를 줄 때입니다 부울 값이 아닌 그러면이 switch 문을 사용할 수 있습니다 이제 보시다시피이 switch 문을 반환하는 방법은 무엇입니까? 사용자가 자신의 길을 물어볼 것을 요청한 것입니다

이 특정 대기를 이제 전환 할 수 있습니다 float 유형 이 switch 문을 사용하면 완벽합니다 이 무게 값은 이제 switch 문 다음에 실행될 블록이 생겼습니다 사례가 있어야한다 이 사건은 모두 그것에 관한 것입니다

너는 넓은 스펙트럼을 안다 잠깐만 기다려주세요 값은 105 205 또는 각 값에 대한 값입니다

끝내야 할 일 이 사건 진술 바로 옆에 예를 들어, 무게가 105이면 문서에 쓸 것입니다 체중이 너무 크고 체중이 205 인 경우, 당신은 문서에 그 것을 쓸 것입니다 그것은 20

5입니다 이 기본 설정은 여기에서 무엇입니까? 그렇게 될 수도 있습니다 그 무게는 많은 많은 가치를 가질 것이다 따라서 모든 사례를 계속 써야합니다 때로는 사건 중 하나를 놓칠 수도 있습니다

그래서 더 낫다 기본 사례로 불리는 것을 작성하십시오 따라서이 사건은 처형 될 것입니다 그들 중 누구도 들어 맞지 않는다면 105가 20

5에 맞지 않으면 적합하지 않습니다 115로 쓰면 나는 사형 집행을 할 사건이 없다 그래서 나는이 디폴트 케이스로 갈 것입니다 실행될 수 있습니다

예를 들어, 스위치 케이스와 동일한 예제를 사용해 보겠습니다 스위치에는 대기라고하는 것이 있습니다 이 무게 값을 가져 가자 변수 가중치는 보쉬가 플로트 것을보아야 만하는 것과 같습니다 하지만 프롬프트 당신의 체중을 입력하십시오

그래서 우리는 여기서 이것을 기다립니다 그래서 그것은 개종했습니다 string에서 float으로 변환하고 이제이 대기를 전환합니다 그래서 우리는 여기에 스위치 블럭을 씁니다 좋아, 그 사건은 너도 알 수있어

또는 케이스는 당신을 알 수있다, 기다림은 기다릴 가치를 가질 수 있습니다 사례 1의 가치가 3 일 때마다 이제 3을 말하십시오 나는 다음과 같이 쓸 것이다 당신은 문서 점 쓰기를 알고 있습니다 너의 체중은 1이다

2라면 2 등으로 쓸 것입니다 나는하고 싶다 내가 여기에서 일어나거나 일하기를 원하는 논리가 무엇이든간에 내가 다음에 쓸 내용 : 그러나 체중이 왜냐하면 나는 아무 것도 일어나지 않을 것입니다 내가 할 일이 무엇이든간에 경우가 1 인 경우 많은 진술을 많이하고 싶다면 모든 것을 할 것입니다 확실하게 확실히 나는 break 문을 쓰고있다

내가 여기서 break 문을 쓰는 이유는 무엇입니까? 내가 그것을 어기면 안된다 좋아,이 사건을 실행할거야 하나는 라인에있는 다음 사례입니다 나중에이 값을 확인하지 않습니다 그것이 필수품 인 이유입니다

break 문을 작성했는지 확인합니다 그럼 이것을 실행 해 봅시다 그것은 우리에게 무게를 묻고 추가 할 때 추가합니다 일어나고있는 것이 아무것도 없다 그럴 이유가 없기 때문입니다

따라서 하나의 기본 사례를 추가하고이를 시도해 봅시다 1 쉼표 2 쉼표 3 메시지 란 무엇입니까? 내가 쓸 것입니다 그래서 바로 여기 6입니다 그 무게는 3에 묶여 있지 않습니다 그래서 우리는 스위치 케이스를 사용합니다

이것이 우리가 break 문을 쓰는 이유입니다 이 break 문을 쓰지 않으면 그리고 당신은 그것을 교차시킬 수있어서 제가 이것을 추천합니다 좋아요, 하나 추가해서 제 사건과 일치시킵니다 그것이 체크했다고 말할 수 있습니까? 서면 체중은 체중이 1이고 체중이 2입니다 그래서 심지어 사건이 처형 당했다는 것을 의미합니다

그래서 나는 break statement를 작성해야만한다 다음 단계로 넘어 갑시다 루프는 기본적으로 코드 블록입니다 여러 번 실행해야하는 동일한 작업 횟수를 원한다면 가야하는 것이 낫다

for JavaScript for Loops는 가장 유명한 Loop 중 하나이며, 또한 C와 C ++에 있으며 Java는 for Loop입니다 자바 스크립트에서도 그렇습니다 그것의 색인에있는 3 개 부품이있다 첫번째 부분은 서있다 초기화를 위해 두 번째 부분은 조건을 나타냅니다 업데이트를위한 세 번째 파트 이제 첫 번째 부분에서는 어떻게 작동합니까? for 루프를 작성하면 초기화됩니다

그래서 컨트롤이 루프에 도달하면, 먼저 변수를 어떤 값으로 초기화합니다 너는 언급했다 여기 예제에서 볼 수 있다면, 우리는 변수 I를 만들었습니다 0으로 초기화 한 다음 확인합니다 조건을 위해

조건은 true 또는 false로 평가되어야합니다 조건이 사실이라면 지금 여기 있습니다 값이 0이면 주제 도트 길이와 비교됩니다 이 과목은 무엇입니까? 이 주제의 배열입니다 따라서 길이가 3이고 예라는 것을 알 수 있다면, 물론 0은 조건이 참임을 의미하는 3보다 작습니다

그래서 아무 문제없이 처음으로 현재이 괄호 안에 작성된 것을 실행합니다 이 브레이스 브래킷을 실행 한 후 다시 돌아옵니다 구문의 세 번째 부분으로 이동합니다 그것은 갱신입니다

이제 눈 값을 업데이트합니다 0에서 1까지 Z가됩니다 그래서 다시 검사합니다 이제 조건은 3보다 작습니다 예, 물론입니다

그래서 그 일이 다시 일어난다 다시 지금 완전한 문장을 실행 한 후 여기로 간다 갱신을 위해 이제 눈 값은 2 2가 3보다 작아집니다 예, 물론, 실행됩니다 이제 눈 값은 3이되고 3은 3보다 작지 않습니다

그것은 조건이 풀 필드를 얻지 못하고 있음을 의미합니다 부울 값을 2 개의 오류로 평가하는 것입니다 이제 루프에서 빠져 나옵니다 이것은 for 루프가 실행되는 방법입니다 그 다음을 실행하려고합시다

그들이 한 일은 그들이 만든 것입니다 3 마리의 병아리를 가진 피험자의 배열, 좋아, 빈 배열 표시가 하나 더있는 배열이 있습니다 따라서 반복을 통해 또는 이전 이 주제 배열을 통해 당신은 사용자에게 물어볼 것입니다 모든 주제가 당신에게 표식을 줄 수 있습니다 그리고 그 표시를하면 그 표시를 추가 할 것입니다

더 새로운 배열 카를로스 마크 죄송합니다 계속해서 실행 해 봅시다 그래서 배열이 있습니다 알았어

과목을 우리와 똑같이 부르면된다 여기에 직접 물리학을 참조하십시오 그래서 우리는 또 다른 배열 색 표시가 있습니다 그러나 빈 배열입니다 우리는이 과목 영역을 통과하기를 원합니다

먼저 초기화를 만듭니다 variable 예를 들어, J는 내가 초기화 한 변수이다 이제 0으로 G이 주제 배열을 살펴볼 것입니다 그래서이 주제 배열의 도트 길이를 씁니다

그렇게 축복받을 때까지 그리고 길이는 그 후에 만 ​​실행해야합니다 그것은 안된다 그리고 이것은 나의 갱신이다 따라서 J가 가치가있을 때마다 0입니다 특정 주제 표지를달라고합니다

그래서 제가 여기서하는 일은 num1이 변수를 분비한다는 것입니다 그리고 변수 parsefloat를 초기화합니다 나는 주제에 대한 신속한 진입 마크를 요구했다 그 주제는 분명히 과목 배열에 그래서 여기에 과목 g 그래서 처음으로 의미합니다

처음으로 J의 값은 0입니다 그래서 그것은 최대 값을 다시 요구할 것입니다 그것은 물리학 적 가치를 요구할 것입니다 그래서 일단이 값들을 얻으면 나는 또한 수학 배열을 업데이트 할 것입니다 Mark의 트리 값에 대해서는 마비를 더할 것입니다

그래서 그것이 내가 할 일입니다 지금 이 코드를 실행 시켜서이 오류가 무엇인지 알아 봅시다 나는 그것을하지 않았고 1 레코드가 누락되었습니다 괜찮아

이걸 다시 실행시켜 수학을 부탁합니다 그래서 나는 34라고 말한다 나는 35라는 물리학을 가지고있다 나는 나의 표 배열이 또한 이것으로 형성 한 이렇게 얻는다 그래서 대신이 오래된 for 루프를 사용하여 사용할 수 있습니다

새로운 것으로 불리는 무언가의 모습은 카를로스를 따라 간다 이것에서 Loop에 대해 무엇입니까? in 루프는 키보드로 사용합니다 키워드에서 지금 키워드로 사용하는 괄호 안에 2 개의 변 LHS와 rhs를 가지고있다 옆에서 잤다 오른쪽에 오른쪽 이 Innkeeper 단어 중 하나는 하나의 배열 또는 다른 문자 여야합니다

당신이 원하는 것들의 목록을 탐색하려고합니다 예를 들어, 어떤 마크가 보이기를 원합니다 그게 추가되었습니다 그래서 나는이 표시를 통해 반복하고 싶다 그래서 내가 뭘 할 것인가? 이름의 오른쪽에 여행 할 때마다 지금 배열 표시 중 이 표시를 통해, 나는 그 요소 1에 도달 할 것이고 그 다음 요소 그 다음 세 번째 요소 계속해서 모든 요소를 ​​추가하고 싶습니다

변수에 입력 한 다음 해당 변수를 내 코드에서 사용하십시오 변수가 여기에 반환됩니다 cm은 제 변수입니다 그래서 그것이 갈 때마다 0 변수에 EM 1 변수로 올 것이다 그것은 평가 절하가 다시 EM에 올 것입니다

그럼 그냥 보자 콘솔 DOT 로그 표시를보고 싶다면 이것이 어떻게 보이는지 봅시다 보기에 34입니다 네가하는 일은 너는 그 목록의 오른쪽을 차지한다 트래버스하기를 원하는 왼쪽에 변수가 하나 있습니다

그 변수는 for 루프의 모든 반복마다 현재 요소 요소가 항상 존재 함을 가리 킵니다 0에서 n – 1 그게 내가 돌아와 나를 보았다 이게 나를 위해 일하면

45 명의 신이 야 그러면 45 명이 다시 살아납니다 너가 표장이 될지 보아라 배열 및 각 인덱스의 이름입니다 그래서 그 색인은 가치를 가질 것입니다 그래서 67과 34 그래서 우리는이 두 값을 여기에서 얻을 것입니다

좋아요, 그래서 이것이 for Loop의 작동 방식입니다 에 대한 오른쪽에 귀하의 목록입니다 여기에 색인이 있습니다 따라서이 모든 색인에 대해 삭제할 수 있습니다 좋아요, C의 그 요소와 화면상의 그 요소에 대해 이야기하겠습니다 그래서 이것은 당신을 위해 그리고 루프를 위해서였습니다

우리가 마지막 두 루프로 이동하자 while 루프와 do-while 루프 while 루프는 while 루프에 관한 것이지만 이것은 무엇입니까? 이름에서 알 수 있듯이 이 조건이 유효 할 때 실행됩니다 좋아요, 그 동안 루프가 무엇입니까 이것은 약간의 차이입니다

사실 여기서 보자 그래서 여기에 쓸 때 while 루프를 씁니다 여기 조건 그래서이 조건이 사실이라면, 이 코드 조각이 실행됩니다 그럼 뭐든지 쓰세요

이 곳에 브래킷이 실행됩니다 이 조건이 거짓이 아닌 한 좋아, 이건 처형 될거야 do while 루프에서 무엇이 발생하는지 볼 수 있습니다 작업이 수행 된 후에 반환 될 작업 또는 전에 만 반환됩니다 조건은 나중에 테스트됩니다

그게 바로 do-while Loop에서 일어나는 일입니다 그래서 처음으로이 코드를 조건을 검사하고 검사하는 두 번째 반복에 대해 조건이 true 인 경우에만 조건이 true이면 this 만 실행합니다 두 번째로, 하지만 기본적으로 처음 실행됩니다 그것은 while 루프의 차이점입니다 그리고 do-while 루프 예를 들어, 나는 8과 동등한 변수를 여기에 만듭니다

그리고 저는 말합니다 내가 10 세 미만이 될 때까지 나는 10 세 미만입니다 괜찮아 나는 콘솔 DOT 로그를 실행하고 싶다 좋아, 눈 가치는 이제 8이된다

그래서 나는 될 것이다 영원히 10보다 작습니다 그래서이 루프는 계속 사형 당할 것입니다 유한 시간 이를 무한 루프라고합니다

코드를 유한하게 만들려면 코드가 있어야합니다 그것은 천천히 그것을 구현합니다 11보다 커지면이 루프 만 중단됩니다 코드 조각을 작성해 봅시다 플러스 플러스 여기 너무 천천히 어떻게 될 것입니다 내가 9가되고 9도 9가 10보다 작습니다 그래서 이것은 천천히 실행됩니다

나는 10K가 될 것이다 그러면 10은 10보다 작지 않으므로이 루프에서 나옵니다 이제 현재 눈 값은 10이 될 것입니다 우리는 조건이 같으면 여기에 쓰도록하겠습니다 than 10 그러면 같은 논리 콘솔 DOT 로그를 작성합시다

이 두 루프를 실행 해 봅시다 괜찮아 이제 8이 10보다 작은 것을 볼 수 있습니다 9는 10보다 작습니다 그러나 10은 여전히 ​​10 미만이 아니며 실행 된 이유는 무엇입니까? 그래서 얼음 값이이 루프에서 나왔기 때문에, 하지만 이걸로 처형 당했어

지금 while 루프는 10을 취하면 10을 넘지 않습니다 그래서 두 번째로 저는 루프가 실행되지 않을 것입니다 그래서 while 루프의 차이점이 있습니다 그리고 dowhile 루프는 확실히한다 그 어떤 조건 당신이 두는 것은 무한한 상태가되어서는 안됩니다

무한 조건이면 코드가 계속 실행됩니다 이것은 while 루프에 대한 예제입니다 우리는 while 루프에서 돌아왔다 그래서 우리가 한 일은 거짓이 왜 피사체의 도트 길이로 나열되어 있는지입니다 우리는 그 주제에있는 표식을 요구할 것입니다

버튼을 통해 확인할 수 있습니다 플러스 플러스가 일어나고 있습니다 그리고 우리는 모든 과목의 표시를보고 싶습니다 그리고 다시, 나는 도트 길이보다 덜하다 좋아, 그런 다음 경고를 사용하여 메시지를 작성하면됩니다

당신은이 변수 메시지를 준다 주제는 너무나 그렇듯이 당신이 이것을받은 것을 표시합니다 Loop이 구문을 먼저 변경하는 동안 그렇습니다 do 키워드를 작성하고 실행 조건을 작성합니다 그리고 나서 while 루프는 do 이후에 선언문이다

실행되고 잠시 후 조건, 좋아, do-while Loop에서 적어도 조건을 점검하지 않고도 블록이 실행되면 그래서 내가 말했듯이, 기능에 의해 당신이 의미하는 것은 번들링입니다 함께 진술하다 당신은 당신이 그들에게 지금 레이블을 붙일 수 있기를 원한다 이 함수를 작성하는 방법 함수는 특정 구문을 갖습니다 그런 다음 구문을 따르면 자바 스크립트에서는 함수로만 호출됩니다 어, 스크립트는 구문 함수를 배우겠습니다

기능 부전이라는 키워드로 불리는 것 우리는 어떻게 함수를 작성합니까? 그래서 함수 function이라는 키워드를 사용해야합니까? 좋아요, 그때 함수의 이름 좋아, 함수이기 때문에 이제이 둥근 괄호를 따라야합니다 둥근 괄호 안에, 당신은 매개 변수로 불리는 것을 보내 게 될 것입니다

인수로도 호출 이 함수가 할 일 부르심에 따라 기능의 몸입니다 그것은 항상 중괄호 안에 쓰여있다 이것은 기본적으로 표준 정의입니다 어떤 프로그래밍 언어로 함수를 작성 하는가? 키워드가 여기에 바뀔지도 모릅니다 또는 몇 가지 핵심어 다른 언어로 변경되지만 그래, 우리는 몇 가지 키워드를 누른 다음 이름을 사용합니다

함수 다음에 이 둥근 괄호는 매우 새로운 매개 변수를 전달합니다 이 입력에서 함수에 주어진 입력 이외에는 아무것도 없습니다 이 기능이 작동합니다 어떤 일을해야 되나요? 중괄호 안에 그래서이 곱슬 괄호, 우리가이 안에서 무엇을 써도

좋아, 시체로 불린다 이 기본 이론을 아는 것으로 기능의 회복을 가져옵니다 함수를 작성하는 방법 자바 스크립트에서 이제 일련의 명령문을 사용합니다 또는 귀하의 기능 본문 만이 아니라 과제를 수행하고 가치있는 것을 산출하는 범위의 어딘가에 정의되어 있습니다 그래서 우리는 그것이 호출되는 Scope에 대해 배울 것입니다

함수 호출에 의해 함수를 정의하는 두 부분이 있는데 호출하면 그 함수 정의는 너처럼 그냥 포장 해 언제든지 사용하고 싶을 때 사용하십시오 정의라고 부름 부름은 두 가지 다른 것들입니다 함수를 어떻게 호출할까요? 그럼 뭐든간에

여기에 함수의 정의가 설명되어 있습니다 내가 그 기능을 부르길 원한다면 확실히 내가 뭘 할거 니? 그 기능의 이름을 사용할 것입니다 어떤 문제도없이 여기와 같은 이름이어야합니다

좋아,이 둥근 괄호를 사용할거야 그래서 이것은 함수의 호출이됩니다 이 기능 내에서, 당신은 매개 변수가 필요한 경우, 일부 매개 변수를 사용하여 함수를 정의한 경우, 나는 그 매개 변수들을 보내야 할 것이다 좋아, 매개 변수를 보내지 않으면 기본적으로 정의되지 않은 값이 매개 변수로 전송됩니다 그래서 이것을 함수 호출이라고합니다

그리고 위의 부분은 당신의 정의로만 불립니다 함수 무슨 함수 매개 변수 함수 매개 변수 값입니다 함수에 의해 받아 들여지는 것은 입력뿐입니다 그것은 함수에 전달됩니다 함수의 매개 변수 우리의 인수를 호출하는 인수는 매개 변수이며, 값에 의해 함수에 전달됩니다 따라서 우리가 함수에 전달한 값이 무엇이든간에 함수 호출 중에 우리가 복사 한 함수 변수에 넣습니다

우리가 정의하는 변수가 무엇이든지 나는 돌아올 것이다 그 전에 적절한 모범을 보았습니다 여기서 함수 정의를 완성 해 봅시다 return 문이란 무엇입니까? 모든 함수는 본문에 return 문을 가져야합니다 특정 값을 리턴합니다

자바 스크립트에서 꼭 필요한 기능입니다 함수에 return 문이없는 경우 디폴트 값이 리턴되고 디폴트 값 반환되는 것은 정의되지 않은 것입니다 괜찮아 그래서 이것은 어떻게 함수를 작성하고 함수를 호출 할 것인가? 함수를 작성하는 동안 반드시 확인해야합니다 당신은 return 문을 써야합니다

네가하지 않으면 기본적으로 그것은 하나님을 덜 정의되지 않은 것으로 생각합니다 JavaScript로 함수를 작성하는 방법은 무엇입니까? 음, 함수를 작성하는 네 가지 방법이 있습니다 그래서 돌아 오는 길에 또는 정의 함수는 JavaScript로 분류됩니다 그래서 함수를 정의하는 다양한 방법이 있습니다 그 기능을 호출하는 다양한 방법들 그래서 모든 카테고리가 만들어집니다

명명 된 함수의 경우 익명 함수 self, 호출 함수 및 생성자 괜찮아 우리가 이해하게하자 작은 함수를 작성하려면, 어떻게이 함수를 명명 된 함수로 작성합니까? 같은 함수를 어떻게 작성합니까? 익명의 기능? 같은 함수를 어떻게 작성합니까? 자체 호출 함수 또는 생성자? 괜찮아 보시다시피 기본적으로 이름이 붙은 용어는 자명하다

기능은 마치, 당신은 일부 또는 다른 이름 익명 기능 의미 그들은 어떤 이름 자체 호출 기능을 가지고 있지 않습니다 지금 이게 뭐야? 내가 말했듯이 기능의 정의가 다르다 함수 호출은 다른 호출은 아무것도 아니다 그러나 함수를 호출합니다

그래서 함수 스스로를 호출하는 자체 호출 함수라고합니다 그리고 마지막으로 당신은 Constructor입니까? 그래서 베일이 다른 물건과 함께 자바, 우리의 생성자가 정확히 무엇인지 이해하겠습니까? 좋습니다, 그래서 우리는이 카테고리의 각각을 자세히 보게 될 것입니다 첫 번째는 이름 기능입니다 함수는 항상 고유 한 이름을 가져야합니다 그래서 두 개의 45 네임 함수가 있다면, 그들은 모두 고유 한 이름을 가져야합니다 좋아,이 명명 된 함수를 한 번 정의 할 수 있습니다

여러 곳에서이 명명 된 함수를 호출 할 수 있습니다 네가 n 번 전화 할 수있어 몇 번이나 열 번이나? 좋아, 거기에 아무런 제한이 없다 괜찮아 이제 명명 된 함수를 어떻게 정의했는지 살펴 보겠습니다

예를 들어 함수의 이름이 여기 있다고 가정 해 봅시다 자바 스크립트에서 함수가 키워드라는 것을 알 수 있다면 이어서 마비를 더합니다 그래서 그것은 이름입니다 둥근 괄호 뒤에 함수의 쉼표로 구분 된 목록이 있습니다 일부 문자 ABCD와 같은 변수 이름이 무엇이든간에

그럼이게 무슨 뜻입니까? 이것들이 당신의 매개 변수입니까? 괜찮아 이제 너는 무언가를 쓰지 않는다 너는 그냥 이름을 쓰지 마라 변수의 암시 적으로 하나의 변수가 이미 이름으로 생성되었습니다 다른 변수가 이름으로 생성되면서 기억하고있다

이 괄호 안에 변수를 선언하지 마십시오 방금 이름을 적어 라 of the Declaration이 브라우저에 의해 처리되는 변수 또는 자바 스크립트 부분 지금 다음과 같습니다 일단 매개 변수 목록이 생성됩니다

그럼 너는 나아 간다 함수 본문과 함수 본문을 작성합니다 당신이 쓴 것은 return a plus b이고, 그래서 이 함수에 어떤 입력이 왔는지, 너는 둘 다 추가하고있어 그 결과를 요약하여 보냅니다 이 return 문이 없으면 이 함수를 호출했다면 무감각했을 때 나는 정의가 없어 졌을 것이다

괜찮아 그럼 우리가 보자 어떻게 명명 된 함수를 만들 수 있습니까? 그래서 우리는 우리 모듈을 가지고 있습니다 JavaScript로 데이터 유형 함수로 불리는 하나의 달 자바 스크립트를 만들어 보겠습니다 우리가 여기서 주목할 점은 차이가 네, 어떤 모델이든 JavaScript 파일, 추가되었습니다

좋아, 우리가 방금 추가 한 게 좋을거야 이 자바 스크립트 태그에 모든 코드를 추가 한 후 우리 HTML에서 괜찮아 방금 추가 했어 그래서 컨트롤이 괜찮을 것이라고 느낄 때마다, 스크립트가 추가되어 특정 파일로 이동합니다 명령문 1에서 실행을 시작하고, 하지만 지금은 그렇게하지 않을 것입니다

그것은 사형 집행이 아니다 시작해야합니다 그들은 어떤 종류의 선언이 될 것입니다 그런 다음 실행이 발생합니다 그래서 우리가 할 일은, 이것은 자바 스크립트 파일이기도합니다

우리는 직접 쓰지 않을 것입니다 오히려 실행될 필요가있는 코드에서 우리는 모든 코드를 작성할 것입니다 함수의 일부로 실행되어야하는 대신에 그 함수를 호출 할 것입니다 먼저 첫 번째 함수를 만들어 봅시다

이것은 명명 된 함수이며 보자 어떻게 반응하는지 그래서 우리는 함수로 쓰어야 할 키워드입니다 그런 다음 함수의 이름은 번호 추가입니다 좋아요

얼마나 많은 숫자를 추가 하시겠습니까? 그래서 A와 B, 예를 들어 그것의 본문 부분을 작성하십시오 그래서 몸 부분에 언급 한 바와 같이 return 문은 필수 항목입니다 그래서 그것은 우리가 한 일입니다 그래서 우리는이 광고를 감각이 없다고 불렀습니다 좋아, 우리는 선언 부분을 이렇게 선언했다

완료되었습니다 그래서 선언은 결코 그것을 부르지 않을 것입니다 이 함수는 JS 점을 사용하여 여기에 추가하려고합니다 그래서 우리 파일의 이름은 함수입니다 그래서이 HTML 파일이 생길 때마다 스크립트 파일을 추가했습니다

이 파일이로드 될지라도로드됩니다 그리고 네,이 함수를 정의했습니다 그럼 내가 치려고하자이 일이 일어났다 내가 출처에서 보았다면

예, JS 함수가 추가되었습니다 하지만 그래, 아무 일도 일어나지 않아 좋아요, 여기에 콘솔 부분을 추가하려고합니다 콘솔 DOT 로그 Edna가 호출됩니다 콘솔 출력을 얻는 지 봅시다

그리고 나는 본다 출력을 새로 고치면 출력이 없다는 것을 의미합니다 마지막 모듈이 무엇일까? 스크립트를로드 할 때마다 제한을 전혀 실행하지 않게됩니다 그러나 현재 내가 한 것은이 문장이 괜찮다는 것입니다 나는 처형되기를 원합니다

나는 그들을 함께 박수 친다 알았어 내가이 함수를 호출 할 때까지 실행되지 않습니다 괜찮아 그래서 일단 함수 선언이 끝나면, 이 함수를 호출하려고합니다

그래서 여기에 2 쉼표를 보냈습니다 3 이것은이 함수에 대한 호출입니다 그래서 나는이 이름을 보낼 것이다 매개 변수가 오는 함수의 이름 그래서 여기에 지금 일어나는 일은 2와 같습니다

B는 3이다 그래서 지금 내가 이걸 치면, 내 콘솔 진술이 실행됩니다 그래서 지금 당신은 기다리는 것 같이 될 것입니다 그러나 그것이 값으로 반환 된 것입니다 하지만 지금은 값을 기록하지 않았습니다

둘 다 아니야 나는 그것을 변수로 잡았다 좋아요, 그래서이 방법의 결과가 무엇이든간에 기록하도록하겠습니다 그럼 나는 5로 얻는다 이런 일을하면, 알다시피, 나는 심지어 내가 더하기 b라고 말하지도 않는다

나는이 반환 진술을 시도하지 않는다 나는 그것을 치려고 노력한다 내가 정의되지 않은 대답을 얻을 수 있는지 알 수 있습니까? 기본적으로 정의되지 않은 값이 반환되므로 이 기능으로 그래서 우리가 명명 된 함수를 작성하는 방법입니다 그래서 우리는 귀환 진술을 요구합니다 나는 또한 반환 값을 쓸 수 있습니다

일부 변수에서 대신이 메서드를 호출하십시오 이제이 변수를 기록 할 수 있습니다 그래서, 당신은 볼 수 있습니까? 여러 번이 기능을 여러 번 호출하고 있습니다 이 함수는 실행된다 내가 한 번만 더 부르면

알았어 다시, 콘솔 명령문은 세 번 실행됩니다 이것이 우리의 기능을 작성하는 방법입니다 이것은 명명 된 함수를 함수의 다음 부분으로 이동합니다 이것이 우리가 익명 함수를 선언하는 방법입니다

이름에서 알 수 있듯이? 그것은 익명입니다 지금은 이름이 없습니다 너는 이름이 없으면 너는 놀랄거야 우리가 어떻게 부르는지 그래서 때때로 우리는 함수의 이름을 요구하지 않습니다

우리는 다시 그것을 부르고 싶지 않기 때문에 그리고 그 시점에서 다시, 우리는 그 함수의 이름을 만들지 않을 것입니다 또는 다른 JavaScript는 함수 작성 기능을 제공합니다 이름없이 그럼 배우려고하자

익명 함수는 어떻게 작성합니까? 그래서 그들은 어떤 이름도 가지지 않았기 때문에 그들은 사용할 수 있습니다 한 곳에서만 좋아, 즉시 전화 할 때 그것이 정의 된 후에 또는 함수에 대한 실제 인수 우리의 함수 정의는 표현식으로 사용됩니다

그것은 저장 될 수있다 함수에 대한 실제 인수로 과거 변수에 또는 함수에 의해 값으로 반환 될 수 있습니다 이 모든 포인트가 그리스어로 들릴지도 모릅니다 예제를 보자 아니, 볼 수 있니? 함수가 정의되었는지? 따라서 키워드 함수는 이름 만 누락되었습니다

그러나 구문의 나머지는 동일하게 유지됩니다 즉 함수의 매개 변수입니다 함수의 본문입니다 그래서 그것은 완벽하게 작성되었습니다 즉 하나의 함수가 선언되었습니다

음, 이름이 없습니다 우리가 할 수있는 일은 우리가이 기능을 할당 할 수 있다는 것입니다 변수에 그래서 우리는 이것을 변수에 넣었습니다 이제이 함수를 호출하려면, 이 변수 이름을 사용할 수 있습니다 대신이 변수 이름을 사용하십시오

인수를 전달하려면 이 paranthesis를 추가하고이 매개 변수를 추가하십시오 이것은 그것을하는 한 방법입니다 그래서 다시 사용하고 싶습니까? 그리고 다시, 솔루션 왜냐하면 변수에 변수를 할당 할 수 있기 때문입니다 그래서 이것은 변수에 저장됩니다 가끔 그렇게됩니다

당신의 기능 중 어떤 것이 그런 식으로 정의되어 있는지 그 주장 중 하나 또는 매개 변수가 함수 유형입니다 그렇다면, 당신은 함수의 하나의 이름을 부여 할 수있다 또는 비행장에서 기능을 만들 수 있습니다 예를 들어, JavaScript에 메소드가 있습니다 이는 우리가 개발하지 않은 세계적 방법입니다

하지만 JavaScript는 우리에게이 방법을 제공합니다 메소드의 이름은 timeout 메소드로 설정됩니다 이 방법은 무엇을합니까?이 방법은이 방법을 사용합니다 두 개의 매개 변수 첫 번째 매개 변수는 실행할 함수입니다 두 번째 매개 변수는 아무 것도 아니다

그러나 수는 밀리 세컨드 단위의 시간입니다 그래서이 함수가하는 일은 이 함수는 첫 번째 매개 변수를 실행하고, 그것은 단지 기능 일 뿐이다 약간의 시간이지나거나 약간의 시간이 이미 체크 된 후에 그 시간이 두 번째 매개 변수입니다 이것이 settimeout 함수가 생성되는 방법입니다 그래서 그러한 방법들에서 당신의 매개 변수들은 다양합니다

당신의 익명 기능을 정의 할 수 있습니다 따라서 두 가지 방법으로 만들 수 있습니다 귀하의 익명 기능 내가 만든 동일한 기능을 실제로 사용하는지 확인해 보겠습니다 명명 된 함수 add name이 호출됩니다

자, 이제 콘솔 로그를 작성하겠습니다 익명을 요구했다 좋아, 나 한테 말해줘 이 함수를 지금 전화했던 방식으로 호출 할 수 있습니까? 이 기능은 여기에 그 이름을 사용하는 것뿐입니다 단순히 불가능합니다

그래서 내가 뭘하는지 여기에 변수를 추가합니다 익명 함수는 이제, 이 함수를 호출하고 싶습니다 그러면 어떻게해야합니까? 나는 익명 이라고만 말하면서 이걸 시도하게 해 변수를 5 쉼표로 사용하여 확인해 보겠습니다 너 볼 수있어? 익명의 함수는 내가 한 것입니다 나는 익명의 기능을 만들었다

나는 변수에 값을 매기고있다 이것은 우리가이 익명 함수를 사용할 수있는 방법입니다 또는 변수에 추가하여 유용하게 만들 수 있습니다 우리는 설정 타임 아웃의 한 예를 보았습니다 따라서 settimeout은 전역 함수 인 함수입니다

그것은 두 개의 매개 변수를 사용합니다 여기를 보면 두 매개 변수는 함수와 같습니다 두 번째는 알리 그 다음엔 괜찮을거야 너무 많은 밀리 초이면이 함수 만 실행됩니다 그래서이 중 하나에서이 익명 함수 이름을 쓸 수 있습니다

타임 아웃은 예를 들어 300 밀리 초라고 말합니다 이 함수는 실행될 것이다 또는 여기에서 함수를 정의 할 수 있습니다 이 매개 변수의 일부로 죄가 있습니다 콘솔 DOT 로그를 알고 있어야합니다

그것은 몰입 형 함수 호출이라고 설정 시간 초과 괜찮아 그렇다면 컨트롤이 여기에 도달하면 settimeout이 무엇을 할 것입니까? 그걸 확인해 줄거야 괜찮아 3000 밀리 초 동안 정지해야합니다

그 후에는이 함수를 호출해야합니다 이것이 우리에게 효과가 있는지 봅시다 3,000 밀리 초가 지나면 이것에 대한 호출이 이루어집니다 그래서 이것은 우리가 매개 변수로서 함수를 반환하는 방법입니다 다른 기능으로

따라서 익명 함수의 두 번째 용도입니다 그래서 우리는 이제 두 가지 방법을 배웠습니다 함수를 하나의 절로 명명 된 함수로 선언하는 것 또 하나는 익명 함수가 세 번째 유형으로 이동하는 것입니다 그것은 생성자입니다

우리의 생성자 기본적으로 객체 지향 패러다임 컨스트럭터는 특수 기능, 우리는 이미이 생성자를 이미 사용 해왔다 우리가 배열을 선언했을 때 귀하의 생성자를 사용하는 동안 또는 키워드를 사용하는 생성자를 호출 이 새로운 키워드는 어떤 키워드가 뒤에 오는 지 당신이 만들고 싶은 물건? 이제 type 배열의 객체를 만들고 싶다면, 그럼 당신은 새로운 배열을 말하고 당신은 그 배열 단어는 마찬가지로 자본을 가지고있다 당신이 사용하고 싶다면 또는 함수 타입의 객체를 생성 할 수 있습니다 그런 다음 new 키워드를 사용합니다 만들고 싶은 객체는 함수입니다

권리? 그래서 F는이 함수를 선언 한 후에 Capital이 될 것입니다 우리는 어떻게 써야합니까? 우리가 그 매개 변수를 타는 것과 같은 그것의 선행 우리는 어디에 시체를 씁니까? 모든 것이 그 기능의 일부입니다 그 부모는 이 예에서 이것을 볼 수 있다면 우리가 작성한 것입니다 우리는 새로운 함수 유형을 만들었습니다

그래서 새로운 함수 f는 자본입니다 그런 다음 매개 변수 목록을 작성하기 시작합니다 당신이 쓰는 모든 매개 변수는 아무것도 아닙니다 하지만 당신이 원하는 많은 매개 변수만큼 문자열 값 그 많은 것을 쓸 수 있습니다 쉼표로 구분 된 이름 그리고 마침내 당신은 그 몸을 써서 몸을 보낼 수 있습니다

돌려 주어지는 것은 a가됩니다 대문자와 세미콜론 그래서 당신은 많은 문장을 쓸 수 있습니다 마지막 매개 변수로 원하는대로 또는 마지막 매개 변수는 아무것도 아닙니다 그러나 함수의 몸체는 글쓰기만큼이나 훌륭합니다 같은 변수 추가 기능 쉼표 B와 기능이 동일합니다

좋습니다 당신의 몸은 플러스 b를 썼고, 그래서 이것은 당신이 당신의 생성자를 쓰는 방법입니다 즉, 유형을 만드는 것입니다 이것은 구문을 사용한 구문입니다 우리가 생성자를 사용하여 작업하는 것을 보자

그래서 당신은 새로운 기능을 갖게 될 것입니다 그리고 이것이 당신이 쓰는 것입니다 이제이 함수 내에서 우리는 귀하의 매개 변수 목록을 갖습니다 지금

매개 변수 목록에 마지막 매개 변수가있는 경우 이 함수의 본문으로, 당신은 아무것도 포함하지 않을 것입니다 중괄호 아무것도 큰 따옴표로 묶으십시오 함수의 본문을 작성합니다 그래서 당신이 뭔가를 쓰고 싶다면, 당신은 안다는 것을 안다 in 생성자 함수 어쩌면 큰 따옴표입니다 여기서 끝나고있어

세미콜론으로 작은 따옴표를 사용 해보자 좋아요, 그럼 당신은 플러스 b 그래서 이것은 여러분의 함수의 몸체 a plus b를 반환합니다 그리고 당신이 확실히 창조 한이 기능 그것은 익명의 함수입니다 그래서 당신은 당신이 그것을 사용하고 싶다면 그것을 추가 할 것입니다

생성자 또는 모든 변수에 당신이 지금 창조 할 것이라고, 이 함수를 호출하려면, 당신은 단지 말할 것이다 Constructor 그것과 함께 함수 값을 전달할 것입니다 당신이 익명의 기능을하는 것처럼 이 기능을 끄면 로그 아웃 할 수 있습니다 너는 다른 방법으로 그것을 가져갈 수있다 좋아, 그래서 나는 Constructor 함수에있다

좋습니다 그리고 이것은 Constructor 함수의 출력입니다 3 + 5는 8과 같습니다 그래서 이것은 하나 이상의 Anonymous 함수를 만드는 방법입니다 하지만 새로운 생성자를 사용합니다

그럼 마지막 방법을 보자 함수 호출을 만드는 것은 자체 호출 함수이다 이름이 함수를 암시하기 때문에 자체 또는 호출에 의해 호출됩니다 너 자신을 부른다 좋아요, 자기 호출 기능이라고합니다

이제이 자체 호출 함수는 무엇입니까? 이러한 함수는 익명 함수, 어느 것이 바로 호출된다 함수가 정의 된 후에 코드를 실행할 수 있습니다 전역 변수를 선언하지 않고 참조가 유지되지 않음 이 함수는 반환 값도 반환하지 않습니다 자, 어떻게이 함수를 작성합니까? 너니? 함수 정의를 완전히

그것은 익명의 기능입니다 그래서 아기처럼 익명의 기능이이 글을 쓰고 있습니다 하지만 기능이 끝나면 너를 넘어서 전화하면된다 명명 된 함수에 대해 우리는 무엇을해야합니까? 함수의 이름을 쓰면됩니다

그런 다음 둥근 괄호 매개 변수를 전달하는 데 매개 변수가 필요한 경우, 매개 변수가 필요하지 않은 경우 그럼 너는 아무것도 부르지 말고 그 함수 이름을 쓰는 것을 의미합니다 둥근 괄호를 추가하거나 추가합니다 이것이 바로 당신이하는 일입니다 이 함수를 호출 할 것이다 둥근 괄호를 열고 닫는 것만으로 그건 정확히 자기 호출 함수라고합니다

괜찮아 그래서이 함수와 같은 함수가 있습니다 그 안에는 경고 외에 아무것도 쓰지 않고, 하지만이 함수를 호출하려고합니다 그래서 당신은 아무것도 쓰지 않을 것입니다 2 개의 둥근 괄호는 그것을 호출합니다

어디 보자 여기에 self invoking function 예제가 있습니다 기능 만 기능 키워드 바로 여기 쉼표 B 좋아요

너는 단지 말한다 그것이 플러스 b를 돌려주고 있다는 것입니다 함수 정의는 이제 끝났습니다 호출하려고합니다 너는 아무 것도 덧붙이지 않는다

그러나이 두 괄호와이 괄호 안에, 당신은 어떤 가치를 쓸 수 있습니다 그래서 이것은 호출되도록 호출 될 것입니다 그것이 호출되는지 여부 내부에서 콘솔을 사용해 봅시다 자체 호출 기능

이것은 자체 호출 함수를 작성하는 방법입니다 작동하는지 봅시다 나는 자기 호출 함수에있다 그리고 방금 자기 호출 함수를 호출했습니다 중요한 것은 둥근 괄호입니까? 좋아요, 여기 쓸 수 있어요

아니면 그냥 밖에서 끝낼 수도 있습니다 프레젠테이션에서 본 것처럼 그래서 당신은 외쳐서 끝낼 수 있습니다 또는 전화하기 바로 전에 괜찮아 그래서 완전한 엔티티로서, 좋아,이 완전한 엔티티 후에 반환되었습니다

이 둥근 괄호를 쓸 수 있습니다 괜찮아 그래서 네 개의 모든 경로가 은폐되었습니다 명명 된 함수를 만드는 방법 새로운 Constructor 함수 그리고 마지막으로 자체 호출 함수 이제 한 가지 더 많은 예제로 이동해 보겠습니다

숫자의 제곱을 계산하는 걸 좋아해요 우리가 여기서 어떻게 쓸 수 있도록 계산합니까? 볼 수 있듯이 하나의 자바 스크립트 파일을 만듭니다 즉, 숫자의 제곱을 계산하는 것입니다 우리는 함수를 작성할 수 있습니다 좋아요

숫자의 제곱입니다 곱셈 만 반환합니다 자신의 제품 자체 그래서 그것은 우리에게 결과를 줄 것입니다 그럼 모든 네 가지 유형을 사용해 보겠습니다

이 계산에서 사각형 이 숫자는 자바 스크립트의 함수 점이었습니다 자바 스크립트 파일을 하나 더 만들어 보겠습니다 이것을 calculate square로 저장해 봅시다 점 JavaScript 그래서 우리는 아무것도 만들지 않을 것입니다 그러나 네 가지 유형의 기능 모두

먼저 함수라는 첫 번째 함수를 사용하겠습니다 첫 번째 기능은 기능입니다 그것은 지명된다 그럼 n을 써 봅시다 정사각형으로 계산하면 단일 숫자가됩니다

되돌아와 자체 생산품 좋아요, 그래서 우리는 이미이 명명 된 함수를 선언했습니다 이 함수를 호출 할 차례입니다 그럼이 콘솔 DOT 로그를 사용해 봅시다

명명 된 함수를 호출하는 명령문을 작성하고 이 함수를 호출하면됩니다 이 기능과 함께 우리는 가치를 보낼 것입니다 이것은 새로운 Javascript 파일을 작성한 것입니다 스크립트 태그에 추가해야합니다

그럼 그냥 논평하자 이것은 우리가 얻는 산출물과 혼동 될 것입니다 이제 스크립트 태그를 하나 더 추가합시다 사용하고있는 이름 지정 규칙을 확인하십시오 이 파일을로드하려고 시도하십시오

좋아,이 파일을로드하면, 함수가 호출되면 출력을 얻을 수 있습니다 이제 익명 함수를 호출하거나 하나의 익명 함수를 만들려면, 그래서 익명의 함수를 만들어 보자 그냥 숫자를 가져 가라 p B를 B로 되돌립니다 당신이 그것을 변수 CE 계산에 할당합니다

이것이 우리가 익명 함수를 작성하는 방법입니다 여기에 콘솔 잠금 장치로 전화를 걸어보십시오 당신은 비 Ms 전화를 할 것입니다 이 변수를 대신 호출하십시오

그리고이 변수에 값을주세요 6 우리에게 보겠습니다 이것이 MsFunction에서 호출되면 또한 전화 받고 있습니다 이제 새로운 Constructor를 사용하여 square를 계산해 봅시다

그래, Constructor를 사용하여 Square를 계산하려면, 우리가 사용하는 것은 새로운 키워드입니다 함수 f Capital 이제는 모든 것이 있습니다 본문 또는 매개 변수로 만들어진 함수에서 반환됩니다 모든 것은 밀려 야합니다 좋아, 매개 변수로

먼저 매개 변수 목록을 작성해 보겠습니다 얼마나 많은 매개 변수가 필요합니까? 단 하나뿐입니다 따라서 매개 변수를 추가하면 마지막 매개 변수가됩니다 시체 만 빼고 함수 그래서 당신은 a로 돌아갈 것입니다

그래서 이것은 몸이됩니다 함수의 좋아,이게 네가 원하는 매개 변수 야 그것은 익명의 함수이기 때문에 시장에 내놓거나 추가하거나 변수에 할당 해 봅시다

로그에서 제대로 실행되는지 확인해 봅시다 그래서 당신은 Constructor 함수를 호출하는 메시지를 작성합니다 그리고 가치를 전달합시다 제대로 호출되는지 봅시다 그래서 우리는 Constructor 함수를 호출합니다

그래서 이것이 우리가 부르는 방식입니다 생성자 함수와 마지막 함수로 가자 그것은 스스로를 생성하는 자체 호출 함수입니다 처음에는 함수를 호출하는 함수를 호출합니다 F는 항상 작다

새 생성자에서 f는 추가하는 자본입니다 정사각형을 계산하려는 값 좋아 그 시체 이제 기능이 준비되었습니다

그래서 그것을 호출하여 확실히 호출하려고합니다 값 9를 전달하여 스스로를 호출합니다 괜찮아 그럼 함수의 본문에 글을 써 봅시다 좋아, 남자 콘솔 진술

자체 호출 함수 호출하기 어떻게 보이는지 당신의 기능입니다 이것은 함수의 본문입니다 첫 성명서와 함께, 그리고 그것은 두 번째 성명서이며 그들은 여기에서 몸이 끝납니다 그리고 이것이 당신이 함수를 호출하는 곳입니다 그래서 나는 달리게하고 최종 기능을 얻습니다

그리고 그것은 단지 값을 돌려줍니다 출력을 쓰지도 않습니다 우리가 할 수있는 일은 여기에 출력을 쓸 수 있다는 것입니다 또는 콘솔 DOT 로그에이 완전한 기능을 쓸 수 있습니다 좋아, 아주 간단한 프로그램이야

하지만 당신은 다른 방법으로 사용할 수 있습니다 쓰기 기능의 어떤 유형의 기능이 필요할 때, 당신은 이름 기능을 원한다면 그것을 사용할 수 있습니다 당신은 익명의 기능을 사용할 수 있습니다 당신은 그것을 위해 새로운 Constructor에 갈 수 있습니다 너는 갈 수있어

자체 호출 기능을 사용하면 갈 수 있습니다 좋아요 여기서 우리는 기능의 실용적인 부분을 완성합니다 이제 우리는 메모리 관리쪽으로 이동하게 될 것입니다 자바 스크립트에서 볼 수 있듯이 그 기능 그것이 여기에 반환되는 방법은 생성 된 제곱 함수이고 JavaScript가이 HTML에 링크되어 있음 이 함수를 실행하기 위해서 우리는 대신에 alert box를 사용했다

콘솔 DOT 로그 예를 들어, 우리가 본 것입니다 경고라고하는 것을 사용할 수도 있습니다 좋아요, 그리고 숫자의 제곱을 계산합니다 좋아요 출력을 이것에 표시하십시오

에디 (Eddie)는 폐쇄가 무엇인가? 함수와 범위 체인 사이 내가 네게 말했듯이 우리는 볼 수 없을 것이다 스코프 체인이 정확히 무엇인지, 하지만 범위 체인이라고하는 것이 있습니다 존재하는 의미는 어떤 것이 그것을 과시하는지 숨겨진 참조가있는 함수 정의를 나타냅니다 범위 란 무엇입니까? 스코프 체인을 유지합니다 그것은 사용 및 복사됩니다 언제든지 외부 환경 참조

함수가 실행됩니다 이전 슬라이드에서 폐쇄 예제를 보았습니다 여기서 f의 로컬 메모리는 가비지 컬렉팅되지 않는다 F에 액세스 할 수있는 방법이없는 경우에도 여기에 작은 예제를 보겠습니다

우리가 종결을 이해하는 데 도움이 될 것입니다 괜찮아 그래서 함수 이름을 함수로 만들었습니다 변수를 갖는 익명의 함수 그래서 이것은 가변적입니다

이 함수에서 선언됩니다 게다가 그것은 하나 더 많은 기능을 가지고 있습니다 그것은 같은 방식으로 되돌아 간다 우리는 함수 G를 가지고 있었고, 함수에 의해 반환 된 가방 F와 유사합니다

여기에 하나 더 많은 기능이 있습니다 돌려 주어져 외부 범위에 액세스 할 수있다 카운터입니다 그래서 같은 예제 우리가 본 것만 큼 이름이 바뀌 었습니다 이제이 전체 기능이 추가되었습니다 변수에 G 변수를 추가하는 것과 같습니다

그래서 그것이 제가 추가 한 것입니다 나는이 함수를 호출하도록 항해했다 무엇이든 출력이 추가됩니다 이 변수에 추가하십시오 이 클로저 점 JS를 함수 HTML 파일에 추가해 보겠습니다

이 파일을 다시로드합시다 소스에서 클로저가 추가되었습니다 그래서 우리는 변수가 있습니다 자체 호출 기능이 있습니다 이제 함수에는 변수가 있습니다

다른 함수 출력을 반환합니다 그 함수는 실제로 함수를 사용합니다 그것은 바깥 범위를 정의합니다 이 add 함수를 호출 해 봅시다 이 추가 기능에서 알 수 있습니다

처음에는 카운터가 0이었습니다 나는 그것을 부른다 다시 한번 카운터가 여전히 증가하고 있습니다 왜 이런 일이 내가 이것을 보려고 했는가? 그리고이 종결을 보여주세요

Carlos 스코프 내부에는 클로저가 있고 클로저에는이 모든 데이터가 있습니다 그래서 이제 우리는 열어 이것은 나의 외부 기능이다 만약 당신이 그것을 보편적 인 세트로 상상한다면 이것이 내 바깥의 기능이라고 해봅시다

함수를 사용하지 않으면 일부 메모리에 일부 변수가 생깁니다 좋아,이 바깥 쪽 함수는 실제로 반환 값을 반환합니다 다시 한 가지 기능 어느 것이 지금 내부 기능입니다, 이 내부 함수는 변수를 사용합니다 그것들은 밖에 선언된다

좋아요 그러면 이것이 반환됩니다 나는 확실히한다 이 외부 함수는 하나의 전역 변수에 의해 참조됩니다 전역 변수 그러한 시나리오 이후에이 외부 함수를 가리킨다

어떤 일이 일어나는가? 그리고이 Global 변수를 호출 할 때마다, 나는이 함수를 처음으로 호출 할 것이다 이 값이 0인지 지금보십시오 나는 그 시간에이 기능을 한 번 더 부른다 어떤 일이 일어나는가? 컨트롤이이 내부 함수로 직접 점프합니다 여기서 0에 존재하는 값을 취한다

괜찮아 일단 그것이 하나가되면 그것은 그 하나의 가치를 취할 것입니다 다시 0으로 리메이크하지 않으므로 시작이 아닙니다 바깥 기능에서 왜 이것의 범위가 이것에 대한 것이기 때문에? 이제 외부 기능 대신

좋아요, 그게 여기서 일어난 일이에요 카운터가 8이 된 것을 볼 수 있다면 그래서이 함수를 카운터라고 부를 때마다 카운터 왜 증가할까요? 가장 최근의 변화가 무엇이든, 이 변수에 대처하면이 변수에 추가됩니다 이 변수가이 변수의 일부가 아니라는 것을 상상할 수 있습니다 여기에 복사됩니다

좋아, 그리고 모든 최신 값 그것을 변경 한 것은 증가합니다 괜찮아 이것이 폐쇄가 작동하는 방법입니다 따라서 함수를 가리키는 전역 변수가있을 때 차례로 1 개의 내부 함수를 반환합니다 그것은 외부 함수 변수를 초과합니다

그 외부 함수 변수는 부분이됩니다 그 내적 기능 그들은 초기화되지 않는다 이 전역 변수를 호출 할 때마다 이것은 당신이 뭔가를 만들 수있는 종결입니다 같은 변수 이름과 같은 데이터를 여기에 얻을 하지만 이제 변수가 하나 더 생겨 H 변수가 생깁니다 그래서 어떤 나이가 변하기 쉬운 말을 넣을 것입니다

여름 드레스가 입어집니다 기본적으로이 모든 데이터는 논리적으로 생각하면됩니다 이 데이터에 대해, 단일 엔티티에 속하며 사용자 일 수 있습니다 또는 우리가 그것을 부를 사람 하지만 세 가지 변수가 있습니다 자, 배열을 사용하려고한다면, 그럼 컬렉션 일뿐입니다

균질 데이터 유형의 그래서 많은 이름이 있다면 함께 모을 수 있습니다 배열을 만들어야합니다 네, 다른 데이터 유형이있는 경우에 대비 해서요 논리적으로 그것은 하나의 개체 그러면 JavaScript가 호출하여 Json 객체 스탠드 JavaScript 객체 표기법 또는 간단한 용어로 객체 JavaScript를 사용하여 만들 수 있습니다 그래서 나는이 모든 자료를 넣을 수있다

한 가지 이름 아래서 그리고 그것은 물건이 전부인 것입니다 자, 이벤트 처리에 대해서도 배우게 될 것입니다 어떤 사건이지 많은 이벤트가 발생합니다 페이지를로드 할 때

하나의 이벤트가 생성되면 버튼이 생성됩니다 입력 상자에 입력하면 이벤트가 하나 더 생성됩니다 따라서 많은 이벤트가 생성됩니다 그래서 똑똑한 개발자가되어서 내가 기회를 갖지 말아야하는 이유는 무엇입니까? 발생시 그러한 사건을 이용했다 특정 사건들

나는 어떤 일을 할 수있다 이것이 바로 오늘날 우리가 배우고 자하는 것입니다 내가 말했던 것처럼 우리가 어떻게 대상을 만들까요? 아무것도 아니지만 논리적으로 모든 데이터입니다 하나의 개체에 속한 개체는 하나의 이름으로 모아집니다 우리는 거의 여섯 번 주위에 있습니다

객체를 선언 할 수있다 또는 우리는 이제 한 가지 더 객체를 생성 할 수 있습니다 우리가 어떤 언어로 객체 객체에 관해서 이야기 할 때, 어쩌면 자바 스크립트, 어쩌면 Java 또는 dotnet 또는 다른 언어 일 수 있습니다 우리가 물건으로 일하는 것은 대개 뭔가입니다 실제 실재물과 우리는 몇 가지 특정 부분을 가지고 선언되어 있습니다

너를 설명 할께 일단 객체가 우리 속성이라고 불리는 것을 가지고 있다면 기본 현재 어떤 속성이 있습니까? 나는 인간이 하나의 대상이라고 말하면된다 그래서 인간은 많은 성질을 가지고 있습니다 그는 눈 혀를 코 손 다리 등이있다

엔티티가 소유하고있는 모든 것 또는 그 기업이 그 재산이되는 것에 상관없이 두 번째 부분 일반적으로 메소드 또는 기능이라고하는 것이 있습니다 의미하는 것은 그 개체가 속성을 수행 할 수있는 것은 무엇입니까? 그것이 소유하고 그것이 할 수있는 것이 그것의 방법을 형성한다 그래서 인간은 말할 수있다 프로그래밍을 할 수 있습니다

그래서이 모든 것이 그 기능이됩니다 그래서 이것이 할 수있는 일입니다 기본적으로 두 부분으로 나뉘어져 있습니다 다른 방법입니다 그것이 당신이 당신의 물건을 디자인하는 방법입니다

이제 우리가 볼 수있는이 객체를 만드는 방법 잠시 후에 우리는 당신에게 말할 것입니다 그 재산과 실체가 소유하고있는 재산 일반적으로 해당 엔티티의 모든 속성에 액세스 할 수 있습니다 또는 그 객체 DOT 표기법을 사용하여이 부동산에 어떻게 접근합니까? 예를 들어, 인간이 가지고있는 경우, 당신은 하나의 속성으로 이름을 알고 있습니다

이름이 Newman 인이 객체의 경우 사용할 수 있습니다 이 이름 프로퍼티는 DOT 연산자 인 DOT 연산자를 사용합니다 그것은 필수이고 속성 이름입니다 따라서 DOT 속성을 사용하면 모든 속성에 액세스 할 수 있습니다 그것이 매우 중요한 것입니다

괜찮아 따라서 잠시 시간을 들이지 않고 배우십시오 우리는 어떻게 객체를 생성합니까? 좋아, 우리가 new 연산자를 사용하는 방식으로 객체를 생성해라 기능을 생성하는 동안 이 새로운 연산자를 사용하여 객체를 만들 수도 있습니다 그래서 내가 너에게 말했듯이 무엇이든 그 변수를 키워드로 선언해야합니다

우리가 그렇듯이 규칙도 엄격하게 여기에 따라옵니다 그래서 예제에서 볼 수 있다면, 이름이 person 인 변수를 만들었습니다 그리고이 새로운 연산자를 사용하여 다음과 같이 완벽한 객체를 만듭니다 이 첫 번째 코드 줄을 사용합니다 하나의 빈 개체를 만들었습니다

이제는 속성을 추가 할 차례입니다 그래서 우리가 할 수있는 것은 우리가 정의 할 수있는 사람의 도트 이름은 Saya와 같습니다 좋아, 나이가 너무 많아 그래서이 객체에 두 개의 속성을 추가했습니다 자,이 객체를 만들자

이제 새 파일을 만듭니다 개체 JS로 저장하자 좋아요, 그리고 객체 도트 의자에서, new 연산자를 사용하여 객체를 생성 해 봅시다 따라서이 새로운 연산자를 사용할 때마다 당신이 함수 나 객체를 위해 그것을 사용한다면 make 그 f & o 자본은 매우 중요한 것입니다 그러니 그 속성을 말하는 것을 추가해 봅시다

C 지정은 강사입니다 좋아, 사람이 전화 번호를 점 찍어 이런 식으로 번호를 붙여야합니다 그렇습니다 나는 내 물건이 완전히 준비 됐어

나는 여기에 물건을 만들었다 괜찮아 이제이 모든 것을 기능적으로 밀어 넣고 싶다면 그래서 그것은 또한 훌륭한 아이디어입니다 당신은 기능 창조 사람을 안다 이 함수가 명명 된 함수 인 경우, 나는이 모든 데이터를이 함수에 넣을 수있다

내가 들여다 보았는지 확인하십시오 그래서 제 기능이 준비되었습니다 지금이 함수를 호출 할 수 있습니다 나는이 기능을 사용하고있다 나는 사람을 만들 수있다

괜찮아 그래서이 일이 일어 났을 때이 함수는 리턴 할 것입니다 나 다시 오리발을 틀어 줘 나는 아무것도 쓸 수 없어 그러나 그것은 제가 만든 공장과 같습니다

그래서 내가 person이라는 타입의 객체를 만들고 싶을 때 재산으로서의 질병, 나는이 사람을 만드는 방법이라고 부를 것이다 그것이 내가 한 일입니다 내 HTML 페이지에서 사용하도록하겠습니다 파일 이름은 오브젝트 점 JS입니다 먼저 그것이 생기는지 보자

전화 했어 그래, 출처에 붙어 있니? 완전한 그래서 나는 아무것도 인쇄하지 않았다 그래서 나는 콘솔 DOT가 그녀를 기록하고 그냥 말할 수 있다고 말한다 이 변수의 값은 무엇이든간에

저것을 인쇄하게하십시오 그렇습니다, 객체를 지정 이름으로 완전히 가져옵니다 전화 번호 그리고 그것의 유형은 객체 일뿐입니다 이것이 새로운 연산자를 사용하여 객체를 만든 방법입니다 따라서이 새 객체 대신 우리는이 두 중괄호를 쓸 수 있습니다 그리고 그것은 똑같이 작동 할 것이다

왜냐하면 새로운 객체를 쓰는 대신 이 두 중괄호 만 타면, 즉, 빈 객체를 만들었습니다 알았어 사람의 유형을 입력하면됩니다 항상 물건 빈 객체로 초기화 했으므로 마찬가지로이 객체에 속성을 지정할 수 있습니다

어쩌면 당신은 이것을 복사 할 수 있습니다 투표 한 모든 사람이이 물건을 사용하고 있다고 말하십시오 자, 그러면 여기에 글을 쓰고 똑같은 것을 쓸 것입니다 좋아요 이제 동일한 변수가 create를 가리킬 것입니다

사람이 기능하기 이것이 우리가 할 일입니다 똑같은 것을 입력하면 그리고 지금 그것은 코디를 가리키고 있습니다 그래서 변화가 무엇입니까? 끝난 것은 아무것도 아니다 그러나 우리는이 버팀대 괄호를 사용하여 사람을 만들었습니다

그래서 객체를 만드는 세 번째 방법 그래서 당신은 같은 방법으로 사용할 수 있습니다 중괄호를 사용하여 객체를 만듭니다 그러나 그 물건에 물건을주는 것 좋아, DOT 표기법을 사용할뿐만 아니라, 하지만 대괄호라고 불리는 것을 사용할 수 있습니다 배열을위한 아기 사용과 그 안에 작은 따옴표로 묶는 것과 같이, 당신의 재산을 써주세요

따라서 이것은 귀하의 재산을 추가하는 두 번째 방법입니다 자 이제 제 3의 길을 만들어 보겠습니다 사람을 만드는 것 이름은 3이 될 것입니다 여기에 점 표기법 대신에

이런 식으로 타이핑 할 수 있습니다 여기에 이름을 입력하는 것과 같습니다 좋아, 같은 전화 번호 괜찮아 그래서 이것은 하나 더 방법입니다

이것을 쓰면 이것과 비슷한 것을 쓸 수 있습니다 당신은 알리는 경고를 만들 수 있습니다, 변수 gory가이 세 번째 함수를 가리 키도록하십시오 좋아요, Cody 3을 이름으로 사용하게하십시오 나는 지금이 이름을 초과하고 싶다 좋아요

이름은 연결 연산자를 사용하여 값을 첨부했습니다 그 지정을 쓰자 객체 명 그럼 전화 번호 그래서 이것은 콘솔 DOT 로그를 수행하는 대신 모든 데이터, 내가 보게 해줘 내가이 경고를 받으면 이걸 내게 맡겨라

나는 알리는 경고를 받는다 그 이름은 코리 (Corey) 3입니다 전화 번호도 너무 많아서 그 경계가 우리에게 모든 세부 사항을 주었다 그래서 우리는 콘솔 DOT 로그를 사용하여 모든 세부 사항을 볼 수 있습니다 괜찮아

우리는 콘솔 DOT 로그를 작성할 수 있습니다 J의 우리 파일이나 직접 콘솔에 괜찮아 그래서 여기서 우리는 이렇게 입력 할 수 있습니다 고리에 입력하면 그걸 줄 것입니다

그래서 여기 DOT 로그를 쓸 필요가 없습니다 왜냐하면 실제로 콘솔에 로그온하기 때문입니다 따라서 잠그고 자하는 것을 입력하십시오 그리고 그것은 당신에게 결과를 줄 것이다 그래서 이것들은 몇 가지 방법이었습니다

벌채의 이것이 제 3의 길이었다 개체를 만드는 방법 우리가 방금 두 가지 방법을 보았을 때 속성 생성 중 하나는 도트 연산자를 사용합니다 다른 하나는 빈 개체를 만드는 대신 대괄호를 사용하십시오 처음에는 모든 속성 이름을 채울 수 있습니다 이 값은 콜론으로 구분됩니다

그래서 모든 재산에는 외투가 없습니다 그것은 재산입니다 가치에는 외투가있다 그것이 유형 문자열 인 경우 숫자가 직접 값이면, 이 네 번째 유형을 보자 개체를 만드는 방법 그래서 여기 대신에, 나는이 같은 물건을 만들거야

그래서 이름이 첫 번째 속성입니다 입력 할 수 있습니다 4 쉼표로 다른 속성 CH 60 다음 지정을 말한다 트레이너, 이것도 쉼표와 전화 번호입니다 이런 객체를 직접 만들었습니다

이 객체를 선언하는 동안 그래서 초기화 선언은 한 성명서에서 일어났습니다 나는 그 사람을 여기로 돌려 보내고있다 나를 그냥두고 보게 해줘 이게 나를 위해 일하면 그 개체를 끝낼 때마다 온라인으로 쉼표를 쓰지 마십시오

또는 세미콜론 그게 꼭 필요한거야 변수 gauri가 무엇인지 보자 그것은 40의 나이가 60 지정은 지금 쟁반이다 그래서 기본적으로 여기에 따라 값을 렌더링합니다

알파벳순 연령 지정 n을 알고 있습니다 다음 P 함수를 사용하여 객체 생성 안 함 우리는 이미 해냈다 하지만 조금 다른 뭔가를 만들 수 있습니다 기능처럼 객체를 만드는 하지만 함수의 이름은 어떻게 될지 확실히 명명 된 함수 그 기능의 몸은 무엇이든 될 것입니다 그러나 속성 그 객체의 현재 객체의 속성 이 키워드는 항상 앞에 표시됩니다

이것은 현재 객체를 의미합니다 당신이 만들고있는 우리가 가진 많은 객체 지향 언어와 같은 방식 생성자 (Constructor) 만약 누군가 자바 개발자라면, 그들은 직접 느낄 것입니다 좋습니다 이것은 생성자를 만드는 것과 같습니다 그래서 생성자를 생성 할 수 있습니다

그 생성자는 자바 스크립트에서의 당신의 함수 일뿐입니다 여기서 당신은 함수와 몸체의 이름을 만듭니다 함수의 모든 속성이 초기화됩니다 따라서 모든 속성에는 항상 키워드가 있습니다 이 뜻은 이 도트 이름을 만드는 현재 객체 그래서 현재 대상 만들고있는 것은 속성 이름을 추가하기 만하면됩니다 그것에 현재 객체

당신은 그것을 만들기 위해 H 속성을 추가합니다 따라서 생성자가 준비가되면 생성되지 않는다 이 생성자 또는 특수 함수가 호출되지 않는 한 이 특수 함수를 호출하려면 사용해야합니다 연산자 카를로스 새로운 너무 새로운 그런 다음 함수의 이름을 간단히 이 함수를 호출하면, 당신이 가지고있는 객체를 생성하지 않습니다 새 키워드를 사용하십시오

이제 생성자 함수를 생성 해 봅시다 생성자 함수는 간단한 함수 일 수 있습니다 이 도트 이름으로 이름이 지정됩니다 5 세미콜론 다음에이 점 지정 트레이너는 90 점을 쳐다 본다

따라서이 기능을 사용할 준비가되었습니다 지금 이 기능이 준비되면 이해합니다 새 연산자 만 사용하여 호출해야합니다 그래서 변수 Corey는 새로운 사람과 같은 것을 가질 것입니다

네가 볼 수만 있다면 앞으로 넥타이를 줄 것이다 네가 지금 선언 한 것은 무엇이든간에, 너는 수업을 안다 클래스 개체 개념을 사용하여 개체를 만들 수 있습니다 여기에 새로운 연산자를 사용하기 때문입니다 이렇게하면 새로운 값이 할당됩니다

방금 본다면 이것이 당신을 위해 일하고 여기에 고리를 입력하면 예, 하나 더 많은 객체가 생성 된 것을 볼 수 있습니다 좋아요,이 값을 가진 사람입니다 괜찮아 그럼 다음 방법을 보자

그것은 객체를 만드는 여섯 번째 방법입니다 그래서 아무것도 사용하지 않고, 그러나 유형 객체 도트 생성 메소드 기본적으로 객체를 생성하는 것입니다 그리고 물건은 버팀대 받침대를 사용하는 것과 같을 것이다 당신은 방금 하나의 물건을 만들었습니다

여기 예제에서 보면, 객체 변수 이름은 속성 typ 유형에는 값이 있습니다 이제 하나 이상의 메서드가 있습니다 표시됩니다 이것이 바로 우리가 지금 소개하게 될 방법입니다 방법을 어떻게 추가 할까? 그 물건과 같은 물건에요? 이름을 써야합니다

좋습니다, 그것은 메소드 명으로 구분되거나 할당됩니다 그것은 하나의 함수이기 때문에 디스플레이 타입이 하나의 메소드입니다 알았어 함수에 할당되어있다 그 기능이하는 것은 아무것도 아니지만 그것은 단지 그것은 당신에게 경고를 준다

그 타입이 그렇게 생각 타입입니다 그래서 그것은 그것의 모든 속성에 접근한다 이 특정 변수를 사용하여 Valium Now를 제공합니다 나는 변수 동물 만 말할 수있다 그리고 그것은 분명히 나에게 물건을 줄 것이다

내가 만들고 싶다면? 이 변수를 사용하여 점점 더 많은 객체 그래서 자본과 함께있는 대상을 사용합니다 좋아,이 Regular 오브젝트 도트 작성 메소드 이 생성 메소드에이 변수 이름을 지정합니다 이 객체의 복사본이 하나 더 생성됩니다 한 번 더 전화를 걸려면 이 방법을 한 번 더 작성하면 속성을 변경할 수 있습니다

원하는대로 사용 해보자 이 객체는 객체를 생성하는 메소드를 만듭니다 그래서 그것이 말하는 것은 그것이 아무것도 창조하지 않았다는 것이다 하지만 변수는 동물 이것은 순수한 객체 생성과 같습니다

그래서 그것은 말하게됩니다 그 무척 추세에 SQL 형식입니다 우리가 어떻게 재산 쉼표를 반환했는지, 우리는 그 방법으로 불리는 것을 쓰고 싶습니다 그래서 방법을 보자 이런 식으로 함수를 초기화하고 그 기능은 아무것도하지 않고 그 유형을 알려줍니다 유형은 무엇입니까? 이 특별한 물건? 입력됩니다

현재 개체는 항상이 키워드로 표시됩니다 그래서 이것은 함수입니다 이 디스플레이 유형에 추가 한 항목입니다 길처럼 간단하다 우리는 여기에 나이 지정이라는 이름을 만들었습니다

좋아요 모든 속성은 쉼표로 구분됩니다 방금 속성 이름을 하나 더 추가했습니다 그러나 우리는 이것을 이와 같은 함수로 초기화했습니다 이제 우리는 많은 객체를 생성하기 위해 이 특별한 프로토 타입, 어떻게 우리가 가는지 그래서 나는 변수와 같은 것을 만들 수있다

말을 해 8 개의 유형을 만들고 싶습니다 동물, 알았어 그래서 나는 무언가를 사용한다 오브젝트 도트 생성 방법으로 말을 만들었습니다

이 동물 유형을 사용합니다 이것이 우리에게 효과가 있는지 보자 말은 무엇입니까 그래서 그것은 타입 so-and-so의 객체를 가지고 있습니다 유형 값은 다음과 같습니다

표시 유형은 함수 인 값입니다 괜찮아 그것은 또한 당신이 알고있는 생성자를 가지고 있습니다 범위들 그리고 그것은 유형입니다 그래서 이것이 만들어지는 것입니다

내가 입력하기 만하면 그 재산을 얻습니다 좋아요, 유형 및 표시 유형입니다 좋아요 표시 유형이 메소드입니다 type은 하나의 속성이고 this는 Prototype 객체의 추가 정보입니다 우리가 가지고있는

이제 말을 만들면서 많은 사람들이 좋아, 유형을 변경하고 싶습니다 명확히 나는 여기에 가서 그 유형을 다른 것으로 바꿀 수 있습니다 이런 말과 해마를 타이핑 할 수 있습니다 값이 이미 변경되었습니다

좋아요, 그것이 중요한 것입니다 나는 확실히 나아갈 수있다 그 객체를 원할 때마다 유형을 변경하십시오 그 방법도 호출 할 수 있습니다 좋아, 그 방법 불러 낼 수있어

도트 표시 유형과 같은이 객체를 사용하여 그것은 방법이기 때문에 그것을 부르 자 그래서 저는 말할 것이고 타입은 다른 것입니다 괜찮아 그래서이 방법을 사용하는 것입니다

객체 도트 생성 메소드를 사용하면 프로토 타입을 제공 할 수 있습니다 오, 많은 객체를 생성 할 수 있습니다 원하는대로 나중에 속성을 변경하십시오 대학 방법 등 우리가 다른 객체 지향 언어를 위해하는 것처럼 객체를 생성하고 객체를 생성 한 후, 해당 속성 중 하나를 삭제하려면, 그렇다면 단순한 무선 키보드가 있습니다

확인을 삭제하고 삭제합니다 우리가 여기있는 것과 같은 물건 속성 그 대상이 생성 된 사람 이제 모든 속성을 반복하고 싶다면 이 사람의 in 연산자에서 말했듯이 for 루프를 사용할 수 있습니다 오른쪽에서 사용하는 경우 귀하가 목록을 작성한 in 연산자 왼쪽에서 왼쪽으로 반복하고 싶습니다 그것의 색인 일 것이다

여기 색인은 아무것도 아닙니다 연령대 등 그래서 그것은 그 속성들에 나오는 것입니다 그러면 OK입니다 해당 속성 중 하나를 삭제 한 다음 다시 확인하십시오 속성을 삭제 한 후에 우리는 모든 속성을 갖습니다

아직 거기 있니? 이 코드를 실행 해 봅시다 우리가 가지고있는 그래서 우리는 한 사람으로서 피투성이가되었습니다 좋아요 심지어 우리는 여기에 사람이 있습니다

하나 더 개체를 만들어 봅시다 변수 트레이너가 같음 to this 그래서 변수 트레이너는 다양한 속성을 가지고 있습니다 트레이너 CABC 쉼표 와목의 과목은 아마도 과목입니다 배열을 제외하고는 Mac을 사용합니다 좋아, 그럼 물리학 말해라 그런 화학보다 뭔가

그런 다음 어쩌면 가르칩니다 가르치는 한 가지 속성은 누구에게 가르치는가? 괜찮아 어쩌면 그 첫 해를 알 수있을 것입니다 2 년 2 년 나이가 들어서도 하나의 재산 60이에요 그래서 이것은 변수이거나 이것은 트레이너 객체입니다

그것은 만들어졌습니다 좋아,이 트레이너를 통해 반복하고 싶다면 그리고 나는 당신이 콘솔 DOT 로그 전체를 쓰길 원한다 그것이 가지고있는 속성 괜찮아 내가 할 수있는 일은, 이 속성의 가치를 알 수 있습니다

나는 조련사 점 이름이 인쇄 된 것만 말할 수있다 또는 DOT의 과목에서 트레이너 도트를 가르칩니다 하지만 내가이 값들을 모두 원한다면 우리가 할 수있는 4 가지 속성은 뭔가를 사용할 수 있다는 것입니다 외국 루프 AP를위한 외국 루프처럼 좋아,이 트레이너라는 변수를 만듭니다 재산처럼 이 숙박 시설에 당신은 아무것도 추가하지 않습니다

그러나이 값은 P 그래서 연설을 추가하는 동안 우리는 공간을 추가합니다 여기에 공간이 추가되었습니다 좋아요, 그래서 모든 재산은 공간으로 나뉘어져 있습니다 또는 다음과 같은 공간을 가질 수 있습니다

그렇게함으로써 그것은 neater하고 이러한 속성을 로그에 저장하려고합니다 우리가 가지고있는 이것이 우리에게 효과가 있는지 봅시다 나는 이걸 달린다 그래서 첫째로 그것은 피험자의 이름을 정한 다음 가르치고 나서 H이므로 이전에 속성 값은 정의되지 않았습니다

권리? 그런 다음 정의되지 않은 후에 만 ​​이름과 같은 것을 얻습니다 그래서 당신도 그것을 만들 수 있습니다, 당신은 null 또는 뭔가 알아 undefined가 해제되는지 보겠습니다 값으로 null이되거나 뭔가 있어야합니다 빈 문자열처럼 빈 문자열을 여기에 먹는 사람 출력을 얻을

괜찮아 이제 속성을 삭제 해 봅시다 트레이너 h 삭제 오케이, 그래서 우리는 키워드 delete를 사용했습니다 그런 다음 객체의 이름을 사용하여 속성에 점을 찍습니다 괜찮아

이제 삭제 후 보도록하겠습니다 해당 속성의 값은 무엇입니까? 그것은 변화 하는가 아니면 동일하게 남아 있는가? 그럼 삭제하기 전에요? 그리고 이것은 게시물 삭제입니다 이름은 Trina입니다 여기에 복사 할 수 있습니다 그래서 아무 문제도 없을 것입니다

이제 부동산에서 삭제 된 후 우리는이 건물의 루프를 따라 가지 않았습니다 이 변수에있는 것이 무엇이든지간에 삭제 후 그대로 내가 그와 같은 것을 통과한다면, 그래서 지금 내가 무엇이 올지 보자 그 전에는 출력으로 그냥이 속성을 지 웁니다

빈 값으로 다시 초기화하겠습니다 삭제 후 볼 수 있습니까? 나이가 너무 멀어졌습니다 속성에 남아 있지 않기 때문에 이것은 변수의 속성을 삭제하는 방법 그래서 우리는 끝이났습니다 객체를 어떻게 만들 수 있습니까? 우리는 어떻게 그 재산에 접근합니까? 우리는 어떻게 그것에 접근합니까? 그것은 우리에게 주어진 것입니다

그래서 우리는 이러한 모든 속성을 변경할 수 있습니다 방법을 사용하여 우리는 몇 가지 방법을 정의 할 수 있습니다 개체 내에서 속성을 변경합니다 우리가 타입을 가지고있는 것처럼 우리는 메소드 디스플레이 시간을 가졌습니다

메소드 호출을 하나 더 변경할 수 있습니다 변경 유형에서는 유형을 변경할 수도 있습니다 그래서 우리는 또한 자신의 방법을 사용하여 모든 속성을 변경할 수 있습니다 이것이 우리가 객체를 만드는 방법입니다 이것이 우리가 객체의 속성을 만드는 방법입니다

그런 다음 방법 객체와 같은 더 큰 주제를 학습 한 후에 객체의 어떤 물건이있다 우리는 이미 준비되어있는 준비가되어 있습니다 개체 대학 문서를 보았다 그것은 정말로 우리에게 주어진 것입니다 좋아, 우리는 만들지 않았다

그 문서 객체에는 많은 메소드가 정의되어 있습니다 우리가 다루는 이 세션의 끝에서 비슷한 우리는 하나 더 개체가 있습니다 그것은 브라우저에 의해 우리에게 제공됩니다 그리고 개체의 이름은 개체 개체, 브라우저 개체 모델이라고도합니다

어떻게 보일지 계층 구조를 보자 뭔가 변경하고 싶다면 관련이 있습니다 창문에, 너 볼거야? 좋아, 현재 HTML을 열면 창을 보게된다 그 창문 바로 지금 뭔가를 바꾸고 싶다면이 창을 약간 변경하면됩니다 너와 너랑 아피스가 있어야 해

당신이 파이 (pi)로 그렇게하는 데 도움이 될 것입니다 나는 몇 가지 방법과있다 또는 그 창에 대한 약간의 변경을하는 수단 그래서 여기 있습니다 창 개체는 기성품입니다

이 객체를 사용하여 문앞에서 우리는 많이 할 수 있습니다 변경 사항을 창에 표시합니다 우리는 화면에서 볼 수 있습니다 이 창 객체의 계층 구조를 이해합시다 좋아요

다른 많은 물건들이 있습니다 우리가 그걸로 Ciated 우리가 접근 할 수있는 위치 객체가있는 것처럼 말입니다 좋아, 위치 객체는 기본적으로 그러므로, 요소 중 하나를 할당하는 창 위치 찾기 하나의 오브젝트 색 이력 오브젝트가 하나 더 있는데, 그것은 또한 창과 관련되어 있습니다 개체는 문서 개체입니다 Navigator 객체와 Screen 객체가 있습니다

생각해 보면 알 겠어 당신은 그것을 시각화해야합니다 창문이 하나의 큰 물체 인 것처럼 이것처럼, 그것은 우리와 함께합니다 우리는 많은 속성을 가지고 있습니다 그것과 관련있는 것, 너는 위치를 안다

그래서 이것은이 속성과 함께 하나의 속성입니다 그 중 하나의 속성은 히스토리 탐색기와 화면입니다 역사는 Windows 객체의 또 다른 속성이며, 그것은 다시 대상이됩니다 네비게이터 네 좋아, 또 하나의 속성인데 다시 개체입니다

좋아요 화면은 다시 한 가지 속성입니다 괜찮아 그래서이 객체에 접근하려면, 네가 할 수있는 일은 창 개체에 속성 이름을 사용할 수 있습니다 또는 단순히 속성 이름도 우리를 도울 것입니다 그 자체가 또 하나의 대상이기 때문에 그것은 창조되었습니다

그래서이 창 객체는 이제이 많은 속성들을 다시 가지고 있습니다 문서 객체를 보러 간다면 많은 것이 있습니다 이 속성들에는 이미지 객체가 있습니다 그것은 가지고있는 형태 주제를 가지고 있습니다, 당신은 당신이 상상할 수 있도록 링크 객체를 알고 있습니다 있잖아,이게 뭔가 이것은 다시 고유 한 속성을 가진 객체입니다

당신이 형식과 같은 것을 가지고있을 때, 알았어 그 다음에 너를 피사체로 찍는다 괜찮아 그래서 이것은 귀하의 창 개체가 어떻게 생겼는지 그리고 이것은 무엇입니까 그 계층 구조가 어떻게 세부 사항에 들어가게되는지 이 객체의 각각에 대한 설명과 기본 작업 이해 그것이 어떻게 작동하는지, 그리고 우리가이 물체들을 사용하여 무엇을 할 수 있는지 또는 응용 프로그램의 모양과 느낌에 도움이되는 방법 따라서 기본적으로 브라우저 객체는 전역 객체입니다

전역 개체에 의해 우리는 우리가 그들을 창조하지 않았다는 것을 의미했습니다 그들은 브라우저에서 우리에게 주어진 사용 준비가되어 있습니다 또는 당신이 생각할 수있는 자바 스크립트 코드 전체에서 사용할 수 있습니다 그것은 어디에도 없을 것입니다

그들이 어디에서나 사용할 수 있다는 것을 알 수 없다 범위는 자바 스크립트 전체에서 발생합니다 브라우저 객체 모델은 자바 스크립트 코드가 상호 작용하도록 허용 브라우저 속성 및 아래에 표시된 이미지 어떤 것도 아니다 창 개체의 계층 구조 주요 개체는 창 개체입니다

속성은 다음과 같습니다 위치 기록 문서가 화면 문서를 탐색합니다 다시 많은 속성 양식 이미지와 링크입니다 창 객체 인 첫 번째 객체를 봅시다 그래서 B om object의 첫 번째 객체 그것은 루트 객체와 같은 윈도우 객체입니다

우리가 가진 것은 다시, 전역 변수와 모든 메소드 우리는 모든 방법을 학습 할 수 있다고 말했습니다 어떻게 우리가 움직일 수 있는지와 같은 창이 보입니다 어떻게 크기를 조정할 수 있습니까? 좋아요, 그래서 우리는이 창 개체로 모든 것을 할 수 있습니다 네가 사용하는 것처럼 창을 열면 새 창이 열립니다 당신이 창 점을 닫는 방법 그것을 사용하는 경우에 현재 창을 닫습니다

당신이 창문으로 옮기는 것과 같은 것을 사용한다면, 우리는 다른 위치로 이동할 것입니다 그러나 그것이 전체 화면 인 경우, 당신은 그 사실을 조금도 깨닫지 못할 것입니다 움직였다 높이와 너비 만 조정하면됩니다 좋아, 작은 창으로 만들면 움직이는 재산이된다

현재 창 크기를 조정할 수 있음을 알 수 있습니다 이 창 개체로 훨씬 더 많은 작업을 수행 할 수 있습니다 우리에게 Hands-On을 줄 수있는 몇 가지 시도를 해보 죠 정확하게 어떤 윈도우 객체가 보이는지 P om 객체라는 새로운 파일을 만들어 봅시다

좋아, 음, 여기에이 파일을 저장하십시오 DOT JavaScript 확장 기능 그럼 이걸 옴 개체로 만들면됩니다 당신은 단지 말할 수 있습니다, 너는 창을 안다 이 객체는 쉽게 사용할 수 있으며 많은 옵션이 있습니다

우리가 가지고있는 하나의 경고 기능이 있습니다 우리는 보통 옳은 것을 사용하고 우리는 그것을 직접 사용합니다 원래 이것은 윈도우가있는 함수입니다

이 창 개체를 사용하여 좋아요 이 함수를 호출 할 수 있습니다 이것은 윈도우 객체에 정의 된 메소드이며, 그러나 우리는 기본적으로 그것을 사용할 수 있습니다 창은 객체이기 때문에 우리는 왜 그것을 사용할 수 있습니까? 그것은 우리가이 모든 방법들을 부르는 데 도움이됩니다 항상이 객체를 사용할 필요는 없습니다

해당 속성을 직접 사용할 수 있습니다 메소드를 직접 사용할 수 있습니다 이 창을 쓰지 않고 점을 보여 주지만 문법으로 창 점이 OK 방금 창문이 열렸다면 괜찮아 그래서 이것은 내 JavaScript입니다

괜찮아 내 HTML 파일에이 자바 스크립트를 추가하겠습니다 소스를 추가하면 죽을 것입니다 또는 스크립트가 아닌 작은 개체 다시 한번 그것을 실행하십시오

여기에 탭이 하나 더 있음을 알 수 있습니까? 그래서 한 번 더 창문이 열렸습니다 만약 내가 그것을 더 깔끔하게 쓰면 그게 내가 여기 필요한 모든 것을 말하면 되 잖아 나는 빈 창이 필요하다 URL 이외에는 URL을 제공하지 않습니다 그것은 빈 URL을 누른 다음 그것을 말하는 이름을주고 싶습니다 새 창

모델 기능 뭔가 추가하고 싶으면 여기에 추가해야합니다 숨기기와 같은 것이 백 명과 같아야합니다 이는 200 ℃와 같아야한다 그리고 그게 제가 여러 번 열려고하는 것입니다

이 스타일의 창문 그러니 이제 가자 그래서 이것은 저에게 분명히 저 타입의 창을 줄 것입니다 변수를 새 윈도우라고 말하면됩니다 좋아, 그럼이게 새 창이야

이 새로운 창을 사용하여 생성 된 내가 뭔가를 사용하면 점 나는이 같은 다른 장소로 이동하려고합니다 좋아, 내가 x 축과 y 축으로 준 위치 이것이 우리에게 효과가 있는지 봅시다 우리는 팝업 차단기를 이해했습니다 항상이 팝업 차단기를 허용했습니다

너는 창을 볼 수있다 그것은 만들어졌고 항상 무언가를 가지고 왔습니다 너도 알다시피 창이 이미 생성 된 것을 볼 수 있다면 그래서 다시 만들지 않을거야 이걸 닫으면 한 번만 더 만들거야 크기도 알맞게 작은 크기를 차지했습니다

내가 여기에 URL을 포기했다면 파란색 더블 HTTP 콜론 슬래시 w 점이 googlecom을 좋아합니다 내가 이것을 시도하자 그래서 나를 위해 구글을 열어 놓았을 것입니다 괜찮아

그래서 이것은 사용할 수있는 메소드와 윈도우 객체의 모습 창을 열어서 이동하려면 현재 창을 닫을 새 창 윈도우가 생성 한 창을 사용하고 싶다면, 그 창을 닫으려면 오른쪽으로 그래서이 닫기 메소드를 사용하여 창을 닫을 수 있습니다 그래서 보자 심지어 열어서 닫았습니다 좋아요, 현재 창을 닫으려면, 계속되고있다 그래서 당신은 단지 창 닫기를 저장할 수 있습니다

그래서 현재 창을 닫고 되돌아갑니다 이전 창으로 그래서 이것은 윈도우 객체를 사용하는 방법입니다 일부 창 관련 작업을 수행 할 수 있습니다 그래서 이것을 모든 함수에 넣자

따라서 함수 창 작업을 저장할 수 있습니다 좋아, 너 안에있어 이 모든 함수 나 실행 문을 쓸 것입니다 당신이 쓰고 싶은 것 그리고이 창을 사용할 때마다 그러면이 창 작업을 호출 할 수 있습니다

그래서 매번 지금은 부르지 않을 것입니다 그래서이 새로운 DOT 또는 첫 번째 도트 HTML을 열면 Google 크롬 좌석이 가까이에 없습니다 창 작업을 호출하지 않았기 때문에 괜찮아 이것은 우리가 가지고있는 창 객체에 관한 것입니다 앞으로 나아 갑시다

현재 어떤 화면 개체입니까? 나는 당신의 화면이 윈도우 객체의 하나의 속성이라고 말했기 때문에 네, 물론 윈도우 도트 스크린을 사용할 수 있습니다 하지만 직접 화면을 사용할 수 있습니다 화면 개체를 직접 사용할 때 암시 적으로 윈도우 객체가 그것에 첨부됩니